smartrte-react 0.1.13 → 0.1.15

package/dist/components/ClassicEditor.js

@@ -1,11 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { MediaManager } from "./MediaManager";
-export function ClassicEditor({ value, onChange, placeholder = "Type here…", minHeight = 200, maxHeight = 500, readOnly = false, table = true, media = true, formula = true, mediaManager, }) {
+import * as pdfjsLib from 'pdfjs-dist';
+import mammoth from 'mammoth';
+// Initialize PDF.js worker
+if (typeof window !== 'undefined') {
+    pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+}
+export function ClassicEditor({ value, onChange, placeholder = "Type here…", minHeight = 200, maxHeight = 500, readOnly = false, table = true, media = true, formula = true, mediaManager, fonts = [
+    { name: "Arial", value: "Arial, Helvetica, sans-serif" },
+    { name: "Georgia", value: "Georgia, serif" },
+    { name: "Impact", value: "Impact, Charcoal, sans-serif" },
+    { name: "Tahoma", value: "Tahoma, Geneva, sans-serif" },
+    { name: "Times New Roman", value: "'Times New Roman', Times, serif" },
+    { name: "Verdana", value: "Verdana, Geneva, sans-serif" },
+    { name: "Courier New", value: "'Courier New', Courier, monospace" },
+], defaultFont, }) {
     const editableRef = useRef(null);
     const lastEmittedRef = useRef("");
     const isComposingRef = useRef(false);
     const fileInputRef = useRef(null);
+    const pdfInputRef = useRef(null);
+    const docxInputRef = useRef(null);
+    const [loadingPdf, setLoadingPdf] = useState(false);
+    const [loadingDocx, setLoadingDocx] = useState(false);
+    // State for import confirmation
+    const [pendingImport, setPendingImport] = useState(null);
     const replaceTargetRef = useRef(null);
     const [selectedImage, setSelectedImage] = useState(null);
     const [imageOverlay, setImageOverlay] = useState(null);
@@ -25,7 +45,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const [showColorPicker, setShowColorPicker] = useState(false);
     const [colorPickerType, setColorPickerType] = useState('text');
     const savedRangeRef = useRef(null);
-    const [currentFontSize, setCurrentFontSize] = useState("11");
+    const [currentFontSize, setCurrentFontSize] = useState("");
+    const [currentFont, setCurrentFont] = useState("");
     useEffect(() => {
         const el = editableRef.current;
         if (!el)
@@ -33,6 +54,9 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         // Initialize with provided HTML only when externally controlled value changes
         if (typeof value === "string" && value !== el.innerHTML) {
             el.innerHTML = value || "";
+            fixNegativeMargins(el);
+            ensureTableWrappers(el);
+            addTableResizeHandles();
         }
         // Suppress native context menu inside table cells at capture phase
         const onCtx = (evt) => {
@@ -152,6 +176,57 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             console.error('Error applying font size:', error);
         }
     };
+    const applyFontFamily = (font) => {
+        try {
+            setCurrentFont(font);
+            const editor = editableRef.current;
+            if (!editor)
+                return;
+            editor.focus();
+            let range = null;
+            const sel = window.getSelection();
+            if (sel && sel.rangeCount > 0) {
+                const currentRange = sel.getRangeAt(0);
+                if (editor.contains(currentRange.commonAncestorContainer)) {
+                    range = currentRange;
+                }
+            }
+            if (!range && savedRangeRef.current) {
+                range = savedRangeRef.current.cloneRange();
+            }
+            if (!range)
+                return;
+            if (range.collapsed) {
+                const span = document.createElement('span');
+                span.style.fontFamily = font;
+                span.textContent = '\u200B';
+                range.insertNode(span);
+                const newRange = document.createRange();
+                newRange.setStart(span.firstChild, 1);
+                newRange.collapse(true);
+                if (sel) {
+                    sel.removeAllRanges();
+                    sel.addRange(newRange);
+                }
+                handleInput();
+                return;
+            }
+            const span = document.createElement('span');
+            span.style.fontFamily = font;
+            const fragment = range.extractContents();
+            span.appendChild(fragment);
+            range.insertNode(span);
+            if (sel) {
+                range.selectNodeContents(span);
+                sel.removeAllRanges();
+                sel.addRange(range);
+            }
+            handleInput();
+        }
+        catch (error) {
+            console.error('Error applying font family:', error);
+        }
+    };
     const applyTextColor = (color) => {
         exec("foreColor", color);
     };
@@ -205,14 +280,15 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             if (!table)
                 return;
             const target = e.target;
-            if (target.tagName === 'TD' || target.tagName === 'TH') {
-                const rect = target.getBoundingClientRect();
+            const cell = getClosestCell(target);
+            if (cell) {
+                const rect = cell.getBoundingClientRect();
                 const rightEdge = rect.right;
                 const clickX = e.clientX;
                 if (Math.abs(clickX - rightEdge) < 5) {
                     e.preventDefault();
-                    const tableElem = target.closest('table');
-                    const colIndex = parseInt(target.getAttribute('data-col-index') || '0', 10);
+                    const tableElem = cell.closest('table');
+                    const colIndex = parseInt(cell.getAttribute('data-col-index') || '0', 10);
                     if (tableElem) {
                         startColumnResize(tableElem, colIndex, e.clientX);
                     }
@@ -222,8 +298,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 const clickY = e.clientY;
                 if (Math.abs(clickY - bottomEdge) < 5) {
                     e.preventDefault();
-                    const tableElem = target.closest('table');
-                    const row = target.closest('tr');
+                    const tableElem = cell.closest('table');
+                    const row = cell.closest('tr');
                     if (tableElem && row) {
                         const rowIndex = parseInt(row.getAttribute('data-row-index') || '0', 10);
                         startRowResize(tableElem, rowIndex, e.clientY);
@@ -239,23 +315,26 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             }
             if (!table)
                 return;
+            let cursor = '';
             const target = e.target;
-            if (target.tagName === 'TD' || target.tagName === 'TH') {
-                const rect = target.getBoundingClientRect();
+            const cell = getClosestCell(target);
+            if (cell) {
+                const rect = cell.getBoundingClientRect();
                 const clickX = e.clientX;
                 const clickY = e.clientY;
                 if (Math.abs(clickX - rect.right) < 5) {
-                    el.style.cursor = 'col-resize';
-                    return;
-                }
-                if (Math.abs(clickY - rect.bottom) < 5) {
-                    el.style.cursor = 'row-resize';
-                    return;
+                    cursor = 'col-resize';
                 }
-                if (el.style.cursor === 'col-resize' || el.style.cursor === 'row-resize') {
-                    el.style.cursor = '';
+                else if (Math.abs(clickY - rect.bottom) < 5) {
+                    cursor = 'row-resize';
                 }
             }
+            if (cursor) {
+                el.style.cursor = cursor;
+            }
+            else if (el.style.cursor === 'col-resize' || el.style.cursor === 'row-resize') {
+                el.style.cursor = '';
+            }
         };
         const onMouseUp = () => {
             handleTableResizeEnd();
@@ -264,15 +343,16 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             if (!table)
                 return;
             const target = e.target;
-            if (target.tagName === 'TD' || target.tagName === 'TH') {
-                const rect = target.getBoundingClientRect();
+            const cell = getClosestCell(target);
+            if (cell) {
+                const rect = cell.getBoundingClientRect();
                 const touch = e.touches[0];
                 const clickX = touch.clientX;
                 const clickY = touch.clientY;
                 if (Math.abs(clickX - rect.right) < 15) {
                     e.preventDefault();
-                    const tableElem = target.closest('table');
-                    const colIndex = parseInt(target.getAttribute('data-col-index') || '0', 10);
+                    const tableElem = cell.closest('table');
+                    const colIndex = parseInt(cell.getAttribute('data-col-index') || '0', 10);
                     if (tableElem) {
                         startColumnResize(tableElem, colIndex, clickX);
                     }
@@ -280,8 +360,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 }
                 if (Math.abs(clickY - rect.bottom) < 15) {
                     e.preventDefault();
-                    const tableElem = target.closest('table');
-                    const row = target.closest('tr');
+                    const tableElem = cell.closest('table');
+                    const row = cell.closest('tr');
                     if (tableElem && row) {
                         const rowIndex = parseInt(row.getAttribute('data-row-index') || '0', 10);
                         startRowResize(tableElem, rowIndex, clickY);
@@ -466,11 +546,432 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             });
         }
     };
+    const handlePdfFiles = (files) => {
+        if (!files || files.length === 0)
+            return;
+        const file = files[0];
+        if (file.type !== 'application/pdf')
+            return;
+        // Check if editor has content
+        const el = editableRef.current;
+        const hasContent = el && el.textContent && el.textContent.trim().length > 0;
+        if (hasContent) {
+            setPendingImport({ file, type: 'pdf' });
+        }
+        else {
+            processImport(file, 'pdf', 'replace');
+        }
+    };
+    const processImport = async (file, type, mode) => {
+        if (type === 'pdf') {
+            await processPdf(file, mode);
+        }
+        else {
+            await processDocx(file, mode);
+        }
+        setPendingImport(null);
+        // Reset inputs
+        if (pdfInputRef.current)
+            pdfInputRef.current.value = "";
+        if (docxInputRef.current)
+            docxInputRef.current.value = "";
+    };
+    const processPdf = async (file, mode) => {
+        try {
+            setLoadingPdf(true);
+            const arrayBuffer = await file.arrayBuffer();
+            const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+            let fullHtml = '';
+            for (let i = 1; i <= pdf.numPages; i++) {
+                const page = await pdf.getPage(i);
+                const textContent = await page.getTextContent();
+                const styles = textContent.styles;
+                // 1. Group items into lines
+                const items = textContent.items;
+                // Calculate base statistics
+                const heights = items.map(item => Math.abs(item.transform[3])).filter(h => h > 0);
+                heights.sort((a, b) => a - b);
+                const medianHeight = heights[Math.floor(heights.length / 2)] || 12;
+                // Group by Y (with tolerance)
+                const linesMap = new Map();
+                for (const item of items) {
+                    if (!item.str.trim())
+                        continue;
+                    // Normalize Y to integer buckets to group roughly
+                    // PDF Y is bottom-0, so higher Y is higher on page.
+                    const y = item.transform[5];
+                    // Find closest existing line
+                    let foundKey = -1;
+                    for (const key of linesMap.keys()) {
+                        if (Math.abs(key - y) < medianHeight * 0.5) {
+                            foundKey = key;
+                            break;
+                        }
+                    }
+                    if (foundKey !== -1) {
+                        linesMap.get(foundKey).items.push(item);
+                    }
+                    else {
+                        linesMap.set(y, { y, items: [item] });
+                    }
+                }
+                // Convert map to sorted array (top to bottom)
+                const lines = Array.from(linesMap.values()).sort((a, b) => b.y - a.y);
+                // Sort items within lines (left to right)
+                lines.forEach(line => {
+                    line.items.sort((a, b) => a.transform[4] - b.transform[4]);
+                });
+                // 2. Identify and Build Structures
+                let html = '';
+                let listStack = []; // 'ul' or 'ol'
+                let inTable = false;
+                let tableColumns = []; // X-coordinates of column starts
+                let tableHtml = '';
+                const closeList = () => {
+                    if (listStack.length > 0) {
+                        html += `</${listStack.pop()}>`;
+                    }
+                };
+                const closeTable = () => {
+                    if (inTable) {
+                        html += '<div data-table-wrapper="true" style="overflow-x:auto;width:100%;"><table style="border-collapse:collapse;width:100%;" border="1"><tbody>' + tableHtml + '</tbody></table></div>';
+                        tableHtml = '';
+                        inTable = false;
+                        tableColumns = [];
+                    }
+                };
+                for (let lIndex = 0; lIndex < lines.length; lIndex++) {
+                    const line = lines[lIndex];
+                    // Calculate gaps and text
+                    let lineText = '';
+                    let lineHtmlContent = '';
+                    let lastX = -1;
+                    let gaps = [];
+                    let itemXs = []; // Start X of logical items (words or phrases)
+                    // Reconstruct text with spacing detection
+                    for (let j = 0; j < line.items.length; j++) {
+                        const item = line.items[j];
+                        const x = item.transform[4];
+                        const width = item.width;
+                        const fontName = item.fontName;
+                        const fontObj = styles[fontName];
+                        const isBold = fontObj?.fontFamily?.toLowerCase().includes('bold') || false;
+                        // const isItalic = fontObj?.fontFamily?.toLowerCase().includes('italic') || false;
+                        if (lastX > 0) {
+                            const gap = x - lastX;
+                            if (gap > 2) { // Minimal space threshold
+                                lineText += ' ';
+                                lineHtmlContent += ' ';
+                                if (gap > 20) { // Large gap threshold for table detection
+                                    gaps.push(gap);
+                                }
+                            }
+                        }
+                        else {
+                            // First item
+                        }
+                        // Track "columns" candidates: items separated by big gaps
+                        if (j === 0 || (x - lastX) > 20) {
+                            itemXs.push(x);
+                        }
+                        // Append text style
+                        let chunk = item.str;
+                        if (isBold)
+                            chunk = `<strong>${chunk}</strong>`;
+                        // if (isItalic) chunk = `<em>${chunk}</em>`;
+                        lineText += item.str;
+                        lineHtmlContent += chunk;
+                        lastX = x + width;
+                    }
+                    // === Structure Detection ===
+                    // Max Font Size in line
+                    const maxH = Math.max(...line.items.map((i) => Math.abs(i.transform[3])));
+                    const isHeader = maxH > medianHeight * 1.2;
+                    // List Detection
+                    const isBullet = /^[•\-\*]\s/.test(lineText);
+                    const isNumber = /^\d+[\.\)]\s/.test(lineText);
+                    // Table Detection Logic
+                    // A line starts a table if it has distinct "columns" (multiple items with large gaps)
+                    // Or if we are already in a table and this line aligns with columns
+                    let isTableLine = false;
+                    // If in table, check alignment
+                    if (inTable) {
+                        // Check if items align with known columns
+                        // Simple loose check: do any of the itemXs align with tableColumns?
+                        // Or is the line just sparsely populated but roughly compatible?
+                        // We'll continually simple-add rows for now until a Paragraph break (plain text, no gaps) is found.
+                        // If line looks like normal paragraph (no large gaps, starts at left margin), close table
+                        const isPlainParagraph = gaps.length === 0 && itemXs[0] < 50 && lineText.length > 50;
+                        // Allow wrapping text in table cells, which might look like lines with no gaps?
+                        // Table wrapping usually is indented or aligns with a column > 0.
+                        const alignsWithColumn = itemXs.some(x => tableColumns.some(cx => Math.abs(x - cx) < 20));
+                        if (alignsWithColumn || (itemXs[0] > 50)) {
+                            isTableLine = true;
+                        }
+                        else {
+                            // Maybe a new row starting at col 0?
+                            // If it aligns with col 0.
+                            if (Math.abs(itemXs[0] - tableColumns[0]) < 20) {
+                                isTableLine = true;
+                            }
+                        }
+                    }
+                    else {
+                        // Potential start of table: multiple items separated by gaps, AND next line likely follows suit?
+                        // Or simply: It has > 1 column significantly spaced.
+                        if (itemXs.length >= 2 && gaps.some(g => g > 30)) {
+                            isTableLine = true;
+                            // Establish columns
+                            tableColumns = [...itemXs];
+                        }
+                    }
+                    // --- Apply Logic ---
+                    if (isTableLine) {
+                        closeList();
+                        if (!inTable) {
+                            inTable = true;
+                            // Start table
+                        }
+                        // Build Row
+                        // We need to map items to cells based on tableColumns.
+                        // Naive approach: Items close to col X go to col X.
+                        let rowHtml = '<tr>';
+                        // We assume `tableColumns` defines the start of each cell.
+                        // We create a cell for each column.
+                        // Collect content for each bucket.
+                        const cellContents = new Array(tableColumns.length).fill('');
+                        let currentItemHtml = '';
+                        let currentItemStart = -1;
+                        // process items again to slot them
+                        let currentLineX = 0;
+                        for (const item of line.items) {
+                            const x = item.transform[4];
+                            const w = item.width;
+                            const txt = item.str;
+                            const fontObj = styles[item.fontName];
+                            const isBold = fontObj?.fontFamily?.toLowerCase().includes('bold');
+                            const styledTxt = isBold ? `<strong>${txt}</strong>` : txt;
+                            // Decide which column this belongs to
+                            // Find closest column to the left (or close enough)
+                            let colIdx = 0;
+                            let minDiff = 9999;
+                            for (let c = 0; c < tableColumns.length; c++) {
+                                const colX = tableColumns[c];
+                                // If item starts near colX or after it (but before next col)
+                                // Actually, just find the "controlling" column (closest start to the left)
+                                if (x >= colX - 10) {
+                                    colIdx = c;
+                                }
+                            }
+                            // Append space if needed
+                            if (cellContents[colIdx])
+                                cellContents[colIdx] += ' ';
+                            cellContents[colIdx] += styledTxt;
+                        }
+                        cellContents.forEach(content => {
+                            rowHtml += `<td style="border:1px solid #ddd;padding:8px;vertical-align:top;">${content || '&nbsp;'}</td>`;
+                        });
+                        rowHtml += '</tr>';
+                        tableHtml += rowHtml;
+                    }
+                    else {
+                        closeTable();
+                        if (isBullet || isNumber) {
+                            const listType = isBullet ? 'ul' : 'ol';
+                            if (listStack.length === 0 || listStack[listStack.length - 1] !== listType) {
+                                if (listStack.length > 0)
+                                    closeList(); // Close switch
+                                html += `<${listType}>`;
+                                listStack.push(listType);
+                            }
+                            // Strip marker
+                            const content = lineHtmlContent.replace(/^[•\-\*]|\d+[\.\)]/, '').trim();
+                            html += `<li>${content}</li>`;
+                        }
+                        else {
+                            closeList();
+                            if (isHeader) {
+                                const tag = maxH > medianHeight * 1.5 ? 'h2' : 'h3';
+                                html += `<${tag}>${lineHtmlContent}</${tag}>`;
+                            }
+                            else {
+                                html += `<p>${lineHtmlContent}</p>`;
+                            }
+                        }
+                    }
+                }
+                closeList();
+                closeTable();
+                fullHtml += html;
+            }
+            const el = editableRef.current;
+            if (el) {
+                el.focus();
+                if (mode === 'replace') {
+                    // Select all and replace
+                    const range = document.createRange();
+                    range.selectNodeContents(el);
+                    const sel = window.getSelection();
+                    sel?.removeAllRanges();
+                    sel?.addRange(range);
+                    exec("delete"); // Clear content safely
+                    exec("insertHTML", fullHtml);
+                }
+                else {
+                    // Append
+                    const range = document.createRange();
+                    range.selectNodeContents(el);
+                    range.collapse(false); // End
+                    const sel = window.getSelection();
+                    sel?.removeAllRanges();
+                    sel?.addRange(range);
+                    exec("insertHTML", "<br>" + fullHtml);
+                }
+            }
+        }
+        catch (error) {
+            console.error('Error reading PDF:', error);
+            // Optional: show user error
+        }
+        finally {
+            setLoadingPdf(false);
+        }
+    };
+    const handleDocxFiles = (files) => {
+        if (!files || files.length === 0)
+            return;
+        const file = files[0];
+        if (!file.name.endsWith('.docx'))
+            return;
+        // Check if editor has content
+        const el = editableRef.current;
+        const hasContent = el && el.textContent && el.textContent.trim().length > 0;
+        if (hasContent) {
+            setPendingImport({ file, type: 'docx' });
+        }
+        else {
+            processImport(file, 'docx', 'replace');
+        }
+    };
+    const processDocx = async (file, mode) => {
+        try {
+            setLoadingDocx(true);
+            const arrayBuffer = await file.arrayBuffer();
+            const result = await mammoth.convertToHtml({ arrayBuffer });
+            let html = result.value;
+            if (html) {
+                // Process HTML to ensure tables have borders and structure
+                const temp = document.createElement('div');
+                temp.innerHTML = html;
+                const tables = temp.querySelectorAll('table');
+                tables.forEach(tbl => {
+                    tbl.style.borderCollapse = 'collapse';
+                    tbl.style.minWidth = '100%';
+                    // Browser parser auto-adds tbody, but we verify styles
+                    const cells = tbl.querySelectorAll('td, th');
+                    cells.forEach(cell => {
+                        cell.style.border = '1px solid #000';
+                        cell.style.padding = '8px';
+                        cell.style.verticalAlign = 'top';
+                    });
+                });
+                html = temp.innerHTML;
+                const el = editableRef.current;
+                if (el) {
+                    el.focus();
+                    if (mode === 'replace') {
+                        const range = document.createRange();
+                        range.selectNodeContents(el);
+                        const sel = window.getSelection();
+                        sel?.removeAllRanges();
+                        sel?.addRange(range);
+                        exec("delete");
+                        exec("insertHTML", html);
+                    }
+                    else {
+                        const range = document.createRange();
+                        range.selectNodeContents(el);
+                        range.collapse(false);
+                        const sel = window.getSelection();
+                        sel?.removeAllRanges();
+                        sel?.addRange(range);
+                        exec("insertHTML", "<br>" + html);
+                    }
+                    // Initialize handlers for the new content
+                    // We use setTimeout to let the DOM settle after execCommand
+                    setTimeout(() => {
+                        ensureTableWrappers(el);
+                        addTableResizeHandles();
+                        fixNegativeMargins(el);
+                        handleInput();
+                    }, 10);
+                }
+            }
+        }
+        catch (error) {
+            console.error('Error reading DOCX:', error);
+        }
+        finally {
+            setLoadingDocx(false);
+        }
+    };
+    const fixNegativeMargins = (root) => {
+        try {
+            const nodes = root.querySelectorAll('*');
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                if (node.style && node.style.marginLeft && node.style.marginLeft.trim().startsWith('-')) {
+                    node.style.marginLeft = '0px';
+                }
+            }
+        }
+        catch { }
+    };
+    const ensureTableWrappers = (root) => {
+        try {
+            const tables = root.querySelectorAll('table');
+            tables.forEach((table) => {
+                const parent = table.parentElement;
+                if (parent && parent.getAttribute('data-table-wrapper') !== 'true') {
+                    const wrapper = document.createElement('div');
+                    wrapper.setAttribute('data-table-wrapper', 'true');
+                    wrapper.style.overflowX = 'auto';
+                    wrapper.style.webkitOverflowScrolling = 'touch';
+                    wrapper.style.width = '100%';
+                    wrapper.style.maxWidth = '100%';
+                    wrapper.style.display = 'block';
+                    // Use insertBefore + appendChild to move element without losing too much state
+                    // simpler than replaceChild for wrapping
+                    parent.insertBefore(wrapper, table);
+                    wrapper.appendChild(table);
+                }
+                // Always ensure table takes full width
+                if (table.style.width !== '100%') {
+                    table.style.width = '100%';
+                }
+                // Ensure min-width is set
+                if (!table.style.minWidth || table.style.minWidth === '0px') {
+                    table.style.minWidth = '100%';
+                }
+            });
+        }
+        catch (e) {
+            console.error("Error wrapping tables", e);
+        }
+    };
     const handleInput = () => {
         if (isComposingRef.current)
             return;
         const el = editableRef.current;
-        if (!el || !onChange)
+        if (!el)
+            return;
+        // Auto-fix negative margins that might cause visibility issues
+        fixNegativeMargins(el);
+        // Ensure tables are wrapped for horizontal scrolling
+        ensureTableWrappers(el);
+        // Add resize handles to tables
+        addTableResizeHandles();
+        if (!onChange)
             return;
         const html = el.innerHTML;
         if (html !== lastEmittedRef.current) {
@@ -481,7 +982,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     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>';
+        let html = '<div data-table-wrapper="true" style="overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;max-width:100%;display:block;"><table style="border-collapse:collapse;min-width:100%;"><tbody>';
         for (let r = 0; r < safeRows; r++) {
             html += "<tr>";
             for (let c = 0; c < safeCols; c++) {
@@ -490,7 +991,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             }
             html += "</tr>";
         }
-        html += "</tbody></table>";
+        html += "</tbody></table></div>";
         return html;
     };
     const insertTable = () => {
@@ -895,6 +1396,9 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             return;
         const firstCell = cells[0];
         const currentWidth = firstCell.offsetWidth;
+        // Unlock table width so it can grow
+        table.style.width = "max-content";
+        table.style.minWidth = "100%";
         tableResizeRef.current = {
             type: 'column',
             table,
@@ -991,14 +1495,23 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             });
         });
     };
-    return (_jsxs("div", { style: { border: "1px solid #ddd", borderRadius: 6 }, children: [_jsxs("div", { style: {
+    return (_jsxs("div", { style: {
+            border: "1px solid #ddd",
+            borderRadius: 6,
+            width: "100%",
+            maxWidth: "100vw",
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "column",
+            background: "#fff",
+            boxSizing: "border-box"
+        }, children: [_jsxs("div", { style: {
                     display: "flex",
                     flexWrap: "wrap",
+                    maxWidth: "100%",
                     gap: 8,
                     padding: 8,
                     borderBottom: "1px solid #eee",
-                    background: "#fff",
-                    color: "#111",
                     position: "sticky",
                     top: 0,
                     zIndex: 1,
@@ -1028,7 +1541,13 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                 }
                             }
                             e.currentTarget.value = "";
-                        } })), _jsxs("select", { defaultValue: "p", onChange: (e) => {
+                        } })), _jsx("input", { ref: pdfInputRef, type: "file", accept: "application/pdf", style: { display: "none" }, onChange: (e) => {
+                            handlePdfFiles(e.currentTarget.files);
+                            e.currentTarget.value = "";
+                        } }), _jsx("input", { ref: docxInputRef, type: "file", accept: ".docx", style: { display: "none" }, onChange: (e) => {
+                            handleDocxFiles(e.currentTarget.files);
+                            e.currentTarget.value = "";
+                        } }), _jsxs("select", { defaultValue: "p", onChange: (e) => {
                             const val = e.target.value;
                             if (val === "p")
                                 applyFormatBlock("<p>");
@@ -1097,7 +1616,24 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             borderRadius: 6,
                             background: "#fff",
                             color: "#111",
-                        }, children: [_jsx("option", { value: "8", children: "8" }), _jsx("option", { value: "9", children: "9" }), _jsx("option", { value: "10", children: "10" }), _jsx("option", { value: "11", children: "11" }), _jsx("option", { value: "12", children: "12" }), _jsx("option", { value: "14", children: "14" }), _jsx("option", { value: "18", children: "18" }), _jsx("option", { value: "24", children: "24" }), _jsx("option", { value: "30", children: "30" }), _jsx("option", { value: "36", children: "36" }), _jsx("option", { value: "48", children: "48" }), _jsx("option", { value: "60", children: "60" }), _jsx("option", { value: "72", children: "72" }), _jsx("option", { value: "96", children: "96" })] }), _jsxs("button", { title: "Text Color", onClick: () => {
+                        }, children: [_jsx("option", { value: "", disabled: true, children: "Size" }), _jsx("option", { value: "8", children: "8" }), _jsx("option", { value: "9", children: "9" }), _jsx("option", { value: "10", children: "10" }), _jsx("option", { value: "11", children: "11" }), _jsx("option", { value: "12", children: "12" }), _jsx("option", { value: "14", children: "14" }), _jsx("option", { value: "18", children: "18" }), _jsx("option", { value: "24", children: "24" }), _jsx("option", { value: "30", children: "30" }), _jsx("option", { value: "36", children: "36" }), _jsx("option", { value: "48", children: "48" }), _jsx("option", { value: "60", children: "60" }), _jsx("option", { value: "72", children: "72" }), _jsx("option", { value: "96", children: "96" })] }), _jsxs("select", { value: currentFont, onMouseDown: () => {
+                            const sel = window.getSelection();
+                            if (sel && sel.rangeCount > 0) {
+                                const range = sel.getRangeAt(0);
+                                const editor = editableRef.current;
+                                if (editor && editor.contains(range.commonAncestorContainer) && !range.collapsed) {
+                                    savedRangeRef.current = range.cloneRange();
+                                }
+                            }
+                        }, onChange: (e) => applyFontFamily(e.target.value), title: "Font Family", style: {
+                            height: 32,
+                            padding: "0 8px",
+                            border: "1px solid #e5e7eb",
+                            borderRadius: 6,
+                            background: "#fff",
+                            color: "#111",
+                            maxWidth: 100,
+                        }, children: [_jsx("option", { value: "", disabled: true, children: "Font" }), fonts.map((f) => (_jsx("option", { value: f.value, children: f.name }, f.value)))] }), _jsx("button", { title: "Text Color", onClick: () => {
                             setColorPickerType('text');
                             setShowColorPicker(true);
                         }, style: {
@@ -1109,16 +1645,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             background: "#fff",
                             color: "#111",
                             position: "relative",
-                        }, children: [_jsx("span", { style: { fontWeight: 700 }, children: "A" }), _jsx("div", { style: {
-                                    position: "absolute",
-                                    bottom: 4,
-                                    left: "50%",
-                                    transform: "translateX(-50%)",
-                                    width: 16,
-                                    height: 3,
-                                    background: "#000",
-                                    borderRadius: 1,
-                                } })] }), _jsx("button", { title: "Background Color", onClick: () => {
+                        }, children: _jsx("span", { style: { fontWeight: 700 }, children: "A" }) }), _jsx("button", { title: "Background Color", onClick: () => {
                             setColorPickerType('background');
                             setShowColorPicker(true);
                         }, style: {
@@ -1129,7 +1656,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             borderRadius: 6,
                             background: "#fff",
                             color: "#111",
-                        }, children: _jsx("span", { style: { fontWeight: 700, background: "#ffeb3b", padding: "2px 4px" }, children: "A" }) }), _jsx("button", { title: "Bulleted list", onClick: () => exec("insertUnorderedList"), style: {
+                        }, children: _jsx("span", { style: { fontWeight: 700, padding: "2px 4px" }, children: "A" }) }), _jsx("button", { title: "Bulleted list", onClick: () => exec("insertUnorderedList"), style: {
                             height: 32,
                             padding: "0 10px",
                             border: "1px solid #e5e7eb",
@@ -1196,7 +1723,23 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                     borderRadius: 6,
                                     background: "#fff",
                                     color: "#111",
-                                }, children: "\uD83D\uDCC1 Media" })), _jsxs("div", { style: {
+                                }, children: "\uD83D\uDCC1 Media" })), _jsx("button", { title: "Import PDF", onClick: () => pdfInputRef.current?.click(), disabled: loadingPdf, style: {
+                                    height: 32,
+                                    padding: "0 10px",
+                                    border: "1px solid #e5e7eb",
+                                    borderRadius: 6,
+                                    background: "#fff",
+                                    color: "#111",
+                                    opacity: loadingPdf ? 0.5 : 1,
+                                }, children: loadingPdf ? '⌛ Importing...' : '📄 PDF' }), _jsx("button", { title: "Import DOCX", onClick: () => docxInputRef.current?.click(), disabled: loadingDocx, style: {
+                                    height: 32,
+                                    padding: "0 10px",
+                                    border: "1px solid #e5e7eb",
+                                    borderRadius: 6,
+                                    background: "#fff",
+                                    color: "#111",
+                                    opacity: loadingDocx ? 0.5 : 1,
+                                }, children: loadingDocx ? '⌛ Importing...' : '📝 DOCX' }), _jsxs("div", { style: {
                                     display: "inline-flex",
                                     gap: 4,
                                     alignItems: "center",
@@ -1319,7 +1862,60 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             }, children: [_jsx("button", { onClick: () => setShowTableDialog(false), children: "Cancel" }), _jsx("button", { onClick: () => {
                                         insertTable();
                                         setShowTableDialog(false);
-                                    }, children: "Insert" })] })] }) })), showColorPicker && (_jsx("div", { style: {
+                                    }, children: "Insert" })] })] }) })), pendingImport && (_jsx("div", { style: {
+                    position: "fixed",
+                    inset: 0,
+                    background: "rgba(0,0,0,0.5)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    zIndex: 100,
+                }, onClick: () => {
+                    setPendingImport(null);
+                    if (pdfInputRef.current)
+                        pdfInputRef.current.value = "";
+                    if (docxInputRef.current)
+                        docxInputRef.current.value = "";
+                }, children: _jsxs("div", { style: {
+                        background: "#fff",
+                        padding: 20,
+                        borderRadius: 8,
+                        maxWidth: 400,
+                        width: "90%",
+                        boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+                    }, onClick: (e) => e.stopPropagation(), children: [_jsx("h3", { style: { margin: "0 0 12px 0", fontSize: 18, fontWeight: 600 }, children: "Import Content" }), _jsx("p", { style: { margin: "0 0 20px 0", color: "#4b5563", fontSize: 14 }, children: "The editor already contains content. How would you like to handle the imported document?" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [_jsx("button", { onClick: () => processImport(pendingImport.file, pendingImport.type, 'replace'), style: {
+                                        padding: "8px 16px",
+                                        background: "#dc2626",
+                                        color: "white",
+                                        border: "none",
+                                        borderRadius: 6,
+                                        cursor: "pointer",
+                                        fontWeight: 500,
+                                        textAlign: "left"
+                                    }, children: "Replace Check existing content (Overwrite)" }), _jsx("button", { onClick: () => processImport(pendingImport.file, pendingImport.type, 'append'), style: {
+                                        padding: "8px 16px",
+                                        background: "#2563eb",
+                                        color: "white",
+                                        border: "none",
+                                        borderRadius: 6,
+                                        cursor: "pointer",
+                                        fontWeight: 500,
+                                        textAlign: "left"
+                                    }, children: "Append to bottom" }), _jsx("button", { onClick: () => {
+                                        setPendingImport(null);
+                                        if (pdfInputRef.current)
+                                            pdfInputRef.current.value = "";
+                                        if (docxInputRef.current)
+                                            docxInputRef.current.value = "";
+                                    }, style: {
+                                        padding: "8px 16px",
+                                        background: "#f3f4f6",
+                                        color: "#374151",
+                                        border: "1px solid #d1d5db",
+                                        borderRadius: 6,
+                                        cursor: "pointer",
+                                        marginTop: 4
+                                    }, children: "Cancel" })] })] }) })), showColorPicker && (_jsx("div", { style: {
                     position: "fixed",
                     inset: 0,
                     background: "rgba(0,0,0,0.35)",
@@ -1332,6 +1928,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         padding: 16,
                         borderRadius: 8,
                         minWidth: 320,
+                        maxWidth: "90vw",
                         color: "#000",
                     }, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { style: { fontWeight: 600, marginBottom: 12 }, children: colorPickerType === 'text' ? 'Select Text Color' : 'Select Background Color' }), _jsx("div", { style: {
                                 display: "grid",
@@ -1485,273 +2082,285 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                         borderRadius: 4,
                                         background: "#fff",
                                         color: "#000",
-                                    }, title: sym, children: sym }, i)))] })] }) })), _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) {
+                                    }, title: sym, children: sym }, i)))] })] }) })), _jsx("div", { style: {
+                    width: "100%",
+                    maxWidth: "100%",
+                    flex: "1 1 auto",
+                    minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight,
+                    maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
+                    overflowY: "auto",
+                    overflowX: "hidden",
+                    boxSizing: "border-box",
+                    position: "relative",
+                }, children: _jsx("div", { ref: editableRef, contentEditable: !readOnly, suppressContentEditableWarning: true, onInput: handleInput, onCompositionStart: () => (isComposingRef.current = true), onCompositionEnd: () => {
+                        isComposingRef.current = false;
+                        handleInput();
+                    }, onPaste: (e) => {
+                        const items = e.clipboardData?.files;
+                        if (media && items && items.length) {
+                            const hasImage = Array.from(items).some((f) => f.type.startsWith("image/"));
+                            if (hasImage) {
+                                e.preventDefault();
+                                handleLocalImageFiles(items);
+                            }
+                        }
+                    }, onDragOver: (e) => {
+                        // Allow dragging images within editor and file drops
+                        if (draggedImageRef.current ||
+                            e.dataTransfer?.types?.includes("Files")) {
                             e.preventDefault();
-                            handleLocalImageFiles(items);
                         }
-                    }
-                }, 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) {
+                    }, 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
-                            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);
                             }
-                        }
-                        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: {
-                    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) => {
-                    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: "100%",
+                        maxWidth: "100%",
+                        overflowX: "hidden",
+                        padding: "16px",
+                        outline: "none",
+                        lineHeight: 1.6,
+                        boxSizing: "border-box",
+                        fontFamily: defaultFont || "inherit",
+                    }, "data-placeholder": placeholder, onFocus: (e) => {
+                        // Ensure the editor has at least one paragraph to type into
+                        const el = e.currentTarget;
+                        if (!el.innerHTML || el.innerHTML === "<br>") {
+                            el.innerHTML = "<p><br></p>";
                         }
-                        else {
-                            document.execCommand("insertText", false, "  ");
+                    }, 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)
+                        }
+                        const pos = getCellPosition(cell);
+                        if (!pos)
                             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: {
+                        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 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,