smartrte-react 0.2.8 → 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+## 0.3.0
+
+- Rebuild list selection and conversion behavior for checklists, bullets, numbers, alphabetic lists, and Roman numerals.
+- Support list-aware blockquotes and code blocks.
+- Make heading and font-size changes deterministic across carets and multi-block selections.
+- Add left, center, right, and justified block alignment, including list items, code blocks, and table cells.
+- Redesign link insertion and editing with accessible fields, validation, display-text editing, removal, opening, and secure new-tab links.
+- Add regression coverage for formatting, lists, links, table cells, and document serialization.

package/dist/adapters/coreBold.d.ts

@@ -0,0 +1,5 @@
+import { type CoreInlineMarkResult } from "./inlineMarkCoreExecution.js";
+export declare const isCoreBoldEnabled: () => boolean;
+/** Executes only the core bold command. Callers own DOM writes and legacy fallback. */
+export type CoreBoldResult = CoreInlineMarkResult;
+export declare const getCoreBoldResult: (root: HTMLElement) => CoreBoldResult | null;

package/dist/adapters/coreBold.js

@@ -0,0 +1,3 @@
+import { getCoreInlineMarkResult, isCoreInlineMarkEnabled } from "./inlineMarkCoreExecution.js";
+export const isCoreBoldEnabled = () => isCoreInlineMarkEnabled("bold");
+export const getCoreBoldResult = (root) => getCoreInlineMarkResult(root, "bold");

package/dist/adapters/domSelectionBridge.d.ts

@@ -0,0 +1,6 @@
+import type { SmartSelection } from "smartrte-core";
+export declare const isEditorOnlyElement: (node: Element) => boolean;
+/** Converts browser selection into a core selection without exposing editor UI nodes. */
+export declare const selectionFromDom: (editor: HTMLElement, selection: Selection | null) => SmartSelection | null;
+/** Restores a text selection from core paths after the editor DOM is rebuilt. */
+export declare const restoreSelectionToDom: (editor: HTMLElement, smartSelection: SmartSelection) => boolean;

package/dist/adapters/domSelectionBridge.js

