@dojo-ng/rich-text-criticmarkup 0.1.0

package/dist/nodes.js

@@ -0,0 +1,325 @@
+/**
+ * The five CriticMarkup node classes (decisions 4-6, 16).
+ *
+ * `InsertionNode`, `DeletionNode`, and `HighlightNode` are `ElementNode`s wrapping ordinary text —
+ * the shape `@lexical/link`'s `LinkNode` uses for an inline span with its own markdown delimiters —
+ * so they can hold a `BreakNode` alongside plain `TextNode` children. `CommentNode` is a
+ * `DecoratorNode`: a bare comment has no text of its own to put a caret in. `BreakNode` is a break
+ * carried inside an insertion or a deletion, not a mark kind of its own (decision 16) — the fifth
+ * node class, on a different axis from the other four.
+ *
+ * No markdown import/export here — that is `transformers.ts` (Track N2). No DOM paste/export
+ * override either; nothing in the spec asks for one.
+ */
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _CommentNode_el;
+import { $applyNodeReplacement, DecoratorNode, ElementNode, } from "lexical";
+import { PARAGRAPH_TOKEN } from "./grammar.js";
+// --- MarkNode: shared base for the three ElementNode-based marks --------------------------------
+/**
+ * Shared behavior for the three ElementNode marks. Inline, never empty, and typing at its own
+ * boundary must not silently extend it (decision 6) — Lexical asks the node AT the selection
+ * boundary whether it accepts typed text, independent of where a prior `.select()` call pointed, so
+ * this has to be a node-level override, not a caret-placement fix. `InsertionNode` overrides both
+ * back to `true`: absorbing typing at its own edge is what lets "keep typing" extend one suggestion
+ * instead of a new mark per keystroke.
+ */
+class MarkNode extends ElementNode {
+    isInline() {
+        return true;
+    }
+    canBeEmpty() {
+        return false;
+    }
+    updateDOM(_prevNode, _dom, _config) {
+        return false;
+    }
+    canInsertTextBefore() {
+        return false;
+    }
+    canInsertTextAfter() {
+        return false;
+    }
+}
+function markDOM(tag, className) {
+    const el = document.createElement(tag);
+    el.className = className;
+    return el;
+}
+/** `{++inserted++}`. Renders as `<ins class="dj-cm-insertion">`. */
+export class InsertionNode extends MarkNode {
+    static getType() {
+        return "dj-criticmarkup-insertion";
+    }
+    static clone(node) {
+        return new InsertionNode(node.__key);
+    }
+    createDOM() {
+        return markDOM("ins", "dj-cm-insertion");
+    }
+    static importJSON(serializedNode) {
+        const node = $createInsertionNode();
+        node.setFormat(serializedNode.format);
+        node.setIndent(serializedNode.indent);
+        node.setDirection(serializedNode.direction);
+        return node;
+    }
+    exportJSON() {
+        return { ...super.exportJSON(), type: "dj-criticmarkup-insertion", version: 1 };
+    }
+    /** The one exception to decision 6: typing at either edge extends the insertion. */
+    canInsertTextBefore() {
+        return true;
+    }
+    canInsertTextAfter() {
+        return true;
+    }
+}
+export function $createInsertionNode() {
+    return $applyNodeReplacement(new InsertionNode());
+}
+export function $isInsertionNode(node) {
+    return node instanceof InsertionNode;
+}
+/** `{--deleted--}`. Renders as `<del class="dj-cm-deletion">`. */
+export class DeletionNode extends MarkNode {
+    static getType() {
+        return "dj-criticmarkup-deletion";
+    }
+    static clone(node) {
+        return new DeletionNode(node.__key);
+    }
+    createDOM() {
+        return markDOM("del", "dj-cm-deletion");
+    }
+    static importJSON(serializedNode) {
+        const node = $createDeletionNode();
+        node.setFormat(serializedNode.format);
+        node.setIndent(serializedNode.indent);
+        node.setDirection(serializedNode.direction);
+        return node;
+    }
+    exportJSON() {
+        return { ...super.exportJSON(), type: "dj-criticmarkup-deletion", version: 1 };
+    }
+}
+export function $createDeletionNode() {
+    return $applyNodeReplacement(new DeletionNode());
+}
+export function $isDeletionNode(node) {
+    return node instanceof DeletionNode;
+}
+/**
+ * `{==highlight==}`, optionally carrying an anchored comment (`{>>note<<}`) as state rather than as
+ * a sibling node — decision 4: an anchored comment is a highlight CARRYING a note, not two marks.
+ * Renders as `<mark class="dj-cm-highlight">`, plus `dj-cm-has-comment` when a comment is set.
+ */
+export class HighlightNode extends MarkNode {
+    constructor() {
+        super(...arguments);
+        this.__comment = null;
+    }
+    static getType() {
+        return "dj-criticmarkup-highlight";
+    }
+    static clone(node) {
+        const cloned = new HighlightNode(node.__key);
+        cloned.__comment = node.__comment;
+        return cloned;
+    }
+    createDOM() {
+        const el = markDOM("mark", "dj-cm-highlight");
+        if (this.__comment !== null)
+            el.classList.add("dj-cm-has-comment");
+        return el;
+    }
+    /** Only the comment presence can change post-creation; patch the class in place. */
+    updateDOM(_prevNode, dom, _config) {
+        dom.classList.toggle("dj-cm-has-comment", this.__comment !== null);
+        return false;
+    }
+    static importJSON(serializedNode) {
+        const node = $createHighlightNode();
+        node.setComment(serializedNode.comment);
+        node.setFormat(serializedNode.format);
+        node.setIndent(serializedNode.indent);
+        node.setDirection(serializedNode.direction);
+        return node;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            comment: this.getComment(),
+            type: "dj-criticmarkup-highlight",
+            version: 1,
+        };
+    }
+    getComment() {
+        return this.getLatest().__comment;
+    }
+    setComment(comment) {
+        const writable = this.getWritable();
+        writable.__comment = comment;
+        return this;
+    }
+}
+export function $createHighlightNode() {
+    return $applyNodeReplacement(new HighlightNode());
+}
+export function $isHighlightNode(node) {
+    return node instanceof HighlightNode;
+}
+/**
+ * `{>>note<<}`, bare or anchored (anchored state lives on the `HighlightNode` it follows, per
+ * decision 4 — this class only ever represents a BARE comment). A `DecoratorNode`: it has no text of
+ * its own to put a caret in. Renders as an operable `<button>`, not a styled span (decision 5) — the
+ * popup behavior belongs to Track T3/T4; this is the minimal, correct shell it builds on.
+ */
+export class CommentNode extends DecoratorNode {
+    static getType() {
+        return "dj-criticmarkup-comment";
+    }
+    static clone(node) {
+        return new CommentNode(node.__text, node.__key);
+    }
+    constructor(text, key) {
+        super(key);
+        _CommentNode_el.set(this, void 0);
+        this.__text = text;
+    }
+    isInline() {
+        return true;
+    }
+    static importJSON(serializedNode) {
+        return $createCommentNode(serializedNode.text);
+    }
+    exportJSON() {
+        // DecoratorNode does not implement exportJSON (the base throws); build the object directly.
+        return { type: "dj-criticmarkup-comment", version: 1, text: this.getText() };
+    }
+    createDOM() {
+        const span = document.createElement("span");
+        span.className = "dj-cm-comment";
+        return span;
+    }
+    updateDOM() {
+        return false;
+    }
+    exportDOM() {
+        const el = document.createElement("span");
+        el.textContent = this.getText();
+        return { element: el };
+    }
+    /** The button the container mounts; accessible name is the comment text itself. */
+    decorate(_editor) {
+        if (!__classPrivateFieldGet(this, _CommentNode_el, "f") || __classPrivateFieldGet(this, _CommentNode_el, "f").textContent !== this.__text) {
+            const button = document.createElement("button");
+            button.type = "button";
+            button.className = "dj-cm-comment-button";
+            button.textContent = this.__text;
+            __classPrivateFieldSet(this, _CommentNode_el, button, "f");
+        }
+        return __classPrivateFieldGet(this, _CommentNode_el, "f");
+    }
+    getText() {
+        return this.getLatest().__text;
+    }
+    setText(text) {
+        const writable = this.getWritable();
+        writable.__text = text;
+        return this;
+    }
+}
+_CommentNode_el = new WeakMap();
+export function $createCommentNode(text) {
+    return $applyNodeReplacement(new CommentNode(text));
+}
+export function $isCommentNode(node) {
+    return node instanceof CommentNode;
+}
+/**
+ * A proposed paragraph break, carried as a token inside an insertion or a deletion (decision 16) —
+ * never a top-level mark kind of its own. Renders as a pilcrow pill.
+ *
+ * MUST override `getTextContent()`: a `DecoratorNode` returns `""` by default, and the insertion and
+ * deletion transformers export their content THROUGH `getTextContent()` — so without this override an
+ * insertion holding a break exports as `{++++}`, an empty mark, with nothing thrown to say why.
+ */
+export class BreakNode extends DecoratorNode {
+    static getType() {
+        return "dj-criticmarkup-break";
+    }
+    static clone(node) {
+        return new BreakNode(node.__key);
+    }
+    isInline() {
+        return true;
+    }
+    static importJSON(_serializedNode) {
+        return $createBreakNode();
+    }
+    exportJSON() {
+        return { type: "dj-criticmarkup-break", version: 1 };
+    }
+    createDOM() {
+        const span = document.createElement("span");
+        span.className = "dj-cm-break";
+        return span;
+    }
+    updateDOM() {
+        return false;
+    }
+    decorate() {
+        const pill = document.createElement("span");
+        pill.className = "dj-cm-break-pill";
+        pill.textContent = PARAGRAPH_TOKEN;
+        return pill;
+    }
+    getTextContent() {
+        return PARAGRAPH_TOKEN;
+    }
+}
+export function $createBreakNode() {
+    return $applyNodeReplacement(new BreakNode());
+}
+export function $isBreakNode(node) {
+    return node instanceof BreakNode;
+}
+// --- shared ----------------------------------------------------------------------------------
+/** Any of the four MARK classes (decision 4) — `BreakNode` is a different axis, not a mark kind. */
+export function $isCriticMark(node) {
+    return $isInsertionNode(node) || $isDeletionNode(node) || $isHighlightNode(node) || $isCommentNode(node);
+}
+/**
+ * Content CSS: insertion underlined, deletion struck through, highlight background, comment as an
+ * operable control, break as a small pill — all from `--dj-*` tokens, with a forced-colors fallback
+ * 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.
+ */
+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 .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; }
+@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; }
+	dj-rich-text mark.dj-cm-highlight.dj-cm-has-comment { box-shadow: none; border-style: dashed; }
+	dj-rich-text .dj-cm-comment-button { forced-color-adjust: none; background: Highlight; color: HighlightText; border: 1px solid CanvasText; }
+	dj-rich-text .dj-cm-break-pill { forced-color-adjust: none; background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
+}
+`;

package/dist/plugin.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The assembled `RichTextPlugin` (Track T3): the toolbar (six controls in group `criticmarkup`),
+ * the `criticmarkup` format, and the `setup()` that ties every earlier track together — the
+ * suggestion-mode listener/commands (S1/S3), the decorator mount for `CommentNode`/`BreakNode`
+ * (deferred from N1), the content styles (deferred from N1), and the shared comment popup (T3/T4).
+ */
+import { type RichTextPlugin } from "@dojo-ng/rich-text";
+import "@dojo-ng/popup-confirmation";
+import "@dojo-ng/button";
+import { type StructuralPolicy } from "./suggestion-mode.js";
+export interface CriticMarkupOptions {
+    /** Start in suggestion mode. Default `false`. */
+    suggesting?: boolean;
+    /** What suggestion mode does with a block-structure change (decisions 14, 16). Default `"mark"`. */
+    structuralEdits?: StructuralPolicy;
+    /** The paragraph-break token (decision 16). Default `PARAGRAPH_TOKEN`. */
+    paragraphToken?: string;
+    /** Confirm accept-all / decline-all through `dj-popup-confirmation`. Default `true`. */
+    confirmBulk?: boolean;
+    /** Contribute the six toolbar controls. Default `true`. */
+    toolbar?: boolean;
+}
+/** Build the CriticMarkup plugin. */
+export declare function createCriticMarkupPlugin(options?: CriticMarkupOptions): RichTextPlugin;
+/** The CriticMarkup plugin with the default options. */
+export declare const criticMarkupPlugin: RichTextPlugin;
+export default criticMarkupPlugin;

package/dist/plugin.js

@@ -0,0 +1,288 @@
+/**
+ * The assembled `RichTextPlugin` (Track T3): the toolbar (six controls in group `criticmarkup`),
+ * the `criticmarkup` format, and the `setup()` that ties every earlier track together — the
+ * suggestion-mode listener/commands (S1/S3), the decorator mount for `CommentNode`/`BreakNode`
+ * (deferred from N1), the content styles (deferred from N1), and the shared comment popup (T3/T4).
+ */
+import { html } from "lit";
+import { createRef, ref } from "lit/directives/ref.js";
+import { $getNearestNodeFromDOMNode, $getSelection, $isRangeSelection } from "lexical";
+import { mergeRegister } from "@lexical/utils";
+import { getDefaultLocale, messages, registerDefaults } from "@dojo-ng/i18n";
+import { defineRichTextPlugin, ensureEditorStyles } from "@dojo-ng/rich-text";
+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 { setSuggestionMode, isSuggestionMode, configureSuggestionMode } from "./suggestion-mode.js";
+import { markAtSelection, acceptMark, declineMark, acceptAllMarks, declineAllMarks } from "./resolution.js";
+import { createCommentPopupController } from "./comment-popup.js";
+const EN = {
+    suggestEdits: "Suggest edits",
+    acceptMark: "Accept suggestion",
+    rejectMark: "Reject suggestion",
+    acceptAll: "Accept all",
+    rejectAll: "Reject all",
+    addComment: "Add comment",
+    comment: "Comment",
+    save: "Save",
+    cancel: "Cancel",
+    removeNote: "Remove note",
+    removeHighlight: "Remove highlight",
+    confirmAcceptAll: "Accept every suggested change?",
+    confirmRejectAll: "Reject every suggested change?",
+};
+registerDefaults("dj", EN);
+function msg(ctx, key) {
+    const locale = ctx.host.getAttribute("lang") || getDefaultLocale();
+    return messages.resolve("dj", locale, key) ?? EN[key] ?? key;
+}
+const POPUPS = new WeakMap();
+const WIRED_COMMENT_BUTTONS = new WeakSet();
+/** Build the CriticMarkup plugin. */
+export function createCriticMarkupPlugin(options = {}) {
+    const structuralEdits = options.structuralEdits ?? "mark";
+    const paragraphToken = options.paragraphToken ?? PARAGRAPH_TOKEN;
+    const confirmBulk = options.confirmBulk ?? true;
+    const showToolbar = options.toolbar ?? true;
+    return defineRichTextPlugin({
+        name: "criticmarkup",
+        nodes: [InsertionNode, DeletionNode, HighlightNode, CommentNode, BreakNode],
+        formats: {
+            criticmarkup: {
+                serialize: (editor) => serializeCriticMarkup(editor),
+                deserialize: (editor, data) => deserializeCriticMarkup(editor, data, { paragraphToken }),
+            },
+        },
+        inserts: [
+            {
+                id: "comment",
+                label: "Comment",
+                keywords: ["comment", "note", "annotate"],
+                run: (ctx) => POPUPS.get(ctx.editor)?.open({ anchor: ctx.host, mode: "insert-bare", text: "" }),
+            },
+        ],
+        setup: (ctx) => {
+            ensureEditorStyles("dj-rich-text-criticmarkup", CONTENT_CSS);
+            configureSuggestionMode(ctx.editor, { structuralEdits });
+            if (options.suggesting)
+                setSuggestionMode(ctx.editor, true);
+            const popup = createCommentPopupController(ctx.editor, (key) => msg(ctx, key));
+            ctx.host.appendChild(popup.element);
+            POPUPS.set(ctx.editor, popup);
+            // The highlight's own affordance (decision 15): clicking a highlight that carries a
+            // comment opens the same popup an anchored comment is edited through, event-delegated
+            // off the host rather than wired per-node (HighlightNode is a plain ElementNode, not a
+            // decorator, so it has no per-instance mount hook to attach a listener from).
+            const onHostClick = (event) => {
+                const target = event.target;
+                if (!(target instanceof Element))
+                    return;
+                const mark = target.closest(".dj-cm-highlight.dj-cm-has-comment");
+                if (!mark)
+                    return;
+                let node = null;
+                let text = "";
+                // editor.read(), not editorState.read(): $getNearestNodeFromDOMNode needs the
+                // ACTIVE EDITOR (for the DOM-node-to-key lookup), which only editor.read() sets —
+                // editorState.read() sets only the active editor STATE and throws Lexical error
+                // #196 ("unable to find an active editor") the moment it's called.
+                ctx.editor.read(() => {
+                    const found = $getNearestNodeFromDOMNode(mark);
+                    if (found && $isHighlightNode(found)) {
+                        node = found;
+                        text = found.getComment() ?? "";
+                    }
+                });
+                if (node)
+                    popup.open({ anchor: mark, mode: "edit-highlight", text, node });
+            };
+            ctx.host.addEventListener("click", onHostClick);
+            return mergeRegister(
+            // 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
+            // stale text if the note changed by some other path since the button was wired.
+            ctx.editor.registerDecoratorListener((decorators) => {
+                for (const [key, el] of Object.entries(decorators)) {
+                    const container = ctx.editor.getElementByKey(key);
+                    if (!container)
+                        continue;
+                    // `replaceChildren`, not a conditional `appendChild`: `CommentNode`/`BreakNode`
+                    // both hand back a NEW element instance on some `decorate()` calls (an unrelated
+                    // sibling edit is enough — Lexical re-clones a node whose OWN `__next`/`__prev`
+                    // pointer just changed, even though nothing the node itself owns did, and a
+                    // fresh clone's `decorate()` cache starts empty). `appendChild`-if-not-already-a-
+                    // child leaves the STALE element from the previous call sitting in `container`
+                    // forever, so the same single comment/break visibly multiplies with every nearby
+                    // edit. Clearing first makes `container` hold exactly the current `el`, however
+                    // many times `decorate()` has run for this key.
+                    if (container.firstChild !== el || container.childNodes.length > 1)
+                        container.replaceChildren(el);
+                    // tagName, not `instanceof HTMLButtonElement` — a real button either way, but
+                    // this avoids depending on that specific global existing (some DOM test
+                    // environments curate a narrower global set than a real browser's).
+                    if (el.tagName === "BUTTON" && !WIRED_COMMENT_BUTTONS.has(el)) {
+                        WIRED_COMMENT_BUTTONS.add(el);
+                        el.addEventListener("click", () => {
+                            let node = null;
+                            let text = "";
+                            ctx.editor.read(() => {
+                                const found = $getNearestNodeFromDOMNode(el);
+                                if (found && $isCommentNode(found)) {
+                                    node = found;
+                                    text = found.getText();
+                                }
+                            });
+                            if (node)
+                                popup.open({ anchor: el, mode: "edit-comment", text, node });
+                        });
+                    }
+                }
+            }), () => ctx.host.removeEventListener("click", onHostClick), () => POPUPS.delete(ctx.editor));
+        },
+        toolbar: showToolbar ? (ctx) => toolbarItems(ctx, confirmBulk) : undefined,
+    });
+}
+/** The CriticMarkup plugin with the default options. */
+export const criticMarkupPlugin = createCriticMarkupPlugin();
+export default criticMarkupPlugin;
+// --- toolbar ------------------------------------------------------------------------------------
+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-popup-confirmation>`
+        : html `<dj-button kind="text" title=${msg(ctx, "acceptAll")} @click=${() => acceptAllMarks(ctx.editor)}
+				>${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-popup-confirmation>`
+        : html `<dj-button kind="text" title=${msg(ctx, "rejectAll")} @click=${() => declineAllMarks(ctx.editor)}
+				>${msg(ctx, "rejectAll")}</dj-button
+			>`;
+    return [
+        {
+            id: "criticmarkup-suggest",
+            group: "criticmarkup",
+            order: 0,
+            label: msg(ctx, "suggestEdits"),
+            isActive: (c) => isSuggestionMode(c.editor),
+            run: (c) => setSuggestionMode(c.editor, !isSuggestionMode(c.editor)),
+            // A custom render, not the core's default icon+aria-label button: axe reports that shape
+            // (aria-label on a role-less host, an aria-hidden-only icon inside shadow DOM) as an
+            // unnamed button in this environment — the same VISIBLE-TEXT shape the other four items
+            // 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"
+					title=${msg(ctx, "suggestEdits")}
+					aria-pressed=${isSuggestionMode(c.editor)}
+					@click=${() => setSuggestionMode(c.editor, !isSuggestionMode(c.editor))}
+					>${msg(ctx, "suggestEdits")}</dj-button
+				>`,
+        },
+        {
+            id: "criticmarkup-accept",
+            group: "criticmarkup",
+            order: 10,
+            label: msg(ctx, "acceptMark"),
+            isDisabled: (c) => markAtSelection(c.editor) === null,
+            run: (c) => {
+                const node = markAtSelection(c.editor);
+                if (node)
+                    acceptMark(c.editor, node);
+            },
+            render: (c) => {
+                const disabled = markAtSelection(c.editor) === null;
+                return html `<dj-button
+					kind="text"
+					title=${msg(ctx, "acceptMark")}
+					?disabled=${disabled}
+					@click=${() => {
+                    const node = markAtSelection(c.editor);
+                    if (node)
+                        acceptMark(c.editor, node);
+                }}
+					>${msg(ctx, "acceptMark")}</dj-button
+				>`;
+            },
+        },
+        {
+            id: "criticmarkup-reject",
+            group: "criticmarkup",
+            order: 20,
+            label: msg(ctx, "rejectMark"),
+            isDisabled: (c) => markAtSelection(c.editor) === null,
+            run: (c) => {
+                const node = markAtSelection(c.editor);
+                if (node)
+                    declineMark(c.editor, node);
+            },
+            render: (c) => {
+                const disabled = markAtSelection(c.editor) === null;
+                return html `<dj-button
+					kind="text"
+					title=${msg(ctx, "rejectMark")}
+					?disabled=${disabled}
+					@click=${() => {
+                    const node = markAtSelection(c.editor);
+                    if (node)
+                        declineMark(c.editor, node);
+                }}
+					>${msg(ctx, "rejectMark")}</dj-button
+				>`;
+            },
+        },
+        {
+            id: "criticmarkup-accept-all",
+            group: "criticmarkup",
+            order: 30,
+            label: msg(ctx, "acceptAll"),
+            render: () => acceptAllContent,
+        },
+        {
+            id: "criticmarkup-reject-all",
+            group: "criticmarkup",
+            order: 40,
+            label: msg(ctx, "rejectAll"),
+            render: () => rejectAllContent,
+        },
+        {
+            id: "criticmarkup-add-comment",
+            group: "criticmarkup",
+            order: 50,
+            label: msg(ctx, "addComment"),
+            render: () => html `<dj-button
+					${ref(addCommentRef)}
+					kind="text"
+					title=${msg(ctx, "addComment")}
+					@click=${() => {
+                const anchor = addCommentRef.value;
+                const popup = POPUPS.get(ctx.editor);
+                if (!anchor || !popup)
+                    return;
+                const collapsed = isSelectionCollapsed(ctx.editor);
+                popup.open({ anchor, mode: collapsed ? "insert-bare" : "insert-anchored", text: "" });
+            }}
+					>${msg(ctx, "addComment")}</dj-button
+				>`,
+        },
+    ];
+}
+function isSelectionCollapsed(editor) {
+    let collapsed = true;
+    editor.getEditorState().read(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection))
+            collapsed = selection.isCollapsed();
+    });
+    return collapsed;
+}

package/dist/resolution.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Resolution (Track T1/T2): `markAtSelection`, `acceptMark`/`declineMark` (one mark), and
+ * `acceptAllMarks`/`declineAllMarks` (the whole document). Decision 10's rules, applied directly to
+ * the live tree rather than round-tripping through markdown — the two paths are cross-checked in the
+ * test file against `grammar.accept`/`decline` on the same starting `value`, which is the point of
+ * having one grammar.
+ *
+ * A substitution is never resolved as a lone deletion or insertion: `acceptMark`/`declineMark` on
+ * EITHER half of an adjacent deletion-then-insertion pair (decision 4's shape) resolves the whole
+ * pair. A kept insertion/deletion holding a `BreakNode` (decision 16 — a proposed paragraph
+ * split/merge) performs the real block split/merge at that point when kept, mirroring exactly what
+ * `grammar.accept`/`decline` do to the paragraph token at the string level.
+ *
+ * No confirmation here — `dj-popup-confirmation` gating `confirmBulk` is a toolbar-level concern
+ * (Track T3), not baked into these functions themselves.
+ */
+import { type LexicalEditor, type LexicalNode } from "lexical";
+import type { MarkKind } from "./grammar.js";
+export interface CriticMarkupChangeDetail {
+    kind: MarkKind;
+    action: "accept" | "decline";
+}
+declare global {
+    interface GlobalEventHandlersEventMap {
+        "dj-criticmarkup-change": CustomEvent<CriticMarkupChangeDetail>;
+    }
+}
+/** The nearest CriticMarkup mark (any of the four kinds) containing the selection's anchor, or
+ * `null` if the caret sits in plain prose or there is no range selection. */
+export declare function markAtSelection(editor: LexicalEditor): LexicalNode | null;
+export declare function acceptMark(editor: LexicalEditor, node: LexicalNode): void;
+export declare function declineMark(editor: LexicalEditor, node: LexicalNode): void;
+export declare function acceptAllMarks(editor: LexicalEditor): void;
+export declare function declineAllMarks(editor: LexicalEditor): void;