smartrte-react 0.2.3 → 0.2.5

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();
@@ -866,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;
@@ -1525,13 +1922,12 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     };
     const exportPdf = () => {
         const html = editableRef.current?.innerHTML || "";
-        const printWindow = window.open("", "_blank", "noopener,noreferrer,width=900,height=700");
+        const printWindow = window.open("", "_blank", "width=900,height=700");
         if (!printWindow)
             return;
-        printWindow.document.write(`<!doctype html><html><head><title>Export PDF</title><style>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}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}</body></html>`);
+        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();
-        printWindow.focus();
-        setTimeout(() => printWindow.print(), 250);
     };
     const fixNegativeMargins = (root) => {
         try {
@@ -1753,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>";
         }
@@ -1836,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));
@@ -1854,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;
@@ -1897,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(" ");
         }
@@ -1930,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();
@@ -1955,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;";
@@ -1985,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;";
@@ -2014,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);
@@ -2046,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;";
@@ -2059,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;";
@@ -2074,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();
@@ -2105,37 +2507,35 @@ 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;
-                }
-            }
+            const cells = getCellsInGridRect(sel.tbody, sel.sr, sel.sc, sel.er, sel.ec);
+            clearSelectionDecor();
+            cells.forEach((cell) => {
+                cell.style.background = hex;
+            });
         }
         else if (fallbackCell) {
+            clearSelectionDecor();
             fallbackCell.style.background = hex;
         }
     };
@@ -2143,25 +2543,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');
@@ -2282,6 +2678,27 @@ 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)",
@@ -2294,7 +2711,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             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%",
@@ -2343,7 +2760,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>");
@@ -2360,42 +2777,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) {
@@ -2452,45 +2834,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: {
-                            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("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: {
+                        }, 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",
@@ -2498,16 +2842,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             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",
@@ -2685,17 +3023,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,
@@ -2729,6 +3069,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",
@@ -2783,6 +3125,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",
@@ -2849,6 +3193,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",
@@ -2893,6 +3239,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",
@@ -2990,7 +3338,7 @@ 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",
@@ -3003,374 +3351,376 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     boxSizing: "border-box",
                     position: "relative",
                     scrollPaddingBottom: 24,
-                }, 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) {
+                }, 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: 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>";
-                        }
-                    }, 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)
+                        }, onMouseDown: (e) => {
+                            const cell = getClosestCell(e.target);
+                            if (!cell) {
+                                clearSelectionDecor();
                                 return;
-                            const a = getCellPosition(startInfo.start);
-                            const b = getCellPosition(overCell);
-                            if (!a || !b || a.tbody !== b.tbody)
-                                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();
@@ -3402,56 +3752,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",
@@ -3459,8 +3806,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",
@@ -3468,8 +3814,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",
@@ -3477,8 +3822,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",
@@ -3486,8 +3830,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",
@@ -3495,8 +3838,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",
@@ -3504,8 +3846,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",
@@ -3513,36 +3854,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;