@@ -0,0 +1,185 @@
+const LEAF_TAGS = new Set(["p", "h1", "h2", "h3", "h4", "h5", "h6"]);
+const CONTAINER_TAGS = new Set(["blockquote", "ul", "ol", "li", "table", "tr", "td", "th"]);
+export const isEditorOnlyElement = (node) => node.getAttribute("data-table-wrapper") === "true" ||
+    Array.from(node.attributes).some((attribute) => attribute.name.startsWith("data-srte-")) ||
+    node.matches(".srte-table-resize-handle, .srte-table-resize-overlay, .srte-drag-handle");
+const isSemanticElement = (node) => LEAF_TAGS.has(node.tagName.toLowerCase()) || CONTAINER_TAGS.has(node.tagName.toLowerCase());
+const hasSemanticChild = (node) => Array.from(node.children).some((child) => !isEditorOnlyElement(child) && isSemanticElement(child));
+const isVirtualLeaf = (node) => {
+    const tag = node.tagName.toLowerCase();
+    return (tag === "li" || tag === "td" || tag === "th") && !hasSemanticChild(node);
+};
+const isLeaf = (node) => LEAF_TAGS.has(node.tagName.toLowerCase()) || isVirtualLeaf(node);
+const closestElement = (node) => {
+    if (!node)
+        return null;
+    return node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+};
+const closestLeaf = (node, editor) => {
+    let element = closestElement(node);
+    while (element && element !== editor) {
+        if (isEditorOnlyElement(element))
+            return null;
+        if (isLeaf(element))
+            return element;
+        element = element.parentElement;
+    }
+    return null;
+};
+const semanticChildren = (parent) => {
+    const result = [];
+    Array.from(parent.children).forEach((child) => {
+        if (isEditorOnlyElement(child)) {
+            result.push(...semanticChildren(child));
+        }
+        else if (isSemanticElement(child)) {
+            result.push(child);
+        }
+        else {
+            result.push(...semanticChildren(child));
+        }
+    });
+    return result;
+};
+const pathForElement = (element, editor) => {
+    const findPath = (parent, basePath) => {
+        const children = semanticChildren(parent);
+        for (let index = 0; index < children.length; index += 1) {
+            const child = children[index];
+            const path = [...basePath, index];
+            if (child === element)
+                return path;
+            if (child.contains(element)) {
+                const nestedPath = findPath(child, path);
+                if (nestedPath)
+                    return nestedPath;
+            }
+        }
+        return null;
+    };
+    return findPath(editor, []);
+};
+const textNodesIn = (root) => {
+    const nodes = [];
+    const walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+        acceptNode(node) {
+            let parent = node.parentElement;
+            while (parent && parent !== root) {
+                if (isEditorOnlyElement(parent))
+                    return NodeFilter.FILTER_REJECT;
+                parent = parent.parentElement;
+            }
+            return NodeFilter.FILTER_ACCEPT;
+        },
+    });
+    let node = walker.nextNode();
+    while (node) {
+        nodes.push(node);
+        node = walker.nextNode();
+    }
+    return nodes;
+};
+const offsetBeforePoint = (leaf, container, offset) => {
+    if (!leaf.contains(container) && leaf !== container)
+        return null;
+    const range = leaf.ownerDocument.createRange();
+    range.selectNodeContents(leaf);
+    try {
+        range.setEnd(container, offset);
+    }
+    catch {
+        return null;
+    }
+    return range.toString().length;
+};
+const pointForDomPoint = (editor, container, offset) => {
+    const leaf = closestLeaf(container, editor);
+    if (!leaf)
+        return null;
+    const leafPath = pathForElement(leaf, editor);
+    if (!leafPath)
+        return null;
+    const textNodes = textNodesIn(leaf);
+    if (textNodes.length === 0)
+        return { path: [...leafPath, 0], offset: 0 };
+    const absoluteOffset = offsetBeforePoint(leaf, container, offset);
+    if (absoluteOffset == null)
+        return null;
+    let remaining = absoluteOffset;
+    for (let index = 0; index < textNodes.length; index += 1) {
+        const length = textNodes[index].data.length;
+        if (remaining <= length)
+            return { path: [...leafPath, index], offset: remaining };
+        remaining -= length;
+    }
+    const last = textNodes.length - 1;
+    return { path: [...leafPath, last], offset: textNodes[last].data.length };
+};
+const nodeSelectionFromRange = (editor, range) => {
+    const nodes = Array.from(editor.querySelectorAll("img, [data-srte-node-selection='true']"));
+    const selected = nodes.find((node) => range.intersectsNode(node));
+    if (!selected)
+        return null;
+    const path = pathForElement(selected, editor);
+    return path ? { type: "node", path } : null;
+};
+/** Converts browser selection into a core selection without exposing editor UI nodes. */
+export const selectionFromDom = (editor, selection) => {
+    if (!selection || selection.rangeCount === 0)
+        return null;
+    const range = selection.getRangeAt(0);
+    if (!editor.contains(range.commonAncestorContainer))
+        return null;
+    const nodeSelection = nodeSelectionFromRange(editor, range);
+    if (nodeSelection)
+        return nodeSelection;
+    const anchor = pointForDomPoint(editor, range.startContainer, range.startOffset);
+    const focus = pointForDomPoint(editor, range.endContainer, range.endOffset);
+    if (!anchor || !focus)
+        return null;
+    return { type: "text", anchor, focus };
+};
+const elementAtPath = (editor, path) => {
+    let current = editor;
+    for (const index of path) {
+        const next = semanticChildren(current)[index];
+        if (!next)
+            return null;
+        current = next;
+    }
+    return current;
+};
+const domPointForSmartPoint = (editor, point) => {
+    if (point.path.length === 0)
+        return null;
+    const leaf = elementAtPath(editor, point.path.slice(0, -1));
+    if (!leaf)
+        return null;
+    const text = textNodesIn(leaf)[point.path[point.path.length - 1]];
+    if (!text || point.offset < 0 || point.offset > text.data.length)
+        return null;
+    return { node: text, offset: point.offset };
+};
+/** Restores a text selection from core paths after the editor DOM is rebuilt. */
+export const restoreSelectionToDom = (editor, smartSelection) => {
+    if (smartSelection.type !== "text")
+        return false;
+    const anchor = domPointForSmartPoint(editor, smartSelection.anchor);
+    const focus = domPointForSmartPoint(editor, smartSelection.focus);
+    if (!anchor || !focus)
+        return false;
+    const range = editor.ownerDocument.createRange();
+    try {
+        range.setStart(anchor.node, anchor.offset);
+        range.setEnd(focus.node, focus.offset);
+        const selection = editor.ownerDocument.defaultView?.getSelection();
+        if (!selection)
+            return false;
+        selection.removeAllRanges();
+        selection.addRange(range);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};

package/dist/adapters/domSmartDocument.d.ts

@@ -0,0 +1,10 @@
+import { type SmartDocument } from "smartrte-core";
+/** Removes editor UI before handing the document to the core parser boundary. */
+export declare const cleanEditorHtml: (root: HTMLElement) => string;
+export declare const smartDocumentFromHtml: (html: string, ownerDocument: Document) => SmartDocument;
+export declare const smartDocumentFromEditorRoot: (root: HTMLElement) => {
+    document: SmartDocument;
+    html: string;
+};
+/** Serializes the shadow-only model. It is not used for persisted editor HTML. */
+export declare const serializeSmartDocument: (document: SmartDocument) => string;

package/dist/adapters/domSmartDocument.js

@@ -0,0 +1,216 @@
+import { normalizeCompatibilityHtml, sanitizeLinkAttrs, } from "smartrte-core";
+import { isEditorOnlyElement } from "./domSelectionBridge.js";
+const blockTags = new Set(["p", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "blockquote", "pre", "table"]);
+const unwrap = (element) => {
+    const parent = element.parentNode;
+    if (!parent)
+        return;
+    while (element.firstChild)
+        parent.insertBefore(element.firstChild, element);
+    parent.removeChild(element);
+};
+/** Removes editor UI before handing the document to the core parser boundary. */
+export const cleanEditorHtml = (root) => {
+    const clone = root.cloneNode(true);
+    Array.from(clone.querySelectorAll("*")).forEach((element) => {
+        if (element.getAttribute("data-table-wrapper") === "true")
+            unwrap(element);
+    });
+    Array.from(clone.querySelectorAll("*")).forEach((element) => {
+        if (isEditorOnlyElement(element))
+            element.remove();
+    });
+    return normalizeCompatibilityHtml(clone.innerHTML);
+};
+const addMark = (marks, mark) => marks.some((candidate) => candidate.type === mark.type) ? marks : [...marks, mark];
+const marksFor = (element, inherited) => {
+    const tag = element.tagName.toLowerCase();
+    let marks = inherited;
+    if (tag === "strong" || tag === "b")
+        marks = addMark(marks, { type: "bold" });
+    if (tag === "em" || tag === "i")
+        marks = addMark(marks, { type: "italic" });
+    if (tag === "u")
+        marks = addMark(marks, { type: "underline" });
+    if (tag === "s" || tag === "strike" || tag === "del")
+        marks = addMark(marks, { type: "strike" });
+    if (tag === "sup")
+        marks = addMark(marks, { type: "superscript" });
+    if (tag === "sub")
+        marks = addMark(marks, { type: "subscript" });
+    if (tag === "code")
+        marks = addMark(marks, { type: "code" });
+    if (tag === "a") {
+        const safeLink = sanitizeLinkAttrs({
+            href: element.getAttribute("href") || "",
+            target: element.getAttribute("target") || undefined,
+        });
+        if (safeLink)
+            marks = addMark(marks, { type: "link", ...safeLink });
+    }
+    const color = element.getAttribute("color") || element.style.color;
+    const backgroundColor = element.style.backgroundColor;
+    const fontSize = element.style.fontSize;
+    if (color)
+        marks = addMark(marks, { type: "textColor", value: color });
+    if (backgroundColor)
+        marks = addMark(marks, { type: "backgroundColor", value: backgroundColor });
+    if (fontSize) {
+        const match = /^([\d.]+)(px|pt)?$/i.exec(fontSize.trim());
+        if (match) {
+            const numeric = Number(match[1]);
+            const valuePx = match[2]?.toLowerCase() === "pt" ? numeric * 4 / 3 : numeric;
+            if (Number.isFinite(valuePx) && valuePx > 0)
+                marks = addMark(marks, { type: "fontSize", valuePx });
+        }
+    }
+    return marks;
+};
+const inlineNodes = (nodes, inherited = []) => {
+    const result = [];
+    Array.from(nodes).forEach((node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            if (node.textContent)
+                result.push({ type: "text", text: node.textContent, marks: inherited.length ? inherited : undefined });
+            return;
+        }
+        if (!(node instanceof Element))
+            return;
+        if (node.tagName.toLowerCase() === "br") {
+            result.push({ type: "text", text: "\n", marks: inherited.length ? inherited : undefined });
+            return;
+        }
+        result.push(...inlineNodes(node.childNodes, marksFor(node, inherited)));
+    });
+    return result;
+};
+const directBlockChildren = (parent) => {
+    const children = [];
+    Array.from(parent.children).forEach((child) => {
+        const tag = child.tagName.toLowerCase();
+        if (blockTags.has(tag))
+            children.push(child);
+        else
+            children.push(...directBlockChildren(child));
+    });
+    return children;
+};
+const paragraphFromDirectContent = (element) => {
+    const inline = inlineNodes(Array.from(element.childNodes).filter((node) => !(node instanceof Element && blockTags.has(node.tagName.toLowerCase()))));
+    return inline.length ? { type: "paragraph", alignment: alignmentFor(element), children: inline } : null;
+};
+const alignmentFor = (element) => {
+    const value = (element.style.textAlign || element.getAttribute("align") || "").toLowerCase();
+    return value === "center" || value === "right" || value === "justify" ? value : undefined;
+};
+const parseBlocks = (parent) => directBlockChildren(parent).flatMap(parseBlock);
+const parseList = (element) => {
+    const style = element.tagName.toLowerCase() === "ol" ? "decimal" : "disc";
+    const items = Array.from(element.children)
+        .filter((child) => child.tagName.toLowerCase() === "li")
+        .map((item) => {
+        const content = paragraphFromDirectContent(item);
+        const nested = Array.from(item.children)
+            .filter((child) => ["ul", "ol", "blockquote", "pre", "table", "p", "h1", "h2", "h3", "h4", "h5", "h6"].includes(child.tagName.toLowerCase()))
+            .flatMap(parseBlock);
+        return { type: "listItem", alignment: alignmentFor(item), children: [...(content ? [content] : []), ...nested] };
+    });
+    return { type: "list", style, children: items };
+};
+const tableRows = (table) => {
+    const rows = [];
+    Array.from(table.children).forEach((child) => {
+        if (child.tagName.toLowerCase() === "tr")
+            rows.push(child);
+        else if (["thead", "tbody", "tfoot"].includes(child.tagName.toLowerCase())) {
+            rows.push(...Array.from(child.children).filter((row) => row.tagName.toLowerCase() === "tr"));
+        }
+    });
+    return rows;
+};
+const parseTable = (element) => ({
+    type: "table",
+    children: tableRows(element).map((row) => ({
+        type: "tableRow",
+        children: Array.from(row.children)
+            .filter((cell) => ["td", "th"].includes(cell.tagName.toLowerCase()))
+            .map((cell) => ({
+            type: cell.tagName.toLowerCase() === "th" ? "tableHeaderCell" : "tableCell",
+            colspan: Number(cell.getAttribute("colspan")) || undefined,
+            rowspan: Number(cell.getAttribute("rowspan")) || undefined,
+            children: parseBlocks(cell).length ? parseBlocks(cell) : [{ type: "paragraph", alignment: alignmentFor(cell), children: inlineNodes(cell.childNodes) }],
+        })),
+    })),
+});
+const parseBlock = (element) => {
+    const tag = element.tagName.toLowerCase();
+    if (tag === "p")
+        return [{ type: "paragraph", alignment: alignmentFor(element), children: inlineNodes(element.childNodes) }];
+    if (/^h[1-6]$/.test(tag))
+        return [{ type: "heading", level: Number(tag.slice(1)), alignment: alignmentFor(element), children: inlineNodes(element.childNodes) }];
+    if (tag === "ul" || tag === "ol")
+        return [parseList(element)];
+    if (tag === "blockquote")
+        return [{ type: "blockquote", alignment: alignmentFor(element), children: parseBlocks(element) }];
+    if (tag === "pre")
+        return [{ type: "codeBlock", alignment: alignmentFor(element), text: element.textContent || "", language: element.querySelector("code")?.className.replace(/^language-/, "") || undefined }];
+    if (tag === "table")
+        return [parseTable(element)];
+    return [];
+};
+export const smartDocumentFromHtml = (html, ownerDocument) => {
+    const container = ownerDocument.createElement("div");
+    container.innerHTML = normalizeCompatibilityHtml(html);
+    return { type: "doc", children: parseBlocks(container) };
+};
+export const smartDocumentFromEditorRoot = (root) => {
+    const html = cleanEditorHtml(root);
+    return { document: smartDocumentFromHtml(html, root.ownerDocument), html };
+};
+const escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\"/g, "&quot;");
+const serializeText = (node) => {
+    let html = escapeHtml(node.text).replace(/\n/g, "<br>");
+    (node.marks || []).forEach((mark) => {
+        if (mark.type === "bold")
+            html = `<strong>${html}</strong>`;
+        if (mark.type === "italic")
+            html = `<em>${html}</em>`;
+        if (mark.type === "underline")
+            html = `<u>${html}</u>`;
+        if (mark.type === "strike")
+            html = `<s>${html}</s>`;
+        if (mark.type === "superscript")
+            html = `<sup>${html}</sup>`;
+        if (mark.type === "subscript")
+            html = `<sub>${html}</sub>`;
+        if (mark.type === "code")
+            html = `<code>${html}</code>`;
+        if (mark.type === "textColor")
+            html = `<span style="color:${escapeHtml(mark.value)}">${html}</span>`;
+        if (mark.type === "backgroundColor")
+            html = `<span style="background-color:${escapeHtml(mark.value)}">${html}</span>`;
+        if (mark.type === "fontSize")
+            html = `<span style="font-size:${mark.valuePx}px">${html}</span>`;
+        if (mark.type === "link")
+            html = `<a href="${escapeHtml(mark.href)}"${mark.target ? ` target="${escapeHtml(mark.target)}"` : ""}>${html}</a>`;
+    });
+    return html;
+};
+const alignmentAttribute = (alignment) => alignment ? ` style="text-align:${alignment}"` : "";
+const serializeBlock = (block) => {
+    if (block.type === "paragraph")
+        return `<p${alignmentAttribute(block.alignment)}>${block.children.map(serializeText).join("")}</p>`;
+    if (block.type === "heading")
+        return `<h${block.level}${alignmentAttribute(block.alignment)}>${block.children.map(serializeText).join("")}</h${block.level}>`;
+    if (block.type === "blockquote")
+        return `<blockquote${alignmentAttribute(block.alignment)}>${block.children.map(serializeBlock).join("")}</blockquote>`;
+    if (block.type === "codeBlock")
+        return `<pre${alignmentAttribute(block.alignment)}><code${block.language ? ` class="language-${escapeHtml(block.language)}"` : ""}>${escapeHtml(block.text)}</code></pre>`;
+    if (block.type === "list") {
+        const tag = block.style === "decimal" ? "ol" : "ul";
+        return `<${tag}>${block.children.map((item) => `<li${alignmentAttribute(item.alignment)}>${item.children.map(serializeBlock).join("")}</li>`).join("")}</${tag}>`;
+    }
+    return `<table><tbody>${block.children.map((row) => `<tr>${row.children.map((cell) => `<${cell.type === "tableHeaderCell" ? "th" : "td"}>${cell.children.map(serializeBlock).join("")}</${cell.type === "tableHeaderCell" ? "th" : "td"}>`).join("")}</tr>`).join("")}</tbody></table>`;
+};
+/** Serializes the shadow-only model. It is not used for persisted editor HTML. */
+export const serializeSmartDocument = (document) => document.children.map(serializeBlock).join("");

