smartrte-react 0.2.1 → 0.2.2

package/dist/components/ClassicEditor.d.ts

@@ -26,6 +26,24 @@ type ClassicEditorProps = {
      * Example: "Arial, sans-serif"
      */
     defaultFont?: string;
+    /**
+     * Preserve font-family styles from pasted/imported content.
+     * Defaults to false so host applications can keep a single app font while
+     * still preserving bold, italic, headings, lists, tables, and colors.
+     */
+    preserveFontFamily?: boolean;
+    /**
+     * Preserve foreground/background colors from pasted/imported content.
+     * Defaults to false so dark-mode editors remain readable when content is
+     * copied from sources such as Google Docs with hardcoded black-on-white styles.
+     */
+    preserveColors?: boolean;
+    /**
+     * Preserve visual styling from imported DOCX files except font-family.
+     * This keeps Word-authored colors, spacing, borders, and table fills while
+     * still allowing the host app to control the editor font.
+     */
+    preserveDocxStyles?: boolean;
     /**
      * Theme mode for the editor.
      * - "light" (default): Uses the built-in light theme.
@@ -39,5 +57,5 @@ type ClassicEditorProps = {
      */
     className?: string;
 };
-export declare function ClassicEditor({ value, onChange, placeholder, minHeight, maxHeight, readOnly, table, media, formula, mediaManager, fonts, defaultFont, theme, className, }: ClassicEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function ClassicEditor({ value, onChange, placeholder, minHeight, maxHeight, readOnly, table, media, formula, mediaManager, fonts, defaultFont, preserveFontFamily, preserveColors, preserveDocxStyles, theme, className, }: ClassicEditorProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ClassicEditor.js

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import { MediaManager } from "./MediaManager";
 import * as pdfjsLib from 'pdfjs-dist';
 import mammoth from 'mammoth';
+import JSZip from 'jszip';
 import { ensureStyleSheet } from '../theme';
 // Initialize PDF.js worker
 if (typeof window !== 'undefined') {
@@ -16,7 +17,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     { name: "Times New Roman", value: "'Times New Roman', Times, serif" },
     { name: "Verdana", value: "Verdana, Geneva, sans-serif" },
     { name: "Courier New", value: "'Courier New', Courier, monospace" },
-], defaultFont, theme = "light", className, }) {
+], defaultFont, preserveFontFamily = false, preserveColors = false, preserveDocxStyles = true, theme = "light", className, }) {
     ensureStyleSheet();
     const editableRef = useRef(null);
     const lastEmittedRef = useRef("");
@@ -24,6 +25,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const fileInputRef = useRef(null);
     const pdfInputRef = useRef(null);
     const docxInputRef = useRef(null);
+    const htmlInputRef = useRef(null);
+    const mdInputRef = useRef(null);
     const [loadingPdf, setLoadingPdf] = useState(false);
     const [loadingDocx, setLoadingDocx] = useState(false);
     // State for import confirmation
@@ -45,6 +48,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const [imageMenu, setImageMenu] = useState(null);
     const [showMediaManager, setShowMediaManager] = useState(false);
     const [showColorPicker, setShowColorPicker] = useState(false);
+    const [showSpecialChars, setShowSpecialChars] = useState(false);
     const [colorPickerType, setColorPickerType] = useState('text');
     const savedRangeRef = useRef(null);
     const [currentFontSize, setCurrentFontSize] = useState("");
@@ -93,27 +97,91 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const exec = (command, valueArg) => {
         try {
             document.execCommand(command, false, valueArg);
-            // Emit after command
-            const el = editableRef.current;
-            if (el && onChange) {
-                const html = el.innerHTML;
-                if (html !== lastEmittedRef.current) {
-                    lastEmittedRef.current = html;
-                    onChange(html);
-                }
-            }
+            emitChange();
         }
         catch { }
     };
     const applyFormatBlock = (blockName) => {
         exec("formatBlock", blockName);
     };
+    const emitChange = () => {
+        const el = editableRef.current;
+        if (!el || !onChange)
+            return;
+        const html = el.innerHTML;
+        if (html !== lastEmittedRef.current) {
+            lastEmittedRef.current = html;
+            onChange(html);
+        }
+    };
     const insertLink = () => {
         const url = window.prompt("Enter URL", "https://");
         if (!url)
             return;
         exec("createLink", url);
     };
+    const getSelectionRangeInEditor = () => {
+        const editor = editableRef.current;
+        if (!editor)
+            return null;
+        editor.focus();
+        const sel = window.getSelection();
+        if (sel && sel.rangeCount > 0) {
+            const range = sel.getRangeAt(0);
+            if (editor.contains(range.commonAncestorContainer))
+                return range;
+        }
+        if (savedRangeRef.current && editor.contains(savedRangeRef.current.commonAncestorContainer)) {
+            return savedRangeRef.current.cloneRange();
+        }
+        const range = document.createRange();
+        range.selectNodeContents(editor);
+        range.collapse(false);
+        return range;
+    };
+    const insertTextAtSelection = (text) => {
+        if (!text)
+            return;
+        try {
+            const range = getSelectionRangeInEditor();
+            if (!range)
+                return;
+            range.deleteContents();
+            const node = document.createTextNode(text);
+            range.insertNode(node);
+            const nextRange = document.createRange();
+            nextRange.setStartAfter(node);
+            nextRange.collapse(true);
+            safeSelectRange(nextRange);
+            handleInput();
+        }
+        catch { }
+    };
+    const toggleBlockquote = () => {
+        try {
+            const range = getSelectionRangeInEditor();
+            if (!range)
+                return;
+            let node = range.commonAncestorContainer;
+            if (node.nodeType === Node.TEXT_NODE)
+                node = node.parentElement;
+            const element = node;
+            const quote = element?.closest?.('blockquote');
+            if (quote && editableRef.current?.contains(quote)) {
+                const replacement = document.createElement('p');
+                replacement.innerHTML = quote.innerHTML || '<br>';
+                quote.parentElement?.replaceChild(replacement, quote);
+                const nextRange = document.createRange();
+                nextRange.selectNodeContents(replacement);
+                nextRange.collapse(false);
+                safeSelectRange(nextRange);
+                handleInput();
+                return;
+            }
+            exec("formatBlock", "<blockquote>");
+        }
+        catch { }
+    };
     const applyFontSize = (size) => {
         try {
             // Update current font size state
@@ -395,11 +463,12 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             window.removeEventListener('touchend', onTouchEnd);
         };
     }, [table]);
