Every composer edits markdown source, on nldd-text-editor #279

Merged

robbertbos merged 1 commit from nldd-text-editor-composer into main 2026-08-13 15:57:43 +00:00

Conversation 0 Commits 1 Files changed 90 +5666 -4868

robbertbos commented 2026-08-09 21:53:09 +00:00

Owner

Copy link

Closes #168.

One commit on top of main.

Two changes, and the second does not need the first

1. NLDD is imported per component instead of through the barrel (WDR-0005). import '@nldd/design-system' resolves to one pre-bundled chunk of all ~90 components; nothing tree-shakes out of it and Waggle renders 36. src/nlddImports.test.ts guards it by resolving each rendered tag through the package's own exports map - it caught a missing import for nldd-keyboard-shortcut when main's keyboard work merged in.

2. Every composer edits markdown source, on nldd-text-editor (WDR-0006). Tiptap is WYSIWYG over a node tree, and the markdown we send was reconstructed on the way out by tiptap-markdown. That reconstruction was where the bugs were: ~town-square came out \~town-square, task lists gained a blank line, hard breaks needed a custom node. The new editor's document is the markdown, so there is nothing to reconstruct. The syntax would stay on screen; it is hidden here except on the construct the caret is in.

Reply, new message and notes all use it. Notes stop being a second implementation of the same composer: they differ by one flag and one absent handler. Tiptap, ProseMirror and tiptap-markdown leave the tree.

What the subclass is for

<waggle-text-editor> extends the element over the view / buildExtensions() / reconfigure() seam it documents as protected, because four things are not in the public API:

	why the element cannot do it
insert at the caret	value = replaces the document and drops the caret to 0
our own @ and : typeaheads	its own is @-only and writes [@Label](user:id) where Mattermost wants @username; a second autocompletion({override}) throws a config merge conflict
marker hiding	visible syntax is a deliberate choice there
<u> / <mark>	notes-only, no command for them

