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

package/dist/format.js

@@ -11,7 +11,7 @@
  */
 import { $getRoot, $isElementNode, $isTextNode } from "lexical";
 import { $convertFromMarkdownString, $convertToMarkdownString } from "@lexical/markdown";
-import { parseMarks, tokenizeBlockSpanning, maskNested, unmaskNested, PARAGRAPH_TOKEN } from "./grammar.js";
+import { parseMarks, tokenizeBlockSpanning, maskNested, unmaskNested, unmaskInlineFormat, PARAGRAPH_TOKEN } from "./grammar.js";
 import { criticMarkupTransformers } from "./transformers.js";
 /**
  * Import `data` as CriticMarkup: `tokenizeBlockSpanning`, then `maskNested`, then the markdown
@@ -49,7 +49,7 @@ function refusalsIn(text) {
 function unmaskTextNodes(node) {
     if ($isTextNode(node)) {
         const current = node.getTextContent();
-        const unmasked = unmaskNested(current);
+        const unmasked = unmaskInlineFormat(unmaskNested(current));
         if (unmasked !== current)
             node.setTextContent(unmasked);
         return;

package/dist/grammar.d.ts

@@ -120,3 +120,26 @@ export declare function maskNested(text: string): {
 };
 /** The exact inverse of `maskNested`: every sentinel code point becomes its real delimiter character. */
 export declare function unmaskNested(text: string): string;
+/**
+ * Mask `*`, `_`, and `` ` `` inside every top-level CriticMarkup mark, for a markdown import that
+ * runs `criticMarkupTransformers` alongside `@lexical/markdown`'s text-format transformers. Pass it
+ * as `createMarkdownPlugin({ prepareImport: maskInlineFormat })`. Length-preserving; text outside
+ * marks, nested marks (which the markdown path cannot pair anyway), and block-spanning marks are
+ * left exactly as they were.
+ */
+export declare function maskInlineFormat(text: string): string;
+/** The exact inverse of `maskInlineFormat`: every inline sentinel becomes its literal character. */
+export declare function unmaskInlineFormat(text: string): string;
+export interface InlineFormatSegment {
+    text: string;
+    /** Lexical text-format bits: 1 bold, 2 italic, 16 code. */
+    format: number;
+}
+/**
+ * Split masked mark content into formatted runs: `*x*` italic, `**x**` bold, `***x***` both, and
+ * `` `x` `` code, nesting allowed (`**a *b* c**`). These are the forms `$convertToMarkdownString`
+ * writes back, so the round trip is byte-exact. Anything unpaired, and every `_`, stays literal;
+ * `_x_` is not rebuilt as italic because the export would rewrite it as `*x*`. Plain strings in
+ * and out, so a caller with no editor can use it too.
+ */
+export declare function inlineFormatSegments(masked: string, format?: number): InlineFormatSegment[];

package/dist/grammar.js

@@ -476,3 +476,126 @@ export function unmaskNested(text) {
         out += UNMASK_OF.get(ch) ?? ch;
     return out;
 }
