smartrte-react 0.2.2 → 0.2.4

package/dist/components/ClassicEditor.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { MediaManager } from "./MediaManager";
+import { MediaManager } from "./MediaManager.js";
 import * as pdfjsLib from 'pdfjs-dist';
 import mammoth from 'mammoth';
 import JSZip from 'jszip';
-import { ensureStyleSheet } from '../theme';
+import { ensureStyleSheet } from '../theme.js';
 // Initialize PDF.js worker
 if (typeof window !== 'undefined') {
     pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
@@ -20,6 +20,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
 ], defaultFont, preserveFontFamily = false, preserveColors = false, preserveDocxStyles = true, theme = "light", className, }) {
     ensureStyleSheet();
     const editableRef = useRef(null);
+    const editorScrollRef = useRef(null);
     const lastEmittedRef = useRef("");
     const isComposingRef = useRef(false);
     const fileInputRef = useRef(null);
@@ -53,6 +54,18 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const savedRangeRef = useRef(null);
     const [currentFontSize, setCurrentFontSize] = useState("");
     const [currentFont, setCurrentFont] = useState("");
+    const [activeState, setActiveState] = useState({
+        bold: false,
+        italic: false,
+        underline: false,
+        strikeThrough: false,
+        subscript: false,
+        superscript: false,
+        unorderedList: false,
+        orderedList: false,
+        blockquote: false,
+        codeBlock: false,
+    });
     useEffect(() => {
         const el = editableRef.current;
         if (!el)
@@ -77,6 +90,35 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             el.removeEventListener("contextmenu", onCtx, { capture: true });
         };
     }, [value]);
+    const updateActiveState = () => {
+        const editor = editableRef.current;
+        if (!editor)
+            return;
+        try {
+            const sel = window.getSelection();
+            const range = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
+            const inEditor = range && editor.contains(range.commonAncestorContainer);
+            if (!inEditor)
+                return;
+            let node = range.commonAncestorContainer;
+            if (node.nodeType === Node.TEXT_NODE)
+                node = node.parentNode;
+            const element = node instanceof HTMLElement ? node : null;
+            setActiveState({
+                bold: document.queryCommandState("bold"),
+                italic: document.queryCommandState("italic"),
+                underline: document.queryCommandState("underline"),
+                strikeThrough: document.queryCommandState("strikeThrough"),
+                subscript: document.queryCommandState("subscript"),
+                superscript: document.queryCommandState("superscript"),
+                unorderedList: Boolean(element?.closest("ul")),
+                orderedList: Boolean(element?.closest("ol")),
+                blockquote: Boolean(element?.closest("blockquote")),
+                codeBlock: Boolean(element?.closest("pre")),
+            });
+        }
+        catch { }
+    };
     // Save selection whenever it changes
     useEffect(() => {
         const saveSelection = () => {
@@ -86,6 +128,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 const editor = editableRef.current;
                 if (editor && editor.contains(range.commonAncestorContainer)) {
                     savedRangeRef.current = range.cloneRange();
+                    updateActiveState();
                 }
             }
         };
@@ -96,8 +139,27 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     }, []);
     const exec = (command, valueArg) => {
         try {
-            document.execCommand(command, false, valueArg);
-            emitChange();
+            if (!restoreSavedSelection()) {
+                safeSelectRange(getSelectionRangeInEditor());
+            }
+            if (command === "insertUnorderedList") {
+                toggleList("ul");
+                return;
+            }
+            if (command === "insertOrderedList") {
+                toggleList("ol");
+                return;
+            }
+            const beforeHtml = editableRef.current?.innerHTML || "";
+            const ok = document.execCommand(command, false, valueArg);
+            const afterHtml = editableRef.current?.innerHTML || "";
+            const needsFallback = !ok ||
+                (command === "formatBlock" && beforeHtml === afterHtml);
+            if (needsFallback) {
+                if (command === "formatBlock" && valueArg)
+                    applyFormatBlockFallback(valueArg);
+            }
+            handleInput();
         }
         catch { }
     };
@@ -114,6 +176,29 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             onChange(html);
         }
     };
