@dojo-ng/rich-text-criticmarkup 0.1.0 → 0.1.2

package/dist/plugin.js

@@ -6,7 +6,7 @@
  */
 import { html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
-import { $getNearestNodeFromDOMNode, $getSelection, $isRangeSelection } from "lexical";
+import { $getNearestNodeFromDOMNode, $getSelection, $isRangeSelection, TextNode } from "lexical";
 import { mergeRegister } from "@lexical/utils";
 import { getDefaultLocale, messages, registerDefaults } from "@dojo-ng/i18n";
 import { defineRichTextPlugin, ensureEditorStyles } from "@dojo-ng/rich-text";
@@ -14,7 +14,7 @@ import "@dojo-ng/popup-confirmation";
 import "@dojo-ng/button";
 import { CONTENT_CSS, CommentNode, DeletionNode, HighlightNode, InsertionNode, BreakNode, $isCommentNode, $isHighlightNode, } from "./nodes.js";
 import { deserializeCriticMarkup, serializeCriticMarkup } from "./format.js";
-import { PARAGRAPH_TOKEN } from "./grammar.js";
+import { PARAGRAPH_TOKEN, unmaskInlineFormat } from "./grammar.js";
 import { setSuggestionMode, isSuggestionMode, configureSuggestionMode } from "./suggestion-mode.js";
 import { markAtSelection, acceptMark, declineMark, acceptAllMarks, declineAllMarks } from "./resolution.js";
 import { createCommentPopupController } from "./comment-popup.js";
@@ -100,6 +100,17 @@ export function createCriticMarkupPlugin(options = {}) {
             };
             ctx.host.addEventListener("click", onHostClick);
             return mergeRegister(
+            // Safety net for `maskInlineFormat`: a masked character the mark transformers did not
+            // consume (a mark the markdown path could not pair, or one inside an inline code span)
+            // must never reach the document as a private-use code point. Those sentinels never
+            // occur in real text, so turning any that appear back into their literal character is
+            // always correct and a no-op otherwise.
+            ctx.editor.registerNodeTransform(TextNode, (node) => {
+                const current = node.getTextContent();
+                const unmasked = unmaskInlineFormat(current);
+                if (unmasked !== current)
+                    node.setTextContent(unmasked);
+            }), 
             // Mount CommentNode/BreakNode decorate() output (deferred from N1) and wire the
             // comment button to open the popup, once per button — the click handler resolves
             // the CURRENT node fresh each time rather than closing over one, so it never shows
@@ -149,23 +160,43 @@ export function createCriticMarkupPlugin(options = {}) {
 export const criticMarkupPlugin = createCriticMarkupPlugin();
 export default criticMarkupPlugin;
 // --- toolbar ------------------------------------------------------------------------------------
+/**
+ * A compact icon plus a name the ACCESSIBLE-NAME ALGORITHM sees but no sighted user does — visually
+ * clipped, never `display:none`/`aria-hidden` (either would drop it from the accessibility tree
+ * too, defeating the point). Both slot into `dj-button`'s DEFAULT slot alongside the icon slot, so
+ * the native `<button>` in its shadow root gets a real accessible name from its own rendered text
+ * content — the path `dj-button`'s own docstring calls "the common case," not `aria-label` on the
+ * host, which is the path six toolbar items were moved OFF of after a real axe run flagged it
+ * (`aria-prohibited-attr` on the role-less host, `button-name` on the shadow button whose only
+ * content was an `aria-hidden` icon). Restores the compact layout the visible-text swap gave up —
+ * found necessary in the same real consumer pass that found the two fixes above it (NovelMaker,
+ * Q1.7, 2026-09-27: "the text runs off the end of the toolbar... what happened to the icons?") —
+ * without reopening the violation the text swap was for: the icon is `aria-hidden` (decorative,
+ * the name already comes from the sr-only text) and the sr-only text is real, present content, not
+ * a host-level attribute a shadow boundary or a role-less element could make axe suspicious of.
+ * Verified against a real axe run in `tests/browser/rich-text-criticmarkup.test.js`, not assumed —
+ * see that file's own new case.
+ */
+function iconLabel(icon, text) {
+    return html `<span slot="icon" aria-hidden="true">${icon}</span><span class="dj-cm-sr-only">${text}</span>`;
+}
 function toolbarItems(ctx, confirmBulk) {
     const addCommentRef = createRef();
     const acceptAllContent = confirmBulk
         ? html `<dj-popup-confirmation confirm-label=${msg(ctx, "acceptAll")} @dj-confirm=${() => acceptAllMarks(ctx.editor)}>
 				<span slot="content">${msg(ctx, "confirmAcceptAll")}</span>
-				<dj-button kind="text" title=${msg(ctx, "acceptAll")}>${msg(ctx, "acceptAll")}</dj-button>
+				<dj-button kind="text" title=${msg(ctx, "acceptAll")}>${iconLabel("✓✓", msg(ctx, "acceptAll"))}</dj-button>
 			</dj-popup-confirmation>`
         : html `<dj-button kind="text" title=${msg(ctx, "acceptAll")} @click=${() => acceptAllMarks(ctx.editor)}
-				>${msg(ctx, "acceptAll")}</dj-button
+				>${iconLabel("✓✓", msg(ctx, "acceptAll"))}</dj-button
 			>`;
     const rejectAllContent = confirmBulk
         ? html `<dj-popup-confirmation confirm-label=${msg(ctx, "rejectAll")} @dj-confirm=${() => declineAllMarks(ctx.editor)}>
 				<span slot="content">${msg(ctx, "confirmRejectAll")}</span>
-				<dj-button kind="text" title=${msg(ctx, "rejectAll")}>${msg(ctx, "rejectAll")}</dj-button>
+				<dj-button kind="text" title=${msg(ctx, "rejectAll")}>${iconLabel("✗✗", msg(ctx, "rejectAll"))}</dj-button>
 			</dj-popup-confirmation>`
         : html `<dj-button kind="text" title=${msg(ctx, "rejectAll")} @click=${() => declineAllMarks(ctx.editor)}
-				>${msg(ctx, "rejectAll")}</dj-button
+				>${iconLabel("✗✗", msg(ctx, "rejectAll"))}</dj-button
 			>`;
     return [
         {
@@ -181,13 +212,49 @@ function toolbarItems(ctx, confirmBulk) {
             // already use here is what actually passes. `isActive`/`run` stay set too, so this item's
             // state is still checkable directly (headless tests read `item.isActive(ctx)`), even
             // though the core ignores them once `render` is present.
-            render: (c) => html `<dj-button
-					kind="text"
+            //
+            // `kind` switches to `"outlined"` while active, found missing in a real consumer's
+            // browser pass (NovelMaker, Q1.7, 2026-09-27): `aria-pressed` alone changes nothing a
+            // sighted mouse user can see — `dj-button` has no CSS reacting to it at all, the exact
+            // gap this project's own T10 track hit once before with a different attribute. Switching
+            // `kind` reuses `dj-button`'s OWN existing, already-themed outlined style (a persistent
+            // border in `--dj-color-primary-600`, confirmed to invert for dark mode by the same
+            // theme.css read that fixed `nodes.ts`'s `CONTENT_CSS`) rather than adding new CSS here
+            // that would need its own dark-mode proof.
+            render: (c) => {
+                const active = isSuggestionMode(c.editor);
+                return html `<dj-button
+					kind=${active ? "outlined" : "text"}
 					title=${msg(ctx, "suggestEdits")}
-					aria-pressed=${isSuggestionMode(c.editor)}
-					@click=${() => setSuggestionMode(c.editor, !isSuggestionMode(c.editor))}
-					>${msg(ctx, "suggestEdits")}</dj-button
-				>`,
+					aria-pressed=${active}
+					@click=${() => {
+                    setSuggestionMode(c.editor, !isSuggestionMode(c.editor));
+                    // isSuggestionMode is a WeakMap, entirely outside Lexical's own editor
+                    // state — no document mutation, no selection change, so NEITHER of the
+                    // core's two built-in re-render triggers (registerUpdateListener,
+                    // onSelectionChange) ever fires from this click. Without this the click
+                    // genuinely works (confirmed: isSuggestionMode(editor) flips) but the
+                    // DOM — aria-pressed, the kind="outlined" border decision 18's own fix
+                    // above depends on — stays stale until some UNRELATED later action
+                    // happens to re-render the toolbar, which is exactly the false-positive
+                    // shape that let this ship once already: a manual browser check that
+                    // clicked the button and then did something else right after read the
+                    // SECOND action's incidental re-render as proof the click worked. Found
+                    // by checking isSuggestionMode(editor) directly against the DOM
+                    // attribute after a click and nothing else — the same gap, and the
+                    // same fix (`ctx.host.requestUpdate()`), NovelMaker's own retired local
+                    // plugin had already hit for this exact button before this package
+                    // existed; `RichTextContext.host`'s own doc comment even names
+                    // requestUpdate as a reason a plugin holds a host reference.
+                    // `RichTextContext.host` is typed as the narrower `HTMLElement` for the
+                    // public API surface; it is always a `dj-rich-text`, a real
+                    // ReactiveElement, at runtime — the same cast `RichTextContext.host`'s
+                    // own doc comment invites by naming requestUpdate as a reason to hold it.
+                    c.host.requestUpdate();
+                }}
+					>${iconLabel("✎", msg(ctx, "suggestEdits"))}</dj-button
+				>`;
+            },
         },
         {
             id: "criticmarkup-accept",
@@ -211,7 +278,7 @@ function toolbarItems(ctx, confirmBulk) {
                     if (node)
                         acceptMark(c.editor, node);
                 }}
-					>${msg(ctx, "acceptMark")}</dj-button
+					>${iconLabel("✓", msg(ctx, "acceptMark"))}</dj-button
 				>`;
             },
         },
@@ -237,7 +304,7 @@ function toolbarItems(ctx, confirmBulk) {
                     if (node)
                         declineMark(c.editor, node);
                 }}
-					>${msg(ctx, "rejectMark")}</dj-button
+					>${iconLabel("✗", msg(ctx, "rejectMark"))}</dj-button
 				>`;
             },
         },
@@ -272,7 +339,7 @@ function toolbarItems(ctx, confirmBulk) {
                 const collapsed = isSelectionCollapsed(ctx.editor);
                 popup.open({ anchor, mode: collapsed ? "insert-bare" : "insert-anchored", text: "" });
             }}
-					>${msg(ctx, "addComment")}</dj-button
+					>${iconLabel("\u{1F4AC}", msg(ctx, "addComment"))}</dj-button
 				>`,
         },
     ];

package/dist/resolution.js

@@ -14,7 +14,7 @@
  * No confirmation here — `dj-popup-confirmation` gating `confirmBulk` is a toolbar-level concern
  * (Track T3), not baked into these functions themselves.
  */
-import { $createParagraphNode, $getNodeByKey, $getRoot, $getSelection, $isElementNode, $isRangeSelection, $isRootOrShadowRoot } from "lexical";
+import { $createParagraphNode, $createTextNode, $getNodeByKey, $getRoot, $getSelection, $isElementNode, $isRangeSelection, $isRootOrShadowRoot, $isTextNode } from "lexical";
 import { $isBreakNode, $isCommentNode, $isCriticMark, $isDeletionNode, $isHighlightNode, $isInsertionNode, } from "./nodes.js";
 import { SKIP_TAG } from "./suggestion-mode.js";
 /** The nearest CriticMarkup mark (any of the four kinds) containing the selection's anchor, or
@@ -48,6 +48,24 @@ export function acceptAllMarks(editor) {
 export function declineAllMarks(editor) {
     resolveAllMarks(editor, "old");
 }
+// Lexical's own reconciler (`updateDOMSelection`, read directly from the vendored
+// `Lexical.dev.mjs` rather than assumed) scrolls a COLLAPSED selection into view
+// whenever an update leaves the editor root focused and the browser's own native
+// selection no longer matches Lexical's internal one — which is exactly the shape
+// every caller here has: a toolbar or drawer BUTTON click, never a caret move, so
+// the native selection has almost always drifted to wherever the mouse last did
+// something selectable, while Lexical's own last-known selection is still sitting
+// wherever the author was last actually typing. Left untagged, resolving a mark
+// pulls the view back to THAT old typing position instead of staying on the mark
+// just resolved — reported against NovelMaker's Edits drawer 2026-09-27 ("hard to
+// double-check a change after accepting it"), but the mechanism is Lexical's own
+// reconciliation, not anything the drawer does, so every caller of `acceptMark`/
+// `declineMark`/`acceptAllMarks`/`declineAllMarks` — the toolbar's own accept/
+// reject buttons included — had the identical risk. `"skip-scroll-into-view"` is
+// not exported as a named constant anywhere in Lexical's own public API, but it is
+// the literal tag string its reconciler checks (`Lexical.dev.mjs`'s own
+// `updateDOMSelection`), matching how Lexical's own examples use it directly.
+const SKIP_SCROLL_TAG = "skip-scroll-into-view";
 function resolveMark(editor, node, side) {
     editor.update(() => {
         const fresh = $getNodeByKey(node.getKey());
@@ -59,8 +77,9 @@ function resolveMark(editor, node, side) {
     // applied synchronously, not silently batched to a later microtask. Tagged with SKIP_TAG so
     // suggestion mode's own diff-and-wrap listener, if still on, does not see the flattened text
     // this resolution just changed (an accepted deletion, a declined insertion, a split/merge just
-    // made real) and re-wrap it right back up as a brand-new suggestion.
-    { discrete: true, tag: SKIP_TAG });
+    // made real) and re-wrap it right back up as a brand-new suggestion. SKIP_SCROLL_TAG is the
+    // unwanted-scroll fix above.
+    { discrete: true, tag: [SKIP_TAG, SKIP_SCROLL_TAG] });
 }
 function resolveAllMarks(editor, side) {
     editor.update(() => {
@@ -71,7 +90,7 @@ function resolveAllMarks(editor, side) {
                 continue;
             resolveOne(editor, node, side, resolved);
         }
-    }, { discrete: true, tag: SKIP_TAG });
+    }, { discrete: true, tag: [SKIP_TAG, SKIP_SCROLL_TAG] });
 }
 /** Resolves `node` (and, if it is half of a substitution pair, its partner too), then emits
  * `dj-criticmarkup-change`. `resolved` (bulk resolution only) records both halves of a pair so the
@@ -82,12 +101,14 @@ function resolveOne(editor, node, side, resolved) {
         resolved?.add(pair.deletion.getKey());
         resolved?.add(pair.insertion.getKey());
         if (side === "new") {
+            // No join seam here even when the deletion held a break (decision 18): the insertion's own
+            // text lands in its place, so the two sides are not becoming adjacent.
             pair.deletion.remove();
-            unwrapAndResolveBreaks(pair.insertion);
+            unwrapAndResolveBreaks(pair.insertion, true);
         }
         else {
             pair.insertion.remove();
-            unwrapAndResolveBreaks(pair.deletion);
+            unwrapAndResolveBreaks(pair.deletion, false);
         }
         dispatchChange(editor, "substitution", side === "new" ? "accept" : "decline");
         return;
@@ -104,10 +125,17 @@ function resolveOne(editor, node, side, resolved) {
     }
     else {
         const keep = $isInsertionNode(node) ? side === "new" : side === "old";
-        if (keep)
-            unwrapAndResolveBreaks(node);
-        else
+        if (keep) {
+            unwrapAndResolveBreaks(node, side === "new");
+        }
+        else {
+            // Decision 18: accepting a deletion that holds a break closes a real paragraph boundary, so
+            // the text on either side needs the space that boundary was providing. Declining an
+            // insertion drops a break that never existed in the document, so it changes nothing.
+            if (side === "new" && holdsBreak(node))
+                joinAtRemovedBreak(node);
             node.remove();
+        }
     }
     dispatchChange(editor, kind, side === "new" ? "accept" : "decline");
 }
@@ -149,14 +177,60 @@ function unwrap(node) {
  * children — a kept paragraph-break proposal (decision 16) stops being a decorator and becomes an
  * actual block boundary, mirroring what `grammar.accept`/`decline` do to the token at the string
  * level. */
-function unwrapAndResolveBreaks(node) {
+function unwrapAndResolveBreaks(node, creating) {
     const children = unwrap(node);
     for (const child of children) {
         if ($isBreakNode(child))
-            splitBlockAtBreak(child);
+            splitBlockAtBreak(child, creating);
+    }
+}
+/** True if `node` holds a `BreakNode` — the tree-side reading of `grammar.hasStructuralToken`. */
+function holdsBreak(node) {
+    return node.getChildren().some($isBreakNode);
+}
+/**
+ * Decision 18's join rule on the live tree: a single space where the removed break was, but only
+ * when real text sits hard against both sides of it. Inserted as its own text node rather than
+ * appended to the neighbour, so a formatted run keeps its own format and Lexical's own
+ * normalization merges the pair where they match.
+ */
+function joinAtRemovedBreak(node) {
+    const before = node.getPreviousSibling()?.getTextContent() ?? "";
+    const after = node.getNextSibling()?.getTextContent() ?? "";
+    if (before === "" || after === "")
+        return;
+    if (/\s$/.test(before) || /^\s/.test(after))
+        return;
+    node.insertBefore($createTextNode(" "));
+}
+/** Decision 18's absorb rule on the live tree: the horizontal whitespace on either side of a break
+ * being CREATED goes with it, so an accepted split does not strand a space at the end of the first
+ * block or open the second one with one. A break being RESTORED (a declined merge) is left exactly
+ * as the document had it. */
+function trimSeam(block, edge) {
+    // Walks inward from the edge over a SNAPSHOT of the children, rather than re-reading the edge
+    // child on each pass. The loop's progress has to come from the walk itself and never from
+    // `remove()` having taken effect: Lexical reinstates an empty text node at a block edge in some
+    // reconciliation paths, and a loop that re-read `getLastChild()` would then be handed the same
+    // node forever — a hung page rather than a failed assertion, which is the kind of bug a headless
+    // test with a simpler tree can miss entirely.
+    const children = block.getChildren();
+    const ordered = edge === "end" ? [...children].reverse() : children;
+    for (const child of ordered) {
+        if (!$isTextNode(child))
+            return;
+        const text = child.getTextContent();
+        const trimmed = edge === "end" ? text.replace(/[ \t]+$/, "") : text.replace(/^[ \t]+/, "");
+        if (trimmed === text)
+            return;
+        if (trimmed !== "") {
+            child.setTextContent(trimmed);
+            return;
+        }
+        child.remove();
     }
 }
-function splitBlockAtBreak(breakNode) {
+function splitBlockAtBreak(breakNode, creating) {
     const block = topLevelBlockOf(breakNode);
     if (!block) {
         breakNode.remove();
@@ -171,6 +245,10 @@ function splitBlockAtBreak(breakNode) {
     }
     block.insertAfter(newBlock);
     breakNode.remove();
+    if (creating) {
+        trimSeam(block, "end");
+        trimSeam(newBlock, "start");
+    }
 }
 function topLevelBlockOf(node) {
     let current = node;

package/dist/transformers.js

@@ -17,7 +17,7 @@
  * these patterns look for.
  */
 import { $createTextNode, $isTextNode } from "lexical";
-import { escapeToken, unescapeToken, PARAGRAPH_TOKEN } from "./grammar.js";
+import { escapeToken, unescapeToken, inlineFormatSegments, unmaskInlineFormat, PARAGRAPH_TOKEN } from "./grammar.js";
 import { $createBreakNode, $isBreakNode, $createCommentNode, $isCommentNode, $createDeletionNode, $isDeletionNode, DeletionNode, $createHighlightNode, $isHighlightNode, HighlightNode, $createInsertionNode, $isInsertionNode, InsertionNode, CommentNode, } from "./nodes.js";
 /**
  * Split raw mark content around paragraph-token breaks (decision 16) into `TextNode`/`BreakNode`
@@ -31,9 +31,13 @@ function appendTokenSegments(parent, content, format) {
     const flush = () => {
         if (buffer === "")
             return;
-        const t = $createTextNode(unescapeToken(buffer));
-        t.setFormat(format);
-        parent.append(t);
+        // `maskInlineFormat` may have hidden emphasis inside the mark from the markdown import's
+        // text-format pass; rebuild it here as formatted runs. Unmasked content yields one run.
+        for (const segment of inlineFormatSegments(buffer, format)) {
+            const t = $createTextNode(unescapeToken(segment.text));
+            t.setFormat(segment.format);
+            parent.append(t);
+        }
         buffer = "";
     };
     while (i < content.length) {
@@ -149,7 +153,7 @@ export const HIGHLIGHT_TRANSFORMER = {
         const node = $createHighlightNode();
         appendTokenSegments(node, raw, textNode.getFormat());
         if (commentRaw !== undefined)
-            node.setComment(unescapeToken(commentRaw));
+            node.setComment(unescapeToken(unmaskInlineFormat(commentRaw)));
         textNode.replace(node);
     },
     export: (node, _exportChildren, exportFormat) => {
@@ -168,7 +172,7 @@ export const COMMENT_TRANSFORMER = {
     regExp: /\{>>(.*?)<<\}$/,
     replace: (textNode, match) => {
         const [, raw] = match;
-        textNode.replace($createCommentNode(unescapeToken(raw)));
+        textNode.replace($createCommentNode(unescapeToken(unmaskInlineFormat(raw))));
     },
     export: (node) => {
         if (!$isCommentNode(node))