-    const insertImageAtSelection = (src) => {
+    const insertImageAtSelection = (srcOrItem) => {
         try {
             const host = editableRef.current;
             if (!host)
                 return;
+            const src = typeof srcOrItem === "string" ? srcOrItem : srcOrItem.url;
             host.focus();
             let sel = window.getSelection();
             let range = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
@@ -415,7 +484,21 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             img.style.maxWidth = "100%";
             img.style.height = "auto";
             img.style.display = "inline-block";
-            img.alt = "image";
+            img.alt = typeof srcOrItem === "string" ? "image" : (srcOrItem.alt || srcOrItem.title || "image");
+            if (typeof srcOrItem !== "string") {
+                if (srcOrItem.title)
+                    img.title = srcOrItem.title;
+                if (srcOrItem.license?.author)
+                    img.dataset.licenseAuthor = srcOrItem.license.author;
+                if (srcOrItem.license?.licenseType)
+                    img.dataset.licenseType = srcOrItem.license.licenseType;
+                if (srcOrItem.license?.licenseText)
+                    img.dataset.licenseText = srcOrItem.license.licenseText;
+                if (srcOrItem.license?.sourceUrl)
+                    img.dataset.licenseUrl = srcOrItem.license.sourceUrl;
+                if (srcOrItem.license?.workName)
+                    img.dataset.workName = srcOrItem.license.workName;
+            }
             if (range) {
                 range.insertNode(img);
             }
@@ -806,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);
@@ -859,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) {
@@ -917,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('*');
@@ -929,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');
@@ -1335,6 +1835,27 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 firstRow.replaceChild(td, c);
             }
         }