package/dist/adapters/domTargets.d.ts

@@ -0,0 +1,3 @@
+export declare const isElement: (target: EventTarget | null) => target is Element;
+export declare const isNode: (target: EventTarget | null) => target is Node;
+export declare const closestFromTarget: (target: EventTarget | null, selector: string) => Element | null;

package/dist/adapters/domTargets.js

@@ -0,0 +1,3 @@
+export const isElement = (target) => typeof Element !== "undefined" && target instanceof Element;
+export const isNode = (target) => typeof Node !== "undefined" && target instanceof Node;
+export const closestFromTarget = (target, selector) => isElement(target) ? target.closest(selector) : null;

package/dist/adapters/inlineMarkCoreExecution.d.ts

@@ -0,0 +1,9 @@
+import { type SmartSelection } from "smartrte-core";
+export type CoreInlineMark = "bold" | "italic" | "underline" | "superscript" | "subscript";
+export interface CoreInlineMarkResult {
+    html: string;
+    selectionBefore: SmartSelection;
+    selectionAfter: SmartSelection;
+}
+export declare const isCoreInlineMarkEnabled: (mark: CoreInlineMark) => boolean;
+export declare const getCoreInlineMarkResult: (root: HTMLElement, mark: CoreInlineMark) => CoreInlineMarkResult | null;