+    const restoreSavedSelection = () => {
+        const editor = editableRef.current;
+        if (!editor)
+            return false;
+        const saved = savedRangeRef.current;
+        if (saved && editor.contains(saved.commonAncestorContainer)) {
+            editor.focus({ preventScroll: true });
+            safeSelectRange(saved.cloneRange());
+            return true;
+        }
+        editor.focus({ preventScroll: true });
+        return false;
+    };
+    const preserveEditorSelection = () => {
+        const editor = editableRef.current;
+        const sel = window.getSelection();
+        if (!editor || !sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        if (editor.contains(range.commonAncestorContainer)) {
+            savedRangeRef.current = range.cloneRange();
+        }
+    };
     const insertLink = () => {
         const url = window.prompt("Enter URL", "https://");
         if (!url)
@@ -124,7 +209,6 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const editor = editableRef.current;
         if (!editor)
             return null;
-        editor.focus();
         const sel = window.getSelection();
         if (sel && sel.rangeCount > 0) {
             const range = sel.getRangeAt(0);
@@ -139,6 +223,307 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         range.collapse(false);
         return range;
     };
+    const getCurrentBlock = () => {
+        const editor = editableRef.current;
+        const range = getSelectionRangeInEditor();
+        if (!editor || !range)
+            return null;
+        let node = range.commonAncestorContainer;
+        if (node.nodeType === Node.TEXT_NODE)
+            node = node.parentNode;
+        const element = node instanceof HTMLElement ? node : null;
+        const block = element?.closest("p,h1,h2,h3,h4,h5,h6,li,blockquote,pre,div");
+        if (!block || block === editor || !editor.contains(block))
+            return null;
+        return block;
+    };
+    const blockSelector = "p,h1,h2,h3,h4,h5,h6,li,blockquote,pre,div";
+    const getSelectedBlocks = (range) => {
+        const editor = editableRef.current;
+        if (!editor)
+            return [];
+        const blocks = Array.from(editor.querySelectorAll(blockSelector))
+            .filter((block) => {
+            if (block === editor)
+                return false;
+            const parentBlock = block.parentElement?.closest(blockSelector);
+            if (parentBlock && parentBlock !== editor && editor.contains(parentBlock))
+                return false;
+            try {
+                return range.intersectsNode(block);
+            }
+            catch {
+                return false;
+            }
+        });
+        if (blocks.length > 0)
+            return blocks;
+        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);
+            }
+        });
+        return items;
+    };
+    const copyCellOrBlockStyles = (from, to) => {
+        to.innerHTML = from.innerHTML || "<br>";
+        const style = from.getAttribute("style");
+        if (style)
+            to.setAttribute("style", style);
+    };
+    const applyHeaderCellStyle = (cell) => {
+        cell.style.fontWeight = "700";
+        cell.style.background = "#f3f4f6";
+        cell.style.textAlign = cell.style.textAlign || "left";
+    };
+    const clearHeaderCellStyle = (cell) => {
+        if (cell.style.fontWeight === "700" || cell.style.fontWeight === "bold")
+            cell.style.fontWeight = "";
+        if (cell.style.background === "var(--srte-surface-subtle)" || cell.style.background === "rgb(243, 244, 246)" || cell.style.background === "#f3f4f6")
+            cell.style.background = "";
+    };
+    const replaceTableCellTag = (cell, tag) => {
+        const replacement = document.createElement(tag);
+        replacement.innerHTML = cell.innerHTML || "&nbsp;";
+        replacement.colSpan = cell.colSpan;
+        replacement.rowSpan = cell.rowSpan;
+        const style = cell.getAttribute("style");
+        if (style)
+            replacement.setAttribute("style", style);
+        if (cell.__rtePrevBg != null) {
+            replacement.style.background = cell.__rtePrevBg || "";
+            delete cell.__rtePrevBg;
+        }
+        if (replacement.style.background === "var(--srte-accent-bg)" ||
+            replacement.style.background.includes("59, 130, 246") ||
+            replacement.style.background.includes("59, 158, 255")) {
+            replacement.style.background = "";
+        }
+        replacement.style.outline = "";
+        replacement.style.outlineOffset = "";
+        replacement.style.border = replacement.style.border || "1px solid #d1d5db";
+        replacement.style.padding = replacement.style.padding || "6px";
+        replacement.style.minWidth = replacement.style.minWidth || "60px";
+        if (tag === "th")
+            applyHeaderCellStyle(replacement);
+        else
+            clearHeaderCellStyle(replacement);
+        cell.parentElement?.replaceChild(replacement, cell);
+        return replacement;
+    };
+    const applyFormatBlockFallback = (blockName) => {
+        const editor = editableRef.current;
+        const block = getCurrentBlock();
+        const tag = blockName.replace(/[<>]/g, "").toLowerCase() || "p";
+        if (!editor || !block || block === editor || !/^(p|h1|h2|h3|h4|h5|h6|pre|blockquote)$/.test(tag))
+            return;
+        const replacement = document.createElement(tag);
+        copyCellOrBlockStyles(block, replacement);
+        block.parentElement?.replaceChild(replacement, block);
+        const range = document.createRange();
+        range.selectNodeContents(replacement);
+        range.collapse(false);
+        safeSelectRange(range);
+    };
+    const cloneListShell = (list, tagName) => {
+        const clone = document.createElement(tagName || list.tagName.toLowerCase());
+        Array.from(list.attributes).forEach((attr) => clone.setAttribute(attr.name, attr.value));
+        return clone;
+    };
+    const focusElementEnd = (element) => {
+        const range = document.createRange();
+        range.selectNodeContents(element);
+        range.collapse(false);
+        safeSelectRange(range);
+        savedRangeRef.current = range.cloneRange();
+    };
+    const insertEmptyListAtSelection = (listTag) => {
+        const editor = editableRef.current;
+        const range = getSelectionRangeInEditor();
+        if (!editor || !range)
+            return;
+        const list = document.createElement(listTag);
+        const li = document.createElement("li");
+        li.innerHTML = "<br>";
+        list.appendChild(li);
+        range.deleteContents();
+        range.insertNode(list);
+        focusElementEnd(li);
+    };
+    const unwrapListItem = (li, list) => {
+        const parent = list.parentElement;
+        if (!parent)
+            return;
+        const paragraph = document.createElement("p");
+        paragraph.innerHTML = li.innerHTML || "<br>";
+        const beforeList = cloneListShell(list);
+        const afterList = cloneListShell(list);
+        while (list.firstChild && list.firstChild !== li) {
+            beforeList.appendChild(list.firstChild);
+        }
+        while (li.nextSibling) {
+            afterList.appendChild(li.nextSibling);
+        }
+        if (beforeList.childNodes.length)
+            parent.insertBefore(beforeList, list);
+        parent.insertBefore(paragraph, list);
+        if (afterList.childNodes.length)
+            parent.insertBefore(afterList, list);
+        li.remove();
+        if (!list.querySelector("li"))
+            list.remove();
+        focusElementEnd(paragraph);
+    };
+    const convertListTag = (list, listTag) => {
+        const replacement = cloneListShell(list, listTag);
+        replacement.innerHTML = list.innerHTML;
+        list.parentElement?.replaceChild(replacement, list);
+        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";
+        });
+        if (nested && nested.tagName.toLowerCase() !== listTag) {
+            const replacement = cloneListShell(nested, listTag);
+            replacement.innerHTML = nested.innerHTML;
+            nested.parentElement?.replaceChild(replacement, nested);
+            nested = replacement;
+        }
+        if (!nested) {
+            nested = document.createElement(listTag);
+            li.appendChild(nested);
+        }
+        return nested;
+    };
+    const nestSelectedListItems = (items, listTag) => {
+        if (items.length === 0)
+            return false;
+        let changed = false;
+        let lastTargetList = null;
+        items.forEach((li) => {
+            const previous = li.previousElementSibling;
+            if (!previous || previous.tagName.toLowerCase() !== "li")
+                return;
+            const targetList = getOrCreateNestedList(previous, listTag);
+            targetList.appendChild(li);
+            lastTargetList = targetList;
+            changed = true;
+        });
+        if (changed) {
+            const lastItem = lastTargetList?.lastElementChild;
+            if (lastItem)
+                focusElementEnd(lastItem);
+        }
+        return changed;
+    };
+    const convertSelectedBlocksToList = (blocks, listTag) => {
+        const editor = editableRef.current;
+        if (!editor || blocks.length === 0)
+            return false;
+        const selected = blocks.filter((block) => {
+            if (!editor.contains(block))
+                return false;
+            if (block.tagName.toLowerCase() === "li")
+                return false;
+            if (block.closest("ul,ol"))
+                return false;
+            return block.parentElement;
+        });
+        if (selected.length === 0)
+            return false;
+        const groups = new Map();
+        selected.forEach((block) => {
+            const parent = block.parentElement;
+            if (!parent)
+                return;
+            const group = groups.get(parent) || [];
+            group.push(block);
+            groups.set(parent, group);
+        });
+        let lastLi = null;
+        groups.forEach((group, parent) => {
+            group.sort((a, b) => {
+                const position = a.compareDocumentPosition(b);
+                return position & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+            });
+            const list = document.createElement(listTag);
+            parent.insertBefore(list, group[0]);
+            group.forEach((block) => {
+                const li = document.createElement("li");
+                li.innerHTML = block.innerHTML || "<br>";
+                list.appendChild(li);
+                block.remove();
+                lastLi = li;
+            });
+        });
+        if (lastLi)
+            focusElementEnd(lastLi);
+        return true;
+    };
+    const toggleList = (listTag) => {
+        const editor = editableRef.current;
+        if (!editor)
+            return;
+        if (!restoreSavedSelection())
+            safeSelectRange(getSelectionRangeInEditor());
+        const range = getSelectionRangeInEditor();
+        if (range && !range.collapsed) {
+            const blocks = getSelectedBlocks(range);
+            const selectedListItems = getSelectedListItems(blocks);
+            const convertedBlocks = convertSelectedBlocksToList(blocks, listTag);
+            const nestedItems = nestSelectedListItems(selectedListItems, listTag);
+            if (convertedBlocks || nestedItems) {
+                handleInput();
+                requestAnimationFrame(updateActiveState);
+                return;
+            }
+        }
+        const block = getCurrentBlock();
+        if (!block) {
+            insertEmptyListAtSelection(listTag);
+            handleInput();
+            requestAnimationFrame(updateActiveState);
+            return;
+        }
+        const currentList = block.closest("ul,ol");
+        if (currentList && editor.contains(currentList)) {
+            if (currentList.tagName.toLowerCase() === listTag) {
+                const li = block.closest("li");
+                if (li)
+                    unwrapListItem(li, currentList);
+            }
+            else {
+                convertListTag(currentList, listTag);
+            }
+            handleInput();
+            requestAnimationFrame(updateActiveState);
+            return;
+        }
+        const list = document.createElement(listTag);
+        const li = document.createElement("li");
+        li.innerHTML = block.innerHTML || "<br>";
+        list.appendChild(li);
+        block.parentElement?.replaceChild(list, block);
+        focusElementEnd(li);
+        handleInput();
+        requestAnimationFrame(updateActiveState);
+    };
+    const toggleListFallback = (listTag) => {
+        toggleList(listTag);
+    };
     const insertTextAtSelection = (text) => {
         if (!text)
             return;
@@ -310,15 +695,17 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     };
     const scheduleImageOverlay = () => {
         const img = selectedImage;
+        const scroller = editorScrollRef.current;
         if (!img) {
             setImageOverlay(null);
             return;
         }
         try {
             const rect = img.getBoundingClientRect();
+            const hostRect = scroller?.getBoundingClientRect();
             setImageOverlay({
-                left: rect.left,
-                top: rect.top,
+                left: hostRect && scroller ? rect.left - hostRect.left + scroller.scrollLeft : rect.left,
+                top: hostRect && scroller ? rect.top - hostRect.top + scroller.scrollTop : rect.top,
                 width: rect.width,
                 height: rect.height,
             });
@@ -617,6 +1004,16 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         if (!media)
             return;
         const list = Array.from(files).filter((f) => f.type.startsWith("image/"));
+        if (mediaManager) {
+            try {
+                const uploaded = await mediaManager.upload(list);
+                uploaded.forEach((item) => insertImageAtSelection(item));
+                return;
+            }
+            catch (error) {
+                console.error("Image upload failed, inserting local image data instead:", error);
+            }
+        }
         for (const f of list) {
             await new Promise((resolve) => {
                 const reader = new FileReader();
@@ -669,6 +1066,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             let fullHtml = '';
             for (let i = 1; i <= pdf.numPages; i++) {
                 const page = await pdf.getPage(i);
+                const viewport = page.getViewport({ scale: 1 });
                 const textContent = await page.getTextContent();
                 const styles = textContent.styles;
                 // 1. Group items into lines
@@ -740,8 +1138,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         const width = item.width;
                         const fontName = item.fontName;
                         const fontObj = styles[fontName];
-                        const isBold = fontObj?.fontFamily?.toLowerCase().includes('bold') || false;
-                        // const isItalic = fontObj?.fontFamily?.toLowerCase().includes('italic') || false;
+                        const fontFamily = fontObj?.fontFamily?.toLowerCase() || '';
+                        const isBold = fontFamily.includes('bold') || false;
+                        const isItalic = fontFamily.includes('italic') || fontFamily.includes('oblique');
+                        const fontSize = Math.max(8, Math.round(Math.abs(item.transform[3])));
                         if (lastX > 0) {
                             const gap = x - lastX;
                             if (gap > 2) { // Minimal space threshold
@@ -760,10 +1160,12 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             itemXs.push(x);
                         }
                         // Append text style
-                        let chunk = item.str;
-                        if (isBold)
-                            chunk = `<strong>${chunk}</strong>`;
-                        // if (isItalic) chunk = `<em>${chunk}</em>`;
+                        const chunkStyle = cssRules([
+                            ['font-size', `${fontSize}px`],
+                            ['font-weight', isBold ? '700' : ''],
+                            ['font-style', isItalic ? 'italic' : ''],
+                        ]);
+                        let chunk = `<span${styleAttr(chunkStyle)}>${escapeHtml(item.str)}</span>`;
                         lineText += item.str;
                         lineHtmlContent += chunk;
                         lastX = x + width;
@@ -834,8 +1236,15 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             const w = item.width;
                             const txt = item.str;
                             const fontObj = styles[item.fontName];
-                            const isBold = fontObj?.fontFamily?.toLowerCase().includes('bold');
-                            const styledTxt = isBold ? `<strong>${txt}</strong>` : txt;
+                            const fontFamily = fontObj?.fontFamily?.toLowerCase() || '';
+                            const isBold = fontFamily.includes('bold');
+                            const isItalic = fontFamily.includes('italic') || fontFamily.includes('oblique');
+                            const fontSize = Math.max(8, Math.round(Math.abs(item.transform[3])));
+                            const styledTxt = `<span${styleAttr(cssRules([
+                                ['font-size', `${fontSize}px`],
+                                ['font-weight', isBold ? '700' : ''],
+                                ['font-style', isItalic ? 'italic' : ''],
+                            ]))}>${escapeHtml(txt)}</span>`;
                             // Decide which column this belongs to
                             // Find closest column to the left (or close enough)
                             let colIdx = 0;
@@ -854,7 +1263,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             cellContents[colIdx] += styledTxt;
                         }
                         cellContents.forEach(content => {
-                            rowHtml += `<td style="border:1px solid var(--srte-border);padding:8px;vertical-align:top;">${content || '&nbsp;'}</td>`;
+                            rowHtml += `<td style="border:1px solid #d1d5db;padding:8px;vertical-align:top;">${content || '&nbsp;'}</td>`;
                         });
                         rowHtml += '</tr>';
                         tableHtml += rowHtml;
@@ -877,10 +1286,23 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             closeList();
                             if (isHeader) {
                                 const tag = maxH > medianHeight * 1.5 ? 'h2' : 'h3';
-                                html += `<${tag}>${lineHtmlContent}</${tag}>`;
+                                const firstX = line.items[0]?.transform?.[4] || 0;
+                                const lastItem = line.items[line.items.length - 1];
+                                const lastRight = lastItem ? lastItem.transform[4] + lastItem.width : firstX;
+                                const center = (firstX + lastRight) / 2;
+                                const align = Math.abs(center - viewport.width / 2) < viewport.width * 0.12 ? 'center' : firstX > viewport.width * 0.55 ? 'right' : '';
+                                html += `<${tag}${styleAttr(cssRules([['text-align', align]]))}>${lineHtmlContent}</${tag}>`;
                             }
                             else {
-                                html += `<p>${lineHtmlContent}</p>`;
+                                const firstX = line.items[0]?.transform?.[4] || 0;
+                                const lastItem = line.items[line.items.length - 1];
+                                const lastRight = lastItem ? lastItem.transform[4] + lastItem.width : firstX;
+                                const center = (firstX + lastRight) / 2;
+                                const align = Math.abs(center - viewport.width / 2) < viewport.width * 0.12 ? 'center' : firstX > viewport.width * 0.55 ? 'right' : '';
+                                html += `<p${styleAttr(cssRules([
+                                    ['text-align', align],
+                                    ['margin-left', firstX > 40 && !align ? `${Math.round(firstX)}px` : ''],
+                                ]))}>${lineHtmlContent}</p>`;
                             }
                         }
                     }
@@ -889,7 +1311,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 closeTable();
                 fullHtml += html;
             }
-            insertImportedHtml(fullHtml, mode);
+            insertImportedHtml(fullHtml, mode, { preserveColors: true, preserveDocumentLayout: true });
         }
         catch (error) {
             console.error('Error reading PDF:', error);
@@ -1146,63 +1568,163 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;");
+    const escapeHtmlAttribute = (value) => escapeHtml(value).replace(/"/g, "&quot;");
     const markdownToHtml = (markdown) => {
         const lines = markdown.replace(/\r\n/g, "\n").split("\n");
         let html = "";
         let listType = null;
+        let paragraph = [];
+        let codeFence = null;
         const closeList = () => {
             if (listType) {
                 html += `</${listType}>`;
                 listType = null;
             }
         };
-        const inline = (text) => escapeHtml(text)
-            .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
-            .replace(/\*([^*]+)\*/g, "<em>$1</em>")
-            .replace(/`([^`]+)`/g, "<code>$1</code>");
-        lines.forEach((line) => {
+        const inline = (text) => {
+            const codeTokens = [];
+            let value = text.replace(/`([^`]+)`/g, (_match, code) => {
+                const token = `@@SRTE_CODE_${codeTokens.length}@@`;
+                codeTokens.push(`<code>${escapeHtml(code)}</code>`);
+                return token;
+            });
+            value = escapeHtml(value)
+                .replace(/!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]+)")?\)/g, (_match, alt, src, title) => {
+                const titleAttr = title ? ` title="${escapeHtmlAttribute(title)}"` : "";
+                return `<img src="${escapeHtmlAttribute(src)}" alt="${escapeHtmlAttribute(alt)}"${titleAttr}>`;
+            })
+                .replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+"([^"]+)")?\)/g, (_match, label, href, title) => {
+                const titleAttr = title ? ` title="${escapeHtmlAttribute(title)}"` : "";
+                return `<a href="${escapeHtmlAttribute(href)}"${titleAttr}>${label}</a>`;
+            })
+                .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
+                .replace(/__([^_]+)__/g, "<strong>$1</strong>")
+                .replace(/~~([^~]+)~~/g, "<s>$1</s>")
+                .replace(/(^|[^*])\*([^*\n]+)\*/g, "$1<em>$2</em>")
+                .replace(/(^|[^_])_([^_\n]+)_/g, "$1<em>$2</em>");
+            codeTokens.forEach((replacement, index) => {
+                value = value.replace(`@@SRTE_CODE_${index}@@`, replacement);
+            });
+            return value;
+        };
+        const closeParagraph = () => {
+            if (!paragraph.length)
+                return;
+            html += `<p>${inline(paragraph.join(" "))}</p>`;
+            paragraph = [];
+        };
+        const isTableSeparator = (line) => /^\s*\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)+\|?\s*$/.test(line);
+        const parseTableRow = (line) => {
+            let value = line.trim();
+            if (value.startsWith("|"))
+                value = value.slice(1);
+            if (value.endsWith("|"))
+                value = value.slice(0, -1);
+            return value.split("|").map((cell) => cell.trim());
+        };
+        const renderTable = (startIndex) => {
+            const header = parseTableRow(lines[startIndex]);
+            let index = startIndex + 2;
+            const rows = [];
+            while (index < lines.length && lines[index].includes("|") && lines[index].trim()) {
+                rows.push(parseTableRow(lines[index]));
+                index += 1;
+            }
+            const headHtml = `<thead><tr>${header.map((cell) => `<th>${inline(cell)}</th>`).join("")}</tr></thead>`;
+            const bodyHtml = rows.length
+                ? `<tbody>${rows.map((row) => `<tr>${header.map((_cell, cellIndex) => `<td>${inline(row[cellIndex] || "")}</td>`).join("")}</tr>`).join("")}</tbody>`
+                : "";
+            html += `<table style="border-collapse: collapse; width: 100%; margin: 12px 0;">${headHtml}${bodyHtml}</table>`;
+            return index;
+        };
+        for (let i = 0; i < lines.length; i += 1) {
+            const line = lines[i];
             const trimmed = line.trim();
+            const fence = /^```([A-Za-z0-9_-]+)?\s*$/.exec(trimmed);
+            if (fence) {
+                closeParagraph();
+                closeList();
+                if (codeFence) {
+                    const langClass = codeFence.lang ? ` class="language-${escapeHtmlAttribute(codeFence.lang)}"` : "";
+                    html += `<pre><code${langClass}>${escapeHtml(codeFence.lines.join("\n"))}</code></pre>`;
+                    codeFence = null;
+                }
+                else {
+                    codeFence = { lang: fence[1] || "", lines: [] };
+                }
+                continue;
+            }
+            if (codeFence) {
+                codeFence.lines.push(line);
+                continue;
+            }
             if (!trimmed) {
+                closeParagraph();
                 closeList();
-                return;
+                continue;
+            }
+            if (/^(-{3,}|\*{3,}|_{3,})$/.test(trimmed)) {
+                closeParagraph();
+                closeList();
+                html += "<hr>";
+                continue;
+            }
+            if (i + 1 < lines.length && trimmed.includes("|") && isTableSeparator(lines[i + 1])) {
+                closeParagraph();
+                closeList();
+                i = renderTable(i) - 1;
+                continue;
             }
             const heading = /^(#{1,6})\s+(.+)$/.exec(trimmed);
             if (heading) {
+                closeParagraph();
                 closeList();
                 const level = heading[1].length;
                 html += `<h${level}>${inline(heading[2])}</h${level}>`;
-                return;
+                continue;
             }
-            const bullet = /^[-*]\s+(.+)$/.exec(trimmed);
+            const bullet = /^[-*+]\s+(.+)$/.exec(trimmed);
             if (bullet) {
+                closeParagraph();
                 if (listType !== "ul") {
                     closeList();
                     html += "<ul>";
                     listType = "ul";
                 }
                 html += `<li>${inline(bullet[1])}</li>`;
-                return;
+                continue;
             }
             const numbered = /^\d+[.)]\s+(.+)$/.exec(trimmed);
             if (numbered) {
+                closeParagraph();
                 if (listType !== "ol") {
                     closeList();
                     html += "<ol>";
                     listType = "ol";
                 }
                 html += `<li>${inline(numbered[1])}</li>`;
-                return;
+                continue;
             }
-            if (trimmed.startsWith("> ")) {
+            const quote = /^>\s?(.*)$/.exec(trimmed);
+            if (quote) {
+                closeParagraph();
                 closeList();
-                html += `<blockquote>${inline(trimmed.slice(2))}</blockquote>`;
-                return;
+                html += `<blockquote>${inline(quote[1]) || "<br>"}</blockquote>`;
+                continue;
             }
             closeList();
-            html += `<p>${inline(trimmed)}</p>`;
-        });
+            paragraph.push(trimmed);
+        }
+        if (codeFence) {
+            const langClass = codeFence.lang ? ` class="language-${escapeHtmlAttribute(codeFence.lang)}"` : "";
+            html += `<pre><code${langClass}>${escapeHtml(codeFence.lines.join("\n"))}</code></pre>`;
+        }
+        closeParagraph();
         closeList();
-        return html;
+        const root = document.createElement("div");
+        root.innerHTML = html;
+        enhanceImportedTables(root);
+        return root.innerHTML;
     };
     const htmlToMarkdown = (html) => {
         const root = document.createElement("div");
@@ -1250,7 +1772,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const html = type === "html" ? text : markdownToHtml(text);
         const el = editableRef.current;
         const hasContent = el && el.textContent && el.textContent.trim().length > 0;
-        insertImportedHtml(html, hasContent ? "append" : "replace");
+        insertImportedHtml(html, hasContent ? "append" : "replace", {
+            preserveColors: true,
+            preserveDocumentLayout: true,
+        });
     };
     const downloadText = (filename, content, mimeType) => {
         const blob = new Blob([content], { type: mimeType });
@@ -1271,6 +1796,139 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const html = editableRef.current?.innerHTML || "";
         downloadText("smart-rte-export.md", htmlToMarkdown(html), "text/markdown");
     };
+    const htmlToDocxXml = (html) => {
+        const root = document.createElement("div");
+        root.innerHTML = html;
+        const xmlEscape = (value) => value
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;");
+        const colorValue = (value) => {
+            const hex = /^#([0-9a-f]{6})$/i.exec(value.trim());
+            if (hex)
+                return hex[1].toUpperCase();
+            const rgb = /^rgb\(\s*(\d+),\s*(\d+),\s*(\d+)\s*\)$/i.exec(value.trim());
+            if (!rgb)
+                return "";
+            return [rgb[1], rgb[2], rgb[3]]
+                .map((part) => Math.max(0, Math.min(255, Number(part))).toString(16).padStart(2, "0"))
+                .join("")
+                .toUpperCase();
+        };
+        const sizeToHalfPoints = (value) => {
+            const trimmed = value.trim();
+            const match = /^([\d.]+)(px|pt)$/i.exec(trimmed);
+            if (!match)
+                return "";
+            const raw = Number(match[1]);
+            const pt = match[2].toLowerCase() === "px" ? raw * 0.75 : raw;
+            return String(Math.max(2, Math.round(pt * 2)));
+        };
+        const runProperties = (el) => {
+            const style = el.style;
+            const color = colorValue(style.color);
+            const size = sizeToHalfPoints(style.fontSize);
+            const isBold = el.tagName === "B" || el.tagName === "STRONG" || /bold|700|800|900/.test(style.fontWeight);
+            const isItalic = el.tagName === "I" || el.tagName === "EM" || style.fontStyle === "italic";
+            const isUnderline = el.tagName === "U" || style.textDecoration.includes("underline");
+            return [
+                isBold ? "<w:b/>" : "",
+                isItalic ? "<w:i/>" : "",
+                isUnderline ? '<w:u w:val="single"/>' : "",
+                color ? `<w:color w:val="${color}"/>` : "",
+                size ? `<w:sz w:val="${size}"/>` : "",
+            ].join("");
+        };
+        const runs = (node, inheritedProps = "") => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                const text = node.textContent || "";
+                return text ? `<w:r>${inheritedProps ? `<w:rPr>${inheritedProps}</w:rPr>` : ""}<w:t xml:space="preserve">${xmlEscape(text)}</w:t></w:r>` : "";
+            }
+            if (!(node instanceof HTMLElement))
+                return "";
+            if (node.tagName === "BR")
+                return "<w:r><w:br/></w:r>";
+            if (node.tagName === "IMG") {
+                const alt = node.getAttribute("alt") || node.getAttribute("title") || "Image";
+                return `<w:r><w:t>[Image: ${xmlEscape(alt)}]</w:t></w:r>`;
+            }
+            const props = `${inheritedProps}${runProperties(node)}`;
+            return Array.from(node.childNodes).map((child) => runs(child, props)).join("");
+        };
+        const paragraph = (el, fallbackTag = "p") => {
+            const tag = el.tagName.toLowerCase();
+            const headingMatch = /^h([1-6])$/.exec(tag);
+            const style = el.style;
+            const align = style.textAlign ? `<w:jc w:val="${xmlEscape(style.textAlign)}"/>` : "";
+            const headingSize = headingMatch ? `<w:rPr><w:b/><w:sz w:val="${Math.max(24, 40 - Number(headingMatch[1]) * 4)}"/></w:rPr>` : "";
+            const body = runs(el);
+            return `<w:p><w:pPr>${align}${headingSize}</w:pPr>${body || "<w:r><w:t></w:t></w:r>"}</w:p>`;
+        };
+        const tableCell = (cell) => {
+            const fill = colorValue(cell.style.backgroundColor);
+            const shading = fill ? `<w:shd w:val="clear" w:color="auto" w:fill="${fill}"/>` : "";
+            const cellContent = Array.from(cell.childNodes)
+                .map((child) => child instanceof HTMLElement && ["P", "DIV", "H1", "H2", "H3", "H4", "H5", "H6"].includes(child.tagName)
+                ? paragraph(child)
+                : `<w:p>${runs(child)}</w:p>`)
+                .join("");
+            return `<w:tc><w:tcPr>${shading}<w:tcBorders><w:top w:val="single" w:sz="4" w:color="D1D5DB"/><w:left w:val="single" w:sz="4" w:color="D1D5DB"/><w:bottom w:val="single" w:sz="4" w:color="D1D5DB"/><w:right w:val="single" w:sz="4" w:color="D1D5DB"/></w:tcBorders></w:tcPr>${cellContent || "<w:p/>"}</w:tc>`;
+        };
+        const tableXml = (table) => {
+            const rows = Array.from(table.querySelectorAll("tr"));
+            return `<w:tbl><w:tblPr><w:tblW w:w="0" w:type="auto"/><w:tblBorders><w:top w:val="single" w:sz="4" w:color="D1D5DB"/><w:left w:val="single" w:sz="4" w:color="D1D5DB"/><w:bottom w:val="single" w:sz="4" w:color="D1D5DB"/><w:right w:val="single" w:sz="4" w:color="D1D5DB"/><w:insideH w:val="single" w:sz="4" w:color="D1D5DB"/><w:insideV w:val="single" w:sz="4" w:color="D1D5DB"/></w:tblBorders></w:tblPr>${rows.map((row) => `<w:tr>${Array.from(row.children).map((cell) => tableCell(cell)).join("")}</w:tr>`).join("")}</w:tbl>`;
+        };
+        const blockXml = (node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                const text = node.textContent?.trim();
+                return text ? `<w:p>${runs(node)}</w:p>` : "";
+            }
+            if (!(node instanceof HTMLElement))
+                return "";
+            if (node.tagName === "TABLE")
+                return tableXml(node);
+            if (node.tagName === "UL" || node.tagName === "OL") {
+                return Array.from(node.children).map((li) => `<w:p><w:r><w:t>• </w:t></w:r>${runs(li)}</w:p>`).join("");
+            }
+            if (node.tagName === "BLOCKQUOTE") {
+                return `<w:p><w:pPr><w:ind w:left="720"/></w:pPr>${runs(node)}</w:p>`;
+            }
+            if (node.tagName === "HR")
+                return '<w:p><w:pPr><w:pBdr><w:bottom w:val="single" w:sz="6" w:color="D1D5DB"/></w:pBdr></w:pPr></w:p>';
+            if (["P", "DIV", "PRE", "H1", "H2", "H3", "H4", "H5", "H6"].includes(node.tagName))
+                return paragraph(node);
+            return Array.from(node.childNodes).map(blockXml).join("");
+        };
+        const body = Array.from(root.childNodes).map(blockXml).join("");
+        return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?><w:document xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main"><w:body>${body}<w:sectPr><w:pgSz w:w="12240" w:h="15840"/><w:pgMar w:top="720" w:right="720" w:bottom="720" w:left="720"/></w:sectPr></w:body></w:document>`;
+    };
+    const exportDocx = async () => {
+        const html = editableRef.current?.innerHTML || "";
+        const zip = new JSZip();
+        zip.file("[Content_Types].xml", `<?xml version="1.0" encoding="UTF-8"?><Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types"><Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/><Default Extension="xml" ContentType="application/xml"/><Override PartName="/word/document.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml"/></Types>`);
+        zip.folder("_rels")?.file(".rels", `<?xml version="1.0" encoding="UTF-8"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="word/document.xml"/></Relationships>`);
+        zip.folder("word")?.file("document.xml", htmlToDocxXml(html));
+        zip.folder("word")?.folder("_rels")?.file("document.xml.rels", `<?xml version="1.0" encoding="UTF-8"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"></Relationships>`);
+        const blob = await zip.generateAsync({ type: "blob", mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = "smart-rte-export.docx";
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+        URL.revokeObjectURL(url);
+    };
+    const exportPdf = () => {
+        const html = editableRef.current?.innerHTML || "";
+        const printWindow = window.open("", "_blank", "width=900,height=700");
+        if (!printWindow)
+            return;
+        printWindow.document.open();
+        printWindow.document.write(`<!doctype html><html><head><title>Export PDF</title><style>@page{margin:18mm}html,body{background:#fff}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6;padding:32px;color:#111}table{border-collapse:collapse;width:100%;margin:12px 0;break-inside:auto}tr,img,blockquote,pre{break-inside:avoid}td,th{border:1px solid #d1d5db;padding:8px;vertical-align:top}img{max-width:100%;height:auto}blockquote{border-left:4px solid #d1d5db;padding-left:12px;color:#374151}pre,code{background:#f3f4f6}pre{padding:12px;white-space:pre-wrap}@media print{body{padding:0}}</style></head><body>${html || "<p></p>"}<script>window.addEventListener("load",function(){setTimeout(function(){window.focus();window.print();},150);});</script></body></html>`);
+        printWindow.document.close();
+    };
     const fixNegativeMargins = (root) => {
         try {
             const nodes = root.querySelectorAll('*');
@@ -1438,10 +2096,12 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     const wrapper = document.createElement('div');
                     wrapper.setAttribute('data-table-wrapper', 'true');
                     wrapper.style.overflowX = 'auto';
+                    wrapper.style.overflowY = 'visible';
                     wrapper.style.webkitOverflowScrolling = 'touch';
                     wrapper.style.width = '100%';
                     wrapper.style.maxWidth = '100%';
                     wrapper.style.display = 'block';
+                    wrapper.style.paddingBottom = '8px';
                     // Use insertBefore + appendChild to move element without losing too much state
                     // simpler than replaceChild for wrapping
                     parent.insertBefore(wrapper, table);
@@ -1489,7 +2149,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             html += "<tr>";
             for (let c = 0; c < safeCols; c++) {
                 html +=
-                    '<td style="border:1px solid var(--srte-border);padding:6px;min-width:60px;">&nbsp;</td>';
+                    '<td style="border:1px solid #d1d5db;padding:6px;min-width:60px;">&nbsp;</td>';
             }
             html += "</tr>";
         }
@@ -1572,16 +2232,56 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         }
         catch { }
     };
+    const getTableGrid = (tbody) => {
+        const rows = Array.from(tbody.querySelectorAll("tr"));
+        const grid = [];
+        rows.forEach((row, rIdx) => {
+            grid[rIdx] = grid[rIdx] || [];
+            let cIdx = 0;
+            const cells = cellsOfRow(row);
+            cells.forEach((cell) => {
+                while (grid[rIdx][cIdx])
+                    cIdx += 1;
+                const rowSpan = Math.max(1, cell.rowSpan || 1);
+                const colSpan = Math.max(1, cell.colSpan || 1);
+                for (let r = rIdx; r < rIdx + rowSpan; r += 1) {
+                    grid[r] = grid[r] || [];
+                    for (let c = cIdx; c < cIdx + colSpan; c += 1) {
+                        grid[r][c] = cell;
+                    }
+                }
+                cIdx += colSpan;
+            });
+        });
+        return { rows, grid };
+    };
+    const getCellsInGridRect = (tbody, sr, sc, er, ec) => {
+        const { grid } = getTableGrid(tbody);
+        const seen = new Set();
+        const cells = [];
+        for (let r = sr; r <= er; r += 1) {
+            for (let c = sc; c <= ec; c += 1) {
+                const cell = grid[r]?.[c];
+                if (cell && !seen.has(cell)) {
+                    seen.add(cell);
+                    cells.push(cell);
+                }
+            }
+        }
+        return cells;
+    };
     const getCellPosition = (cell) => {
         const row = cell.parentElement;
         const tbody = row?.parentElement;
         const table = tbody?.parentElement;
         if (!row || !tbody || !table)
             return null;
-        const rows = Array.from(tbody.querySelectorAll("tr"));
+        const { rows, grid } = getTableGrid(tbody);
         const rIdx = rows.indexOf(row);
-        const cells = Array.from(row.children).filter((c) => ["TD", "TH"].includes(c.tagName));
-        const cIdx = cells.indexOf(cell);
+        let cIdx = -1;
+        if (rIdx >= 0) {
+            cIdx = (grid[rIdx] || []).findIndex((candidate) => candidate === cell);
+        }
         return { row, tbody, table, rIdx, cIdx };
     };
     const cellsOfRow = (row) => Array.from(row.children).filter((c) => ["TD", "TH"].includes(c.tagName));
@@ -1590,42 +2290,27 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         if (!sel)
             return;
         const { tbody, sr, sc, er, ec } = sel;
-        const rows = Array.from(tbody.querySelectorAll("tr"));
-        for (let r = sr; r <= er; r++) {
-            const row = rows[r];
-            const cells = cellsOfRow(row);
-            for (let c = sc; c <= ec; c++) {
-                const cell = cells[c];
-                if (!cell)
-                    continue;
-                if (cell.__rtePrevBg != null) {
-                    cell.style.background = cell.__rtePrevBg;
-                    delete cell.__rtePrevBg;
-                }
-                cell.style.outline = "";
-                cell.style.outlineOffset = "";
+        const cells = getCellsInGridRect(tbody, sr, sc, er, ec);
+        cells.forEach((cell) => {
+            if (cell.__rtePrevBg != null) {
+                cell.style.background = cell.__rtePrevBg;
+                delete cell.__rtePrevBg;
             }
-        }
+            cell.style.outline = "";
+            cell.style.outlineOffset = "";
+        });
         selectionRef.current = null;
     };
     const updateSelectionDecor = (tbody, sr, sc, er, ec) => {
         clearSelectionDecor();
         selectionRef.current = { tbody, sr, sc, er, ec };
-        const rows = Array.from(tbody.querySelectorAll("tr"));
-        for (let r = sr; r <= er; r++) {
-            const row = rows[r];
-            const cells = cellsOfRow(row);
-            for (let c = sc; c <= ec; c++) {
-                const cell = cells[c];
-                if (!cell)
-                    continue;
-                cell.__rtePrevBg =
-                    cell.style.background || "";
-                cell.style.background = "var(--srte-accent-bg)";
-                cell.style.outline = "2px solid var(--srte-accent)";
-                cell.style.outlineOffset = "-2px";
-            }
-        }
+        const cells = getCellsInGridRect(tbody, sr, sc, er, ec);
+        cells.forEach((cell) => {
+            cell.__rtePrevBg = cell.style.background || "";
+            cell.style.background = "var(--srte-accent-bg)";
+            cell.style.outline = "2px solid var(--srte-accent)";
+            cell.style.outlineOffset = "-2px";
+        });
     };
     const canMergeSelection = () => {
         const sel = selectionRef.current;
@@ -1633,32 +2318,37 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             return false;
         return sel.sr !== sel.er || sel.sc !== sel.ec;
     };
+    const canMergeFromCell = (cell) => Boolean(cell && canMergeSelection() && isCellInsideSelection(cell));
+    const canSplitCell = (cell) => Boolean(cell && (Math.max(1, cell.rowSpan || 1) > 1 || Math.max(1, cell.colSpan || 1) > 1));
+    const isCellInsideSelection = (cell) => {
+        const sel = selectionRef.current;
+        if (!sel)
+            return false;
+        const pos = getCellPosition(cell);
+        if (!pos || pos.tbody !== sel.tbody)
+            return false;
+        return pos.rIdx >= sel.sr && pos.rIdx <= sel.er && pos.cIdx >= sel.sc && pos.cIdx <= sel.ec;
+    };
+    const shouldUseTableSelection = (fallbackCell) => Boolean(selectionRef.current && fallbackCell && isCellInsideSelection(fallbackCell));
     const mergeSelection = () => {
         const sel = selectionRef.current;
         if (!sel)
             return;
         const { tbody, sr, sc, er, ec } = sel;
-        const rows = Array.from(tbody.querySelectorAll("tr"));
-        const anchorRow = rows[sr];
-        const anchor = cellsOfRow(anchorRow)[sc];
+        const { grid } = getTableGrid(tbody);
+        const anchor = grid[sr]?.[sc];
         if (!anchor)
             return;
         // Collect content and remove other cells
         const contents = [];
-        for (let r = sr; r <= er; r++) {
-            const row = rows[r];
-            const cells = cellsOfRow(row);
-            for (let c = sc; c <= ec; c++) {
-                const cell = cells[c];
-                if (!cell)
-                    continue;
-                if (r === sr && c === sc)
-                    continue;
-                const html = cell.innerHTML.trim();
-                if (html)
-                    contents.push(html);
-            }
-        }
+        const cellsToMerge = getCellsInGridRect(tbody, sr, sc, er, ec);
+        cellsToMerge.forEach((cell) => {
+            if (cell === anchor)
+                return;
+            const html = cell.innerHTML.trim();
+            if (html)
+                contents.push(html);
+        });
         if (contents.length) {
             anchor.innerHTML = (anchor.innerHTML || "") + " " + contents.join(" ");
         }
@@ -1666,18 +2356,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         anchor.colSpan = ec - sc + 1;
         anchor.rowSpan = er - sr + 1;
         // Remove other cells
-        for (let r = sr; r <= er; r++) {
-            const row = rows[r];
-            const cells = cellsOfRow(row);
-            for (let c = ec; c >= sc; c--) {
-                const cell = cells[c];
-                if (!cell)
-                    continue;
-                if (r === sr && c === sc)
-                    continue;
+        cellsToMerge.forEach((cell) => {
+            if (cell !== anchor)
                 cell.remove();
-            }
-        }
+        });
         moveCaretToCell(anchor, false);
         clearSelectionDecor();
         handleInput();
@@ -1691,7 +2373,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const numCols = Array.from(row.children).filter((c) => ["TD", "TH"].includes(c.tagName)).length;
         for (let i = 0; i < numCols; i++) {
             const td = document.createElement("td");
-            td.style.border = "1px solid var(--srte-border)";
+            td.style.border = "1px solid #d1d5db";
             td.style.padding = "6px";
             td.style.minWidth = "60px";
             td.innerHTML = "&nbsp;";
@@ -1721,7 +2403,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         for (const r of rows) {
             const cells = Array.from(r.children).filter((c) => ["TD", "TH"].includes(c.tagName));
             const td = document.createElement("td");
-            td.style.border = "1px solid var(--srte-border)";
+            td.style.border = "1px solid #d1d5db";
             td.style.padding = "6px";
             td.style.minWidth = "60px";
             td.innerHTML = "&nbsp;";
@@ -1750,14 +2432,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             table.parentElement?.removeChild(table);
     };
     const toggleHeaderCell = (cell) => {
+        clearSelectionDecor();
         const isTh = cell.tagName === "TH";
-        const replacement = document.createElement(isTh ? "td" : "th");
-        replacement.innerHTML = cell.innerHTML || "&nbsp;";
-        replacement.style.border =
-            cell.style.border || "1px solid var(--srte-border)";
-        replacement.style.padding = cell.style.padding || "6px";
-        replacement.style.minWidth = cell.style.minWidth || "60px";
-        cell.parentElement?.replaceChild(replacement, cell);
+        replaceTableCellTag(cell, isTh ? "td" : "th");
+        handleInput();
     };
     const deleteTable = (cell) => {
         const pos = getCellPosition(cell);
@@ -1782,7 +2460,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const currentRow = Array.from(tbody.querySelectorAll("tr"))[rIdx];
         for (let j = 1; j < cs; j++) {
             const td = document.createElement("td");
-            td.style.border = "1px solid var(--srte-border)";
+            td.style.border = "1px solid #d1d5db";
             td.style.padding = "6px";
             td.style.minWidth = "60px";
             td.innerHTML = "&nbsp;";
@@ -1795,7 +2473,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             const row = Array.from(tbody.querySelectorAll("tr"))[rIdx + i];
             for (let j = 0; j < cs; j++) {
                 const td = document.createElement("td");
-                td.style.border = "1px solid var(--srte-border)";
+                td.style.border = "1px solid #d1d5db";
                 td.style.padding = "6px";
                 td.style.minWidth = "60px";
                 td.innerHTML = "&nbsp;";
@@ -1810,29 +2488,17 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const pos = getCellPosition(cell);
         if (!pos)
             return;
-        const { tbody } = pos;
-        const firstRow = tbody.querySelector("tr");
-        if (!firstRow)
-            return;
-        const cells = cellsOfRow(firstRow);
+        clearSelectionDecor();
+        const { row } = pos;
+        const cells = cellsOfRow(row);
         const shouldMakeHeader = cells.some((c) => c.tagName !== "TH");
         for (const c of cells) {
             const isTh = c.tagName === "TH";
             if (shouldMakeHeader && !isTh) {
-                const th = document.createElement("th");
-                th.innerHTML = c.innerHTML || "&nbsp;";
-                th.style.border = c.style.border || "1px solid var(--srte-border)";
-                th.style.padding = c.style.padding || "6px";
-                th.style.minWidth = c.style.minWidth || "60px";
-                firstRow.replaceChild(th, c);
+                replaceTableCellTag(c, "th");
             }
             else if (!shouldMakeHeader && isTh) {
-                const td = document.createElement("td");
-                td.innerHTML = c.innerHTML || "&nbsp;";
-                td.style.border = c.style.border || "1px solid var(--srte-border)";
-                td.style.padding = c.style.padding || "6px";
-                td.style.minWidth = c.style.minWidth || "60px";
-                firstRow.replaceChild(td, c);
+                replaceTableCellTag(c, "td");
             }
         }
         handleInput();
@@ -1841,35 +2507,30 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const pos = getCellPosition(cell);
         if (!pos)
             return;
+        clearSelectionDecor();
         const { tbody, cIdx } = pos;
-        const rows = Array.from(tbody.querySelectorAll("tr"));
-        const columnCells = rows
-            .map((row) => cellsOfRow(row)[cIdx])
-            .filter(Boolean);
+        const { grid } = getTableGrid(tbody);
+        const seen = new Set();
+        const columnCells = grid
+            .map((row) => row?.[cIdx])
+            .filter((candidate) => {
+            if (!candidate || seen.has(candidate))
+                return false;
+            seen.add(candidate);
+            return true;
+        });
         const shouldMakeHeader = columnCells.some((c) => c.tagName !== "TH");
         for (const c of columnCells) {
-            const replacement = document.createElement(shouldMakeHeader ? "th" : "td");
-            replacement.innerHTML = c.innerHTML || "&nbsp;";
-            replacement.style.border = c.style.border || "1px solid var(--srte-border)";
-            replacement.style.padding = c.style.padding || "6px";
-            replacement.style.minWidth = c.style.minWidth || "60px";
-            c.parentElement?.replaceChild(replacement, c);
+            replaceTableCellTag(c, shouldMakeHeader ? "th" : "td");
         }
         handleInput();
     };
     const applyBgToSelection = (hex, fallbackCell) => {
-        const sel = selectionRef.current;
+        const sel = shouldUseTableSelection(fallbackCell) ? selectionRef.current : null;
         if (sel) {
-            const rows = Array.from(sel.tbody.querySelectorAll("tr"));
-            for (let r = sel.sr; r <= sel.er; r++) {
-                const row = rows[r];
-                const cells = cellsOfRow(row);
-                for (let c = sel.sc; c <= sel.ec; c++) {
-                    const cell = cells[c];
-                    if (cell)
-                        cell.style.background = hex;
-                }
-            }
+            getCellsInGridRect(sel.tbody, sel.sr, sel.sc, sel.er, sel.ec).forEach((cell) => {
+                cell.style.background = hex;
+            });
         }
         else if (fallbackCell) {
             fallbackCell.style.background = hex;
@@ -1879,25 +2540,21 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const applyToggle = (cell) => {
             const cur = cell.style.border;
             cell.style.border =
-                cur && cur !== "none" ? "none" : "1px solid #000";
+                cur && cur !== "none" ? "none" : "1px solid #d1d5db";
         };
-        const sel = selectionRef.current;
+        const sel = shouldUseTableSelection(fallbackCell) ? selectionRef.current : null;
         if (sel) {
-            const rows = Array.from(sel.tbody.querySelectorAll("tr"));
-            for (let r = sel.sr; r <= sel.er; r++) {
-                const row = rows[r];
-                const cells = cellsOfRow(row);
-                for (let c = sel.sc; c <= sel.ec; c++) {
-                    const cell = cells[c];
-                    if (cell)
-                        applyToggle(cell);
-                }
-            }
+            getCellsInGridRect(sel.tbody, sel.sr, sel.sc, sel.er, sel.ec).forEach(applyToggle);
         }
         else if (fallbackCell) {
             applyToggle(fallbackCell);
         }
     };
+    const runTableCellAction = (cell, action) => {
+        action(cell);
+        handleInput();
+        setTableMenu(null);
+    };
     // Table column and row resizing functions
     const getColumnCells = (table, colIndex) => {
         const tbody = table.querySelector('tbody');
@@ -2018,19 +2675,40 @@ 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",
+        ...extra,
+    });
+    const preserveToolbarMouseDown = (event) => {
+        const target = event.target;
+        const button = target?.closest("button");
+        preserveEditorSelection();
+        if (button && !button.hasAttribute("disabled")) {
+            event.preventDefault();
+        }
+    };
     const editorClass = `srte-editor${theme === 'dark' ? ' srte-dark' : ''}${className ? ' ' + className : ''}`;
     return (_jsxs("div", { className: editorClass, style: {
             border: "1px solid var(--srte-border)",
             borderRadius: 6,
             width: "100%",
             maxWidth: "100vw",
-            overflow: "hidden",
+            overflow: "visible",
             display: "flex",
             flexDirection: "column",
             background: "var(--srte-bg)",
             color: "var(--srte-text)",
             boxSizing: "border-box"
-        }, children: [_jsxs("div", { style: {
+        }, children: [_jsxs("div", { onMouseDown: preserveToolbarMouseDown, style: {
                     display: "flex",
                     flexWrap: "wrap",
                     maxWidth: "100%",
@@ -2079,7 +2757,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", { defaultValue: "p", onChange: (e) => {
+                        } }), _jsxs("select", { defaultValue: "p", onMouseDown: preserveEditorSelection, onChange: (e) => {
                             const val = e.target.value;
                             if (val === "p")
                                 applyFormatBlock("<p>");
@@ -2096,42 +2774,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: "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("button", { title: "Bold", onClick: () => exec("bold"), style: {
-                            height: 32,
-                            minWidth: 32,
-                            padding: "0 8px",
-                            border: "1px solid var(--srte-input-border)",
-                            borderRadius: 6,
-                            background: "var(--srte-input-bg)",
-                            color: "var(--srte-input-text)",
-                        }, children: _jsx("span", { style: { fontWeight: 700 }, children: "B" }) }), _jsx("button", { title: "Italic", onClick: () => exec("italic"), style: {
-                            height: 32,
-                            minWidth: 32,
-                            padding: "0 8px",
-                            border: "1px solid var(--srte-input-border)",
-                            borderRadius: 6,
-                            background: "var(--srte-input-bg)",
-                            fontStyle: "italic",
-                            color: "var(--srte-input-text)",
-                        }, children: "I" }), _jsx("button", { title: "Underline", onClick: () => exec("underline"), style: {
-                            height: 32,
-                            minWidth: 32,
-                            padding: "0 8px",
-                            border: "1px solid var(--srte-input-border)",
-                            borderRadius: 6,
-                            background: "var(--srte-input-bg)",
-                            textDecoration: "underline",
-                            color: "var(--srte-input-text)",
-                        }, children: "U" }), _jsx("button", { title: "Strikethrough", onClick: () => exec("strikeThrough"), style: {
-                            height: 32,
-                            minWidth: 32,
-                            padding: "0 8px",
-                            border: "1px solid var(--srte-input-border)",
-                            borderRadius: 6,
-                            background: "var(--srte-input-bg)",
-                            textDecoration: "line-through",
-                            color: "var(--srte-input-text)",
-                        }, children: "S" }), _jsxs("select", { value: currentFontSize, onMouseDown: () => {
+                        }, children: [_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("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" }), _jsxs("select", { value: currentFontSize, onMouseDown: () => {
                             // Save selection before dropdown interaction
                             const sel = window.getSelection();
                             if (sel && sel.rangeCount > 0) {
@@ -2188,7 +2831,7 @@ 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: () => exec("subscript"), style: {
+                        }, children: _jsx("span", { style: { fontWeight: 700, padding: "1px 4px", background: "var(--srte-accent-bg)", borderRadius: 3 }, children: "A" }) }), _jsxs("button", { title: "Subscript", onClick: () => exec("subscript"), "aria-pressed": activeState.subscript, style: activeButtonStyle(activeState.subscript), children: ["X", _jsx("sub", { children: "2" })] }), _jsxs("button", { title: "Superscript", onClick: () => exec("superscript"), "aria-pressed": activeState.superscript, style: activeButtonStyle(activeState.superscript), children: ["X", _jsx("sup", { children: "2" })] }), _jsx("button", { title: "Bulleted list", onClick: () => exec("insertUnorderedList"), "aria-pressed": activeState.unorderedList, style: activeButtonStyle(activeState.unorderedList, { padding: "0 10px" }), children: "\u2022 List" }), _jsx("button", { title: "Numbered list", onClick: () => exec("insertOrderedList"), "aria-pressed": activeState.orderedList, style: activeButtonStyle(activeState.orderedList, { padding: "0 10px" }), children: "1. List" }), _jsx("button", { title: "Blockquote", 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",
@@ -2196,54 +2839,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             borderRadius: 6,
                             background: "var(--srte-input-bg)",
                             color: "var(--srte-input-text)",
-                        }, children: ["X", _jsx("sub", { children: "2" })] }), _jsxs("button", { title: "Superscript", onClick: () => exec("superscript"), 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: ["X", _jsx("sup", { children: "2" })] }), _jsx("button", { title: "Bulleted list", onClick: () => exec("insertUnorderedList"), 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: "\u2022 List" }), _jsx("button", { title: "Numbered list", onClick: () => exec("insertOrderedList"), 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: "1. List" }), _jsx("button", { title: "Blockquote", onClick: toggleBlockquote, 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: "\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", { title: "Code block", onClick: () => exec("formatBlock", "<pre>"), style: {
-                            height: 32,
+                        }, children: "\u03A9" }), _jsx("button", { title: "Code block", onClick: () => exec("formatBlock", "<pre>"), "aria-pressed": activeState.codeBlock, style: activeButtonStyle(activeState.codeBlock, {
                             minWidth: 36,
-                            padding: "0 8px",
-                            border: "1px solid var(--srte-input-border)",
-                            borderRadius: 6,
-                            background: "var(--srte-input-bg)",
                             fontFamily: "ui-monospace, SFMono-Regular, Menlo",
-                            color: "var(--srte-input-text)",
-                        }, children: "< />" }), formula && (_jsx("button", { title: "Insert formula", onClick: () => setShowFormulaDialog(true), style: {
+                        }), children: "< />" }), formula && (_jsx("button", { title: "Insert formula", onClick: () => setShowFormulaDialog(true), style: {
                             height: 32,
                             minWidth: 32,
                             padding: "0 8px",
@@ -2323,7 +2922,21 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                     borderRadius: 6,
                                     background: "var(--srte-input-bg)",
                                     color: "var(--srte-input-text)",
-                                }, children: "Export MD" }), _jsxs("div", { style: {
+                                }, 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: {
+                                    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 PDF" }), _jsxs("div", { style: {
                                     display: "inline-flex",
                                     gap: 4,
                                     alignItems: "center",
@@ -2407,17 +3020,19 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     position: "fixed",
                     inset: 0,
                     background: "var(--srte-modal-backdrop)",
+                    backdropFilter: "var(--srte-modal-backdrop-filter)",
+                    WebkitBackdropFilter: "var(--srte-modal-backdrop-filter)",
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
-                    zIndex: 50,
+                    zIndex: 90,
                 }, onClick: () => setShowTableDialog(false), children: _jsxs("div", { style: {
                         background: "var(--srte-modal-bg)",
                         color: "var(--srte-modal-text)",
                         padding: 16,
                         borderRadius: 8,
                         minWidth: 280,
-                    }, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { style: { fontWeight: 600, marginBottom: 8 }, children: "Insert table" }), _jsxs("div", { style: { display: "flex", gap: 12, alignItems: "center" }, children: [_jsx("div", { style: {
+                    }, onMouseDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), children: [_jsx("div", { style: { fontWeight: 600, marginBottom: 8 }, children: "Insert table" }), _jsxs("div", { style: { display: "flex", gap: 12, alignItems: "center" }, children: [_jsx("div", { style: {
                                         display: "grid",
                                         gridTemplateColumns: "repeat(10, 18px)",
                                         gap: 2,
@@ -2451,6 +3066,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     position: "fixed",
                     inset: 0,
                     background: "var(--srte-modal-backdrop)",
+                    backdropFilter: "var(--srte-modal-backdrop-filter)",
+                    WebkitBackdropFilter: "var(--srte-modal-backdrop-filter)",
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
@@ -2505,6 +3122,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     position: "fixed",
                     inset: 0,
                     background: "var(--srte-modal-backdrop)",
+                    backdropFilter: "var(--srte-modal-backdrop-filter)",
+                    WebkitBackdropFilter: "var(--srte-modal-backdrop-filter)",
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
@@ -2571,6 +3190,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     position: "fixed",
                     inset: 0,
                     background: "var(--srte-modal-backdrop)",
+                    backdropFilter: "var(--srte-modal-backdrop-filter)",
+                    WebkitBackdropFilter: "var(--srte-modal-backdrop-filter)",
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
@@ -2615,6 +3236,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     position: "fixed",
                     inset: 0,
                     background: "var(--srte-modal-backdrop)",
+                    backdropFilter: "var(--srte-modal-backdrop-filter)",
+                    WebkitBackdropFilter: "var(--srte-modal-backdrop-filter)",
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
@@ -2712,383 +3335,389 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                         borderRadius: 4,
                                         background: "var(--srte-input-bg)",
                                         color: "var(--srte-modal-text)",
-                                    }, title: sym, children: sym }, i)))] })] }) })), _jsx("div", { style: {
+                                    }, title: sym, children: sym }, i)))] })] }) })), _jsxs("div", { ref: editorScrollRef, style: {
                     width: "100%",
                     maxWidth: "100%",
                     flex: "1 1 auto",
+                    minWidth: 0,
                     minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight,
                     maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
                     overflowY: "auto",
-                    overflowX: "hidden",
+                    overflowX: "auto",
+                    overscrollBehavior: "contain",
                     boxSizing: "border-box",
                     position: "relative",
-                }, children: _jsx("div", { ref: editableRef, contentEditable: !readOnly, suppressContentEditableWarning: true, onInput: handleInput, onCompositionStart: () => (isComposingRef.current = true), onCompositionEnd: () => {
-                        isComposingRef.current = false;
-                        handleInput();
-                    }, onPaste: (e) => {
-                        const items = e.clipboardData?.files;
-                        if (media && items && items.length) {
-                            const hasImage = Array.from(items).some((f) => f.type.startsWith("image/"));
-                            if (hasImage) {
+                    scrollPaddingBottom: 24,
+                }, children: [_jsx("div", { ref: editableRef, contentEditable: !readOnly, suppressContentEditableWarning: true, onInput: handleInput, onKeyUp: updateActiveState, onMouseUp: updateActiveState, onCompositionStart: () => (isComposingRef.current = true), onCompositionEnd: () => {
+                            isComposingRef.current = false;
+                            handleInput();
+                        }, onPaste: (e) => {
+                            const items = e.clipboardData?.files;
+                            if (media && items && items.length) {
+                                const hasImage = Array.from(items).some((f) => f.type.startsWith("image/"));
+                                if (hasImage) {
+                                    e.preventDefault();
+                                    handleLocalImageFiles(items);
+                                    return;
+                                }
+                            }
+                            const html = e.clipboardData?.getData("text/html");
+                            if (html) {
                                 e.preventDefault();
-                                handleLocalImageFiles(items);
-                                return;
+                                insertCleanHtml(cleanPastedHtml(html));
                             }
-                        }
-                        const html = e.clipboardData?.getData("text/html");
-                        if (html) {
-                            e.preventDefault();
-                            insertCleanHtml(cleanPastedHtml(html));
-                        }
-                    }, onDragOver: (e) => {
-                        // Allow dragging images within editor and file drops
-                        if (draggedImageRef.current ||
-                            e.dataTransfer?.types?.includes("Files")) {
-                            e.preventDefault();
-                        }
-                    }, onDrop: (e) => {
-                        // Move existing dragged image inside editor
-                        if (draggedImageRef.current) {
-                            e.preventDefault();
-                            const x = e.clientX;
-                            const y = e.clientY;
-                            let range = null;
-                            // @ts-ignore
-                            if (document.caretRangeFromPoint) {
-                                // @ts-ignore
-                                range = document.caretRangeFromPoint(x, y);
+                        }, onDragOver: (e) => {
+                            // Allow dragging images within editor and file drops
+                            if (draggedImageRef.current ||
+                                e.dataTransfer?.types?.includes("Files")) {
+                                e.preventDefault();
                             }
-                            else if (document.caretPositionFromPoint) {
-                                const pos = document.caretPositionFromPoint(x, y);
-                                if (pos) {
-                                    range = document.createRange();
-                                    range.setStart(pos.offsetNode, pos.offset);
+                        }, onDrop: (e) => {
+                            // Move existing dragged image inside editor
+                            if (draggedImageRef.current) {
+                                e.preventDefault();
+                                const x = e.clientX;
+                                const y = e.clientY;
+                                let range = null;
+                                // @ts-ignore
+                                if (document.caretRangeFromPoint) {
+                                    // @ts-ignore
+                                    range = document.caretRangeFromPoint(x, y);
                                 }
-                            }
-                            const img = draggedImageRef.current;
-                            draggedImageRef.current = null;
-                            if (range &&
-                                img &&
-                                editableRef.current?.contains(range.commonAncestorContainer)) {
-                                // Avoid inserting inside the image itself
-                                if (range.startContainer === img || range.endContainer === img)
-                                    return;
-                                // If dropping inside a link, insert right after the link element
-                                let container = range.commonAncestorContainer;
-                                let linkAncestor = null;
-                                let el = container;
-                                while (el && el !== editableRef.current) {
-                                    if (el.tagName === "A") {
-                                        linkAncestor = el;
-                                        break;
+                                else if (document.caretPositionFromPoint) {
+                                    const pos = document.caretPositionFromPoint(x, y);
+                                    if (pos) {
+                                        range = document.createRange();
+                                        range.setStart(pos.offsetNode, pos.offset);
                                     }
-                                    el = el.parentElement;
-                                }
-                                if (linkAncestor) {
-                                    linkAncestor.parentElement?.insertBefore(img, linkAncestor.nextSibling);
                                 }
-                                else {
-                                    range.insertNode(img);
+                                const img = draggedImageRef.current;
+                                draggedImageRef.current = null;
+                                if (range &&
+                                    img &&
+                                    editableRef.current?.contains(range.commonAncestorContainer)) {
+                                    // Avoid inserting inside the image itself
+                                    if (range.startContainer === img || range.endContainer === img)
+                                        return;
+                                    // If dropping inside a link, insert right after the link element
+                                    let container = range.commonAncestorContainer;
+                                    let linkAncestor = null;
+                                    let el = container;
+                                    while (el && el !== editableRef.current) {
+                                        if (el.tagName === "A") {
+                                            linkAncestor = el;
+                                            break;
+                                        }
+                                        el = el.parentElement;
+                                    }
+                                    if (linkAncestor) {
+                                        linkAncestor.parentElement?.insertBefore(img, linkAncestor.nextSibling);
+                                    }
+                                    else {
+                                        range.insertNode(img);
+                                    }
+                                    const r = document.createRange();
+                                    r.setStartAfter(img);
+                                    r.collapse(true);
+                                    safeSelectRange(r);
+                                    setSelectedImage(img);
+                                    scheduleImageOverlay();
+                                    handleInput();
                                 }
-                                const r = document.createRange();
-                                r.setStartAfter(img);
-                                r.collapse(true);
-                                safeSelectRange(r);
-                                setSelectedImage(img);
-                                scheduleImageOverlay();
-                                handleInput();
+                                return;
                             }
-                            return;
-                        }
-                        if (media && e.dataTransfer?.files?.length) {
-                            e.preventDefault();
-                            // Try to move caret to drop point
-                            const x = e.clientX;
-                            const y = e.clientY;
-                            let range = null;
-                            // @ts-ignore
-                            if (document.caretRangeFromPoint) {
+                            if (media && e.dataTransfer?.files?.length) {
+                                e.preventDefault();
+                                // Try to move caret to drop point
+                                const x = e.clientX;
+                                const y = e.clientY;
+                                let range = null;
                                 // @ts-ignore
-                                range = document.caretRangeFromPoint(x, y);
-                            }
-                            else if (document.caretPositionFromPoint) {
-                                const pos = document.caretPositionFromPoint(x, y);
-                                if (pos) {
-                                    range = document.createRange();
-                                    range.setStart(pos.offsetNode, pos.offset);
+                                if (document.caretRangeFromPoint) {
+                                    // @ts-ignore
+                                    range = document.caretRangeFromPoint(x, y);
+                                }
+                                else if (document.caretPositionFromPoint) {
+                                    const pos = document.caretPositionFromPoint(x, y);
+                                    if (pos) {
+                                        range = document.createRange();
+                                        range.setStart(pos.offsetNode, pos.offset);
+                                    }
+                                }
+                                if (range) {
+                                    const sel = window.getSelection();
+                                    sel?.removeAllRanges();
+                                    sel?.addRange(range);
                                 }
+                                handleLocalImageFiles(e.dataTransfer.files);
                             }
-                            if (range) {
-                                const sel = window.getSelection();
-                                sel?.removeAllRanges();
-                                sel?.addRange(range);
+                        }, onClick: (e) => {
+                            const t = e.target;
+                            if (t && t.tagName === "IMG") {
+                                setSelectedImage(t);
+                                scheduleImageOverlay();
                             }
-                            handleLocalImageFiles(e.dataTransfer.files);
-                        }
-                    }, onClick: (e) => {
-                        const t = e.target;
-                        if (t && t.tagName === "IMG") {
-                            setSelectedImage(t);
-                            scheduleImageOverlay();
-                        }
-                        else {
-                            setSelectedImage(null);
-                            setImageOverlay(null);
-                        }
-                    }, onDragStart: (e) => {
-                        const t = e.target;
-                        if (t && t.tagName === "IMG") {
-                            draggedImageRef.current = t;
-                            try {
-                                e.dataTransfer?.setData("text/plain", "moving-image");
-                                e.dataTransfer.effectAllowed = "move";
-                                // Provide a subtle drag image
-                                const dt = e.dataTransfer;
-                                if (dt && typeof dt.setDragImage === "function") {
-                                    const ghost = new Image();
-                                    ghost.src = t.src;
-                                    ghost.width = Math.min(120, t.width);
-                                    ghost.height = Math.min(120, t.height);
-                                    dt.setDragImage(ghost, 10, 10);
+                            else {
+                                setSelectedImage(null);
+                                setImageOverlay(null);
+                            }
+                        }, onDragStart: (e) => {
+                            const t = e.target;
+                            if (t && t.tagName === "IMG") {
+                                draggedImageRef.current = t;
+                                try {
+                                    e.dataTransfer?.setData("text/plain", "moving-image");
+                                    e.dataTransfer.effectAllowed = "move";
+                                    // Provide a subtle drag image
+                                    const dt = e.dataTransfer;
+                                    if (dt && typeof dt.setDragImage === "function") {
+                                        const ghost = new Image();
+                                        ghost.src = t.src;
+                                        ghost.width = Math.min(120, t.width);
+                                        ghost.height = Math.min(120, t.height);
+                                        dt.setDragImage(ghost, 10, 10);
+                                    }
                                 }
+                                catch { }
                             }
-                            catch { }
-                        }
-                        else {
+                            else {
+                                draggedImageRef.current = null;
+                            }
+                        }, onDragEnd: () => {
                             draggedImageRef.current = null;
-                        }
-                    }, onDragEnd: () => {
-                        draggedImageRef.current = null;
-                    }, style: {
-                        minHeight: "100%",
-                        maxWidth: "100%",
-                        overflowX: "hidden",
-                        padding: "16px",
-                        outline: "none",
-                        lineHeight: 1.6,
-                        boxSizing: "border-box",
-                        fontFamily: defaultFont || "inherit",
-                    }, "data-placeholder": placeholder, onFocus: (e) => {
-                        // Ensure the editor has at least one paragraph to type into
-                        const el = e.currentTarget;
-                        if (!el.innerHTML || el.innerHTML === "<br>") {
-                            el.innerHTML = "<p><br></p>";
-                        }
-                    }, onKeyDown: (e) => {
-                        if (formula &&
-                            (e.metaKey || e.ctrlKey) &&
-                            String(e.key).toLowerCase() === "m") {
-                            e.preventDefault();
-                            setShowFormulaDialog(true);
-                            return;
-                        }
-                        // Keep Tab for indentation in lists; otherwise insert 2 spaces
-                        if (e.key === "Tab") {
-                            e.preventDefault();
-                            if (document.queryCommandState("insertUnorderedList") ||
-                                document.queryCommandState("insertOrderedList")) {
-                                exec(e.shiftKey ? "outdent" : "indent");
+                        }, style: {
+                            minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight,
+                            maxWidth: "100%",
+                            overflowX: "visible",
+                            padding: "16px",
+                            paddingBottom: "32px",
+                            outline: "none",
+                            lineHeight: 1.6,
+                            boxSizing: "border-box",
+                            fontFamily: defaultFont || "inherit",
+                        }, "data-placeholder": placeholder, onFocus: (e) => {
+                            // Ensure the editor has at least one paragraph to type into
+                            const el = e.currentTarget;
+                            if (!el.innerHTML || el.innerHTML === "<br>") {
+                                el.innerHTML = "<p><br></p>";
                             }
-                            else {
-                                document.execCommand("insertText", false, "  ");
+                            updateActiveState();
+                        }, onKeyDown: (e) => {
+                            if (formula &&
+                                (e.metaKey || e.ctrlKey) &&
+                                String(e.key).toLowerCase() === "m") {
+                                e.preventDefault();
+                                setShowFormulaDialog(true);
+                                return;
                             }
-                        }
-                        // Table navigation with arrows inside cells
-                        if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
-                            const sel = window.getSelection();
-                            const cell = getClosestCell(sel?.anchorNode || null);
-                            if (table &&
-                                cell &&
-                                cell.parentElement &&
-                                cell.parentElement.parentElement) {
-                                const row = cell.parentElement;
-                                const tbody = row.parentElement;
-                                const cells = Array.from(row.children).filter((c) => c.tagName === "TD" ||
-                                    c.tagName === "TH");
-                                const rows = Array.from(tbody.children);
-                                const rIdx = rows.indexOf(row);
-                                const cIdx = cells.indexOf(cell);
-                                const atStart = (sel?.anchorOffset || 0) === 0;
-                                const cellTextLen = (cell.textContent || "").length;
-                                const atEnd = (sel?.anchorOffset || 0) >= cellTextLen;
-                                let target = null;
-                                if (e.key === "ArrowLeft" && atStart && cIdx > 0) {
-                                    target = row.children[cIdx - 1];
-                                }
-                                else if (e.key === "ArrowRight" &&
-                                    atEnd &&
-                                    cIdx < row.children.length - 1) {
-                                    target = row.children[cIdx + 1];
-                                }
-                                else if (e.key === "ArrowUp" && rIdx > 0 && atStart) {
-                                    target = rows[rIdx - 1].children[cIdx];
+                            // Keep Tab for indentation in lists; otherwise insert 2 spaces
+                            if (e.key === "Tab") {
+                                e.preventDefault();
+                                if (document.queryCommandState("insertUnorderedList") ||
+                                    document.queryCommandState("insertOrderedList")) {
+                                    exec(e.shiftKey ? "outdent" : "indent");
                                 }
-                                else if (e.key === "ArrowDown" &&
-                                    rIdx < rows.length - 1 &&
-                                    atEnd) {
-                                    target = rows[rIdx + 1].children[cIdx];
+                                else {
+                                    document.execCommand("insertText", false, "  ");
                                 }
-                                if (target) {
-                                    e.preventDefault();
-                                    moveCaretToCell(target, e.key === "ArrowRight" || e.key === "ArrowDown");
+                            }
+                            // Table navigation with arrows inside cells
+                            if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
+                                const sel = window.getSelection();
+                                const cell = getClosestCell(sel?.anchorNode || null);
+                                if (table &&
+                                    cell &&
+                                    cell.parentElement &&
+                                    cell.parentElement.parentElement) {
+                                    const row = cell.parentElement;
+                                    const tbody = row.parentElement;
+                                    const cells = Array.from(row.children).filter((c) => c.tagName === "TD" ||
+                                        c.tagName === "TH");
+                                    const rows = Array.from(tbody.children);
+                                    const rIdx = rows.indexOf(row);
+                                    const cIdx = cells.indexOf(cell);
+                                    const atStart = (sel?.anchorOffset || 0) === 0;
+                                    const cellTextLen = (cell.textContent || "").length;
+                                    const atEnd = (sel?.anchorOffset || 0) >= cellTextLen;
+                                    let target = null;
+                                    if (e.key === "ArrowLeft" && atStart && cIdx > 0) {
+                                        target = row.children[cIdx - 1];
+                                    }
+                                    else if (e.key === "ArrowRight" &&
+                                        atEnd &&
+                                        cIdx < row.children.length - 1) {
+                                        target = row.children[cIdx + 1];
+                                    }
+                                    else if (e.key === "ArrowUp" && rIdx > 0 && atStart) {
+                                        target = rows[rIdx - 1].children[cIdx];
+                                    }
+                                    else if (e.key === "ArrowDown" &&
+                                        rIdx < rows.length - 1 &&
+                                        atEnd) {
+                                        target = rows[rIdx + 1].children[cIdx];
+                                    }
+                                    if (target) {
+                                        e.preventDefault();
+                                        moveCaretToCell(target, e.key === "ArrowRight" || e.key === "ArrowDown");
+                                    }
                                 }
                             }
-                        }
-                    }, onMouseDown: (e) => {
-                        const cell = getClosestCell(e.target);
-                        if (!cell) {
-                            clearSelectionDecor();
-                            return;
-                        }
-                        const pos = getCellPosition(cell);
-                        if (!pos)
-                            return;
-                        selectingRef.current = { tbody: pos.tbody, start: cell };
-                        const onMove = (ev) => {
-                            const under = document.elementFromPoint(ev.clientX, ev.clientY);
-                            const overCell = getClosestCell(under);
-                            const startInfo = selectingRef.current;
-                            if (!overCell || !startInfo)
-                                return;
-                            const a = getCellPosition(startInfo.start);
-                            const b = getCellPosition(overCell);
-                            if (!a || !b || a.tbody !== b.tbody)
+                        }, onMouseDown: (e) => {
+                            const cell = getClosestCell(e.target);
+                            if (!cell) {
+                                clearSelectionDecor();
                                 return;
-                            const sr = Math.min(a.rIdx, b.rIdx);
-                            const sc = Math.min(a.cIdx, b.cIdx);
-                            const er = Math.max(a.rIdx, b.rIdx);
-                            const ec = Math.max(a.cIdx, b.cIdx);
-                            updateSelectionDecor(a.tbody, sr, sc, er, ec);
-                        };
-                        const onUp = () => {
-                            window.removeEventListener("mousemove", onMove);
-                            window.removeEventListener("mouseup", onUp);
-                            selectingRef.current = null;
-                        };
-                        window.addEventListener("mousemove", onMove);
-                        window.addEventListener("mouseup", onUp);
-                    }, onContextMenu: (e) => {
-                        const target = e.target;
-                        if (target && target.tagName === "IMG") {
-                            e.preventDefault();
-                            const vw = window.innerWidth;
-                            const vh = window.innerHeight;
-                            const menuW = 220;
-                            const menuH = 200;
-                            const x = Math.max(8, Math.min(e.clientX, vw - menuW - 8));
-                            const y = Math.max(8, Math.min(e.clientY, vh - menuH - 8));
-                            setImageMenu({ x, y, img: target });
-                            setTableMenu(null);
-                            return;
-                        }
-                        const cell = getClosestCell(e.target);
-                        if (cell) {
-                            e.preventDefault();
-                            const vw = window.innerWidth;
-                            const vh = window.innerHeight;
-                            const menuW = 220;
-                            const menuH = 300;
-                            const x = Math.max(8, Math.min(e.clientX, vw - menuW - 8));
-                            const y = Math.max(8, Math.min(e.clientY, vh - menuH - 8));
-                            setTableMenu({ x, y, cell });
-                        }
-                        else {
-                            setTableMenu(null);
-                            setImageMenu(null);
-                        }
-                    } }) }), selectedImage && imageOverlay && (_jsxs("div", { style: {
-                    position: "fixed",
-                    left: imageOverlay.left,
-                    top: imageOverlay.top,
-                    width: imageOverlay.width,
-                    height: imageOverlay.height,
-                    pointerEvents: "none",
-                    zIndex: 49,
-                }, children: [_jsx("div", { style: {
-                            position: "absolute",
-                            inset: 0,
-                            outline: "2px solid var(--srte-accent)",
-                            outlineOffset: -2,
-                        } }), _jsx("div", { title: "Resize", onMouseDown: (e) => {
-                            e.preventDefault();
-                            if (!selectedImage)
+                            }
+                            const pos = getCellPosition(cell);
+                            if (!pos)
                                 return;
-                            resizingRef.current = {
-                                side: "left",
-                                startX: e.clientX,
-                                startWidth: selectedImage.getBoundingClientRect().width,
-                            };
+                            selectingRef.current = { tbody: pos.tbody, start: cell };
                             const onMove = (ev) => {
-                                const info = resizingRef.current;
-                                if (!info || !selectedImage)
+                                const under = document.elementFromPoint(ev.clientX, ev.clientY);
+                                const overCell = getClosestCell(under);
+                                const startInfo = selectingRef.current;
+                                if (!overCell || !startInfo)
                                     return;
-                                const delta = info.startX - ev.clientX;
-                                const next = Math.max(80, Math.round(info.startWidth + delta));
-                                selectedImage.style.width = next + "px";
-                                selectedImage.style.height = "auto";
-                                scheduleImageOverlay();
-                            };
-                            const onUp = () => {
-                                window.removeEventListener("mousemove", onMove);
-                                window.removeEventListener("mouseup", onUp);
-                                resizingRef.current = null;
-                                handleInput();
-                            };
-                            window.addEventListener("mousemove", onMove);
-                            window.addEventListener("mouseup", onUp);
-                        }, style: {
-                            position: "absolute",
-                            left: -6,
-                            top: "50%",
-                            transform: "translateY(-50%)",
-                            width: 8,
-                            height: 24,
-                            background: "var(--srte-accent)",
-                            borderRadius: 2,
-                            cursor: "ew-resize",
-                            pointerEvents: "auto",
-                        } }), _jsx("div", { title: "Resize", onMouseDown: (e) => {
-                            e.preventDefault();
-                            if (!selectedImage)
-                                return;
-                            resizingRef.current = {
-                                side: "right",
-                                startX: e.clientX,
-                                startWidth: selectedImage.getBoundingClientRect().width,
-                            };
-                            const onMove = (ev) => {
-                                const info = resizingRef.current;
-                                if (!info || !selectedImage)
+                                const a = getCellPosition(startInfo.start);
+                                const b = getCellPosition(overCell);
+                                if (!a || !b || a.tbody !== b.tbody)
                                     return;
-                                const delta = ev.clientX - info.startX;
-                                const next = Math.max(80, Math.round(info.startWidth + delta));
-                                selectedImage.style.width = next + "px";
-                                selectedImage.style.height = "auto";
-                                scheduleImageOverlay();
+                                const sr = Math.min(a.rIdx, b.rIdx);
+                                const sc = Math.min(a.cIdx, b.cIdx);
+                                const er = Math.max(a.rIdx, b.rIdx);
+                                const ec = Math.max(a.cIdx, b.cIdx);
+                                updateSelectionDecor(a.tbody, sr, sc, er, ec);
                             };
                             const onUp = () => {
                                 window.removeEventListener("mousemove", onMove);
                                 window.removeEventListener("mouseup", onUp);
-                                resizingRef.current = null;
-                                handleInput();
+                                selectingRef.current = null;
                             };
                             window.addEventListener("mousemove", onMove);
                             window.addEventListener("mouseup", onUp);
-                        }, style: {
+                        }, onContextMenu: (e) => {
+                            const target = e.target;
+                            if (target && target.tagName === "IMG") {
+                                e.preventDefault();
+                                const vw = window.innerWidth;
+                                const vh = window.innerHeight;
+                                const menuW = 220;
+                                const menuH = 200;
+                                const x = Math.max(8, Math.min(e.clientX, vw - menuW - 8));
+                                const y = Math.max(8, Math.min(e.clientY, vh - menuH - 8));
+                                setImageMenu({ x, y, img: target });
+                                setTableMenu(null);
+                                return;
+                            }
+                            const cell = getClosestCell(e.target);
+                            if (cell) {
+                                e.preventDefault();
+                                const vw = window.innerWidth;
+                                const vh = window.innerHeight;
+                                const menuW = 220;
+                                const menuH = 300;
+                                const x = Math.max(8, Math.min(e.clientX, vw - menuW - 8));
+                                const y = Math.max(8, Math.min(e.clientY, vh - menuH - 8));
+                                setTableMenu({ x, y, cell });
+                            }
+                            else {
+                                setTableMenu(null);
+                                setImageMenu(null);
+                            }
+                        } }), selectedImage && imageOverlay && (_jsxs("div", { style: {
                             position: "absolute",
-                            right: -6,
-                            top: "50%",
-                            transform: "translateY(-50%)",
-                            width: 8,
-                            height: 24,
-                            background: "var(--srte-accent)",
-                            borderRadius: 2,
-                            cursor: "ew-resize",
-                            pointerEvents: "auto",
-                        } })] })), tableMenu && (_jsx("div", { style: {
+                            left: imageOverlay.left,
+                            top: imageOverlay.top,
+                            width: imageOverlay.width,
+                            height: imageOverlay.height,
+                            pointerEvents: "none",
+                            zIndex: 5,
+                        }, children: [_jsx("div", { style: {
+                                    position: "absolute",
+                                    inset: 0,
+                                    outline: "2px solid var(--srte-accent)",
+                                    outlineOffset: -2,
+                                } }), _jsx("div", { title: "Resize", onMouseDown: (e) => {
+                                    e.preventDefault();
+                                    if (!selectedImage)
+                                        return;
+                                    resizingRef.current = {
+                                        side: "left",
+                                        startX: e.clientX,
+                                        startWidth: selectedImage.getBoundingClientRect().width,
+                                    };
+                                    const onMove = (ev) => {
+                                        const info = resizingRef.current;
+                                        if (!info || !selectedImage)
+                                            return;
+                                        const delta = info.startX - ev.clientX;
+                                        const next = Math.max(80, Math.round(info.startWidth + delta));
+                                        selectedImage.style.width = next + "px";
+                                        selectedImage.style.height = "auto";
+                                        scheduleImageOverlay();
+                                    };
+                                    const onUp = () => {
+                                        window.removeEventListener("mousemove", onMove);
+                                        window.removeEventListener("mouseup", onUp);
+                                        resizingRef.current = null;
+                                        handleInput();
+                                    };
+                                    window.addEventListener("mousemove", onMove);
+                                    window.addEventListener("mouseup", onUp);
+                                }, style: {
+                                    position: "absolute",
+                                    left: -4,
+                                    top: "50%",
+                                    transform: "translateY(-50%)",
+                                    width: 8,
+                                    height: 24,
+                                    background: "var(--srte-accent)",
+                                    borderRadius: 2,
+                                    cursor: "ew-resize",
+                                    pointerEvents: "auto",
+                                } }), _jsx("div", { title: "Resize", onMouseDown: (e) => {
+                                    e.preventDefault();
+                                    if (!selectedImage)
+                                        return;
+                                    resizingRef.current = {
+                                        side: "right",
+                                        startX: e.clientX,
+                                        startWidth: selectedImage.getBoundingClientRect().width,
+                                    };
+                                    const onMove = (ev) => {
+                                        const info = resizingRef.current;
+                                        if (!info || !selectedImage)
+                                            return;
+                                        const delta = ev.clientX - info.startX;
+                                        const next = Math.max(80, Math.round(info.startWidth + delta));
+                                        selectedImage.style.width = next + "px";
+                                        selectedImage.style.height = "auto";
+                                        scheduleImageOverlay();
+                                    };
+                                    const onUp = () => {
+                                        window.removeEventListener("mousemove", onMove);
+                                        window.removeEventListener("mouseup", onUp);
+                                        resizingRef.current = null;
+                                        handleInput();
+                                    };
+                                    window.addEventListener("mousemove", onMove);
+                                    window.addEventListener("mouseup", onUp);
+                                }, style: {
+                                    position: "absolute",
+                                    right: -4,
+                                    top: "50%",
+                                    transform: "translateY(-50%)",
+                                    width: 8,
+                                    height: 24,
+                                    background: "var(--srte-accent)",
+                                    borderRadius: 2,
+                                    cursor: "ew-resize",
+                                    pointerEvents: "auto",
+                                } })] }))] }), tableMenu && (_jsx("div", { style: {
                     position: "fixed",
                     inset: 0,
                     zIndex: 60,
+                    background: "transparent",
                 }, onClick: () => setTableMenu(null), onContextMenu: (e) => {
                     // Prevent native menu while overlay is shown and reposition our menu
                     e.preventDefault();
@@ -3120,56 +3749,53 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         maxHeight: 260,
                         overflowY: "auto",
                         color: "var(--srte-menu-text)",
-                    }, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { style: { fontWeight: 600, fontSize: 11, margin: "2px 6px 6px" }, children: "Table" }), _jsxs("div", { style: { display: "grid", gap: 4 }, children: [_jsxs("button", { style: {
-                                        display: "flex",
-                                        alignItems: "center",
-                                        gap: 8,
-                                        padding: "6px 8px",
-                                        fontSize: 12,
-                                    }, onClick: () => setShowTableDialog(true), children: [_jsx("span", { children: "\u2795" }), _jsx("span", { children: "Insert table\u2026" })] }), _jsx("hr", { style: { margin: "4px 0" } }), _jsxs("div", { style: {
+                    }, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { style: { fontWeight: 600, fontSize: 11, margin: "2px 6px 6px" }, children: "Table" }), _jsxs("div", { style: { display: "grid", gap: 4 }, children: [_jsxs("div", { style: {
                                         display: "flex",
                                         gap: 8,
                                         alignItems: "center",
                                         padding: "4px 6px",
                                         fontSize: 12,
                                     }, children: [_jsx("span", { children: "Fill:" }), _jsx("input", { type: "color", defaultValue: "#ffffff", onChange: (e) => {
-                                                applyBgToSelection(e.target.value, tableMenu.cell);
-                                                setTableMenu(null);
+                                                runTableCellAction(tableMenu.cell, (cell) => applyBgToSelection(e.target.value, cell));
                                             }, style: {
                                                 width: 28,
                                                 height: 18,
                                                 padding: 0,
                                                 border: "none",
                                                 background: "transparent",
-                                            } })] }), _jsxs("button", { style: {
+                                            } })] }), _jsxs("button", { title: "Show or hide border for this cell, or for the selected cell range.", style: {
                                         display: "flex",
                                         alignItems: "center",
                                         gap: 8,
                                         padding: "6px 8px",
                                         fontSize: 12,
                                     }, onClick: () => {
-                                        toggleBorderSelection(tableMenu.cell);
-                                        setTableMenu(null);
-                                    }, children: [_jsx("span", { children: "\u25A6" }), _jsx("span", { children: "Toggle border" })] }), _jsx("hr", { style: { margin: "4px 0" } }), _jsxs("button", { disabled: !canMergeSelection(), style: {
+                                        runTableCellAction(tableMenu.cell, toggleBorderSelection);
+                                    }, children: [_jsx("span", { children: "\u25A6" }), _jsx("span", { children: "Show/hide cell border" })] }), _jsx("hr", { style: { margin: "4px 0" } }), _jsxs("button", { disabled: !canMergeFromCell(tableMenu.cell), style: {
                                         display: "flex",
                                         alignItems: "center",
                                         gap: 8,
                                         padding: "6px 8px",
                                         fontSize: 12,
-                                        opacity: canMergeSelection() ? 1 : 0.5,
-                                        cursor: canMergeSelection() ? "pointer" : "default",
+                                        opacity: canMergeFromCell(tableMenu.cell) ? 1 : 0.45,
+                                        cursor: canMergeFromCell(tableMenu.cell) ? "pointer" : "not-allowed",
                                     }, onClick: () => {
+                                        if (!canMergeFromCell(tableMenu.cell))
+                                            return;
                                         mergeSelection();
                                         setTableMenu(null);
-                                    }, children: [_jsx("span", { children: "\u21C4" }), _jsx("span", { children: "Merge cells" })] }), _jsxs("button", { style: {
+                                    }, children: [_jsx("span", { children: "\u21C4" }), _jsx("span", { children: "Merge cells" })] }), _jsxs("button", { disabled: !canSplitCell(tableMenu.cell), title: canSplitCell(tableMenu.cell) ? "Split this merged cell back into individual cells." : "Only merged cells can be split.", style: {
                                         display: "flex",
                                         alignItems: "center",
                                         gap: 8,
                                         padding: "6px 8px",
                                         fontSize: 12,
+                                        opacity: canSplitCell(tableMenu.cell) ? 1 : 0.45,
+                                        cursor: canSplitCell(tableMenu.cell) ? "pointer" : "not-allowed",
                                     }, onClick: () => {
-                                        splitCell(tableMenu.cell);
-                                        setTableMenu(null);
+                                        if (!canSplitCell(tableMenu.cell))
+                                            return;
+                                        runTableCellAction(tableMenu.cell, splitCell);
                                     }, children: [_jsx("span", { children: "\u2922" }), _jsx("span", { children: "Split cell" })] }), _jsx("hr", { style: { margin: "4px 0" } }), _jsxs("button", { style: {
                                         display: "flex",
                                         alignItems: "center",
@@ -3177,8 +3803,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                         padding: "6px 8px",
                                         fontSize: 12,
                                     }, onClick: () => {
-                                        addRow(tableMenu.cell, "above");
-                                        setTableMenu(null);
+                                        runTableCellAction(tableMenu.cell, (cell) => addRow(cell, "above"));
                                     }, children: [_jsx("span", { children: "\u21A5" }), _jsx("span", { children: "Row above" })] }), _jsxs("button", { style: {
                                         display: "flex",
                                         alignItems: "center",
@@ -3186,8 +3811,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                         padding: "6px 8px",
                                         fontSize: 12,
                                     }, onClick: () => {
-                                        addRow(tableMenu.cell, "below");
-                                        setTableMenu(null);
+                                        runTableCellAction(tableMenu.cell, (cell) => addRow(cell, "below"));
                                     }, children: [_jsx("span", { children: "\u21A7" }), _jsx("span", { children: "Row below" })] }), _jsxs("button", { style: {
                                         display: "flex",
                                         alignItems: "center",
@@ -3195,8 +3819,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                         padding: "6px 8px",
                                         fontSize: 12,
                                     }, onClick: () => {
-                                        addCol(tableMenu.cell, "left");
-                                        setTableMenu(null);
+                                        runTableCellAction(tableMenu.cell, (cell) => addCol(cell, "left"));
                                     }, children: [_jsx("span", { children: "\u2190" }), _jsx("span", { children: "Column left" })] }), _jsxs("button", { style: {
                                         display: "flex",
                                         alignItems: "center",
@@ -3204,8 +3827,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                         padding: "6px 8px",
                                         fontSize: 12,
                                     }, onClick: () => {
-                                        addCol(tableMenu.cell, "right");
-                                        setTableMenu(null);
+                                        runTableCellAction(tableMenu.cell, (cell) => addCol(cell, "right"));
                                     }, children: [_jsx("span", { children: "\u2192" }), _jsx("span", { children: "Column right" })] }), _jsxs("button", { style: {
                                         display: "flex",
                                         alignItems: "center",
@@ -3213,8 +3835,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                         padding: "6px 8px",
                                         fontSize: 12,
                                     }, onClick: () => {
-                                        deleteRow(tableMenu.cell);
-                                        setTableMenu(null);
+                                        runTableCellAction(tableMenu.cell, deleteRow);
                                     }, children: [_jsx("span", { children: "\u2716" }), _jsx("span", { children: "Delete row" })] }), _jsxs("button", { style: {
                                         display: "flex",
                                         alignItems: "center",
@@ -3222,8 +3843,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                         padding: "6px 8px",
                                         fontSize: 12,
                                     }, onClick: () => {
-                                        deleteCol(tableMenu.cell);
-                                        setTableMenu(null);
+                                        runTableCellAction(tableMenu.cell, deleteCol);
                                     }, children: [_jsx("span", { children: "\u2716" }), _jsx("span", { children: "Delete column" })] }), _jsxs("button", { style: {
                                         display: "flex",
                                         alignItems: "center",
@@ -3231,36 +3851,37 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                         padding: "6px 8px",
                                         fontSize: 12,
                                     }, onClick: () => {
-                                        toggleHeaderCell(tableMenu.cell);
-                                        setTableMenu(null);
-                                    }, children: [_jsx("span", { children: "H" }), _jsx("span", { children: "Toggle header" })] }), _jsxs("button", { style: {
+                                        runTableCellAction(tableMenu.cell, toggleHeaderCell);
+                                    }, children: [_jsx("span", { children: "H" }), _jsx("span", { children: tableMenu.cell.tagName === "TH" ? "Remove cell header" : "Make cell header" })] }), _jsxs("button", { style: {
                                         display: "flex",
                                         alignItems: "center",
                                         gap: 8,
                                         padding: "6px 8px",
                                         fontSize: 12,
                                     }, onClick: () => {
-                                        toggleHeaderRow(tableMenu.cell);
-                                        setTableMenu(null);
-                                    }, children: [_jsx("span", { children: "H\u2081" }), _jsx("span", { children: "Toggle header row" })] }), _jsxs("button", { style: {
+                                        runTableCellAction(tableMenu.cell, toggleHeaderRow);
+                                    }, children: [_jsx("span", { children: "H\u2081" }), _jsx("span", { children: "Make this row header" })] }), _jsxs("button", { style: {
                                         display: "flex",
                                         alignItems: "center",
                                         gap: 8,
                                         padding: "6px 8px",
                                         fontSize: 12,
                                     }, onClick: () => {
-                                        toggleHeaderColumn(tableMenu.cell);
-                                        setTableMenu(null);
-                                    }, children: [_jsx("span", { children: "H\u2195" }), _jsx("span", { children: "Toggle header column" })] }), _jsx("hr", { style: { margin: "4px 0" } }), _jsxs("button", { style: {
+                                        runTableCellAction(tableMenu.cell, toggleHeaderColumn);
+                                    }, children: [_jsx("span", { children: "H\u2195" }), _jsx("span", { children: "Make this column header" })] }), _jsx("hr", { style: { margin: "4px 0" } }), _jsxs("button", { style: {
                                         display: "flex",
                                         alignItems: "center",
                                         gap: 8,
                                         padding: "6px 8px",
                                         fontSize: 12,
                                     }, onClick: () => {
-                                        deleteTable(tableMenu.cell);
-                                        setTableMenu(null);
-                                    }, children: [_jsx("span", { children: "\uD83D\uDDD1" }), _jsx("span", { children: "Delete table" })] })] })] }) })), imageMenu && (_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 60 }, onClick: () => setImageMenu(null), onContextMenu: (e) => {
+                                        runTableCellAction(tableMenu.cell, deleteTable);
+                                    }, children: [_jsx("span", { children: "\uD83D\uDDD1" }), _jsx("span", { children: "Delete table" })] })] })] }) })), imageMenu && (_jsx("div", { style: {
+                    position: "fixed",
+                    inset: 0,
+                    zIndex: 60,
+                    background: "transparent",
+                }, onClick: () => setImageMenu(null), onContextMenu: (e) => {
                     e.preventDefault();
                     const vw = window.innerWidth;
                     const vh = window.innerHeight;