+        handleInput();
+    };
+    const toggleHeaderColumn = (cell) => {
+        const pos = getCellPosition(cell);
+        if (!pos)
+            return;
+        const { tbody, cIdx } = pos;
+        const rows = Array.from(tbody.querySelectorAll("tr"));
+        const columnCells = rows
+            .map((row) => cellsOfRow(row)[cIdx])
+            .filter(Boolean);
+        const shouldMakeHeader = columnCells.some((c) => c.tagName !== "TH");
+        for (const c of columnCells) {
+            const replacement = document.createElement(shouldMakeHeader ? "th" : "td");
+            replacement.innerHTML = c.innerHTML || "&nbsp;";
+            replacement.style.border = c.style.border || "1px solid var(--srte-border)";
+            replacement.style.padding = c.style.padding || "6px";
+            replacement.style.minWidth = c.style.minWidth || "60px";
+            c.parentElement?.replaceChild(replacement, c);
+        }
+        handleInput();
     };
     const applyBgToSelection = (hex, fallbackCell) => {
         const sel = selectionRef.current;
@@ -1552,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")
@@ -1621,7 +2148,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             borderRadius: 6,
                             background: "var(--srte-input-bg)",
                             color: "var(--srte-input-text)",
-                        }, children: [_jsx("option", { value: "", disabled: true, children: "Size" }), _jsx("option", { value: "8", children: "8" }), _jsx("option", { value: "9", children: "9" }), _jsx("option", { value: "10", children: "10" }), _jsx("option", { value: "11", children: "11" }), _jsx("option", { value: "12", children: "12" }), _jsx("option", { value: "14", children: "14" }), _jsx("option", { value: "18", children: "18" }), _jsx("option", { value: "24", children: "24" }), _jsx("option", { value: "30", children: "30" }), _jsx("option", { value: "36", children: "36" }), _jsx("option", { value: "48", children: "48" }), _jsx("option", { value: "60", children: "60" }), _jsx("option", { value: "72", children: "72" }), _jsx("option", { value: "96", children: "96" })] }), _jsxs("select", { value: currentFont, onMouseDown: () => {
+                        }, children: [_jsx("option", { value: "", disabled: true, children: "Size" }), _jsx("option", { value: "8", children: "8" }), _jsx("option", { value: "9", children: "9" }), _jsx("option", { value: "10", children: "10" }), _jsx("option", { value: "11", children: "11" }), _jsx("option", { value: "12", children: "12" }), _jsx("option", { value: "14", children: "14" }), _jsx("option", { value: "18", children: "18" }), _jsx("option", { value: "24", children: "24" }), _jsx("option", { value: "30", children: "30" }), _jsx("option", { value: "36", children: "36" }), _jsx("option", { value: "48", children: "48" }), _jsx("option", { value: "60", children: "60" }), _jsx("option", { value: "72", children: "72" }), _jsx("option", { value: "96", children: "96" })] }), preserveFontFamily && (_jsxs("select", { value: currentFont, onMouseDown: () => {
                             const sel = window.getSelection();
                             if (sel && sel.rangeCount > 0) {
                                 const range = sel.getRangeAt(0);
@@ -1638,7 +2165,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             background: "var(--srte-input-bg)",
                             color: "var(--srte-input-text)",
                             maxWidth: 100,
-                        }, children: [_jsx("option", { value: "", disabled: true, children: "Font" }), fonts.map((f) => (_jsx("option", { value: f.value, children: f.name }, f.value)))] }), _jsx("button", { title: "Text Color", onClick: () => {
+                        }, children: [_jsx("option", { value: "", disabled: true, children: "Font" }), fonts.map((f) => (_jsx("option", { value: f.value, children: f.name }, f.value)))] })), _jsx("button", { title: "Text Color", onClick: () => {
                             setColorPickerType('text');
                             setShowColorPicker(true);
                         }, style: {
@@ -1650,7 +2177,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             background: "var(--srte-input-bg)",
                             color: "var(--srte-input-text)",
                             position: "relative",
-                        }, children: _jsx("span", { style: { fontWeight: 700 }, children: "A" }) }), _jsx("button", { title: "Background Color", onClick: () => {
+                        }, children: _jsx("span", { style: { fontWeight: 700, borderBottom: "3px solid currentColor", lineHeight: 1 }, children: "A" }) }), _jsx("button", { title: "Background Color", onClick: () => {
                             setColorPickerType('background');
                             setShowColorPicker(true);
                         }, style: {
@@ -1661,7 +2188,23 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             borderRadius: 6,
                             background: "var(--srte-input-bg)",
                             color: "var(--srte-input-text)",
-                        }, children: _jsx("span", { style: { fontWeight: 700, padding: "2px 4px" }, children: "A" }) }), _jsx("button", { title: "Bulleted list", onClick: () => exec("insertUnorderedList"), style: {
+                        }, children: _jsx("span", { style: { fontWeight: 700, padding: "1px 4px", background: "var(--srte-accent-bg)", borderRadius: 3 }, children: "A" }) }), _jsxs("button", { title: "Subscript", onClick: () => exec("subscript"), style: {
+                            height: 32,
+                            minWidth: 32,
+                            padding: "0 8px",
+                            border: "1px solid var(--srte-input-border)",
+                            borderRadius: 6,
+                            background: "var(--srte-input-bg)",
+                            color: "var(--srte-input-text)",
+                        }, children: ["X", _jsx("sub", { children: "2" })] }), _jsxs("button", { title: "Superscript", onClick: () => exec("superscript"), style: {
+                            height: 32,
+                            minWidth: 32,
+                            padding: "0 8px",
+                            border: "1px solid var(--srte-input-border)",
+                            borderRadius: 6,
+                            background: "var(--srte-input-bg)",
+                            color: "var(--srte-input-text)",
+                        }, children: ["X", _jsx("sup", { children: "2" })] }), _jsx("button", { title: "Bulleted list", onClick: () => exec("insertUnorderedList"), style: {
                             height: 32,
                             padding: "0 10px",
                             border: "1px solid var(--srte-input-border)",
@@ -1675,7 +2218,15 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             borderRadius: 6,
                             background: "var(--srte-input-bg)",
                             color: "var(--srte-input-text)",
-                        }, children: "1. List" }), _jsx("button", { title: "Blockquote", onClick: () => exec("formatBlock", "<blockquote>"), style: {
+                        }, children: "1. List" }), _jsx("button", { title: "Blockquote", onClick: toggleBlockquote, style: {
+                            height: 32,
+                            minWidth: 32,
+                            padding: "0 8px",
+                            border: "1px solid var(--srte-input-border)",
+                            borderRadius: 6,
+                            background: "var(--srte-input-bg)",
+                            color: "var(--srte-input-text)",
+                        }, children: "\u275D" }), _jsx("button", { title: "Special characters", onClick: () => setShowSpecialChars(true), style: {
                             height: 32,
                             minWidth: 32,
                             padding: "0 8px",
@@ -1683,7 +2234,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             borderRadius: 6,
                             background: "var(--srte-input-bg)",
                             color: "var(--srte-input-text)",
-                        }, children: "\u275D" }), _jsx("button", { title: "Code block", onClick: () => exec("formatBlock", "<pre>"), style: {
+                        }, children: "\u03A9" }), _jsx("button", { title: "Code block", onClick: () => exec("formatBlock", "<pre>"), style: {
                             height: 32,
                             minWidth: 36,
                             padding: "0 8px",
@@ -1744,7 +2295,35 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                     background: "var(--srte-input-bg)",
                                     color: "var(--srte-input-text)",
                                     opacity: loadingDocx ? 0.5 : 1,
-                                }, children: loadingDocx ? '⌛ Importing...' : '📝 DOCX' }), _jsxs("div", { style: {
+                                }, children: loadingDocx ? '⌛ Importing...' : '📝 DOCX' }), _jsx("button", { title: "Import HTML", onClick: () => htmlInputRef.current?.click(), style: {
+                                    height: 32,
+                                    padding: "0 10px",
+                                    border: "1px solid var(--srte-input-border)",
+                                    borderRadius: 6,
+                                    background: "var(--srte-input-bg)",
+                                    color: "var(--srte-input-text)",
+                                }, children: "HTML" }), _jsx("button", { title: "Import Markdown", onClick: () => mdInputRef.current?.click(), style: {
+                                    height: 32,
+                                    padding: "0 10px",
+                                    border: "1px solid var(--srte-input-border)",
+                                    borderRadius: 6,
+                                    background: "var(--srte-input-bg)",
+                                    color: "var(--srte-input-text)",
+                                }, children: "MD" }), _jsx("button", { title: "Export HTML", onClick: exportHtml, style: {
+                                    height: 32,
+                                    padding: "0 10px",
+                                    border: "1px solid var(--srte-input-border)",
+                                    borderRadius: 6,
+                                    background: "var(--srte-input-bg)",
+                                    color: "var(--srte-input-text)",
+                                }, children: "Export HTML" }), _jsx("button", { title: "Export Markdown", onClick: exportMarkdown, style: {
+                                    height: 32,
+                                    padding: "0 10px",
+                                    border: "1px solid var(--srte-input-border)",
+                                    borderRadius: 6,
+                                    background: "var(--srte-input-bg)",
+                                    color: "var(--srte-input-text)",
+                                }, children: "Export MD" }), _jsxs("div", { style: {
                                     display: "inline-flex",
                                     gap: 4,
                                     alignItems: "center",
@@ -1823,7 +2402,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             color: "var(--srte-input-text)",
                         }, children: "\u293E Redo" })] }), media && mediaManager && (_jsx(MediaManager, { open: showMediaManager, onClose: () => setShowMediaManager(false), adapter: mediaManager, onSelect: (item) => {
                     if (item?.url)
-                        insertImageAtSelection(item.url);
+                        insertImageAtSelection(item);
                 } })), table && showTableDialog && (_jsx("div", { style: {
                     position: "fixed",
                     inset: 0,
@@ -1988,6 +2567,50 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                     background: 'var(--srte-input-bg)',
                                     color: 'var(--srte-input-text)',
                                     cursor: 'pointer',
+                                }, children: "Close" }) })] }) })), showSpecialChars && (_jsx("div", { style: {
+                    position: "fixed",
+                    inset: 0,
+                    background: "var(--srte-modal-backdrop)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    zIndex: 50,
+                }, onClick: () => setShowSpecialChars(false), children: _jsxs("div", { style: {
+                        background: "var(--srte-modal-bg)",
+                        color: "var(--srte-modal-text)",
+                        padding: 16,
+                        borderRadius: 8,
+                        width: 420,
+                        maxWidth: "90vw",
+                        boxShadow: "var(--srte-menu-shadow)",
+                    }, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { style: { fontWeight: 600, marginBottom: 12 }, children: "Special characters" }), [
+                            {
+                                label: "Greek",
+                                chars: ["α", "β", "γ", "δ", "ε", "ζ", "η", "θ", "ι", "κ", "λ", "μ", "ν", "ξ", "π", "ρ", "σ", "τ", "φ", "χ", "ψ", "ω", "Δ", "Σ", "Ω"],
+                            },
+                            {
+                                label: "Medical / Math",
+                                chars: ["±", "≤", "≥", "≠", "≈", "∞", "°", "µ", "×", "÷", "→", "←", "↑", "↓", "∴", "∵", "√", "∑", "∫", "₂", "₃", "²", "³"],
+                            },
+                        ].map((group) => (_jsxs("div", { style: { marginBottom: 12 }, children: [_jsx("div", { style: { fontSize: 12, color: "var(--srte-text-muted)", marginBottom: 6 }, children: group.label }), _jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: group.chars.map((char) => (_jsx("button", { type: "button", onClick: () => {
+                                            insertTextAtSelection(char);
+                                            setShowSpecialChars(false);
+                                        }, style: {
+                                            height: 32,
+                                            minWidth: 32,
+                                            padding: "0 8px",
+                                            border: "1px solid var(--srte-input-border)",
+                                            borderRadius: 6,
+                                            background: "var(--srte-input-bg)",
+                                            color: "var(--srte-input-text)",
+                                            fontSize: 16,
+                                        }, children: char }, char))) })] }, group.label))), _jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: _jsx("button", { type: "button", onClick: () => setShowSpecialChars(false), style: {
+                                    padding: "6px 16px",
+                                    border: "1px solid var(--srte-input-border)",
+                                    borderRadius: 6,
+                                    background: "var(--srte-input-bg)",
+                                    color: "var(--srte-input-text)",
+                                    cursor: "pointer",
                                 }, children: "Close" }) })] }) })), formula && showFormulaDialog && (_jsx("div", { style: {
                     position: "fixed",
                     inset: 0,
@@ -2109,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 ||
@@ -2613,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,
@@ -2640,7 +3278,9 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         borderRadius: 8,
                         boxShadow: "var(--srte-menu-shadow)",
                         padding: 8,
-                        width: 220,
+                        width: 280,
+                        maxHeight: "80vh",
+                        overflowY: "auto",
                         color: "var(--srte-menu-text)",
                     }, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { style: { fontWeight: 600, fontSize: 11, margin: "2px 6px 6px" }, children: "Image" }), _jsxs("div", { style: { display: "grid", gap: 6 }, children: [_jsxs("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [_jsx("span", { style: { width: 48, fontSize: 12 }, children: "Link" }), _jsx("input", { defaultValue: imageMenu.img.parentElement?.tagName === "A"
                                                 ? imageMenu.img.parentElement.href
@@ -2742,7 +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: () => {

package/dist/components/MediaManager.d.ts

@@ -10,6 +10,13 @@ export type MediaItem = {
     title?: string;
     alt?: string;
     tags?: string[];
+    license?: {
+        author?: string;
+        licenseType?: string;
+        licenseText?: string;
+        sourceUrl?: string;
+        workName?: string;
+    };
 };
 export type MediaSearchQuery = {
     q?: string;

package/dist/components/MediaManager.js

@@ -7,6 +7,7 @@ export function MediaManager(props) {
     const [error, setError] = useState(null);
     const [query, setQuery] = useState("");
     const [results, setResults] = useState([]);
+    const [infoItem, setInfoItem] = useState(null);
     const fileInputRef = useRef(null);
     useEffect(() => {
         if (!open)
@@ -151,22 +152,72 @@ export function MediaManager(props) {
                                 gap: 12,
                                 overflowY: "auto",
                                 paddingBottom: 16,
-                            }, children: results.map((it) => (_jsxs("button", { onClick: () => {
-                                    onSelect(it);
-                                    onClose();
-                                }, title: it.title || it.url, style: {
-                                    display: "block",
+                            }, children: results.map((it) => (_jsxs("div", { title: it.title || it.url, style: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    gap: 6,
                                     border: "1px solid var(--srte-border-light)",
                                     borderRadius: 8,
                                     padding: 6,
                                     background: "var(--srte-input-bg)",
-                                    textAlign: "center",
-                                }, children: [_jsx("img", { src: it.url, alt: it.alt || "", style: {
-                                            maxWidth: "100%",
-                                            maxHeight: 100,
-                                            display: "block",
-                                            margin: "0 auto",
-                                            objectFit: "cover",
-                                            borderRadius: 6,
-                                        } }), _jsx("div", { style: { fontSize: 11, marginTop: 6, color: "var(--srte-text-muted)" }, children: it.width && it.height ? `${it.width}×${it.height}` : "" })] }, it.id || it.url))) })] }))] }) }));
+                                    color: "var(--srte-input-text)",
+                                }, children: [_jsx("button", { type: "button", onClick: () => {
+                                            onSelect(it);
+                                            onClose();
+                                        }, style: {
+                                            border: "none",
+                                            padding: 0,
+                                            background: "transparent",
+                                            cursor: "pointer",
+                                        }, children: _jsx("img", { src: it.url, alt: it.alt || "", style: {
+                                                maxWidth: "100%",
+                                                maxHeight: 100,
+                                                display: "block",
+                                                margin: "0 auto",
+                                                objectFit: "cover",
+                                                borderRadius: 6,
+                                            } }) }), _jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 6 }, children: [_jsx("div", { style: { fontSize: 11, color: "var(--srte-text-muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: it.title || it.alt || (it.width && it.height ? `${it.width}×${it.height}` : "Image") }), _jsx("button", { type: "button", onClick: () => setInfoItem(it), title: "Image info", style: {
+                                                    width: 24,
+                                                    height: 24,
+                                                    border: "1px solid var(--srte-border)",
+                                                    borderRadius: 999,
+                                                    background: "var(--srte-surface-subtle)",
+                                                    color: "var(--srte-input-text)",
+                                                    cursor: "pointer",
+                                                    flex: "0 0 auto",
+                                                }, children: "i" })] }), it.tags && it.tags.length > 0 && (_jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: it.tags.slice(0, 3).map((tag) => (_jsx("span", { style: {
+                                                fontSize: 10,
+                                                padding: "1px 5px",
+                                                borderRadius: 999,
+                                                background: "var(--srte-surface-subtle)",
+                                                color: "var(--srte-text-muted)",
+                                            }, children: tag }, tag))) }))] }, it.id || it.url))) })] })), infoItem && (_jsx("div", { style: {
+                        position: "fixed",
+                        inset: 0,
+                        background: "var(--srte-modal-backdrop)",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        zIndex: 90,
+                    }, onClick: () => setInfoItem(null), children: _jsxs("div", { style: {
+                            width: 420,
+                            maxWidth: "90vw",
+                            background: "var(--srte-modal-bg)",
+                            color: "var(--srte-modal-text)",
+                            borderRadius: 10,
+                            boxShadow: "var(--srte-menu-shadow)",
+                            padding: 16,
+                        }, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { style: { display: "flex", justifyContent: "space-between", gap: 12, marginBottom: 12 }, children: [_jsx("div", { style: { fontWeight: 600 }, children: "Image info" }), _jsx("button", { type: "button", onClick: () => setInfoItem(null), children: "\u2715" })] }), _jsx("img", { src: infoItem.url, alt: infoItem.alt || "", style: { maxWidth: "100%", maxHeight: 180, display: "block", margin: "0 auto 12px", borderRadius: 8 } }), [
+                                ["Title", infoItem.title],
+                                ["Alt text", infoItem.alt],
+                                ["Dimensions", infoItem.width && infoItem.height ? `${infoItem.width}×${infoItem.height}` : undefined],
+                                ["MIME type", infoItem.mimeType],
+                                ["Size", infoItem.sizeBytes ? `${Math.round(infoItem.sizeBytes / 1024)} KB` : undefined],
+                                ["Created", infoItem.createdAt],
+                                ["Tags", infoItem.tags?.join(", ")],
+                                ["Work", infoItem.license?.workName],
+                                ["Author", infoItem.license?.author],
+                                ["License", [infoItem.license?.licenseType, infoItem.license?.licenseText].filter(Boolean).join(" - ")],
+                                ["Source", infoItem.license?.sourceUrl],
+                            ].filter(([, value]) => value).map(([label, value]) => (_jsxs("div", { style: { display: "grid", gridTemplateColumns: "92px 1fr", gap: 8, fontSize: 12, marginBottom: 6 }, children: [_jsx("div", { style: { color: "var(--srte-text-muted)" }, children: label }), _jsx("div", { style: { overflowWrap: "anywhere" }, children: value })] }, label)))] }) }))] }) }));
 }