+// --- inline formatting inside a mark (markdown import) ------------------------------------------
+// `@lexical/markdown`'s `$importBlocks` runs text-FORMAT transformers (`*`, `**`, `_`, `` ` ``)
+// before text-MATCH transformers, a fixed call order no transformer list can change. So a mark
+// whose content carries emphasis, `{--he thought *what?* and shook--}`, is split into three text
+// nodes by the italic transformer before any CriticMarkup transformer sees it, and none of the
+// three pieces holds a whole mark: the braces stay behind as literal text, the mark cannot be
+// accepted or rejected, and nothing reports a refusal. Found in NovelMaker, whose editor loads
+// chapters through the markdown format with `criticMarkupTransformers` in the transformer set.
+//
+// The fix is a masking pass in the same spirit as `maskNested`: before the markdown import, hide
+// the inline-format characters inside each mark behind private-use sentinels (U+E020 block, clear
+// of `maskNested`'s U+E000 block and `resolve`'s seam sentinels), so the format transformers see
+// nothing to claim there and the text-match transformers get whole marks. The mark transformers
+// then rebuild the formatting from the sentinels (`inlineFormatSegments`). `unmaskInlineFormat`
+// is the exact inverse, used as a safety net on any text a mark transformer did not consume.
+const INLINE_FORMAT_CHARS = ["*", "_", "`"];
+const INLINE_MASK_OF = new Map(INLINE_FORMAT_CHARS.map((ch, i) => [ch, String.fromCodePoint(0xe020 + i)]));
+const INLINE_UNMASK_OF = new Map(INLINE_FORMAT_CHARS.map((ch, i) => [String.fromCodePoint(0xe020 + i), ch]));
+const STAR = INLINE_MASK_OF.get("*");
+const BACKTICK = INLINE_MASK_OF.get("`");
+/** Lexical's text-format bits, repeated here so this module stays free of a Lexical import. */
+const FORMAT_BOLD = 1;
+const FORMAT_ITALIC = 2;
+const FORMAT_CODE = 16;
+/**
+ * Mask `*`, `_`, and `` ` `` inside every top-level CriticMarkup mark, for a markdown import that
+ * runs `criticMarkupTransformers` alongside `@lexical/markdown`'s text-format transformers. Pass it
+ * as `createMarkdownPlugin({ prepareImport: maskInlineFormat })`. Length-preserving; text outside
+ * marks, nested marks (which the markdown path cannot pair anyway), and block-spanning marks are
+ * left exactly as they were.
+ */
+export function maskInlineFormat(text) {
+    const marks = parseMarks(text).filter((m, _, all) => !m.nested && !m.spansBlock && !all.some((p) => p !== m && p.start <= m.start && m.end <= p.end));
+    if (!marks.length)
+        return text;
+    const units = text.split("");
+    for (const mark of marks) {
+        for (let i = mark.start + TOKEN_LEN; i < mark.end - TOKEN_LEN; i++) {
+            const masked = INLINE_MASK_OF.get(units[i]);
+            if (masked)
+                units[i] = masked;
+        }
+    }
+    return units.join("");
+}
+/** The exact inverse of `maskInlineFormat`: every inline sentinel becomes its literal character. */
+export function unmaskInlineFormat(text) {
+    let out = "";
+    for (const ch of text)
+        out += INLINE_UNMASK_OF.get(ch) ?? ch;
+    return out;
+}
+/**
+ * Split masked mark content into formatted runs: `*x*` italic, `**x**` bold, `***x***` both, and
+ * `` `x` `` code, nesting allowed (`**a *b* c**`). These are the forms `$convertToMarkdownString`
+ * writes back, so the round trip is byte-exact. Anything unpaired, and every `_`, stays literal;
+ * `_x_` is not rebuilt as italic because the export would rewrite it as `*x*`. Plain strings in
+ * and out, so a caller with no editor can use it too.
+ */
+export function inlineFormatSegments(masked, format = 0) {
+    const out = [];
+    let literal = "";
+    const flush = () => {
+        if (literal !== "")
+            out.push({ text: literal, format });
+        literal = "";
+    };
+    let i = 0;
+    while (i < masked.length) {
+        const ch = masked[i];
+        if (ch === BACKTICK) {
+            const close = masked.indexOf(BACKTICK, i + 1);
+            if (close > i + 1) {
+                flush();
+                out.push({ text: unmaskInlineFormat(masked.slice(i + 1, close)), format: format | FORMAT_CODE });
+                i = close + 1;
+                continue;
+            }
+        }
+        else if (ch === STAR) {
+            const run = runLength(masked, i);
+            const close = run <= 3 ? closingRun(masked, i + run, run) : -1;
+            if (close > 0) {
+                flush();
+                const bits = run === 1 ? FORMAT_ITALIC : run === 2 ? FORMAT_BOLD : FORMAT_BOLD | FORMAT_ITALIC;
+                out.push(...inlineFormatSegments(masked.slice(i + run, close), format | bits));
+                i = close + run;
+                continue;
+            }
+            literal += "*".repeat(run);
+            i += run;
+            continue;
+        }
+        literal += INLINE_UNMASK_OF.get(ch) ?? ch;
+        i++;
+    }
+    flush();
+    return out;
+}
+function runLength(text, at) {
+    let n = 0;
+    while (text[at + n] === STAR)
+        n++;
+    return n;
+}
+/** Index of the first star run of exactly `size` that can close an emphasis opened just before
+ * `from`: content must not start or end with whitespace, and must not be empty. -1 if none. */
+function closingRun(text, from, size) {
+    if (from >= text.length || /\s/.test(text[from]))
+        return -1;
+    let i = from;
+    while (i < text.length) {
+        if (text[i] === STAR) {
+            const run = runLength(text, i);
+            if (run === size && i > from && !/\s/.test(text[i - 1]))
+                return i;
+            i += run;
+            continue;
+        }
+        i++;
+    }
+    return -1;
+}

