VDOM

The virtual dom (VDOM) is an abstraction layer over the DOM. All interactions with the document, by either plugins or directly by users, should be executed on the virtual dom rather than on the dom. The VDOM makes useful abstraction of certain DOM behaviors and this makes it easier to create a consistent behavior in the editor.

Currently the following interactions happen directly on the VDOM:

  • User interactions

    • creating/removing lists via the toolbar

    • indenting or unindenting lists via the toolbar

    • applying text styles via the toolbar or via their keyboard shortcuts

    • inserting or modifying tables via the toolbar

    • typing text

    • pressing enter

    • pasting content

    • copying content

    • cutting content

    • undo (ctrl+z and toolbar button)

    • using left right arrow keys inside the document

  • Plugin interactions:

    • highlighting text in the document when a hint is created

    • removing the highlight if a hint is removed

    • in the citation and template plugin: replacing or inserting content with HTML after a user action

    • updating RDFA attributes

    • replacing content

    • reading/analyzing document content

  • Core editor functionality:

    • expanding prefixes on rdfa attributes on elements

    • calculating differences after user interactions

    • notifying plugins of content and selection changes

  • Lump node support

    • when the cursor position changes, safeguard lump nodes (i.e. make sure the cursor can't enter the lump node)

The following is an incomplete list of interactions that still happen directly on the DOM:

  • User interactions

    • removing content with backspace

    • tabbing inside the document

    • using up down arrow keys inside the document*

    • moving the cursor with home,end, page up and page down*

*these just do default browser behavior for now, and may stay this way as they only move the cursor

The following is an incomplete list of interaction that currently are not supported, but should be implemented on the VDOM

  • User interactions:

    • deleting content with the delete key

    • redo

  • Power user interactions:

    • ctrl+backspace

    • ctrl+delete

    • drag and dropping text

    • shortcuts

Extra steps required for full VDOM support

  • everything should use operations to edit the VDOM

  • ranges and positions should auto/live update when the VDOM changes

  • provide a (non dom dependend) event system

  • when the cursor position changes, update the data-editor-position attributes in the dome (TBD if still necesarry)

Last updated