smartrte-react 0.3.3 → 0.3.5

package/dist/adapters/domInlineImageCommandBridge.js

@@ -0,0 +1,72 @@
+import { createSmartEditor, getNodeAtPath, mediaPlugin, } from "smartrte-core";
+import { selectionFromDom } from "./domSelectionBridge.js";
+import { smartDocumentFromEditorRoot } from "./domSmartDocument.js";
+import { inlineAtomPathFromDom } from "./domInlineAtomCommandBridge.js";
+/**
+ * Executes inline image insertion through core and projects only the resulting
+ * atom into the existing DOM range. Unrelated DOM and metadata stay untouched.
+ */
+export const executeDomInlineImageCommand = (root, input, domSelection = root.ownerDocument.defaultView?.getSelection() || null) => {
+    if (!domSelection?.rangeCount || !domSelection.isCollapsed)
+        return null;
+    const modelSelection = selectionFromDom(root, domSelection);
+    if (!modelSelection)
+        return null;
+    const { document } = smartDocumentFromEditorRoot(root);
+    const editor = createSmartEditor({
+        state: { document, selection: modelSelection },
+        plugins: [mediaPlugin],
+    });
+    if (!editor.execute("image.insert-inline", input))
+        return null;
+    const selectionAfter = editor.state.selection;
+    if (selectionAfter.type !== "text")
+        return null;
+    const imagePath = [
+        ...selectionAfter.anchor.path.slice(0, -1),
+        selectionAfter.anchor.path[selectionAfter.anchor.path.length - 1] - 1,
+    ];
+    const atom = getNodeAtPath(editor.state.document, imagePath);
+    if (atom?.type !== "inlineImage")
+        return null;
+    const range = domSelection.getRangeAt(0);
+    const image = root.ownerDocument.createElement("img");
+    image.src = atom.src;
+    image.alt = atom.alt || "";
+    if (atom.title)
+        image.title = atom.title;
+    if (atom.width)
+        image.width = atom.width;
+    if (atom.height)
+        image.height = atom.height;
+    image.dataset.srteInline = "true";
+    range.insertNode(image);
+    range.setStartAfter(image);
+    range.collapse(true);
+    domSelection.removeAllRanges();
+    domSelection.addRange(range);
+    return image;
+};
+/** Validates an inline image attribute update through core, then mutates it in place. */
+export const executeDomInlineImageUpdate = (root, image, input) => {
+    const path = inlineAtomPathFromDom(root, image);
+    if (!path)
+        return false;
+    const selection = selectionFromDom(root, root.ownerDocument.defaultView?.getSelection() || null) || { type: "node", path };
+    const { document } = smartDocumentFromEditorRoot(root);
+    const editor = createSmartEditor({
+        state: { document, selection },
+        plugins: [mediaPlugin],
+    });
+    if (!editor.execute("image.update-inline", { path, ...input }))
+        return false;
+    if (input.alt !== undefined)
+        image.alt = input.alt;
+    if (input.title !== undefined)
+        image.title = input.title;
+    if (input.width !== undefined)
+        image.width = input.width;
+    if (input.height !== undefined)
+        image.height = input.height;
+    return true;
+};

package/dist/adapters/domMoveCommandBridge.d.ts

@@ -0,0 +1,7 @@
+export type DomMoveDirection = "up" | "down" | "left" | "right";
+/**
+ * Executes model move/indent commands while preserving the existing DOM nodes.
+ * Null means the DOM shape is outside this adapter; false means a valid command
+ * was disabled at a boundary.
+ */
+export declare const executeDomMoveCommand: (blocks: readonly HTMLElement[], direction: DomMoveDirection, beforeMutation?: () => void) => HTMLElement[] | false | null;

package/dist/adapters/domMoveCommandBridge.js

