smartrte-react 0.3.4 → 1.0.0-beta.1

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.d.ts

@@ -1,10 +1,10 @@
-import { type SmartDocument } from "smartrte-core";
+import { type LegacySmartDocument } from "smartrte-core/legacy";
 /** 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 smartDocumentFromHtml: (html: string, ownerDocument: Document) => LegacySmartDocument;
 export declare const smartDocumentFromEditorRoot: (root: HTMLElement) => {
-    document: SmartDocument;
+    document: LegacySmartDocument;
     html: string;
 };
 /** Serializes the shadow-only model. It is not used for persisted editor HTML. */
-export declare const serializeSmartDocument: (document: SmartDocument) => string;
+export declare const serializeSmartDocument: (document: LegacySmartDocument) => string;

package/dist/adapters/domSmartDocument.js

@@ -1,6 +1,7 @@
-import { normalizeCompatibilityHtml, sanitizeLinkAttrs, } from "smartrte-core";
+import { normalizeCompatibilityHtml, sanitizeLinkAttrs, } from "smartrte-core/legacy";
+import { isSmartListPreset } from "smartrte-core/legacy";
 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,61 @@
+type Point = {
+    row: number;
+    column: number;
+};
+export type DomTableCommand = {
+    id: "table.remove";
+    input?: Record<string, never>;
+} | {
+    id: "table.row.add" | "table.row.remove";
+    input: {
+        index: number;
+    };
+} | {
+    id: "table.column.add" | "table.column.remove";
+    input: {
+        index: number;
+    };
+} | {
+    id: "table.cell.merge";
+    input: {
+        start: Point;
+        end: Point;
+    };
+} | {
+    id: "table.cell.split";
+    input: Point;
+} | {
+    id: "table.header.cell.toggle" | "table.header.row.toggle" | "table.header.column.toggle";
+    input: Point;
+} | {
+    id: "table.cell.style.set";
+    input: {
+        start: Point;
+        end?: Point;
+        backgroundColor?: string | null;
+        textColor?: string | null;
+    };
+} | {
+    id: "table.column.width.set";
+    input: {
+        index: number;
+        widthPx: number;
+    };
+} | {
+    id: "table.row.height.set";
+    input: {
+        index: number;
+        heightPx: number;
+    };
+} | {
+    id: "table.cell.border.toggle";
+    input: {
+        start: Point;
+        end?: Point;
+        visibleBorder?: string;
+    };
+};
+export declare const executeDomTableCommand: (element: HTMLTableElement, command: DomTableCommand) => HTMLTableElement | null;
+export declare const executeDomTableRemoval: (element: HTMLTableElement) => boolean;
+export declare const executeDomTableInsert: (root: HTMLElement, afterBlockIndex: number, rows: number, columns: number, withHeader?: boolean) => HTMLTableElement | null;
+export {};