Plus task-list checkboxes (GFM parses - [ ], nothing styles it) and a quote bar (the editor styles a quote italic with no bar, while NLDD's rendered blockquote has one).

A rename of any protected member fails the build rather than failing silently - that is the reason to sit on those rather than on internals. The element is marked beta; that and hideMarkers.test.ts are what to watch on an NLDD bump.

Defects found and fixed

Each has a test that was first run against the broken behaviour.

• The reply box had no accessible name - the element logged WCAG 4.1.2 on every open. Missed because vue-tsc never binds aria-* to a prop, so a call site that omits it type-checks like one that passes it. The prop is accessibleLabel now, and required.
• A double-click stopped selecting a word. Forwarding padding clicks to the editor also caught clicks inside it, because a click in a shadow root is retargeted to the host and sailed past the guard; the second click collapsed the selection.
• Escape peels one layer per press. A focused ProseMirror delivered the keydown with defaultPrevented already true, so the dialog's cancel never ran; CodeMirror does not. It now closes the link bar first, then leaves the field for the toolbar, then closes the window - the middle step is the way out now that Tab indents. Closing the link bar or emoji picker also used to drop focus on <body>.
• Tab did nothing inside a code fence. The comment said it indented there; the fall-through it relied on only existed for Mod-]. Tab now indents by two spaces on a fence content line and Shift+Tab outdents, never on the ``` line itself (four spaces there stop it being a fence). Both directions are written out rather than taken from CodeMirror, whose indentLess rewrites a line's whole leading whitespace run and so converts pasted tabs to spaces - inside the one region shipped byte for byte.
• **The was the last marker still on screen** when the caret was elsewhere. Hiding it was blocked by the surface: NLDD tints a block's content lines and deliberately leaves the fence lines clean, so hiding the backticks left two blank rows around the tint, and an empty block - whose only lines are fence lines - vanished. The surface now covers the fence rows, in NLDD's own classes rather than a copy of its private tokens, with a test that fails if those class names go. Language name kept as a label; an unclosed fence keeps its.
• Dropping a text file attached it and pasted its contents into the message. CodeMirror reads a dropped file with a FileReader and inserts the text, and runHandlers only calls preventDefault, so the event still reached the dropzone and uploaded it too. Measured: dropping a notes.txt on a composer holding hallo gave GEHEIM BESTANDSINHOUDhallo plus an attachment.
• Pasting a screenshot over selected text deleted the text. The built-in paste handler runs doPaste(view, '') when the clipboard holds only files, which replaces the selection with nothing. Both are guarded now by a domEventHandlers extension that claims the event before the built-in and lets it bubble on to the uploader.
• A : or @ inside code opened the emoji or mention list, and Tab would have committed a pick into text Mattermost renders literally.
• > markers were hidden on the interior lines of a quoted code block, so the code read as unquoted while the source still carried the quote.
• Cmd/Ctrl+] and [ could turn a message into a code block. They come in with CodeMirror's defaultKeymap and indent any line by two spaces; two presses give four, which renders as <code>. macOS gives both keys to browser history, so they are swallowed rather than rebound. Tab nests a list item and Shift+Tab un-nests it, with toolbar buttons for both. On a line where indentation has no markdown meaning Tab keeps moving focus - one to three leading spaces are dropped by the renderer and the fourth makes a code block, so there is nothing useful for it to do.
• The new-message window accepted typing while a message was being scheduled.
• notesMarks was applied once and never watched, and toggleUnderline/toggleHighlight wrote a literal <u> whether or not the extension was loaded - only a v-if stood between that and a Mattermost message.
• A click on the composer padding restored the old caret instead of placing it where you clicked.
• List bullets and numbers rendered in the dimmed colour.
• The typing surface was capped in rem, a unit that tracks the root font rather than the editor's line, at a size that ate the room the toolbar needed on a short window.

Prop cleanup

A design round asked whether the options belong in a config object. They do not: after deleting what is dead there are three real feature switches, and two of them are dependencies whose presence is the switch. But getting to that count fixed things - five switches had no caller, and three features needed two props each to stay coherent (a paperclip and its handler, a mention fetcher and its account, marks and the buttons that toggle them). Those are one value each now. 27 declared props across the three layers become 21.

Tests the work exposed as missing

• FormatToolbar had none. It is mocked in one suite and mounted-but-never-driven in two others, so making the paperclip unconditional passed the whole suite.
• Its twenty icon names were unguarded - a retired NLDD icon renders an empty box with no warning.
• Nothing covered the toolbar's 457-576 px band. Deleting a rule that looked dead would have made link, bijlage and emoji reachable from nowhere; an adversarial pass over the plan caught it before it shipped.

Bundle

Same tree, three builds, gzip -9 over every emitted .js:

	raw	gzip	entry chunk
main (barrel + Tiptap)	3284 kB	919 kB	747 kB
à la carte + Tiptap	1894 kB	529 kB	426 kB
this branch	1979 kB	556 kB	454 kB

The 39% is change 1. The editor swap costs 27 kB: CodeMirror and @lezer/markdown are larger than what they replace, and they share one copy with the element, which imports @codemirror/* as bare specifiers.

Verification

typecheck, vitest 1153, playwright 113 (3 skipped), build, eslint 0 errors, pre-commit. Driven by hand in the browser at each step.

Two things worth knowing for the next person: a typo in an optional prop name produces no diagnostic (strictTemplates is off, and turning it on is 142 errors of its own), and HMR does not rebuild the adopted stylesheet inside a shadow root - a CSS change there needs a full reload before it means anything.

Closes #168. One commit on top of main. ## Two changes, and the second does not need the first **1. NLDD is imported per component instead of through the barrel** (WDR-0005). `import '@nldd/design-system'` resolves to one pre-bundled chunk of all ~90 components; nothing tree-shakes out of it and Waggle renders 36. `src/nlddImports.test.ts` guards it by resolving each rendered tag through the package's own exports map - it caught a missing import for `nldd-keyboard-shortcut` when main's keyboard work merged in. **2. Every composer edits markdown source, on `nldd-text-editor`** (WDR-0006). Tiptap is WYSIWYG over a node tree, and the markdown we send was reconstructed on the way out by `tiptap-markdown`. That reconstruction was where the bugs were: `~town-square` came out `\~town-square`, task lists gained a blank line, hard breaks needed a custom node. The new editor's document *is* the markdown, so there is nothing to reconstruct. The syntax would stay on screen; it is hidden here except on the construct the caret is in. Reply, new message and notes all use it. Notes stop being a second implementation of the same composer: they differ by one flag and one absent handler. Tiptap, ProseMirror and `tiptap-markdown` leave the tree. ### What the subclass is for `<waggle-text-editor>` extends the element over the `view` / `buildExtensions()` / `reconfigure()` seam it documents as protected, because four things are not in the public API: | | why the element cannot do it | |---|---| | insert at the caret | `value =` replaces the document and drops the caret to 0 | | our own `@` and `:` typeaheads | its own is `@`-only and writes `[@Label](user:id)` where Mattermost wants `@username`; a second `autocompletion({override})` throws a config merge conflict | | marker hiding | visible syntax is a deliberate choice there | | `<u>` / `<mark>` | notes-only, no command for them | Plus task-list checkboxes (GFM parses `- [ ]`, nothing styles it) and a quote bar (the editor styles a quote italic with no bar, while NLDD's rendered blockquote has one). A rename of any protected member fails the build rather than failing silently - that is the reason to sit on those rather than on internals. The element is marked **beta**; that and `hideMarkers.test.ts` are what to watch on an NLDD bump. ## Defects found and fixed Each has a test that was first run against the broken behaviour. - **The reply box had no accessible name** - the element logged WCAG 4.1.2 on every open. Missed because vue-tsc never binds `aria-*` to a prop, so a call site that omits it type-checks like one that passes it. The prop is `accessibleLabel` now, and required. - **A double-click stopped selecting a word.** Forwarding padding clicks to the editor also caught clicks *inside* it, because a click in a shadow root is retargeted to the host and sailed past the guard; the second click collapsed the selection. - **Escape peels one layer per press.** A focused ProseMirror delivered the keydown with `defaultPrevented` already true, so the dialog's cancel never ran; CodeMirror does not. It now closes the link bar first, then leaves the field for the toolbar, then closes the window - the middle step is the way out now that Tab indents. Closing the link bar or emoji picker also used to drop focus on `<body>`. - **Tab did nothing inside a code fence.** The comment said it indented there; the fall-through it relied on only existed for `Mod-]`. Tab now indents by two spaces on a fence content line and Shift+Tab outdents, never on the ``` line itself (four spaces there stop it being a fence). Both directions are written out rather than taken from CodeMirror, whose `indentLess` rewrites a line's whole leading whitespace run and so converts pasted tabs to spaces - inside the one region shipped byte for byte. - **The ``` was the last marker still on screen** when the caret was elsewhere. Hiding it was blocked by the surface: NLDD tints a block's content lines and deliberately leaves the fence lines clean, so hiding the backticks left two blank rows around the tint, and an empty block - whose only lines are fence lines - vanished. The surface now covers the fence rows, in NLDD's own classes rather than a copy of its private tokens, with a test that fails if those class names go. Language name kept as a label; an unclosed fence keeps its ```. - **Dropping a text file attached it and pasted its contents into the message.** CodeMirror reads a dropped file with a `FileReader` and inserts the text, and `runHandlers` only calls `preventDefault`, so the event still reached the dropzone and uploaded it too. Measured: dropping a `notes.txt` on a composer holding `hallo` gave `GEHEIM BESTANDSINHOUDhallo` plus an attachment. - **Pasting a screenshot over selected text deleted the text.** The built-in paste handler runs `doPaste(view, '')` when the clipboard holds only files, which replaces the selection with nothing. Both are guarded now by a `domEventHandlers` extension that claims the event before the built-in and lets it bubble on to the uploader. - **A `:` or `@` inside code opened the emoji or mention list**, and Tab would have committed a pick into text Mattermost renders literally. - **`>` markers were hidden on the interior lines of a quoted code block**, so the code read as unquoted while the source still carried the quote. - **Cmd/Ctrl+] and [ could turn a message into a code block.** They come in with CodeMirror's `defaultKeymap` and indent any line by two spaces; two presses give four, which renders as `<code>`. macOS gives both keys to browser history, so they are swallowed rather than rebound. **Tab** nests a list item and **Shift+Tab** un-nests it, with toolbar buttons for both. On a line where indentation has no markdown meaning Tab keeps moving focus - one to three leading spaces are dropped by the renderer and the fourth makes a code block, so there is nothing useful for it to do. - **The new-message window accepted typing while a message was being scheduled.** - **`notesMarks` was applied once and never watched**, and `toggleUnderline`/`toggleHighlight` wrote a literal `<u>` whether or not the extension was loaded - only a `v-if` stood between that and a Mattermost message. - **A click on the composer padding restored the old caret** instead of placing it where you clicked. - **List bullets and numbers rendered in the dimmed colour.** - **The typing surface was capped in `rem`**, a unit that tracks the root font rather than the editor's line, at a size that ate the room the toolbar needed on a short window. ## Prop cleanup A design round asked whether the options belong in a config object. They do not: after deleting what is dead there are three real feature switches, and two of them are dependencies whose presence is the switch. But getting to that count fixed things - five switches had no caller, and three features needed two props each to stay coherent (a paperclip and its handler, a mention fetcher and its account, marks and the buttons that toggle them). Those are one value each now. 27 declared props across the three layers become 21. ## Tests the work exposed as missing - **FormatToolbar had none.** It is mocked in one suite and mounted-but-never-driven in two others, so making the paperclip unconditional passed the whole suite. - **Its twenty icon names were unguarded** - a retired NLDD icon renders an empty box with no warning. - **Nothing covered the toolbar's 457-576 px band.** Deleting a rule that looked dead would have made link, bijlage and emoji reachable from nowhere; an adversarial pass over the plan caught it before it shipped. ## Bundle Same tree, three builds, `gzip -9` over every emitted `.js`: | | raw | gzip | entry chunk | |---|---|---|---| | `main` (barrel + Tiptap) | 3284 kB | 919 kB | 747 kB | | à la carte + Tiptap | 1894 kB | 529 kB | 426 kB | | this branch | 1979 kB | 556 kB | 454 kB | The 39% is change 1. The editor swap *costs* 27 kB: CodeMirror and `@lezer/markdown` are larger than what they replace, and they share one copy with the element, which imports `@codemirror/*` as bare specifiers. ## Verification `typecheck`, `vitest` 1153, `playwright` 113 (3 skipped), `build`, `eslint` 0 errors, `pre-commit`. Driven by hand in the browser at each step. Two things worth knowing for the next person: a typo in an *optional* prop name produces no diagnostic (`strictTemplates` is off, and turning it on is 142 errors of its own), and HMR does not rebuild the adopted stylesheet inside a shadow root - a CSS change there needs a full reload before it means anything.

