smartrte-react 0.2.1 → 0.2.3

package/dist/components/ClassicEditor.js

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import { MediaManager } from "./MediaManager";
 import * as pdfjsLib from 'pdfjs-dist';
 import mammoth from 'mammoth';
+import JSZip from 'jszip';
 import { ensureStyleSheet } from '../theme';
 // Initialize PDF.js worker
 if (typeof window !== 'undefined') {
@@ -16,7 +17,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     { 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, theme = "light", className, }) {
+], defaultFont, preserveFontFamily = false, preserveColors = false, preserveDocxStyles = true, theme = "light", className, }) {
     ensureStyleSheet();
     const editableRef = useRef(null);
     const lastEmittedRef = useRef("");
@@ -24,6 +25,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const fileInputRef = useRef(null);
     const pdfInputRef = useRef(null);
     const docxInputRef = useRef(null);
+    const htmlInputRef = useRef(null);
+    const mdInputRef = useRef(null);
     const [loadingPdf, setLoadingPdf] = useState(false);
     const [loadingDocx, setLoadingDocx] = useState(false);
     // State for import confirmation
@@ -45,6 +48,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const [imageMenu, setImageMenu] = useState(null);
     const [showMediaManager, setShowMediaManager] = useState(false);
     const [showColorPicker, setShowColorPicker] = useState(false);
+    const [showSpecialChars, setShowSpecialChars] = useState(false);
     const [colorPickerType, setColorPickerType] = useState('text');
     const savedRangeRef = useRef(null);
     const [currentFontSize, setCurrentFontSize] = useState("");
@@ -93,27 +97,91 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     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);
-                }
-            }
+            emitChange();
         }
         catch { }
     };
     const applyFormatBlock = (blockName) => {
         exec("formatBlock", blockName);
     };
+    const emitChange = () => {
+        const el = editableRef.current;
+        if (!el || !onChange)
+            return;
+        const html = el.innerHTML;
+        if (html !== lastEmittedRef.current) {
+            lastEmittedRef.current = html;
+            onChange(html);
+        }
+    };
     const insertLink = () => {
         const url = window.prompt("Enter URL", "https://");
         if (!url)
             return;
         exec("createLink", url);
     };
+    const getSelectionRangeInEditor = () => {
+        const editor = editableRef.current;
+        if (!editor)
+            return null;
+        editor.focus();
+        const sel = window.getSelection();
+        if (sel && sel.rangeCount > 0) {
+            const range = sel.getRangeAt(0);
+            if (editor.contains(range.commonAncestorContainer))
+                return range;
+        }
+        if (savedRangeRef.current && editor.contains(savedRangeRef.current.commonAncestorContainer)) {
+            return savedRangeRef.current.cloneRange();
+        }
+        const range = document.createRange();
+        range.selectNodeContents(editor);
+        range.collapse(false);
+        return range;
+    };
+    const insertTextAtSelection = (text) => {
+        if (!text)
+            return;
+        try {
+            const range = getSelectionRangeInEditor();
+            if (!range)
+                return;
+            range.deleteContents();
+            const node = document.createTextNode(text);
+            range.insertNode(node);
+            const nextRange = document.createRange();
+            nextRange.setStartAfter(node);
+            nextRange.collapse(true);
+            safeSelectRange(nextRange);
+            handleInput();
+        }
+        catch { }
+    };
+    const toggleBlockquote = () => {
+        try {
+            const range = getSelectionRangeInEditor();
+            if (!range)
+                return;
+            let node = range.commonAncestorContainer;
+            if (node.nodeType === Node.TEXT_NODE)
+                node = node.parentElement;
+            const element = node;
+            const quote = element?.closest?.('blockquote');
+            if (quote && editableRef.current?.contains(quote)) {
+                const replacement = document.createElement('p');
+                replacement.innerHTML = quote.innerHTML || '<br>';
+                quote.parentElement?.replaceChild(replacement, quote);
+                const nextRange = document.createRange();
+                nextRange.selectNodeContents(replacement);
+                nextRange.collapse(false);
+                safeSelectRange(nextRange);
+                handleInput();
+                return;
+            }
+            exec("formatBlock", "<blockquote>");
+        }
+        catch { }
+    };
     const applyFontSize = (size) => {
         try {
             // Update current font size state
@@ -395,11 +463,12 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             window.removeEventListener('touchend', onTouchEnd);
         };
     }, [table]);
-    const insertImageAtSelection = (src) => {
+    const insertImageAtSelection = (srcOrItem) => {
         try {
             const host = editableRef.current;
             if (!host)
                 return;
+            const src = typeof srcOrItem === "string" ? srcOrItem : srcOrItem.url;
             host.focus();
             let sel = window.getSelection();
             let range = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
@@ -415,7 +484,21 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             img.style.maxWidth = "100%";
             img.style.height = "auto";
             img.style.display = "inline-block";
-            img.alt = "image";
+            img.alt = typeof srcOrItem === "string" ? "image" : (srcOrItem.alt || srcOrItem.title || "image");
+            if (typeof srcOrItem !== "string") {
+                if (srcOrItem.title)
+                    img.title = srcOrItem.title;
+                if (srcOrItem.license?.author)
+                    img.dataset.licenseAuthor = srcOrItem.license.author;
+                if (srcOrItem.license?.licenseType)
+                    img.dataset.licenseType = srcOrItem.license.licenseType;
+                if (srcOrItem.license?.licenseText)
+                    img.dataset.licenseText = srcOrItem.license.licenseText;
+                if (srcOrItem.license?.sourceUrl)
+                    img.dataset.licenseUrl = srcOrItem.license.sourceUrl;
+                if (srcOrItem.license?.workName)
+                    img.dataset.workName = srcOrItem.license.workName;
+            }
             if (range) {
                 range.insertNode(img);
             }
@@ -586,6 +669,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             let fullHtml = '';
             for (let i = 1; i <= pdf.numPages; i++) {
                 const page = await pdf.getPage(i);
+                const viewport = page.getViewport({ scale: 1 });
                 const textContent = await page.getTextContent();
                 const styles = textContent.styles;
                 // 1. Group items into lines
@@ -657,8 +741,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         const width = item.width;
                         const fontName = item.fontName;
                         const fontObj = styles[fontName];
-                        const isBold = fontObj?.fontFamily?.toLowerCase().includes('bold') || false;
-                        // const isItalic = fontObj?.fontFamily?.toLowerCase().includes('italic') || false;
+                        const fontFamily = fontObj?.fontFamily?.toLowerCase() || '';
+                        const isBold = fontFamily.includes('bold') || false;
+                        const isItalic = fontFamily.includes('italic') || fontFamily.includes('oblique');
+                        const fontSize = Math.max(8, Math.round(Math.abs(item.transform[3])));
                         if (lastX > 0) {
                             const gap = x - lastX;
                             if (gap > 2) { // Minimal space threshold
@@ -677,10 +763,12 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             itemXs.push(x);
                         }
                         // Append text style
-                        let chunk = item.str;
-                        if (isBold)
-                            chunk = `<strong>${chunk}</strong>`;
-                        // if (isItalic) chunk = `<em>${chunk}</em>`;
+                        const chunkStyle = cssRules([
+                            ['font-size', `${fontSize}px`],
+                            ['font-weight', isBold ? '700' : ''],
+                            ['font-style', isItalic ? 'italic' : ''],
+                        ]);
+                        let chunk = `<span${styleAttr(chunkStyle)}>${escapeHtml(item.str)}</span>`;
                         lineText += item.str;
                         lineHtmlContent += chunk;
                         lastX = x + width;
@@ -751,8 +839,15 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             const w = item.width;
                             const txt = item.str;
                             const fontObj = styles[item.fontName];
-                            const isBold = fontObj?.fontFamily?.toLowerCase().includes('bold');
-                            const styledTxt = isBold ? `<strong>${txt}</strong>` : txt;
+                            const fontFamily = fontObj?.fontFamily?.toLowerCase() || '';
+                            const isBold = fontFamily.includes('bold');
+                            const isItalic = fontFamily.includes('italic') || fontFamily.includes('oblique');
+                            const fontSize = Math.max(8, Math.round(Math.abs(item.transform[3])));
+                            const styledTxt = `<span${styleAttr(cssRules([
+                                ['font-size', `${fontSize}px`],
+                                ['font-weight', isBold ? '700' : ''],
+                                ['font-style', isItalic ? 'italic' : ''],
+                            ]))}>${escapeHtml(txt)}</span>`;
                             // Decide which column this belongs to
                             // Find closest column to the left (or close enough)
                             let colIdx = 0;
@@ -794,10 +889,23 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             closeList();
                             if (isHeader) {
                                 const tag = maxH > medianHeight * 1.5 ? 'h2' : 'h3';
-                                html += `<${tag}>${lineHtmlContent}</${tag}>`;
+                                const firstX = line.items[0]?.transform?.[4] || 0;
+                                const lastItem = line.items[line.items.length - 1];
+                                const lastRight = lastItem ? lastItem.transform[4] + lastItem.width : firstX;
+                                const center = (firstX + lastRight) / 2;
+                                const align = Math.abs(center - viewport.width / 2) < viewport.width * 0.12 ? 'center' : firstX > viewport.width * 0.55 ? 'right' : '';
+                                html += `<${tag}${styleAttr(cssRules([['text-align', align]]))}>${lineHtmlContent}</${tag}>`;
                             }
                             else {
-                                html += `<p>${lineHtmlContent}</p>`;
+                                const firstX = line.items[0]?.transform?.[4] || 0;
+                                const lastItem = line.items[line.items.length - 1];
+                                const lastRight = lastItem ? lastItem.transform[4] + lastItem.width : firstX;
+                                const center = (firstX + lastRight) / 2;
+                                const align = Math.abs(center - viewport.width / 2) < viewport.width * 0.12 ? 'center' : firstX > viewport.width * 0.55 ? 'right' : '';
+                                html += `<p${styleAttr(cssRules([
+                                    ['text-align', align],
+                                    ['margin-left', firstX > 40 && !align ? `${Math.round(firstX)}px` : ''],
+                                ]))}>${lineHtmlContent}</p>`;
                             }
                         }
                     }
@@ -806,30 +914,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 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);
-                }
-            }
+            insertImportedHtml(fullHtml, mode, { preserveColors: true, preserveDocumentLayout: true });
         }
         catch (error) {
             console.error('Error reading PDF:', error);
@@ -859,55 +944,14 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         try {
             setLoadingDocx(true);
             const arrayBuffer = await file.arrayBuffer();
-            const result = await mammoth.convertToHtml({ arrayBuffer });
-            let html = result.value;
+            const html = preserveDocxStyles
+                ? await convertDocxToStyledHtml(arrayBuffer)
+                : await convertDocxWithMammoth(arrayBuffer);
             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';
-                    });
+                insertImportedHtml(`<div class="srte-preserve-colors">${html}</div>`, mode, {
+                    preserveColors: preserveDocxStyles,
+                    preserveDocumentLayout: preserveDocxStyles,
                 });