package/dist/nodes.d.ts

@@ -95,7 +95,36 @@ export declare class CommentNode extends DecoratorNode<HTMLElement> {
     createDOM(): HTMLElement;
     updateDOM(): boolean;
     exportDOM(): DOMExportOutput;
-    /** The button the container mounts; accessible name is the comment text itself. */
+    /**
+     * The button `createDOM()`'s container span mounts; accessible name is the comment text
+     * itself, carried as `aria-label` rather than as DOM content. It was a text node once
+     * (`button.textContent = this.__text`, no other child) — the button is a fixed `1.1em`
+     * icon (its glyph comes from `::before` in `CONTENT_CSS`) with no `overflow: hidden`, so a
+     * raw text node long enough to exceed that width wrapped inside the flex box one-or-two
+     * characters per line, stacking real (if visually blank, white-on-blue) layout geometry
+     * down the column. A consumer building a `Range` over this node's rendered element —
+     * NovelMaker's `rangeForMark`, `range.selectNodeContents(editor.getElementByKey(key))`,
+     * for its reveal-on-scroll highlight — measured that geometry instead of the icon: 47
+     * client rects for a ~54-character comment, one wrapped line per character, and a
+     * `getBoundingClientRect()` union hundreds of pixels tall and off by hundreds of pixels
+     * vertically from the icon's own position (confirmed live: a bare comment's reveal in
+     * NovelMaker's Edits drawer was landing ~230px off from the icon, well over half the
+     * visible editor height, before this fix). A `.dj-cm-sr-only` child — the pattern
+     * `iconLabel()` above uses for `dj-button`'s shadow-DOM buttons — only trades that for a
+     * smaller but still-wrong box: `clip: rect(0,0,0,0)` hides it from *paint*, not from
+     * layout, and its `white-space: nowrap` keeps the text on one line but at its own full
+     * natural width, so a Range over it still measures a stray sliver next to the icon.
+     * `aria-label` gives the button its accessible name with no DOM content at all, so
+     * `getElementByKey(key)`'s only child (this button) is itself a childless leaf — verified
+     * live that `range.selectNodeContents(theContainerSpan)` then reports exactly ONE rect,
+     * equal to `button.getBoundingClientRect()`: browsers fall back to an empty element's own
+     * border box as the Range's content when there's nothing inside it left to fragment into
+     * text runs. This button is a plain native `<button>`, not a custom-element host —
+     * `iconLabel()`'s own docstring is about `aria-prohibited-attr`/`button-name` axe failures
+     * specific to a role-less custom-element host and a shadow button whose only slotted
+     * content was an `aria-hidden` icon; neither applies to a real `<button>`, which has an
+     * implicit role and where `aria-label` is standard and axe-clean.
+     */
     decorate(_editor: LexicalEditor): HTMLElement;
     getText(): string;
     setText(text: string): this;
@@ -132,6 +161,29 @@ export declare function $isCriticMark(node: LexicalNode | null | undefined): nod
  * so every mark stays distinguishable when backgrounds flatten. Injected once via
  * `ensureEditorStyles("dj-rich-text-criticmarkup", CONTENT_CSS)`, called from the plugin's own
  * `setup()` (Track T), not from this module — node files don't touch the DOM at import time.
+ *
+ * **Dark-mode fix, found in a real consumer's browser pass (NovelMaker, Q1.7 of its
+ * `search-and-edits-spec.md`, 2026-09-27) and worth stating so it is not reintroduced.** The first
+ * version of this CSS painted insertion/deletion/highlight backgrounds with `success-100`/
+ * `danger-100`/`warning-100` — pale tints that `theme.css` only ever defines under `:root` and
+ * never redefines for `.dark`/`prefers-color-scheme: dark`, so in dark mode the background stayed
+ * pale while the ambient text color (`color: inherit`, or no override at all) correctly turned
+ * near-white — pale-on-near-white, unreadable. This is the exact failure a consumer of this
+ * package (NovelMaker) had already hit and fixed once for its own now-retired local plugin: "a pale
+ * mint or pale yellow background stays pale while the text drawn on it turns near-white ... backwards
+ * contrast." The same version also leaned on FOUR bare tokens — `--dj-color-success`,
+ * `--dj-color-danger`, `--dj-color-primary`, `--dj-color-on-primary` — that this package's own
+ * `theme.css` never defines at all (only the numbered shades exist), so every `var(--dj-color-X,
+ * fallback)` using them silently and permanently resolved to its hardcoded fallback, theme or no
+ * theme — invisible unless someone actually diffed light against dark, which is exactly how this
+ * shipped unnoticed. **The fix, and the rule for the next person editing this block: use a token
+ * that is redefined on BOTH sides of the `.dark` block in `theme.css`, never a bare
+ * `--dj-color-<hue>` with no shade number (none exist), and never a `-100` tint alone for
+ * anything a reader has to read text through** — `neutral-100`/`-200` (confirmed to invert:
+ * `#f3f4f6`/`#e5e7eb` light, `#1f2937`/`#374151` dark) carry the backgrounds now, and the `-600`
+ * semantic shades (all three of `success`/`warning`/`danger` are redefined for dark, confirmed by
+ * reading `theme.css` directly rather than assumed) carry the decorative accent color, which only
+ * has to read as a thin line, not as body text.
  */
