Skip to content

milahu/live-diff-html-editor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

live diff html editor

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

status

deprecated

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

prosemirror track changes plugin

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

similar but different: track changes as commits

other track changes plugins

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

live demo

codesandbox.io: live diff html editor

offline demo

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

use cases

  • 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

implementation

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

status

there are many edge-cases to solve ...

working

  • 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

todo

  • 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

related

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

annotation

github as data store

collaboration

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

rich text editors

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

data labeling for machine learning

license

license is CC0-1.0: zero limits and zero warranty