smartrte-react 0.3.4 → 0.3.5

package/dist/components/ClassicEditor.js

@@ -2,16 +2,19 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useRef, useState } from "react";
 import { MediaManager } from "./MediaManager.js";
 import { LinkEditorPopover } from "./LinkEditorPopover.js";
-import * as pdfjsLib from 'pdfjs-dist';
-import mammoth from 'mammoth';
-import JSZip from 'jszip';
-import { applyLink, applyTextColor as coreApplyTextColor, markdownToCompatibilityHtml, removeLink, sanitizeLinkHref, toggleBold, toggleItalic, toggleSubscript, toggleSuperscript, toggleUnderline } from 'smartrte-core';
+import { applyLink, applyTextColor as coreApplyTextColor, getSmartListPreset, isSmartListPreset, listStyleForPresetDepth, removeLink, sanitizeLinkHref, SMART_LIST_PRESETS, toggleBold, toggleItalic, toggleSubscript, toggleSuperscript, toggleUnderline } from 'smartrte-core';
+import { executeDomMoveCommand } from '../adapters/domMoveCommandBridge.js';
+import { adjacentInlineAtom } from '../adapters/domInlineAtomCommandBridge.js';
 import { restoreSelectionToDom, selectionFromDom } from '../adapters/domSelectionBridge.js';
 import { serializeSmartDocument, smartDocumentFromEditorRoot } from '../adapters/domSmartDocument.js';
 import { isShadowModeEnabled, runShadowCommand } from '../adapters/shadowMode.js';
 import { getCoreInlineMarkResult, isCoreInlineMarkEnabled } from '../adapters/inlineMarkCoreExecution.js';
 import { closestFromTarget, isNode } from '../adapters/domTargets.js';
 import { ensureStyleSheet } from '../theme.js';