robbertbos force-pushed nldd-text-editor-composer from e32d135d24 to f7d46c4ab6 2026-08-10 15:36:01 +00:00 Compare

robbertbos changed title from A second composer engine on nldd-text-editor, and NLDD imported per component to Every composer edits markdown source, on nldd-text-editor 2026-08-10 15:36:27 +00:00

robbertbos force-pushed nldd-text-editor-composer from 763737f49d to 5b9f9bccff 2026-08-12 21:09:56 +00:00 Compare

robbertbos force-pushed nldd-text-editor-composer from 5b9f9bccff to c5ea3cc7e0 2026-08-12 21:43:40 +00:00 Compare

robbertbos force-pushed nldd-text-editor-composer from c5ea3cc7e0 to d52c7e4cb2 2026-08-12 22:03:59 +00:00 Compare

robbertbos force-pushed nldd-text-editor-composer from d52c7e4cb2 to 6b88a4774d 2026-08-12 22:17:46 +00:00 Compare

robbertbos force-pushed nldd-text-editor-composer from 6b88a4774d to 2c33ac17bf 2026-08-13 06:41:03 +00:00 Compare

robbertbos force-pushed nldd-text-editor-composer from 2c33ac17bf to d437b0f576 2026-08-13 07:25:14 +00:00 Compare

