smartrte-react 0.3.0 → 0.3.2

package/dist/components/ClassicEditor.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { MediaManager } from "./MediaManager.js";
 import { LinkEditorPopover } from "./LinkEditorPopover.js";
@@ -12,6 +12,72 @@ 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';
+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" })] }),
+    "align-left": _jsx(_Fragment, { children: _jsx("path", { d: "M4 6h16M4 10h11M4 14h16M4 18h11" }) }),
+    "align-center": _jsx(_Fragment, { children: _jsx("path", { d: "M4 6h16M7 10h10M4 14h16M7 18h10" }) }),
+    "align-right": _jsx(_Fragment, { children: _jsx("path", { d: "M4 6h16M9 10h11M4 14h16M9 18h11" }) }),
+    justify: _jsx(_Fragment, { children: _jsx("path", { d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
+    move: _jsx(_Fragment, { children: _jsx("path", { d: "m8 7 4-4 4 4M12 3v18M8 17l4 4 4-4" }) }),
+    up: _jsx(_Fragment, { children: _jsx("path", { d: "m7 10 5-5 5 5M12 5v14" }) }),
+    down: _jsx(_Fragment, { children: _jsx("path", { d: "m7 14 5 5 5-5M12 19V5" }) }),
+    outdent: _jsx(_Fragment, { children: _jsx("path", { d: "M11 6h9M11 10h7M11 14h9M11 18h7M8 9l-3 3 3 3" }) }),
+    indent: _jsx(_Fragment, { children: _jsx("path", { d: "M11 6h9M11 10h7M11 14h9M11 18h7M4 9l3 3-3 3" }) }),
+    link: _jsxs(_Fragment, { children: [_jsx("path", { d: "M10 13a5 5 0 0 0 7.54.54l2-2a5 5 0 0 0-7.07-7.07l-1.15 1.15" }), _jsx("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-2 2a5 5 0 0 0 7.07 7.07l1.14-1.14" })] }),
+    quote: _jsx(_Fragment, { children: _jsx("path", { d: "M6 15h4V9H5v6a4 4 0 0 1-1 2.7M15 15h4V9h-5v6a4 4 0 0 1-1 2.7" }) }),
+    code: _jsx(_Fragment, { children: _jsx("path", { d: "m8 9-3 3 3 3M16 9l3 3-3 3M14 5l-4 14" }) }),
+    checklist: _jsx(_Fragment, { children: _jsx("path", { d: "m4 6 1.5 1.5L8 5M11 6h9M4 12l1.5 1.5L8 11M11 12h9M4 18l1.5 1.5L8 17M11 18h9" }) }),
+    bullets: _jsxs(_Fragment, { children: [_jsx("circle", { cx: "5", cy: "6", r: "1" }), _jsx("circle", { cx: "5", cy: "12", r: "1" }), _jsx("circle", { cx: "5", cy: "18", r: "1" }), _jsx("path", { d: "M9 6h11M9 12h11M9 18h11" })] }),
+    numbers: _jsx(_Fragment, { children: _jsx("path", { d: "M4 6h1V3.8L4 4.5M4 11h2l-2 2h2M4 17h2l-2 2h2M10 6h10M10 12h10M10 18h10" }) }),
+    image: _jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }), _jsx("circle", { cx: "8.5", cy: "9", r: "1.5" }), _jsx("path", { d: "m21 15-5-5L5 20" })] }),
+    media: _jsxs(_Fragment, { children: [_jsx("path", { d: "M4 7h6l2 2h8v10H4z" }), _jsx("path", { d: "M8 14h8M12 11v6" })] }),
+    table: _jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "1" }), _jsx("path", { d: "M3 10h18M9 4v16M15 4v16" })] }),
+    formula: _jsx(_Fragment, { children: _jsx("path", { d: "M18 5H8l5 7-5 7h10" }) }),
+    insert: _jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M12 8v8M8 12h8" })] }),
+    import: _jsx(_Fragment, { children: _jsx("path", { d: "M12 3v12M8 11l4 4 4-4M5 20h14" }) }),
+    export: _jsx(_Fragment, { children: _jsx("path", { d: "M12 16V4M8 8l4-4 4 4M5 20h14" }) }),
+    omega: _jsx(_Fragment, { children: _jsx("path", { d: "M7 19h4v-2a7 7 0 1 1 2 0v2h4" }) }),
+    more: _jsxs(_Fragment, { children: [_jsx("circle", { cx: "5", cy: "12", r: "1" }), _jsx("circle", { cx: "12", cy: "12", r: "1" }), _jsx("circle", { cx: "19", cy: "12", r: "1" })] }),
+    chevron: _jsx("path", { d: "m8 10 4 4 4-4" }),
+};
+function ToolbarIcon({ name, size = 16 }) {
+    return _jsx("svg", { "aria-hidden": "true", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: iconPaths[name] });
+}
+function ToolbarGroup({ label, priority, children }) {
+    return _jsx("div", { className: "srte-toolbar-group", role: "group", "aria-label": label, "data-srte-priority": priority || 1, children: children });
+}
+function ToolbarMenu({ label, icon, active, priority, children }) {
+    const menuRef = useRef(null);
+    useEffect(() => {
+        const closeOnOutsidePointer = (event) => {
+            if (menuRef.current?.open && !menuRef.current.contains(event.target))
+                menuRef.current.open = false;
+        };
+        document.addEventListener("pointerdown", closeOnOutsidePointer);
+        return () => document.removeEventListener("pointerdown", closeOnOutsidePointer);
+    }, []);
+    return (_jsxs("details", { ref: menuRef, className: "srte-toolbar-menu", "data-srte-priority": priority, onKeyDown: (event) => {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                menuRef.current?.removeAttribute("open");
+                menuRef.current?.querySelector("summary")?.focus();
+                return;
+            }
+            if (event.key !== "ArrowDown" && event.key !== "ArrowUp")
+                return;
+            const items = Array.from(menuRef.current?.querySelectorAll('[role="menuitem"]:not([disabled])') || []);
+            if (!items.length)
+                return;
+            event.preventDefault();
+            const currentIndex = items.indexOf(document.activeElement);
+            const direction = event.key === "ArrowDown" ? 1 : -1;
+            items[(currentIndex + direction + items.length) % items.length]?.focus();
+        }, children: [_jsxs("summary", { className: `srte-tool-button srte-menu-trigger${active ? " srte-active" : ""}`, "aria-label": label, title: label, children: [_jsx(ToolbarIcon, { name: icon }), _jsx(ToolbarIcon, { name: "chevron", size: 12 })] }), _jsx("div", { className: "srte-menu", role: "menu", "aria-label": label, children: 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();
@@ -254,12 +320,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 italic: queryState("italic"),
                 underline: queryState("underline"),
                 strikeThrough: queryState("strikeThrough"),
-                subscript: overrideApplies && scriptOverride?.command === "subscript"
-                    ? false
-                    : subscriptActive,
-                superscript: overrideApplies && scriptOverride?.command === "superscript"
-                    ? false
-                    : superscriptActive,
+                subscript: overrideApplies ? scriptOverride?.command === "subscript" : subscriptActive,
+                superscript: overrideApplies ? scriptOverride?.command === "superscript" : superscriptActive,
                 checklist: Boolean(element?.closest('[data-srte-checklist="true"]')),
                 unorderedList: Boolean(element?.closest("ul:not([data-srte-checklist=\"true\"])")),
                 orderedList: Boolean(element?.closest("ol")),
@@ -398,55 +460,121 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             const range = getSelectionRangeInEditor();
             if (!editor || !range)
                 return;
-            const tagName = command === "subscript" ? "sub" : "sup";
-            const script = range.collapsed
-                ? getScriptAncestor(range.startContainer, tagName)
-                : null;
-            if (range.collapsed && document.queryCommandState(command)) {
-                document.execCommand(command, false);
-                const currentRange = getSelectionRangeInEditor();
-                savedRangeRef.current = currentRange?.cloneRange() || null;
-                inlineScriptCaretOverrideRef.current = currentRange?.collapsed
-                    ? {
-                        command,
-                        container: currentRange.startContainer,
-                        offset: currentRange.startOffset,
-                    }
-                    : null;
-                setActiveState((current) => ({
-                    ...current,
-                    subscript: command === "subscript" ? false : current.subscript,
-                    superscript: command === "superscript" ? false : current.superscript,
-                }));
-                handleInput();
-                requestAnimationFrame(updateActiveState);
-                return;
-            }
-            if (script) {
-                const nextRange = document.createRange();
-                nextRange.setStartAfter(script);
-                nextRange.collapse(true);
-                safeSelectRange(nextRange);
-                savedRangeRef.current = nextRange.cloneRange();
+            if (range.collapsed) {
+                const tagName = command === "subscript" ? "sub" : "sup";
+                const pending = inlineScriptCaretOverrideRef.current;
+                const pendingApplies = pending &&
+                    pending.container === range.startContainer && pending.offset === range.startOffset;
+                const active = pendingApplies
+                    ? pending.command === command
+                    : Boolean(getScriptAncestor(range.startContainer, tagName));
+                const nextCommand = active ? "normal" : command;
                 inlineScriptCaretOverrideRef.current = {
-                    command,
-                    container: nextRange.startContainer,
-                    offset: nextRange.startOffset,
+                    command: nextCommand,
+                    container: range.startContainer,
+                    offset: range.startOffset,
                 };
                 setActiveState((current) => ({
                     ...current,
-                    subscript: command === "subscript" ? false : current.subscript,
-                    superscript: command === "superscript" ? false : current.superscript,
+                    subscript: nextCommand === "subscript",
+                    superscript: nextCommand === "superscript",
                 }));
-                requestAnimationFrame(updateActiveState);
+                savedRangeRef.current = range.cloneRange();
                 return;
             }
             inlineScriptCaretOverrideRef.current = null;
-            exec(command);
+            pushEditorHistory();
+            const result = getCoreInlineMarkResult(editor, command);
+            if (result) {
+                editor.innerHTML = result.html;
+                ensureTableWrappers(editor);
+                addTableResizeHandles();
+                restoreSelectionToDom(editor, result.selectionAfter);
+                handleInput();
+            }
+            else {
+                exec(command);
+            }
             requestAnimationFrame(updateActiveState);
         }
         catch { }
     };
+    useEffect(() => {
+        const editor = editableRef.current;
+        if (!editor)
+            return;
+        const splitScriptAtRange = (script, range) => {
+            const rightRange = document.createRange();
+            rightRange.selectNodeContents(script);
+            rightRange.setStart(range.startContainer, range.startOffset);
+            const rightContent = rightRange.extractContents();
+            const rightScript = script.cloneNode(false);
+            rightScript.appendChild(rightContent);
+            script.parentNode?.insertBefore(rightScript, script.nextSibling);
+            const insertion = document.createRange();
+            insertion.setStartAfter(script);
+            insertion.collapse(true);
+            if (!script.textContent)
+                script.remove();
+            if (!rightScript.textContent)
+                rightScript.remove();
+            return insertion;
+        };
+        const applyPendingInlineScript = (event) => {
+            const pending = inlineScriptCaretOverrideRef.current;
+            if (!pending || event.inputType !== "insertText" || !event.data)
+                return;
+            const range = getSelectionRangeInEditor();
+            if (!range?.collapsed || range.startContainer !== pending.container || range.startOffset !== pending.offset)
+                return;
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            pushEditorHistory();
+            const currentScript = getScriptAncestor(range.startContainer, "sub") ||
+                getScriptAncestor(range.startContainer, "sup");
+            const desiredTag = pending.command === "normal"
+                ? null
+                : pending.command === "subscript" ? "sub" : "sup";
+            let insertion = range;
+            if (currentScript && currentScript.tagName.toLowerCase() !== desiredTag) {
+                insertion = splitScriptAtRange(currentScript, range);
+            }
+            const text = document.createTextNode(event.data);
+            let inserted = text;
+            if (desiredTag && currentScript?.tagName.toLowerCase() !== desiredTag) {
+                const script = document.createElement(desiredTag);
+                script.appendChild(text);
+                inserted = script;
+            }
+            const pendingSize = pendingFontSizeRef.current;
+            if (pendingSize) {
+                const span = document.createElement("span");
+                span.style.fontSize = `${pendingSize.valuePx}px`;
+                span.appendChild(inserted);
+                inserted = span;
+            }
+            insertion.insertNode(inserted);
+            const nextRange = document.createRange();
+            nextRange.setStartAfter(text);
+            nextRange.collapse(true);
+            safeSelectRange(nextRange);
+            inlineScriptCaretOverrideRef.current = {
+                command: pending.command,
+                container: nextRange.startContainer,
+                offset: nextRange.startOffset,
+            };
+            if (pendingSize)
+                pendingFontSizeRef.current = {
+                    valuePx: pendingSize.valuePx,
+                    container: nextRange.startContainer,
+                    offset: nextRange.startOffset,
+                };
+            savedRangeRef.current = nextRange.cloneRange();
+            handleInput();
+        };
+        editor.addEventListener("beforeinput", applyPendingInlineScript);
+        return () => editor.removeEventListener("beforeinput", applyPendingInlineScript);
+    }, []);
     const applyFormatBlock = (blockName) => {
         try {
             if (!restoreSavedSelection()) {
@@ -785,19 +913,28 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const current = getCurrentBlock();
         return current ? [current] : [];
     };
-    const getSelectedListItems = (blocks) => {
-        const seen = new Set();
-        const items = [];
-        blocks.forEach((block) => {
-            const li = block.tagName.toLowerCase() === "li"
-                ? block
-                : block.closest("li");
-            if (li && editableRef.current?.contains(li) && !seen.has(li)) {
-                seen.add(li);
-                items.push(li);
+    const resolveSelectedListItems = (range) => {
+        const editor = editableRef.current;
+        if (!editor)
+            return [];
+        if (range.collapsed) {
+            const element = range.startContainer instanceof HTMLElement
+                ? range.startContainer
+                : range.startContainer.parentElement;
+            const item = element?.closest("li");
+            return item && editor.contains(item) ? [item] : [];
+        }
+        const ownsSelectedContent = (item) => Array.from(item.childNodes).some((node) => {
+            if (node instanceof HTMLElement && (node.matches("ul,ol") || node.dataset.srteCheck === "true"))
+                return false;
+            try {
+                return range.intersectsNode(node);
+            }
+            catch {
+                return false;
             }
         });
-        return items;
+        return sortInDocumentOrder(Array.from(editor.querySelectorAll("li")).filter(ownsSelectedContent));
     };
     const getAlignmentTarget = (block) => {
         const item = block.tagName === "LI" ? block : block.closest("li");
@@ -1023,6 +1160,49 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         Array.from(list.attributes).forEach((attr) => clone.setAttribute(attr.name, attr.value));
         return clone;
     };
+    const listItemContentSelector = "p,h1,h2,h3,h4,h5,h6,blockquote,pre";
+    const createListItemFromBlock = (block) => {
+        const item = document.createElement("li");
+        item.style.textAlign = block.style.textAlign;
+        item.appendChild(block);
+        return item;
+    };
+    const extractListItemContent = (item) => {
+        item.querySelectorAll(':scope > [data-srte-check]').forEach((control) => control.remove());
+        const output = [];
+        let inlineParagraph = null;
+        const flushInlineParagraph = () => {
+            if (!inlineParagraph)
+                return;
+            if (!inlineParagraph.childNodes.length)
+                inlineParagraph.innerHTML = "<br>";
+            output.push(inlineParagraph);
+            inlineParagraph = null;
+        };
+        Array.from(item.childNodes).forEach((node) => {
+            if (node instanceof HTMLElement && node.matches(listItemContentSelector)) {
+                flushInlineParagraph();
+                output.push(node);
+                return;
+            }
+            if (node instanceof HTMLElement && node.matches("ul,ol")) {
+                flushInlineParagraph();
+                output.push(node);
+                return;
+            }
+            inlineParagraph || (inlineParagraph = document.createElement("p"));
+            inlineParagraph.appendChild(node);
+        });
+        flushInlineParagraph();
+        if (item.style.textAlign) {
+            output.forEach((node) => {
+                if (node instanceof HTMLElement && node.matches(listItemContentSelector) && !node.style.textAlign) {
+                    node.style.textAlign = item.style.textAlign;
+                }
+            });
+        }
+        return output;
+    };
     const mergeAdjacentCompatibleLists = (list) => {
         const isCompatible = (candidate) => candidate instanceof HTMLElement &&
             candidate.tagName === list.tagName &&
@@ -1056,6 +1236,40 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             }
         });
     };
+    const syncChecklistItemControl = (item, strikeCompleted) => {
+        const legacyCheckbox = item.querySelector(':scope > input[data-srte-check]');
+        const checked = item.dataset.checked === "true" || Boolean(legacyCheckbox?.checked);
+        const controls = Array.from(item.querySelectorAll(':scope > [data-srte-check]'));
+        let control = controls.find((candidate) => candidate.tagName === "BUTTON");
+        controls.forEach((candidate) => {
+            if (candidate !== control)
+                candidate.remove();
+        });
+        if (!control) {
+            control = document.createElement("button");
+            control.type = "button";
+            control.dataset.srteCheck = "true";
+            control.contentEditable = "false";
+            control.tabIndex = -1;
+            control.style.cssText = "border:0;padding:0;background:transparent;color:inherit;font:inherit;cursor:pointer";
+            item.prepend(control);
+        }
+        item.dataset.checked = checked ? "true" : "false";
+        control.dataset.checked = checked ? "true" : "false";
+        control.setAttribute("aria-pressed", checked ? "true" : "false");
+        control.setAttribute("aria-label", checked ? "Mark incomplete" : "Mark complete");
+        control.textContent = "";
+        item.style.textDecoration = strikeCompleted && checked ? "line-through" : "";
+    };
+    const syncChecklistControls = (root) => {
+        root.querySelectorAll('ul[data-srte-checklist="true"]').forEach((list) => {
+            const strikeCompleted = list.dataset.srteChecklistStrike === "true";
+            Array.from(list.children).forEach((item) => {
+                if (item instanceof HTMLElement && item.tagName === "LI")
+                    syncChecklistItemControl(item, strikeCompleted);
+            });
+        });
+    };
     const decorateChecklist = (list, strikeCompleted) => {
         list.dataset.srteChecklist = "true";
         list.dataset.srteChecklistStrike = strikeCompleted ? "true" : "false";
@@ -1064,20 +1278,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         Array.from(list.children).forEach((item) => {
             if (!(item instanceof HTMLElement) || item.tagName !== "LI")
                 return;
-            const legacyCheckbox = item.querySelector(':scope > input[data-srte-check]');
-            const checked = item.dataset.checked === "true" || Boolean(legacyCheckbox?.checked);
-            item.querySelectorAll(':scope > [data-srte-check]').forEach((control) => control.remove());
-            item.dataset.checked = checked ? "true" : "false";
-            const control = document.createElement("button");
-            control.type = "button";
-            control.dataset.srteCheck = "true";
-            control.contentEditable = "false";
-            control.tabIndex = -1;
-            control.setAttribute("aria-label", checked ? "Mark incomplete" : "Mark complete");
-            control.textContent = checked ? "☑" : "☐";
-            control.style.cssText = "margin-inline:-1.45em .45em;border:0;padding:0;background:transparent;color:inherit;font:inherit;cursor:pointer";
-            item.prepend(control);
-            item.style.textDecoration = strikeCompleted && checked ? "line-through" : "";
+            syncChecklistItemControl(item, strikeCompleted);
         });
         return mergeAdjacentCompatibleLists(list);
     };
@@ -1105,9 +1306,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const parent = list.parentElement;
         if (!parent)
             return;
-        const paragraph = document.createElement("p");
-        paragraph.innerHTML = li.innerHTML || "<br>";
-        paragraph.style.textAlign = li.style.textAlign;
+        const content = extractListItemContent(li);
         const beforeList = cloneListShell(list);
         const afterList = cloneListShell(list);
         while (list.firstChild && list.firstChild !== li) {
@@ -1118,13 +1317,14 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         }
         if (beforeList.childNodes.length)
             parent.insertBefore(beforeList, list);
-        parent.insertBefore(paragraph, list);
+        content.forEach((node) => parent.insertBefore(node, list));
         if (afterList.childNodes.length)
             parent.insertBefore(afterList, list);
         li.remove();
         if (!list.querySelector("li"))
             list.remove();
-        focusElementEnd(paragraph);
+        const focusTarget = [...content].reverse().find((node) => node instanceof HTMLElement);
+        focusElementEnd(focusTarget || parent);
     };
     const convertListTag = (list, listTag) => {
         const replacement = cloneListShell(list, listTag);
@@ -1133,69 +1333,149 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const li = replacement.querySelector("li");
         focusElementEnd(li || replacement);
     };
-    const getOrCreateNestedList = (li, listTag) => {
-        let nested = Array.from(li.children).find((child) => {
-            const tag = child.tagName.toLowerCase();
-            return tag === "ul" || tag === "ol";
+    const getOrCreateNestedList = (item, source) => {
+        const compatible = Array.from(item.children).find((child) => child instanceof HTMLElement &&
+            ["UL", "OL"].includes(child.tagName) &&
+            child.tagName === source.tagName &&
+            child.style.listStyleType === source.style.listStyleType &&
+            child.dataset.srteChecklist === source.dataset.srteChecklist &&
+            child.dataset.srteChecklistStrike === source.dataset.srteChecklistStrike);
+        if (compatible)
+            return compatible;
+        const nested = cloneListShell(source);
+        item.appendChild(nested);
+        return nested;
+    };
+    const normalizeListItemStructure = (item) => {
+        if (!item || item.tagName !== "LI")
+            return;
+        Array.from(item.children)
+            .filter((child) => child instanceof HTMLElement && ["UL", "OL"].includes(child.tagName))
+            .forEach((list) => {
+            if (!list.querySelector(":scope > li"))
+                list.remove();
+            else
+                item.appendChild(list);
         });
-        if (nested && nested.tagName.toLowerCase() !== listTag) {
-            const replacement = cloneListShell(nested, listTag);
-            replacement.innerHTML = nested.innerHTML;
-            nested.parentElement?.replaceChild(replacement, nested);
-            nested = replacement;
+    };
+    const captureRangeForListMove = () => {
+        const range = getSelectionRangeInEditor();
+        return range ? {
+            startContainer: range.startContainer,
+            startOffset: range.startOffset,
+            endContainer: range.endContainer,
+            endOffset: range.endOffset,
+        } : null;
+    };
+    const restoreRangeAfterListMove = (snapshot) => {
+        const editor = editableRef.current;
+        if (!snapshot || !editor || !editor.contains(snapshot.startContainer) || !editor.contains(snapshot.endContainer))
+            return false;
+        try {
+            const range = document.createRange();
+            range.setStart(snapshot.startContainer, snapshot.startOffset);
+            range.setEnd(snapshot.endContainer, snapshot.endOffset);
+            safeSelectRange(range);
+            savedRangeRef.current = range.cloneRange();
+            return true;
         }
-        if (!nested) {
-            nested = document.createElement(listTag);
-            li.appendChild(nested);
+        catch {
+            return false;
         }
-        return nested;
     };
-    const nestSelectedListItems = (items, listTag) => {
+    const nestSelectedListItems = (items) => {
+        if (items.length === 0)
+            return false;
+        const savedRange = captureRangeForListMove();
+        const selected = new Set(items);
+        const sourceLists = Array.from(new Set(items.map((item) => item.parentElement)));
+        let changed = false;
+        let lastMoved = null;
+        sourceLists.forEach((source) => {
+            if (!source || !["UL", "OL"].includes(source.tagName))
+                return;
+            const sourceItems = Array.from(source.children).filter((child) => child instanceof HTMLElement && child.tagName === "LI");
+            const runs = [];
+            sourceItems.forEach((item) => {
+                if (!selected.has(item))
+                    return;
+                const currentRun = runs[runs.length - 1];
+                const previousIndex = currentRun ? sourceItems.indexOf(currentRun[currentRun.length - 1]) : -2;
+                const itemIndex = sourceItems.indexOf(item);
+                if (!currentRun || itemIndex !== previousIndex + 1)
+                    runs.push([item]);
+                else
+                    currentRun.push(item);
+            });
+            runs.forEach((run) => {
+                const previous = run[0].previousElementSibling;
+                if (!previous || previous.tagName !== "LI" || selected.has(previous))
+                    return;
+                const target = getOrCreateNestedList(previous, source);
+                run.forEach((item) => {
+                    target.appendChild(item);
+                    lastMoved = item;
+                    changed = true;
+                });
+                normalizeListItemStructure(previous);
+            });
+        });
+        if (changed && !restoreRangeAfterListMove(savedRange) && lastMoved)
+            focusElementEnd(lastMoved);
+        return changed;
+    };
+    const outdentSelectedListItems = (items) => {
         if (items.length === 0)
             return false;
+        const savedRange = captureRangeForListMove();
+        const sourceLists = Array.from(new Set(items.map((item) => item.parentElement)));
+        const selected = new Set(items);
         let changed = false;
-        let lastTargetList = null;
-        items.forEach((li) => {
-            const previous = li.previousElementSibling;
-            if (!previous || previous.tagName.toLowerCase() !== "li")
+        let lastMoved = null;
+        sourceLists.forEach((source) => {
+            const parentItem = source?.parentElement;
+            const outerList = parentItem?.parentElement;
+            if (!source || parentItem?.tagName !== "LI" || !outerList || !["UL", "OL"].includes(outerList.tagName))
                 return;
-            const targetList = getOrCreateNestedList(previous, listTag);
-            targetList.appendChild(li);
-            lastTargetList = targetList;
-            changed = true;
+            const moving = Array.from(source.children).filter((child) => child instanceof HTMLElement && child.tagName === "LI" && selected.has(child));
+            let insertionPoint = parentItem.nextSibling;
+            moving.forEach((item) => {
+                outerList.insertBefore(item, insertionPoint);
+                lastMoved = item;
+                changed = true;
+            });
+            if (!source.querySelector(":scope > li"))
+                source.remove();
+            normalizeListItemStructure(parentItem);
         });
-        if (changed) {
-            const lastItem = lastTargetList?.lastElementChild;
-            if (lastItem)
-                focusElementEnd(lastItem);
-        }
+        if (changed && !restoreRangeAfterListMove(savedRange) && lastMoved)
+            focusElementEnd(lastMoved);
         return changed;
     };
-    const nestListSelection = () => {
-        const editor = editableRef.current;
-        if (!editor)
-            return;
-        if (!restoreSavedSelection())
-            safeSelectRange(getSelectionRangeInEditor());
-        const range = getSelectionRangeInEditor();
-        if (!range || range.collapsed)
-            return;
-        const items = sortInDocumentOrder(getSelectedListItems(getSelectedBlocks(range)));
-        const firstList = items[0]?.parentElement;
-        if (items.length === 0 ||
-            !firstList ||
-            !["ul", "ol"].includes(firstList.tagName.toLowerCase())) {
-            return;
-        }
-        const listTag = firstList.tagName.toLowerCase();
-        const directItems = items.filter((item) => item.parentElement === firstList);
-        if (directItems.length === 0 || !directItems[0].previousElementSibling)
-            return;
+    const canIndentListItems = (items) => {
+        const selected = new Set(items);
+        return items.some((item) => {
+            const previous = item.previousElementSibling;
+            return previous instanceof HTMLElement && previous.tagName === "LI" && !selected.has(previous);
+        });
+    };
+    const canOutdentListItems = (items) => items.some((item) => {
+        const list = item.parentElement;
+        return list?.parentElement?.tagName === "LI" && ["UL", "OL"].includes(list.parentElement.parentElement?.tagName || "");
+    });
+    const applyListDepthChange = (items, direction) => {
+        const enabled = direction === "indent" ? canIndentListItems(items) : canOutdentListItems(items);
+        if (!enabled)
+            return false;
         pushEditorHistory();
-        if (nestSelectedListItems(directItems, listTag)) {
+        const changed = direction === "indent"
+            ? nestSelectedListItems(items)
+            : outdentSelectedListItems(items);
+        if (changed) {
             handleInput();
             requestAnimationFrame(updateActiveState);
         }
+        return changed;
     };
     const restyleSelectedListItems = (items, listTag, styleType) => {
         const editor = editableRef.current;
@@ -1241,6 +1521,66 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         });
         return lastSelected;
     };
+    const getDirectSelectionCell = (range) => {
+        const startCell = getClosestCell(range.startContainer);
+        const endCell = getClosestCell(range.endContainer);
+        if (!startCell || startCell !== endCell)
+            return null;
+        const contentBlock = (node) => {
+            const element = node instanceof HTMLElement ? node : node.parentElement;
+            const block = element?.closest(listItemContentSelector);
+            return block && startCell.contains(block) ? block : null;
+        };
+        return contentBlock(range.startContainer) || contentBlock(range.endContainer)
+            ? null
+            : startCell;
+    };
+    const convertDirectTableCellSelectionToList = (range, listTag) => {
+        const cell = getDirectSelectionCell(range);
+        if (!cell || range.collapsed)
+            return null;
+        const fragment = range.extractContents();
+        const parts = [document.createDocumentFragment()];
+        Array.from(fragment.childNodes).forEach((node) => {
+            if (node instanceof HTMLBRElement)
+                parts.push(document.createDocumentFragment());
+            else
+                parts[parts.length - 1].appendChild(node);
+        });
+        const nonEmptyParts = parts.filter((part) => part.textContent?.trim() || part.childNodes.length > 0);
+        if (nonEmptyParts.length === 0) {
+            range.insertNode(fragment);
+            return null;
+        }
+        const list = document.createElement(listTag);
+        nonEmptyParts.forEach((part) => {
+            const paragraph = document.createElement("p");
+            paragraph.appendChild(part);
+            if (!paragraph.innerHTML.trim())
+                paragraph.innerHTML = "<br>";
+            list.appendChild(createListItemFromBlock(paragraph));
+        });
+        range.insertNode(list);
+        const lastItem = list.lastElementChild;
+        if (lastItem)
+            focusElementEnd(lastItem);
+        return list;
+    };
+    const convertDirectTableCellContentsToList = (cell, listTag) => {
+        const range = document.createRange();
+        range.selectNodeContents(cell);
+        if (!cell.textContent?.trim() && !cell.querySelector("img,br")) {
+            const list = document.createElement(listTag);
+            const paragraph = document.createElement("p");
+            paragraph.innerHTML = "<br>";
+            const item = createListItemFromBlock(paragraph);
+            list.appendChild(item);
+            cell.replaceChildren(list);
+            focusElementEnd(item);
+            return list;
+        }
+        return convertDirectTableCellSelectionToList(range, listTag);
+    };
     const applyListStyle = (value) => {
         const listTag = value.startsWith("ordered:") ? "ol" : "ul";
         const styleType = value.replace(/^(ordered|bullet):/, "");
@@ -1249,8 +1589,29 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const range = getSelectionRangeInEditor();
         if (!range)
             return;
+        const currentBlock = range.collapsed ? getCurrentBlock() : null;
+        if (currentBlock && ["TD", "TH"].includes(currentBlock.tagName)) {
+            pushEditorHistory();
+            const list = convertDirectTableCellContentsToList(currentBlock, listTag);
+            if (list) {
+                list.style.listStyleType = styleType;
+                handleInput();
+                requestAnimationFrame(updateActiveState);
+            }
+            return;
+        }
+        if (!range.collapsed && getDirectSelectionCell(range)) {
+            pushEditorHistory();
+            const list = convertDirectTableCellSelectionToList(range, listTag);
+            if (list) {
+                list.style.listStyleType = styleType;
+                handleInput();
+                requestAnimationFrame(updateActiveState);
+            }
+            return;
+        }
         const selectedBlocks = getSelectedBlocks(range);
-        const selectedItems = getSelectedListItems(selectedBlocks);
+        const selectedItems = resolveSelectedListItems(range);
         const selectedPlainBlocks = selectedBlocks.filter((block) => !block.closest("ul,ol"));
         if (selectedItems.length > 0) {
             pushEditorHistory();
@@ -1263,7 +1624,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             return;
         }
         const lists = new Set();
-        getSelectedListItems(getSelectedBlocks(range)).forEach((item) => {
+        resolveSelectedListItems(range).forEach((item) => {
             const list = item.parentElement;
             if (list &&
                 ["ul", "ol"].includes(list.tagName.toLowerCase())) {
@@ -1350,7 +1711,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const range = getSelectionRangeInEditor();
         if (!range)
             return;
-        const selectedItems = getSelectedListItems(getSelectedBlocks(range));
+        const selectedItems = resolveSelectedListItems(range);
         const selectedChecklists = selectedItems.filter((item) => item.parentElement?.dataset.srteChecklist === "true");
         if (toggleOff && selectedItems.length > 0 && selectedChecklists.length === selectedItems.length) {
             pushEditorHistory();
@@ -1398,7 +1759,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const selected = blocks.filter((block) => {
             if (!editor.contains(block))
                 return false;
-            if (block.tagName.toLowerCase() === "li")
+            if (["li", "td", "th"].includes(block.tagName.toLowerCase()))
                 return false;
             if (block.closest("ul,ol"))
                 return false;
@@ -1426,11 +1787,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 list.style.listStyleType = styleType;
             parent.insertBefore(list, group[0]);
             group.forEach((block) => {
-                const li = document.createElement("li");
-                li.innerHTML = block.innerHTML || "<br>";
-                li.style.textAlign = block.style.textAlign;
+                const li = createListItemFromBlock(block);
                 list.appendChild(li);
-                block.remove();
                 lastLi = li;
             });
             mergeAdjacentCompatibleLists(list);
@@ -1439,42 +1797,6 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             focusElementEnd(lastLi);
         return true;
     };
-    const convertTableCellSelectionToList = (range, listTag) => {
-        if (range.collapsed)
-            return false;
-        const startCell = getClosestCell(range.startContainer);
-        const endCell = getClosestCell(range.endContainer);
-        if (!startCell || startCell !== endCell)
-            return false;
-        const fragment = range.extractContents();
-        const parts = [document.createDocumentFragment()];
-        Array.from(fragment.childNodes).forEach((node) => {
-            if (node instanceof HTMLBRElement) {
-                parts.push(document.createDocumentFragment());
-            }
-            else {
-                parts[parts.length - 1].appendChild(node);
-            }
-        });
-        const nonEmptyParts = parts.filter((part) => part.textContent?.trim() || part.childNodes.length > 0);
-        if (nonEmptyParts.length === 0) {
-            range.insertNode(fragment);
-            return false;
-        }
-        const list = document.createElement(listTag);
-        nonEmptyParts.forEach((part) => {
-            const item = document.createElement("li");
-            item.appendChild(part);
-            if (!item.innerHTML.trim())
-                item.innerHTML = "<br>";
-            list.appendChild(item);
-        });
-        range.insertNode(list);
-        const lastItem = list.lastElementChild;
-        if (lastItem)
-            focusElementEnd(lastItem);
-        return true;
-    };
     const convertRootLineSelectionToList = (range, listTag) => {
         const editor = editableRef.current;
         if (!editor || range.collapsed)
@@ -1582,11 +1904,9 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 const isSelected = selected.has(child);
                 if (isSelected && toggleOff) {
                     flushPendingList();
-                    const paragraph = document.createElement("p");
-                    paragraph.innerHTML = child.innerHTML || "<br>";
-                    paragraph.style.textAlign = child.style.textAlign;
-                    parent.insertBefore(paragraph, list);
-                    lastTarget = paragraph;
+                    const content = extractListItemContent(child);
+                    content.forEach((node) => parent.insertBefore(node, list));
+                    lastTarget = [...content].reverse().find((node) => node instanceof HTMLElement) || parent;
                     child.remove();
                     changed = true;
                     return;
@@ -1624,8 +1944,17 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         };
         const range = getSelectionRangeInEditor();
         if (range && !range.collapsed) {
+            if (getDirectSelectionCell(range)) {
+                pushEditorHistory();
+                if (convertDirectTableCellSelectionToList(range, listTag)) {
+                    setListActiveState(true);
+                    handleInput();
+                    requestAnimationFrame(updateActiveState);
+                }
+                return;
+            }
             const blocks = getSelectedBlocks(range);
-            const selectedListItems = getSelectedListItems(blocks);
+            const selectedListItems = resolveSelectedListItems(range);
             if (selectedListItems.length > 0) {
                 pushEditorHistory();
                 if (transformSelectedListItems(selectedListItems, listTag)) {
@@ -1652,12 +1981,6 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     requestAnimationFrame(updateActiveState);
                     return;
                 }
-                if (convertTableCellSelectionToList(range, listTag)) {
-                    setListActiveState(true);
-                    handleInput();
-                    requestAnimationFrame(updateActiveState);
-                    return;
-                }
             }
         }
         const block = getCurrentBlock();
@@ -1687,12 +2010,24 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             requestAnimationFrame(updateActiveState);
             return;
         }
+        if (["TD", "TH"].includes(block.tagName)) {
+            pushEditorHistory();
+            if (convertDirectTableCellContentsToList(block, listTag)) {
+                setListActiveState(true);
+                handleInput();
+                requestAnimationFrame(updateActiveState);
+            }
+            return;
+        }
         pushEditorHistory();
+        const parent = block.parentElement;
+        if (!parent)
+            return;
+        const nextSibling = block.nextSibling;
         const list = document.createElement(listTag);
-        const li = document.createElement("li");
-        li.innerHTML = block.innerHTML || "<br>";
+        const li = createListItemFromBlock(block);
         list.appendChild(li);
-        block.parentElement?.replaceChild(list, block);
+        parent.insertBefore(list, nextSibling);
         focusElementEnd(li);
         setListActiveState(true);
         handleInput();
@@ -1769,7 +2104,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     }
                     return merged;
                 };
-                const selectedItems = new Set(getSelectedListItems(selected));
+                const selectedItems = new Set(resolveSelectedListItems(range));
                 const sourceLists = Array.from(new Set(Array.from(selectedItems, (item) => item.parentElement)));
                 let lastWrapped = null;
                 sourceLists.forEach((source) => {
@@ -1880,7 +2215,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 : getSelectedBlocks(range)).filter((block) => editor.contains(block));
             if (blocks.length === 0)
                 return;
-            const listItems = getSelectedListItems(blocks);
+            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]");
             const allTargetsActive = listItems.every((item) => Boolean(getItemCode(item))) &&
@@ -2514,15 +2849,16 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             const host = editableRef.current;
             if (!host)
                 return;
-            host.focus();
+            restoreSavedSelection();
             let sel = window.getSelection();
-            let range = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
+            let range = sel && sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;
             if (!range || !host.contains(range.commonAncestorContainer)) {
                 range = document.createRange();
                 range.selectNodeContents(host);
                 range.collapse(false);
                 safeSelectRange(range);
             }
+            pushEditorHistory();
             const span = document.createElement("span");
             span.setAttribute("data-formula", tex);
             try {
@@ -3778,6 +4114,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         ensureCaretBoundaryParagraphs(el);
         // Add resize handles to tables
         addTableResizeHandles();
+        // Native Enter creates new list items; keep checklist controls in sync.
+        syncChecklistControls(el);
         if (!onChange)
             return;
         const html = el.innerHTML;
@@ -4630,22 +4968,6 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         }
         return getTopLevelMovableElement();
     };
-    const outdentListItem = (item) => {
-        const list = item.parentElement;
-        const parentItem = list?.parentElement;
-        const outerList = parentItem?.parentElement;
-        if (!list ||
-            !parentItem ||
-            parentItem.tagName.toLowerCase() !== "li" ||
-            !outerList ||
-            !["ul", "ol"].includes(outerList.tagName.toLowerCase())) {
-            return false;
-        }
-        outerList.insertBefore(item, parentItem.nextSibling);
-        if (!list.querySelector("li"))
-            list.remove();
-        return true;
-    };
     const elementSibling = (element, direction) => {
         let sibling = direction === "previous" ? element.previousSibling : element.nextSibling;
         while (sibling &&
@@ -4704,14 +5026,23 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         return true;
     };
     const moveCurrentElement = (direction) => {
+        restoreSavedSelection();
         const editor = editableRef.current;
+        const range = getSelectionRangeInEditor();
+        const selectedListItems = range ? resolveSelectedListItems(range) : [];
+        if (selectedListItems.length > 0 && (direction === "left" || direction === "right")) {
+            applyListDepthChange(selectedListItems, direction === "right" ? "indent" : "outdent");
+            return;
+        }
         if (moveSelectedBlocks(direction))
             return;
         let target = getMoveTarget();
         if (!editor || !target)
             return;
-        pushEditorHistory();
+        let historyPushed = false;
         if (target.tagName === "TD" || target.tagName === "TH") {
+            pushEditorHistory();
+            historyPushed = true;
             const cell = target;
             const paragraph = document.createElement("p");
             while (cell.firstChild)
@@ -4723,30 +5054,58 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             const list = target.parentElement;
             if (!list)
                 return;
+            let changed = false;
             if (direction === "up") {
                 const previous = elementSibling(target, "previous");
-                if (previous?.nodeName === "LI")
-                    list.insertBefore(target, previous);
+                if (previous?.nodeName !== "LI")
+                    return;
+                pushEditorHistory();
+                list.insertBefore(target, previous);
+                changed = true;
             }
             else if (direction === "down") {
                 const next = elementSibling(target, "next");
-                if (next?.nodeName === "LI")
-                    list.insertBefore(next, target);
+                if (next?.nodeName !== "LI")
+                    return;
+                pushEditorHistory();
+                list.insertBefore(next, target);
+                changed = true;
             }
             else if (direction === "right") {
-                nestSelectedListItems([target], list.tagName.toLowerCase());
+                if (!canIndentListItems([target]))
+                    return;
+                pushEditorHistory();
+                changed = nestSelectedListItems([target]);
             }
             else {
-                outdentListItem(target);
+                if (!canOutdentListItems([target]))
+                    return;
+                pushEditorHistory();
+                changed = outdentSelectedListItems([target]);
             }
+            if (!changed)
+                return;
+            if (direction === "up" || direction === "down")
+                focusElementEnd(target);
+            handleInput();
+            requestAnimationFrame(updateActiveState);
+            return;
         }
         else if (direction === "up") {
             const previous = elementSibling(target, "previous");
+            if (!previous)
+                return;
+            if (!historyPushed)
+                pushEditorHistory();
             if (previous)
                 target.parentElement?.insertBefore(target, previous);
         }
         else if (direction === "down") {
             const next = elementSibling(target, "next");
+            if (!next)
+                return;
+            if (!historyPushed)
+                pushEditorHistory();
             if (next)
                 target.parentElement?.insertBefore(next, target);
         }
@@ -4755,6 +5114,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             const nextMargin = direction === "right"
                 ? Math.min(current + 24, 240)
                 : Math.max(current - 24, 0);
+            if (nextMargin === current)
+                return;
+            if (!historyPushed)
+                pushEditorHistory();
             target.style.marginLeft = nextMargin ? `${nextMargin}px` : "";
         }
         focusElementEnd(target);
@@ -4789,14 +5152,13 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const activeButtonStyle = (active = false, extra = {}) => ({
         height: 32,
         minWidth: 32,
-        padding: "0 8px",
-        border: active
-            ? "2px solid var(--srte-accent)"
-            : "1px solid var(--srte-input-border)",
-        borderRadius: 6,
-        background: active ? "var(--srte-accent-bg)" : "var(--srte-input-bg)",
-        color: "var(--srte-input-text)",
-        boxShadow: active ? "inset 0 0 0 1px var(--srte-accent)" : "none",
+        padding: "0 7px",
+        border: active ? "1px solid color-mix(in srgb, var(--srte-primary) 35%, transparent)" : "1px solid transparent",
+        borderRadius: 8,
+        background: active ? "var(--srte-accent-bg)" : "transparent",
+        color: active ? "var(--srte-primary)" : "var(--srte-foreground)",
+        boxShadow: "none",
+        cursor: "pointer",
         ...extra,
     });
     const preserveToolbarMouseDown = (event) => {
@@ -4810,16 +5172,16 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const editorClass = `srte-editor${theme === 'dark' ? ' srte-dark' : ''}${className ? ' ' + className : ''}`;
     return (_jsxs("div", { className: editorClass, style: {
             border: "1px solid var(--srte-border)",
-            borderRadius: 6,
+            borderRadius: "var(--srte-radius)",
             width: "100%",
             maxWidth: "100vw",
             overflow: "visible",
             display: "flex",
             flexDirection: "column",
-            background: "var(--srte-bg)",
-            color: "var(--srte-text)",
+            background: "var(--srte-background)",
+            color: "var(--srte-foreground)",
             boxSizing: "border-box"
-        }, children: [_jsxs("div", { "aria-disabled": readOnly, onMouseDown: (event) => {
+        }, children: [_jsxs("div", { className: "srte-toolbar", role: "toolbar", "aria-label": "Text formatting", "aria-disabled": readOnly, onMouseDown: (event) => {
                     if (readOnly) {
                         event.preventDefault();
                         event.stopPropagation();
@@ -4837,16 +5199,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     event.preventDefault();
                     event.stopPropagation();
                 }, style: {
-                    display: "flex",
-                    flexWrap: "wrap",
                     maxWidth: "100%",
-                    gap: 8,
-                    padding: 8,
-                    borderBottom: "1px solid var(--srte-border-light)",
-                    background: "var(--srte-toolbar-bg)",
-                    position: "sticky",
-                    top: 0,
-                    zIndex: 1,
                     opacity: readOnly ? 0.55 : 1,
                     pointerEvents: readOnly ? "none" : "auto",
                     userSelect: readOnly ? "none" : undefined,
@@ -4888,7 +5241,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         } }), _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("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" }) })] }), _jsxs("select", { value: currentBlockType, onPointerDown: preserveEditorSelection, onMouseDown: preserveEditorSelection, onChange: (e) => {
                             const val = e.target.value;
                             if (val === "p")
                                 applyFormatBlock("<p>");
@@ -4911,16 +5264,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: "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" })] }), [
-                        ["left", "Left", "Align left"],
-                        ["center", "Center", "Align center"],
-                        ["right", "Right", "Align right"],
-                        ["justify", "Justify", "Justify"],
-                    ].map(([alignment, label, title]) => (_jsx("button", { type: "button", title: title, "aria-label": title, "aria-pressed": currentAlignment === alignment, onPointerDown: preserveEditorSelection, onMouseDown: preserveEditorSelection, onClick: () => applyTextAlignment(alignment), style: activeButtonStyle(currentAlignment === alignment, {
-                            minWidth: 32,
-                            padding: "0 6px",
-                            fontSize: 10,
-                        }), children: label }, alignment))), _jsx("button", { title: "Bold", onClick: () => exec("bold"), "aria-pressed": activeState.bold, style: activeButtonStyle(activeState.bold), children: _jsx("span", { style: { fontWeight: 700 }, children: "B" }) }), _jsx("button", { title: "Italic", onClick: () => exec("italic"), "aria-pressed": activeState.italic, style: activeButtonStyle(activeState.italic, { fontStyle: "italic" }), children: "I" }), _jsx("button", { title: "Underline", onClick: () => exec("underline"), "aria-pressed": activeState.underline, style: activeButtonStyle(activeState.underline, { textDecoration: "underline" }), children: "U" }), _jsx("button", { 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: {
+                        }, 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)",
@@ -4944,7 +5288,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             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", { title: "Text Color", onClick: () => {
+                        }, 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", onClick: () => {
                             setColorPickerType('text');
                             setShowColorPicker(true);
                         }, style: {
@@ -4956,7 +5300,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             background: "var(--srte-input-bg)",
                             color: "var(--srte-input-text)",
                             position: "relative",
-                        }, children: _jsx("span", { style: { fontWeight: 700, borderBottom: "3px solid currentColor", lineHeight: 1 }, children: "A" }) }), _jsx("button", { title: "Background Color", onClick: () => {
+                        }, children: _jsx("span", { style: { fontWeight: 700, borderBottom: "3px solid currentColor", lineHeight: 1 }, children: "A" }) }), _jsx("button", { type: "button", className: "srte-tool-button", "aria-label": "Background color", title: "Background Color", onClick: () => {
                             setColorPickerType('background');
                             setShowColorPicker(true);
                         }, style: {
@@ -4967,10 +5311,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             borderRadius: 6,
                             background: "var(--srte-input-bg)",
                             color: "var(--srte-input-text)",
-                        }, children: _jsx("span", { style: { fontWeight: 700, padding: "1px 4px", background: "var(--srte-accent-bg)", borderRadius: 3 }, children: "A" }) }), _jsxs("button", { title: "Subscript", onClick: () => toggleInlineScript("subscript"), "aria-pressed": activeState.subscript, style: activeButtonStyle(activeState.subscript), children: ["X", _jsx("sub", { children: "2" })] }), _jsxs("button", { title: "Superscript", onClick: () => toggleInlineScript("superscript"), "aria-pressed": activeState.superscript, style: activeButtonStyle(activeState.superscript), children: ["X", _jsx("sup", { children: "2" })] }), [
+                        }, children: _jsx("span", { style: { fontWeight: 700, padding: "1px 4px", background: "var(--srte-accent-bg)", 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",
-                            label: "☐",
+                            icon: "checklist",
                             title: "Checklist",
                             active: activeState.checklist,
                             action: () => applyChecklist(false, true),
@@ -4978,7 +5322,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         },
                         {
                             key: "bullet",
-                            label: "•≡",
+                            icon: "bullets",
                             title: "Bulleted list",
                             active: activeState.unorderedList,
                             action: () => applyListStyle("bullet:disc"),
@@ -4986,13 +5330,13 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         },
                         {
                             key: "ordered",
-                            label: "1≡",
+                            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."]],
                         },
-                    ].map((control) => (_jsxs("span", { style: { display: "inline-flex", height: 32 }, children: [_jsx("button", { type: "button", title: control.title, onPointerDown: preserveEditorSelection, onClick: control.action, "aria-pressed": control.active, style: activeButtonStyle(control.active, { padding: "0 9px", borderRadius: "6px 0 0 6px" }), children: control.label }), _jsxs("select", { defaultValue: "", "aria-label": `${control.title} styles`, title: `${control.title} styles`, onPointerDown: preserveEditorSelection, onMouseDown: preserveEditorSelection, onChange: (event) => {
+                    ].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);
@@ -5001,200 +5345,62 @@ 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: () => {
+                                    selectedImage.style.display = "block";
+                                    selectedImage.style.margin = "0 auto";
+                                    selectedImage.style.float = "none";
+                                    scheduleImageOverlay();
+                                    handleInput();
+                                } }), _jsx(MenuItem, { icon: "align-left", label: "Float left", onClick: () => {
+                                    selectedImage.style.display = "inline";
+                                    selectedImage.style.float = "left";
+                                    selectedImage.style.margin = "0 8px 8px 0";
+                                    scheduleImageOverlay();
+                                    handleInput();
+                                } }), _jsx(MenuItem, { icon: "align-right", label: "Float right", onClick: () => {
+                                    selectedImage.style.display = "inline";
+                                    selectedImage.style.float = "right";
+                                    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) => {
+                                    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();
                                 }, style: {
-                                    width: 28,
                                     height: 32,
-                                    padding: 0,
-                                    border: "1px solid var(--srte-input-border)",
-                                    borderLeft: 0,
-                                    borderRadius: "0 6px 6px 0",
-                                    background: "var(--srte-input-bg)",
-                                    color: "var(--srte-input-text)",
-                                }, 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", title: "Blockquote", onPointerDown: preserveEditorSelection, onClick: toggleBlockquote, "aria-pressed": activeState.blockquote, style: activeButtonStyle(activeState.blockquote), children: "\u275D" }), _jsx("button", { title: "Special characters", onClick: () => setShowSpecialChars(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: "\u03A9" }), _jsx("button", { type: "button", title: "Code block", onPointerDown: preserveEditorSelection, onClick: toggleCodeBlock, "aria-pressed": activeState.codeBlock, style: activeButtonStyle(activeState.codeBlock, {
-                            minWidth: 36,
-                            fontFamily: "ui-monospace, SFMono-Regular, Menlo",
-                        }), children: "< />" }), formula && (_jsx("button", { title: "Insert formula", onClick: () => setShowFormulaDialog(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: "\u2211" })), _jsx("button", { type: "button", title: "Insert link", "aria-label": "Insert or edit link", "aria-pressed": activeState.link, onPointerDown: preserveEditorSelection, onClick: () => openLinkEditor(), style: activeButtonStyle(activeState.link, { minWidth: 34, fontSize: 17 }), children: _jsx("span", { "aria-hidden": "true", children: "\u2197" }) }), _jsx("button", { type: "button", title: "Remove link", "aria-label": "Remove link", disabled: !activeState.link, onPointerDown: preserveEditorSelection, onClick: () => exec("unlink"), style: {
-                            height: 32,
-                            minWidth: 34,
-                            padding: "0 8px",
-                            border: "1px solid var(--srte-input-border)",
-                            borderRadius: 6,
-                            background: "var(--srte-input-bg)",
-                            color: "var(--srte-input-text)",
-                            cursor: activeState.link ? "pointer" : "not-allowed",
-                            opacity: activeState.link ? 1 : 0.45,
-                            fontSize: 16,
-                        }, children: _jsx("span", { "aria-hidden": "true", children: "\u2197\u0338" }) }), media && (_jsxs(_Fragment, { children: [_jsx("button", { title: "Insert image", onClick: insertImage, style: {
-                                    height: 32,
-                                    padding: "0 10px",
-                                    border: "1px solid var(--srte-input-border)",
-                                    borderRadius: 6,
-                                    background: "var(--srte-input-bg)",
-                                    color: "var(--srte-input-text)",
-                                }, children: "\uD83D\uDDBC\uFE0F Image" }), mediaManager && (_jsx("button", { title: "Open media manager", onClick: () => setShowMediaManager(true), style: {
-                                    height: 32,
-                                    padding: "0 10px",
-                                    border: "1px solid var(--srte-input-border)",
-                                    borderRadius: 6,
-                                    background: "var(--srte-input-bg)",
-                                    color: "var(--srte-input-text)",
-                                }, children: "\uD83D\uDCC1 Media" })), _jsx("button", { title: "Import PDF", onClick: () => pdfInputRef.current?.click(), disabled: loadingPdf, style: {
-                                    height: 32,
-                                    padding: "0 10px",
-                                    border: "1px solid var(--srte-input-border)",
-                                    borderRadius: 6,
-                                    background: "var(--srte-input-bg)",
-                                    color: "var(--srte-input-text)",
-                                    opacity: loadingPdf ? 0.5 : 1,
-                                }, children: loadingPdf ? '⌛ Importing...' : '📄 PDF' }), _jsx("button", { title: "Import DOCX", onClick: () => docxInputRef.current?.click(), disabled: loadingDocx, style: {
-                                    height: 32,
-                                    padding: "0 10px",
-                                    border: "1px solid var(--srte-input-border)",
-                                    borderRadius: 6,
-                                    background: "var(--srte-input-bg)",
-                                    color: "var(--srte-input-text)",
-                                    opacity: loadingDocx ? 0.5 : 1,
-                                }, children: loadingDocx ? '⌛ Importing...' : '📝 DOCX' }), _jsx("button", { title: "Import HTML", onClick: () => htmlInputRef.current?.click(), style: {
-                                    height: 32,
-                                    padding: "0 10px",
-                                    border: "1px solid var(--srte-input-border)",
-                                    borderRadius: 6,
-                                    background: "var(--srte-input-bg)",
-                                    color: "var(--srte-input-text)",
-                                }, children: "HTML" }), _jsx("button", { title: "Import Markdown", onClick: () => mdInputRef.current?.click(), style: {
-                                    height: 32,
-                                    padding: "0 10px",
-                                    border: "1px solid var(--srte-input-border)",
-                                    borderRadius: 6,
-                                    background: "var(--srte-input-bg)",
-                                    color: "var(--srte-input-text)",
-                                }, children: "MD" }), _jsx("button", { title: "Export HTML", onClick: exportHtml, style: {
-                                    height: 32,
-                                    padding: "0 10px",
-                                    border: "1px solid var(--srte-input-border)",
-                                    borderRadius: 6,
-                                    background: "var(--srte-input-bg)",
-                                    color: "var(--srte-input-text)",
-                                }, children: "Export HTML" }), _jsx("button", { title: "Export Markdown", onClick: exportMarkdown, style: {
-                                    height: 32,
-                                    padding: "0 10px",
+                                    padding: "0 8px",
                                     border: "1px solid var(--srte-input-border)",
                                     borderRadius: 6,
                                     background: "var(--srte-input-bg)",
                                     color: "var(--srte-input-text)",
-                                }, children: "Export MD" }), _jsx("button", { title: "Export DOCX", onClick: exportDocx, style: {
-                                    height: 32,
-                                    padding: "0 10px",
-                                    border: "1px solid var(--srte-input-border)",
-                                    borderRadius: 6,
-                                    background: "var(--srte-input-bg)",
-                                    color: "var(--srte-input-text)",
-                                }, children: "Export DOCX" }), _jsx("button", { title: "Export PDF", onClick: exportPdf, style: {
+                                    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) => {
+                                    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();
+                                }, style: {
                                     height: 32,
-                                    padding: "0 10px",
+                                    padding: "0 8px",
                                     border: "1px solid var(--srte-input-border)",
                                     borderRadius: 6,
                                     background: "var(--srte-input-bg)",
                                     color: "var(--srte-input-text)",
-                                }, children: "Export PDF" }), _jsxs("div", { style: {
-                                    display: "inline-flex",
-                                    gap: 4,
-                                    alignItems: "center",
-                                    marginLeft: 6,
-                                }, children: [_jsx("span", { style: { fontSize: 12, opacity: 0.7 }, children: "Image align:" }), _jsx("button", { onClick: () => {
-                                            const img = selectedImage;
-                                            if (!img)
-                                                return;
-                                            img.style.display = "block";
-                                            img.style.margin = "0 auto";
-                                            img.style.float = "none";
-                                            scheduleImageOverlay();
-                                            handleInput();
-                                        }, title: "Center", style: {
-                                            height: 28,
-                                            minWidth: 28,
-                                            padding: "0 6px",
-                                            border: "1px solid var(--srte-input-border)",
-                                            borderRadius: 6,
-                                            background: "var(--srte-input-bg)",
-                                            color: "var(--srte-input-text)",
-                                        }, children: "\u2299" }), _jsx("button", { onClick: () => {
-                                            const img = selectedImage;
-                                            if (!img)
-                                                return;
-                                            img.style.display = "inline";
-                                            img.style.float = "left";
-                                            img.style.margin = "0 8px 8px 0";
-                                            scheduleImageOverlay();
-                                            handleInput();
-                                        }, title: "Float left", style: {
-                                            height: 28,
-                                            minWidth: 28,
-                                            padding: "0 6px",
-                                            border: "1px solid var(--srte-input-border)",
-                                            borderRadius: 6,
-                                            background: "var(--srte-input-bg)",
-                                            color: "var(--srte-input-text)",
-                                        }, children: "\u27F8" }), _jsx("button", { onClick: () => {
-                                            const img = selectedImage;
-                                            if (!img)
-                                                return;
-                                            img.style.display = "inline";
-                                            img.style.float = "right";
-                                            img.style.margin = "0 0 8px 8px";
-                                            scheduleImageOverlay();
-                                            handleInput();
-                                        }, title: "Float right", style: {
-                                            height: 28,
-                                            minWidth: 28,
-                                            padding: "0 6px",
-                                            border: "1px solid var(--srte-input-border)",
-                                            borderRadius: 6,
-                                            background: "var(--srte-input-bg)",
-                                            color: "var(--srte-input-text)",
-                                        }, children: "\u27F9" })] })] })), table && (_jsx("button", { title: "Insert table", onClick: () => setShowTableDialog(true), style: {
-                            height: 32,
-                            padding: "0 10px",
-                            border: "1px solid var(--srte-input-border)",
-                            borderRadius: 6,
-                            background: "var(--srte-input-bg)",
-                            color: "var(--srte-input-text)",
-                        }, children: "\u2795 Table" })), _jsxs("div", { style: {
-                            display: "inline-flex",
-                            gap: 4,
-                            alignItems: "center",
-                            marginLeft: 6,
-                        }, children: [_jsx("span", { style: { fontSize: 12, opacity: 0.7 }, children: "Move:" }), _jsx("button", { title: "Move selected block up", onClick: () => moveCurrentElement("up"), style: activeButtonStyle(false, { height: 28, minWidth: 28, padding: "0 6px" }), children: "\u2191" }), _jsx("button", { title: "Move selected block down", onClick: () => moveCurrentElement("down"), style: activeButtonStyle(false, { height: 28, minWidth: 28, padding: "0 6px" }), children: "\u2193" }), _jsx("button", { title: "Move selected block left", onClick: () => moveCurrentElement("left"), style: activeButtonStyle(false, { height: 28, minWidth: 28, padding: "0 6px" }), children: "\u2190" }), _jsx("button", { title: "Move selected block right", onClick: () => moveCurrentElement("right"), style: activeButtonStyle(false, { height: 28, minWidth: 28, padding: "0 6px" }), children: "\u2192" })] }), _jsx("button", { title: "Undo", onClick: () => exec("undo"), style: {
-                            height: 32,
-                            padding: "0 10px",
-                            border: "1px solid var(--srte-input-border)",
-                            borderRadius: 6,
-                            background: "var(--srte-input-bg)",
-                            color: "var(--srte-input-text)",
-                        }, children: "\u238C Undo" }), _jsx("button", { title: "Redo", onClick: () => exec("redo"), style: {
-                            height: 32,
-                            padding: "0 10px",
-                            border: "1px solid var(--srte-input-border)",
-                            borderRadius: 6,
-                            background: "var(--srte-input-bg)",
-                            color: "var(--srte-input-text)",
-                        }, children: "\u293E Redo" })] }), media && mediaManager && (_jsx(MediaManager, { open: showMediaManager, onClose: () => setShowMediaManager(false), adapter: mediaManager, onSelect: (item) => {
+                                }, 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) => {
                     if (item?.url)
                         insertImageAtSelection(item);
                 } })), table && showTableDialog && (_jsx("div", { style: {
@@ -5654,7 +5860,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                     pushEditorHistory();
                                     const checked = item.dataset.checked !== "true";
                                     item.dataset.checked = checked ? "true" : "false";
-                                    t.textContent = checked ? "☑" : "☐";
+                                    t.dataset.checked = checked ? "true" : "false";
+                                    t.setAttribute("aria-pressed", checked ? "true" : "false");
                                     t.setAttribute("aria-label", checked ? "Mark incomplete" : "Mark complete");
                                     item.style.textDecoration =
                                         list.dataset.srteChecklistStrike === "true" && checked ? "line-through" : "";
@@ -5751,26 +5958,16 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             }
                             // Keep Tab for indentation in lists; otherwise insert 2 spaces
                             if (e.key === "Tab") {
-                                e.preventDefault();
                                 const selection = getSelectionRangeInEditor();
-                                const selectedListItems = selection && !selection.collapsed
-                                    ? getSelectedListItems(getSelectedBlocks(selection))
-                                    : [];
+                                const selectedListItems = selection ? resolveSelectedListItems(selection) : [];
                                 if (selectedListItems.length > 0) {
-                                    if (!e.shiftKey) {
-                                        nestListSelection();
-                                        return;
-                                    }
-                                    pushEditorHistory();
-                                    exec("outdent");
+                                    e.preventDefault();
+                                    applyListDepthChange(selectedListItems, e.shiftKey ? "outdent" : "indent");
                                     return;
                                 }
+                                e.preventDefault();
                                 const currentBlock = getCurrentBlock();
-                                if (currentBlock?.closest("li")) {
-                                    pushEditorHistory();
-                                    exec(e.shiftKey ? "outdent" : "indent");
-                                }
-                                else {
+                                if (!currentBlock?.closest("li")) {
                                     captureInputHistory("insertText");
                                     document.execCommand("insertText", false, "  ");
                                 }