package/dist/adapters/inlineMarkCoreExecution.js

@@ -0,0 +1,25 @@
+import { applyTransaction, toggleBold, toggleItalic, toggleSubscript, toggleSuperscript, toggleUnderline, } from "smartrte-core";
+import { selectionFromDom } from "./domSelectionBridge.js";
+import { serializeSmartDocument, smartDocumentFromEditorRoot } from "./domSmartDocument.js";
+import { isCoreInlineMarkFlagEnabled } from "./internalFlags.js";
+const commands = {
+    bold: toggleBold,
+    italic: toggleItalic,
+    underline: toggleUnderline,
+    superscript: toggleSuperscript,
+    subscript: toggleSubscript,
+};
+export const isCoreInlineMarkEnabled = (mark) => isCoreInlineMarkFlagEnabled(mark);
+export const getCoreInlineMarkResult = (root, mark) => {
+    const selection = selectionFromDom(root, window.getSelection());
+    if (!selection)
+        return null;
+    const { document } = smartDocumentFromEditorRoot(root);
+    const state = { document, selection };
+    const command = commands[mark];
+    if (!command.isEnabled(state))
+        return null;
+    const transaction = command.execute(state);
+    const next = applyTransaction(state, transaction);
+    return { html: serializeSmartDocument(next.document), selectionBefore: transaction.selectionBefore, selectionAfter: transaction.selectionAfter };
+};