+import { createReactEditorPluginRuntime, matchesPluginShortcut } from '../pluginRuntime.js';
+import { createEditorFormatRuntime } from '../formatRuntime.js';
+import { createBuiltInFormatDefinitions } from '../builtInFormatDefinitions.js';
+import { createDomEditorController } from '../editorController.js';
 const iconPaths = {
     undo: _jsxs(_Fragment, { children: [_jsx("path", { d: "M9 7 5 11l4 4" }), _jsx("path", { d: "M5 11h7a5 5 0 0 1 5 5" })] }),
     redo: _jsxs(_Fragment, { children: [_jsx("path", { d: "m15 7 4 4-4 4" }), _jsx("path", { d: "M19 11h-7a5 5 0 0 0-5 5" })] }),
@@ -78,11 +81,7 @@ function ToolbarMenu({ label, icon, active, priority, children }) {
 function MenuItem({ icon, label, active, disabled, onClick, title }) {
     return _jsxs("button", { type: "button", role: "menuitem", className: "srte-menu-item", "aria-label": title || label, "aria-pressed": Boolean(active), "aria-checked": active || undefined, disabled: disabled, title: title || label, onClick: (event) => { onClick(); event.currentTarget.closest("details")?.removeAttribute("open"); }, children: [_jsx(ToolbarIcon, { name: icon }), _jsx("span", { children: label }), active && _jsx("span", { className: "srte-menu-check", "aria-hidden": "true", children: "\u2713" })] });
 }
-// Initialize PDF.js worker
-if (typeof window !== 'undefined') {
-    pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
-}
-export function ClassicEditor({ value, onChange, placeholder = "Type here…", minHeight = 200, maxHeight = 500, readOnly = false, table = true, media = true, formula = true, mediaManager, fonts = [
+export function ClassicEditor({ value, onChange, placeholder = "Type here…", minHeight = 200, maxHeight = 500, readOnly = false, table: legacyTable = true, media: legacyMedia = true, formula: legacyFormula = true, features, plugins, formats, formatDefinitions, mediaManager, fonts = [
     { name: "Arial", value: "Arial, Helvetica, sans-serif" },
     { name: "Georgia", value: "Georgia, serif" },
     { name: "Impact", value: "Impact, Charcoal, sans-serif" },
@@ -92,18 +91,50 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     { name: "Courier New", value: "'Courier New', Courier, monospace" },
 ], defaultFont, preserveFontFamily = false, preserveColors = false, preserveDocxStyles = true, theme = "light", showFontSize = true, className, }) {
     ensureStyleSheet();
+    const pluginRuntime = createReactEditorPluginRuntime({
+        ...(plugins ? { plugins } : {
+            features: {
+                ...features,
+                table: features?.table ?? legacyTable,
+                media: features?.media ?? legacyMedia,
+                formula: features?.formula ?? legacyFormula,
+            },
+        }),
+    });
+    const formatRuntime = createEditorFormatRuntime(formats, [
+        ...(formatDefinitions ?? createBuiltInFormatDefinitions({ preserveDocxStyles })),
+        ...pluginRuntime.formats,
+    ]);
+    const proxyFormatLabel = (format) => format.id === "docx" ? "Word" : format.label;
+    const proxyExportFormats = [
+        ...["html", "markdown", "docx", "pdf"].flatMap((id) => formatRuntime.exports.filter((format) => format.id === id)),
+        ...formatRuntime.exports.filter((format) => !["html", "markdown", "docx", "pdf"].includes(format.id)),
+    ];
+    const table = pluginRuntime.hasFeature("table");
+    const media = pluginRuntime.hasFeature("media");
+    const formula = pluginRuntime.hasFeature("formula");
+    const listFeature = pluginRuntime.hasFeature("list");
+    const checklistFeature = pluginRuntime.hasFeature("checklist");
+    const blockquoteFeature = pluginRuntime.hasFeature("blockquote");
+    const codeBlockFeature = pluginRuntime.hasFeature("codeBlock");
+    const alignmentFeature = pluginRuntime.hasFeature("alignment");
+    const blockTypeFeature = pluginRuntime.hasFeature("blockType");
+    const basicFormattingFeature = pluginRuntime.hasFeature("basicFormatting");
+    const moveFeature = pluginRuntime.hasFeature("move");
     const editableRef = useRef(null);
+    const editorControllerRef = useRef(null);
+    if (!editorControllerRef.current)
+        editorControllerRef.current = createDomEditorController();
+    editorControllerRef.current.configure({
+        plugins: pluginRuntime.plugins,
+        readOnly,
+    });
     const editorScrollRef = useRef(null);
     const lastEmittedRef = useRef("");
     const isComposingRef = useRef(false);
     const fileInputRef = useRef(null);
-    const pdfInputRef = useRef(null);
-    const docxInputRef = useRef(null);
-    const htmlInputRef = useRef(null);
-    const mdInputRef = useRef(null);
     const [loadingPdf, setLoadingPdf] = useState(false);
     const [loadingDocx, setLoadingDocx] = useState(false);
-    // State for import confirmation
     const [pendingImport, setPendingImport] = useState(null);
     const replaceTargetRef = useRef(null);
     const [selectedImage, setSelectedImage] = useState(null);
@@ -124,6 +155,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const tableFillTargetsRef = useRef(null);
     const selectingRef = useRef(null);
     const [imageMenu, setImageMenu] = useState(null);
+    const [pluginContextMenu, setPluginContextMenu] = useState(null);
     const [linkMenu, setLinkMenu] = useState(null);
     const [showMediaManager, setShowMediaManager] = useState(false);
     const [showColorPicker, setShowColorPicker] = useState(false);
@@ -132,10 +164,6 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const savedRangeRef = useRef(null);
     const pendingFontSizeRef = useRef(null);
     const inlineScriptCaretOverrideRef = useRef(null);
-    const historyRef = useRef({
-        undo: [],
-        redo: [],
-    });
     const inputHistoryGroupRef = useRef(null);
     const [currentFontSize, setCurrentFontSize] = useState("");
     const [currentFont, setCurrentFont] = useState("");
@@ -167,6 +195,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             fixNegativeMargins(el);
             normalizeInvalidQuoteNesting(el);
             normalizeInvalidCodeBlockNesting(el);
+            normalizeBlockContainerStyling(el);
             normalizeInvalidTableNesting(el);
             ensureTableWrappers(el);
             ensureCaretBoundaryParagraphs(el);
@@ -174,6 +203,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         }
         normalizeInvalidQuoteNesting(el);
         normalizeInvalidCodeBlockNesting(el);
+        normalizeBlockContainerStyling(el);
         normalizeInvalidTableNesting(el);
         ensureCaretBoundaryParagraphs(el);
         // Suppress native context menu inside table cells at capture phase
@@ -277,8 +307,19 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             if (!inEditor)
                 return;
             let node = range.commonAncestorContainer;
-            if (node.nodeType === Node.TEXT_NODE)
+            if (node.nodeType === Node.TEXT_NODE) {
                 node = node.parentNode;
+            }
+            else if (range.collapsed && node instanceof HTMLElement) {
+                // A caret collapsed "between children" of a container (e.g. left
+                // there by focusElementEnd(list) after unwrapping a blockquote)
+                // must resolve down into that container's actual content, or every
+                // active-state indicator below silently reports "not active" even
+                // though the caret is sitting right next to a blockquote/pre.
+                node = resolveCollapsedElementPosition(node, range.startOffset);
+                if (node.nodeType === Node.TEXT_NODE)
+                    node = node.parentNode;
+            }
             const element = node instanceof HTMLElement ? node : null;
             const block = element?.closest("p,h1,h2,h3,h4,h5,h6,li,blockquote,pre,div");
             const tag = block?.tagName.toLowerCase();
@@ -582,13 +623,39 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         return () => editor.removeEventListener("beforeinput", applyPendingInlineScript);
     }, []);
     const applyFormatBlock = (blockName) => {
+        if (!blockTypeFeature)
+            return;
         try {
             if (!restoreSavedSelection()) {
                 safeSelectRange(getSelectionRangeInEditor());
             }
             pushEditorHistory();
+            const range = getSelectionRangeInEditor();
+            const tag = normalizeBlockTag(blockName);
+            const blocks = range
+                ? (range.collapsed
+                    ? [getCurrentBlock()].filter((block) => Boolean(block))
+                    : getSelectedBlocks(range))
+                : [];
+            const coreBlocks = blocks.filter((block) => block.matches("p,h1,h2,h3,h4,h5,h6") && !block.closest("li,td,th"));
+            if (coreBlocks.length === blocks.length &&
+                coreBlocks.length > 0 &&
+                (tag === "p" || /^h[1-6]$/.test(tag || ""))) {
+                const replacements = editorControllerRef.current.bindRoot(editableRef.current).executeBlockCommand(coreBlocks, {
+                    id: "block-type.set",
+                    input: tag === "p"
+                        ? { type: "paragraph" }
+                        : { type: "heading", level: Number(tag.slice(1)) },
+                });
+                if (replacements) {
+                    focusElementEnd(replacements[replacements.length - 1]);
+                    setCurrentBlockType(tag);
+                    handleInput();
+                    requestAnimationFrame(updateActiveState);
+                    return;
+                }
+            }
             if (applyFormatBlockFallback(blockName)) {
-                const tag = normalizeBlockTag(blockName);
                 if (tag === "p" || /^h[1-6]$/.test(tag || "")) {
                     setCurrentBlockType(tag);
                 }
@@ -637,37 +704,19 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             cell.style.outline = outline;
             cell.style.outlineOffset = outlineOffset;
         });
-        const undo = historyRef.current.undo;
-        if (undo[undo.length - 1] !== html) {
-            undo.push(html);
-            if (undo.length > 100)
-                undo.shift();
-        }
-        historyRef.current.redo = [];
+        editorControllerRef.current.bindRoot(editor).recordHistorySnapshot(html);
     };
     const restoreEditorHistory = (dir) => {
         const editor = editableRef.current;
         if (!editor)
             return false;
-        const history = historyRef.current;
-        const from = dir === "undo" ? history.undo : history.redo;
-        const to = dir === "undo" ? history.redo : history.undo;
-        const currentHtml = editor.innerHTML;
-        let html;
-        while (from.length > 0) {
-            const candidate = from.pop();
-            if (candidate !== currentHtml) {
-                html = candidate;
-                break;
-            }
-        }
-        if (html == null)
+        const restored = editorControllerRef.current.bindRoot(editor).restoreHistory(dir);
+        if (!restored)
             return false;
-        if (to[to.length - 1] !== currentHtml)
-            to.push(currentHtml);
-        editor.innerHTML = html;
+        const html = restored.html;
         fixNegativeMargins(editor);
         normalizeInvalidCodeBlockNesting(editor);
+        normalizeBlockContainerStyling(editor);
         ensureTableWrappers(editor);
         ensureCaretBoundaryParagraphs(editor);
         addTableResizeHandles();
@@ -850,14 +899,35 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         range.collapse(false);
         return range;
     };
+    // A collapsed range positioned directly on an element (e.g. after
+    // focusElementEnd collapses "inside" a blockquote rather than into one of
+    // its text nodes) sits between that element's children, not inside any of
+    // them. Resolve down to the actual child content at that position so a
+    // container like blockquote/li/ul/ol/td/th is never mistaken for the
+    // current block itself.
+    const resolveCollapsedElementPosition = (element, offset) => {
+        let node = element.childNodes[offset] ?? element.childNodes[offset - 1] ?? element;
+        while (node instanceof HTMLElement &&
+            node.matches("blockquote,li,ul,ol,td,th") &&
+            node.childNodes.length) {
+            node = node.lastChild;
+        }
+        return node;
+    };
     const getCurrentBlock = () => {
         const editor = editableRef.current;
         const range = getSelectionRangeInEditor();
         if (!editor || !range)
             return null;
         let node = range.startContainer;
-        if (node.nodeType === Node.TEXT_NODE)
+        if (node.nodeType === Node.TEXT_NODE) {
             node = node.parentNode;
+        }
+        else if (node instanceof HTMLElement) {
+            node = resolveCollapsedElementPosition(node, range.startOffset);
+            if (node.nodeType === Node.TEXT_NODE)
+                node = node.parentNode;
+        }
         const element = node instanceof HTMLElement ? node : null;
         const cell = element?.closest("td,th");
         if (cell && editor.contains(cell)) {
@@ -875,6 +945,22 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         return block;
     };
     const blockSelector = "p,h1,h2,h3,h4,h5,h6,li,blockquote,pre,div";
+    // Finds the nearest blockSelector ancestor without leaping over an
+    // intervening ul/ol/blockquote: those are containers, not interchangeable
+    // wrappers, so a candidate nested inside one is never mistaken for being
+    // owned by a distant container beyond it (e.g. a blockquote wrapping the
+    // whole document, or a list several levels up).
+    const findOwningBlock = (start) => {
+        let node = start;
+        while (node) {
+            if (node.matches("ul,ol,blockquote"))
+                return null;
+            if (node.matches(blockSelector))
+                return node;
+            node = node.parentElement;
+        }
+        return null;
+    };
     const getSelectedBlocks = (range) => {
         const editor = editableRef.current;
         if (!editor)
@@ -888,32 +974,50 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const startCell = startElement?.closest?.("td,th");
         const endCell = endElement?.closest?.("td,th");
         const scope = startCell && startCell === endCell && editor.contains(startCell) ? startCell : editor;
-        const blocks = Array.from(scope.querySelectorAll(blockSelector)).filter((block) => {
+        const intersects = (node) => {
+            try {
+                return range.intersectsNode(node);
+            }
+            catch {
+                return false;
+            }
+        };
+        const candidates = Array.from(scope.querySelectorAll(blockSelector)).filter((block) => {
             if (block === editor || block.getAttribute("data-table-wrapper") === "true")
                 return false;
-            const parentBlock = block.parentElement?.closest(blockSelector);
-            if (parentBlock && scope.contains(parentBlock) && parentBlock !== scope)
+            // Caret-boundary spacer paragraphs exist only to give the caret a click
+            // target next to a blockquote/pre/table; they aren't real content and
+            // must never be swept into a broader selection's block set.
+            if (block.getAttribute("data-srte-caret-boundary") === "true")
                 return false;
-            try {
-                if (!range.intersectsNode(block))
+            if (!intersects(block))
+                return false;
+            const parent = block.parentNode;
+            if (parent === range.endContainer) {
+                const index = Array.prototype.indexOf.call(parent.childNodes, block);
+                if (range.endOffset <= index)
                     return false;
-                const parent = block.parentNode;
-                if (parent === range.endContainer) {
-                    const index = Array.prototype.indexOf.call(parent.childNodes, block);
-                    if (range.endOffset <= index)
-                        return false;
-                }
-                if (parent === range.startContainer) {
-                    const index = Array.prototype.indexOf.call(parent.childNodes, block);
-                    if (range.startOffset > index)
-                        return false;
-                }
-                return true;
             }
-            catch {
-                return false;
+            if (parent === range.startContainer) {
+                const index = Array.prototype.indexOf.call(parent.childNodes, block);
+                if (range.startOffset > index)
+                    return false;
             }
+            return true;
+        });
+        // Prefer a candidate's owning block (e.g. an li wrapping a single p) only
+        // when that owner has no other content outside the selection — otherwise
+        // the owner is too broad (a container spanning many unrelated lines, or
+        // the whole document) and the more specific candidate stands on its own.
+        const stage1 = candidates.filter((block) => {
+            const parentBlock = findOwningBlock(block.parentElement);
+            if (!parentBlock || !scope.contains(parentBlock) || parentBlock === scope)
+                return true;
+            return Array.from(parentBlock.querySelectorAll(blockSelector)).some((sibling) => sibling !== block && findOwningBlock(sibling.parentElement) === parentBlock && !intersects(sibling));
         });
+        // Drop any survivor that only qualifies because a more specific
+        // descendant survivor is nested inside it.
+        const blocks = stage1.filter((block) => !stage1.some((other) => other !== block && block.contains(other)));
         if (blocks.length > 0)
             return sortInDocumentOrder(blocks);
         const current = getCurrentBlock();
@@ -924,9 +1028,15 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         if (!editor)
             return [];
         if (range.collapsed) {
-            const element = range.startContainer instanceof HTMLElement
-                ? range.startContainer
-                : range.startContainer.parentElement;
+            // A caret left positioned "between children" of a container (e.g. via
+            // focusElementEnd(ul) after unwrapping a blockquote) needs the same
+            // drill-down as getCurrentBlock, or a list item is missed entirely
+            // whenever the collapsed point sits on the list/blockquote itself
+            // rather than inside one of its descendant text nodes.
+            let node = range.startContainer;
+            if (node instanceof HTMLElement)
+                node = resolveCollapsedElementPosition(node, range.startOffset);
+            const element = node instanceof HTMLElement ? node : node.parentElement;
             const item = element?.closest("li");
             return item && editor.contains(item) ? [item] : [];
         }
@@ -942,6 +1052,22 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         });
         return sortInDocumentOrder(Array.from(editor.querySelectorAll("li")).filter(ownsSelectedContent));
     };
+    const resolveCommonSelectedList = (items) => {
+        if (items.length === 0)
+            return null;
+        const listChain = (item) => {
+            const lists = [];
+            let list = item.parentElement?.matches("ul,ol") ? item.parentElement : null;
+            while (list) {
+                lists.push(list);
+                const ownerItem = list.parentElement?.closest("li");
+                list = ownerItem?.parentElement?.matches("ul,ol") ? ownerItem.parentElement : null;
+            }
+            return lists;
+        };
+        const chains = items.map(listChain);
+        return chains[0].find((candidate) => chains.every((chain) => chain.includes(candidate))) || null;
+    };
     const getAlignmentTarget = (block) => {
         const item = block.tagName === "LI" ? block : block.closest("li");
         return item instanceof HTMLElement ? item : block;
@@ -981,6 +1107,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             : "left";
     };
     const applyTextAlignment = (alignment) => {
+        if (!alignmentFeature)
+            return;
         try {
             if (!restoreSavedSelection())
                 safeSelectRange(getSelectionRangeInEditor());
@@ -991,6 +1119,26 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             if (targets.length === 0)
                 return;
             pushEditorHistory();
+            const coreTargets = targets.filter((target) => target.matches("p,h1,h2,h3,h4,h5,h6,blockquote,pre") &&
+                !target.closest("li"));
+            if (coreTargets.length === targets.length) {
+                const groups = new Map();
+                coreTargets.forEach((target) => {
+                    const parent = target.parentElement;
+                    if (parent)
+                        groups.set(parent, [...(groups.get(parent) || []), target]);
+                });
+                const replacements = Array.from(groups.values()).flatMap((group) => editorControllerRef.current.bindRoot(editableRef.current).executeBlockCommand(group, {
+                    id: "alignment.set",
+                    input: { alignment },
+                }) || []);
+                if (replacements.length === coreTargets.length) {
+                    focusElementEnd(replacements[replacements.length - 1]);
+                    handleInput();
+                    requestAnimationFrame(updateActiveState);
+                    return;
+                }
+            }
             targets.forEach((target) => {
                 target.style.textAlign = alignment === "left" ? "" : alignment;
                 if (!target.getAttribute("style"))
@@ -1213,6 +1361,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const isCompatible = (candidate) => candidate instanceof HTMLElement &&
             candidate.tagName === list.tagName &&
             candidate.style.listStyleType === list.style.listStyleType &&
+            candidate.dataset.srteListPreset === list.dataset.srteListPreset &&
+            candidate.dataset.srteListDepth === list.dataset.srteListDepth &&
             candidate.dataset.srteChecklist === list.dataset.srteChecklist &&
             candidate.dataset.srteChecklistStrike === list.dataset.srteChecklistStrike;
         let merged = list;
@@ -1338,6 +1488,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         list.parentElement?.replaceChild(replacement, list);
         const li = replacement.querySelector("li");
         focusElementEnd(li || replacement);
+        return replacement;
     };
     const getOrCreateNestedList = (item, source) => {
         const compatible = Array.from(item.children).find((child) => child instanceof HTMLElement &&
@@ -1470,9 +1621,28 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         return list?.parentElement?.tagName === "LI" && ["UL", "OL"].includes(list.parentElement.parentElement?.tagName || "");
     });
     const applyListDepthChange = (items, direction) => {
+        if (!listFeature)
+            return false;
         const enabled = direction === "indent" ? canIndentListItems(items) : canOutdentListItems(items);
         if (!enabled)
             return false;
+        const editor = editableRef.current;
+        if (editor && items.every((item) => !item.closest("td,th,[data-srte-checklist='true']"))) {
+            const beforeCoreHtml = editor.innerHTML;
+            const result = editorControllerRef.current
+                .bindRoot(editor)
+                .execute(direction === "indent" ? "list.indent" : "list.outdent");
+            if (result) {
+                inputHistoryGroupRef.current = null;
+                editorControllerRef.current.bindRoot(editor).recordHistorySnapshot(beforeCoreHtml);
+                const selection = window.getSelection();
+                if (selection?.rangeCount)
+                    savedRangeRef.current = selection.getRangeAt(0).cloneRange();
+                handleInput();
+                requestAnimationFrame(updateActiveState);
+                return true;
+            }
+        }
         pushEditorHistory();
         const changed = direction === "indent"
             ? nestSelectedListItems(items)
@@ -1527,6 +1697,86 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         });
         return lastSelected;
     };
+    const listStylesForRoot = (listTag, rootStyle) => {
+        if (listTag === "ul") {
+            if (rootStyle === "circle")
+                return ["circle", "square", "disc"];
+            if (rootStyle === "square")
+                return ["square", "circle", "disc"];
+            return ["disc", "circle", "square"];
+        }
+        if (rootStyle === "upper-alpha")
+            return ["upper-alpha", "lower-alpha", "lower-roman"];
+        if (rootStyle === "upper-roman")
+            return ["upper-roman", "upper-alpha", "decimal"];
+        // Legacy single-style choices remain stable across the first nested level.
+        // Depth-aware families are represented by named presets above.
+        if (rootStyle === "lower-alpha")
+            return ["lower-alpha", "lower-alpha", "lower-roman"];
+        if (rootStyle === "lower-roman")
+            return ["lower-roman", "lower-roman", "lower-alpha"];
+        if (rootStyle === "decimal-leading-zero")
+            return ["decimal-leading-zero", "lower-alpha", "lower-roman"];
+        return ["decimal", "lower-alpha", "lower-roman"];
+    };
+    const clearListPreset = (list) => {
+        delete list.dataset.srteListPreset;
+        delete list.dataset.srteListDepth;
+        delete list.dataset.srteListMarker;
+    };
+    const applyListPreset = (list, preset, depth) => {
+        const definition = getSmartListPreset(preset);
+        list.dataset.srteListPreset = preset;
+        list.dataset.srteListDepth = String(depth);
+        list.style.listStyleType = listStyleForPresetDepth(preset, depth);
+        const marker = definition.markers?.[Math.min(depth, definition.markers.length - 1)];
+        if (marker)
+            list.dataset.srteListMarker = marker;
+        else
+            delete list.dataset.srteListMarker;
+    };
+    const applyListPresetHierarchy = (list, preset, depth = 0) => {
+        applyListPreset(list, preset, depth);
+        Array.from(list.children).forEach((item) => {
+            if (!(item instanceof HTMLElement) || item.tagName !== "LI")
+                return;
+            Array.from(item.children).forEach((child) => {
+                if (child instanceof HTMLElement && child.matches("ul,ol")) {
+                    applyListPresetHierarchy(child, preset, depth + 1);
+                }
+            });
+        });
+    };
+    const defaultListStyleAtDepth = (listTag, depth, rootStyle) => {
+        const styles = listStylesForRoot(listTag, rootStyle);
+        return styles[Math.min(depth, styles.length - 1)];
+    };
+    const restyleDescendantLists = (item, listTag, depth = 1, rootStyle, preset) => {
+        Array.from(item.children).forEach((child) => {
+            if (!(child instanceof HTMLElement) || !child.matches("ul,ol"))
+                return;
+            const replacement = child.tagName.toLowerCase() === listTag
+                ? child
+                : cloneListShell(child, listTag);
+            if (replacement !== child) {
+                while (child.firstChild)
+                    replacement.appendChild(child.firstChild);
+                child.replaceWith(replacement);
+            }
+            clearChecklist(replacement);
+            if (preset)
+                applyListPreset(replacement, preset, depth);
+            else {
+                clearListPreset(replacement);
+                replacement.style.listStyleType = defaultListStyleAtDepth(listTag, depth, rootStyle);
+            }
+            Array.from(replacement.children).forEach((nestedItem) => {
+                if (nestedItem instanceof HTMLElement && nestedItem.tagName === "LI") {
+                    restyleDescendantLists(nestedItem, listTag, depth + 1, rootStyle, preset);
+                }
+            });
+        });
+    };
     const getDirectSelectionCell = (range) => {
         const startCell = getClosestCell(range.startContainer);
         const endCell = getClosestCell(range.endContainer);
@@ -1588,8 +1838,15 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         return convertDirectTableCellSelectionToList(range, listTag);
     };
     const applyListStyle = (value) => {
-        const listTag = value.startsWith("ordered:") ? "ol" : "ul";
-        const styleType = value.replace(/^(ordered|bullet):/, "");
+        if (!listFeature)
+            return;
+        const listTag = value.startsWith("ordered:") || value.startsWith("ordered-preset:") ? "ol" : "ul";
+        const requestedPreset = value.replace(/^(ordered|bullet)-preset:/, "");
+        const preset = isSmartListPreset(requestedPreset) ? requestedPreset : undefined;
+        const styleType = preset
+            ? listStyleForPresetDepth(preset, 0)
+            : value.replace(/^(ordered|bullet):/, "");
+        normalizeListNesting(editableRef.current);
         if (!restoreSavedSelection())
             safeSelectRange(getSelectionRangeInEditor());
         const range = getSelectionRangeInEditor();
@@ -1600,7 +1857,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             pushEditorHistory();
             const list = convertDirectTableCellContentsToList(currentBlock, listTag);
             if (list) {
-                list.style.listStyleType = styleType;
+                if (preset)
+                    applyListPreset(list, preset, 0);
+                else
+                    list.style.listStyleType = styleType;
                 handleInput();
                 requestAnimationFrame(updateActiveState);
             }
@@ -1610,7 +1870,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             pushEditorHistory();
             const list = convertDirectTableCellSelectionToList(range, listTag);
             if (list) {
-                list.style.listStyleType = styleType;
+                if (preset)
+                    applyListPreset(list, preset, 0);
+                else
+                    list.style.listStyleType = styleType;
                 handleInput();
                 requestAnimationFrame(updateActiveState);
             }
@@ -1620,8 +1883,52 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const selectedItems = resolveSelectedListItems(range);
         const selectedPlainBlocks = selectedBlocks.filter((block) => !block.closest("ul,ol"));
         if (selectedItems.length > 0) {
+            const outermostItems = selectedItems.filter((item) => !selectedItems.some((candidate) => candidate !== item && candidate.contains(item)));
+            const commonSelectedList = resolveCommonSelectedList(selectedItems);
+            const promotedLists = new Set(selectedPlainBlocks.length > 0
+                ? outermostItems.map((item) => {
+                    let list = item.parentElement?.matches("ul,ol") ? item.parentElement : null;
+                    while (list?.parentElement?.closest("li")?.parentElement?.matches("ul,ol")) {
+                        list = list.parentElement.closest("li").parentElement;
+                    }
+                    return list;
+                }).filter((list) => Boolean(list))
+                : commonSelectedList ? [commonSelectedList] : []);
             pushEditorHistory();
-            const lastItem = restyleSelectedListItems(selectedItems, listTag, styleType);
+            let lastItem = null;
+            if (promotedLists.size > 0) {
+                promotedLists.forEach((source) => {
+                    const items = Array.from(source.children).filter((child) => child instanceof HTMLElement && child.tagName === "LI");
+                    items.forEach((item) => restyleDescendantLists(item, listTag, 1, styleType, preset));
+                    const target = source.tagName.toLowerCase() === listTag
+                        ? source
+                        : cloneListShell(source, listTag);
+                    if (target !== source) {
+                        while (source.firstChild)
+                            target.appendChild(source.firstChild);
+                        source.replaceWith(target);
+                    }
+                    clearChecklist(target);
+                    if (preset)
+                        applyListPreset(target, preset, 0);
+                    else {
+                        clearListPreset(target);
+                        target.style.listStyleType = styleType;
+                    }
+                    lastItem = target.lastElementChild;
+                    mergeAdjacentCompatibleLists(target);
+                });
+            }
+            const scopedItems = outermostItems.filter((item) => !Array.from(promotedLists).some((list) => list.contains(item)));
+            scopedItems.forEach((item) => restyleDescendantLists(item, listTag, 1, styleType, preset));
+            lastItem = restyleSelectedListItems(scopedItems, listTag, styleType) || lastItem;
+            if (preset) {
+                scopedItems.forEach((item) => {
+                    const list = item.parentElement;
+                    if (list?.matches("ul,ol"))
+                        applyListPreset(list, preset, 0);
+                });
+            }
             const convertedPlainBlocks = convertSelectedBlocksToList(selectedPlainBlocks, listTag, styleType);
             if (!convertedPlainBlocks && lastItem)
                 focusElementEnd(lastItem);
@@ -1655,7 +1962,12 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 if (convertSelectedBlocksToList(convertibleBlocks, listTag)) {
                     const createdList = getCurrentBlock()?.closest("ul,ol");
                     if (createdList) {
-                        createdList.style.listStyleType = styleType;
+                        if (preset)
+                            applyListPresetHierarchy(createdList, preset);
+                        else {
+                            clearListPreset(createdList);
+                            createdList.style.listStyleType = styleType;
+                        }
                         const mergedList = mergeAdjacentCompatibleLists(createdList);
                         const lastItem = mergedList.lastElementChild;
                         if (lastItem)
@@ -1670,7 +1982,12 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 toggleList(listTag);
                 const createdList = getCurrentBlock()?.closest("ul,ol");
                 if (createdList) {
-                    createdList.style.listStyleType = styleType;
+                    if (preset)
+                        applyListPresetHierarchy(createdList, preset);
+                    else {
+                        clearListPreset(createdList);
+                        createdList.style.listStyleType = styleType;
+                    }
                     handleInput();
                 }
                 return;
@@ -1696,7 +2013,12 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 list.parentElement?.replaceChild(target, list);
             }
             clearChecklist(target);
-            target.style.listStyleType = styleType;
+            if (preset)
+                applyListPresetHierarchy(target, preset);
+            else {
+                clearListPreset(target);
+                target.style.listStyleType = styleType;
+            }
             lastList = target;
             styledLists.push(target);
         });
@@ -1712,6 +2034,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         requestAnimationFrame(updateActiveState);
     };
     const applyChecklist = (strikeCompleted = false, toggleOff = false) => {
+        if (!checklistFeature)
+            return;
         if (!restoreSavedSelection())
             safeSelectRange(getSelectionRangeInEditor());
         const range = getSelectionRangeInEditor();
@@ -1719,6 +2043,32 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             return;
         const selectedItems = resolveSelectedListItems(range);
         const selectedChecklists = selectedItems.filter((item) => item.parentElement?.dataset.srteChecklist === "true");
+        const selectedLists = new Set(selectedItems.map((item) => item.parentElement).filter(Boolean));
+        const coversCompleteList = selectedLists.size === 1 &&
+            selectedItems.length === (Array.from(selectedLists)[0]?.children.length || 0);
+        const removingActiveChecklist = toggleOff &&
+            selectedItems.length > 0 &&
+            selectedChecklists.length === selectedItems.length;
+        if (!removingActiveChecklist && (selectedItems.length === 0 || coversCompleteList)) {
+            const editor = editableRef.current;
+            const beforeCoreHtml = editor?.innerHTML || "";
+            const coreResult = editor
+                ? editorControllerRef.current
+                    .bindRoot(editor)
+                    .execute("checklist.toggle", { strikeCompleted })
+                : null;
+            if (coreResult) {
+                inputHistoryGroupRef.current = null;
+                editorControllerRef.current.bindRoot(editor).recordHistorySnapshot(beforeCoreHtml);
+                syncChecklistControls(editor);
+                const selection = window.getSelection();
+                if (selection?.rangeCount)
+                    savedRangeRef.current = selection.getRangeAt(0).cloneRange();
+                handleInput();
+                requestAnimationFrame(updateActiveState);
+                return;
+            }
+        }
         if (toggleOff && selectedItems.length > 0 && selectedChecklists.length === selectedItems.length) {
             pushEditorHistory();
             selectedItems.forEach((item) => {
@@ -1936,9 +2286,12 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         return changed;
     };
     const toggleList = (listTag) => {
+        if (!listFeature)
+            return;
         const editor = editableRef.current;
         if (!editor)
             return;
+        normalizeListNesting(editor);
         if (!restoreSavedSelection())
             safeSelectRange(getSelectionRangeInEditor());
         const setListActiveState = (active) => {
@@ -1962,10 +2315,41 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             const blocks = getSelectedBlocks(range);
             const selectedListItems = resolveSelectedListItems(range);
             if (selectedListItems.length > 0) {
+                const selectedPlainBlocks = blocks.filter((block) => !block.closest("ul,ol"));
+                const commonSelectedList = resolveCommonSelectedList(selectedListItems);
+                let outermostItems = selectedListItems.filter((item) => !selectedListItems.some((candidate) => candidate !== item && candidate.contains(item)));
                 pushEditorHistory();
-                if (transformSelectedListItems(selectedListItems, listTag)) {
-                    const active = Boolean(getCurrentBlock()?.closest(listTag));
-                    setListActiveState(active);
+                const togglingOff = selectedPlainBlocks.length === 0 &&
+                    outermostItems.every((item) => item.parentElement?.tagName.toLowerCase() === listTag);
+                if (togglingOff) {
+                    if (transformSelectedListItems(outermostItems, listTag)) {
+                        setListActiveState(false);
+                        handleInput();
+                        requestAnimationFrame(updateActiveState);
+                        return;
+                    }
+                }
+                else {
+                    const containingLists = new Set(selectedPlainBlocks.length === 0 && commonSelectedList
+                        ? [commonSelectedList]
+                        : outermostItems.map((item) => {
+                            let list = item.parentElement?.matches("ul,ol") ? item.parentElement : null;
+                            if (selectedPlainBlocks.length > 0) {
+                                while (list?.parentElement?.closest("li")?.parentElement?.matches("ul,ol")) {
+                                    list = list.parentElement.closest("li").parentElement;
+                                }
+                            }
+                            return list;
+                        }));
+                    outermostItems = Array.from(containingLists).flatMap((list) => list
+                        ? Array.from(list.children).filter((child) => child instanceof HTMLElement && child.tagName === "LI")
+                        : []);
+                    outermostItems.forEach((item) => restyleDescendantLists(item, listTag));
+                    const lastItem = restyleSelectedListItems(outermostItems, listTag, defaultListStyleAtDepth(listTag, 0));
+                    const convertedPlainBlocks = convertSelectedBlocksToList(selectedPlainBlocks, listTag, defaultListStyleAtDepth(listTag, 0));
+                    if (!convertedPlainBlocks && lastItem)
+                        focusElementEnd(lastItem);
+                    setListActiveState(true);
                     handleInput();
                     requestAnimationFrame(updateActiveState);
                     return;
@@ -2061,6 +2445,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         catch { }
     };
     const toggleBlockquote = () => {
+        if (!blockquoteFeature)
+            return;
         try {
             if (!restoreSavedSelection())
                 safeSelectRange(getSelectionRangeInEditor());
@@ -2068,6 +2454,40 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             const editor = editableRef.current;
             if (!editor || !range)
                 return;
+            const rangeNode = range.commonAncestorContainer instanceof HTMLElement
+                ? range.commonAncestorContainer
+                : range.commonAncestorContainer.parentElement;
+            const activeQuote = rangeNode?.closest("blockquote");
+            if (activeQuote && editor.contains(activeQuote)) {
+                const beforeCoreHtml = editor.innerHTML;
+                pushEditorHistory();
+                const replacements = editorControllerRef.current.bindRoot(editor).executeBlockCommand([activeQuote], { id: "blockquote.toggle" });
+                if (replacements) {
+                    focusElementEnd(replacements[replacements.length - 1]);
+                    handleInput();
+                    requestAnimationFrame(updateActiveState);
+                    return;
+                }
+                editorControllerRef.current.discardLastHistorySnapshot(beforeCoreHtml);
+            }
+            else {
+                const candidates = (range.collapsed
+                    ? [getCurrentBlock()].filter((block) => Boolean(block))
+                    : getSelectedBlocks(range)).filter((block) => editor.contains(block));
+                const coreCandidates = candidates.filter((block) => block.matches("p,h1,h2,h3,h4,h5,h6,pre") && !block.closest("li,td,th"));
+                if (coreCandidates.length === candidates.length && coreCandidates.length > 0) {
+                    const beforeCoreHtml = editor.innerHTML;
+                    pushEditorHistory();
+                    const replacements = editorControllerRef.current.bindRoot(editor).executeBlockCommand(coreCandidates, { id: "blockquote.toggle" });
+                    if (replacements) {
+                        focusElementEnd(replacements[replacements.length - 1]);
+                        handleInput();
+                        requestAnimationFrame(updateActiveState);
+                        return;
+                    }
+                    editorControllerRef.current.discardLastHistorySnapshot(beforeCoreHtml);
+                }
+            }
             const unwrapQuote = (quote) => {
                 const parent = quote.parentElement;
                 if (!parent)
@@ -2209,6 +2629,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         catch { }
     };
     const toggleCodeBlock = () => {
+        if (!codeBlockFeature)
+            return;
         try {
             if (!restoreSavedSelection())
                 safeSelectRange(getSelectionRangeInEditor());
@@ -2223,10 +2645,27 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 return;
             const listItems = resolveSelectedListItems(range);
             const plainBlocks = blocks.filter((block) => !block.closest("ul,ol") && !block.closest("table"));
-            const getItemCode = (item) => item.querySelector(":scope > pre[data-srte-list-code]");
+            // Detect by tag alone, not the data-srte-list-code marker: operations
+            // that round-trip a list item's content through the canonical core
+            // model (e.g. unwrapping an enclosing blockquote) don't know about
+            // this editor-internal attribute and drop it, which previously made
+            // an already-coded item look uncoded and get double-wrapped.
+            const getItemCode = (item) => item.querySelector(":scope > pre");
             const allTargetsActive = listItems.every((item) => Boolean(getItemCode(item))) &&
                 plainBlocks.every((block) => block.tagName === "PRE") &&
                 listItems.length + plainBlocks.length > 0;
+            if (listItems.length === 0 && plainBlocks.length === blocks.length && plainBlocks.length > 0) {
+                const beforeCoreHtml = editor.innerHTML;
+                pushEditorHistory();
+                const replacements = editorControllerRef.current.bindRoot(editor).executeBlockCommand(plainBlocks, { id: "code-block.toggle" });
+                if (replacements) {
+                    focusElementEnd(replacements[replacements.length - 1]);
+                    handleInput();
+                    requestAnimationFrame(updateActiveState);
+                    return;
+                }
+                editorControllerRef.current.discardLastHistorySnapshot(beforeCoreHtml);
+            }
             pushEditorHistory();
             let lastTarget = null;
             listItems.forEach((item) => {
@@ -2234,8 +2673,15 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 if (allTargetsActive && existing) {
                     const code = existing.querySelector(":scope > code");
                     const source = code || existing;
+                    // <code> only ever holds inline content (see creation below), so
+                    // restore it inside a single paragraph rather than splicing bare
+                    // inline nodes directly into the list item.
+                    const paragraph = document.createElement("p");
                     while (source.firstChild)
-                        item.insertBefore(source.firstChild, existing);
+                        paragraph.appendChild(source.firstChild);
+                    if (!paragraph.childNodes.length)
+                        paragraph.innerHTML = "<br>";
+                    item.insertBefore(paragraph, existing);
                     existing.remove();
                     lastTarget = item;
                     return;
@@ -2249,12 +2695,21 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 pre.style.textAlign = "left";
                 const code = document.createElement("code");
                 const nestedList = Array.from(item.children).find((child) => child.matches("ul,ol")) || null;
-                Array.from(item.childNodes).forEach((node) => {
-                    if (node === nestedList)
-                        return;
-                    if (node instanceof HTMLElement && node.dataset.srteCheck === "true")
-                        return;
-                    code.appendChild(node);
+                const contentNodes = Array.from(item.childNodes).filter((node) => node !== nestedList && !(node instanceof HTMLElement && node.dataset.srteCheck === "true"));
+                // <code> can only hold inline content: a p/heading child (the usual
+                // shape for list-item content) is unwrapped into its inline nodes
+                // rather than nested whole, which would be invalid markup.
+                contentNodes.forEach((node, index) => {
+                    if (node instanceof HTMLElement && node.matches("p,h1,h2,h3,h4,h5,h6")) {
+                        while (node.firstChild)
+                            code.appendChild(node.firstChild);
+                        node.remove();
+                    }
+                    else {
+                        code.appendChild(node);
+                    }
+                    if (index < contentNodes.length - 1)
+                        code.appendChild(document.createElement("br"));
                 });
                 if (!code.childNodes.length)
                     code.innerHTML = "<br>";
@@ -2813,6 +3268,33 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 range.collapse(false);
                 safeSelectRange(range);
             }
+            const coreImage = editorControllerRef.current.bindRoot(host).insertInlineImage({
+                src,
+                alt: typeof srcOrItem === "string" ? "image" : (srcOrItem.alt || srcOrItem.title || "image"),
+                ...(typeof srcOrItem !== "string" && srcOrItem.title ? { title: srcOrItem.title } : {}),
+            });
+            if (coreImage) {
+                coreImage.draggable = true;
+                coreImage.style.maxWidth = "100%";
+                coreImage.style.height = "auto";
+                coreImage.style.display = "inline-block";
+                if (typeof srcOrItem !== "string") {
+                    if (srcOrItem.license?.author)
+                        coreImage.dataset.licenseAuthor = srcOrItem.license.author;
+                    if (srcOrItem.license?.licenseType)
+                        coreImage.dataset.licenseType = srcOrItem.license.licenseType;
+                    if (srcOrItem.license?.licenseText)
+                        coreImage.dataset.licenseText = srcOrItem.license.licenseText;
+                    if (srcOrItem.license?.sourceUrl)
+                        coreImage.dataset.licenseUrl = srcOrItem.license.sourceUrl;
+                    if (srcOrItem.license?.workName)
+                        coreImage.dataset.workName = srcOrItem.license.workName;
+                }
+                setSelectedImage(coreImage);
+                scheduleImageOverlay();
+                handleInput();
+                return;
+            }
             const img = document.createElement("img");
             img.src = src;
             img.draggable = true;
@@ -2882,27 +3364,47 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 safeSelectRange(range);
             }
             pushEditorHistory();
-            const span = document.createElement("span");
-            span.setAttribute("data-formula", tex);
+            const span = editorControllerRef.current.bindRoot(host).insertFormula({
+                value: tex,
+                displayText: `$${tex}$`,
+            });
+            if (span) {
+                try {
+                    const katex = window.katex;
+                    if (katex && typeof katex.render === "function") {
+                        katex.render(tex, span, { throwOnError: false });
+                    }
+                }
+                catch { }
+                const next = document.createRange();
+                next.setStartAfter(span);
+                next.collapse(true);
+                safeSelectRange(next);
+                savedRangeRef.current = next.cloneRange();
+                handleInput();
+                return;
+            }
+            const fallbackSpan = document.createElement("span");
+            fallbackSpan.setAttribute("data-formula", tex);
             try {
                 // @ts-ignore
                 const katex = window.katex;
                 if (katex && typeof katex.render === "function") {
-                    katex.render(tex, span, { throwOnError: false });
+                    katex.render(tex, fallbackSpan, { throwOnError: false });
                 }
                 else {
-                    span.textContent = `$${tex}$`;
+                    fallbackSpan.textContent = `$${tex}$`;
                 }
             }
             catch {
-                span.textContent = `$${tex}$`;
+                fallbackSpan.textContent = `$${tex}$`;
             }
             if (range)
-                range.insertNode(span);
+                range.insertNode(fallbackSpan);
             else
-                host.appendChild(span);
+                host.appendChild(fallbackSpan);
             const r = document.createRange();
-            r.setStartAfter(span);
+            r.setStartAfter(fallbackSpan);
             r.collapse(true);
             safeSelectRange(r);
             handleInput();
@@ -2977,864 +3479,84 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             });
         }
     };
-    const handlePdfFiles = (files) => {
-        if (!files || files.length === 0)
-            return;
-        const file = files[0];
-        if (file.type !== 'application/pdf')
-            return;
-        // Check if editor has content
-        const el = editableRef.current;
-        const hasContent = el && el.textContent && el.textContent.trim().length > 0;
-        if (hasContent) {
-            setPendingImport({ file, type: 'pdf' });
-        }
-        else {
-            processImport(file, 'pdf', 'replace');
-        }
+    const getExportableDocument = () => {
+        return editorControllerRef.current
+            .bindRoot(editableRef.current)
+            .getDocument();
     };
-    const processImport = async (file, type, mode) => {
-        if (type === 'pdf') {
-            await processPdf(file, mode);
-        }
-        else {
-            await processDocx(file, mode);
-        }
-        setPendingImport(null);
-        // Reset inputs
-        if (pdfInputRef.current)
-            pdfInputRef.current.value = "";
-        if (docxInputRef.current)
-            docxInputRef.current.value = "";
+    const downloadFormatResult = (result) => {
+        if (result.kind === "handled")
+            return;
+        const blob = result.kind === "blob"
+            ? result.content
+            : new Blob([result.content], { type: result.mediaType });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = result.filename;
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+        URL.revokeObjectURL(url);
     };
-    const processPdf = async (file, mode) => {
-        try {
+    const processFormatImport = async (definition, file, mode) => {
+        if (!definition.importFile)
+            return;
+        if (definition.id === "pdf")
             setLoadingPdf(true);
-            const arrayBuffer = await file.arrayBuffer();
-            const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
-            let fullHtml = '';
-            for (let i = 1; i <= pdf.numPages; i++) {
-                const page = await pdf.getPage(i);
-                const viewport = page.getViewport({ scale: 1 });
-                const textContent = await page.getTextContent();
-                const styles = textContent.styles;
-                // 1. Group items into lines
-                const items = textContent.items;
-                // Calculate base statistics
-                const heights = items.map(item => Math.abs(item.transform[3])).filter(h => h > 0);
-                heights.sort((a, b) => a - b);
-                const medianHeight = heights[Math.floor(heights.length / 2)] || 12;
-                // Group by Y (with tolerance)
-                const linesMap = new Map();
-                for (const item of items) {
-                    if (!item.str.trim())
-                        continue;
-                    // Normalize Y to integer buckets to group roughly
-                    // PDF Y is bottom-0, so higher Y is higher on page.
-                    const y = item.transform[5];
-                    // Find closest existing line
-                    let foundKey = -1;
-                    for (const key of linesMap.keys()) {
-                        if (Math.abs(key - y) < medianHeight * 0.5) {
-                            foundKey = key;
-                            break;
-                        }
-                    }
-                    if (foundKey !== -1) {
-                        linesMap.get(foundKey).items.push(item);
-                    }
-                    else {
-                        linesMap.set(y, { y, items: [item] });
-                    }
-                }
-                // Convert map to sorted array (top to bottom)
-                const lines = Array.from(linesMap.values()).sort((a, b) => b.y - a.y);
-                // Sort items within lines (left to right)
-                lines.forEach(line => {
-                    line.items.sort((a, b) => a.transform[4] - b.transform[4]);
-                });
-                // 2. Identify and Build Structures
-                let html = '';
-                let listStack = []; // 'ul' or 'ol'
-                let inTable = false;
-                let tableColumns = []; // X-coordinates of column starts
-                let tableHtml = '';
-                const closeList = () => {
-                    if (listStack.length > 0) {
-                        html += `</${listStack.pop()}>`;
-                    }
-                };
-                const closeTable = () => {
-                    if (inTable) {
-                        html += '<div data-table-wrapper="true" style="overflow-x:auto;width:100%;"><table style="border-collapse:collapse;width:100%;" border="1"><tbody>' + tableHtml + '</tbody></table></div>';
-                        tableHtml = '';
-                        inTable = false;
-                        tableColumns = [];
-                    }
-                };
-                for (let lIndex = 0; lIndex < lines.length; lIndex++) {
-                    const line = lines[lIndex];
-                    // Calculate gaps and text
-                    let lineText = '';
-                    let lineHtmlContent = '';
-                    let lastX = -1;
-                    let gaps = [];
-                    let itemXs = []; // Start X of logical items (words or phrases)
-                    // Reconstruct text with spacing detection
-                    for (let j = 0; j < line.items.length; j++) {
-                        const item = line.items[j];
-                        const x = item.transform[4];
-                        const width = item.width;
-                        const fontName = item.fontName;
-                        const fontObj = styles[fontName];
-                        const fontFamily = fontObj?.fontFamily?.toLowerCase() || '';
-                        const isBold = fontFamily.includes('bold') || false;
-                        const isItalic = fontFamily.includes('italic') || fontFamily.includes('oblique');
-                        const fontSize = Math.max(8, Math.round(Math.abs(item.transform[3])));
-                        if (lastX > 0) {
-                            const gap = x - lastX;
-                            if (gap > 2) { // Minimal space threshold
-                                lineText += ' ';
-                                lineHtmlContent += ' ';
-                                if (gap > 20) { // Large gap threshold for table detection
-                                    gaps.push(gap);
-                                }
-                            }
-                        }
-                        else {
-                            // First item
-                        }
-                        // Track "columns" candidates: items separated by big gaps
-                        if (j === 0 || (x - lastX) > 20) {
-                            itemXs.push(x);
-                        }
-                        // Append text style
-                        const chunkStyle = cssRules([
-                            ['font-size', `${fontSize}px`],
-                            ['font-weight', isBold ? '700' : ''],
-                            ['font-style', isItalic ? 'italic' : ''],
-                        ]);
-                        let chunk = `<span${styleAttr(chunkStyle)}>${escapeHtml(item.str)}</span>`;
-                        lineText += item.str;
-                        lineHtmlContent += chunk;
-                        lastX = x + width;
-                    }
-                    // === Structure Detection ===
-                    // Max Font Size in line
-                    const maxH = Math.max(...line.items.map((i) => Math.abs(i.transform[3])));
-                    const isHeader = maxH > medianHeight * 1.2;
-                    // List Detection
-                    const isBullet = /^[•\-\*]\s/.test(lineText);
-                    const isNumber = /^\d+[\.\)]\s/.test(lineText);
-                    // Table Detection Logic
-                    // A line starts a table if it has distinct "columns" (multiple items with large gaps)
-                    // Or if we are already in a table and this line aligns with columns
-                    let isTableLine = false;
-                    // If in table, check alignment
-                    if (inTable) {
-                        // Check if items align with known columns
-                        // Simple loose check: do any of the itemXs align with tableColumns?
-                        // Or is the line just sparsely populated but roughly compatible?
-                        // We'll continually simple-add rows for now until a Paragraph break (plain text, no gaps) is found.
-                        // If line looks like normal paragraph (no large gaps, starts at left margin), close table
-                        const isPlainParagraph = gaps.length === 0 && itemXs[0] < 50 && lineText.length > 50;
-                        // Allow wrapping text in table cells, which might look like lines with no gaps?
-                        // Table wrapping usually is indented or aligns with a column > 0.
-                        const alignsWithColumn = itemXs.some(x => tableColumns.some(cx => Math.abs(x - cx) < 20));
-                        if (alignsWithColumn || (itemXs[0] > 50)) {
-                            isTableLine = true;
-                        }
-                        else {
-                            // Maybe a new row starting at col 0?
-                            // If it aligns with col 0.
-                            if (Math.abs(itemXs[0] - tableColumns[0]) < 20) {
-                                isTableLine = true;
-                            }
-                        }
-                    }
-                    else {
-                        // Potential start of table: multiple items separated by gaps, AND next line likely follows suit?
-                        // Or simply: It has > 1 column significantly spaced.
-                        if (itemXs.length >= 2 && gaps.some(g => g > 30)) {
-                            isTableLine = true;
-                            // Establish columns
-                            tableColumns = [...itemXs];
-                        }
-                    }
-                    // --- Apply Logic ---
-                    if (isTableLine) {
-                        closeList();
-                        if (!inTable) {
-                            inTable = true;
-                            // Start table
-                        }
-                        // Build Row
-                        // We need to map items to cells based on tableColumns.
-                        // Naive approach: Items close to col X go to col X.
-                        let rowHtml = '<tr>';
-                        // We assume `tableColumns` defines the start of each cell.
-                        // We create a cell for each column.
-                        // Collect content for each bucket.
-                        const cellContents = new Array(tableColumns.length).fill('');
-                        let currentItemHtml = '';
-                        let currentItemStart = -1;
-                        // process items again to slot them
-                        let currentLineX = 0;
-                        for (const item of line.items) {
-                            const x = item.transform[4];
-                            const w = item.width;
-                            const txt = item.str;
-                            const fontObj = styles[item.fontName];
-                            const fontFamily = fontObj?.fontFamily?.toLowerCase() || '';
-                            const isBold = fontFamily.includes('bold');
-                            const isItalic = fontFamily.includes('italic') || fontFamily.includes('oblique');
-                            const fontSize = Math.max(8, Math.round(Math.abs(item.transform[3])));
-                            const styledTxt = `<span${styleAttr(cssRules([
-                                ['font-size', `${fontSize}px`],
-                                ['font-weight', isBold ? '700' : ''],
-                                ['font-style', isItalic ? 'italic' : ''],
-                            ]))}>${escapeHtml(txt)}</span>`;
-                            // Decide which column this belongs to
-                            // Find closest column to the left (or close enough)
-                            let colIdx = 0;
-                            let minDiff = 9999;
-                            for (let c = 0; c < tableColumns.length; c++) {
-                                const colX = tableColumns[c];
-                                // If item starts near colX or after it (but before next col)
-                                // Actually, just find the "controlling" column (closest start to the left)
-                                if (x >= colX - 10) {
-                                    colIdx = c;
-                                }
-                            }
-                            // Append space if needed
-                            if (cellContents[colIdx])
-                                cellContents[colIdx] += ' ';
-                            cellContents[colIdx] += styledTxt;
-                        }
-                        cellContents.forEach(content => {
-                            rowHtml += `<td style="border:1px solid #d1d5db;padding:8px;vertical-align:top;">${content || '&nbsp;'}</td>`;
-                        });
-                        rowHtml += '</tr>';
-                        tableHtml += rowHtml;
-                    }
-                    else {
-                        closeTable();
-                        if (isBullet || isNumber) {
-                            const listType = isBullet ? 'ul' : 'ol';
-                            if (listStack.length === 0 || listStack[listStack.length - 1] !== listType) {
-                                if (listStack.length > 0)
-                                    closeList(); // Close switch
-                                html += `<${listType}>`;
-                                listStack.push(listType);
-                            }
-                            // Strip marker
-                            const content = lineHtmlContent.replace(/^[•\-\*]|\d+[\.\)]/, '').trim();
-                            html += `<li>${content}</li>`;
-                        }
-                        else {
-                            closeList();
-                            if (isHeader) {
-                                const tag = maxH > medianHeight * 1.5 ? 'h2' : 'h3';
-                                const firstX = line.items[0]?.transform?.[4] || 0;
-                                const lastItem = line.items[line.items.length - 1];
-                                const lastRight = lastItem ? lastItem.transform[4] + lastItem.width : firstX;
-                                const center = (firstX + lastRight) / 2;
-                                const align = Math.abs(center - viewport.width / 2) < viewport.width * 0.12 ? 'center' : firstX > viewport.width * 0.55 ? 'right' : '';
-                                html += `<${tag}${styleAttr(cssRules([['text-align', align]]))}>${lineHtmlContent}</${tag}>`;
-                            }
-                            else {
-                                const firstX = line.items[0]?.transform?.[4] || 0;
-                                const lastItem = line.items[line.items.length - 1];
-                                const lastRight = lastItem ? lastItem.transform[4] + lastItem.width : firstX;
-                                const center = (firstX + lastRight) / 2;
-                                const align = Math.abs(center - viewport.width / 2) < viewport.width * 0.12 ? 'center' : firstX > viewport.width * 0.55 ? 'right' : '';
-                                html += `<p${styleAttr(cssRules([
-                                    ['text-align', align],
-                                    ['margin-left', firstX > 40 && !align ? `${Math.round(firstX)}px` : ''],
-                                ]))}>${lineHtmlContent}</p>`;
-                            }
-                        }
-                    }
-                }
-                closeList();
-                closeTable();
-                fullHtml += html;
-            }
-            insertImportedHtml(fullHtml, mode, { preserveColors: true, preserveDocumentLayout: true });
+        if (definition.id === "docx")
+            setLoadingDocx(true);
+        try {
+            const imported = await definition.importFile(file, { ownerDocument: document });
+            insertImportedHtml(imported.layoutHtml || serializeSmartDocument(imported.document), mode, {
+                preserveColors: imported.preserveColors ?? true,
+                preserveDocumentLayout: imported.preserveDocumentLayout ?? true,
+            });
         }
         catch (error) {
-            console.error('Error reading PDF:', error);
-            // Optional: show user error
+            console.error(`Error importing ${definition.label}:`, error);
         }
         finally {
-            setLoadingPdf(false);
+            if (definition.id === "pdf")
+                setLoadingPdf(false);
+            if (definition.id === "docx")
+                setLoadingDocx(false);
+            setPendingImport(null);
         }
     };
-    const handleDocxFiles = (files) => {
-        if (!files || files.length === 0)
+    const openFormatImport = (formatId) => {
+        const definition = formatRuntime.get(formatId);
+        if (!definition?.importFile || !formatRuntime.canImport(formatId))
+            return;
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = definition.accept || `.${definition.extension}`;
+        input.onchange = () => {
+            const file = input.files?.[0];
+            if (!file)
+                return;
+            const hasContent = Boolean(editableRef.current?.textContent?.trim());
+            if (hasContent && definition.confirmImportWhenNotEmpty) {
+                setPendingImport({ file, definition });
+                return;
+            }
+            void processFormatImport(definition, file, hasContent ? "append" : "replace");
+        };
+        input.click();
+    };
+    const runFormatExport = async (formatId) => {
+        const definition = formatRuntime.get(formatId);
+        if (!definition || !formatRuntime.canExport(formatId))
             return;
-        const file = files[0];
-        if (!file.name.endsWith('.docx'))
+        if (!definition.exportDocument)
             return;
-        // Check if editor has content
-        const el = editableRef.current;
-        const hasContent = el && el.textContent && el.textContent.trim().length > 0;
-        if (hasContent) {
-            setPendingImport({ file, type: 'docx' });
-        }
-        else {
-            processImport(file, 'docx', 'replace');
-        }
+        const result = await definition.exportDocument(getExportableDocument(), {
+            ownerDocument: document,
+            hostWindow: window,
+        });
+        downloadFormatResult(result);
     };
-    const processDocx = async (file, mode) => {
-        try {
-            setLoadingDocx(true);
-            const arrayBuffer = await file.arrayBuffer();
-            const html = preserveDocxStyles
-                ? await convertDocxToStyledHtml(arrayBuffer)
-                : await convertDocxWithMammoth(arrayBuffer);
-            if (html) {
-                insertImportedHtml(`<div class="srte-preserve-colors">${html}</div>`, mode, {
-                    preserveColors: preserveDocxStyles,
-                    preserveDocumentLayout: preserveDocxStyles,
-                });
-            }
-        }
-        catch (error) {
-            console.error('Error reading DOCX:', error);
-        }
-        finally {
-            setLoadingDocx(false);
-        }
-    };
-    const convertDocxWithMammoth = async (arrayBuffer) => {
-        const result = await mammoth.convertToHtml({ arrayBuffer });
-        const temp = document.createElement('div');
-        temp.innerHTML = result.value;
-        enhanceImportedTables(temp);
-        return temp.innerHTML;
-    };
-    const convertDocxToStyledHtml = async (arrayBuffer) => {
-        try {
-            const zip = await JSZip.loadAsync(arrayBuffer);
-            const documentXml = await zip.file('word/document.xml')?.async('text');
-            if (!documentXml)
-                return convertDocxWithMammoth(arrayBuffer);
-            const parser = new DOMParser();
-            const doc = parser.parseFromString(documentXml, 'application/xml');
-            if (doc.querySelector('parsererror'))
-                return convertDocxWithMammoth(arrayBuffer);
-            const body = Array.from(doc.getElementsByTagName('*')).find((node) => node.localName === 'body');
-            if (!body)
-                return convertDocxWithMammoth(arrayBuffer);
-            const html = directChildren(body)
-                .filter((node) => node.localName !== 'sectPr')
-                .map((node) => {
-                if (node.localName === 'p')
-                    return convertDocxParagraph(node);
-                if (node.localName === 'tbl')
-                    return convertDocxTable(node);
-                return '';
-            })
-                .join('');
-            if (!html.trim())
-                return convertDocxWithMammoth(arrayBuffer);
-            const temp = document.createElement('div');
-            temp.innerHTML = html;
-            enhanceImportedTables(temp);
-            return temp.innerHTML;
-        }
-        catch (error) {
-            console.warn('Falling back to Mammoth DOCX import:', error);
-            return convertDocxWithMammoth(arrayBuffer);
-        }
-    };
-    const directChildren = (node) => Array.from(node.children);
-    const firstChildByName = (node, localName) => node
-        ? directChildren(node).find((child) => child.localName === localName)
-        : undefined;
-    const childrenByName = (node, localName) => node
-        ? directChildren(node).filter((child) => child.localName === localName)
-        : [];
-    const docxAttr = (node, name) => {
-        if (!node)
-            return '';
-        return (node.getAttribute(`w:${name}`) ||
-            node.getAttribute(name) ||
-            node.getAttributeNS('http://schemas.openxmlformats.org/wordprocessingml/2006/main', name) ||
-            '');
-    };
-    const docxHexColor = (value) => {
-        if (!value || value.toLowerCase() === 'auto')
-            return '';
-        const normalized = value.replace(/[^0-9a-f]/gi, '');
-        return normalized.length === 6 ? `#${normalized}` : '';
-    };
-    const twipsToPt = (value) => {
-        const n = Number(value);
-        return Number.isFinite(n) ? `${Math.max(n / 20, 0)}pt` : '';
-    };
-    const halfPointsToPt = (value) => {
-        const n = Number(value);
-        return Number.isFinite(n) ? `${Math.max(n / 2, 1)}pt` : '';
-    };
-    const cssRules = (rules) => rules
-        .filter(([, value]) => Boolean(value))
-        .map(([name, value]) => `${name}: ${value}`)
-        .join('; ');
-    const styleAttr = (style) => (style ? ` style="${escapeHtml(style)}"` : '');
-    const convertDocxParagraphStyle = (paragraph) => {
-        const pPr = firstChildByName(paragraph, 'pPr');
-        if (!pPr)
-            return '';
-        const spacing = firstChildByName(pPr, 'spacing');
-        const jc = firstChildByName(pPr, 'jc');
-        const indent = firstChildByName(pPr, 'ind');
-        const borderBottom = firstChildByName(firstChildByName(pPr, 'pBdr'), 'bottom');
-        const line = docxAttr(spacing, 'line');
-        const lineRule = docxAttr(spacing, 'lineRule');
-        return cssRules([
-            ['text-align', docxAttr(jc, 'val')],
-            ['margin-top', twipsToPt(docxAttr(spacing, 'before'))],
-            ['margin-bottom', twipsToPt(docxAttr(spacing, 'after'))],
-            ['margin-left', twipsToPt(docxAttr(indent, 'left'))],
-            ['text-indent', twipsToPt(docxAttr(indent, 'firstLine'))],
-            ['line-height', line && lineRule === 'auto' ? `${Number(line) / 240}` : ''],
-            ['border-bottom', docxBorderCss(borderBottom)],
-        ]);
-    };
-    const convertDocxRunStyle = (run) => {
-        const rPr = firstChildByName(run, 'rPr');
-        if (!rPr)
-            return '';
-        const color = docxHexColor(docxAttr(firstChildByName(rPr, 'color'), 'val'));
-        const highlight = docxHexColor(docxAttr(firstChildByName(rPr, 'highlight'), 'val'));
-        const shade = docxHexColor(docxAttr(firstChildByName(rPr, 'shd'), 'fill'));
-        const size = halfPointsToPt(docxAttr(firstChildByName(rPr, 'sz'), 'val'));
-        const underline = firstChildByName(rPr, 'u');
-        return cssRules([
-            ['font-weight', firstChildByName(rPr, 'b') ? '700' : ''],
-            ['font-style', firstChildByName(rPr, 'i') ? 'italic' : ''],
-            ['text-decoration', underline ? 'underline' : ''],
-            ['color', color],
-            ['background-color', highlight || shade],
-            ['font-size', size],
-        ]);
-    };
-    const convertDocxRun = (run) => {
-        const rPr = firstChildByName(run, 'rPr');
-        const vertAlign = docxAttr(firstChildByName(rPr, 'vertAlign'), 'val');
-        const style = convertDocxRunStyle(run);
-        const content = directChildren(run)
-            .map((child) => {
-            if (child.localName === 't')
-                return escapeHtml(child.textContent || '');
-            if (child.localName === 'tab')
-                return '&emsp;';
-            if (child.localName === 'br') {
-                return docxAttr(child, 'type') === 'page'
-                    ? '<hr class="srte-docx-page-break">'
-                    : '<br>';
-            }
-            return '';
-        })
-            .join('');
-        if (!content)
-            return '';
-        const tag = vertAlign === 'superscript' ? 'sup' : vertAlign === 'subscript' ? 'sub' : 'span';
-        return `<${tag}${styleAttr(style)}>${content}</${tag}>`;
-    };
-    const convertDocxParagraph = (paragraph) => {
-        const style = convertDocxParagraphStyle(paragraph);
-        const content = childrenByName(paragraph, 'r').map(convertDocxRun).join('');
-        return `<p${styleAttr(style)}>${content || '<br>'}</p>`;
-    };
-    const docxBorderCss = (border) => {
-        if (!border)
-            return '';
-        const val = docxAttr(border, 'val');
-        if (!val || val === 'nil' || val === 'none')
-            return '';
-        const size = Number(docxAttr(border, 'sz')) || 4;
-        const width = Math.max(size / 8, 0.5);
-        const color = docxHexColor(docxAttr(border, 'color')) || '#d1d5db';
-        return `${width}px solid ${color}`;
-    };
-    const convertDocxCellStyle = (cell) => {
-        const tcPr = firstChildByName(cell, 'tcPr');
-        const width = twipsToPt(docxAttr(firstChildByName(tcPr, 'tcW'), 'w'));
-        const shade = docxHexColor(docxAttr(firstChildByName(tcPr, 'shd'), 'fill'));
-        const borders = firstChildByName(tcPr, 'tcBorders');
-        const top = docxBorderCss(firstChildByName(borders, 'top'));
-        const right = docxBorderCss(firstChildByName(borders, 'right'));
-        const bottom = docxBorderCss(firstChildByName(borders, 'bottom'));
-        const left = docxBorderCss(firstChildByName(borders, 'left'));
-        return cssRules([
-            ['width', width],
-            ['background-color', shade],
-            ['border-top', top],
-            ['border-right', right],
-            ['border-bottom', bottom],
-            ['border-left', left],
-            ['padding', '8px'],
-            ['vertical-align', 'top'],
-        ]);
-    };
-    const convertDocxTable = (table) => {
-        const rows = childrenByName(table, 'tr')
-            .map((row) => {
-            const cells = childrenByName(row, 'tc')
-                .map((cell) => {
-                const content = directChildren(cell)
-                    .filter((child) => child.localName === 'p' || child.localName === 'tbl')
-                    .map((child) => child.localName === 'p' ? convertDocxParagraph(child) : convertDocxTable(child))
-                    .join('');
-                return `<td${styleAttr(convertDocxCellStyle(cell))}>${content || '<p><br></p>'}</td>`;
-            })
-                .join('');
-            return `<tr>${cells}</tr>`;
-        })
-            .join('');
-        return `<table style="border-collapse: collapse; width: 100%; margin: 12px 0;"><tbody>${rows}</tbody></table>`;
-    };
-    const enhanceImportedTables = (root) => {
-        const tables = root.querySelectorAll('table');
-        tables.forEach(tbl => {
-            tbl.style.borderCollapse = tbl.style.borderCollapse || 'collapse';
-            tbl.style.width = tbl.style.width || '100%';
-            const cells = tbl.querySelectorAll('td, th');
-            cells.forEach(cell => {
-                const el = cell;
-                if (!el.style.border && !el.style.borderTop && !el.style.borderRight && !el.style.borderBottom && !el.style.borderLeft) {
-                    el.style.border = '1px solid #d1d5db';
-                }
-                el.style.padding = el.style.padding || '8px';
-                el.style.verticalAlign = el.style.verticalAlign || 'top';
-            });
-        });
-    };
-    const escapeHtml = (value) => value
-        .replace(/&/g, "&amp;")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;");
-    const htmlToMarkdown = (html) => {
-        const root = document.createElement("div");
-        root.innerHTML = html;
-        const walk = (node) => {
-            if (node.nodeType === Node.TEXT_NODE)
-                return node.textContent || "";
-            if (!(node instanceof HTMLElement))
-                return "";
-            const content = Array.from(node.childNodes).map(walk).join("");
-            const tag = node.tagName.toLowerCase();
-            if (tag === "strong" || tag === "b")
-                return `**${content}**`;
-            if (tag === "em" || tag === "i")
-                return `*${content}*`;
-            if (tag === "code")
-                return `\`${content}\``;
-            if (tag === "br")
-                return "\n";
-            if (/h[1-6]/.test(tag))
-                return `${"#".repeat(Number(tag[1]))} ${content.trim()}\n\n`;
-            if (tag === "p")
-                return `${content.trim()}\n\n`;
-            if (tag === "li")
-                return `- ${content.trim()}\n`;
-            if (tag === "ul" || tag === "ol")
-                return `${content}\n`;
-            if (tag === "blockquote")
-                return `> ${content.trim()}\n\n`;
-            if (tag === "table")
-                return `${node.outerHTML}\n\n`;
-            if (tag === "img")
-                return `![${node.getAttribute("alt") || ""}](${node.getAttribute("src") || ""})`;
-            if (tag === "a")
-                return `[${content}](${node.getAttribute("href") || ""})`;
-            return content;
-        };
-        return Array.from(root.childNodes).map(walk).join("").replace(/\n{3,}/g, "\n\n").trim();
-    };
-    const importTextFile = async (files, type) => {
-        if (!files || files.length === 0)
-            return;
-        const file = files[0];
-        const text = await file.text();
-        const html = type === "html" ? text : markdownToCompatibilityHtml(text);
-        const el = editableRef.current;
-        const hasContent = el && el.textContent && el.textContent.trim().length > 0;
-        insertImportedHtml(html, hasContent ? "append" : "replace", {
-            preserveColors: true,
-            preserveDocumentLayout: true,
-        });
-    };
-    const downloadText = (filename, content, mimeType) => {
-        const blob = new Blob([content], { type: mimeType });
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement("a");
-        link.href = url;
-        link.download = filename;
-        document.body.appendChild(link);
-        link.click();
-        link.remove();
-        URL.revokeObjectURL(url);
-    };
-    const buildStandaloneHtmlDocument = (html) => `<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Smart RTE Export</title>
-  <style>
-    :root {
-      --srte-bg: #ffffff;
-      --srte-text: #111111;
-      --srte-text-muted: #4b5563;
-      --srte-border: #d1d5db;
-      --srte-border-light: #e5e7eb;
-      --srte-accent: #1e90ff;
-      --srte-accent-bg: rgba(30, 144, 255, 0.15);
-      --srte-surface-subtle: #f3f4f6;
-    }
-    html, body {
-      margin: 0;
-      background: var(--srte-bg);
-      color: var(--srte-text);
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      line-height: 1.6;
-    }
-    body {
-      padding: 32px;
-    }
-    .srte-export {
-      max-width: 960px;
-      margin: 0 auto;
-    }
-    .srte-export h1,
-    .srte-export h2,
-    .srte-export h3,
-    .srte-export h4,
-    .srte-export h5,
-    .srte-export h6 {
-      line-height: 1.3;
-      margin: 1.25em 0 0.5em;
-      font-weight: 700;
-      color: var(--srte-text);
-    }
-    .srte-export p {
-      margin: 0 0 0.85em;
-    }
-    .srte-export blockquote {
-      border-left: 4px solid var(--srte-accent);
-      margin: 0.75em 0;
-      padding: 0.5em 1em;
-      background: var(--srte-surface-subtle);
-      color: var(--srte-text);
-    }
-    .srte-export ul,
-    .srte-export ol {
-      margin: 0.75em 0;
-      padding-left: 1.75em;
-      list-style-position: outside;
-    }
-    .srte-export ul {
-      list-style-type: disc;
-    }
-    .srte-export ol {
-      list-style-type: decimal;
-    }
-    .srte-export li {
-      display: list-item;
-      margin: 0.25em 0;
-      padding-left: 0.25em;
-    }
-    .srte-export table {
-      border-collapse: collapse;
-      width: 100%;
-      margin: 12px 0;
-    }
-    .srte-export td,
-    .srte-export th {
-      border: 1px solid var(--srte-border);
-      padding: 8px;
-      vertical-align: top;
-      text-align: left;
-    }
-    .srte-export th {
-      background: var(--srte-surface-subtle);
-      font-weight: 700;
-    }
-    .srte-export img {
-      max-width: 100%;
-      height: auto;
-    }
-    .srte-export pre,
-    .srte-export code {
-      background: var(--srte-surface-subtle);
-      color: var(--srte-text);
-      border-radius: 4px;
-    }
-    .srte-export pre {
-      padding: 12px;
-      overflow-x: auto;
-      white-space: pre-wrap;
-    }
-    @media print {
-      body {
-        padding: 0;
-      }
-      .srte-export {
-        max-width: none;
-      }
-    }
-  </style>
-</head>
-<body>
-  <main class="srte-export">${html || "<p></p>"}</main>
-</body>
-</html>`;
-    const exportHtml = () => {
-        const html = editableRef.current?.innerHTML || "";
-        downloadText("smart-rte-export.html", buildStandaloneHtmlDocument(html), "text/html;charset=utf-8");
-    };
-    const exportMarkdown = () => {
-        const html = editableRef.current?.innerHTML || "";
-        downloadText("smart-rte-export.md", htmlToMarkdown(html), "text/markdown");
-    };
-    const htmlToDocxXml = (html) => {
-        const root = document.createElement("div");
-        root.innerHTML = html;
-        const xmlEscape = (value) => value
-            .replace(/&/g, "&amp;")
-            .replace(/</g, "&lt;")
-            .replace(/>/g, "&gt;")
-            .replace(/"/g, "&quot;");
-        const colorValue = (value) => {
-            const hex = /^#([0-9a-f]{6})$/i.exec(value.trim());
-            if (hex)
-                return hex[1].toUpperCase();
-            const rgb = /^rgb\(\s*(\d+),\s*(\d+),\s*(\d+)\s*\)$/i.exec(value.trim());
-            if (!rgb)
-                return "";
-            return [rgb[1], rgb[2], rgb[3]]
-                .map((part) => Math.max(0, Math.min(255, Number(part))).toString(16).padStart(2, "0"))
-                .join("")
-                .toUpperCase();
-        };
-        const sizeToHalfPoints = (value) => {
-            const trimmed = value.trim();
-            const match = /^([\d.]+)(px|pt)$/i.exec(trimmed);
-            if (!match)
-                return "";
-            const raw = Number(match[1]);
-            const pt = match[2].toLowerCase() === "px" ? raw * 0.75 : raw;
-            return String(Math.max(2, Math.round(pt * 2)));
-        };
-        const runProperties = (el) => {
-            const style = el.style;
-            const color = colorValue(style.color);
-            const size = sizeToHalfPoints(style.fontSize);
-            const isBold = el.tagName === "B" || el.tagName === "STRONG" || /bold|700|800|900/.test(style.fontWeight);
-            const isItalic = el.tagName === "I" || el.tagName === "EM" || style.fontStyle === "italic";
-            const isUnderline = el.tagName === "U" || style.textDecoration.includes("underline");
-            return [
-                isBold ? "<w:b/>" : "",
-                isItalic ? "<w:i/>" : "",
-                isUnderline ? '<w:u w:val="single"/>' : "",
-                color ? `<w:color w:val="${color}"/>` : "",
-                size ? `<w:sz w:val="${size}"/>` : "",
-            ].join("");
-        };
-        const runs = (node, inheritedProps = "") => {
-            if (node.nodeType === Node.TEXT_NODE) {
-                const text = node.textContent || "";
-                return text ? `<w:r>${inheritedProps ? `<w:rPr>${inheritedProps}</w:rPr>` : ""}<w:t xml:space="preserve">${xmlEscape(text)}</w:t></w:r>` : "";
-            }
-            if (!(node instanceof HTMLElement))
-                return "";
-            if (node.tagName === "BR")
-                return "<w:r><w:br/></w:r>";
-            if (node.tagName === "IMG") {
-                const alt = node.getAttribute("alt") || node.getAttribute("title") || "Image";
-                return `<w:r><w:t>[Image: ${xmlEscape(alt)}]</w:t></w:r>`;
-            }
-            const props = `${inheritedProps}${runProperties(node)}`;
-            return Array.from(node.childNodes).map((child) => runs(child, props)).join("");
-        };
-        const paragraph = (el, fallbackTag = "p") => {
-            const tag = el.tagName.toLowerCase();
-            const headingMatch = /^h([1-6])$/.exec(tag);
-            const style = el.style;
-            const align = style.textAlign ? `<w:jc w:val="${xmlEscape(style.textAlign)}"/>` : "";
-            const headingSize = headingMatch ? `<w:rPr><w:b/><w:sz w:val="${Math.max(24, 40 - Number(headingMatch[1]) * 4)}"/></w:rPr>` : "";
-            const body = runs(el);
-            return `<w:p><w:pPr>${align}${headingSize}</w:pPr>${body || "<w:r><w:t></w:t></w:r>"}</w:p>`;
-        };
-        const tableCell = (cell) => {
-            const fill = colorValue(cell.style.backgroundColor);
-            const shading = fill ? `<w:shd w:val="clear" w:color="auto" w:fill="${fill}"/>` : "";
-            const cellContent = Array.from(cell.childNodes)
-                .map((child) => child instanceof HTMLElement && ["P", "DIV", "H1", "H2", "H3", "H4", "H5", "H6"].includes(child.tagName)
-                ? paragraph(child)
-                : `<w:p>${runs(child)}</w:p>`)
-                .join("");
-            return `<w:tc><w:tcPr>${shading}<w:tcBorders><w:top w:val="single" w:sz="4" w:color="D1D5DB"/><w:left w:val="single" w:sz="4" w:color="D1D5DB"/><w:bottom w:val="single" w:sz="4" w:color="D1D5DB"/><w:right w:val="single" w:sz="4" w:color="D1D5DB"/></w:tcBorders></w:tcPr>${cellContent || "<w:p/>"}</w:tc>`;
-        };
-        const tableXml = (table) => {
-            const rows = Array.from(table.querySelectorAll("tr"));
-            return `<w:tbl><w:tblPr><w:tblW w:w="0" w:type="auto"/><w:tblBorders><w:top w:val="single" w:sz="4" w:color="D1D5DB"/><w:left w:val="single" w:sz="4" w:color="D1D5DB"/><w:bottom w:val="single" w:sz="4" w:color="D1D5DB"/><w:right w:val="single" w:sz="4" w:color="D1D5DB"/><w:insideH w:val="single" w:sz="4" w:color="D1D5DB"/><w:insideV w:val="single" w:sz="4" w:color="D1D5DB"/></w:tblBorders></w:tblPr>${rows.map((row) => `<w:tr>${Array.from(row.children).map((cell) => tableCell(cell)).join("")}</w:tr>`).join("")}</w:tbl>`;
-        };
-        const blockXml = (node) => {
-            if (node.nodeType === Node.TEXT_NODE) {
-                const text = node.textContent?.trim();
-                return text ? `<w:p>${runs(node)}</w:p>` : "";
-            }
-            if (!(node instanceof HTMLElement))
-                return "";
-            if (node.tagName === "TABLE")
-                return tableXml(node);
-            if (node.tagName === "UL" || node.tagName === "OL") {
-                return Array.from(node.children).map((li) => `<w:p><w:r><w:t>• </w:t></w:r>${runs(li)}</w:p>`).join("");
-            }
-            if (node.tagName === "BLOCKQUOTE") {
-                return `<w:p><w:pPr><w:ind w:left="720"/></w:pPr>${runs(node)}</w:p>`;
-            }
-            if (node.tagName === "HR")
-                return '<w:p><w:pPr><w:pBdr><w:bottom w:val="single" w:sz="6" w:color="D1D5DB"/></w:pBdr></w:pPr></w:p>';
-            if (["P", "DIV", "PRE", "H1", "H2", "H3", "H4", "H5", "H6"].includes(node.tagName))
-                return paragraph(node);
-            return Array.from(node.childNodes).map(blockXml).join("");
-        };
-        const body = Array.from(root.childNodes).map(blockXml).join("");
-        return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?><w:document xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main"><w:body>${body}<w:sectPr><w:pgSz w:w="12240" w:h="15840"/><w:pgMar w:top="720" w:right="720" w:bottom="720" w:left="720"/></w:sectPr></w:body></w:document>`;
-    };
-    const exportDocx = async () => {
-        const html = editableRef.current?.innerHTML || "";
-        const zip = new JSZip();
-        zip.file("[Content_Types].xml", `<?xml version="1.0" encoding="UTF-8"?><Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types"><Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/><Default Extension="xml" ContentType="application/xml"/><Override PartName="/word/document.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml"/></Types>`);
-        zip.folder("_rels")?.file(".rels", `<?xml version="1.0" encoding="UTF-8"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="word/document.xml"/></Relationships>`);
-        zip.folder("word")?.file("document.xml", htmlToDocxXml(html));
-        zip.folder("word")?.folder("_rels")?.file("document.xml.rels", `<?xml version="1.0" encoding="UTF-8"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"></Relationships>`);
-        const blob = await zip.generateAsync({ type: "blob", mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" });
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement("a");
-        link.href = url;
-        link.download = "smart-rte-export.docx";
-        document.body.appendChild(link);
-        link.click();
-        link.remove();
-        URL.revokeObjectURL(url);
-    };
-    const exportPdf = () => {
-        const html = editableRef.current?.innerHTML || "";
-        const printWindow = window.open("", "_blank", "width=900,height=700");
-        if (!printWindow)
-            return;
-        printWindow.document.open();
-        printWindow.document.write(`<!doctype html><html><head><title>Export PDF</title><style>@page{margin:18mm}html,body{background:#fff}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6;padding:32px;color:#111}table{border-collapse:collapse;width:100%;margin:12px 0;break-inside:auto}tr,img,blockquote,pre{break-inside:avoid}td,th{border:1px solid #d1d5db;padding:8px;vertical-align:top}img{max-width:100%;height:auto}blockquote{border-left:4px solid #d1d5db;padding-left:12px;color:#374151}pre,code{background:#f3f4f6}pre{padding:12px;white-space:pre-wrap}@media print{body{padding:0}}</style></head><body>${html || "<p></p>"}<script>window.addEventListener("load",function(){setTimeout(function(){window.focus();window.print();},150);});</script></body></html>`);
-        printWindow.document.close();
-    };
-    const fixNegativeMargins = (root) => {
+    const fixNegativeMargins = (root) => {
         try {
             const nodes = root.querySelectorAll('*');
             for (let i = 0; i < nodes.length; i++) {
@@ -3908,6 +3630,12 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             const style = node.getAttribute('style');
             if (!style)
                 return;
+            // blockquote/pre carry their own consistent border+padding from the
+            // editor stylesheet; an inline border/padding pasted in from the
+            // source page (e.g. a "border: 0" reset) silently wins the cascade
+            // over that stylesheet rule and leaves them looking broken.
+            const tagName = node.tagName.toLowerCase();
+            const dropsBorderAndPadding = tagName === 'blockquote' || tagName === 'pre';
             const safeRules = style
                 .split(';')
                 .map((rule) => rule.trim())
@@ -3920,6 +3648,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 const value = rule.slice(separator + 1).trim().toLowerCase();
                 if (!allowedStyleNames.has(name))
                     return false;
+                if (dropsBorderAndPadding && (name.startsWith('border') || name.startsWith('padding')))
+                    return false;
                 if (value.includes('position') || value.includes('expression') || value.includes('javascript:'))
                     return false;
                 if (name === 'white-space' && value !== 'pre-wrap')
@@ -3940,9 +3670,55 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         if (!el)
             return;
         fixNegativeMargins(el);
+        normalizeListNesting(el);
         ensureTableWrappers(el);
         addTableResizeHandles();
     };
+    /** Repairs list markup emitted by Google Docs and browsers where a nested
+     * list is serialized as a sibling of its parent LI instead of a child. */
+    const normalizeListNesting = (root) => {
+        root.querySelectorAll("ul,ol").forEach((list) => {
+            let currentItem = null;
+            Array.from(list.children).forEach((child) => {
+                if (!(child instanceof HTMLElement))
+                    return;
+                if (child.tagName === "LI") {
+                    currentItem = child;
+                    return;
+                }
+                if (currentItem && child.parentElement === list && (child.tagName === "UL" || child.tagName === "OL")) {
+                    currentItem.appendChild(child);
+                }
+            });
+            const firstItem = list.querySelector(":scope > li");
+            if (!list.style.listStyleType && firstItem?.style.listStyleType) {
+                list.style.listStyleType = firstItem.style.listStyleType;
+            }
+            // Imported document HTML often places list-style-type on every LI.
+            // That overrides later changes made on the UL/OL and makes the toolbar
+            // appear inert. The canonical DOM stores marker style on the list only.
+            list.querySelectorAll(":scope > li").forEach((item) => {
+                item.style.removeProperty("list-style-type");
+            });
+            list.querySelectorAll(":scope > li > ul, :scope > li > ol").forEach((nested) => {
+                const nestedItem = nested.querySelector(":scope > li");
+                if (!nested.style.listStyleType && nestedItem?.style.listStyleType) {
+                    nested.style.listStyleType = nestedItem.style.listStyleType;
+                }
+            });
+        });
+        root.querySelectorAll("ul[data-srte-list-preset],ol[data-srte-list-preset]").forEach((list) => {
+            const preset = list.dataset.srteListPreset;
+            if (!isSmartListPreset(preset)) {
+                clearListPreset(list);
+                return;
+            }
+            const ancestorWithPreset = list.parentElement?.closest("ul[data-srte-list-preset],ol[data-srte-list-preset]");
+            if (ancestorWithPreset?.dataset.srteListPreset === preset)
+                return;
+            applyListPresetHierarchy(list, preset);
+        });
+    };
     const insertHtmlAtEnd = (html) => {
         const el = editableRef.current;
         if (!el)
@@ -4053,6 +3829,27 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             }
         });
     };
+    // blockquote/pre always get their border+padding from the editor
+    // stylesheet, which an inline style (e.g. carried in from a paste, or set
+    // directly via the value prop) silently overrides regardless of how it
+    // got there. Strip those two properties so the editor's own look always
+    // wins, no matter the element's origin.
+    const normalizeBlockContainerStyling = (root) => {
+        root.querySelectorAll("blockquote,pre").forEach((element) => {
+            element.style.removeProperty("border");
+            element.style.removeProperty("border-top");
+            element.style.removeProperty("border-right");
+            element.style.removeProperty("border-bottom");
+            element.style.removeProperty("border-left");
+            element.style.removeProperty("padding");
+            element.style.removeProperty("padding-top");
+            element.style.removeProperty("padding-right");
+            element.style.removeProperty("padding-bottom");
+            element.style.removeProperty("padding-left");
+            if (!element.getAttribute("style"))
+                element.removeAttribute("style");
+        });
+    };
     const normalizeInvalidQuoteNesting = (root) => {
         root.querySelectorAll("blockquote blockquote").forEach((quote) => {
             const outerQuote = quote.parentElement?.closest("blockquote");
@@ -4080,7 +3877,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 outerCodeBlock.parentElement.insertBefore(codeBlock, outerCodeBlock.nextSibling);
             }
         });
-        root.querySelectorAll("p,h1,h2,h3,h4,h5,h6,blockquote").forEach((container) => {
+        // p/h1-h6 can only hold inline content, so a pre landing inside one (e.g.
+        // from bad paste HTML) is genuinely invalid and gets hoisted out. A
+        // blockquote is a real block container and is allowed to hold a pre.
+        root.querySelectorAll("p,h1,h2,h3,h4,h5,h6").forEach((container) => {
             const nestedCodeBlocks = Array.from(container.children).filter((child) => child.tagName === "PRE");
             nestedCodeBlocks.forEach((codeBlock) => {
                 container.parentElement?.insertBefore(codeBlock, container.nextSibling);
@@ -4125,10 +3925,12 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             return;
         // Auto-fix negative margins that might cause visibility issues
         fixNegativeMargins(el);
+        normalizeListNesting(el);
         // Quotes are document blocks and cannot be nested by drag and drop.
         normalizeInvalidQuoteNesting(el);
         // Code blocks are document blocks and cannot be nested by drag and drop.
         normalizeInvalidCodeBlockNesting(el);
+        normalizeBlockContainerStyling(el);
         // Tables are document-level blocks and must not remain inside code or list items.
         normalizeInvalidTableNesting(el);
         // Ensure tables are wrapped for horizontal scrolling
@@ -4181,6 +3983,27 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 sel?.removeAllRanges();
                 sel?.addRange(range);
             }
+            if (range?.collapsed) {
+                pushEditorHistory();
+                const inserted = editorControllerRef.current.bindRoot(el).insertTable(tableRows, tableCols);
+                if (inserted) {
+                    Array.from(inserted.rows).forEach((row, rowIndex) => {
+                        row.setAttribute("data-row-index", String(rowIndex));
+                        cellsOfRow(row).forEach((cell, cellIndex) => {
+                            cell.setAttribute("data-col-index", String(cellIndex));
+                            cell.style.border = cell.style.border || "1px solid #d1d5db";
+                            cell.style.padding = cell.style.padding || "6px";
+                            cell.style.minWidth = cell.style.minWidth || "60px";
+                        });
+                    });
+                    addTableResizeHandles();
+                    const firstCell = inserted.querySelector("td,th");
+                    if (firstCell instanceof HTMLTableCellElement)
+                        moveCaretToCell(firstCell, false);
+                    handleInput();
+                    return;
+                }
+            }
             const html = buildTableHTML(tableRows, tableCols);
             // Insert via Range for broader support
             const wrapper = document.createElement("div");
@@ -4351,6 +4174,26 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         if (!anchor)
             return;
         pushEditorHistory();
+        clearSelectionDecor();
+        const table = tbody.closest("table");
+        if (table instanceof HTMLTableElement) {
+            const replacement = editorControllerRef.current.bindRoot(editableRef.current).executeTableCommand(table, {
+                id: "table.cell.merge",
+                input: {
+                    start: { row: sr, column: sc },
+                    end: { row: er, column: ec },
+                },
+            });
+            if (replacement) {
+                const nextBody = replacement.tBodies[0];
+                const nextAnchor = nextBody ? getTableGrid(nextBody).grid[sr]?.[sc] : null;
+                if (nextAnchor)
+                    moveCaretToCell(nextAnchor, false);
+                addTableResizeHandles();
+                handleInput();
+                return;
+            }
+        }
         // Collect content and remove other cells
         const contents = [];
         const cellsToMerge = getCellsInGridRect(tbody, sr, sc, er, ec);
@@ -4380,7 +4223,20 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const pos = getCellPosition(cell);
         if (!pos)
             return;
-        const { row, tbody, rIdx } = pos;
+        const { row, tbody, rIdx, table } = pos;
+        const insertIndex = dir === "above" ? rIdx : rIdx + 1;
+        const replacement = editorControllerRef.current.bindRoot(editableRef.current).executeTableCommand(table, {
+            id: "table.row.add",
+            input: { index: insertIndex },
+        });
+        if (replacement) {
+            const nextBody = replacement.tBodies[0];
+            const nextCell = nextBody ? getTableGrid(nextBody).grid[insertIndex]?.[0] : null;
+            if (nextCell)
+                moveCaretToCell(nextCell, false);
+            addTableResizeHandles();
+            return;
+        }
         const newRow = document.createElement("tr");
         const numCols = Array.from(row.children).filter((c) => ["TD", "TH"].includes(c.tagName)).length;
         for (let i = 0; i < numCols; i++) {
@@ -4391,7 +4247,6 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             td.innerHTML = "&nbsp;";
             newRow.appendChild(td);
         }
-        const insertIndex = dir === "above" ? rIdx : rIdx + 1;
         const refRow = tbody.children[insertIndex] || null;
         tbody.insertBefore(newRow, refRow);
     };
@@ -4399,7 +4254,20 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const pos = getCellPosition(cell);
         if (!pos)
             return;
-        const { row, tbody, table } = pos;
+        const { row, tbody, table, rIdx } = pos;
+        const replacement = editorControllerRef.current.bindRoot(editableRef.current).executeTableCommand(table, {
+            id: "table.row.remove",
+            input: { index: rIdx },
+        });
+        if (replacement) {
+            const nextBody = replacement.tBodies[0];
+            const nextRow = Math.min(rIdx, Math.max(0, replacement.rows.length - 1));
+            const nextCell = nextBody ? getTableGrid(nextBody).grid[nextRow]?.[0] : null;
+            if (nextCell)
+                moveCaretToCell(nextCell, false);
+            addTableResizeHandles();
+            return;
+        }
         tbody.removeChild(row);
         if (tbody.querySelectorAll("tr").length === 0) {
             table.parentElement?.removeChild(table);
@@ -4410,8 +4278,20 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         if (!pos)
             return;
         const { tbody, cIdx } = pos;
-        const rows = Array.from(tbody.querySelectorAll("tr"));
         const insertIndex = dir === "left" ? cIdx : cIdx + 1;
+        const replacement = editorControllerRef.current.bindRoot(editableRef.current).executeTableCommand(pos.table, {
+            id: "table.column.add",
+            input: { index: insertIndex },
+        });
+        if (replacement) {
+            const nextBody = replacement.tBodies[0];
+            const nextCell = nextBody ? getTableGrid(nextBody).grid[0]?.[insertIndex] : null;
+            if (nextCell)
+                moveCaretToCell(nextCell, false);
+            addTableResizeHandles();
+            return;
+        }
+        const rows = Array.from(tbody.querySelectorAll("tr"));
         for (const r of rows) {
             const cells = Array.from(r.children).filter((c) => ["TD", "TH"].includes(c.tagName));
             const td = document.createElement("td");
@@ -4431,6 +4311,20 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         if (!pos)
             return;
         const { tbody, table, cIdx } = pos;
+        const replacement = editorControllerRef.current.bindRoot(editableRef.current).executeTableCommand(table, {
+            id: "table.column.remove",
+            input: { index: cIdx },
+        });
+        if (replacement) {
+            const nextBody = replacement.tBodies[0];
+            const nextGrid = nextBody ? getTableGrid(nextBody).grid : [];
+            const nextColumn = Math.min(cIdx, Math.max(0, (nextGrid[0]?.length || 1) - 1));
+            const nextCell = nextGrid[0]?.[nextColumn] || null;
+            if (nextCell)
+                moveCaretToCell(nextCell, false);
+            addTableResizeHandles();
+            return;
+        }
         const rows = Array.from(tbody.querySelectorAll("tr"));
         for (const r of rows) {
             const cells = Array.from(r.children).filter((c) => ["TD", "TH"].includes(c.tagName));
@@ -4444,7 +4338,21 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             table.parentElement?.removeChild(table);
     };
     const toggleHeaderCell = (cell) => {
+        const pos = getCellPosition(cell);
+        if (!pos)
+            return;
         clearSelectionDecor();
+        const replacement = editorControllerRef.current.bindRoot(editableRef.current).executeTableCommand(pos.table, {
+            id: "table.header.cell.toggle",
+            input: { row: pos.rIdx, column: pos.cIdx },
+        });
+        if (replacement) {
+            const nextCell = getTableGrid(replacement.tBodies[0]).grid[pos.rIdx]?.[pos.cIdx];
+            if (nextCell)
+                moveCaretToCell(nextCell, false);
+            addTableResizeHandles();
+            return;
+        }
         const isTh = cell.tagName === "TH";
         replaceTableCellTag(cell, isTh ? "td" : "th");
         handleInput();
@@ -4454,6 +4362,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         if (!pos)
             return;
         const { table } = pos;
+        if (editorControllerRef.current.bindRoot(editableRef.current).removeTable(table))
+            return;
         table.parentElement?.removeChild(table);
     };
     const splitCell = (cell) => {
@@ -4465,6 +4375,19 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const cs = Math.max(1, cell.colSpan || 1);
         if (rs === 1 && cs === 1)
             return;
+        clearSelectionDecor();
+        const replacement = editorControllerRef.current.bindRoot(editableRef.current).executeTableCommand(pos.table, {
+            id: "table.cell.split",
+            input: { row: rIdx, column: cIdx },
+        });
+        if (replacement) {
+            const nextBody = replacement.tBodies[0];
+            const nextCell = nextBody ? getTableGrid(nextBody).grid[rIdx]?.[cIdx] : null;
+            if (nextCell)
+                moveCaretToCell(nextCell, false);
+            addTableResizeHandles();
+            return;
+        }
         // Reset current cell
         cell.rowSpan = 1;
         cell.colSpan = 1;
@@ -4501,6 +4424,17 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         if (!pos)
             return;
         clearSelectionDecor();
+        const replacement = editorControllerRef.current.bindRoot(editableRef.current).executeTableCommand(pos.table, {
+            id: "table.header.row.toggle",
+            input: { row: pos.rIdx, column: pos.cIdx },
+        });
+        if (replacement) {
+            const nextCell = getTableGrid(replacement.tBodies[0]).grid[pos.rIdx]?.[pos.cIdx];
+            if (nextCell)
+                moveCaretToCell(nextCell, false);
+            addTableResizeHandles();
+            return;
+        }
         const { row } = pos;
         const cells = cellsOfRow(row);
         const shouldMakeHeader = cells.some((c) => c.tagName !== "TH");
@@ -4520,6 +4454,17 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         if (!pos)
             return;
         clearSelectionDecor();
+        const replacement = editorControllerRef.current.bindRoot(editableRef.current).executeTableCommand(pos.table, {
+            id: "table.header.column.toggle",
+            input: { row: pos.rIdx, column: pos.cIdx },
+        });
+        if (replacement) {
+            const nextCell = getTableGrid(replacement.tBodies[0]).grid[pos.rIdx]?.[pos.cIdx];
+            if (nextCell)
+                moveCaretToCell(nextCell, false);
+            addTableResizeHandles();
+            return;
+        }
         const { tbody, cIdx } = pos;
         const { grid } = getTableGrid(tbody);
         const seen = new Set();
@@ -4539,25 +4484,44 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     };
     const applyBgToSelection = (hex, fallbackCell, explicitCells) => {
         const readableColor = readableTextColorForBackground(hex);
+        const targetCells = explicitCells?.length
+            ? explicitCells
+            : shouldUseTableSelection(fallbackCell)
+                ? getCellsInGridRect(selectionRef.current.tbody, selectionRef.current.sr, selectionRef.current.sc, selectionRef.current.er, selectionRef.current.ec)
+                : fallbackCell ? [fallbackCell] : [];
+        const positions = targetCells
+            .map((target) => getCellPosition(target))
+            .filter((position) => Boolean(position));
+        const table = positions[0]?.table;
+        if (table && positions.every((position) => position.table === table)) {
+            const start = {
+                row: Math.min(...positions.map((position) => position.rIdx)),
+                column: Math.min(...positions.map((position) => position.cIdx)),
+            };
+            const end = {
+                row: Math.max(...positions.map((position) => position.rIdx)),
+                column: Math.max(...positions.map((position) => position.cIdx)),
+            };
+            clearSelectionDecor();
+            const replacement = editorControllerRef.current.bindRoot(editableRef.current).executeTableCommand(table, {
+                id: "table.cell.style.set",
+                input: { start, end, backgroundColor: hex, textColor: readableColor || undefined },
+            });
+            if (replacement) {
+                const nextCell = getTableGrid(replacement.tBodies[0]).grid[start.row]?.[start.column];
+                if (nextCell)
+                    moveCaretToCell(nextCell, false);
+                addTableResizeHandles();
+                return;
+            }
+        }
         const applyFill = (cell) => {
             cell.style.background = hex;
             if (readableColor)
                 cell.style.color = readableColor;
         };
-        if (explicitCells?.length) {
-            explicitCells.forEach(applyFill);
-            return;
-        }
-        const sel = shouldUseTableSelection(fallbackCell) ? selectionRef.current : null;
-        if (sel) {
-            const cells = getCellsInGridRect(sel.tbody, sel.sr, sel.sc, sel.er, sel.ec);
-            clearSelectionDecor();
-            cells.forEach(applyFill);
-        }
-        else if (fallbackCell) {
-            clearSelectionDecor();
-            applyFill(fallbackCell);
-        }
+        clearSelectionDecor();
+        targetCells.forEach(applyFill);
     };
     const tableCellFillHex = (cell) => {
         const storedSelectionBackground = cell.__rtePrevBg;
@@ -4580,18 +4544,35 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         return allSame ? first : tableCellFillHex(cell);
     };
     const toggleBorderSelection = (fallbackCell) => {
+        const targetCells = shouldUseTableSelection(fallbackCell)
+            ? getCellsInGridRect(selectionRef.current.tbody, selectionRef.current.sr, selectionRef.current.sc, selectionRef.current.er, selectionRef.current.ec)
+            : fallbackCell ? [fallbackCell] : [];
+        const positions = targetCells
+            .map((target) => getCellPosition(target))
+            .filter((position) => Boolean(position));
+        const table = positions[0]?.table;
+        if (table && positions.every((position) => position.table === table)) {
+            const start = {
+                row: Math.min(...positions.map((position) => position.rIdx)),
+                column: Math.min(...positions.map((position) => position.cIdx)),
+            };
+            const end = {
+                row: Math.max(...positions.map((position) => position.rIdx)),
+                column: Math.max(...positions.map((position) => position.cIdx)),
+            };
+            clearSelectionDecor();
+            if (editorControllerRef.current.bindRoot(editableRef.current).executeTableCommand(table, {
+                id: "table.cell.border.toggle",
+                input: { start, end },
+            }))
+                return;
+        }
         const applyToggle = (cell) => {
             const cur = cell.style.border;
             cell.style.border =
                 cur && cur !== "none" ? "none" : "1px solid #d1d5db";
         };
-        const sel = shouldUseTableSelection(fallbackCell) ? selectionRef.current : null;
-        if (sel) {
-            getCellsInGridRect(sel.tbody, sel.sr, sel.sc, sel.er, sel.ec).forEach(applyToggle);
-        }
-        else if (fallbackCell) {
-            applyToggle(fallbackCell);
-        }
+        targetCells.forEach(applyToggle);
     };
     const runTableCellAction = (cell, action) => {
         pushEditorHistory();
@@ -4690,7 +4671,14 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         }
     };
     const handleTableResizeEnd = () => {
-        if (tableResizeRef.current) {
+        const resize = tableResizeRef.current;
+        if (resize) {
+            const size = resize.type === "column"
+                ? Number.parseFloat(resize.cells[0]?.style.width || "") || resize.startSize
+                : Number.parseFloat(resize.table.rows[resize.index]?.style.height || "") || resize.startSize;
+            editorControllerRef.current.bindRoot(editableRef.current).executeTableCommand(resize.table, resize.type === "column"
+                ? { id: "table.column.width.set", input: { index: resize.index, widthPx: size } }
+                : { id: "table.row.height.set", input: { index: resize.index, heightPx: size } });
             tableResizeRef.current = null;
             document.body.style.cursor = '';
             document.body.style.userSelect = '';
@@ -5005,6 +4993,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         return sibling;
     };
     const moveSelectedBlocks = (direction) => {
+        if (!moveFeature)
+            return false;
         const editor = editableRef.current;
         const range = getSelectionRangeInEditor();
         if (!editor || !range || range.collapsed)
@@ -5020,6 +5010,19 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const parent = blocks[0].parentElement;
         if (!parent || blocks.some((block) => block.parentElement !== parent))
             return false;
+        const coreResult = executeDomMoveCommand(blocks, direction, pushEditorHistory);
+        if (coreResult === false)
+            return true;
+        if (coreResult) {
+            const movedRange = document.createRange();
+            movedRange.setStartBefore(coreResult[0]);
+            movedRange.setEndAfter(coreResult[coreResult.length - 1]);
+            safeSelectRange(movedRange);
+            savedRangeRef.current = movedRange.cloneRange();
+            handleInput();
+            requestAnimationFrame(updateActiveState);
+            return true;
+        }
         pushEditorHistory();
         if (direction === "up") {
             const previous = elementSibling(blocks[0], "previous");
@@ -5053,6 +5056,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         return true;
     };
     const moveCurrentElement = (direction) => {
+        if (!moveFeature)
+            return;
         restoreSavedSelection();
         const editor = editableRef.current;
         const range = getSelectionRangeInEditor();
@@ -5077,6 +5082,23 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             cell.appendChild(paragraph);
             target = paragraph;
         }
+        if (target.tagName.toLowerCase() !== "li") {
+            const coreResult = executeDomMoveCommand([target], direction, () => {
+                if (!historyPushed)
+                    pushEditorHistory();
+                historyPushed = true;
+            });
+            if (coreResult === false)
+                return;
+            if (coreResult) {
+                focusElementEnd(target);
+                setSelectedImage(target.tagName === "IMG" ? target : target.querySelector("img"));
+                scheduleImageOverlay();
+                handleInput();
+                requestAnimationFrame(updateActiveState);
+                return;
+            }
+        }
         if (target.tagName.toLowerCase() === "li") {
             const list = target.parentElement;
             if (!list)
@@ -5196,6 +5218,70 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             event.preventDefault();
         }
     };
+    const executePluginCommand = (commandId, input) => {
+        const editor = editableRef.current;
+        if (!editor || readOnly)
+            return false;
+        const before = editor.innerHTML;
+        pushEditorHistory();
+        const result = editorControllerRef.current
+            .bindRoot(editor)
+            .execute(commandId, input);
+        if (!result) {
+            editorControllerRef.current.discardLastHistorySnapshot(before);
+            return false;
+        }
+        handleInput();
+        requestAnimationFrame(updateActiveState);
+        return true;
+    };
+    const executePluginToolbarContribution = (contribution) => executePluginCommand(contribution.commandId, contribution.input);
+    const pluginContributionContext = {
+        root: editableRef.current,
+        selection: typeof window === "undefined" ? null : window.getSelection(),
+        readOnly,
+        canExecute: (commandId, input) => editorControllerRef.current.bindRoot(editableRef.current).canExecute(commandId, input),
+    };
+    const isPluginContributionVisible = (contribution) => {
+        try {
+            return contribution.isVisible?.(pluginContributionContext) ?? true;
+        }
+        catch {
+            return false;
+        }
+    };
+    const isPluginContributionEnabled = (contribution) => {
+        if (readOnly)
+            return false;
+        try {
+            if (contribution.isEnabled && !contribution.isEnabled(pluginContributionContext))
+                return false;
+            return !editableRef.current || pluginContributionContext.canExecute(contribution.commandId, contribution.input);
+        }
+        catch {
+            return false;
+        }
+    };
+    const isPluginContributionActive = (contribution) => {
+        try {
+            return contribution.isActive?.(pluginContributionContext) ?? false;
+        }
+        catch {
+            return false;
+        }
+    };
+    const isPluginShortcutAvailable = (shortcut) => {
+        if (readOnly)
+            return false;
+        try {
+            return (shortcut.isVisible?.(pluginContributionContext) ?? true) &&
+                (shortcut.isEnabled?.(pluginContributionContext) ?? true) &&
+                pluginContributionContext.canExecute(shortcut.commandId, shortcut.input);
+        }
+        catch {
+            return false;
+        }
+    };
     const editorClass = `srte-editor${theme === 'dark' ? ' srte-dark' : ''}${className ? ' ' + className : ''}`;
     return (_jsxs("div", { className: editorClass, style: {
             border: "1px solid var(--srte-border)",
@@ -5256,19 +5342,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                 }
                             }
                             e.currentTarget.value = "";
-                        } })), _jsx("input", { ref: pdfInputRef, type: "file", accept: "application/pdf", style: { display: "none" }, onChange: (e) => {
-                            handlePdfFiles(e.currentTarget.files);
-                            e.currentTarget.value = "";
-                        } }), _jsx("input", { ref: docxInputRef, type: "file", accept: ".docx", style: { display: "none" }, onChange: (e) => {
-                            handleDocxFiles(e.currentTarget.files);
-                            e.currentTarget.value = "";
-                        } }), _jsx("input", { ref: htmlInputRef, type: "file", accept: ".html,.htm,text/html", style: { display: "none" }, onChange: (e) => {
-                            importTextFile(e.currentTarget.files, "html");
-                            e.currentTarget.value = "";
-                        } }), _jsx("input", { ref: mdInputRef, type: "file", accept: ".md,.markdown,text/markdown,text/plain", style: { display: "none" }, onChange: (e) => {
-                            importTextFile(e.currentTarget.files, "md");
-                            e.currentTarget.value = "";
-                        } }), _jsxs(ToolbarGroup, { label: "History", children: [_jsx("button", { type: "button", className: "srte-tool-button", "aria-label": "Undo", title: "Undo", onClick: () => exec("undo"), children: _jsx(ToolbarIcon, { name: "undo" }) }), _jsx("button", { type: "button", className: "srte-tool-button", "aria-label": "Redo", title: "Redo", onClick: () => exec("redo"), children: _jsx(ToolbarIcon, { name: "redo" }) })] }), _jsxs("select", { value: currentBlockType, onPointerDown: preserveEditorSelection, onMouseDown: preserveEditorSelection, onChange: (e) => {
+                        } })), _jsxs(ToolbarGroup, { label: "History", children: [_jsx("button", { type: "button", className: "srte-tool-button", "aria-label": "Undo", title: "Undo", onClick: () => exec("undo"), children: _jsx(ToolbarIcon, { name: "undo" }) }), _jsx("button", { type: "button", className: "srte-tool-button", "aria-label": "Redo", title: "Redo", onClick: () => exec("redo"), children: _jsx(ToolbarIcon, { name: "redo" }) })] }), blockTypeFeature && _jsxs("select", { value: currentBlockType, onPointerDown: preserveEditorSelection, onMouseDown: preserveEditorSelection, onChange: (e) => {
                             const val = e.target.value;
                             if (val === "p")
                                 applyFormatBlock("<p>");
@@ -5291,56 +5365,57 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             borderRadius: 6,
                             background: "var(--srte-input-bg)",
                             color: "var(--srte-input-text)",
-                        }, children: [_jsx("option", { value: "mixed", disabled: true, children: "Mixed" }), _jsx("option", { value: "p", children: "Paragraph" }), _jsx("option", { value: "h1", children: "Heading 1" }), _jsx("option", { value: "h2", children: "Heading 2" }), _jsx("option", { value: "h3", children: "Heading 3" }), _jsx("option", { value: "h4", children: "Heading 4" }), _jsx("option", { value: "h5", children: "Heading 5" }), _jsx("option", { value: "h6", children: "Heading 6" })] }), _jsx("button", { type: "button", className: `srte-tool-button${activeState.bold ? " srte-active" : ""}`, title: "Bold", onClick: () => exec("bold"), "aria-pressed": activeState.bold, style: activeButtonStyle(activeState.bold), children: _jsx("span", { style: { fontWeight: 700 }, children: "B" }) }), _jsx("button", { type: "button", className: `srte-tool-button${activeState.italic ? " srte-active" : ""}`, title: "Italic", onClick: () => exec("italic"), "aria-pressed": activeState.italic, style: activeButtonStyle(activeState.italic, { fontStyle: "italic" }), children: "I" }), _jsx("button", { type: "button", className: `srte-tool-button${activeState.underline ? " srte-active" : ""}`, title: "Underline", onClick: () => exec("underline"), "aria-pressed": activeState.underline, style: activeButtonStyle(activeState.underline, { textDecoration: "underline" }), children: "U" }), _jsx("button", { type: "button", className: `srte-tool-button${activeState.strikeThrough ? " srte-active" : ""}`, title: "Strikethrough", onClick: () => exec("strikeThrough"), "aria-pressed": activeState.strikeThrough, style: activeButtonStyle(activeState.strikeThrough, { textDecoration: "line-through" }), children: "S" }), showFontSize && (_jsxs("select", { value: currentFontSize, onPointerDown: preserveEditorSelection, onMouseDown: preserveEditorSelection, onChange: (e) => applyFontSize(e.target.value), title: "Font Size", style: {
-                            height: 32,
-                            padding: "0 8px",
-                            border: "1px solid var(--srte-input-border)",
-                            borderRadius: 6,
-                            background: "var(--srte-input-bg)",
-                            color: "var(--srte-input-text)",
-                        }, children: [_jsx("option", { value: "", disabled: true, children: "Size" }), currentFontSize && !["8", "9", "10", "11", "12", "14", "16", "18", "24", "30", "36", "48", "60", "72", "96"].includes(currentFontSize) && (_jsx("option", { value: currentFontSize, children: currentFontSize })), _jsx("option", { value: "8", children: "8" }), _jsx("option", { value: "9", children: "9" }), _jsx("option", { value: "10", children: "10" }), _jsx("option", { value: "11", children: "11" }), _jsx("option", { value: "12", children: "12" }), _jsx("option", { value: "14", children: "14" }), _jsx("option", { value: "16", children: "16" }), _jsx("option", { value: "18", children: "18" }), _jsx("option", { value: "24", children: "24" }), _jsx("option", { value: "30", children: "30" }), _jsx("option", { value: "36", children: "36" }), _jsx("option", { value: "48", children: "48" }), _jsx("option", { value: "60", children: "60" }), _jsx("option", { value: "72", children: "72" }), _jsx("option", { value: "96", children: "96" })] })), preserveFontFamily && (_jsxs("select", { value: currentFont, onMouseDown: () => {
-                            const sel = window.getSelection();
-                            if (sel && sel.rangeCount > 0) {
-                                const range = sel.getRangeAt(0);
-                                const editor = editableRef.current;
-                                if (editor && editor.contains(range.commonAncestorContainer) && !range.collapsed) {
-                                    savedRangeRef.current = range.cloneRange();
-                                }
-                            }
-                        }, onChange: (e) => applyFontFamily(e.target.value), title: "Font Family", style: {
-                            height: 32,
-                            padding: "0 8px",
-                            border: "1px solid var(--srte-input-border)",
-                            borderRadius: 6,
-                            background: "var(--srte-input-bg)",
-                            color: "var(--srte-input-text)",
-                            maxWidth: 100,
-                        }, children: [_jsx("option", { value: "", disabled: true, children: "Font" }), fonts.map((f) => (_jsx("option", { value: f.value, children: f.name }, f.value)))] })), _jsx("button", { type: "button", className: "srte-tool-button", "aria-label": "Text color", title: "Text Color", onMouseDown: preserveEditorSelection, onClick: () => {
-                            setColorPickerType('text');
-                            setShowColorPicker(true);
-                        }, style: {
-                            height: 32,
-                            minWidth: 32,
-                            padding: "0 8px",
-                            border: "1px solid var(--srte-input-border)",
-                            borderRadius: 6,
-                            background: "var(--srte-input-bg)",
-                            color: "var(--srte-input-text)",
-                            position: "relative",
-                        }, children: _jsx("span", { style: { fontWeight: 700, borderBottom: `3px solid ${currentTextColor}`, lineHeight: 1 }, children: "A" }) }), _jsx("button", { type: "button", className: "srte-tool-button", "aria-label": "Background color", title: "Background Color", onMouseDown: preserveEditorSelection, onClick: () => {
-                            setColorPickerType('background');
-                            setShowColorPicker(true);
-                        }, style: {
-                            height: 32,
-                            minWidth: 32,
-                            padding: "0 8px",
-                            border: "1px solid var(--srte-input-border)",
-                            borderRadius: 6,
-                            background: "var(--srte-input-bg)",
-                            color: "var(--srte-input-text)",
-                        }, children: _jsx("span", { style: { fontWeight: 700, padding: "1px 4px", background: currentBackgroundColor, color: readableTextColorForBackground(currentBackgroundColor) || "currentColor", borderRadius: 3 }, children: "A" }) }), _jsxs("button", { type: "button", className: `srte-tool-button${activeState.subscript ? " srte-active" : ""}`, title: "Subscript", onMouseDown: preserveEditorSelection, onClick: () => toggleInlineScript("subscript"), "aria-pressed": activeState.subscript, style: activeButtonStyle(activeState.subscript), children: ["X", _jsx("sub", { children: "2" })] }), _jsxs("button", { type: "button", className: `srte-tool-button${activeState.superscript ? " srte-active" : ""}`, title: "Superscript", onMouseDown: preserveEditorSelection, onClick: () => toggleInlineScript("superscript"), "aria-pressed": activeState.superscript, style: activeButtonStyle(activeState.superscript), children: ["X", _jsx("sup", { children: "2" })] }), [
+                        }, children: [_jsx("option", { value: "mixed", disabled: true, children: "Mixed" }), _jsx("option", { value: "p", children: "Paragraph" }), _jsx("option", { value: "h1", children: "Heading 1" }), _jsx("option", { value: "h2", children: "Heading 2" }), _jsx("option", { value: "h3", children: "Heading 3" }), _jsx("option", { value: "h4", children: "Heading 4" }), _jsx("option", { value: "h5", children: "Heading 5" }), _jsx("option", { value: "h6", children: "Heading 6" })] }), basicFormattingFeature && _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: `srte-tool-button${activeState.bold ? " srte-active" : ""}`, title: "Bold", onClick: () => exec("bold"), "aria-pressed": activeState.bold, style: activeButtonStyle(activeState.bold), children: _jsx("span", { style: { fontWeight: 700 }, children: "B" }) }), _jsx("button", { type: "button", className: `srte-tool-button${activeState.italic ? " srte-active" : ""}`, title: "Italic", onClick: () => exec("italic"), "aria-pressed": activeState.italic, style: activeButtonStyle(activeState.italic, { fontStyle: "italic" }), children: "I" }), _jsx("button", { type: "button", className: `srte-tool-button${activeState.underline ? " srte-active" : ""}`, title: "Underline", onClick: () => exec("underline"), "aria-pressed": activeState.underline, style: activeButtonStyle(activeState.underline, { textDecoration: "underline" }), children: "U" }), _jsx("button", { type: "button", className: `srte-tool-button${activeState.strikeThrough ? " srte-active" : ""}`, title: "Strikethrough", onClick: () => exec("strikeThrough"), "aria-pressed": activeState.strikeThrough, style: activeButtonStyle(activeState.strikeThrough, { textDecoration: "line-through" }), children: "S" }), showFontSize && (_jsxs("select", { value: currentFontSize, onPointerDown: preserveEditorSelection, onMouseDown: preserveEditorSelection, onChange: (e) => applyFontSize(e.target.value), title: "Font Size", style: {
+                                    height: 32,
+                                    padding: "0 8px",
+                                    border: "1px solid var(--srte-input-border)",
+                                    borderRadius: 6,
+                                    background: "var(--srte-input-bg)",
+                                    color: "var(--srte-input-text)",
+                                }, children: [_jsx("option", { value: "", disabled: true, children: "Size" }), currentFontSize && !["8", "9", "10", "11", "12", "14", "16", "18", "24", "30", "36", "48", "60", "72", "96"].includes(currentFontSize) && (_jsx("option", { value: currentFontSize, children: currentFontSize })), _jsx("option", { value: "8", children: "8" }), _jsx("option", { value: "9", children: "9" }), _jsx("option", { value: "10", children: "10" }), _jsx("option", { value: "11", children: "11" }), _jsx("option", { value: "12", children: "12" }), _jsx("option", { value: "14", children: "14" }), _jsx("option", { value: "16", children: "16" }), _jsx("option", { value: "18", children: "18" }), _jsx("option", { value: "24", children: "24" }), _jsx("option", { value: "30", children: "30" }), _jsx("option", { value: "36", children: "36" }), _jsx("option", { value: "48", children: "48" }), _jsx("option", { value: "60", children: "60" }), _jsx("option", { value: "72", children: "72" }), _jsx("option", { value: "96", children: "96" })] })), preserveFontFamily && (_jsxs("select", { value: currentFont, onMouseDown: () => {
+                                    const sel = window.getSelection();
+                                    if (sel && sel.rangeCount > 0) {
+                                        const range = sel.getRangeAt(0);
+                                        const editor = editableRef.current;
+                                        if (editor && editor.contains(range.commonAncestorContainer) && !range.collapsed) {
+                                            savedRangeRef.current = range.cloneRange();
+                                        }
+                                    }
+                                }, onChange: (e) => applyFontFamily(e.target.value), title: "Font Family", style: {
+                                    height: 32,
+                                    padding: "0 8px",
+                                    border: "1px solid var(--srte-input-border)",
+                                    borderRadius: 6,
+                                    background: "var(--srte-input-bg)",
+                                    color: "var(--srte-input-text)",
+                                    maxWidth: 100,
+                                }, children: [_jsx("option", { value: "", disabled: true, children: "Font" }), fonts.map((f) => (_jsx("option", { value: f.value, children: f.name }, f.value)))] })), _jsx("button", { type: "button", className: "srte-tool-button", "aria-label": "Text color", title: "Text Color", onMouseDown: preserveEditorSelection, onClick: () => {
+                                    setColorPickerType('text');
+                                    setShowColorPicker(true);
+                                }, style: {
+                                    height: 32,
+                                    minWidth: 32,
+                                    padding: "0 8px",
+                                    border: "1px solid var(--srte-input-border)",
+                                    borderRadius: 6,
+                                    background: "var(--srte-input-bg)",
+                                    color: "var(--srte-input-text)",
+                                    position: "relative",
+                                }, children: _jsx("span", { style: { fontWeight: 700, borderBottom: `3px solid ${currentTextColor}`, lineHeight: 1 }, children: "A" }) }), _jsx("button", { type: "button", className: "srte-tool-button", "aria-label": "Background color", title: "Background Color", onMouseDown: preserveEditorSelection, onClick: () => {
+                                    setColorPickerType('background');
+                                    setShowColorPicker(true);
+                                }, style: {
+                                    height: 32,
+                                    minWidth: 32,
+                                    padding: "0 8px",
+                                    border: "1px solid var(--srte-input-border)",
+                                    borderRadius: 6,
+                                    background: "var(--srte-input-bg)",
+                                    color: "var(--srte-input-text)",
+                                }, children: _jsx("span", { style: { fontWeight: 700, padding: "1px 4px", background: currentBackgroundColor, color: readableTextColorForBackground(currentBackgroundColor) || "currentColor", borderRadius: 3 }, children: "A" }) }), _jsxs("button", { type: "button", className: `srte-tool-button${activeState.subscript ? " srte-active" : ""}`, title: "Subscript", onMouseDown: preserveEditorSelection, onClick: () => toggleInlineScript("subscript"), "aria-pressed": activeState.subscript, style: activeButtonStyle(activeState.subscript), children: ["X", _jsx("sub", { children: "2" })] }), _jsxs("button", { type: "button", className: `srte-tool-button${activeState.superscript ? " srte-active" : ""}`, title: "Superscript", onMouseDown: preserveEditorSelection, onClick: () => toggleInlineScript("superscript"), "aria-pressed": activeState.superscript, style: activeButtonStyle(activeState.superscript), children: ["X", _jsx("sup", { children: "2" })] })] }), [
                         {
                             key: "check",
+                            enabled: checklistFeature,
                             icon: "checklist",
                             title: "Checklist",
                             active: activeState.checklist,
@@ -5349,21 +5424,37 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         },
                         {
                             key: "bullet",
+                            enabled: listFeature,
                             icon: "bullets",
                             title: "Bulleted list",
                             active: activeState.unorderedList,
-                            action: () => applyListStyle("bullet:disc"),
-                            options: [["bullet:disc", "• Disc"], ["bullet:circle", "○ Circle"], ["bullet:square", "▪ Square"]],
+                            action: () => toggleList("ul"),
+                            options: [
+                                ...SMART_LIST_PRESETS.filter((preset) => preset.kind === "bullet")
+                                    .map((preset) => [`bullet-preset:${preset.id}`, preset.label, false]),
+                                ["bullet:disc", "• Disc", true],
+                                ["bullet:circle", "○ Circle", true],
+                                ["bullet:square", "▪ Square", true],
+                            ],
                         },
                         {
                             key: "ordered",
+                            enabled: listFeature,
                             icon: "numbers",
                             title: "Numbered list",
                             active: activeState.orderedList,
-                            action: () => applyListStyle("ordered:decimal"),
-                            options: [["ordered:decimal", "1. 2. 3."], ["ordered:lower-alpha", "a. b. c."], ["ordered:upper-alpha", "A. B. C."], ["ordered:lower-roman", "i. ii. iii."], ["ordered:upper-roman", "I. II. III."]],
+                            action: () => toggleList("ol"),
+                            options: [
+                                ...SMART_LIST_PRESETS.filter((preset) => preset.kind === "ordered")
+                                    .map((preset) => [`ordered-preset:${preset.id}`, preset.label, false]),
+                                ["ordered:decimal", "1. 2. 3.", true],
+                                ["ordered:lower-alpha", "a. b. c.", true],
+                                ["ordered:upper-alpha", "A. B. C.", true],
+                                ["ordered:lower-roman", "i. ii. iii.", true],
+                                ["ordered:upper-roman", "I. II. III.", true],
+                            ],
                         },
-                    ].map((control) => (_jsxs("span", { className: "srte-split-control", children: [_jsx("button", { type: "button", className: `srte-tool-button${control.active ? " srte-active" : ""}`, title: control.title, onPointerDown: preserveEditorSelection, onClick: control.action, "aria-pressed": control.active, children: _jsx(ToolbarIcon, { name: control.icon }) }), _jsxs("select", { defaultValue: "", "aria-label": `${control.title} styles`, title: `${control.title} styles`, onPointerDown: preserveEditorSelection, onMouseDown: preserveEditorSelection, onChange: (event) => {
+                    ].filter((control) => control.enabled).map((control) => (_jsxs("span", { className: "srte-split-control", children: [_jsx("button", { type: "button", className: `srte-tool-button${control.active ? " srte-active" : ""}`, title: control.title, onPointerDown: preserveEditorSelection, onClick: control.action, "aria-pressed": control.active, children: _jsx(ToolbarIcon, { name: control.icon }) }), _jsxs("select", { defaultValue: "", "aria-label": `${control.title} styles`, title: `${control.title} styles`, onPointerDown: preserveEditorSelection, onMouseDown: preserveEditorSelection, onChange: (event) => {
                                     const selected = event.currentTarget.value;
                                     if (selected === "check:plain")
                                         applyChecklist(false);
@@ -5372,7 +5463,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                     else if (selected)
                                         applyListStyle(selected);
                                     event.currentTarget.value = "";
-                                }, children: [_jsx("option", { value: "", disabled: true, children: "Style" }), control.options.map(([value, label]) => _jsx("option", { value: value, children: label }, value))] })] }, control.key))), _jsx("button", { type: "button", className: `srte-tool-button${activeState.blockquote ? " srte-active" : ""}`, title: "Blockquote", onPointerDown: preserveEditorSelection, onClick: toggleBlockquote, "aria-pressed": activeState.blockquote, children: _jsx(ToolbarIcon, { name: "quote" }) }), _jsx("button", { type: "button", className: "srte-tool-button", "aria-label": "Special characters", title: "Special characters", onClick: () => setShowSpecialChars(true), children: _jsx(ToolbarIcon, { name: "omega" }) }), _jsx("button", { type: "button", className: `srte-tool-button${activeState.codeBlock ? " srte-active" : ""}`, title: "Code block", onPointerDown: preserveEditorSelection, onClick: toggleCodeBlock, "aria-pressed": activeState.codeBlock, children: _jsx(ToolbarIcon, { name: "code" }) }), _jsx("button", { type: "button", className: `srte-tool-button${activeState.link ? " srte-active" : ""}`, title: "Insert link", "aria-label": "Insert or edit link", "aria-pressed": activeState.link, onPointerDown: preserveEditorSelection, onClick: () => openLinkEditor(), children: _jsx(ToolbarIcon, { name: "link" }) }), (table || media || formula) && (_jsxs(ToolbarMenu, { label: "Insert", icon: "insert", priority: 2, children: [table && _jsx(MenuItem, { icon: "table", label: "Table", title: "Insert table", onClick: () => setShowTableDialog(true) }), media && _jsx(MenuItem, { icon: "image", label: "Upload image", title: "Insert image", onClick: insertImage }), media && _jsx(MenuItem, { icon: "media", label: "Media", title: "Open media", onClick: () => mediaManager ? setShowMediaManager(true) : insertImage() }), formula && _jsx(MenuItem, { icon: "formula", label: "Formula", title: "Insert formula", onClick: () => setShowFormulaDialog(true) })] })), selectedImage && (_jsxs(ToolbarMenu, { label: "Image alignment", icon: "image", children: [_jsx(MenuItem, { icon: "align-center", label: "Center image", onClick: () => {
+                                }, children: [_jsx("option", { value: "", disabled: true, children: "Style" }), control.options.map(([value, label, hidden]) => _jsx("option", { value: value, hidden: hidden, children: label }, value))] })] }, control.key))), blockquoteFeature && _jsx("button", { type: "button", className: `srte-tool-button${activeState.blockquote ? " srte-active" : ""}`, title: "Blockquote", onPointerDown: preserveEditorSelection, onClick: toggleBlockquote, "aria-pressed": activeState.blockquote, children: _jsx(ToolbarIcon, { name: "quote" }) }), _jsx("button", { type: "button", className: "srte-tool-button", "aria-label": "Special characters", title: "Special characters", onClick: () => setShowSpecialChars(true), children: _jsx(ToolbarIcon, { name: "omega" }) }), codeBlockFeature && _jsx("button", { type: "button", className: `srte-tool-button${activeState.codeBlock ? " srte-active" : ""}`, title: "Code block", onPointerDown: preserveEditorSelection, onClick: toggleCodeBlock, "aria-pressed": activeState.codeBlock, children: _jsx(ToolbarIcon, { name: "code" }) }), basicFormattingFeature && _jsx("button", { type: "button", className: `srte-tool-button${activeState.link ? " srte-active" : ""}`, title: "Insert link", "aria-label": "Insert or edit link", "aria-pressed": activeState.link, onPointerDown: preserveEditorSelection, onClick: () => openLinkEditor(), children: _jsx(ToolbarIcon, { name: "link" }) }), pluginRuntime.toolbar
+                        .filter((contribution) => (!contribution.placement || contribution.placement === "main") &&
+                        isPluginContributionVisible(contribution))
+                        .map((contribution) => (_jsx("button", { type: "button", className: "srte-tool-button", disabled: !isPluginContributionEnabled(contribution), "aria-pressed": isPluginContributionActive(contribution), "aria-label": contribution.label, title: contribution.title || contribution.label, onPointerDown: preserveEditorSelection, onClick: () => executePluginToolbarContribution(contribution), children: contribution.icon || contribution.label.slice(0, 2) }, contribution.id))), (table || media || formula || pluginRuntime.toolbar.some((item) => item.placement === "insert")) && (_jsxs(ToolbarMenu, { label: "Insert", icon: "insert", priority: 2, children: [table && _jsx(MenuItem, { icon: "table", label: "Table", title: "Insert table", onClick: () => setShowTableDialog(true) }), media && _jsx(MenuItem, { icon: "image", label: "Upload image", title: "Insert image", onClick: insertImage }), media && _jsx(MenuItem, { icon: "media", label: "Media", title: "Open media", onClick: () => mediaManager ? setShowMediaManager(true) : insertImage() }), formula && _jsx(MenuItem, { icon: "formula", label: "Formula", title: "Insert formula", onClick: () => setShowFormulaDialog(true) }), pluginRuntime.toolbar.filter((item) => item.placement === "insert" && isPluginContributionVisible(item)).map((contribution) => (_jsxs("button", { type: "button", role: "menuitem", className: "srte-menu-item", disabled: !isPluginContributionEnabled(contribution), title: contribution.title || contribution.label, onClick: () => executePluginToolbarContribution(contribution), children: [_jsx("span", { "aria-hidden": "true", children: contribution.icon || "＋" }), _jsx("span", { children: contribution.label })] }, contribution.id)))] })), selectedImage && (_jsxs(ToolbarMenu, { label: "Image alignment", icon: "image", children: [_jsx(MenuItem, { icon: "align-center", label: "Center image", onClick: () => {
                                     selectedImage.style.display = "block";
                                     selectedImage.style.margin = "0 auto";
                                     selectedImage.style.float = "none";
@@ -5390,17 +5484,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                     selectedImage.style.margin = "0 0 8px 8px";
                                     scheduleImageOverlay();
                                     handleInput();
-                                } })] })), _jsxs(ToolbarGroup, { label: "Document", priority: 3, children: [_jsxs(ToolbarMenu, { label: loadingPdf || loadingDocx ? "Importing document" : "Import document", icon: "import", children: [_jsx(MenuItem, { icon: "import", label: "PDF (.pdf)", disabled: loadingPdf || loadingDocx, onClick: () => pdfInputRef.current?.click() }), _jsx(MenuItem, { icon: "import", label: "Microsoft Word (.docx)", disabled: loadingPdf || loadingDocx, onClick: () => docxInputRef.current?.click() }), _jsx(MenuItem, { icon: "import", label: "HTML (.html)", disabled: loadingPdf || loadingDocx, onClick: () => htmlInputRef.current?.click() }), _jsx(MenuItem, { icon: "import", label: "Markdown (.md)", disabled: loadingPdf || loadingDocx, onClick: () => mdInputRef.current?.click() })] }), _jsxs(ToolbarMenu, { label: "Export document", icon: "export", children: [_jsx(MenuItem, { icon: "export", label: "PDF", onClick: exportPdf }), _jsx(MenuItem, { icon: "export", label: "Microsoft Word (.docx)", onClick: () => void exportDocx() }), _jsx(MenuItem, { icon: "export", label: "HTML", onClick: exportHtml }), _jsx(MenuItem, { icon: "export", label: "Markdown", onClick: exportMarkdown })] }), _jsxs("select", { className: "srte-command-proxy", "aria-hidden": "true", tabIndex: -1, defaultValue: "", "aria-label": "Import document", title: "Import document", disabled: loadingPdf || loadingDocx, onChange: (event) => {
+                                } })] })), formatRuntime.formats.length > 0 && _jsxs(ToolbarGroup, { label: "Document", priority: 3, children: [formatRuntime.imports.length > 0 && _jsx(ToolbarMenu, { label: loadingPdf || loadingDocx ? "Importing document" : "Import document", icon: "import", children: formatRuntime.imports.map((format) => _jsx(MenuItem, { icon: "import", label: `${format.label} (.${format.extension})`, disabled: loadingPdf || loadingDocx, onClick: () => openFormatImport(format.id) }, format.id)) }), formatRuntime.exports.length > 0 && _jsx(ToolbarMenu, { label: "Export document", icon: "export", children: formatRuntime.exports.map((format) => _jsx(MenuItem, { icon: "export", label: format.label, onClick: () => void runFormatExport(format.id) }, format.id)) }), _jsxs("select", { className: "srte-command-proxy", "aria-hidden": "true", tabIndex: -1, defaultValue: "", "aria-label": "Import document", title: "Import document", disabled: loadingPdf || loadingDocx, onChange: (event) => {
                                     const format = event.currentTarget.value;
                                     event.currentTarget.value = "";
-                                    if (format === "pdf")
-                                        pdfInputRef.current?.click();
-                                    else if (format === "docx")
-                                        docxInputRef.current?.click();
-                                    else if (format === "html")
-                                        htmlInputRef.current?.click();
-                                    else if (format === "markdown")
-                                        mdInputRef.current?.click();
+                                    openFormatImport(format);
                                 }, style: {
                                     height: 32,
                                     padding: "0 8px",
@@ -5409,17 +5496,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                     background: "var(--srte-input-bg)",
                                     color: "var(--srte-input-text)",
                                     opacity: loadingPdf || loadingDocx ? 0.6 : 1,
-                                }, children: [_jsx("option", { value: "", disabled: true, children: loadingPdf || loadingDocx ? "Importing…" : "Import…" }), _jsx("option", { value: "pdf", children: "PDF (.pdf)" }), _jsx("option", { value: "docx", children: "Word (.docx)" }), _jsx("option", { value: "html", children: "HTML (.html)" }), _jsx("option", { value: "markdown", children: "Markdown (.md)" })] }), _jsxs("select", { className: "srte-command-proxy", "aria-hidden": "true", tabIndex: -1, defaultValue: "", "aria-label": "Export document", title: "Export document", onChange: (event) => {
+                                }, children: [_jsx("option", { value: "", disabled: true, children: loadingPdf || loadingDocx ? "Importing…" : "Import…" }), formatRuntime.imports.map((format) => _jsxs("option", { value: format.id, children: [proxyFormatLabel(format), " (.", format.extension, ")"] }, format.id))] }), _jsxs("select", { className: "srte-command-proxy", "aria-hidden": "true", tabIndex: -1, defaultValue: "", "aria-label": "Export document", title: "Export document", onChange: (event) => {
                                     const format = event.currentTarget.value;
                                     event.currentTarget.value = "";
-                                    if (format === "html")
-                                        exportHtml();
-                                    else if (format === "markdown")
-                                        exportMarkdown();
-                                    else if (format === "docx")
-                                        void exportDocx();
-                                    else if (format === "pdf")
-                                        exportPdf();
+                                    void runFormatExport(format);
                                 }, style: {
                                     height: 32,
                                     padding: "0 8px",
@@ -5427,7 +5507,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                     borderRadius: 6,
                                     background: "var(--srte-input-bg)",
                                     color: "var(--srte-input-text)",
-                                }, children: [_jsx("option", { value: "", disabled: true, children: "Export\u2026" }), _jsx("option", { value: "html", children: "HTML (.html)" }), _jsx("option", { value: "markdown", children: "Markdown (.md)" }), _jsx("option", { value: "docx", children: "Word (.docx)" }), _jsx("option", { value: "pdf", children: "PDF (.pdf)" })] })] }), _jsx(ToolbarMenu, { label: "Text alignment", icon: currentAlignment === "center" ? "align-center" : currentAlignment === "right" ? "align-right" : currentAlignment === "justify" ? "justify" : "align-left", active: currentAlignment !== "left", children: ["left", "center", "right", "justify"].map((alignment) => (_jsx(MenuItem, { icon: alignment === "left" ? "align-left" : alignment === "center" ? "align-center" : alignment === "right" ? "align-right" : "justify", label: alignment === "justify" ? "Justify" : `Align ${alignment}`, title: alignment === "justify" ? "Justify" : `Align ${alignment}`, active: currentAlignment === alignment, onClick: () => applyTextAlignment(alignment) }, alignment))) }), _jsxs(ToolbarMenu, { label: "Move and indent", icon: "move", priority: 2, children: [_jsx(MenuItem, { icon: "up", label: "Move block up", title: "Move selected block up", onClick: () => moveCurrentElement("up") }), _jsx(MenuItem, { icon: "down", label: "Move block down", title: "Move selected block down", onClick: () => moveCurrentElement("down") }), _jsx("div", { className: "srte-menu-separator", role: "separator" }), _jsx(MenuItem, { icon: "outdent", label: "Decrease indent", title: "Move selected block left", onClick: () => moveCurrentElement("left") }), _jsx(MenuItem, { icon: "indent", label: "Increase indent", title: "Move selected block right", onClick: () => moveCurrentElement("right") })] }), _jsx("div", { className: "srte-mobile-more", children: _jsxs(ToolbarMenu, { label: "More editor actions", icon: "more", children: [table && _jsx(MenuItem, { icon: "table", label: "Insert table", onClick: () => setShowTableDialog(true) }), media && _jsx(MenuItem, { icon: "image", label: "Upload image", onClick: insertImage }), media && _jsx(MenuItem, { icon: "media", label: "Media", onClick: () => mediaManager ? setShowMediaManager(true) : insertImage() }), formula && _jsx(MenuItem, { icon: "formula", label: "Insert formula", onClick: () => setShowFormulaDialog(true) }), _jsx(MenuItem, { icon: "omega", label: "Special characters", onClick: () => setShowSpecialChars(true) }), _jsx(MenuItem, { icon: "up", label: "Move block up", onClick: () => moveCurrentElement("up") }), _jsx(MenuItem, { icon: "down", label: "Move block down", onClick: () => moveCurrentElement("down") }), _jsx(MenuItem, { icon: "outdent", label: "Decrease indent", onClick: () => moveCurrentElement("left") }), _jsx(MenuItem, { icon: "indent", label: "Increase indent", onClick: () => moveCurrentElement("right") }), _jsx("div", { className: "srte-menu-separator", role: "separator" }), _jsx(MenuItem, { icon: "import", label: "Import Word document", onClick: () => docxInputRef.current?.click() }), _jsx(MenuItem, { icon: "import", label: "Import HTML", onClick: () => htmlInputRef.current?.click() }), _jsx(MenuItem, { icon: "import", label: "Import Markdown", onClick: () => mdInputRef.current?.click() }), _jsx("div", { className: "srte-menu-separator", role: "separator" }), _jsx(MenuItem, { icon: "export", label: "Export PDF", onClick: exportPdf }), _jsx(MenuItem, { icon: "export", label: "Export Word document", onClick: () => void exportDocx() }), _jsx(MenuItem, { icon: "export", label: "Export HTML", onClick: exportHtml }), _jsx(MenuItem, { icon: "export", label: "Export Markdown", onClick: exportMarkdown })] }) })] }), media && mediaManager && (_jsx(MediaManager, { open: showMediaManager, onClose: () => setShowMediaManager(false), adapter: mediaManager, onSelect: (item) => {
+                                }, children: [_jsx("option", { value: "", disabled: true, children: "Export\u2026" }), proxyExportFormats.map((format) => _jsxs("option", { value: format.id, children: [proxyFormatLabel(format), " (.", format.extension, ")"] }, format.id))] })] }), alignmentFeature && _jsx(ToolbarMenu, { label: "Text alignment", icon: currentAlignment === "center" ? "align-center" : currentAlignment === "right" ? "align-right" : currentAlignment === "justify" ? "justify" : "align-left", active: currentAlignment !== "left", children: ["left", "center", "right", "justify"].map((alignment) => (_jsx(MenuItem, { icon: alignment === "left" ? "align-left" : alignment === "center" ? "align-center" : alignment === "right" ? "align-right" : "justify", label: alignment === "justify" ? "Justify" : `Align ${alignment}`, title: alignment === "justify" ? "Justify" : `Align ${alignment}`, active: currentAlignment === alignment, onClick: () => applyTextAlignment(alignment) }, alignment))) }), moveFeature && _jsxs(ToolbarMenu, { label: "Move and indent", icon: "move", priority: 2, children: [_jsx(MenuItem, { icon: "up", label: "Move block up", title: "Move selected block up", onClick: () => moveCurrentElement("up") }), _jsx(MenuItem, { icon: "down", label: "Move block down", title: "Move selected block down", onClick: () => moveCurrentElement("down") }), _jsx("div", { className: "srte-menu-separator", role: "separator" }), _jsx(MenuItem, { icon: "outdent", label: "Decrease indent", title: "Move selected block left", onClick: () => moveCurrentElement("left") }), _jsx(MenuItem, { icon: "indent", label: "Increase indent", title: "Move selected block right", onClick: () => moveCurrentElement("right") })] }), _jsx("div", { className: "srte-mobile-more", children: _jsxs(ToolbarMenu, { label: "More editor actions", icon: "more", children: [table && _jsx(MenuItem, { icon: "table", label: "Insert table", onClick: () => setShowTableDialog(true) }), media && _jsx(MenuItem, { icon: "image", label: "Upload image", onClick: insertImage }), media && _jsx(MenuItem, { icon: "media", label: "Media", onClick: () => mediaManager ? setShowMediaManager(true) : insertImage() }), formula && _jsx(MenuItem, { icon: "formula", label: "Insert formula", onClick: () => setShowFormulaDialog(true) }), pluginRuntime.toolbar.filter((item) => item.placement === "more" && isPluginContributionVisible(item)).map((contribution) => (_jsxs("button", { type: "button", role: "menuitem", className: "srte-menu-item", disabled: !isPluginContributionEnabled(contribution), title: contribution.title || contribution.label, onClick: () => executePluginToolbarContribution(contribution), children: [_jsx("span", { "aria-hidden": "true", children: contribution.icon || "•" }), _jsx("span", { children: contribution.label })] }, contribution.id))), _jsx(MenuItem, { icon: "omega", label: "Special characters", onClick: () => setShowSpecialChars(true) }), moveFeature && _jsx(MenuItem, { icon: "up", label: "Move block up", onClick: () => moveCurrentElement("up") }), moveFeature && _jsx(MenuItem, { icon: "down", label: "Move block down", onClick: () => moveCurrentElement("down") }), moveFeature && _jsx(MenuItem, { icon: "outdent", label: "Decrease indent", onClick: () => moveCurrentElement("left") }), moveFeature && _jsx(MenuItem, { icon: "indent", label: "Increase indent", onClick: () => moveCurrentElement("right") }), _jsx("div", { className: "srte-menu-separator", role: "separator" }), formatRuntime.imports.map((format) => _jsx(MenuItem, { icon: "import", label: `Import ${format.label}`, onClick: () => openFormatImport(format.id) }, `mobile-import-${format.id}`)), _jsx("div", { className: "srte-menu-separator", role: "separator" }), formatRuntime.exports.map((format) => _jsx(MenuItem, { icon: "export", label: `Export ${format.label}`, onClick: () => void runFormatExport(format.id) }, `mobile-export-${format.id}`))] }) })] }), media && mediaManager && (_jsx(MediaManager, { open: showMediaManager, onClose: () => setShowMediaManager(false), adapter: mediaManager, onSelect: (item) => {
                     if (item?.url)
                         insertImageAtSelection(item);
                 } })), table && showTableDialog && (_jsx("div", { style: {
@@ -5488,10 +5568,6 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     zIndex: 100,
                 }, onClick: () => {
                     setPendingImport(null);
-                    if (pdfInputRef.current)
-                        pdfInputRef.current.value = "";
-                    if (docxInputRef.current)
-                        docxInputRef.current.value = "";
                 }, children: _jsxs("div", { style: {
                         background: "var(--srte-modal-bg)",
                         color: "var(--srte-modal-text)",
@@ -5500,7 +5576,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         maxWidth: 400,
                         width: "90%",
                         boxShadow: "var(--srte-menu-shadow)",
-                    }, onClick: (e) => e.stopPropagation(), children: [_jsx("h3", { style: { margin: "0 0 12px 0", fontSize: 18, fontWeight: 600 }, children: "Import Content" }), _jsx("p", { style: { margin: "0 0 20px 0", color: "var(--srte-text-muted)", fontSize: 14 }, children: "The editor already contains content. How would you like to handle the imported document?" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [_jsx("button", { onClick: () => processImport(pendingImport.file, pendingImport.type, 'replace'), style: {
+                    }, onClick: (e) => e.stopPropagation(), children: [_jsx("h3", { style: { margin: "0 0 12px 0", fontSize: 18, fontWeight: 600 }, children: "Import Content" }), _jsx("p", { style: { margin: "0 0 20px 0", color: "var(--srte-text-muted)", fontSize: 14 }, children: "The editor already contains content. How would you like to handle the imported document?" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [_jsx("button", { onClick: () => void processFormatImport(pendingImport.definition, pendingImport.file, 'replace'), style: {
                                         padding: "8px 16px",
                                         background: "var(--srte-danger)",
                                         color: "var(--srte-on-primary)",
@@ -5509,7 +5585,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                         cursor: "pointer",
                                         fontWeight: 500,
                                         textAlign: "left"
-                                    }, children: "Replace Check existing content (Overwrite)" }), _jsx("button", { onClick: () => processImport(pendingImport.file, pendingImport.type, 'append'), style: {
+                                    }, children: "Replace Check existing content (Overwrite)" }), _jsx("button", { onClick: () => void processFormatImport(pendingImport.definition, pendingImport.file, 'append'), style: {
                                         padding: "8px 16px",
                                         background: "var(--srte-primary)",
                                         color: "var(--srte-on-primary)",
@@ -5520,10 +5596,6 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                         textAlign: "left"
                                     }, children: "Append to bottom" }), _jsx("button", { onClick: () => {
                                         setPendingImport(null);
-                                        if (pdfInputRef.current)
-                                            pdfInputRef.current.value = "";
-                                        if (docxInputRef.current)
-                                            docxInputRef.current.value = "";
                                     }, style: {
                                         padding: "8px 16px",
                                         background: "var(--srte-cancel-bg)",
@@ -5886,6 +5958,14 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                 if (item && list) {
                                     pushEditorHistory();
                                     const checked = item.dataset.checked !== "true";
+                                    const replacement = editorControllerRef.current
+                                        .bindRoot(editableRef.current)
+                                        .executeChecklistItemCommand(list, item, checked);
+                                    if (replacement) {
+                                        syncChecklistControls(replacement);
+                                        handleInput();
+                                        return;
+                                    }
                                     item.dataset.checked = checked ? "true" : "false";
                                     t.dataset.checked = checked ? "true" : "false";
                                     t.setAttribute("aria-pressed", checked ? "true" : "false");
@@ -5957,7 +6037,30 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             }
                             updateActiveState();
                         }, onKeyDown: (e) => {
-                            if ((e.metaKey || e.ctrlKey) && String(e.key).toLowerCase() === "k") {
+                            if (e.key === "Backspace" || e.key === "Delete") {
+                                const selection = window.getSelection();
+                                const range = selection?.rangeCount ? selection.getRangeAt(0) : null;
+                                const atom = range
+                                    ? adjacentInlineAtom(range, e.key === "Backspace" ? "backward" : "forward")
+                                    : null;
+                                if (atom && editableRef.current) {
+                                    pushEditorHistory();
+                                    if (editorControllerRef.current.bindRoot(editableRef.current).deleteInlineAtom(atom)) {
+                                        e.preventDefault();
+                                        handleInput();
+                                        return;
+                                    }
+                                    editorControllerRef.current.discardLastHistorySnapshot();
+                                }
+                            }
+                            const pluginShortcut = pluginRuntime.shortcuts.find((shortcut) => matchesPluginShortcut(e, shortcut) &&
+                                isPluginShortcutAvailable(shortcut));
+                            if (pluginShortcut &&
+                                executePluginCommand(pluginShortcut.commandId, pluginShortcut.input)) {
+                                e.preventDefault();
+                                return;
+                            }
+                            if (basicFormattingFeature && (e.metaKey || e.ctrlKey) && String(e.key).toLowerCase() === "k") {
                                 e.preventDefault();
                                 openLinkEditor();
                                 return;
@@ -6076,6 +6179,31 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             window.addEventListener("mouseup", onUp);
                         }, onContextMenu: (e) => {
                             const target = e.target;
+                            const contextItems = pluginRuntime.contextMenu.filter((item) => {
+                                try {
+                                    return isPluginContributionVisible(item) && (!item.when || item.when({
+                                        root: e.currentTarget,
+                                        target,
+                                        selection: window.getSelection(),
+                                    }));
+                                }
+                                catch {
+                                    return false;
+                                }
+                            });
+                            if (contextItems.length) {
+                                e.preventDefault();
+                                preserveEditorSelection();
+                                setPluginContextMenu({
+                                    x: Math.max(8, Math.min(e.clientX, window.innerWidth - 228)),
+                                    y: Math.max(8, Math.min(e.clientY, window.innerHeight - 48 - contextItems.length * 36)),
+                                    items: contextItems,
+                                });
+                                setImageMenu(null);
+                                setTableMenu(null);
+                                return;
+                            }
+                            setPluginContextMenu(null);
                             if (target && target.tagName === "IMG") {
                                 e.preventDefault();
                                 const vw = window.innerWidth;
@@ -6103,55 +6231,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                 setTableMenu(null);
                                 setImageMenu(null);
                             }
-                        } }), dragHandle && !readOnly && (_jsx("button", { type: "button", draggable: true, "data-srte-drag-handle": "true", title: "Drag block", "aria-label": "Drag block", onMouseEnter: () => {
-                            if (dragHandleHideTimerRef.current != null) {
-                                window.clearTimeout(dragHandleHideTimerRef.current);
-                                dragHandleHideTimerRef.current = null;
-                            }
-                        }, onMouseLeave: () => {
-                            if (!draggedBlockRef.current)
-                                scheduleDragHandleHide();
-                        }, onMouseDown: (e) => {
-                            e.stopPropagation();
-                        }, onDragStart: (e) => {
-                            draggedBlockRef.current = dragHandle.target;
-                            e.dataTransfer.effectAllowed = "move";
-                            e.dataTransfer.setData("text/plain", "moving-block");
-                            try {
-                                const ghost = dragHandle.target.cloneNode(true);
-                                ghost.style.position = "fixed";
-                                ghost.style.left = "-10000px";
-                                ghost.style.top = "-10000px";
-                                ghost.style.width = `${Math.min(dragHandle.target.getBoundingClientRect().width, 480)}px`;
-                                ghost.style.opacity = "0.75";
-                                document.body.appendChild(ghost);
-                                e.dataTransfer.setDragImage(ghost, 12, 12);
-                                window.setTimeout(() => ghost.remove(), 0);
-                            }
-                            catch { }
-                        }, onDragEnd: () => {
-                            draggedBlockRef.current = null;
-                            updateDragHandleForTarget(dragHandle.target);
-                        }, style: {
-                            position: "absolute",
-                            left: dragHandle.left,
-                            top: dragHandle.top + Math.max(0, (dragHandle.height - 24) / 2),
-                            width: 24,
-                            height: 24,
-                            display: "inline-flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            border: "1px solid var(--srte-border)",
-                            borderRadius: 6,
-                            background: "var(--srte-input-bg)",
-                            color: "var(--srte-input-text)",
-                            boxShadow: "var(--srte-menu-shadow)",
-                            cursor: "grab",
-                            zIndex: 8,
-                            fontSize: 14,
-                            lineHeight: 1,
-                            padding: 0,
-                        }, children: "\u22EE\u22EE" })), selectedImage && imageOverlay && (_jsxs("div", { style: {
+                        } }), selectedImage && imageOverlay && (_jsxs("div", { style: {
                             position: "absolute",
                             left: imageOverlay.left,
                             top: imageOverlay.top,
@@ -6187,6 +6267,11 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                         window.removeEventListener("mousemove", onMove);
                                         window.removeEventListener("mouseup", onUp);
                                         resizingRef.current = null;
+                                        if (editableRef.current && selectedImage) {
+                                            editorControllerRef.current.bindRoot(editableRef.current).updateInlineImage(selectedImage, {
+                                                width: Math.max(1, Math.round(selectedImage.getBoundingClientRect().width)),
+                                            });
+                                        }
                                         handleInput();
                                     };
                                     window.addEventListener("mousemove", onMove);
@@ -6225,6 +6310,11 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                         window.removeEventListener("mousemove", onMove);
                                         window.removeEventListener("mouseup", onUp);
                                         resizingRef.current = null;
+                                        if (editableRef.current && selectedImage) {
+                                            editorControllerRef.current.bindRoot(editableRef.current).updateInlineImage(selectedImage, {
+                                                width: Math.max(1, Math.round(selectedImage.getBoundingClientRect().width)),
+                                            });
+                                        }
                                         handleInput();
                                     };
                                     window.addEventListener("mousemove", onMove);
@@ -6240,7 +6330,24 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                     borderRadius: 2,
                                     cursor: "ew-resize",
                                     pointerEvents: "auto",
-                                } })] }))] }), linkMenu && (_jsx(LinkEditorPopover, { x: linkMenu.x, y: linkMenu.y, initialHref: linkMenu.initialHref, initialText: linkMenu.initialText, initialOpenInNewTab: linkMenu.anchor?.target === "_blank", showTextInput: linkMenu.showTextInput, showOpen: Boolean(linkMenu.anchor), showRemove: Boolean(linkMenu.anchor), onApply: applyLinkEditorValue, onOpen: linkMenu.anchor ? () => {
+                                } })] }))] }), pluginContextMenu && (_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 70 }, onMouseDown: () => setPluginContextMenu(null), onContextMenu: (event) => {
+                    event.preventDefault();
+                    setPluginContextMenu(null);
+                }, children: _jsx("div", { role: "menu", "aria-label": "Plugin actions", style: {
+                        position: "fixed",
+                        left: pluginContextMenu.x,
+                        top: pluginContextMenu.y,
+                        minWidth: 200,
+                        padding: 6,
+                        border: "1px solid var(--srte-border)",
+                        borderRadius: 8,
+                        background: "var(--srte-input-bg)",
+                        boxShadow: "var(--srte-menu-shadow)",
+                    }, onMouseDown: (event) => event.stopPropagation(), children: pluginContextMenu.items.map((item) => (_jsx("button", { type: "button", role: "menuitem", className: "srte-menu-item", disabled: !isPluginContributionEnabled(item), onClick: () => {
+                            restoreSavedSelection();
+                            executePluginCommand(item.commandId, item.input);
+                            setPluginContextMenu(null);
+                        }, children: _jsx("span", { children: item.label }) }, item.id))) }) })), linkMenu && (_jsx(LinkEditorPopover, { x: linkMenu.x, y: linkMenu.y, initialHref: linkMenu.initialHref, initialText: linkMenu.initialText, initialOpenInNewTab: linkMenu.anchor?.target === "_blank", showTextInput: linkMenu.showTextInput, showOpen: Boolean(linkMenu.anchor), showRemove: Boolean(linkMenu.anchor), onApply: applyLinkEditorValue, onOpen: linkMenu.anchor ? () => {
                     openEditorLink(linkMenu.anchor);
                     setLinkMenu(null);
                 } : undefined, onRemove: linkMenu.anchor ? () => removeAnchorLink(linkMenu.anchor) : undefined, onCancel: () => setLinkMenu(null) })), tableMenu && (_jsx("div", { style: {
@@ -6608,7 +6715,12 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                                 scheduleImageOverlay();
                                                 handleInput();
                                             }, children: "Reset" })] }), _jsxs("div", { style: { display: "flex", gap: 6 }, children: [_jsx("button", { style: { color: "var(--srte-danger)" }, onClick: () => {
-                                                imageMenu.img.remove();
+                                                pushEditorHistory();
+                                                const removedThroughCore = editableRef.current
+                                                    ? editorControllerRef.current.bindRoot(editableRef.current).deleteInlineAtom(imageMenu.img)
+                                                    : false;
+                                                if (!removedThroughCore)
+                                                    imageMenu.img.remove();
                                                 setImageMenu(null);
                                                 setSelectedImage(null);
                                                 setImageOverlay(null);