smartrte-react 0.1.18 → 0.2.2

package/dist/components/ClassicEditor.js

@@ -3,6 +3,8 @@ 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') {
     pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
@@ -15,13 +17,16 @@ 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, }) {
+], defaultFont, preserveFontFamily = false, preserveColors = false, preserveDocxStyles = true, theme = "light", className, }) {
+    ensureStyleSheet();
     const editableRef = useRef(null);
     const lastEmittedRef = useRef("");
     const isComposingRef = useRef(false);
     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
@@ -43,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("");
@@ -91,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
@@ -393,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;
@@ -413,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);
             }
@@ -769,7 +854,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             cellContents[colIdx] += styledTxt;
                         }
                         cellContents.forEach(content => {
-                            rowHtml += `<td style="border:1px solid #ddd;padding:8px;vertical-align:top;">${content || '&nbsp;'}</td>`;
+                            rowHtml += `<td style="border:1px solid var(--srte-border);padding:8px;vertical-align:top;">${content || '&nbsp;'}</td>`;
                         });
                         rowHtml += '</tr>';
                         tableHtml += rowHtml;
@@ -804,30 +889,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);
         }
         catch (error) {
             console.error('Error reading PDF:', error);
@@ -857,55 +919,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) {
@@ -915,6 +936,341 @@ 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 markdownToHtml = (markdown) => {
+        const lines = markdown.replace(/\r\n/g, "\n").split("\n");
+        let html = "";
+        let listType = null;
+        const closeList = () => {
+            if (listType) {
+                html += `</${listType}>`;
+                listType = null;
+            }
+        };
+        const inline = (text) => escapeHtml(text)
+            .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
+            .replace(/\*([^*]+)\*/g, "<em>$1</em>")
+            .replace(/`([^`]+)`/g, "<code>$1</code>");
+        lines.forEach((line) => {
+            const trimmed = line.trim();
+            if (!trimmed) {
+                closeList();
+                return;
+            }
+            const heading = /^(#{1,6})\s+(.+)$/.exec(trimmed);
+            if (heading) {
+                closeList();
+                const level = heading[1].length;
+                html += `<h${level}>${inline(heading[2])}</h${level}>`;
+                return;
+            }
+            const bullet = /^[-*]\s+(.+)$/.exec(trimmed);
+            if (bullet) {
+                if (listType !== "ul") {
+                    closeList();
+                    html += "<ul>";
+                    listType = "ul";
+                }
+                html += `<li>${inline(bullet[1])}</li>`;
+                return;
+            }
+            const numbered = /^\d+[.)]\s+(.+)$/.exec(trimmed);
+            if (numbered) {
+                if (listType !== "ol") {
+                    closeList();
+                    html += "<ol>";
+                    listType = "ol";
+                }
+                html += `<li>${inline(numbered[1])}</li>`;
+                return;
+            }
+            if (trimmed.startsWith("> ")) {
+                closeList();
+                html += `<blockquote>${inline(trimmed.slice(2))}</blockquote>`;
+                return;
+            }
+            closeList();
+            html += `<p>${inline(trimmed)}</p>`;
+        });
+        closeList();
+        return html;
+    };
+    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");
+    };
+    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 fixNegativeMargins = (root) => {
         try {
             const nodes = root.querySelectorAll('*');
@@ -927,6 +1283,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');
@@ -987,7 +1489,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             html += "<tr>";
             for (let c = 0; c < safeCols; c++) {
                 html +=
-                    '<td style="border:1px solid #ddd;padding:6px;min-width:60px;">&nbsp;</td>';
+                    '<td style="border:1px solid var(--srte-border);padding:6px;min-width:60px;">&nbsp;</td>';
             }
             html += "</tr>";
         }
@@ -1119,8 +1621,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     continue;
                 cell.__rtePrevBg =
                     cell.style.background || "";
-                cell.style.background = "rgba(30,144,255,0.15)";
-                cell.style.outline = "2px solid #1e90ff";
+                cell.style.background = "var(--srte-accent-bg)";
+                cell.style.outline = "2px solid var(--srte-accent)";
                 cell.style.outlineOffset = "-2px";
             }
         }
@@ -1189,7 +1691,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const numCols = Array.from(row.children).filter((c) => ["TD", "TH"].includes(c.tagName)).length;
         for (let i = 0; i < numCols; i++) {
             const td = document.createElement("td");
-            td.style.border = "1px solid #ddd";
+            td.style.border = "1px solid var(--srte-border)";
             td.style.padding = "6px";
             td.style.minWidth = "60px";
             td.innerHTML = "&nbsp;";
@@ -1219,7 +1721,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         for (const r of rows) {
             const cells = Array.from(r.children).filter((c) => ["TD", "TH"].includes(c.tagName));
             const td = document.createElement("td");
-            td.style.border = "1px solid #ddd";
+            td.style.border = "1px solid var(--srte-border)";
             td.style.padding = "6px";
             td.style.minWidth = "60px";
             td.innerHTML = "&nbsp;";
@@ -1252,7 +1754,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const replacement = document.createElement(isTh ? "td" : "th");
         replacement.innerHTML = cell.innerHTML || "&nbsp;";
         replacement.style.border =
-            cell.style.border || "1px solid #ddd";
+            cell.style.border || "1px solid var(--srte-border)";
         replacement.style.padding = cell.style.padding || "6px";
         replacement.style.minWidth = cell.style.minWidth || "60px";
         cell.parentElement?.replaceChild(replacement, cell);
@@ -1280,7 +1782,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const currentRow = Array.from(tbody.querySelectorAll("tr"))[rIdx];
         for (let j = 1; j < cs; j++) {
             const td = document.createElement("td");
-            td.style.border = "1px solid #ddd";
+            td.style.border = "1px solid var(--srte-border)";
             td.style.padding = "6px";
             td.style.minWidth = "60px";
             td.innerHTML = "&nbsp;";
@@ -1293,7 +1795,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             const row = Array.from(tbody.querySelectorAll("tr"))[rIdx + i];
             for (let j = 0; j < cs; j++) {
                 const td = document.createElement("td");
-                td.style.border = "1px solid #ddd";
+                td.style.border = "1px solid var(--srte-border)";
                 td.style.padding = "6px";
                 td.style.minWidth = "60px";
                 td.innerHTML = "&nbsp;";
@@ -1319,7 +1821,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             if (shouldMakeHeader && !isTh) {
                 const th = document.createElement("th");
                 th.innerHTML = c.innerHTML || "&nbsp;";
-                th.style.border = c.style.border || "1px solid #ddd";
+                th.style.border = c.style.border || "1px solid var(--srte-border)";
                 th.style.padding = c.style.padding || "6px";
                 th.style.minWidth = c.style.minWidth || "60px";
                 firstRow.replaceChild(th, c);
@@ -1327,12 +1829,33 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             else if (!shouldMakeHeader && isTh) {
                 const td = document.createElement("td");
                 td.innerHTML = c.innerHTML || "&nbsp;";
-                td.style.border = c.style.border || "1px solid #ddd";
+                td.style.border = c.style.border || "1px solid var(--srte-border)";
                 td.style.padding = c.style.padding || "6px";
                 td.style.minWidth = c.style.minWidth || "60px";
                 firstRow.replaceChild(td, c);
             }
         }
+        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;
@@ -1495,15 +2018,17 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             });
         });
     };
-    return (_jsxs("div", { style: {
-            border: "1px solid #ddd",
+    const editorClass = `srte-editor${theme === 'dark' ? ' srte-dark' : ''}${className ? ' ' + className : ''}`;
+    return (_jsxs("div", { className: editorClass, style: {
+            border: "1px solid var(--srte-border)",
             borderRadius: 6,
             width: "100%",
             maxWidth: "100vw",
             overflow: "hidden",
             display: "flex",
             flexDirection: "column",
-            background: "#fff",
+            background: "var(--srte-bg)",
+            color: "var(--srte-text)",
             boxSizing: "border-box"
         }, children: [_jsxs("div", { style: {
                     display: "flex",
@@ -1511,7 +2036,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     maxWidth: "100%",
                     gap: 8,
                     padding: 8,
-                    borderBottom: "1px solid #eee",
+                    borderBottom: "1px solid var(--srte-border-light)",
+                    background: "var(--srte-toolbar-bg)",
                     position: "sticky",
                     top: 0,
                     zIndex: 1,
@@ -1547,6 +2073,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")
@@ -1560,45 +2092,45 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         }, title: "Paragraph/Heading", style: {
                             height: 32,
                             padding: "0 8px",
-                            border: "1px solid #e5e7eb",
+                            border: "1px solid var(--srte-input-border)",
                             borderRadius: 6,
-                            background: "#fff",
-                            color: "#111",
+                            background: "var(--srte-input-bg)",
+                            color: "var(--srte-input-text)",
                         }, children: [_jsx("option", { value: "p", children: "Paragraph" }), _jsx("option", { value: "h1", children: "Heading 1" }), _jsx("option", { value: "h2", children: "Heading 2" }), _jsx("option", { value: "h3", children: "Heading 3" })] }), _jsx("button", { title: "Bold", onClick: () => exec("bold"), style: {
                             height: 32,
                             minWidth: 32,
                             padding: "0 8px",
-                            border: "1px solid #e5e7eb",
+                            border: "1px solid var(--srte-input-border)",
                             borderRadius: 6,
-                            background: "#fff",
-                            color: "#111",
+                            background: "var(--srte-input-bg)",
+                            color: "var(--srte-input-text)",
                         }, children: _jsx("span", { style: { fontWeight: 700 }, children: "B" }) }), _jsx("button", { title: "Italic", onClick: () => exec("italic"), style: {
                             height: 32,
                             minWidth: 32,
                             padding: "0 8px",
-                            border: "1px solid #e5e7eb",
+                            border: "1px solid var(--srte-input-border)",
                             borderRadius: 6,
-                            background: "#fff",
+                            background: "var(--srte-input-bg)",
                             fontStyle: "italic",
-                            color: "#111",
+                            color: "var(--srte-input-text)",
                         }, children: "I" }), _jsx("button", { title: "Underline", onClick: () => exec("underline"), style: {
                             height: 32,
                             minWidth: 32,
                             padding: "0 8px",
-                            border: "1px solid #e5e7eb",
+                            border: "1px solid var(--srte-input-border)",
                             borderRadius: 6,
-                            background: "#fff",
+                            background: "var(--srte-input-bg)",
                             textDecoration: "underline",
-                            color: "#111",
+                            color: "var(--srte-input-text)",
                         }, children: "U" }), _jsx("button", { title: "Strikethrough", onClick: () => exec("strikeThrough"), style: {
                             height: 32,
                             minWidth: 32,
                             padding: "0 8px",
-                            border: "1px solid #e5e7eb",
+                            border: "1px solid var(--srte-input-border)",
                             borderRadius: 6,
-                            background: "#fff",
+                            background: "var(--srte-input-bg)",
                             textDecoration: "line-through",
-                            color: "#111",
+                            color: "var(--srte-input-text)",
                         }, children: "S" }), _jsxs("select", { value: currentFontSize, onMouseDown: () => {
                             // Save selection before dropdown interaction
                             const sel = window.getSelection();
@@ -1612,11 +2144,11 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         }, onChange: (e) => applyFontSize(e.target.value), title: "Font Size", style: {
                             height: 32,
                             padding: "0 8px",
-                            border: "1px solid #e5e7eb",
+                            border: "1px solid var(--srte-input-border)",
                             borderRadius: 6,
-                            background: "#fff",
-                            color: "#111",
-                        }, 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: () => {
+                            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" })] }), preserveFontFamily && (_jsxs("select", { value: currentFont, onMouseDown: () => {
                             const sel = window.getSelection();
                             if (sel && sel.rangeCount > 0) {
                                 const range = sel.getRangeAt(0);
@@ -1628,118 +2160,170 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         }, onChange: (e) => applyFontFamily(e.target.value), title: "Font Family", style: {
                             height: 32,
                             padding: "0 8px",
-                            border: "1px solid #e5e7eb",
+                            border: "1px solid var(--srte-input-border)",
                             borderRadius: 6,
-                            background: "#fff",
-                            color: "#111",
+                            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: {
                             height: 32,
                             minWidth: 32,
                             padding: "0 8px",
-                            border: "1px solid #e5e7eb",
+                            border: "1px solid var(--srte-input-border)",
                             borderRadius: 6,
-                            background: "#fff",
-                            color: "#111",
+                            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: {
                             height: 32,
                             minWidth: 32,
                             padding: "0 8px",
-                            border: "1px solid #e5e7eb",
+                            border: "1px solid var(--srte-input-border)",
+                            borderRadius: 6,
+                            background: "var(--srte-input-bg)",
+                            color: "var(--srte-input-text)",
+                        }, children: _jsx("span", { style: { fontWeight: 700, 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: "#fff",
-                            color: "#111",
-                        }, children: _jsx("span", { style: { fontWeight: 700, padding: "2px 4px" }, children: "A" }) }), _jsx("button", { title: "Bulleted list", onClick: () => exec("insertUnorderedList"), style: {
+                            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 #e5e7eb",
+                            border: "1px solid var(--srte-input-border)",
                             borderRadius: 6,
-                            background: "#fff",
-                            color: "#111",
+                            background: "var(--srte-input-bg)",
+                            color: "var(--srte-input-text)",
                         }, children: "\u2022 List" }), _jsx("button", { title: "Numbered list", onClick: () => exec("insertOrderedList"), style: {
                             height: 32,
                             padding: "0 10px",
-                            border: "1px solid #e5e7eb",
+                            border: "1px solid var(--srte-input-border)",
                             borderRadius: 6,
-                            background: "#fff",
-                            color: "#111",
-                        }, children: "1. List" }), _jsx("button", { title: "Blockquote", onClick: () => exec("formatBlock", "<blockquote>"), style: {
+                            background: "var(--srte-input-bg)",
+                            color: "var(--srte-input-text)",
+                        }, children: "1. List" }), _jsx("button", { title: "Blockquote", onClick: toggleBlockquote, style: {
                             height: 32,
                             minWidth: 32,
                             padding: "0 8px",
-                            border: "1px solid #e5e7eb",
+                            border: "1px solid var(--srte-input-border)",
                             borderRadius: 6,
-                            background: "#fff",
-                            color: "#111",
-                        }, children: "\u275D" }), _jsx("button", { title: "Code block", onClick: () => exec("formatBlock", "<pre>"), style: {
+                            background: "var(--srte-input-bg)",
+                            color: "var(--srte-input-text)",
+                        }, children: "\u275D" }), _jsx("button", { title: "Special characters", onClick: () => setShowSpecialChars(true), style: {
+                            height: 32,
+                            minWidth: 32,
+                            padding: "0 8px",
+                            border: "1px solid var(--srte-input-border)",
+                            borderRadius: 6,
+                            background: "var(--srte-input-bg)",
+                            color: "var(--srte-input-text)",
+                        }, children: "\u03A9" }), _jsx("button", { title: "Code block", onClick: () => exec("formatBlock", "<pre>"), style: {
                             height: 32,
                             minWidth: 36,
                             padding: "0 8px",
-                            border: "1px solid #e5e7eb",
+                            border: "1px solid var(--srte-input-border)",
                             borderRadius: 6,
-                            background: "#fff",
+                            background: "var(--srte-input-bg)",
                             fontFamily: "ui-monospace, SFMono-Regular, Menlo",
-                            color: "#111",
+                            color: "var(--srte-input-text)",
                         }, children: "< />" }), formula && (_jsx("button", { title: "Insert formula", onClick: () => setShowFormulaDialog(true), style: {
                             height: 32,
                             minWidth: 32,
                             padding: "0 8px",
-                            border: "1px solid #e5e7eb",
+                            border: "1px solid var(--srte-input-border)",
                             borderRadius: 6,
-                            background: "#fff",
-                            color: "#111",
+                            background: "var(--srte-input-bg)",
+                            color: "var(--srte-input-text)",
                         }, children: "\u2211" })), _jsx("button", { title: "Insert link", onClick: insertLink, style: {
                             height: 32,
                             padding: "0 10px",
-                            border: "1px solid #e5e7eb",
+                            border: "1px solid var(--srte-input-border)",
                             borderRadius: 6,
-                            background: "#fff",
-                            color: "#111",
+                            background: "var(--srte-input-bg)",
+                            color: "var(--srte-input-text)",
                         }, children: "Link" }), _jsx("button", { title: "Remove link", onClick: () => exec("unlink"), style: {
                             height: 32,
                             padding: "0 10px",
-                            border: "1px solid #e5e7eb",
+                            border: "1px solid var(--srte-input-border)",
                             borderRadius: 6,
-                            background: "#fff",
-                            color: "#111",
+                            background: "var(--srte-input-bg)",
+                            color: "var(--srte-input-text)",
                         }, children: "Unlink" }), media && (_jsxs(_Fragment, { children: [_jsx("button", { title: "Insert image", onClick: insertImage, style: {
                                     height: 32,
                                     padding: "0 10px",
-                                    border: "1px solid #e5e7eb",
+                                    border: "1px solid var(--srte-input-border)",
                                     borderRadius: 6,
-                                    background: "#fff",
-                                    color: "#111",
+                                    background: "var(--srte-input-bg)",
+                                    color: "var(--srte-input-text)",
                                 }, children: "\uD83D\uDDBC\uFE0F Image" }), mediaManager && (_jsx("button", { title: "Open media manager", onClick: () => setShowMediaManager(true), style: {
                                     height: 32,
                                     padding: "0 10px",
-                                    border: "1px solid #e5e7eb",
+                                    border: "1px solid var(--srte-input-border)",
                                     borderRadius: 6,
-                                    background: "#fff",
-                                    color: "#111",
+                                    background: "var(--srte-input-bg)",
+                                    color: "var(--srte-input-text)",
                                 }, 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",
+                                    border: "1px solid var(--srte-input-border)",
                                     borderRadius: 6,
-                                    background: "#fff",
-                                    color: "#111",
+                                    background: "var(--srte-input-bg)",
+                                    color: "var(--srte-input-text)",
                                     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",
+                                    border: "1px solid var(--srte-input-border)",
                                     borderRadius: 6,
-                                    background: "#fff",
-                                    color: "#111",
+                                    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" }), _jsxs("div", { style: {
                                     display: "inline-flex",
                                     gap: 4,
                                     alignItems: "center",
@@ -1757,10 +2341,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                             height: 28,
                                             minWidth: 28,
                                             padding: "0 6px",
-                                            border: "1px solid #e5e7eb",
+                                            border: "1px solid var(--srte-input-border)",
                                             borderRadius: 6,
-                                            background: "#fff",
-                                            color: "#111",
+                                            background: "var(--srte-input-bg)",
+                                            color: "var(--srte-input-text)",
                                         }, children: "\u2299" }), _jsx("button", { onClick: () => {
                                             const img = selectedImage;
                                             if (!img)
@@ -1774,10 +2358,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                             height: 28,
                                             minWidth: 28,
                                             padding: "0 6px",
-                                            border: "1px solid #e5e7eb",
+                                            border: "1px solid var(--srte-input-border)",
                                             borderRadius: 6,
-                                            background: "#fff",
-                                            color: "#111",
+                                            background: "var(--srte-input-bg)",
+                                            color: "var(--srte-input-text)",
                                         }, children: "\u27F8" }), _jsx("button", { onClick: () => {
                                             const img = selectedImage;
                                             if (!img)
@@ -1791,44 +2375,45 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                             height: 28,
                                             minWidth: 28,
                                             padding: "0 6px",
-                                            border: "1px solid #e5e7eb",
+                                            border: "1px solid var(--srte-input-border)",
                                             borderRadius: 6,
-                                            background: "#fff",
-                                            color: "#111",
+                                            background: "var(--srte-input-bg)",
+                                            color: "var(--srte-input-text)",
                                         }, children: "\u27F9" })] })] })), table && (_jsx("button", { title: "Insert table", onClick: () => setShowTableDialog(true), style: {
                             height: 32,
                             padding: "0 10px",
-                            border: "1px solid #e5e7eb",
+                            border: "1px solid var(--srte-input-border)",
                             borderRadius: 6,
-                            background: "#fff",
-                            color: "#111",
+                            background: "var(--srte-input-bg)",
+                            color: "var(--srte-input-text)",
                         }, children: "\u2795 Table" })), _jsx("button", { title: "Undo", onClick: () => exec("undo"), style: {
                             height: 32,
                             padding: "0 10px",
-                            border: "1px solid #e5e7eb",
+                            border: "1px solid var(--srte-input-border)",
                             borderRadius: 6,
-                            background: "#fff",
-                            color: "#111",
+                            background: "var(--srte-input-bg)",
+                            color: "var(--srte-input-text)",
                         }, children: "\u238C Undo" }), _jsx("button", { title: "Redo", onClick: () => exec("redo"), style: {
                             height: 32,
                             padding: "0 10px",
-                            border: "1px solid #e5e7eb",
+                            border: "1px solid var(--srte-input-border)",
                             borderRadius: 6,
-                            background: "#fff",
-                            color: "#111",
+                            background: "var(--srte-input-bg)",
+                            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,
-                    background: "rgba(0,0,0,0.35)",
+                    background: "var(--srte-modal-backdrop)",
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
                     zIndex: 50,
                 }, onClick: () => setShowTableDialog(false), children: _jsxs("div", { style: {
-                        background: "#fff",
+                        background: "var(--srte-modal-bg)",
+                        color: "var(--srte-modal-text)",
                         padding: 16,
                         borderRadius: 8,
                         minWidth: 280,
@@ -1837,7 +2422,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                         gridTemplateColumns: "repeat(10, 18px)",
                                         gap: 2,
                                         padding: 6,
-                                        border: "1px solid #eee",
+                                        border: "1px solid var(--srte-border-light)",
                                     }, children: Array.from({ length: 100 }).map((_, i) => {
                                         const r = Math.floor(i / 10) + 1;
                                         const c = (i % 10) + 1;
@@ -1851,8 +2436,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                             }, style: {
                                                 width: 16,
                                                 height: 16,
-                                                border: "1px solid #ccc",
-                                                background: active ? "#1e90ff" : "#fff",
+                                                border: "1px solid var(--srte-border)",
+                                                background: active ? "var(--srte-accent)" : "var(--srte-input-bg)",
                                             } }, i));
                                     }) }), _jsxs("div", { style: { fontSize: 12, minWidth: 48 }, children: [tableRows, " \u00D7 ", tableCols] })] }), _jsxs("div", { style: {
                                 display: "flex",
@@ -1865,7 +2450,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                     }, children: "Insert" })] })] }) })), pendingImport && (_jsx("div", { style: {
                     position: "fixed",
                     inset: 0,
-                    background: "rgba(0,0,0,0.5)",
+                    background: "var(--srte-modal-backdrop)",
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
@@ -1877,16 +2462,17 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     if (docxInputRef.current)
                         docxInputRef.current.value = "";
                 }, children: _jsxs("div", { style: {
-                        background: "#fff",
+                        background: "var(--srte-modal-bg)",
+                        color: "var(--srte-modal-text)",
                         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: {
+                        boxShadow: "var(--srte-menu-shadow)",
+                    }, 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: "var(--srte-text-muted)", 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",
+                                        background: "var(--srte-danger)",
+                                        color: "var(--srte-on-primary)",
                                         border: "none",
                                         borderRadius: 6,
                                         cursor: "pointer",
@@ -1894,8 +2480,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                         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",
+                                        background: "var(--srte-primary)",
+                                        color: "var(--srte-on-primary)",
                                         border: "none",
                                         borderRadius: 6,
                                         cursor: "pointer",
@@ -1909,27 +2495,27 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                             docxInputRef.current.value = "";
                                     }, style: {
                                         padding: "8px 16px",
-                                        background: "#f3f4f6",
-                                        color: "#374151",
-                                        border: "1px solid #d1d5db",
+                                        background: "var(--srte-cancel-bg)",
+                                        color: "var(--srte-text)",
+                                        border: "1px solid var(--srte-border)",
                                         borderRadius: 6,
                                         cursor: "pointer",
                                         marginTop: 4
                                     }, children: "Cancel" })] })] }) })), showColorPicker && (_jsx("div", { style: {
                     position: "fixed",
                     inset: 0,
-                    background: "rgba(0,0,0,0.35)",
+                    background: "var(--srte-modal-backdrop)",
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
                     zIndex: 50,
                 }, onClick: () => setShowColorPicker(false), children: _jsxs("div", { style: {
-                        background: "#fff",
+                        background: "var(--srte-modal-bg)",
                         padding: 16,
                         borderRadius: 8,
                         minWidth: 320,
                         maxWidth: "90vw",
-                        color: "#000",
+                        color: "var(--srte-modal-text)",
                     }, 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",
                                 gridTemplateColumns: "repeat(8, 1fr)",
@@ -1957,7 +2543,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                 }, style: {
                                     width: 32,
                                     height: 32,
-                                    border: color === '#ffffff' ? '1px solid #ddd' : 'none',
+                                    border: color === '#ffffff' ? '1px solid var(--srte-border)' : 'none',
                                     borderRadius: 4,
                                     background: color,
                                     cursor: 'pointer',
@@ -1971,31 +2557,75 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                     }, style: {
                                         width: '100%',
                                         height: 40,
-                                        border: '1px solid #ddd',
+                                        border: '1px solid var(--srte-border)',
                                         borderRadius: 6,
                                         cursor: 'pointer',
                                     } })] }), _jsx("div", { style: { display: 'flex', justifyContent: 'end' }, children: _jsx("button", { onClick: () => setShowColorPicker(false), style: {
                                     padding: '6px 16px',
-                                    border: '1px solid #e5e7eb',
+                                    border: '1px solid var(--srte-input-border)',
                                     borderRadius: 6,
-                                    background: '#fff',
-                                    color: '#111',
+                                    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,
-                    background: "rgba(0,0,0,0.35)",
+                    background: "var(--srte-modal-backdrop)",
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
                     zIndex: 50,
                 }, onClick: () => setShowFormulaDialog(false), children: _jsxs("div", { style: {
-                        background: "#fff",
+                        background: "var(--srte-modal-bg)",
                         padding: 16,
                         borderRadius: 8,
                         minWidth: 520,
                         maxWidth: 720,
-                        color: "#000",
+                        color: "var(--srte-modal-text)",
                     }, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { style: {
                                 display: "flex",
                                 justifyContent: "space-between",
@@ -2004,10 +2634,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             }, children: [_jsx("div", { style: { fontWeight: 600 }, children: "Insert formula" }), _jsx("div", { style: { fontSize: 12, opacity: 0.7 }, children: "Shortcut: Cmd/Ctrl+M" })] }), _jsxs("div", { style: { display: "flex", gap: 8, marginBottom: 8 }, children: [_jsx("input", { value: formulaInput, onChange: (e) => setFormulaInput(e.target.value), placeholder: "Type LaTeX or shortcuts: sqrt(x), x^2, x_1, frac(a,b)", style: {
                                         flex: 1,
                                         padding: "6px 8px",
-                                        border: "1px solid #ddd",
+                                        border: "1px solid var(--srte-border)",
                                         borderRadius: 6,
-                                        color: "#000",
-                                        background: "#fff",
+                                        color: "var(--srte-input-text)",
+                                        background: "var(--srte-input-bg)",
                                     } }), _jsx("button", { onClick: () => {
                                         const tex = normalizeShortcutToLatex(formulaInput);
                                         if (tex)
@@ -2052,12 +2682,12 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                 }, title: p.tex, style: {
                                     textAlign: "left",
                                     padding: "8px 10px",
-                                    border: "1px solid #eee",
+                                    border: "1px solid var(--srte-border-light)",
                                     borderRadius: 6,
-                                    background: "#fafafa",
+                                    background: "var(--srte-surface-subtle)",
                                     fontSize: 12,
-                                    color: "#000",
-                                }, children: [_jsx("div", { style: { fontWeight: 600, marginBottom: 4 }, children: p.label }), _jsxs("div", { style: { color: "#000" }, children: ["$ ", p.tex, " $"] })] }, i))) }), _jsxs("div", { style: { marginTop: 12, fontSize: 12 }, children: ["Symbols:", " ", [
+                                    color: "var(--srte-modal-text)",
+                                }, children: [_jsx("div", { style: { fontWeight: 600, marginBottom: 4 }, children: p.label }), _jsxs("div", { children: ["$ ", p.tex, " $"] })] }, i))) }), _jsxs("div", { style: { marginTop: 12, fontSize: 12 }, children: ["Symbols:", " ", [
                                     `\\alpha`,
                                     `\\beta`,
                                     `\\gamma`,
@@ -2078,10 +2708,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                         marginRight: 6,
                                         marginBottom: 6,
                                         padding: "4px 6px",
-                                        border: "1px solid #eee",
+                                        border: "1px solid var(--srte-border-light)",
                                         borderRadius: 4,
-                                        background: "#fff",
-                                        color: "#000",
+                                        background: "var(--srte-input-bg)",
+                                        color: "var(--srte-modal-text)",
                                     }, title: sym, children: sym }, i)))] })] }) })), _jsx("div", { style: {
                     width: "100%",
                     maxWidth: "100%",
@@ -2102,8 +2732,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 ||
@@ -2371,7 +3007,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 }, children: [_jsx("div", { style: {
                             position: "absolute",
                             inset: 0,
-                            outline: "2px solid #1e90ff",
+                            outline: "2px solid var(--srte-accent)",
                             outlineOffset: -2,
                         } }), _jsx("div", { title: "Resize", onMouseDown: (e) => {
                             e.preventDefault();
@@ -2407,7 +3043,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             transform: "translateY(-50%)",
                             width: 8,
                             height: 24,
-                            background: "#1e90ff",
+                            background: "var(--srte-accent)",
                             borderRadius: 2,
                             cursor: "ew-resize",
                             pointerEvents: "auto",
@@ -2445,7 +3081,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             transform: "translateY(-50%)",
                             width: 8,
                             height: 24,
-                            background: "#1e90ff",
+                            background: "var(--srte-accent)",
                             borderRadius: 2,
                             cursor: "ew-resize",
                             pointerEvents: "auto",
@@ -2475,15 +3111,15 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         position: "fixed",
                         left: tableMenu.x,
                         top: tableMenu.y,
-                        background: "#fff",
-                        border: "1px solid #ddd",
+                        background: "var(--srte-menu-bg)",
+                        border: "1px solid var(--srte-border)",
                         borderRadius: 8,
-                        boxShadow: "0 8px 24px rgba(0,0,0,0.18)",
+                        boxShadow: "var(--srte-menu-shadow)",
                         padding: 6,
                         width: 200,
                         maxHeight: 260,
                         overflowY: "auto",
-                        color: "#111",
+                        color: "var(--srte-menu-text)",
                     }, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { style: { fontWeight: 600, fontSize: 11, margin: "2px 6px 6px" }, children: "Table" }), _jsxs("div", { style: { display: "grid", gap: 4 }, children: [_jsxs("button", { style: {
                                         display: "flex",
                                         alignItems: "center",
@@ -2606,7 +3242,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,
@@ -2628,13 +3273,15 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         position: "fixed",
                         left: imageMenu.x,
                         top: imageMenu.y,
-                        background: "#fff",
-                        border: "1px solid #ddd",
+                        background: "var(--srte-menu-bg)",
+                        border: "1px solid var(--srte-border)",
                         borderRadius: 8,
-                        boxShadow: "0 8px 24px rgba(0,0,0,0.18)",
+                        boxShadow: "var(--srte-menu-shadow)",
                         padding: 8,
-                        width: 220,
-                        color: "#111",
+                        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
                                                 : "", placeholder: "https://", onChange: (e) => {
@@ -2660,10 +3307,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                             }, style: {
                                                 flex: 1,
                                                 padding: "4px 6px",
-                                                border: "1px solid #eee",
+                                                border: "1px solid var(--srte-border-light)",
                                                 borderRadius: 4,
-                                                color: "#111",
-                                                background: "#fff",
+                                                color: "var(--srte-input-text)",
+                                                background: "var(--srte-input-bg)",
                                             } })] }), _jsxs("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [_jsx("span", { style: { width: 48, fontSize: 12 }, children: "Target" }), _jsxs("select", { defaultValue: imageMenu.img.parentElement?.tagName === "A"
                                                 ? imageMenu.img.parentElement
                                                     .target || "_self"
@@ -2677,20 +3324,20 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                                 flex: 1,
                                                 height: 28,
                                                 padding: "0 6px",
-                                                border: "1px solid #eee",
+                                                border: "1px solid var(--srte-border-light)",
                                                 borderRadius: 4,
-                                                background: "#fff",
-                                                color: "#111",
+                                                background: "var(--srte-input-bg)",
+                                                color: "var(--srte-input-text)",
                                             }, children: [_jsx("option", { value: "_self", children: "Same tab" }), _jsx("option", { value: "_blank", children: "New tab" })] })] }), _jsxs("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [_jsx("span", { style: { width: 48, fontSize: 12 }, children: "Alt" }), _jsx("input", { defaultValue: imageMenu.img.alt || "", onChange: (e) => {
                                                 imageMenu.img.alt = e.target.value;
                                                 handleInput();
                                             }, style: {
                                                 flex: 1,
                                                 padding: "4px 6px",
-                                                border: "1px solid #eee",
+                                                border: "1px solid var(--srte-border-light)",
                                                 borderRadius: 4,
-                                                color: "#111",
-                                                background: "#fff",
+                                                color: "var(--srte-input-text)",
+                                                background: "var(--srte-input-bg)",
                                             } })] }), _jsxs("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [_jsx("span", { style: { width: 48, fontSize: 12 }, children: "Width" }), _jsx("input", { type: "number", min: 40, max: 2000, defaultValue: Math.round(imageMenu.img.getBoundingClientRect().width), onChange: (e) => {
                                                 const v = Math.max(40, Math.min(2000, Number(e.target.value) || 0));
                                                 imageMenu.img.style.width = v + "px";
@@ -2699,10 +3346,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                             }, style: {
                                                 width: 90,
                                                 padding: "4px 6px",
-                                                border: "1px solid #eee",
+                                                border: "1px solid var(--srte-border-light)",
                                                 borderRadius: 4,
-                                                color: "#111",
-                                                background: "#fff",
+                                                color: "var(--srte-input-text)",
+                                                background: "var(--srte-input-bg)",
                                             } }), _jsx("span", { style: { fontSize: 12 }, children: "px" })] }), _jsxs("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [_jsx("span", { style: { width: 48, fontSize: 12 }, children: "Radius" }), _jsx("input", { type: "number", min: 0, max: 200, defaultValue: parseInt((imageMenu.img.style.borderRadius || "0").toString()) || 0, onChange: (e) => {
                                                 const v = Math.max(0, Math.min(200, Number(e.target.value) || 0));
                                                 imageMenu.img.style.borderRadius = v + "px";
@@ -2710,10 +3357,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                             }, style: {
                                                 width: 90,
                                                 padding: "4px 6px",
-                                                border: "1px solid #eee",
+                                                border: "1px solid var(--srte-border-light)",
                                                 borderRadius: 4,
-                                                color: "#111",
-                                                background: "#fff",
+                                                color: "var(--srte-input-text)",
+                                                background: "var(--srte-input-bg)",
                                             } }), _jsx("span", { style: { fontSize: 12 }, children: "px" })] }), _jsxs("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [_jsx("span", { style: { width: 48, fontSize: 12 }, children: "Align" }), _jsx("button", { onClick: () => {
                                                 const img = imageMenu.img;
                                                 img.style.display = "block";
@@ -2735,7 +3382,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: () => {
@@ -2747,7 +3445,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                                 img.style.float = "none";
                                                 scheduleImageOverlay();
                                                 handleInput();
-                                            }, children: "Reset" })] }), _jsxs("div", { style: { display: "flex", gap: 6 }, children: [_jsx("button", { style: { color: "#b00020" }, onClick: () => {
+                                            }, children: "Reset" })] }), _jsxs("div", { style: { display: "flex", gap: 6 }, children: [_jsx("button", { style: { color: "var(--srte-danger)" }, onClick: () => {
                                                 imageMenu.img.remove();
                                                 setImageMenu(null);
                                                 setSelectedImage(null);