package/dist/adapters/internalFlags.d.ts

@@ -0,0 +1,13 @@
+import type { CoreInlineMark } from "./inlineMarkCoreExecution.js";
+export interface SmartRteInternalFlags {
+    coreBold?: boolean;
+    coreItalic?: boolean;
+    coreUnderline?: boolean;
+    coreSuperscript?: boolean;
+    coreSubscript?: boolean;
+    coreInlineMarks?: boolean;
+    shadowMode?: boolean;
+}
+export declare const getSmartRteInternalFlags: () => SmartRteInternalFlags;
+export declare const isCoreInlineMarkFlagEnabled: (mark: CoreInlineMark) => boolean;
+export declare const isShadowModeFlagEnabled: () => boolean;

package/dist/adapters/internalFlags.js

@@ -0,0 +1,36 @@
+const markFlagNames = {
+    bold: "coreBold",
+    italic: "coreItalic",
+    underline: "coreUnderline",
+    superscript: "coreSuperscript",
+    subscript: "coreSubscript",
+};
+const legacyMarkFlagNames = {
+    bold: "__SMART_RTE_CORE_BOLD__",
+    italic: "__SMART_RTE_CORE_ITALIC__",
+    underline: "__SMART_RTE_CORE_UNDERLINE__",
+    superscript: "__SMART_RTE_CORE_SUPERSCRIPT__",
+    subscript: "__SMART_RTE_CORE_SUBSCRIPT__",
+};
+const getGlobal = () => globalThis;
+const readBoolean = (value) => typeof value === "boolean" ? value : undefined;
+export const getSmartRteInternalFlags = () => getGlobal().__SMART_RTE_INTERNAL_FLAGS__ || {};
+export const isCoreInlineMarkFlagEnabled = (mark) => {
+    const flags = getSmartRteInternalFlags();
+    const individual = readBoolean(flags[markFlagNames[mark]]);
+    if (individual !== undefined)
+        return individual;
+    const grouped = readBoolean(flags.coreInlineMarks);
+    if (grouped !== undefined)
+        return grouped;
+    return getGlobal()[legacyMarkFlagNames[mark]] === true;
+};
+export const isShadowModeFlagEnabled = () => {
+    const configured = readBoolean(getSmartRteInternalFlags().shadowMode);
+    if (configured !== undefined)
+        return configured;
+    const global = getGlobal();
+    if (global.process?.env)
+        return global.process.env.NODE_ENV !== "production";
+    return global.__SMART_RTE_SHADOW_MODE__ === true;
+};