-export declare const CONTENT_CSS = "\ndj-rich-text ins.dj-cm-insertion { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--dj-color-success, #16a34a); text-decoration-skip-ink: none; background: var(--dj-color-success-100, #dcfce7); }\ndj-rich-text del.dj-cm-deletion { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--dj-color-danger, #dc2626); background: var(--dj-color-danger-100, #fee2e2); }\ndj-rich-text mark.dj-cm-highlight { background: var(--dj-color-warning-100, #fef3c7); color: inherit; }\ndj-rich-text mark.dj-cm-highlight.dj-cm-has-comment { box-shadow: inset 0 -2px 0 var(--dj-color-warning, #d97706); }\ndj-rich-text .dj-cm-comment-button { display: inline-flex; align-items: center; justify-content: center; width: 1.1em; height: 1.1em; padding: 0; border: none; border-radius: 999px; background: var(--dj-color-primary, #2563eb); color: var(--dj-color-on-primary, #fff); font-size: .75em; line-height: 1; cursor: pointer; }\ndj-rich-text .dj-cm-comment-button::before { content: \"\\1F4AC\"; }\ndj-rich-text .dj-cm-break-pill { display: inline-block; padding: 0 .3em; border-radius: 3px; background: var(--dj-color-primary-100, #dbeafe); color: var(--dj-color-primary, #2563eb); font-size: .85em; }\n@media (forced-colors: active) {\n\tdj-rich-text ins.dj-cm-insertion, dj-rich-text del.dj-cm-deletion { background: transparent; text-decoration-color: CanvasText; }\n\tdj-rich-text mark.dj-cm-highlight { background: Mark; color: MarkText; border: 1px solid CanvasText; }\n\tdj-rich-text mark.dj-cm-highlight.dj-cm-has-comment { box-shadow: none; border-style: dashed; }\n\tdj-rich-text .dj-cm-comment-button { forced-color-adjust: none; background: Highlight; color: HighlightText; border: 1px solid CanvasText; }\n\tdj-rich-text .dj-cm-break-pill { forced-color-adjust: none; background: Canvas; color: CanvasText; border: 1px solid CanvasText; }\n}\n";
+export declare const CONTENT_CSS = "\ndj-rich-text ins.dj-cm-insertion { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--dj-color-success-600, #16a34a); text-decoration-skip-ink: none; background: var(--dj-color-neutral-100, #f3f4f6); }\ndj-rich-text del.dj-cm-deletion { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--dj-color-danger-600, #dc2626); background: var(--dj-color-neutral-100, #f3f4f6); }\ndj-rich-text mark.dj-cm-highlight { background: var(--dj-color-neutral-200, #e5e7eb); color: inherit; }\ndj-rich-text mark.dj-cm-highlight.dj-cm-has-comment { box-shadow: inset 0 -2px 0 var(--dj-color-warning-600, #ca8a04); }\ndj-rich-text .dj-cm-comment-button { display: inline-flex; align-items: center; justify-content: center; width: 1.1em; height: 1.1em; padding: 0; border: none; border-radius: 999px; background: var(--dj-color-primary-600, #2563eb); color: var(--dj-color-neutral-0, #fff); font-size: .75em; line-height: 1; cursor: pointer; }\ndj-rich-text .dj-cm-comment-button::before { content: \"\\1F4AC\"; }\ndj-rich-text .dj-cm-break-pill { display: inline-block; padding: 0 .3em; border-radius: 3px; background: var(--dj-color-primary-100, #dbeafe); color: var(--dj-color-primary-700, #1d4ed8); font-size: .85em; }\n.dj-cm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }\n@media (forced-colors: active) {\n\tdj-rich-text ins.dj-cm-insertion, dj-rich-text del.dj-cm-deletion { background: transparent; text-decoration-color: CanvasText; }\n\tdj-rich-text mark.dj-cm-highlight { background: Mark; color: MarkText; border: 1px solid CanvasText; }\n\tdj-rich-text mark.dj-cm-highlight.dj-cm-has-comment { box-shadow: none; border-style: dashed; }\n\tdj-rich-text .dj-cm-comment-button { forced-color-adjust: none; background: Highlight; color: HighlightText; border: 1px solid CanvasText; }\n\tdj-rich-text .dj-cm-break-pill { forced-color-adjust: none; background: Canvas; color: CanvasText; border: 1px solid CanvasText; }\n}\n";
 export {};