@@ -0,0 +1,54 @@
+import { createSmartEditor, movePlugin } from "smartrte-core";
+import { smartDocumentFromHtml } from "./domSmartDocument.js";
+/**
+ * Executes model move/indent commands while preserving the existing DOM nodes.
+ * Null means the DOM shape is outside this adapter; false means a valid command
+ * was disabled at a boundary.
+ */
+export const executeDomMoveCommand = (blocks, direction, beforeMutation) => {
+    if (!blocks.length || !blocks[0].parentElement)
+        return null;
+    const parent = blocks[0].parentElement;
+    if (!blocks.every((block) => block.parentElement === parent))
+        return null;
+    const siblings = Array.from(parent.children);
+    const indexes = blocks.map((block) => siblings.indexOf(block));
+    if (indexes.some((index, position) => index < 0 || (position > 0 && index !== indexes[position - 1] + 1))) {
+        return null;
+    }
+    const document = smartDocumentFromHtml(siblings.map((sibling) => sibling.outerHTML).join(""), parent.ownerDocument);
+    if (document.children.length !== siblings.length)
+        return null;
+    const editor = createSmartEditor({
+        state: { document, selection: { type: "all" } },
+        plugins: [movePlugin],
+    });
+    const commandId = direction === "up" || direction === "down" ? "block.move" : "block.indent";
+    const input = {
+        parentPath: [],
+        blockIndexes: indexes,
+        direction: direction === "left" ? "outdent" : direction === "right" ? "indent" : direction,
+    };
+    if (!editor.execute(commandId, input))
+        return false;
+    beforeMutation?.();
+    if (direction === "left" || direction === "right") {
+        indexes.forEach((index, position) => {
+            const indent = editor.state.document.children[index].indent || 0;
+            blocks[position].style.marginLeft = indent ? `${indent * 24}px` : "";
+            if (!blocks[position].getAttribute("style"))
+                blocks[position].removeAttribute("style");
+        });
+        return [...blocks];
+    }
+    if (direction === "up") {
+        const previous = siblings[indexes[0] - 1];
+        blocks.forEach((block) => parent.insertBefore(block, previous));
+    }
+    else {
+        const next = siblings[indexes[indexes.length - 1] + 1];
+        const reference = next.nextSibling;
+        blocks.forEach((block) => parent.insertBefore(block, reference));
+    }
+    return [...blocks];
+};

package/dist/adapters/domSelectionBridge.d.ts

@@ -1,5 +1,7 @@
-import type { SmartSelection } from "smartrte-core";
+import type { Path, SmartSelection } from "smartrte-core";
 export declare const isEditorOnlyElement: (node: Element) => boolean;
+/** Returns the semantic model path for a DOM element at the adapter boundary. */
+export declare const pathForDomElement: (element: Element, editor: HTMLElement) => Path | null;
 /** 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. */

package/dist/adapters/domSelectionBridge.js

@@ -1,7 +1,10 @@
 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.hasAttribute("data-srte-selection-marker") ||
+    node.hasAttribute("data-srte-resize-overlay") ||
+    node.hasAttribute("data-srte-drag-handle") ||
+    node.hasAttribute("data-srte-check") ||
     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));
@@ -59,38 +62,51 @@ const pathForElement = (element, editor) => {
     };
     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;
+/** Returns the semantic model path for a DOM element at the adapter boundary. */
+export const pathForDomElement = (element, editor) => pathForElement(element, editor);
+const isInlineAtom = (element) => element.tagName.toLowerCase() === "img" || element.hasAttribute("data-formula");
+const inlineUnitsIn = (root) => {
+    const units = [];
+    const visit = (node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            if (node.textContent)
+                units.push({ type: "text", node: node });
+            return;
+        }
+        if (!(node instanceof Element) || isEditorOnlyElement(node))
+            return;
+        if (isInlineAtom(node)) {
+            units.push({ type: "atom", node });
+            return;
+        }
+        Array.from(node.childNodes).forEach(visit);
+    };
+    Array.from(root.childNodes).forEach(visit);
+    return units;
 };