package/dist/theme.d.ts

@@ -1,3 +1,3 @@
 export type SrteTheme = 'light' | 'dark';
-export declare const SRTE_DEFAULT_CSS = "\n.srte-editor {\n  --srte-bg: #ffffff;\n  --srte-text: #111111;\n  --srte-text-muted: #4b5563;\n  --srte-border: #dddddd;\n  --srte-border-light: #eeeeee;\n  --srte-toolbar-bg: #ffffff;\n  --srte-input-bg: #ffffff;\n  --srte-input-text: #111111;\n  --srte-input-border: #e5e7eb;\n  --srte-modal-backdrop: rgba(0, 0, 0, 0.35);\n  --srte-modal-bg: #ffffff;\n  --srte-modal-text: #000000;\n  --srte-menu-bg: #ffffff;\n  --srte-menu-text: #111111;\n  --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);\n  --srte-accent: #1e90ff;\n  --srte-accent-bg: rgba(30, 144, 255, 0.15);\n  --srte-danger: #dc2626;\n  --srte-primary: #2563eb;\n  --srte-surface-subtle: #f3f4f6;\n  --srte-on-primary: #ffffff;\n  --srte-cancel-bg: #f3f4f6;\n}\n.srte-editor.srte-dark {\n  --srte-bg: #1e1e1e;\n  --srte-text: #e0e0e0;\n  --srte-text-muted: #9ca3af;\n  --srte-border: #3a3a3a;\n  --srte-border-light: #2e2e2e;\n  --srte-toolbar-bg: #252525;\n  --srte-input-bg: #2a2a2a;\n  --srte-input-text: #e0e0e0;\n  --srte-input-border: #444444;\n  --srte-modal-backdrop: rgba(0, 0, 0, 0.6);\n  --srte-modal-bg: #252525;\n  --srte-modal-text: #e0e0e0;\n  --srte-menu-bg: #2a2a2a;\n  --srte-menu-text: #e0e0e0;\n  --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\n  --srte-accent: #3b9eff;\n  --srte-accent-bg: rgba(59, 158, 255, 0.2);\n  --srte-danger: #ef4444;\n  --srte-primary: #3b82f6;\n  --srte-surface-subtle: #333333;\n  --srte-on-primary: #ffffff;\n  --srte-cancel-bg: #333333;\n}\n";
+export declare const SRTE_DEFAULT_CSS = "\n.srte-editor {\n  --srte-bg: #ffffff;\n  --srte-text: #111111;\n  --srte-text-muted: #4b5563;\n  --srte-border: #dddddd;\n  --srte-border-light: #eeeeee;\n  --srte-toolbar-bg: #ffffff;\n  --srte-input-bg: #ffffff;\n  --srte-input-text: #111111;\n  --srte-input-border: #e5e7eb;\n  --srte-modal-backdrop: rgba(0, 0, 0, 0.35);\n  --srte-modal-bg: #ffffff;\n  --srte-modal-text: #000000;\n  --srte-menu-bg: #ffffff;\n  --srte-menu-text: #111111;\n  --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);\n  --srte-accent: #1e90ff;\n  --srte-accent-bg: rgba(30, 144, 255, 0.15);\n  --srte-danger: #dc2626;\n  --srte-primary: #2563eb;\n  --srte-surface-subtle: #f3f4f6;\n  --srte-on-primary: #ffffff;\n  --srte-cancel-bg: #f3f4f6;\n}\n.srte-editor.srte-dark {\n  --srte-bg: #1e1e1e;\n  --srte-text: #e0e0e0;\n  --srte-text-muted: #9ca3af;\n  --srte-border: #3a3a3a;\n  --srte-border-light: #2e2e2e;\n  --srte-toolbar-bg: #252525;\n  --srte-input-bg: #2a2a2a;\n  --srte-input-text: #e0e0e0;\n  --srte-input-border: #444444;\n  --srte-modal-backdrop: rgba(0, 0, 0, 0.6);\n  --srte-modal-bg: #252525;\n  --srte-modal-text: #e0e0e0;\n  --srte-menu-bg: #2a2a2a;\n  --srte-menu-text: #e0e0e0;\n  --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\n  --srte-accent: #3b9eff;\n  --srte-accent-bg: rgba(59, 158, 255, 0.2);\n  --srte-danger: #ef4444;\n  --srte-primary: #3b82f6;\n  --srte-surface-subtle: #333333;\n  --srte-on-primary: #ffffff;\n  --srte-cancel-bg: #333333;\n}\n.srte-editor [contenteditable] blockquote {\n  border-left: 4px solid var(--srte-accent);\n  margin: 0.75em 0;\n  padding: 0.5em 1em;\n  background: var(--srte-surface-subtle);\n  color: var(--srte-text);\n}\n.srte-editor.srte-dark [contenteditable] [style*=\"color\"]:not(.srte-preserve-colors):not(.srte-preserve-colors *),\n.srte-editor.srte-dark [contenteditable] [style*=\"background\"]:not(.srte-preserve-colors):not(.srte-preserve-colors *) {\n  color: var(--srte-text) !important;\n  background: transparent !important;\n  background-color: transparent !important;\n}\n.srte-editor [contenteditable] sub,\n.srte-editor [contenteditable] sup {\n  line-height: 0;\n}\n";
 export declare function ensureStyleSheet(): void;