robbertbos force-pushed nldd-text-editor-composer from d437b0f576 to 21b3a8a842 2026-08-13 07:59:29 +00:00 Compare

robbertbos force-pushed nldd-text-editor-composer from 21b3a8a842 to ce0b36c254 2026-08-13 08:09:24 +00:00 Compare

robbertbos force-pushed nldd-text-editor-composer from ce0b36c254 to f2ec9eec39 2026-08-13 10:12:33 +00:00 Compare

robbertbos force-pushed nldd-text-editor-composer from f2ec9eec39 to e74c2169cf 2026-08-13 11:45:32 +00:00 Compare

robbertbos force-pushed nldd-text-editor-composer from e74c2169cf to 2d4c3c4f84 2026-08-13 13:05:22 +00:00 Compare

robbertbos force-pushed nldd-text-editor-composer from 2d4c3c4f84 to be3f5d94ad 2026-08-13 13:51:08 +00:00 Compare

robbertbos force-pushed nldd-text-editor-composer from be3f5d94ad to de93ed721e 2026-08-13 14:45:12 +00:00 Compare

robbertbos force-pushed nldd-text-editor-composer from de93ed721e to 5adca295a2 2026-08-13 14:56:51 +00:00 Compare

robbertbos force-pushed nldd-text-editor-composer from 5adca295a2 to 766a7f9f3d 2026-08-13 15:12:55 +00:00 Compare

robbertbos force-pushed nldd-text-editor-composer from 766a7f9f3d to 9557e63ea4 2026-08-13 15:20:42 +00:00 Compare

robbertbos force-pushed nldd-text-editor-composer from 9557e63ea4 to bf91e11643 2026-08-13 15:41:06 +00:00 Compare

robbertbos force-pushed nldd-text-editor-composer from bf91e11643 to 2451259a01 2026-08-13 15:52:17 +00:00 Compare

robbertbos merged commit 2451259a01 into main 2026-08-13 15:57:43 +00:00

robbertbos deleted branch nldd-text-editor-composer 2026-08-13 15:57:43 +00:00

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

bug

Something is not working

  

duplicate

This issue or pull request already exists

  

enhancement

New feature

  

help wanted

Need some help

  

invalid

Something is wrong

  

nldd ds

  

question

More information is needed

  

wontfix

This won't be fixed

No labels

bug

duplicate

enhancement

help wanted

invalid

nldd ds

question

wontfix

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

robbertbos/waggle!279

No description provided.