-const offsetBeforePoint = (leaf, container, offset) => {
-    if (!leaf.contains(container) && leaf !== container)
+const pointRelativeTo = (container, offset, unit) => {
+    const point = container.ownerDocument?.createRange();
+    const unitRange = container.ownerDocument?.createRange();
+    if (!point || !unitRange)
         return null;
-    const range = leaf.ownerDocument.createRange();
-    range.selectNodeContents(leaf);
     try {
-        range.setEnd(container, offset);
+        point.setStart(container, offset);
+        point.collapse(true);
+        if (unit.type === "text")
+            unitRange.selectNodeContents(unit.node);
+        else
+            unitRange.selectNode(unit.node);
+        const fromStart = point.compareBoundaryPoints(Range.START_TO_START, unitRange);
+        const fromEnd = point.compareBoundaryPoints(Range.START_TO_END, unitRange);
+        if (fromStart <= 0)
+            return "before";
+        if (fromEnd >= 0)
+            return "after";
+        return "inside";
     }
     catch {
         return null;
     }
-    return range.toString().length;
 };
 const pointForDomPoint = (editor, container, offset) => {
     const leaf = closestLeaf(container, editor);
@@ -99,25 +115,47 @@ const pointForDomPoint = (editor, container, offset) => {
     const leafPath = pathForElement(leaf, editor);
     if (!leafPath)
         return null;
-    const textNodes = textNodesIn(leaf);
-    if (textNodes.length === 0)
+    const units = inlineUnitsIn(leaf);
+    if (units.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 directTextIndex = units.findIndex((unit) => unit.type === "text" && unit.node === container);
+    if (directTextIndex >= 0) {
+        const text = units[directTextIndex];
+        return {
+            path: [...leafPath, directTextIndex],
+            offset: Math.max(0, Math.min(offset, text.node.data.length)),
+        };
+    }
+    let previousText = null;
+    for (let index = 0; index < units.length; index += 1) {
+        const unit = units[index];
+        const relative = pointRelativeTo(container, offset, unit);
+        if (relative === "before") {
+            if (unit.type === "text")
+                return { path: [...leafPath, index], offset: 0 };
+            const nextTextIndex = units.slice(index + 1).findIndex((candidate) => candidate.type === "text");
+            if (nextTextIndex >= 0)
+                return { path: [...leafPath, index + 1 + nextTextIndex], offset: 0 };
+            break;
+        }
+        if (unit.type === "text")
+            previousText = { index, node: unit.node };
+    }
+    if (previousText) {
+        return { path: [...leafPath, previousText.index], offset: previousText.node.data.length };
     }
-    const last = textNodes.length - 1;
-    return { path: [...leafPath, last], offset: textNodes[last].data.length };
+    return null;
 };
 const nodeSelectionFromRange = (editor, range) => {
-    const nodes = Array.from(editor.querySelectorAll("img, [data-srte-node-selection='true']"));
-    const selected = nodes.find((node) => range.intersectsNode(node));
+    const nodes = Array.from(editor.querySelectorAll("img, [data-formula], [data-srte-node-selection='true']"));
+    const selected = nodes.find((node) => {
+        if (range.collapsed)
+            return node === range.startContainer || node.contains(range.startContainer);
+        const nodeRange = editor.ownerDocument.createRange();
+        nodeRange.selectNode(node);
+        return range.compareBoundaryPoints(Range.START_TO_START, nodeRange) === 0 &&
+            range.compareBoundaryPoints(Range.END_TO_END, nodeRange) === 0;
+    });
     if (!selected)
         return null;
     const path = pathForElement(selected, editor);
@@ -155,13 +193,27 @@ const domPointForSmartPoint = (editor, point) => {
     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)
+    const unit = inlineUnitsIn(leaf)[point.path[point.path.length - 1]];
+    if (unit?.type !== "text" || point.offset < 0 || point.offset > unit.node.data.length)
         return null;
-    return { node: text, offset: point.offset };
+    return { node: unit.node, offset: point.offset };
 };
 /** Restores a text selection from core paths after the editor DOM is rebuilt. */
 export const restoreSelectionToDom = (editor, smartSelection) => {
+    if (smartSelection.type === "node") {
+        const element = elementAtPath(editor, smartSelection.path);
+        if (!element)
+            return false;
+        const range = editor.ownerDocument.createRange();
+        range.selectNodeContents(element);
+        range.collapse(false);
+        const selection = editor.ownerDocument.defaultView?.getSelection();
+        if (!selection)
+            return false;
+        selection.removeAllRanges();
+        selection.addRange(range);
+        return true;
+    }
     if (smartSelection.type !== "text")
         return false;
     const anchor = domPointForSmartPoint(editor, smartSelection.anchor);

package/dist/adapters/domSmartDocument.js

@@ -1,6 +1,7 @@
 import { normalizeCompatibilityHtml, sanitizeLinkAttrs, } from "smartrte-core";
+import { isSmartListPreset } 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 blockTags = new Set(["p", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "blockquote", "pre", "table", "img", "video", "audio"]);
 const unwrap = (element) => {
     const parent = element.parentNode;
     if (!parent)
@@ -40,6 +41,9 @@ const marksFor = (element, inherited) => {
         marks = addMark(marks, { type: "subscript" });
     if (tag === "code")
         marks = addMark(marks, { type: "code" });
+    if (element.hasAttribute("data-formula")) {
+        marks = addMark(marks, { type: "formula", value: element.getAttribute("data-formula") || "" });
+    }
     if (tag === "a") {
         const safeLink = sanitizeLinkAttrs({
             href: element.getAttribute("href") || "",
@@ -51,6 +55,7 @@ const marksFor = (element, inherited) => {
     const color = element.getAttribute("color") || element.style.color;
     const backgroundColor = element.style.backgroundColor;
     const fontSize = element.style.fontSize;
+    const fontFamily = element.style.fontFamily;
     if (color)
         marks = addMark(marks, { type: "textColor", value: color });
     if (backgroundColor)
@@ -64,6 +69,8 @@ const marksFor = (element, inherited) => {
                 marks = addMark(marks, { type: "fontSize", valuePx });
         }
     }
+    if (fontFamily)
+        marks = addMark(marks, { type: "fontFamily", value: fontFamily });
     return marks;
 };
 const inlineNodes = (nodes, inherited = []) => {
@@ -76,6 +83,27 @@ const inlineNodes = (nodes, inherited = []) => {
         }
         if (!(node instanceof Element))
             return;
+        if (node.hasAttribute("data-formula")) {
+            result.push({
+                type: "formula",
+                value: node.getAttribute("data-formula") || "",
+                ...(node.textContent && node.textContent !== node.getAttribute("data-formula")
+                    ? { displayText: node.textContent }
+                    : {}),
+            });
+            return;
+        }
+        if (node.tagName.toLowerCase() === "img") {
+            result.push({
+                type: "inlineImage",
+                src: node.getAttribute("src") || "",
+                alt: node.getAttribute("alt") || undefined,
+                title: node.getAttribute("title") || undefined,
+                width: Number(node.getAttribute("width")) || undefined,
+                height: Number(node.getAttribute("height")) || undefined,
+            });
+            return;
+        }
         if (node.tagName.toLowerCase() === "br") {
             result.push({ type: "text", text: "\n", marks: inherited.length ? inherited : undefined });
             return;
@@ -103,9 +131,19 @@ const alignmentFor = (element) => {
     const value = (element.style.textAlign || element.getAttribute("align") || "").toLowerCase();
     return value === "center" || value === "right" || value === "justify" ? value : undefined;
 };
+const indentFor = (element) => {
+    const margin = Number.parseFloat(element.style.marginLeft || "0");
+    return Number.isFinite(margin) && margin > 0 ? Math.min(Math.round(margin / 24), 10) : undefined;
+};
 const parseBlocks = (parent) => directBlockChildren(parent).flatMap(parseBlock);
 const parseList = (element) => {
-    const style = element.tagName.toLowerCase() === "ol" ? "decimal" : "disc";
+    const requestedStyle = element.style.listStyleType;
+    const supportedStyles = new Set([
+        "disc", "circle", "square", "decimal", "decimal-leading-zero", "lower-alpha", "upper-alpha",
+        "lower-roman", "upper-roman",
+    ]);
+    const fallbackStyle = element.tagName.toLowerCase() === "ol" ? "decimal" : "disc";
+    const style = (supportedStyles.has(requestedStyle) ? requestedStyle : fallbackStyle);
     const items = Array.from(element.children)
         .filter((child) => child.tagName.toLowerCase() === "li")
         .map((item) => {
@@ -113,9 +151,28 @@ const parseList = (element) => {
         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: "listItem",
+            alignment: alignmentFor(item),
+            ...(item.hasAttribute("data-checked") || item.hasAttribute("data-srte-checked")
+                ? { checked: (item.getAttribute("data-checked") || item.getAttribute("data-srte-checked")) === "true" }
+                : {}),
+            children: [...(content ? [content] : []), ...nested],
+        };
     });
-    return { type: "list", style, children: items };
+    const checklist = element.getAttribute("data-srte-checklist") === "true";
+    const requestedPreset = element.getAttribute("data-srte-list-preset");
+    return {
+        type: "list",
+        indent: indentFor(element),
+        style,
+        ...(isSmartListPreset(requestedPreset) ? { preset: requestedPreset } : {}),
+        ...(checklist ? { checklist: true } : {}),
+        ...(checklist && element.getAttribute("data-srte-checklist-strike") === "true"
+            ? { strikeCompleted: true }
+            : {}),
+        children: items,
+    };
 };
 const tableRows = (table) => {
     const rows = [];
@@ -128,16 +185,38 @@ const tableRows = (table) => {
     });
     return rows;
 };
+const borderFor = (element) => {
+    const style = element.style;
+    if (style.border)
+        return style.border;
+    const declared = element.getAttribute("style")?.match(/(?:^|;)\s*border\s*:\s*([^;]+)/i)?.[1]?.trim();
+    if (declared)
+        return declared;
+    if (style.borderTopStyle === "none" &&
+        style.borderRightStyle === "none" &&
+        style.borderBottomStyle === "none" &&
+        style.borderLeftStyle === "none")
+        return "none";
+    return undefined;
+};
 const parseTable = (element) => ({
     type: "table",
+    indent: indentFor(element),
+    columnWidths: Array.from(element.querySelectorAll(":scope > colgroup > col"))
+        .map((column) => Number.parseFloat(column.style.width || column.getAttribute("width") || ""))
+        .filter((width) => Number.isFinite(width) && width > 0),
     children: tableRows(element).map((row) => ({
         type: "tableRow",
+        heightPx: Number.parseFloat(row.style.height || "") || undefined,
         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,
+            backgroundColor: cell.style.backgroundColor || undefined,
+            textColor: cell.style.color || undefined,
+            border: borderFor(cell),
             children: parseBlocks(cell).length ? parseBlocks(cell) : [{ type: "paragraph", alignment: alignmentFor(cell), children: inlineNodes(cell.childNodes) }],
         })),
     })),
@@ -145,15 +224,34 @@ const parseTable = (element) => ({
 const parseBlock = (element) => {
     const tag = element.tagName.toLowerCase();
     if (tag === "p")
-        return [{ type: "paragraph", alignment: alignmentFor(element), children: inlineNodes(element.childNodes) }];
+        return [{ type: "paragraph", alignment: alignmentFor(element), indent: indentFor(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) }];
+        return [{ type: "heading", level: Number(tag.slice(1)), alignment: alignmentFor(element), indent: indentFor(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) }];
+        return [{ type: "blockquote", alignment: alignmentFor(element), indent: indentFor(element), children: parseBlocks(element) }];
     if (tag === "pre")
-        return [{ type: "codeBlock", alignment: alignmentFor(element), text: element.textContent || "", language: element.querySelector("code")?.className.replace(/^language-/, "") || undefined }];
+        return [{ type: "codeBlock", alignment: alignmentFor(element), indent: indentFor(element), text: element.textContent || "", language: element.querySelector("code")?.className.replace(/^language-/, "") || undefined }];
+    if (tag === "img")
+        return [{
+                type: "image",
+                indent: indentFor(element),
+                src: element.getAttribute("src") || "",
+                alt: element.getAttribute("alt") || undefined,
+                title: element.getAttribute("title") || undefined,
+                width: Number(element.getAttribute("width")) || undefined,
+                height: Number(element.getAttribute("height")) || undefined,
+            }];
+    if (tag === "video" || tag === "audio")
+        return [{
+                type: "media",
+                indent: indentFor(element),
+                src: element.getAttribute("src") || element.querySelector("source")?.getAttribute("src") || "",
+                mediaType: tag,
+                title: element.getAttribute("title") || undefined,
+                mimeType: element.getAttribute("type") || element.querySelector("source")?.getAttribute("type") || undefined,
+            }];
     if (tag === "table")
         return [parseTable(element)];
     return [];
@@ -191,26 +289,70 @@ const serializeText = (node) => {
             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 === "fontFamily")
+            html = `<span style="font-family:${escapeHtml(mark.value)}">${html}</span>`;
+        if (mark.type === "formula")
+            html = `<span data-formula="${escapeHtml(mark.value)}">${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 serializeInline = (node) => {
+    if (node.type === "text")
+        return serializeText(node);
+    if (node.type === "formula") {
+        return `<span data-formula="${escapeHtml(node.value)}">${escapeHtml(node.displayText ?? node.value)}</span>`;
+    }
+    return `<img data-srte-inline="true" src="${escapeHtml(node.src)}"${node.alt ? ` alt="${escapeHtml(node.alt)}"` : ""}${node.title ? ` title="${escapeHtml(node.title)}"` : ""}${node.width ? ` width="${node.width}"` : ""}${node.height ? ` height="${node.height}"` : ""}>`;
+};
+const blockStyleAttribute = (block, extra) => {
+    const declarations = [
+        block.alignment ? `text-align:${block.alignment}` : "",
+        block.indent ? `margin-left:${block.indent * 24}px` : "",
+        extra || "",
+    ].filter(Boolean);
+    return declarations.length ? ` style="${declarations.join(";")}"` : "";
+};
+const alignmentAttribute = (alignment) => blockStyleAttribute({ alignment });
 const serializeBlock = (block) => {
     if (block.type === "paragraph")
-        return `<p${alignmentAttribute(block.alignment)}>${block.children.map(serializeText).join("")}</p>`;
+        return `<p${blockStyleAttribute(block)}>${block.children.map(serializeInline).join("")}</p>`;
     if (block.type === "heading")
-        return `<h${block.level}${alignmentAttribute(block.alignment)}>${block.children.map(serializeText).join("")}</h${block.level}>`;
+        return `<h${block.level}${blockStyleAttribute(block)}>${block.children.map(serializeInline).join("")}</h${block.level}>`;
     if (block.type === "blockquote")
-        return `<blockquote${alignmentAttribute(block.alignment)}>${block.children.map(serializeBlock).join("")}</blockquote>`;
+        return `<blockquote${blockStyleAttribute(block)}>${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>`;
+        return `<pre${blockStyleAttribute(block)}><code${block.language ? ` class="language-${escapeHtml(block.language)}"` : ""}>${escapeHtml(block.text)}</code></pre>`;
+    if (block.type === "image")
+        return `<img${blockStyleAttribute(block)} src="${escapeHtml(block.src)}"${block.alt ? ` alt="${escapeHtml(block.alt)}"` : ""}${block.title ? ` title="${escapeHtml(block.title)}"` : ""}${block.width ? ` width="${block.width}"` : ""}${block.height ? ` height="${block.height}"` : ""}>`;
+    if (block.type === "media") {
+        const tag = block.mediaType === "audio" ? "audio" : "video";
+        return `<${tag}${blockStyleAttribute(block)} controls src="${escapeHtml(block.src)}"${block.title ? ` title="${escapeHtml(block.title)}"` : ""}${block.mimeType ? ` type="${escapeHtml(block.mimeType)}"` : ""}></${tag}>`;
+    }
     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}>`;
+        const ordered = ["decimal", "decimal-leading-zero", "lower-alpha", "upper-alpha", "lower-roman", "upper-roman"].includes(block.style);
+        const tag = ordered ? "ol" : "ul";
+        const style = blockStyleAttribute(block, `list-style-type:${block.style}`);
+        const checklist = block.checklist
+            ? ` data-srte-checklist="true" data-srte-checklist-strike="${block.strikeCompleted ? "true" : "false"}"`
+            : "";
+        const preset = block.preset ? ` data-srte-list-preset="${block.preset}"` : "";
+        return `<${tag}${style}${preset}${checklist}>${block.children.map((item) => `<li${item.checked !== undefined ? ` data-srte-checked="${item.checked ? "true" : "false"}"` : ""}${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>`;
+    const columns = block.columnWidths?.length
+        ? `<colgroup>${block.columnWidths.map((width) => `<col style="width:${width}px">`).join("")}</colgroup>`
+        : "";
+    return `<table${blockStyleAttribute(block)}>${columns}<tbody>${block.children.map((row) => `<tr${row.heightPx ? ` style="height:${row.heightPx}px"` : ""}>${row.children.map((cell) => {
+        const tag = cell.type === "tableHeaderCell" ? "th" : "td";
+        const spans = `${cell.colspan && cell.colspan > 1 ? ` colspan="${cell.colspan}"` : ""}${cell.rowspan && cell.rowspan > 1 ? ` rowspan="${cell.rowspan}"` : ""}`;
+        const style = [
+            cell.backgroundColor ? `background-color:${escapeHtml(cell.backgroundColor)}` : "",
+            cell.textColor ? `color:${escapeHtml(cell.textColor)}` : "",
+            cell.border ? `border:${escapeHtml(cell.border)}` : "",
+        ].filter(Boolean);
+        return `<${tag}${spans}${style.length ? ` style="${style.join(";")}"` : ""}>${cell.children.map(serializeBlock).join("")}</${tag}>`;
+    }).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/domTableCommandBridge.d.ts

@@ -0,0 +1,35 @@
+import { type MergeTableCellsInput, type SetTableCellStyleInput, type SetTableColumnWidthInput, type SetTableRowHeightInput, type TableHeaderInput, type SplitTableCellInput, type TableColumnInput, type TableRowInput, type ToggleTableCellBorderInput } from "smartrte-core";
+export type DomTableCommand = {
+    id: "table.row.add" | "table.row.remove";
+    input: Omit<TableRowInput, "tablePath">;
+} | {
+    id: "table.column.add" | "table.column.remove";
+    input: Omit<TableColumnInput, "tablePath">;
+} | {
+    id: "table.cell.merge";
+    input: Omit<MergeTableCellsInput, "tablePath">;
+} | {
+    id: "table.cell.split";
+    input: Omit<SplitTableCellInput, "tablePath">;
+} | {
+    id: "table.header.cell.toggle" | "table.header.row.toggle" | "table.header.column.toggle";
+    input: Omit<TableHeaderInput, "tablePath">;
+} | {
+    id: "table.cell.style.set";
+    input: Omit<SetTableCellStyleInput, "tablePath">;
+} | {
+    id: "table.column.width.set";
+    input: Omit<SetTableColumnWidthInput, "tablePath">;
+} | {
+    id: "table.row.height.set";
+    input: Omit<SetTableRowHeightInput, "tablePath">;
+} | {
+    id: "table.cell.border.toggle";
+    input: Omit<ToggleTableCellBorderInput, "tablePath">;
+};
+/**
+ * Executes a core table command while replacing only the affected table.
+ * Visual table/cell attributes are transferred by logical grid position.
+ */
+export declare const executeDomTableCommand: (table: HTMLTableElement, command: DomTableCommand) => HTMLTableElement | null;
+export declare const executeDomTableRemoval: (table: HTMLTableElement) => boolean;