package/dist/nodes.js

@@ -220,13 +220,42 @@ export class CommentNode extends DecoratorNode {
         el.textContent = this.getText();
         return { element: el };
     }
-    /** The button the container mounts; accessible name is the comment text itself. */
+    /**
+     * The button `createDOM()`'s container span mounts; accessible name is the comment text
+     * itself, carried as `aria-label` rather than as DOM content. It was a text node once
+     * (`button.textContent = this.__text`, no other child) — the button is a fixed `1.1em`
+     * icon (its glyph comes from `::before` in `CONTENT_CSS`) with no `overflow: hidden`, so a
+     * raw text node long enough to exceed that width wrapped inside the flex box one-or-two
+     * characters per line, stacking real (if visually blank, white-on-blue) layout geometry
+     * down the column. A consumer building a `Range` over this node's rendered element —
+     * NovelMaker's `rangeForMark`, `range.selectNodeContents(editor.getElementByKey(key))`,
+     * for its reveal-on-scroll highlight — measured that geometry instead of the icon: 47
+     * client rects for a ~54-character comment, one wrapped line per character, and a
+     * `getBoundingClientRect()` union hundreds of pixels tall and off by hundreds of pixels
+     * vertically from the icon's own position (confirmed live: a bare comment's reveal in
+     * NovelMaker's Edits drawer was landing ~230px off from the icon, well over half the
+     * visible editor height, before this fix). A `.dj-cm-sr-only` child — the pattern
+     * `iconLabel()` above uses for `dj-button`'s shadow-DOM buttons — only trades that for a
+     * smaller but still-wrong box: `clip: rect(0,0,0,0)` hides it from *paint*, not from
+     * layout, and its `white-space: nowrap` keeps the text on one line but at its own full
+     * natural width, so a Range over it still measures a stray sliver next to the icon.
+     * `aria-label` gives the button its accessible name with no DOM content at all, so
+     * `getElementByKey(key)`'s only child (this button) is itself a childless leaf — verified
+     * live that `range.selectNodeContents(theContainerSpan)` then reports exactly ONE rect,
+     * equal to `button.getBoundingClientRect()`: browsers fall back to an empty element's own
+     * border box as the Range's content when there's nothing inside it left to fragment into
+     * text runs. This button is a plain native `<button>`, not a custom-element host —
+     * `iconLabel()`'s own docstring is about `aria-prohibited-attr`/`button-name` axe failures
+     * specific to a role-less custom-element host and a shadow button whose only slotted
+     * content was an `aria-hidden` icon; neither applies to a real `<button>`, which has an
+     * implicit role and where `aria-label` is standard and axe-clean.
+     */
     decorate(_editor) {
-        if (!__classPrivateFieldGet(this, _CommentNode_el, "f") || __classPrivateFieldGet(this, _CommentNode_el, "f").textContent !== this.__text) {
+        if (!__classPrivateFieldGet(this, _CommentNode_el, "f") || __classPrivateFieldGet(this, _CommentNode_el, "f").getAttribute("aria-label") !== this.__text) {
             const button = document.createElement("button");
             button.type = "button";
             button.className = "dj-cm-comment-button";
-            button.textContent = this.__text;
+            button.setAttribute("aria-label", this.__text);
             __classPrivateFieldSet(this, _CommentNode_el, button, "f");
         }
         return __classPrivateFieldGet(this, _CommentNode_el, "f");
@@ -306,15 +335,39 @@ export function $isCriticMark(node) {
  * so every mark stays distinguishable when backgrounds flatten. Injected once via
  * `ensureEditorStyles("dj-rich-text-criticmarkup", CONTENT_CSS)`, called from the plugin's own
  * `setup()` (Track T), not from this module — node files don't touch the DOM at import time.
+ *
+ * **Dark-mode fix, found in a real consumer's browser pass (NovelMaker, Q1.7 of its
+ * `search-and-edits-spec.md`, 2026-09-27) and worth stating so it is not reintroduced.** The first
+ * version of this CSS painted insertion/deletion/highlight backgrounds with `success-100`/
+ * `danger-100`/`warning-100` — pale tints that `theme.css` only ever defines under `:root` and
+ * never redefines for `.dark`/`prefers-color-scheme: dark`, so in dark mode the background stayed
+ * pale while the ambient text color (`color: inherit`, or no override at all) correctly turned
+ * near-white — pale-on-near-white, unreadable. This is the exact failure a consumer of this
+ * package (NovelMaker) had already hit and fixed once for its own now-retired local plugin: "a pale
+ * mint or pale yellow background stays pale while the text drawn on it turns near-white ... backwards
+ * contrast." The same version also leaned on FOUR bare tokens — `--dj-color-success`,
+ * `--dj-color-danger`, `--dj-color-primary`, `--dj-color-on-primary` — that this package's own
+ * `theme.css` never defines at all (only the numbered shades exist), so every `var(--dj-color-X,
+ * fallback)` using them silently and permanently resolved to its hardcoded fallback, theme or no
+ * theme — invisible unless someone actually diffed light against dark, which is exactly how this
+ * shipped unnoticed. **The fix, and the rule for the next person editing this block: use a token
+ * that is redefined on BOTH sides of the `.dark` block in `theme.css`, never a bare
+ * `--dj-color-<hue>` with no shade number (none exist), and never a `-100` tint alone for
+ * anything a reader has to read text through** — `neutral-100`/`-200` (confirmed to invert:
+ * `#f3f4f6`/`#e5e7eb` light, `#1f2937`/`#374151` dark) carry the backgrounds now, and the `-600`
+ * semantic shades (all three of `success`/`warning`/`danger` are redefined for dark, confirmed by
+ * reading `theme.css` directly rather than assumed) carry the decorative accent color, which only
+ * has to read as a thin line, not as body text.
  */
 export const CONTENT_CSS = `
-dj-rich-text ins.dj-cm-insertion { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--dj-color-success, #16a34a); text-decoration-skip-ink: none; background: var(--dj-color-success-100, #dcfce7); }
-dj-rich-text del.dj-cm-deletion { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--dj-color-danger, #dc2626); background: var(--dj-color-danger-100, #fee2e2); }
-dj-rich-text mark.dj-cm-highlight { background: var(--dj-color-warning-100, #fef3c7); color: inherit; }
-dj-rich-text mark.dj-cm-highlight.dj-cm-has-comment { box-shadow: inset 0 -2px 0 var(--dj-color-warning, #d97706); }
-dj-rich-text .dj-cm-comment-button { display: inline-flex; align-items: center; justify-content: center; width: 1.1em; height: 1.1em; padding: 0; border: none; border-radius: 999px; background: var(--dj-color-primary, #2563eb); color: var(--dj-color-on-primary, #fff); font-size: .75em; line-height: 1; cursor: pointer; }
+dj-rich-text ins.dj-cm-insertion { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--dj-color-success-600, #16a34a); text-decoration-skip-ink: none; background: var(--dj-color-neutral-100, #f3f4f6); }
+dj-rich-text del.dj-cm-deletion { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--dj-color-danger-600, #dc2626); background: var(--dj-color-neutral-100, #f3f4f6); }
+dj-rich-text mark.dj-cm-highlight { background: var(--dj-color-neutral-200, #e5e7eb); color: inherit; }
+dj-rich-text mark.dj-cm-highlight.dj-cm-has-comment { box-shadow: inset 0 -2px 0 var(--dj-color-warning-600, #ca8a04); }
+dj-rich-text .dj-cm-comment-button { display: inline-flex; align-items: center; justify-content: center; width: 1.1em; height: 1.1em; padding: 0; border: none; border-radius: 999px; background: var(--dj-color-primary-600, #2563eb); color: var(--dj-color-neutral-0, #fff); font-size: .75em; line-height: 1; cursor: pointer; }
 dj-rich-text .dj-cm-comment-button::before { content: "\\1F4AC"; }
-dj-rich-text .dj-cm-break-pill { display: inline-block; padding: 0 .3em; border-radius: 3px; background: var(--dj-color-primary-100, #dbeafe); color: var(--dj-color-primary, #2563eb); font-size: .85em; }
+dj-rich-text .dj-cm-break-pill { display: inline-block; padding: 0 .3em; border-radius: 3px; background: var(--dj-color-primary-100, #dbeafe); color: var(--dj-color-primary-700, #1d4ed8); font-size: .85em; }
+.dj-cm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
 @media (forced-colors: active) {
 	dj-rich-text ins.dj-cm-insertion, dj-rich-text del.dj-cm-deletion { background: transparent; text-decoration-color: CanvasText; }
 	dj-rich-text mark.dj-cm-highlight { background: Mark; color: MarkText; border: 1px solid CanvasText; }

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

@@ -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

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))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dojo-ng/rich-text-criticmarkup",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "BSD-3-Clause",
   "description": "CriticMarkup tracked-changes plugin for @dojo-ng/rich-text",
   "type": "module",
@@ -17,7 +17,7 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@dojo-ng/rich-text": "^0.1.0",
+    "@dojo-ng/rich-text": "^0.1.2",
     "@dojo-ng/i18n": "^0.1.0",
     "@dojo-ng/popup-confirmation": "^0.1.0",
     "@dojo-ng/popup": "^0.1.0",