generate exact diffs of rich text by tracking all changes in a wysiwyg html editor

all diff-algos will, in rare cases, produce "false diffs" which are not intended by the user. the diff format is always ambiguous, since there are many representations of one change

deprecated

this was just a proof of the "live diff html editor" concept

probably the best candidate to implement a FOSS "track changes" editor is the prosemirror rich text editor, with support for live collaboration via y-prosemirror and yts

• https://github.com/milahu/prosemirror-track-changes-demo based on fiduswriter

similar but different: track changes as commits

• https://prosemirror.net/examples/track/
  • https://github.com/ProseMirror/website/blob/master/example/track/index.js
• https://github.com/newsdev/prosemirror-change-tracking-prototype
• https://github.com/TeemuKoivisto/prosemirror-track-changes-example

ckeditor5 has a commercial track changes but we want a FOSS solution

codesandbox.io: live diff html editor

git clone https://github.com/milahu/live-diff-html-editor.git
cd live-diff-html-editor
npm install
npm run start

• feedback: allow users to edit html documents in their browser and generate patches in unidiff format (diff -u)
• postprocessing: edit diff files to optimize the <del> and <ins> chunks for human-readability

we use inputevent and selectionchangeevent to build an exact live diff view of the user input

we use the contenteditable="true" attribute to make html contents editable

there are many edge-cases to solve ...

• insert text. this only requires to insert a <ins> tag, and continued inputs simply append to that <ins> tag
• delete text without crossing tag boundaries. simple. the cursor is by default placed after the <del> tag (forward delete as default), except when the user hits backspace, then the cursor is placed before the <del> tag

• delete text across tag boundaries. non-trivial. some bugs are known
• merge <ins> and <del> tags. non-trivial. not implemented
• inserting text into a <del> should be a noop. simple

• mblink/htmldiff.js

this could be interesting for the pijul VCS, where exact diffs are desired

• hypothesis annotation platform
  • self-hosted hypothesis, cos all hosters are only publishers (who will censor content they dont like) (also see gab's dissenter app)
• https://www.w3.org/TR/annotation-protocol/
• https://github.com/recogito/recogito-js 60 stars
• https://github.com/zhan-huang/text-annotator 6 stars
• https://github.com/k-son/simple-text-annotations 1 star
• old projects
  • https://github.com/openannotation/annotator/ 2500 stars
  • https://github.com/FUB-HCC/neonion 70 stars
  • https://github.com/szabyg/annotate.js 60 stars
  • https://github.com/SuLab/YPet 30 stars
  • https://brat.nlplab.org/ year 2012
  • https://github.com/jamiemcg/moodle-collaborative-annotation plugin for moodle, 4 stars

• https://github.com/issue-db/issue-db 50 stars, year 2018
• https://github.com/DavidBruant/github-as-a-database 10 stars, year 2018

these tools focus on low-latency collaboration (real-time collaboration), similar to text chats or agile software development

• https://geovation.github.io/canvas-shared-editor "This blog describes 3 potential open-source tools (TogetherJS, Firepad and ShareDB)"
• https://firepad.io/ by google
• https://togetherjs.com/ by mozilla
• https://prosemirror.net/
  • https://stackoverflow.com/questions/58887843/how-do-i-perform-track-changes-in-the-quill-editor-just-like-google-docs
• https://convergence.io/
• https://github.com/share/sharedb backend database
• https://ckeditor.com/ckeditor-5/features/ commercial
• https://github.com/collaborativejs/collaborative-js
• backends: https://www.tag1consulting.com/blog/evaluating-real-time-collaborative-editing-solutions-top-fortune-50-company
  • https://github.com/yjs/yjs with bindings for editors:
    • https://github.com/ProseMirror/prosemirror rich text editor
    • https://github.com/ianstormtaylor/slate rich text editor, built on React (boo!)
    • https://github.com/quilljs/quill rich text editor
      • https://stackoverflow.com/questions/58887843/how-do-i-perform-track-changes-in-the-quill-editor-just-like-google-docs
      • https://stackoverflow.com/questions/58887843/how-do-i-perform-track-changes-in-the-quill-editor-just-like-google-docs/65288202#65288202
    • https://codemirror.net/ source code editor
    • https://microsoft.github.io/monaco-editor/ source code editor
• Open source collaborative text editors @ https://news.ycombinator.com/item?id=19845776

• slate
• trix 200 KB
• etherpad-lite
• ckeditor5 500 KB
  • commercial track changes feature
• tinyMCE core (old)
• firepad
• https://prosemirror.net/ with change tracker
• pell 4 KB (smallest editor) (old)
• quill built for compatibility and extensibility (old)
• Trumbowyg requires JQuery

more: https://github.com/JefMari/awesome-wysiwyg

• https://github.com/heartexlabs/awesome-data-labeling

license is CC0-1.0: zero limits and zero warranty