package/dist/theme.js

@@ -47,6 +47,23 @@ export const SRTE_DEFAULT_CSS = `
   --srte-on-primary: #ffffff;
   --srte-cancel-bg: #333333;
 }
+.srte-editor [contenteditable] blockquote {
+  border-left: 4px solid var(--srte-accent);
+  margin: 0.75em 0;
+  padding: 0.5em 1em;
+  background: var(--srte-surface-subtle);
+  color: var(--srte-text);
+}
+.srte-editor.srte-dark [contenteditable] [style*="color"]:not(.srte-preserve-colors):not(.srte-preserve-colors *),
+.srte-editor.srte-dark [contenteditable] [style*="background"]:not(.srte-preserve-colors):not(.srte-preserve-colors *) {
+  color: var(--srte-text) !important;
+  background: transparent !important;
+  background-color: transparent !important;
+}
+.srte-editor [contenteditable] sub,
+.srte-editor [contenteditable] sup {
+  line-height: 0;
+}
 `;
 const SRTE_STYLE_ID = 'srte-theme-defaults';
 export function ensureStyleSheet() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smartrte-react",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A powerful, feature-rich Rich Text Editor for React with support for tables, mathematical formulas (LaTeX/KaTeX), and media management",
   "type": "module",
   "main": "dist/index.js",
@@ -38,6 +38,16 @@
   },
   "author": "Smart RTE Contributors",
   "license": "MIT",
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "prepublishOnly": "pnpm run build",
+    "dev": "pnpm build",
+    "lint": "eslint . || true",
+    "test": "vitest run || true",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "e2e": "playwright test || true"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -62,16 +72,8 @@
     "vitest": "^2.1.4"
   },
   "dependencies": {
+    "jszip": "^3.10.1",
     "mammoth": "^1.11.0",
     "pdfjs-dist": "^5.4.530"
-  },
-  "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "dev": "pnpm build",
-    "lint": "eslint . || true",
-    "test": "vitest run || true",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "e2e": "playwright test || true"
   }
-}
+}