Skip to content

feat(web): render the input model into the editable dom - #734

Draft
sbarczyk wants to merge 4 commits into
feat/web-input-importfrom
feat/web-input-renderer
Draft

feat(web): render the input model into the editable dom#734
sbarczyk wants to merge 4 commits into
feat/web-input-importfrom
feat/web-input-renderer

Conversation

@sbarczyk

@sbarczyk sbarczyk commented Sep 1, 2026

Copy link
Copy Markdown
Collaborator

Adds the renderer layer of the web input: the model (plain-text buffer + formatting and block ranges) is projected into paragraphs with style runs and written into the editable DOM with a minimal diff.

  • InputProjection: computeStyleRuns flattens overlapping formatting ranges into disjoint runs (boundary-event sweep, same idiom as the serializer); projectParagraphs splits the buffer into per-line paragraphs with block metadata, with zero-length anchors claiming their line.
  • DomRenderer: canonical DOM shape (one div per paragraph, one span per run, <br> in empty lines, links as spans with data-url). Updates mutate existing nodes in place (nodeValue, className) so the caret and IME are never disturbed, and a prefix/suffix window diff keeps a single edit down to a single DOM mutation.
  • inputStyles: stylesheet generated from the shared defaults (DEFAULT_NORMALIZED_STYLE, the input style normalizer, heading and list constants from the model). List markers are drawn via ::before from data-depth/data-ordinal, mirroring the native marker drawer. Base typography is a temporary stand-in until the style prop arrives with the JS API layer.

Jest unit tests cover the projection; the renderer will be exercised end to end by the Playwright flow tests arriving with the editing shell. Stacked on #727.

@sbarczyk sbarczyk changed the title feat/web input renderer feat(web): render the input model into the editable dom Sep 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant