@dojo-ng/rich-text-criticmarkup 0.1.0 → 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

@@ -167,7 +167,14 @@ function resolve(text, mark, side) {
         return text;
     }
     const end = mark.kind === "highlight" ? highlightEnd(text, mark) : mark.end;
-    return text.slice(0, mark.start) + keptText(mark, side) + text.slice(end);
+    // Decision 18: only an ACCEPT adjusts whitespace at a paragraph-break seam. A decline restores
+    // the original text verbatim — `run{++¶++}together` declines back to `runtogether`, not to
+    // `run together` — and a highlight is kept unchanged in both directions, so neither touches the
+    // seam. `settleSeams` is a no-op on a string with no sentinel in it, which is every other case.
+    const adjusts = side === "new" && mark.kind !== "highlight";
+    const kept = keptText(mark, side, adjusts ? BREAK_SEAM : PARAGRAPH_BREAK);
+    const dropped = adjusts && kept === "" && hasStructuralToken(droppedText(mark, side));
+    return settleSeams(text.slice(0, mark.start) + (dropped ? JOIN_SEAM : kept) + text.slice(end));
 }
 /**
  * `mark`'s own `end`, extended to swallow an immediately adjacent `{>>...<<}` — CriticMarkup's
@@ -183,20 +190,34 @@ function highlightEnd(text, mark) {
     }
     return mark.end;
 }
-function keptText(mark, side) {
+function keptText(mark, side, breakAs = PARAGRAPH_BREAK) {
     switch (mark.kind) {
         case "highlight":
-            return resolveParagraphTokens(mark.text);
+            return resolveParagraphTokens(mark.text, PARAGRAPH_TOKEN, breakAs);
         case "substitution":
-            return resolveParagraphTokens(side === "new" ? mark.new : mark.old);
+            return resolveParagraphTokens(side === "new" ? mark.new : mark.old, PARAGRAPH_TOKEN, breakAs);
         case "insertion":
-            return side === "new" ? resolveParagraphTokens(mark.text) : "";
+            return side === "new" ? resolveParagraphTokens(mark.text, PARAGRAPH_TOKEN, breakAs) : "";
         case "deletion":
-            return side === "new" ? "" : resolveParagraphTokens(mark.text);
+            return side === "new" ? "" : resolveParagraphTokens(mark.text, PARAGRAPH_TOKEN, breakAs);
         default:
             throw new Error(`unknown mark kind ${mark.kind}`);
     }
 }
+/** The text this resolution DISCARDS — the mirror of `keptText`, and the only place a break that is
+ * about to disappear can still be seen. */
+function droppedText(mark, side) {
+    switch (mark.kind) {
+        case "insertion":
+            return side === "new" ? "" : mark.text;
+        case "deletion":
+            return side === "new" ? mark.text : "";
+        case "substitution":
+            return side === "new" ? mark.old : mark.new;
+        default:
+            return "";
+    }
+}
 /**
  * Resolve every mark as `accept` would, nested ones included. Idempotent: a body with no marks is
  * returned unchanged.
@@ -291,7 +312,7 @@ export function unescapeToken(text, token = PARAGRAPH_TOKEN) {
  * and a doubled (escaped) token becomes the single literal character it stands for. Scans
  * left-to-right so a doubled pair is consumed as a unit and never mistaken for two lone tokens.
  */
-function resolveParagraphTokens(text, token = PARAGRAPH_TOKEN) {
+function resolveParagraphTokens(text, token = PARAGRAPH_TOKEN, breakAs = PARAGRAPH_BREAK) {
     if (token === "")
         return text;
     let out = "";
@@ -303,7 +324,7 @@ function resolveParagraphTokens(text, token = PARAGRAPH_TOKEN) {
                 i += token.length * 2;
             }
             else {
-                out += "\n\n"; // unpaired: a structural break
+                out += breakAs; // unpaired: a structural break
                 i += token.length;
             }
         }
@@ -354,6 +375,64 @@ export function tokenizeBlockSpanning(text, token = PARAGRAPH_TOKEN) {
 export function toPortableCriticMarkup(text, token = PARAGRAPH_TOKEN) {
     return normalizeBlockSpanning(resolveParagraphTokens(text, token));
 }
+// --- decision 18: whitespace at a paragraph-break seam ------------------------------------------
+/** A real paragraph break, as this grammar spells one. */
+const PARAGRAPH_BREAK = "\n\n";
+// Two sentinels, placed by `resolve` and consumed by `settleSeams` within that same call. They exist
+// so a seam adjustment can see the characters on BOTH sides of the mark — which a rule written over
+// the mark's own span cannot — without a regex sweep that would touch whitespace elsewhere in the
+// document that this resolution does not own (G2's "leaving all other text untouched"). Deliberately
+// outside the U+E000..U+E007 block `maskNested` uses; nothing outside this file ever sees one.
+const BREAK_SEAM = "\uE010"; // a break this resolution CREATES
+const JOIN_SEAM = "\uE011"; // a break this resolution REMOVES, with nothing kept in its place
+/** Horizontal whitespace only: a seam adjustment never eats a neighbouring line's newline. */
+const HORIZONTAL_WS = /[ \t]*/;
+/** True if `text` holds at least one UNPAIRED token — a structural break rather than a doubled
+ * literal. Scans in `resolveParagraphTokens`' left-to-right order so the two always agree on which
+ * tokens are structural. */
+function hasStructuralToken(text, token = PARAGRAPH_TOKEN) {
+    if (token === "")
+        return false;
+    let i = 0;
+    while (i < text.length) {
+        if (text.startsWith(token, i)) {
+            if (text.startsWith(token, i + token.length)) {
+                i += token.length * 2;
+                continue;
+            }
+            return true;
+        }
+        i++;
+    }
+    return false;
+}
+/**
+ * Turn the seam sentinels into real text, which is where decision 18's two rules actually live:
+ *
+ * - A break being CREATED absorbs the horizontal whitespace on either side of it, so accepting
+ *   `here. {++¶++}The` does not leave a space stranded at the end of the first paragraph.
+ * - A break being REMOVED becomes a single space, so accepting `here.{--¶--}The` reads
+ *   `here. The` rather than `here.The` — but only when real text sits hard against both sides, so a
+ *   merge into text that already has whitespace (or at the very start or end of the body) adds
+ *   nothing.
+ */
+function settleSeams(text) {
+    if (!text.includes(BREAK_SEAM) && !text.includes(JOIN_SEAM))
+        return text;
+    const broken = text.replace(new RegExp(`${HORIZONTAL_WS.source}${BREAK_SEAM}${HORIZONTAL_WS.source}`, "g"), PARAGRAPH_BREAK);
+    return settleJoinSeam(broken);
+}
+/** One join seam at a time, by index rather than by regex, so a character outside the Basic
+ * Multilingual Plane on either side of the seam is never split. */
+function settleJoinSeam(text) {
+    const at = text.indexOf(JOIN_SEAM);
+    if (at < 0)
+        return text;
+    const before = text.slice(0, at);
+    const after = text.slice(at + JOIN_SEAM.length);
+    const needsSpace = before !== "" && after !== "" && !/\s$/.test(before) && !/^\s/.test(after);
+    return settleJoinSeam(before + (needsSpace ? " " : "") + after);
+}
 // --- decision 11: nesting is detected and masked, not mangled ----------------------------------
 // One private-use sentinel per CriticMarkup delimiter character, so masking is a plain,
 // length-preserving character substitution with a trivial exact inverse.
@@ -397,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; }