smartrte-react 0.1.2

package/dist/components/ClassicEditor.js

@@ -0,0 +1,1066 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+export function ClassicEditor({ value, onChange, placeholder = "Type here…", minHeight = 200, maxHeight = 500, readOnly = false, }) {
+    const editableRef = useRef(null);
+    const lastEmittedRef = useRef("");
+    const isComposingRef = useRef(false);
+    const fileInputRef = useRef(null);
+    const [selectedImage, setSelectedImage] = useState(null);
+    const [imageOverlay, setImageOverlay] = useState(null);
+    const resizingRef = useRef(null);
+    const [showTableDialog, setShowTableDialog] = useState(false);
+    const [tableRows, setTableRows] = useState(3);
+    const [tableCols, setTableCols] = useState(3);
+    const [tableMenu, setTableMenu] = useState(null);
+    const selectionRef = useRef(null);
+    const selectingRef = useRef(null);
+    useEffect(() => {
+        const el = editableRef.current;
+        if (!el)
+            return;
+        // Initialize with provided HTML only when externally controlled value changes
+        if (typeof value === "string" && value !== el.innerHTML) {
+            el.innerHTML = value || "";
+        }
+        // Suppress native context menu inside table cells at capture phase
+        const onCtx = (evt) => {
+            const target = evt.target;
+            const cell = getClosestCell(target);
+            if (cell) {
+                evt.preventDefault();
+            }
+        };
+        el.addEventListener("contextmenu", onCtx, { capture: true });
+        return () => {
+            el.removeEventListener("contextmenu", onCtx, { capture: true });
+        };
+    }, [value]);
+    const exec = (command, valueArg) => {
+        try {
+            document.execCommand(command, false, valueArg);
+            // Emit after command
+            const el = editableRef.current;
+            if (el && onChange) {
+                const html = el.innerHTML;
+                if (html !== lastEmittedRef.current) {
+                    lastEmittedRef.current = html;
+                    onChange(html);
+                }
+            }
+        }
+        catch { }
+    };
+    const applyFormatBlock = (blockName) => {
+        exec("formatBlock", blockName);
+    };
+    const insertLink = () => {
+        const url = window.prompt("Enter URL", "https://");
+        if (!url)
+            return;
+        exec("createLink", url);
+    };
+    const insertImage = () => {
+        fileInputRef.current?.click();
+    };
+    const scheduleImageOverlay = () => {
+        const img = selectedImage;
+        if (!img) {
+            setImageOverlay(null);
+            return;
+        }
+        try {
+            const rect = img.getBoundingClientRect();
+            setImageOverlay({
+                left: rect.left,
+                top: rect.top,
+                width: rect.width,
+                height: rect.height,
+            });
+        }
+        catch {
+            setImageOverlay(null);
+        }
+    };
+    useEffect(() => {
+        scheduleImageOverlay();
+    }, [selectedImage]);
+    useEffect(() => {
+        const onScroll = () => scheduleImageOverlay();
+        const onResize = () => scheduleImageOverlay();
+        window.addEventListener("scroll", onScroll, true);
+        window.addEventListener("resize", onResize);
+        return () => {
+            window.removeEventListener("scroll", onScroll, true);
+            window.removeEventListener("resize", onResize);
+        };
+    }, []);
+    const insertImageAtSelection = (src) => {
+        try {
+            const host = editableRef.current;
+            if (!host)
+                return;
+            host.focus();
+            let sel = window.getSelection();
+            let range = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
+            if (!range || !host.contains(range.commonAncestorContainer)) {
+                range = document.createRange();
+                range.selectNodeContents(host);
+                range.collapse(false);
+                sel = window.getSelection();
+                sel?.removeAllRanges();
+                sel?.addRange(range);
+            }
+            const img = document.createElement("img");
+            img.src = src;
+            img.style.maxWidth = "100%";
+            img.style.height = "auto";
+            img.style.display = "inline-block";
+            img.alt = "image";
+            if (range) {
+                range.insertNode(img);
+            }
+            else {
+                host.appendChild(img);
+            }
+            const r = document.createRange();
+            r.setStartAfter(img);
+            r.collapse(true);
+            const s = window.getSelection();
+            s?.removeAllRanges();
+            s?.addRange(r);
+            setSelectedImage(img);
+            scheduleImageOverlay();
+            handleInput();
+        }
+        catch { }
+    };
+    const handleLocalImageFiles = async (files) => {
+        const list = Array.from(files).filter((f) => f.type.startsWith("image/"));
+        for (const f of list) {
+            await new Promise((resolve) => {
+                const reader = new FileReader();
+                reader.onload = () => {
+                    const dataUrl = String(reader.result || "");
+                    if (dataUrl)
+                        insertImageAtSelection(dataUrl);
+                    resolve();
+                };
+                reader.onerror = () => resolve();
+                reader.readAsDataURL(f);
+            });
+        }
+    };
+    const handleInput = () => {
+        if (isComposingRef.current)
+            return;
+        const el = editableRef.current;
+        if (!el || !onChange)
+            return;
+        const html = el.innerHTML;
+        if (html !== lastEmittedRef.current) {
+            lastEmittedRef.current = html;
+            onChange(html);
+        }
+    };
+    const buildTableHTML = (rows, cols) => {
+        const safeRows = Math.max(1, Math.min(50, Math.floor(rows) || 1));
+        const safeCols = Math.max(1, Math.min(20, Math.floor(cols) || 1));
+        let html = '<table style="border-collapse:collapse;width:100%;"><tbody>';
+        for (let r = 0; r < safeRows; r++) {
+            html += "<tr>";
+            for (let c = 0; c < safeCols; c++) {
+                html +=
+                    '<td style="border:1px solid #ddd;padding:6px;min-width:60px;">&nbsp;</td>';
+            }
+            html += "</tr>";
+        }
+        html += "</tbody></table>";
+        return html;
+    };
+    const insertTable = () => {
+        try {
+            const el = editableRef.current;
+            if (!el)
+                return;
+            // Ensure editor is focused and selection is inside
+            el.focus();
+            let sel = window.getSelection();
+            let range = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
+            if (!range || !el.contains(range.commonAncestorContainer)) {
+                // Place caret at end of editor
+                range = document.createRange();
+                range.selectNodeContents(el);
+                range.collapse(false);
+                sel = window.getSelection();
+                sel?.removeAllRanges();
+                sel?.addRange(range);
+            }
+            const html = buildTableHTML(tableRows, tableCols);
+            // Insert via Range for broader support
+            const wrapper = document.createElement("div");
+            wrapper.innerHTML = html;
+            const node = wrapper.firstChild;
+            if (!node || !range)
+                return;
+            range.insertNode(node);
+            // Move caret into first cell
+            const firstCell = node.querySelector("td,th");
+            if (firstCell)
+                moveCaretToCell(firstCell, false);
+            handleInput();
+        }
+        catch { }
+    };
+    const getClosestCell = (node) => {
+        let el = node;
+        while (el && el !== editableRef.current) {
+            if (el.nodeName === "TD" || el.nodeName === "TH") {
+                return el;
+            }
+            el = el.parentElement;
+        }
+        return null;
+    };
+    const moveCaretToCell = (cell, atEnd) => {
+        try {
+            const range = document.createRange();
+            // Ensure the cell has at least one text node
+            if (!cell.firstChild) {
+                const text = document.createTextNode("\u00A0");
+                cell.appendChild(text);
+            }
+            const textNode = cell.firstChild;
+            const len = (textNode.textContent || "").length;
+            range.setStart(textNode, atEnd ? len : 0);
+            range.collapse(true);
+            const sel = window.getSelection();
+            sel?.removeAllRanges();
+            sel?.addRange(range);
+        }
+        catch { }
+    };
+    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 rIdx = rows.indexOf(row);
+        const cells = Array.from(row.children).filter((c) => ["TD", "TH"].includes(c.tagName));
+        const cIdx = cells.indexOf(cell);
+        return { row, tbody, table, rIdx, cIdx };
+    };
+    const cellsOfRow = (row) => Array.from(row.children).filter((c) => ["TD", "TH"].includes(c.tagName));
+    const clearSelectionDecor = () => {
+        const sel = selectionRef.current;
+        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 = "";
+            }
+        }
+        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 = "rgba(30,144,255,0.15)";
+                cell.style.outline = "2px solid #1e90ff";
+                cell.style.outlineOffset = "-2px";
+            }
+        }
+    };
+    const canMergeSelection = () => {
+        const sel = selectionRef.current;
+        if (!sel)
+            return false;
+        return sel.sr !== sel.er || sel.sc !== sel.ec;
+    };
+    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];
+        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);
+            }
+        }
+        if (contents.length) {
+            anchor.innerHTML = (anchor.innerHTML || "") + " " + contents.join(" ");
+        }
+        // Set spans
+        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;
+                cell.remove();
+            }
+        }
+        moveCaretToCell(anchor, false);
+        clearSelectionDecor();
+        handleInput();
+    };
+    const addRow = (cell, dir) => {
+        const pos = getCellPosition(cell);
+        if (!pos)
+            return;
+        const { row, tbody, rIdx } = pos;
+        const newRow = document.createElement("tr");
+        const numCols = Array.from(row.children).filter((c) => ["TD", "TH"].includes(c.tagName)).length;
+        for (let i = 0; i < numCols; i++) {
+            const td = document.createElement("td");
+            td.style.border = "1px solid #ddd";
+            td.style.padding = "6px";
+            td.style.minWidth = "60px";
+            td.innerHTML = "&nbsp;";
+            newRow.appendChild(td);
+        }
+        const insertIndex = dir === "above" ? rIdx : rIdx + 1;
+        const refRow = tbody.children[insertIndex] || null;
+        tbody.insertBefore(newRow, refRow);
+    };
+    const deleteRow = (cell) => {
+        const pos = getCellPosition(cell);
+        if (!pos)
+            return;
+        const { row, tbody, table } = pos;
+        tbody.removeChild(row);
+        if (tbody.querySelectorAll("tr").length === 0) {
+            table.parentElement?.removeChild(table);
+        }
+    };
+    const addCol = (cell, dir) => {
+        const pos = getCellPosition(cell);
+        if (!pos)
+            return;
+        const { tbody, cIdx } = pos;
+        const rows = Array.from(tbody.querySelectorAll("tr"));
+        const insertIndex = dir === "left" ? cIdx : cIdx + 1;
+        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 #ddd";
+            td.style.padding = "6px";
+            td.style.minWidth = "60px";
+            td.innerHTML = "&nbsp;";
+            const ref = cells[insertIndex] || null;
+            if (ref)
+                r.insertBefore(td, ref);
+            else
+                r.appendChild(td);
+        }
+    };
+    const deleteCol = (cell) => {
+        const pos = getCellPosition(cell);
+        if (!pos)
+            return;
+        const { tbody, table, cIdx } = pos;
+        const rows = Array.from(tbody.querySelectorAll("tr"));
+        for (const r of rows) {
+            const cells = Array.from(r.children).filter((c) => ["TD", "TH"].includes(c.tagName));
+            const target = cells[cIdx];
+            if (target)
+                r.removeChild(target);
+        }
+        // If table has no columns left, remove it
+        const hasAnyCell = table.querySelector("td,th");
+        if (!hasAnyCell)
+            table.parentElement?.removeChild(table);
+    };
+    const toggleHeaderCell = (cell) => {
+        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 #ddd";
+        replacement.style.padding = cell.style.padding || "6px";
+        replacement.style.minWidth = cell.style.minWidth || "60px";
+        cell.parentElement?.replaceChild(replacement, cell);
+    };
+    const deleteTable = (cell) => {
+        const pos = getCellPosition(cell);
+        if (!pos)
+            return;
+        const { table } = pos;
+        table.parentElement?.removeChild(table);
+    };
+    const splitCell = (cell) => {
+        const pos = getCellPosition(cell);
+        if (!pos)
+            return;
+        const { tbody, rIdx, cIdx } = pos;
+        const rs = Math.max(1, cell.rowSpan || 1);
+        const cs = Math.max(1, cell.colSpan || 1);
+        if (rs === 1 && cs === 1)
+            return;
+        // Reset current cell
+        cell.rowSpan = 1;
+        cell.colSpan = 1;
+        // Add missing cells in the current row
+        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 #ddd";
+            td.style.padding = "6px";
+            td.style.minWidth = "60px";
+            td.innerHTML = "&nbsp;";
+            const cells = cellsOfRow(currentRow);
+            const ref = cells[cIdx + j] || null;
+            currentRow.insertBefore(td, ref);
+        }
+        // For extra rows, insert cells at the same column index
+        for (let i = 1; i < rs; i++) {
+            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 #ddd";
+                td.style.padding = "6px";
+                td.style.minWidth = "60px";
+                td.innerHTML = "&nbsp;";
+                const cells = cellsOfRow(row);
+                const ref = cells[cIdx + j] || null;
+                row.insertBefore(td, ref);
+            }
+        }
+        handleInput();
+    };
+    const toggleHeaderRow = (cell) => {
+        const pos = getCellPosition(cell);
+        if (!pos)
+            return;
+        const { tbody } = pos;
+        const firstRow = tbody.querySelector("tr");
+        if (!firstRow)
+            return;
+        const cells = cellsOfRow(firstRow);
+        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 #ddd";
+                th.style.padding = c.style.padding || "6px";
+                th.style.minWidth = c.style.minWidth || "60px";
+                firstRow.replaceChild(th, c);
+            }
+            else if (!shouldMakeHeader && isTh) {
+                const td = document.createElement("td");
+                td.innerHTML = c.innerHTML || "&nbsp;";
+                td.style.border = c.style.border || "1px solid #ddd";
+                td.style.padding = c.style.padding || "6px";
+                td.style.minWidth = c.style.minWidth || "60px";
+                firstRow.replaceChild(td, c);
+            }
+        }
+    };
+    const applyBgToSelection = (hex, fallbackCell) => {
+        const sel = selectionRef.current;
+        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;
+                }
+            }
+        }
+        else if (fallbackCell) {
+            fallbackCell.style.background = hex;
+        }
+    };
+    const toggleBorderSelection = (fallbackCell) => {
+        const applyToggle = (cell) => {
+            const cur = cell.style.border;
+            cell.style.border =
+                cur && cur !== "none" ? "none" : "1px solid #000";
+        };
+        const sel = selectionRef.current;
+        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);
+                }
+            }
+        }
+        else if (fallbackCell) {
+            applyToggle(fallbackCell);
+        }
+    };
+    return (_jsxs("div", { style: { border: "1px solid #ddd", borderRadius: 6 }, children: [_jsxs("div", { style: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: 8,
+                    padding: 8,
+                    borderBottom: "1px solid #eee",
+                    background: "#fafafa",
+                    position: "sticky",
+                    top: 0,
+                    zIndex: 1,
+                }, children: [_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", multiple: true, style: { display: "none" }, onChange: (e) => {
+                            if (e.currentTarget.files)
+                                handleLocalImageFiles(e.currentTarget.files);
+                            e.currentTarget.value = "";
+                        } }), _jsxs("select", { defaultValue: "p", onChange: (e) => {
+                            const val = e.target.value;
+                            if (val === "p")
+                                applyFormatBlock("<p>");
+                            else if (val === "h1")
+                                applyFormatBlock("<h1>");
+                            else if (val === "h2")
+                                applyFormatBlock("<h2>");
+                            else if (val === "h3")
+                                applyFormatBlock("<h3>");
+                        }, title: "Paragraph/Heading", 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", { onClick: () => exec("bold"), children: "B" }), _jsx("button", { onClick: () => exec("italic"), children: "I" }), _jsx("button", { onClick: () => exec("underline"), children: "U" }), _jsx("button", { onClick: () => exec("strikeThrough"), children: "S" }), _jsx("button", { onClick: () => exec("insertUnorderedList"), children: "\u2022 List" }), _jsx("button", { onClick: () => exec("insertOrderedList"), children: "1. List" }), _jsx("button", { onClick: () => exec("formatBlock", "<blockquote>"), children: "\u275D" }), _jsx("button", { onClick: () => exec("formatBlock", "<pre>"), children: "< />" }), _jsx("button", { onClick: insertLink, children: "Link" }), _jsx("button", { onClick: () => exec("unlink"), children: "Unlink" }), _jsx("button", { onClick: insertImage, children: "Image" }), _jsxs("div", { style: {
+                            display: "inline-flex",
+                            gap: 4,
+                            alignItems: "center",
+                            marginLeft: 6,
+                        }, children: [_jsx("span", { style: { fontSize: 12, opacity: 0.7 }, children: "Image align:" }), _jsx("button", { onClick: () => {
+                                    const img = selectedImage;
+                                    if (!img)
+                                        return;
+                                    img.style.display = "block";
+                                    img.style.margin = "0 auto";
+                                    img.style.float = "none";
+                                    scheduleImageOverlay();
+                                    handleInput();
+                                }, title: "Center", children: "\u2299" }), _jsx("button", { onClick: () => {
+                                    const img = selectedImage;
+                                    if (!img)
+                                        return;
+                                    img.style.display = "inline";
+                                    img.style.float = "left";
+                                    img.style.margin = "0 8px 8px 0";
+                                    scheduleImageOverlay();
+                                    handleInput();
+                                }, title: "Float left", children: "\u27F8" }), _jsx("button", { onClick: () => {
+                                    const img = selectedImage;
+                                    if (!img)
+                                        return;
+                                    img.style.display = "inline";
+                                    img.style.float = "right";
+                                    img.style.margin = "0 0 8px 8px";
+                                    scheduleImageOverlay();
+                                    handleInput();
+                                }, title: "Float right", children: "\u27F9" })] }), _jsx("button", { onClick: () => setShowTableDialog(true), children: "+ Table" }), _jsx("button", { onClick: () => exec("undo"), children: "Undo" }), _jsx("button", { onClick: () => exec("redo"), children: "Redo" })] }), showTableDialog && (_jsx("div", { style: {
+                    position: "fixed",
+                    inset: 0,
+                    background: "rgba(0,0,0,0.35)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    zIndex: 50,
+                }, onClick: () => setShowTableDialog(false), children: _jsxs("div", { style: {
+                        background: "#fff",
+                        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: {
+                                        display: "grid",
+                                        gridTemplateColumns: "repeat(10, 18px)",
+                                        gap: 2,
+                                        padding: 6,
+                                        border: "1px solid #eee",
+                                    }, children: Array.from({ length: 100 }).map((_, i) => {
+                                        const r = Math.floor(i / 10) + 1;
+                                        const c = (i % 10) + 1;
+                                        const active = r <= tableRows && c <= tableCols;
+                                        return (_jsx("div", { onMouseEnter: () => {
+                                                setTableRows(r);
+                                                setTableCols(c);
+                                            }, onClick: () => {
+                                                insertTable();
+                                                setShowTableDialog(false);
+                                            }, style: {
+                                                width: 16,
+                                                height: 16,
+                                                border: "1px solid #ccc",
+                                                background: active ? "#1e90ff" : "#fff",
+                                            } }, i));
+                                    }) }), _jsxs("div", { style: { fontSize: 12, minWidth: 48 }, children: [tableRows, " \u00D7 ", tableCols] })] }), _jsxs("div", { style: {
+                                display: "flex",
+                                gap: 8,
+                                justifyContent: "end",
+                                marginTop: 12,
+                            }, children: [_jsx("button", { onClick: () => setShowTableDialog(false), children: "Cancel" }), _jsx("button", { onClick: () => {
+                                        insertTable();
+                                        setShowTableDialog(false);
+                                    }, children: "Insert" })] })] }) })), _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 (items && items.length) {
+                        const hasImage = Array.from(items).some((f) => f.type.startsWith("image/"));
+                        if (hasImage) {
+                            e.preventDefault();
+                            handleLocalImageFiles(items);
+                        }
+                    }
+                }, onDragOver: (e) => {
+                    if (e.dataTransfer?.types?.includes("Files")) {
+                        e.preventDefault();
+                    }
+                }, onDrop: (e) => {
+                    if (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) {
+                            // @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);
+                    }
+                }, onClick: (e) => {
+                    const t = e.target;
+                    if (t && t.tagName === "IMG") {
+                        setSelectedImage(t);
+                        scheduleImageOverlay();
+                    }
+                    else {
+                        setSelectedImage(null);
+                        setImageOverlay(null);
+                    }
+                }, style: {
+                    padding: 12,
+                    minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight,
+                    maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
+                    overflowY: "auto",
+                    outline: "none",
+                    lineHeight: 1.6,
+                }, "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) => {
+                    // 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 {
+                            document.execCommand("insertText", false, "  ");
+                        }
+                    }
+                    // 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 (cell &&
+                            cell.parentElement &&
+                            cell.parentElement.parentElement) {
+                            const row = cell.parentElement;
+                            const tbody = row.parentElement;
+                            const cells = Array.from(row.children).filter((c) => c.tagName === "TD" ||
+                                c.tagName === "TH");
+                            const rows = Array.from(tbody.children);
+                            const rIdx = rows.indexOf(row);
+                            const cIdx = cells.indexOf(cell);
+                            const atStart = (sel?.anchorOffset || 0) === 0;
+                            const cellTextLen = (cell.textContent || "").length;
+                            const atEnd = (sel?.anchorOffset || 0) >= cellTextLen;
+                            let target = null;
+                            if (e.key === "ArrowLeft" && atStart && cIdx > 0) {
+                                target = row.children[cIdx - 1];
+                            }
+                            else if (e.key === "ArrowRight" &&
+                                atEnd &&
+                                cIdx < row.children.length - 1) {
+                                target = row.children[cIdx + 1];
+                            }
+                            else if (e.key === "ArrowUp" && rIdx > 0 && atStart) {
+                                target = rows[rIdx - 1].children[cIdx];
+                            }
+                            else if (e.key === "ArrowDown" &&
+                                rIdx < rows.length - 1 &&
+                                atEnd) {
+                                target = rows[rIdx + 1].children[cIdx];
+                            }
+                            if (target) {
+                                e.preventDefault();
+                                moveCaretToCell(target, e.key === "ArrowRight" || e.key === "ArrowDown");
+                            }
+                        }
+                    }
+                }, onMouseDown: (e) => {
+                    const cell = getClosestCell(e.target);
+                    if (!cell) {
+                        clearSelectionDecor();
+                        return;
+                    }
+                    const pos = getCellPosition(cell);
+                    if (!pos)
+                        return;
+                    selectingRef.current = { tbody: pos.tbody, start: cell };
+                    const onMove = (ev) => {
+                        const under = document.elementFromPoint(ev.clientX, ev.clientY);
+                        const overCell = getClosestCell(under);
+                        const startInfo = selectingRef.current;
+                        if (!overCell || !startInfo)
+                            return;
+                        const a = getCellPosition(startInfo.start);
+                        const b = getCellPosition(overCell);
+                        if (!a || !b || a.tbody !== b.tbody)
+                            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 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);
+                    }
+                }, dangerouslySetInnerHTML: { __html: value || "" } }), selectedImage && imageOverlay && (_jsxs("div", { style: {
+                    position: "fixed",
+                    left: imageOverlay.left,
+                    top: imageOverlay.top,
+                    width: imageOverlay.width,
+                    height: imageOverlay.height,
+                    pointerEvents: "none",
+                    zIndex: 55,
+                }, children: [_jsx("div", { style: {
+                            position: "absolute",
+                            inset: 0,
+                            outline: "2px solid #1e90ff",
+                            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: -6,
+                            top: "50%",
+                            transform: "translateY(-50%)",
+                            width: 8,
+                            height: 24,
+                            background: "#1e90ff",
+                            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: -6,
+                            top: "50%",
+                            transform: "translateY(-50%)",
+                            width: 8,
+                            height: 24,
+                            background: "#1e90ff",
+                            borderRadius: 2,
+                            cursor: "ew-resize",
+                            pointerEvents: "auto",
+                        } })] })), tableMenu && (_jsx("div", { style: {
+                    position: "fixed",
+                    inset: 0,
+                    zIndex: 60,
+                }, onClick: () => setTableMenu(null), onContextMenu: (e) => {
+                    // Prevent native menu while overlay is shown and reposition our menu
+                    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));
+                    // Temporarily hide overlay to detect underlying cell
+                    const overlay = e.currentTarget;
+                    const prev = overlay.style.display;
+                    overlay.style.display = "none";
+                    const under = document.elementFromPoint(e.clientX, e.clientY);
+                    overlay.style.display = prev;
+                    const cell = getClosestCell(under);
+                    if (cell)
+                        setTableMenu({ x, y, cell });
+                }, children: _jsxs("div", { style: {
+                        position: "fixed",
+                        left: tableMenu.x,
+                        top: tableMenu.y,
+                        background: "#fff",
+                        border: "1px solid #ddd",
+                        borderRadius: 8,
+                        boxShadow: "0 8px 24px rgba(0,0,0,0.18)",
+                        padding: 6,
+                        width: 200,
+                        maxHeight: 260,
+                        overflowY: "auto",
+                    }, 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: {
+                                        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);
+                                            }, style: {
+                                                width: 28,
+                                                height: 18,
+                                                padding: 0,
+                                                border: "none",
+                                                background: "transparent",
+                                            } })] }), _jsxs("button", { 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: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: 8,
+                                        padding: "6px 8px",
+                                        fontSize: 12,
+                                        opacity: canMergeSelection() ? 1 : 0.5,
+                                        cursor: canMergeSelection() ? "pointer" : "default",
+                                    }, onClick: () => {
+                                        mergeSelection();
+                                        setTableMenu(null);
+                                    }, children: [_jsx("span", { children: "\u21C4" }), _jsx("span", { children: "Merge cells" })] }), _jsxs("button", { style: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: 8,
+                                        padding: "6px 8px",
+                                        fontSize: 12,
+                                    }, onClick: () => {
+                                        splitCell(tableMenu.cell);
+                                        setTableMenu(null);
+                                    }, children: [_jsx("span", { children: "\u2922" }), _jsx("span", { children: "Split cell" })] }), _jsx("hr", { style: { margin: "4px 0" } }), _jsxs("button", { style: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: 8,
+                                        padding: "6px 8px",
+                                        fontSize: 12,
+                                    }, onClick: () => {
+                                        addRow(tableMenu.cell, "above");
+                                        setTableMenu(null);
+                                    }, children: [_jsx("span", { children: "\u21A5" }), _jsx("span", { children: "Row above" })] }), _jsxs("button", { style: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: 8,
+                                        padding: "6px 8px",
+                                        fontSize: 12,
+                                    }, onClick: () => {
+                                        addRow(tableMenu.cell, "below");
+                                        setTableMenu(null);
+                                    }, children: [_jsx("span", { children: "\u21A7" }), _jsx("span", { children: "Row below" })] }), _jsxs("button", { style: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: 8,
+                                        padding: "6px 8px",
+                                        fontSize: 12,
+                                    }, onClick: () => {
+                                        addCol(tableMenu.cell, "left");
+                                        setTableMenu(null);
+                                    }, children: [_jsx("span", { children: "\u2190" }), _jsx("span", { children: "Column left" })] }), _jsxs("button", { style: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: 8,
+                                        padding: "6px 8px",
+                                        fontSize: 12,
+                                    }, onClick: () => {
+                                        addCol(tableMenu.cell, "right");
+                                        setTableMenu(null);
+                                    }, children: [_jsx("span", { children: "\u2192" }), _jsx("span", { children: "Column right" })] }), _jsxs("button", { style: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: 8,
+                                        padding: "6px 8px",
+                                        fontSize: 12,
+                                    }, onClick: () => {
+                                        deleteRow(tableMenu.cell);
+                                        setTableMenu(null);
+                                    }, children: [_jsx("span", { children: "\u2716" }), _jsx("span", { children: "Delete row" })] }), _jsxs("button", { style: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: 8,
+                                        padding: "6px 8px",
+                                        fontSize: 12,
+                                    }, onClick: () => {
+                                        deleteCol(tableMenu.cell);
+                                        setTableMenu(null);
+                                    }, children: [_jsx("span", { children: "\u2716" }), _jsx("span", { children: "Delete column" })] }), _jsxs("button", { style: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: 8,
+                                        padding: "6px 8px",
+                                        fontSize: 12,
+                                    }, onClick: () => {
+                                        toggleHeaderCell(tableMenu.cell);
+                                        setTableMenu(null);
+                                    }, children: [_jsx("span", { children: "H" }), _jsx("span", { children: "Toggle 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" })] }), _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" })] })] })] }) }))] }));
+}