-                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) {
@@ -917,6 +961,578 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             setLoadingDocx(false);
         }
     };
+    const convertDocxWithMammoth = async (arrayBuffer) => {
+        const result = await mammoth.convertToHtml({ arrayBuffer });
+        const temp = document.createElement('div');
+        temp.innerHTML = result.value;
+        enhanceImportedTables(temp);
+        return temp.innerHTML;
+    };
+    const convertDocxToStyledHtml = async (arrayBuffer) => {
+        try {
+            const zip = await JSZip.loadAsync(arrayBuffer);
+            const documentXml = await zip.file('word/document.xml')?.async('text');
+            if (!documentXml)
+                return convertDocxWithMammoth(arrayBuffer);
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(documentXml, 'application/xml');
+            if (doc.querySelector('parsererror'))
+                return convertDocxWithMammoth(arrayBuffer);
+            const body = Array.from(doc.getElementsByTagName('*')).find((node) => node.localName === 'body');
+            if (!body)
+                return convertDocxWithMammoth(arrayBuffer);
+            const html = directChildren(body)
+                .filter((node) => node.localName !== 'sectPr')
+                .map((node) => {
+                if (node.localName === 'p')
+                    return convertDocxParagraph(node);
+                if (node.localName === 'tbl')
+                    return convertDocxTable(node);
+                return '';
+            })
+                .join('');
+            if (!html.trim())
+                return convertDocxWithMammoth(arrayBuffer);
+            const temp = document.createElement('div');
+            temp.innerHTML = html;
+            enhanceImportedTables(temp);
+            return temp.innerHTML;
+        }
+        catch (error) {
+            console.warn('Falling back to Mammoth DOCX import:', error);
+            return convertDocxWithMammoth(arrayBuffer);
+        }
+    };
+    const directChildren = (node) => Array.from(node.children);
+    const firstChildByName = (node, localName) => node
+        ? directChildren(node).find((child) => child.localName === localName)
+        : undefined;
+    const childrenByName = (node, localName) => node
+        ? directChildren(node).filter((child) => child.localName === localName)
+        : [];
+    const docxAttr = (node, name) => {
+        if (!node)
+            return '';
+        return (node.getAttribute(`w:${name}`) ||
+            node.getAttribute(name) ||
+            node.getAttributeNS('http://schemas.openxmlformats.org/wordprocessingml/2006/main', name) ||
+            '');
+    };
+    const docxHexColor = (value) => {
+        if (!value || value.toLowerCase() === 'auto')
+            return '';
+        const normalized = value.replace(/[^0-9a-f]/gi, '');
+        return normalized.length === 6 ? `#${normalized}` : '';
+    };
+    const twipsToPt = (value) => {
+        const n = Number(value);
+        return Number.isFinite(n) ? `${Math.max(n / 20, 0)}pt` : '';
+    };
+    const halfPointsToPt = (value) => {
+        const n = Number(value);
+        return Number.isFinite(n) ? `${Math.max(n / 2, 1)}pt` : '';
+    };
+    const cssRules = (rules) => rules
+        .filter(([, value]) => Boolean(value))
+        .map(([name, value]) => `${name}: ${value}`)
+        .join('; ');
+    const styleAttr = (style) => (style ? ` style="${escapeHtml(style)}"` : '');
+    const convertDocxParagraphStyle = (paragraph) => {
+        const pPr = firstChildByName(paragraph, 'pPr');
+        if (!pPr)
+            return '';
+        const spacing = firstChildByName(pPr, 'spacing');
+        const jc = firstChildByName(pPr, 'jc');
+        const indent = firstChildByName(pPr, 'ind');
+        const borderBottom = firstChildByName(firstChildByName(pPr, 'pBdr'), 'bottom');
+        const line = docxAttr(spacing, 'line');
+        const lineRule = docxAttr(spacing, 'lineRule');
+        return cssRules([
+            ['text-align', docxAttr(jc, 'val')],
+            ['margin-top', twipsToPt(docxAttr(spacing, 'before'))],
+            ['margin-bottom', twipsToPt(docxAttr(spacing, 'after'))],
+            ['margin-left', twipsToPt(docxAttr(indent, 'left'))],
+            ['text-indent', twipsToPt(docxAttr(indent, 'firstLine'))],
+            ['line-height', line && lineRule === 'auto' ? `${Number(line) / 240}` : ''],
+            ['border-bottom', docxBorderCss(borderBottom)],
+        ]);
+    };
+    const convertDocxRunStyle = (run) => {
+        const rPr = firstChildByName(run, 'rPr');
+        if (!rPr)
+            return '';
+        const color = docxHexColor(docxAttr(firstChildByName(rPr, 'color'), 'val'));
+        const highlight = docxHexColor(docxAttr(firstChildByName(rPr, 'highlight'), 'val'));
+        const shade = docxHexColor(docxAttr(firstChildByName(rPr, 'shd'), 'fill'));
+        const size = halfPointsToPt(docxAttr(firstChildByName(rPr, 'sz'), 'val'));
+        const underline = firstChildByName(rPr, 'u');
+        return cssRules([
+            ['font-weight', firstChildByName(rPr, 'b') ? '700' : ''],
+            ['font-style', firstChildByName(rPr, 'i') ? 'italic' : ''],
+            ['text-decoration', underline ? 'underline' : ''],
+            ['color', color],
+            ['background-color', highlight || shade],
+            ['font-size', size],
+        ]);
+    };
+    const convertDocxRun = (run) => {
+        const rPr = firstChildByName(run, 'rPr');
+        const vertAlign = docxAttr(firstChildByName(rPr, 'vertAlign'), 'val');
+        const style = convertDocxRunStyle(run);
+        const content = directChildren(run)
+            .map((child) => {
+            if (child.localName === 't')
+                return escapeHtml(child.textContent || '');
+            if (child.localName === 'tab')
+                return '&emsp;';
+            if (child.localName === 'br') {
+                return docxAttr(child, 'type') === 'page'
+                    ? '<hr class="srte-docx-page-break">'
+                    : '<br>';
+            }
+            return '';
+        })
+            .join('');
+        if (!content)
+            return '';
+        const tag = vertAlign === 'superscript' ? 'sup' : vertAlign === 'subscript' ? 'sub' : 'span';
+        return `<${tag}${styleAttr(style)}>${content}</${tag}>`;
+    };
+    const convertDocxParagraph = (paragraph) => {
+        const style = convertDocxParagraphStyle(paragraph);
+        const content = childrenByName(paragraph, 'r').map(convertDocxRun).join('');
+        return `<p${styleAttr(style)}>${content || '<br>'}</p>`;
+    };
+    const docxBorderCss = (border) => {
+        if (!border)
+            return '';
+        const val = docxAttr(border, 'val');
+        if (!val || val === 'nil' || val === 'none')
+            return '';
+        const size = Number(docxAttr(border, 'sz')) || 4;
+        const width = Math.max(size / 8, 0.5);
+        const color = docxHexColor(docxAttr(border, 'color')) || '#d1d5db';
+        return `${width}px solid ${color}`;
+    };
+    const convertDocxCellStyle = (cell) => {
+        const tcPr = firstChildByName(cell, 'tcPr');
+        const width = twipsToPt(docxAttr(firstChildByName(tcPr, 'tcW'), 'w'));
+        const shade = docxHexColor(docxAttr(firstChildByName(tcPr, 'shd'), 'fill'));
+        const borders = firstChildByName(tcPr, 'tcBorders');
+        const top = docxBorderCss(firstChildByName(borders, 'top'));
+        const right = docxBorderCss(firstChildByName(borders, 'right'));
+        const bottom = docxBorderCss(firstChildByName(borders, 'bottom'));
+        const left = docxBorderCss(firstChildByName(borders, 'left'));
+        return cssRules([
+            ['width', width],
+            ['background-color', shade],
+            ['border-top', top],
+            ['border-right', right],
+            ['border-bottom', bottom],
+            ['border-left', left],
+            ['padding', '8px'],
+            ['vertical-align', 'top'],
+        ]);
+    };
+    const convertDocxTable = (table) => {
+        const rows = childrenByName(table, 'tr')
+            .map((row) => {
+            const cells = childrenByName(row, 'tc')
+                .map((cell) => {
+                const content = directChildren(cell)
+                    .filter((child) => child.localName === 'p' || child.localName === 'tbl')
+                    .map((child) => child.localName === 'p' ? convertDocxParagraph(child) : convertDocxTable(child))
+                    .join('');
+                return `<td${styleAttr(convertDocxCellStyle(cell))}>${content || '<p><br></p>'}</td>`;
+            })
+                .join('');
+            return `<tr>${cells}</tr>`;
+        })
+            .join('');
+        return `<table style="border-collapse: collapse; width: 100%; margin: 12px 0;"><tbody>${rows}</tbody></table>`;
+    };
+    const enhanceImportedTables = (root) => {
+        const tables = root.querySelectorAll('table');
+        tables.forEach(tbl => {
+            tbl.style.borderCollapse = tbl.style.borderCollapse || 'collapse';
+            tbl.style.width = tbl.style.width || '100%';
+            const cells = tbl.querySelectorAll('td, th');
+            cells.forEach(cell => {
+                const el = cell;
+                if (!el.style.border && !el.style.borderTop && !el.style.borderRight && !el.style.borderBottom && !el.style.borderLeft) {
+                    el.style.border = '1px solid #d1d5db';
+                }
+                el.style.padding = el.style.padding || '8px';
+                el.style.verticalAlign = el.style.verticalAlign || 'top';
+            });
+        });
+    };
+    const escapeHtml = (value) => value
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+    const escapeHtmlAttribute = (value) => escapeHtml(value).replace(/"/g, "&quot;");
+    const markdownToHtml = (markdown) => {
+        const lines = markdown.replace(/\r\n/g, "\n").split("\n");
+        let html = "";
+        let listType = null;
+        let paragraph = [];
+        let codeFence = null;
+        const closeList = () => {
+            if (listType) {
+                html += `</${listType}>`;
+                listType = null;
+            }
+        };
+        const inline = (text) => {
+            const codeTokens = [];
+            let value = text.replace(/`([^`]+)`/g, (_match, code) => {
+                const token = `@@SRTE_CODE_${codeTokens.length}@@`;
+                codeTokens.push(`<code>${escapeHtml(code)}</code>`);
+                return token;
+            });
+            value = escapeHtml(value)
+                .replace(/!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]+)")?\)/g, (_match, alt, src, title) => {
+                const titleAttr = title ? ` title="${escapeHtmlAttribute(title)}"` : "";
+                return `<img src="${escapeHtmlAttribute(src)}" alt="${escapeHtmlAttribute(alt)}"${titleAttr}>`;
+            })
+                .replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+"([^"]+)")?\)/g, (_match, label, href, title) => {
+                const titleAttr = title ? ` title="${escapeHtmlAttribute(title)}"` : "";
+                return `<a href="${escapeHtmlAttribute(href)}"${titleAttr}>${label}</a>`;
+            })
+                .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
+                .replace(/__([^_]+)__/g, "<strong>$1</strong>")
+                .replace(/~~([^~]+)~~/g, "<s>$1</s>")
+                .replace(/(^|[^*])\*([^*\n]+)\*/g, "$1<em>$2</em>")
+                .replace(/(^|[^_])_([^_\n]+)_/g, "$1<em>$2</em>");
+            codeTokens.forEach((replacement, index) => {
+                value = value.replace(`@@SRTE_CODE_${index}@@`, replacement);
+            });
+            return value;
+        };
+        const closeParagraph = () => {
+            if (!paragraph.length)
+                return;
+            html += `<p>${inline(paragraph.join(" "))}</p>`;
+            paragraph = [];
+        };
+        const isTableSeparator = (line) => /^\s*\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)+\|?\s*$/.test(line);
+        const parseTableRow = (line) => {
+            let value = line.trim();
+            if (value.startsWith("|"))
+                value = value.slice(1);
+            if (value.endsWith("|"))
+                value = value.slice(0, -1);
+            return value.split("|").map((cell) => cell.trim());
+        };
+        const renderTable = (startIndex) => {
+            const header = parseTableRow(lines[startIndex]);
+            let index = startIndex + 2;
+            const rows = [];
+            while (index < lines.length && lines[index].includes("|") && lines[index].trim()) {
+                rows.push(parseTableRow(lines[index]));
+                index += 1;
+            }
+            const headHtml = `<thead><tr>${header.map((cell) => `<th>${inline(cell)}</th>`).join("")}</tr></thead>`;
+            const bodyHtml = rows.length
+                ? `<tbody>${rows.map((row) => `<tr>${header.map((_cell, cellIndex) => `<td>${inline(row[cellIndex] || "")}</td>`).join("")}</tr>`).join("")}</tbody>`
+                : "";
+            html += `<table style="border-collapse: collapse; width: 100%; margin: 12px 0;">${headHtml}${bodyHtml}</table>`;
+            return index;
+        };
+        for (let i = 0; i < lines.length; i += 1) {
+            const line = lines[i];
+            const trimmed = line.trim();
+            const fence = /^```([A-Za-z0-9_-]+)?\s*$/.exec(trimmed);
+            if (fence) {
+                closeParagraph();
+                closeList();
+                if (codeFence) {
+                    const langClass = codeFence.lang ? ` class="language-${escapeHtmlAttribute(codeFence.lang)}"` : "";
+                    html += `<pre><code${langClass}>${escapeHtml(codeFence.lines.join("\n"))}</code></pre>`;
+                    codeFence = null;
+                }
+                else {
+                    codeFence = { lang: fence[1] || "", lines: [] };
+                }
+                continue;
+            }
+            if (codeFence) {
+                codeFence.lines.push(line);
+                continue;
+            }
+            if (!trimmed) {
+                closeParagraph();
+                closeList();
+                continue;
+            }
+            if (/^(-{3,}|\*{3,}|_{3,})$/.test(trimmed)) {
+                closeParagraph();
+                closeList();
+                html += "<hr>";
+                continue;
+            }
+            if (i + 1 < lines.length && trimmed.includes("|") && isTableSeparator(lines[i + 1])) {
+                closeParagraph();
+                closeList();
+                i = renderTable(i) - 1;
+                continue;
+            }
+            const heading = /^(#{1,6})\s+(.+)$/.exec(trimmed);
+            if (heading) {
+                closeParagraph();
+                closeList();
+                const level = heading[1].length;
+                html += `<h${level}>${inline(heading[2])}</h${level}>`;
+                continue;
+            }
+            const bullet = /^[-*+]\s+(.+)$/.exec(trimmed);
+            if (bullet) {
+                closeParagraph();
+                if (listType !== "ul") {
+                    closeList();
+                    html += "<ul>";
+                    listType = "ul";
+                }
+                html += `<li>${inline(bullet[1])}</li>`;
+                continue;
+            }
+            const numbered = /^\d+[.)]\s+(.+)$/.exec(trimmed);
+            if (numbered) {
+                closeParagraph();
+                if (listType !== "ol") {
+                    closeList();
+                    html += "<ol>";
+                    listType = "ol";
+                }
+                html += `<li>${inline(numbered[1])}</li>`;
+                continue;
+            }
+            const quote = /^>\s?(.*)$/.exec(trimmed);
+            if (quote) {
+                closeParagraph();
+                closeList();
+                html += `<blockquote>${inline(quote[1]) || "<br>"}</blockquote>`;
+                continue;
+            }
+            closeList();
+            paragraph.push(trimmed);
+        }
+        if (codeFence) {
+            const langClass = codeFence.lang ? ` class="language-${escapeHtmlAttribute(codeFence.lang)}"` : "";
+            html += `<pre><code${langClass}>${escapeHtml(codeFence.lines.join("\n"))}</code></pre>`;
+        }
+        closeParagraph();
+        closeList();
+        const root = document.createElement("div");
+        root.innerHTML = html;
+        enhanceImportedTables(root);
+        return root.innerHTML;
+    };
+    const htmlToMarkdown = (html) => {
+        const root = document.createElement("div");
+        root.innerHTML = html;
+        const walk = (node) => {
+            if (node.nodeType === Node.TEXT_NODE)
+                return node.textContent || "";
+            if (!(node instanceof HTMLElement))
+                return "";
+            const content = Array.from(node.childNodes).map(walk).join("");
+            const tag = node.tagName.toLowerCase();
+            if (tag === "strong" || tag === "b")
+                return `**${content}**`;
+            if (tag === "em" || tag === "i")
+                return `*${content}*`;
+            if (tag === "code")
+                return `\`${content}\``;
+            if (tag === "br")
+                return "\n";
+            if (/h[1-6]/.test(tag))
+                return `${"#".repeat(Number(tag[1]))} ${content.trim()}\n\n`;
+            if (tag === "p")
+                return `${content.trim()}\n\n`;
+            if (tag === "li")
+                return `- ${content.trim()}\n`;
+            if (tag === "ul" || tag === "ol")
+                return `${content}\n`;
+            if (tag === "blockquote")
+                return `> ${content.trim()}\n\n`;
+            if (tag === "table")
+                return `${node.outerHTML}\n\n`;
+            if (tag === "img")
+                return `![${node.getAttribute("alt") || ""}](${node.getAttribute("src") || ""})`;
+            if (tag === "a")
+                return `[${content}](${node.getAttribute("href") || ""})`;
+            return content;
+        };
+        return Array.from(root.childNodes).map(walk).join("").replace(/\n{3,}/g, "\n\n").trim();
+    };
+    const importTextFile = async (files, type) => {
+        if (!files || files.length === 0)
+            return;
+        const file = files[0];
+        const text = await file.text();
+        const html = type === "html" ? text : markdownToHtml(text);
+        const el = editableRef.current;
+        const hasContent = el && el.textContent && el.textContent.trim().length > 0;
+        insertImportedHtml(html, hasContent ? "append" : "replace", {
+            preserveColors: true,
+            preserveDocumentLayout: true,
+        });
+    };
+    const downloadText = (filename, content, mimeType) => {
+        const blob = new Blob([content], { type: mimeType });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+        URL.revokeObjectURL(url);
+    };
+    const exportHtml = () => {
+        const html = editableRef.current?.innerHTML || "";
+        downloadText("smart-rte-export.html", html, "text/html");
+    };
+    const exportMarkdown = () => {
+        const html = editableRef.current?.innerHTML || "";
+        downloadText("smart-rte-export.md", htmlToMarkdown(html), "text/markdown");
+    };
+    const htmlToDocxXml = (html) => {
+        const root = document.createElement("div");
+        root.innerHTML = html;
+        const xmlEscape = (value) => value
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;");
+        const colorValue = (value) => {
+            const hex = /^#([0-9a-f]{6})$/i.exec(value.trim());
+            if (hex)
+                return hex[1].toUpperCase();
+            const rgb = /^rgb\(\s*(\d+),\s*(\d+),\s*(\d+)\s*\)$/i.exec(value.trim());
+            if (!rgb)
+                return "";
+            return [rgb[1], rgb[2], rgb[3]]
+                .map((part) => Math.max(0, Math.min(255, Number(part))).toString(16).padStart(2, "0"))
+                .join("")
+                .toUpperCase();
+        };
+        const sizeToHalfPoints = (value) => {
+            const trimmed = value.trim();
+            const match = /^([\d.]+)(px|pt)$/i.exec(trimmed);
+            if (!match)
+                return "";
+            const raw = Number(match[1]);
+            const pt = match[2].toLowerCase() === "px" ? raw * 0.75 : raw;
+            return String(Math.max(2, Math.round(pt * 2)));
+        };
+        const runProperties = (el) => {
+            const style = el.style;
+            const color = colorValue(style.color);
+            const size = sizeToHalfPoints(style.fontSize);
+            const isBold = el.tagName === "B" || el.tagName === "STRONG" || /bold|700|800|900/.test(style.fontWeight);
+            const isItalic = el.tagName === "I" || el.tagName === "EM" || style.fontStyle === "italic";
+            const isUnderline = el.tagName === "U" || style.textDecoration.includes("underline");
+            return [
+                isBold ? "<w:b/>" : "",
+                isItalic ? "<w:i/>" : "",
+                isUnderline ? '<w:u w:val="single"/>' : "",
+                color ? `<w:color w:val="${color}"/>` : "",
+                size ? `<w:sz w:val="${size}"/>` : "",
+            ].join("");
+        };
+        const runs = (node, inheritedProps = "") => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                const text = node.textContent || "";
+                return text ? `<w:r>${inheritedProps ? `<w:rPr>${inheritedProps}</w:rPr>` : ""}<w:t xml:space="preserve">${xmlEscape(text)}</w:t></w:r>` : "";
+            }
+            if (!(node instanceof HTMLElement))
+                return "";
+            if (node.tagName === "BR")
+                return "<w:r><w:br/></w:r>";
+            if (node.tagName === "IMG") {
+                const alt = node.getAttribute("alt") || node.getAttribute("title") || "Image";
+                return `<w:r><w:t>[Image: ${xmlEscape(alt)}]</w:t></w:r>`;
+            }
+            const props = `${inheritedProps}${runProperties(node)}`;
+            return Array.from(node.childNodes).map((child) => runs(child, props)).join("");
+        };
+        const paragraph = (el, fallbackTag = "p") => {
+            const tag = el.tagName.toLowerCase();
+            const headingMatch = /^h([1-6])$/.exec(tag);
+            const style = el.style;
+            const align = style.textAlign ? `<w:jc w:val="${xmlEscape(style.textAlign)}"/>` : "";
+            const headingSize = headingMatch ? `<w:rPr><w:b/><w:sz w:val="${Math.max(24, 40 - Number(headingMatch[1]) * 4)}"/></w:rPr>` : "";
+            const body = runs(el);
+            return `<w:p><w:pPr>${align}${headingSize}</w:pPr>${body || "<w:r><w:t></w:t></w:r>"}</w:p>`;
+        };
+        const tableCell = (cell) => {
+            const fill = colorValue(cell.style.backgroundColor);
+            const shading = fill ? `<w:shd w:val="clear" w:color="auto" w:fill="${fill}"/>` : "";
+            const cellContent = Array.from(cell.childNodes)
+                .map((child) => child instanceof HTMLElement && ["P", "DIV", "H1", "H2", "H3", "H4", "H5", "H6"].includes(child.tagName)
+                ? paragraph(child)
+                : `<w:p>${runs(child)}</w:p>`)
+                .join("");
+            return `<w:tc><w:tcPr>${shading}<w:tcBorders><w:top w:val="single" w:sz="4" w:color="D1D5DB"/><w:left w:val="single" w:sz="4" w:color="D1D5DB"/><w:bottom w:val="single" w:sz="4" w:color="D1D5DB"/><w:right w:val="single" w:sz="4" w:color="D1D5DB"/></w:tcBorders></w:tcPr>${cellContent || "<w:p/>"}</w:tc>`;
+        };
+        const tableXml = (table) => {
+            const rows = Array.from(table.querySelectorAll("tr"));
+            return `<w:tbl><w:tblPr><w:tblW w:w="0" w:type="auto"/><w:tblBorders><w:top w:val="single" w:sz="4" w:color="D1D5DB"/><w:left w:val="single" w:sz="4" w:color="D1D5DB"/><w:bottom w:val="single" w:sz="4" w:color="D1D5DB"/><w:right w:val="single" w:sz="4" w:color="D1D5DB"/><w:insideH w:val="single" w:sz="4" w:color="D1D5DB"/><w:insideV w:val="single" w:sz="4" w:color="D1D5DB"/></w:tblBorders></w:tblPr>${rows.map((row) => `<w:tr>${Array.from(row.children).map((cell) => tableCell(cell)).join("")}</w:tr>`).join("")}</w:tbl>`;
+        };
+        const blockXml = (node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                const text = node.textContent?.trim();
+                return text ? `<w:p>${runs(node)}</w:p>` : "";
+            }
+            if (!(node instanceof HTMLElement))
+                return "";
+            if (node.tagName === "TABLE")
+                return tableXml(node);
+            if (node.tagName === "UL" || node.tagName === "OL") {
+                return Array.from(node.children).map((li) => `<w:p><w:r><w:t>• </w:t></w:r>${runs(li)}</w:p>`).join("");
+            }
+            if (node.tagName === "BLOCKQUOTE") {
+                return `<w:p><w:pPr><w:ind w:left="720"/></w:pPr>${runs(node)}</w:p>`;
+            }
+            if (node.tagName === "HR")
+                return '<w:p><w:pPr><w:pBdr><w:bottom w:val="single" w:sz="6" w:color="D1D5DB"/></w:pBdr></w:pPr></w:p>';
+            if (["P", "DIV", "PRE", "H1", "H2", "H3", "H4", "H5", "H6"].includes(node.tagName))
+                return paragraph(node);
+            return Array.from(node.childNodes).map(blockXml).join("");
+        };
+        const body = Array.from(root.childNodes).map(blockXml).join("");
+        return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?><w:document xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main"><w:body>${body}<w:sectPr><w:pgSz w:w="12240" w:h="15840"/><w:pgMar w:top="720" w:right="720" w:bottom="720" w:left="720"/></w:sectPr></w:body></w:document>`;
+    };
+    const exportDocx = async () => {
+        const html = editableRef.current?.innerHTML || "";
+        const zip = new JSZip();
+        zip.file("[Content_Types].xml", `<?xml version="1.0" encoding="UTF-8"?><Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types"><Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/><Default Extension="xml" ContentType="application/xml"/><Override PartName="/word/document.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml"/></Types>`);
+        zip.folder("_rels")?.file(".rels", `<?xml version="1.0" encoding="UTF-8"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="word/document.xml"/></Relationships>`);
+        zip.folder("word")?.file("document.xml", htmlToDocxXml(html));
+        zip.folder("word")?.folder("_rels")?.file("document.xml.rels", `<?xml version="1.0" encoding="UTF-8"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"></Relationships>`);
+        const blob = await zip.generateAsync({ type: "blob", mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = "smart-rte-export.docx";
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+        URL.revokeObjectURL(url);
+    };
+    const exportPdf = () => {
+        const html = editableRef.current?.innerHTML || "";
+        const printWindow = window.open("", "_blank", "noopener,noreferrer,width=900,height=700");
+        if (!printWindow)
+            return;
+        printWindow.document.write(`<!doctype html><html><head><title>Export PDF</title><style>body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6;padding:32px;color:#111}table{border-collapse:collapse;width:100%;margin:12px 0}td,th{border:1px solid #d1d5db;padding:8px;vertical-align:top}img{max-width:100%;height:auto}blockquote{border-left:4px solid #d1d5db;padding-left:12px;color:#374151}pre,code{background:#f3f4f6}pre{padding:12px;white-space:pre-wrap}@media print{body{padding:0}}</style></head><body>${html}</body></html>`);
+        printWindow.document.close();
+        printWindow.focus();
+        setTimeout(() => printWindow.print(), 250);
+    };
     const fixNegativeMargins = (root) => {
         try {
             const nodes = root.querySelectorAll('*');
@@ -929,6 +1545,152 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         }
         catch { }
     };
+    const cleanPastedHtml = (html, options = {}) => {
+        const shouldPreserveColors = options.preserveColors ?? preserveColors;
+        const shouldPreserveDocumentLayout = options.preserveDocumentLayout ?? false;
+        const template = document.createElement('template');
+        template.innerHTML = html
+            .replace(/&nbsp;/gi, ' ')
+            .replace(/\u00a0/g, ' ')
+            .replace(/[\u200b\u200c\u200d]/g, '');
+        template.content.querySelectorAll('meta, link, style, script').forEach((node) => node.remove());
+        const allowedStyleNames = new Set([
+            'font-weight',
+            'font-style',
+            'text-decoration',
+            'text-align',
+            'vertical-align',
+            'border',
+            'border-top',
+            'border-right',
+            'border-bottom',
+            'border-left',
+            'border-collapse',
+            'padding',
+            'padding-top',
+            'padding-right',
+            'padding-bottom',
+            'padding-left',
+            'list-style-type',
+            'white-space',
+        ]);
+        if (preserveFontFamily)
+            allowedStyleNames.add('font-family');
+        if (shouldPreserveColors) {
+            allowedStyleNames.add('color');
+            allowedStyleNames.add('background');
+            allowedStyleNames.add('background-color');
+        }
+        if (shouldPreserveDocumentLayout) {
+            [
+                'font-size',
+                'line-height',
+                'margin',
+                'margin-top',
+                'margin-right',
+                'margin-bottom',
+                'margin-left',
+                'text-indent',
+                'width',
+                'min-width',
+            ].forEach((name) => allowedStyleNames.add(name));
+        }
+        template.content.querySelectorAll('*').forEach((node) => {
+            const className = node.getAttribute('class');
+            if (className !== 'srte-preserve-colors')
+                node.removeAttribute('class');
+            node.removeAttribute('id');
+            if (!shouldPreserveDocumentLayout) {
+                node.removeAttribute('width');
+                node.removeAttribute('height');
+            }
+            const style = node.getAttribute('style');
+            if (!style)
+                return;
+            const safeRules = style
+                .split(';')
+                .map((rule) => rule.trim())
+                .filter(Boolean)
+                .filter((rule) => {
+                const separator = rule.indexOf(':');
+                if (separator === -1)
+                    return false;
+                const name = rule.slice(0, separator).trim().toLowerCase();
+                const value = rule.slice(separator + 1).trim().toLowerCase();
+                if (!allowedStyleNames.has(name))
+                    return false;
+                if (value.includes('position') || value.includes('expression') || value.includes('javascript:'))
+                    return false;
+                if (name === 'white-space' && value !== 'pre-wrap')
+                    return false;
+                if ((name === 'width' || name === 'min-width') && !/^[\d.]+(px|pt|em|rem|%)$/.test(value))
+                    return false;
+                return true;
+            });
+            if (safeRules.length)
+                node.setAttribute('style', safeRules.join('; '));
+            else
+                node.removeAttribute('style');
+        });
+        return template.innerHTML;
+    };
+    const normalizeEditorContent = () => {
+        const el = editableRef.current;
+        if (!el)
+            return;
+        fixNegativeMargins(el);
+        ensureTableWrappers(el);
+        addTableResizeHandles();
+    };
+    const insertHtmlAtEnd = (html) => {
+        const el = editableRef.current;
+        if (!el)
+            return;
+        el.focus();
+        const range = document.createRange();
+        range.selectNodeContents(el);
+        range.collapse(false);
+        const sel = window.getSelection();
+        sel?.removeAllRanges();
+        sel?.addRange(range);
+        const separator = el.textContent?.trim() ? '<p><br></p>' : '';
+        document.execCommand('insertHTML', false, `${separator}${html}`);
+    };
+    const replaceEditorHtml = (html) => {
+        const el = editableRef.current;
+        if (!el)
+            return;
+        el.innerHTML = html;
+        el.focus();
+        const range = document.createRange();
+        range.selectNodeContents(el);
+        range.collapse(false);
+        const sel = window.getSelection();
+        sel?.removeAllRanges();
+        sel?.addRange(range);
+    };
+    const insertImportedHtml = (html, mode, cleanOptions) => {
+        try {
+            const cleanHtml = cleanPastedHtml(html, cleanOptions);
+            if (mode === 'replace')
+                replaceEditorHtml(cleanHtml);
+            else
+                insertHtmlAtEnd(cleanHtml);
+            normalizeEditorContent();
+            emitChange();
+        }
+        catch (error) {
+            console.error('Error inserting imported content:', error);
+        }
+    };
+    const insertCleanHtml = (html) => {
+        try {
+            document.execCommand("insertHTML", false, cleanPastedHtml(html));
+            normalizeEditorContent();
+            emitChange();
+        }
+        catch { }
+    };
     const ensureTableWrappers = (root) => {
         try {
             const tables = root.querySelectorAll('table');
@@ -938,10 +1700,12 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     const wrapper = document.createElement('div');
                     wrapper.setAttribute('data-table-wrapper', 'true');
                     wrapper.style.overflowX = 'auto';
+                    wrapper.style.overflowY = 'visible';
                     wrapper.style.webkitOverflowScrolling = 'touch';
                     wrapper.style.width = '100%';
                     wrapper.style.maxWidth = '100%';
                     wrapper.style.display = 'block';
+                    wrapper.style.paddingBottom = '8px';
                     // Use insertBefore + appendChild to move element without losing too much state
                     // simpler than replaceChild for wrapping
                     parent.insertBefore(wrapper, table);
@@ -1335,6 +2099,27 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 firstRow.replaceChild(td, c);
             }
         }
+        handleInput();
+    };
+    const toggleHeaderColumn = (cell) => {
+        const pos = getCellPosition(cell);
+        if (!pos)
+            return;
+        const { tbody, cIdx } = pos;
+        const rows = Array.from(tbody.querySelectorAll("tr"));
+        const columnCells = rows
+            .map((row) => cellsOfRow(row)[cIdx])
+            .filter(Boolean);
+        const shouldMakeHeader = columnCells.some((c) => c.tagName !== "TH");
+        for (const c of columnCells) {
+            const replacement = document.createElement(shouldMakeHeader ? "th" : "td");
+            replacement.innerHTML = c.innerHTML || "&nbsp;";
+            replacement.style.border = c.style.border || "1px solid var(--srte-border)";
+            replacement.style.padding = c.style.padding || "6px";
+            replacement.style.minWidth = c.style.minWidth || "60px";
+            c.parentElement?.replaceChild(replacement, c);
+        }
+        handleInput();
     };
     const applyBgToSelection = (hex, fallbackCell) => {
         const sel = selectionRef.current;
@@ -1503,7 +2288,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             borderRadius: 6,
             width: "100%",
             maxWidth: "100vw",
-            overflow: "hidden",
+            overflow: "visible",
             display: "flex",
             flexDirection: "column",
             background: "var(--srte-bg)",
@@ -1552,6 +2337,12 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         } }), _jsx("input", { ref: docxInputRef, type: "file", accept: ".docx", style: { display: "none" }, onChange: (e) => {
                             handleDocxFiles(e.currentTarget.files);
                             e.currentTarget.value = "";
+                        } }), _jsx("input", { ref: htmlInputRef, type: "file", accept: ".html,.htm,text/html", style: { display: "none" }, onChange: (e) => {
+                            importTextFile(e.currentTarget.files, "html");
+                            e.currentTarget.value = "";
+                        } }), _jsx("input", { ref: mdInputRef, type: "file", accept: ".md,.markdown,text/markdown,text/plain", style: { display: "none" }, onChange: (e) => {
+                            importTextFile(e.currentTarget.files, "md");
+                            e.currentTarget.value = "";
                         } }), _jsxs("select", { defaultValue: "p", onChange: (e) => {
                             const val = e.target.value;
                             if (val === "p")
@@ -1621,7 +2412,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             borderRadius: 6,
                             background: "var(--srte-input-bg)",
                             color: "var(--srte-input-text)",
-                        }, children: [_jsx("option", { value: "", 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: () => {
+                        }, 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" })] }), preserveFontFamily && (_jsxs("select", { value: currentFont, onMouseDown: () => {
                             const sel = window.getSelection();
                             if (sel && sel.rangeCount > 0) {
                                 const range = sel.getRangeAt(0);
@@ -1638,7 +2429,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             background: "var(--srte-input-bg)",
                             color: "var(--srte-input-text)",
                             maxWidth: 100,
-                        }, children: [_jsx("option", { value: "", disabled: true, children: "Font" }), fonts.map((f) => (_jsx("option", { value: f.value, children: f.name }, f.value)))] }), _jsx("button", { title: "Text Color", onClick: () => {
+                        }, children: [_jsx("option", { value: "", disabled: true, children: "Font" }), fonts.map((f) => (_jsx("option", { value: f.value, children: f.name }, f.value)))] })), _jsx("button", { title: "Text Color", onClick: () => {
                             setColorPickerType('text');
                             setShowColorPicker(true);
                         }, style: {
@@ -1650,7 +2441,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             background: "var(--srte-input-bg)",
                             color: "var(--srte-input-text)",
                             position: "relative",
-                        }, children: _jsx("span", { style: { fontWeight: 700 }, children: "A" }) }), _jsx("button", { title: "Background Color", onClick: () => {
+                        }, children: _jsx("span", { style: { fontWeight: 700, borderBottom: "3px solid currentColor", lineHeight: 1 }, children: "A" }) }), _jsx("button", { title: "Background Color", onClick: () => {
                             setColorPickerType('background');
                             setShowColorPicker(true);
                         }, style: {
@@ -1661,7 +2452,23 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             borderRadius: 6,
                             background: "var(--srte-input-bg)",
                             color: "var(--srte-input-text)",
-                        }, children: _jsx("span", { style: { fontWeight: 700, padding: "2px 4px" }, children: "A" }) }), _jsx("button", { title: "Bulleted list", onClick: () => exec("insertUnorderedList"), style: {
+                        }, children: _jsx("span", { style: { fontWeight: 700, padding: "1px 4px", background: "var(--srte-accent-bg)", borderRadius: 3 }, children: "A" }) }), _jsxs("button", { title: "Subscript", onClick: () => exec("subscript"), style: {
+                            height: 32,
+                            minWidth: 32,
+                            padding: "0 8px",
+                            border: "1px solid var(--srte-input-border)",
+                            borderRadius: 6,
+                            background: "var(--srte-input-bg)",
+                            color: "var(--srte-input-text)",
+                        }, children: ["X", _jsx("sub", { children: "2" })] }), _jsxs("button", { title: "Superscript", onClick: () => exec("superscript"), style: {
+                            height: 32,
+                            minWidth: 32,
+                            padding: "0 8px",
+                            border: "1px solid var(--srte-input-border)",
+                            borderRadius: 6,
+                            background: "var(--srte-input-bg)",
+                            color: "var(--srte-input-text)",
+                        }, children: ["X", _jsx("sup", { children: "2" })] }), _jsx("button", { title: "Bulleted list", onClick: () => exec("insertUnorderedList"), style: {
                             height: 32,
                             padding: "0 10px",
                             border: "1px solid var(--srte-input-border)",
@@ -1675,7 +2482,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             borderRadius: 6,
                             background: "var(--srte-input-bg)",
                             color: "var(--srte-input-text)",
-                        }, children: "1. List" }), _jsx("button", { title: "Blockquote", onClick: () => exec("formatBlock", "<blockquote>"), style: {
+                        }, children: "1. List" }), _jsx("button", { title: "Blockquote", onClick: toggleBlockquote, style: {
                             height: 32,
                             minWidth: 32,
                             padding: "0 8px",
@@ -1683,7 +2490,15 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             borderRadius: 6,
                             background: "var(--srte-input-bg)",
                             color: "var(--srte-input-text)",
-                        }, children: "\u275D" }), _jsx("button", { title: "Code block", onClick: () => exec("formatBlock", "<pre>"), style: {
+                        }, children: "\u275D" }), _jsx("button", { title: "Special characters", onClick: () => setShowSpecialChars(true), style: {
+                            height: 32,
+                            minWidth: 32,
+                            padding: "0 8px",
+                            border: "1px solid var(--srte-input-border)",
+                            borderRadius: 6,
+                            background: "var(--srte-input-bg)",
+                            color: "var(--srte-input-text)",
+                        }, children: "\u03A9" }), _jsx("button", { title: "Code block", onClick: () => exec("formatBlock", "<pre>"), style: {
                             height: 32,
                             minWidth: 36,
                             padding: "0 8px",
@@ -1744,7 +2559,49 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                     background: "var(--srte-input-bg)",
                                     color: "var(--srte-input-text)",
                                     opacity: loadingDocx ? 0.5 : 1,
-                                }, children: loadingDocx ? '⌛ Importing...' : '📝 DOCX' }), _jsxs("div", { style: {
+                                }, children: loadingDocx ? '⌛ Importing...' : '📝 DOCX' }), _jsx("button", { title: "Import HTML", onClick: () => htmlInputRef.current?.click(), style: {
+                                    height: 32,
+                                    padding: "0 10px",
+                                    border: "1px solid var(--srte-input-border)",
+                                    borderRadius: 6,
+                                    background: "var(--srte-input-bg)",
+                                    color: "var(--srte-input-text)",
+                                }, children: "HTML" }), _jsx("button", { title: "Import Markdown", onClick: () => mdInputRef.current?.click(), style: {
+                                    height: 32,
+                                    padding: "0 10px",
+                                    border: "1px solid var(--srte-input-border)",
+                                    borderRadius: 6,
+                                    background: "var(--srte-input-bg)",
+                                    color: "var(--srte-input-text)",
+                                }, children: "MD" }), _jsx("button", { title: "Export HTML", onClick: exportHtml, style: {
+                                    height: 32,
+                                    padding: "0 10px",
+                                    border: "1px solid var(--srte-input-border)",
+                                    borderRadius: 6,
+                                    background: "var(--srte-input-bg)",
+                                    color: "var(--srte-input-text)",
+                                }, children: "Export HTML" }), _jsx("button", { title: "Export Markdown", onClick: exportMarkdown, style: {
+                                    height: 32,
+                                    padding: "0 10px",
+                                    border: "1px solid var(--srte-input-border)",
+                                    borderRadius: 6,
+                                    background: "var(--srte-input-bg)",
+                                    color: "var(--srte-input-text)",
+                                }, children: "Export MD" }), _jsx("button", { title: "Export DOCX", onClick: exportDocx, style: {
+                                    height: 32,
+                                    padding: "0 10px",
+                                    border: "1px solid var(--srte-input-border)",
+                                    borderRadius: 6,
+                                    background: "var(--srte-input-bg)",
+                                    color: "var(--srte-input-text)",
+                                }, children: "Export DOCX" }), _jsx("button", { title: "Export PDF", onClick: exportPdf, style: {
+                                    height: 32,
+                                    padding: "0 10px",
+                                    border: "1px solid var(--srte-input-border)",
+                                    borderRadius: 6,
+                                    background: "var(--srte-input-bg)",
+                                    color: "var(--srte-input-text)",
+                                }, children: "Export PDF" }), _jsxs("div", { style: {
                                     display: "inline-flex",
                                     gap: 4,
                                     alignItems: "center",
@@ -1823,7 +2680,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             color: "var(--srte-input-text)",
                         }, children: "\u293E Redo" })] }), media && mediaManager && (_jsx(MediaManager, { open: showMediaManager, onClose: () => setShowMediaManager(false), adapter: mediaManager, onSelect: (item) => {
                     if (item?.url)
-                        insertImageAtSelection(item.url);
+                        insertImageAtSelection(item);
                 } })), table && showTableDialog && (_jsx("div", { style: {
                     position: "fixed",
                     inset: 0,
@@ -1988,6 +2845,50 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                     background: 'var(--srte-input-bg)',
                                     color: 'var(--srte-input-text)',
                                     cursor: 'pointer',
+                                }, children: "Close" }) })] }) })), showSpecialChars && (_jsx("div", { style: {
+                    position: "fixed",
+                    inset: 0,
+                    background: "var(--srte-modal-backdrop)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    zIndex: 50,
+                }, onClick: () => setShowSpecialChars(false), children: _jsxs("div", { style: {
+                        background: "var(--srte-modal-bg)",
+                        color: "var(--srte-modal-text)",
+                        padding: 16,
+                        borderRadius: 8,
+                        width: 420,
+                        maxWidth: "90vw",
+                        boxShadow: "var(--srte-menu-shadow)",
+                    }, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { style: { fontWeight: 600, marginBottom: 12 }, children: "Special characters" }), [
+                            {
+                                label: "Greek",
+                                chars: ["α", "β", "γ", "δ", "ε", "ζ", "η", "θ", "ι", "κ", "λ", "μ", "ν", "ξ", "π", "ρ", "σ", "τ", "φ", "χ", "ψ", "ω", "Δ", "Σ", "Ω"],
+                            },
+                            {
+                                label: "Medical / Math",
+                                chars: ["±", "≤", "≥", "≠", "≈", "∞", "°", "µ", "×", "÷", "→", "←", "↑", "↓", "∴", "∵", "√", "∑", "∫", "₂", "₃", "²", "³"],
+                            },
+                        ].map((group) => (_jsxs("div", { style: { marginBottom: 12 }, children: [_jsx("div", { style: { fontSize: 12, color: "var(--srte-text-muted)", marginBottom: 6 }, children: group.label }), _jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: group.chars.map((char) => (_jsx("button", { type: "button", onClick: () => {
+                                            insertTextAtSelection(char);
+                                            setShowSpecialChars(false);
+                                        }, style: {
+                                            height: 32,
+                                            minWidth: 32,
+                                            padding: "0 8px",
+                                            border: "1px solid var(--srte-input-border)",
+                                            borderRadius: 6,
+                                            background: "var(--srte-input-bg)",
+                                            color: "var(--srte-input-text)",
+                                            fontSize: 16,
+                                        }, children: char }, char))) })] }, group.label))), _jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: _jsx("button", { type: "button", onClick: () => setShowSpecialChars(false), style: {
+                                    padding: "6px 16px",
+                                    border: "1px solid var(--srte-input-border)",
+                                    borderRadius: 6,
+                                    background: "var(--srte-input-bg)",
+                                    color: "var(--srte-input-text)",
+                                    cursor: "pointer",
                                 }, children: "Close" }) })] }) })), formula && showFormulaDialog && (_jsx("div", { style: {
                     position: "fixed",
                     inset: 0,
@@ -2093,12 +2994,15 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     width: "100%",
                     maxWidth: "100%",
                     flex: "1 1 auto",
+                    minWidth: 0,
                     minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight,
                     maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
                     overflowY: "auto",
-                    overflowX: "hidden",
+                    overflowX: "auto",
+                    overscrollBehavior: "contain",
                     boxSizing: "border-box",
                     position: "relative",
+                    scrollPaddingBottom: 24,
                 }, children: _jsx("div", { ref: editableRef, contentEditable: !readOnly, suppressContentEditableWarning: true, onInput: handleInput, onCompositionStart: () => (isComposingRef.current = true), onCompositionEnd: () => {
                         isComposingRef.current = false;
                         handleInput();
@@ -2109,8 +3013,14 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             if (hasImage) {
                                 e.preventDefault();
                                 handleLocalImageFiles(items);
+                                return;
                             }
                         }
+                        const html = e.clipboardData?.getData("text/html");
+                        if (html) {
+                            e.preventDefault();
+                            insertCleanHtml(cleanPastedHtml(html));
+                        }
                     }, onDragOver: (e) => {
                         // Allow dragging images within editor and file drops
                         if (draggedImageRef.current ||
@@ -2231,10 +3141,11 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     }, onDragEnd: () => {
                         draggedImageRef.current = null;
                     }, style: {
-                        minHeight: "100%",
+                        minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight,
                         maxWidth: "100%",
-                        overflowX: "hidden",
+                        overflowX: "visible",
                         padding: "16px",
+                        paddingBottom: "32px",
                         outline: "none",
                         lineHeight: 1.6,
                         boxSizing: "border-box",
@@ -2613,7 +3524,16 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                     }, 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: {
+                                    }, children: [_jsx("span", { children: "H\u2081" }), _jsx("span", { children: "Toggle header row" })] }), _jsxs("button", { style: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: 8,
+                                        padding: "6px 8px",
+                                        fontSize: 12,
+                                    }, onClick: () => {
+                                        toggleHeaderColumn(tableMenu.cell);
+                                        setTableMenu(null);
+                                    }, children: [_jsx("span", { children: "H\u2195" }), _jsx("span", { children: "Toggle header column" })] }), _jsx("hr", { style: { margin: "4px 0" } }), _jsxs("button", { style: {
                                         display: "flex",
                                         alignItems: "center",
                                         gap: 8,
@@ -2640,7 +3560,9 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         borderRadius: 8,
                         boxShadow: "var(--srte-menu-shadow)",
                         padding: 8,
-                        width: 220,
+                        width: 280,
+                        maxHeight: "80vh",
+                        overflowY: "auto",
                         color: "var(--srte-menu-text)",
                     }, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { style: { fontWeight: 600, fontSize: 11, margin: "2px 6px 6px" }, children: "Image" }), _jsxs("div", { style: { display: "grid", gap: 6 }, children: [_jsxs("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [_jsx("span", { style: { width: 48, fontSize: 12 }, children: "Link" }), _jsx("input", { defaultValue: imageMenu.img.parentElement?.tagName === "A"
                                                 ? imageMenu.img.parentElement.href
@@ -2742,7 +3664,58 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                                 img.style.margin = "0 0 8px 8px";
                                                 scheduleImageOverlay();
                                                 handleInput();
-                                            }, children: "\u27F9" })] }), _jsxs("div", { style: { display: "flex", gap: 6 }, children: [_jsx("button", { onClick: () => {
+                                            }, children: "\u27F9" })] }), _jsxs("div", { style: {
+                                        borderTop: "1px solid var(--srte-border-light)",
+                                        paddingTop: 6,
+                                        display: "grid",
+                                        gap: 6,
+                                    }, children: [_jsx("div", { style: { fontWeight: 600, fontSize: 11 }, children: "License" }), _jsx("input", { placeholder: "Work name", defaultValue: imageMenu.img.dataset.workName || "", onChange: (e) => {
+                                                imageMenu.img.dataset.workName = e.target.value;
+                                                handleInput();
+                                            }, style: {
+                                                padding: "4px 6px",
+                                                border: "1px solid var(--srte-border-light)",
+                                                borderRadius: 4,
+                                                color: "var(--srte-input-text)",
+                                                background: "var(--srte-input-bg)",
+                                            } }), _jsx("input", { placeholder: "Author", defaultValue: imageMenu.img.dataset.licenseAuthor || "", onChange: (e) => {
+                                                imageMenu.img.dataset.licenseAuthor = e.target.value;
+                                                handleInput();
+                                            }, style: {
+                                                padding: "4px 6px",
+                                                border: "1px solid var(--srte-border-light)",
+                                                borderRadius: 4,
+                                                color: "var(--srte-input-text)",
+                                                background: "var(--srte-input-bg)",
+                                            } }), _jsxs("select", { defaultValue: imageMenu.img.dataset.licenseType || "", onChange: (e) => {
+                                                imageMenu.img.dataset.licenseType = e.target.value;
+                                                handleInput();
+                                            }, style: {
+                                                height: 28,
+                                                padding: "0 6px",
+                                                border: "1px solid var(--srte-border-light)",
+                                                borderRadius: 4,
+                                                color: "var(--srte-input-text)",
+                                                background: "var(--srte-input-bg)",
+                                            }, children: [_jsx("option", { value: "", children: "License type" }), _jsx("option", { value: "public-domain", children: "Public domain" }), _jsx("option", { value: "cc0", children: "CC0" }), _jsx("option", { value: "cc-by", children: "CC BY" }), _jsx("option", { value: "cc-by-sa", children: "CC BY-SA" }), _jsx("option", { value: "cc-by-nc", children: "CC BY-NC" }), _jsx("option", { value: "rights-managed", children: "Rights managed" }), _jsx("option", { value: "custom", children: "Custom" })] }), _jsx("input", { placeholder: "License notes", defaultValue: imageMenu.img.dataset.licenseText || "", onChange: (e) => {
+                                                imageMenu.img.dataset.licenseText = e.target.value;
+                                                handleInput();
+                                            }, style: {
+                                                padding: "4px 6px",
+                                                border: "1px solid var(--srte-border-light)",
+                                                borderRadius: 4,
+                                                color: "var(--srte-input-text)",
+                                                background: "var(--srte-input-bg)",
+                                            } }), _jsx("input", { placeholder: "Source URL", defaultValue: imageMenu.img.dataset.licenseUrl || "", onChange: (e) => {
+                                                imageMenu.img.dataset.licenseUrl = e.target.value;
+                                                handleInput();
+                                            }, style: {
+                                                padding: "4px 6px",
+                                                border: "1px solid var(--srte-border-light)",
+                                                borderRadius: 4,
+                                                color: "var(--srte-input-text)",
+                                                background: "var(--srte-input-bg)",
+                                            } })] }), _jsxs("div", { style: { display: "flex", gap: 6 }, children: [_jsx("button", { onClick: () => {
                                                 replaceTargetRef.current = imageMenu.img;
                                                 fileInputRef.current?.click();
                                             }, children: "Replace\u2026" }), _jsx("button", { onClick: () => {