package/dist/adapters/shadowMode.d.ts

@@ -0,0 +1,23 @@
+import { type CommandContext, type SmartCommand, type SmartEditorState, type SmartTransaction } from "smartrte-core";
+export interface ShadowComparison {
+    commandId: string;
+    matches: boolean;
+    legacyHtml: string;
+    coreHtml: string;
+}
+export declare const isShadowModeEnabled: () => boolean;
+/** Compares canonicalized HTML only; it never changes editor state or output. */
+export declare const compareShadowHtml: (commandId: string, legacyHtml: string, coreHtml: string) => ShadowComparison;
+export declare const reportShadowDifference: (comparison: ShadowComparison) => void;
+/**
+ * Executes a core command in memory for diagnostics. The caller owns the
+ * legacy output; this helper never persists or applies the core result.
+ */
+export declare const runShadowCommand: <Input>(args: {
+    command: SmartCommand<Input>;
+    context: CommandContext;
+    input?: Input;
+    state: SmartEditorState;
+    legacyHtml: string;
+    serialize: (state: SmartEditorState) => string;
+}) => SmartTransaction | null;

package/dist/adapters/shadowMode.js

@@ -0,0 +1,33 @@
+import { applyTransaction, normalizeCompatibilityHtml, } from "smartrte-core";
+import { isShadowModeFlagEnabled } from "./internalFlags.js";
+const semanticHtml = (html) => normalizeCompatibilityHtml(html)
+    .replace(/<(\/?)b(?=[\s>])/g, "<$1strong")
+    .replace(/<(\/?)i(?=[\s>])/g, "<$1em")
+    .replace(/<(\/?)strike(?=[\s>])/g, "<$1s");
+export const isShadowModeEnabled = () => {
+    return isShadowModeFlagEnabled();
+};
+/** Compares canonicalized HTML only; it never changes editor state or output. */
+export const compareShadowHtml = (commandId, legacyHtml, coreHtml) => ({
+    commandId,
+    matches: semanticHtml(legacyHtml) === semanticHtml(coreHtml),
+    legacyHtml: semanticHtml(legacyHtml),
+    coreHtml: semanticHtml(coreHtml),
+});
+export const reportShadowDifference = (comparison) => {
+    if (!isShadowModeEnabled() || comparison.matches)
+        return;
+    console.warn(`[Smart RTE shadow mode] ${comparison.commandId} produced a semantic HTML mismatch.`, comparison);
+};
+/**
+ * Executes a core command in memory for diagnostics. The caller owns the
+ * legacy output; this helper never persists or applies the core result.
+ */
+export const runShadowCommand = (args) => {
+    if (!isShadowModeEnabled() || !args.command.isEnabled(args.context, args.input))
+        return null;
+    const transaction = args.command.execute(args.context, args.input);
+    const coreHtml = args.serialize(applyTransaction(args.state, transaction));
+    reportShadowDifference(compareShadowHtml(args.command.id, args.legacyHtml, coreHtml));
+    return transaction;
+};