smartrte-react 0.2.6 → 0.2.8

package/dist/components/ClassicEditor.d.ts

@@ -50,6 +50,11 @@ type ClassicEditorProps = {
      * - "dark": Uses the built-in dark theme.
      */
     theme?: SrteTheme;
+    /**
+     * Show the inline font-size dropdown in the toolbar.
+     * Defaults to true. Heading block controls are independent of this option.
+     */
+    showFontSize?: boolean;
     /**
      * Additional CSS class name(s) to apply to the editor's root element.
      * Useful for custom theming by overriding CSS custom properties.
@@ -57,5 +62,5 @@ type ClassicEditorProps = {
      */
     className?: string;
 };
-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 declare function ClassicEditor({ value, onChange, placeholder, minHeight, maxHeight, readOnly, table, media, formula, mediaManager, fonts, defaultFont, preserveFontFamily, preserveColors, preserveDocxStyles, theme, showFontSize, className, }: ClassicEditorProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ClassicEditor.js

@@ -17,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, preserveFontFamily = false, preserveColors = false, preserveDocxStyles = true, theme = "light", className, }) {
+], defaultFont, preserveFontFamily = false, preserveColors = false, preserveDocxStyles = true, theme = "light", showFontSize = true, className, }) {
     ensureStyleSheet();
     const editableRef = useRef(null);
     const editorScrollRef = useRef(null);
@@ -37,6 +37,9 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const [imageOverlay, setImageOverlay] = useState(null);
     const resizingRef = useRef(null);
     const draggedImageRef = useRef(null);
+    const draggedBlockRef = useRef(null);
+    const dragHandleHideTimerRef = useRef(null);
+    const [dragHandle, setDragHandle] = useState(null);
     const tableResizeRef = useRef(null);
     const [showTableDialog, setShowTableDialog] = useState(false);
     const [tableRows, setTableRows] = useState(3);
@@ -58,6 +61,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     });
     const [currentFontSize, setCurrentFontSize] = useState("");
     const [currentFont, setCurrentFont] = useState("");
+    const [currentBlockType, setCurrentBlockType] = useState("p");
     const [activeState, setActiveState] = useState({
         bold: false,
         italic: false,
@@ -108,6 +112,9 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             if (node.nodeType === Node.TEXT_NODE)
                 node = node.parentNode;
             const element = node instanceof HTMLElement ? node : null;
+            const block = element?.closest("p,h1,h2,h3,h4,h5,h6,li,blockquote,pre,div");
+            const tag = block?.tagName.toLowerCase();
+            setCurrentBlockType(tag === "h1" || tag === "h2" || tag === "h3" ? tag : "p");
             setActiveState({
                 bold: document.queryCommandState("bold"),
                 italic: document.queryCommandState("italic"),
@@ -172,7 +179,22 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         catch { }
     };
     const applyFormatBlock = (blockName) => {
-        exec("formatBlock", blockName);
+        try {
+            if (!restoreSavedSelection()) {
+                safeSelectRange(getSelectionRangeInEditor());
+            }
+            if (applyFormatBlockFallback(blockName)) {
+                const tag = normalizeBlockTag(blockName);
+                if (tag === "p" || tag === "h1" || tag === "h2" || tag === "h3") {
+                    setCurrentBlockType(tag);
+                }
+                handleInput();
+                requestAnimationFrame(updateActiveState);
+                return;
+            }
+            exec("formatBlock", blockName);
+        }
+        catch { }
     };
     const emitChange = () => {
         const el = editableRef.current;
@@ -386,19 +408,71 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         cell.parentElement?.replaceChild(replacement, cell);
         return replacement;
     };
-    const applyFormatBlockFallback = (blockName) => {
-        const editor = editableRef.current;
-        const block = getCurrentBlock();
+    const normalizeBlockTag = (blockName) => {
         const tag = blockName.replace(/[<>]/g, "").toLowerCase() || "p";
-        if (!editor || !block || block === editor || !/^(p|h1|h2|h3|h4|h5|h6|pre|blockquote)$/.test(tag))
-            return;
+        return /^(p|h1|h2|h3|h4|h5|h6|pre|blockquote)$/.test(tag) ? tag : null;
+    };
+    const sortInDocumentOrder = (elements) => {
+        return [...elements].sort((a, b) => {
+            if (a === b)
+                return 0;
+            const position = a.compareDocumentPosition(b);
+            return position & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+        });
+    };
+    const replaceBlockTag = (block, tag) => {
+        if (block.tagName.toLowerCase() === tag)
+            return block;
         const replacement = document.createElement(tag);
         copyCellOrBlockStyles(block, replacement);
         block.parentElement?.replaceChild(replacement, block);
-        const range = document.createRange();
-        range.selectNodeContents(replacement);
-        range.collapse(false);
-        safeSelectRange(range);
+        return replacement;
+    };
+    const applyFormatBlockFallback = (blockName) => {
+        const editor = editableRef.current;
+        const range = getSelectionRangeInEditor();
+        const tag = normalizeBlockTag(blockName);
+        if (!editor || !range || !tag)
+            return false;
+        if (!editor.innerHTML.trim()) {
+            const block = document.createElement(tag);
+            block.innerHTML = "<br>";
+            editor.appendChild(block);
+            focusElementEnd(block);
+            return true;
+        }
+        if (range.collapsed) {
+            const block = getCurrentBlock();
+            if (!block || block === editor || block.closest("ul,ol") || !block.parentElement)
+                return false;
+            const replacement = replaceBlockTag(block, tag);
+            focusElementEnd(replacement);
+            return true;
+        }
+        const selectedBlocks = sortInDocumentOrder(getSelectedBlocks(range)).filter((block) => {
+            if (!editor.contains(block) || block === editor)
+                return false;
+            if (block.closest("ul,ol"))
+                return false;
+            return Boolean(block.parentElement);
+        });
+        if (selectedBlocks.length > 0) {
+            let lastReplacement = null;
+            selectedBlocks.forEach((block) => {
+                lastReplacement = replaceBlockTag(block, tag);
+            });
+            if (lastReplacement)
+                focusElementEnd(lastReplacement);
+            return true;
+        }
+        const block = document.createElement(tag);
+        const contents = range.extractContents();
+        block.appendChild(contents);
+        if (!block.innerHTML.trim())
+            block.innerHTML = "<br>";
+        range.insertNode(block);
+        focusElementEnd(block);
+        return true;
     };
     const cloneListShell = (list, tagName) => {
         const clone = document.createElement(tagName || list.tagName.toLowerCase());
@@ -609,7 +683,50 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     };
     const toggleBlockquote = () => {
         try {
+            if (!restoreSavedSelection())
+                safeSelectRange(getSelectionRangeInEditor());
             const range = getSelectionRangeInEditor();
+            const editor = editableRef.current;
+            if (!editor || !range)
+                return;
+            const unwrapQuote = (quote) => {
+                const parent = quote.parentElement;
+                if (!parent)
+                    return false;
+                const moved = [];
+                while (quote.firstChild) {
+                    const child = quote.firstChild;
+                    parent.insertBefore(child, quote);
+                    if (child instanceof HTMLElement)
+                        moved.push(child);
+                }
+                quote.remove();
+                focusElementEnd(moved[moved.length - 1] || parent);
+                return true;
+            };
+            const wrapBlocks = (blocks) => {
+                const selected = sortInDocumentOrder(blocks).filter((block) => {
+                    if (!editor.contains(block) || block === editor)
+                        return false;
+                    if (block.closest("ul,ol"))
+                        return false;
+                    if (block.tagName.toLowerCase() === "blockquote")
+                        return false;
+                    return Boolean(block.parentElement);
+                });
+                if (selected.length === 0)
+                    return false;
+                let lastWrapped = null;
+                selected.forEach((block) => {
+                    const quote = document.createElement("blockquote");
+                    block.parentElement?.insertBefore(quote, block);
+                    quote.appendChild(block);
+                    lastWrapped = block;
+                });
+                if (lastWrapped)
+                    focusElementEnd(lastWrapped);
+                return true;
+            };
             if (!range)
                 return;
             let node = range.commonAncestorContainer;
@@ -618,16 +735,36 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             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;
+                pushEditorHistory();
+                if (unwrapQuote(quote)) {
+                    handleInput();
+                    requestAnimationFrame(updateActiveState);
+                    return;
+                }
             }
+            if (range.collapsed) {
+                const block = getCurrentBlock();
+                if (block) {
+                    pushEditorHistory();
+                    if (!wrapBlocks([block]))
+                        return;
+                    handleInput();
+                    requestAnimationFrame(updateActiveState);
+                    return;
+                }
+            }
+            else {
+                const blocks = getSelectedBlocks(range);
+                if (blocks.length > 0) {
+                    pushEditorHistory();
+                    if (!wrapBlocks(blocks))
+                        return;
+                    handleInput();
+                    requestAnimationFrame(updateActiveState);
+                    return;
+                }
+            }
+            pushEditorHistory();
             exec("formatBlock", "<blockquote>");
         }
         catch { }
@@ -750,8 +887,158 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const applyTextColor = (color) => {
         exec("foreColor", color);
     };
+    const parseCssColor = (value) => {
+        const normalized = value.trim().toLowerCase();
+        if (!normalized || normalized === "transparent")
+            return null;
+        const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(normalized);
+        if (hex) {
+            const raw = hex[1].length === 3
+                ? hex[1].split("").map((part) => part + part).join("")
+                : hex[1];
+            return {
+                r: parseInt(raw.slice(0, 2), 16),
+                g: parseInt(raw.slice(2, 4), 16),
+                b: parseInt(raw.slice(4, 6), 16),
+            };
+        }
+        const rgb = /^rgba?\(([^)]+)\)$/.exec(normalized);
+        if (!rgb)
+            return null;
+        const parts = rgb[1].split(",").map((part) => Number(part.trim()));
+        if (parts.length < 3 || parts.some((part) => !Number.isFinite(part)))
+            return null;
+        if (parts.length >= 4 && parts[3] === 0)
+            return null;
+        return {
+            r: Math.max(0, Math.min(255, parts[0])),
+            g: Math.max(0, Math.min(255, parts[1])),
+            b: Math.max(0, Math.min(255, parts[2])),
+        };
+    };
+    const cssColorToHex = (value) => {
+        const color = parseCssColor(value);
+        if (!color)
+            return "";
+        const toHex = (part) => Math.round(part).toString(16).padStart(2, "0");
+        return `#${toHex(color.r)}${toHex(color.g)}${toHex(color.b)}`;
+    };
+    const getRangeStartElement = (range) => {
+        const editor = editableRef.current;
+        if (!editor || !range)
+            return null;
+        let node = range.startContainer;
+        if (node === editor && editor.childNodes[range.startOffset]) {
+            node = editor.childNodes[range.startOffset];
+        }
+        if (node.nodeType === Node.TEXT_NODE)
+            node = node.parentElement;
+        return node instanceof HTMLElement && editor.contains(node) ? node : null;
+    };
+    const getInlineBackgroundHex = (element) => {
+        const editor = editableRef.current;
+        let current = element;
+        while (current && current !== editor) {
+            const inlineHex = cssColorToHex(current.style.backgroundColor || current.style.background);
+            if (inlineHex)
+                return inlineHex;
+            current = current.parentElement;
+        }
+        return "";
+    };
+    const currentPickerColorHex = () => {
+        if (typeof window === "undefined")
+            return colorPickerType === "text" ? "#000000" : "#ffffff";
+        const editor = editableRef.current;
+        if (!editor)
+            return colorPickerType === "text" ? "#000000" : "#ffffff";
+        const element = getRangeStartElement(getSelectionRangeInEditor());
+        if (colorPickerType === "background") {
+            return getInlineBackgroundHex(element) || "#ffffff";
+        }
+        const target = element || editor;
+        return cssColorToHex(window.getComputedStyle(target).color) || "#000000";
+    };
+    const relativeLuminance = (color) => {
+        const channel = (value) => {
+            const next = value / 255;
+            return next <= 0.03928 ? next / 12.92 : Math.pow((next + 0.055) / 1.055, 2.4);
+        };
+        return 0.2126 * channel(color.r) + 0.7152 * channel(color.g) + 0.0722 * channel(color.b);
+    };
+    const contrastRatio = (fg, bg) => {
+        const lighter = Math.max(relativeLuminance(fg), relativeLuminance(bg));
+        const darker = Math.min(relativeLuminance(fg), relativeLuminance(bg));
+        return (lighter + 0.05) / (darker + 0.05);
+    };
+    const readableTextColorForBackground = (background) => {
+        const bg = parseCssColor(background);
+        if (!bg)
+            return "";
+        const candidates = ["#111827", "#f9fafb", "#1f2937", "#ffffff", "#000000", "#374151", "#e5e7eb"];
+        return candidates
+            .map((candidate) => ({
+            color: candidate,
+            ratio: contrastRatio(parseCssColor(candidate), bg),
+        }))
+            .sort((a, b) => b.ratio - a.ratio)[0]?.color || "";
+    };
     const applyBackgroundColor = (color) => {
-        exec("hiliteColor", color);
+        try {
+            const editor = editableRef.current;
+            if (!editor)
+                return;
+            if (!restoreSavedSelection())
+                safeSelectRange(getSelectionRangeInEditor());
+            const range = getSelectionRangeInEditor();
+            const readableColor = readableTextColorForBackground(color);
+            if (!range)
+                return;
+            const applyToElement = (element) => {
+                element.style.backgroundColor = color;
+                if (readableColor)
+                    element.style.color = readableColor;
+            };
+            if (range.collapsed) {
+                const span = document.createElement("span");
+                applyToElement(span);
+                span.textContent = "\u200B";
+                range.insertNode(span);
+                const nextRange = document.createRange();
+                nextRange.setStart(span.firstChild || span, 1);
+                nextRange.collapse(true);
+                safeSelectRange(nextRange);
+                savedRangeRef.current = nextRange.cloneRange();
+                handleInput();
+                return;
+            }
+            const selectedCells = Array.from(editor.querySelectorAll("td,th"))
+                .filter((cell) => {
+                try {
+                    return range.intersectsNode(cell);
+                }
+                catch {
+                    return false;
+                }
+            });
+            if (selectedCells.length > 0) {
+                selectedCells.forEach(applyToElement);
+                handleInput();
+                return;
+            }
+            const span = document.createElement("span");
+            applyToElement(span);
+            const fragment = range.extractContents();
+            span.appendChild(fragment);
+            range.insertNode(span);
+            range.selectNodeContents(span);
+            safeSelectRange(range);
+            savedRangeRef.current = range.cloneRange();
+            handleInput();
+        }
+        catch {
+            exec("hiliteColor", color);
+        }
     };
     const insertImage = () => {
         if (!media)
@@ -2300,6 +2587,35 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             console.error("Error wrapping tables", e);
         }
     };
+    const isCaretBoundaryBlock = (node) => {
+        if (!(node instanceof HTMLElement))
+            return false;
+        const tag = node.tagName.toLowerCase();
+        return (tag === "blockquote" ||
+            tag === "table" ||
+            node.getAttribute("data-table-wrapper") === "true");
+    };
+    const isEmptyCaretParagraph = (node) => {
+        if (!(node instanceof HTMLParagraphElement))
+            return false;
+        return !node.textContent?.trim();
+    };
+    const createCaretParagraph = () => {
+        const paragraph = document.createElement("p");
+        paragraph.innerHTML = "<br>";
+        paragraph.setAttribute("data-srte-caret-boundary", "true");
+        return paragraph;
+    };
+    const ensureCaretBoundaryParagraphs = (root) => {
+        const first = root.firstElementChild;
+        if (isCaretBoundaryBlock(first) && !isEmptyCaretParagraph(first.previousSibling)) {
+            root.insertBefore(createCaretParagraph(), first);
+        }
+        const last = root.lastElementChild;
+        if (isCaretBoundaryBlock(last) && !isEmptyCaretParagraph(last.nextSibling)) {
+            root.appendChild(createCaretParagraph());
+        }
+    };
     const handleInput = () => {
         if (isComposingRef.current)
             return;
@@ -2310,6 +2626,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         fixNegativeMargins(el);
         // Ensure tables are wrapped for horizontal scrolling
         ensureTableWrappers(el);
+        // Keep a reachable typing position around isolating blocks at document edges
+        ensureCaretBoundaryParagraphs(el);
         // Add resize handles to tables
         addTableResizeHandles();
         if (!onChange)
@@ -2340,8 +2658,9 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             const el = editableRef.current;
             if (!el)
                 return;
-            // Ensure editor is focused and selection is inside
-            el.focus();
+            if (!restoreSavedSelection()) {
+                el.focus();
+            }
             let sel = window.getSelection();
             let range = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
             if (!range || !el.contains(range.commonAncestorContainer)) {
@@ -2360,10 +2679,14 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             const node = wrapper.firstChild;
             if (!node || !range)
                 return;
+            pushEditorHistory();
+            if (!range.collapsed)
+                range.deleteContents();
             range.insertNode(node);
             // Add resize handles to the new table
-            if (node instanceof HTMLTableElement) {
-                const tbody = node.querySelector('tbody');
+            const insertedTable = node instanceof HTMLTableElement ? node : node.querySelector("table");
+            if (insertedTable) {
+                const tbody = insertedTable.querySelector('tbody');
                 if (tbody) {
                     const rows = Array.from(tbody.querySelectorAll('tr'));
                     rows.forEach((row, index) => {
@@ -2706,19 +3029,43 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         handleInput();
     };
     const applyBgToSelection = (hex, fallbackCell) => {
+        const readableColor = readableTextColorForBackground(hex);
+        const applyFill = (cell) => {
+            cell.style.background = hex;
+            if (readableColor)
+                cell.style.color = readableColor;
+        };
         const sel = shouldUseTableSelection(fallbackCell) ? selectionRef.current : null;
         if (sel) {
             const cells = getCellsInGridRect(sel.tbody, sel.sr, sel.sc, sel.er, sel.ec);
             clearSelectionDecor();
-            cells.forEach((cell) => {
-                cell.style.background = hex;
-            });
+            cells.forEach(applyFill);
         }
         else if (fallbackCell) {
             clearSelectionDecor();
-            fallbackCell.style.background = hex;
+            applyFill(fallbackCell);
         }
     };
+    const tableCellFillHex = (cell) => {
+        const storedSelectionBackground = cell.__rtePrevBg;
+        const inlineBackground = typeof storedSelectionBackground === "string"
+            ? storedSelectionBackground
+            : cell.style.backgroundColor || cell.style.background;
+        const inlineHex = cssColorToHex(inlineBackground || "");
+        if (inlineHex)
+            return inlineHex;
+        const computedHex = cssColorToHex(window.getComputedStyle(cell).backgroundColor);
+        return computedHex || "#ffffff";
+    };
+    const tableMenuFillHex = (cell) => {
+        const sel = shouldUseTableSelection(cell) ? selectionRef.current : null;
+        if (!sel)
+            return tableCellFillHex(cell);
+        const cells = getCellsInGridRect(sel.tbody, sel.sr, sel.sc, sel.er, sel.ec);
+        const first = cells[0] ? tableCellFillHex(cells[0]) : tableCellFillHex(cell);
+        const allSame = cells.every((candidate) => tableCellFillHex(candidate) === first);
+        return allSame ? first : tableCellFillHex(cell);
+    };
     const toggleBorderSelection = (fallbackCell) => {
         const applyToggle = (cell) => {
             const cur = cell.style.border;
@@ -2837,6 +3184,184 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             handleInput();
         }
     };
+    const getRangeFromPoint = (x, y) => {
+        let range = null;
+        // @ts-ignore
+        if (document.caretRangeFromPoint) {
+            // @ts-ignore
+            range = document.caretRangeFromPoint(x, y);
+        }
+        else if (document.caretPositionFromPoint) {
+            const pos = document.caretPositionFromPoint(x, y);
+            if (pos) {
+                range = document.createRange();
+                range.setStart(pos.offsetNode, pos.offset);
+            }
+        }
+        return range;
+    };
+    const getMovableElementFromNode = (node) => {
+        const editor = editableRef.current;
+        if (!editor || !node)
+            return null;
+        let element = node instanceof HTMLElement ? node : node.parentElement;
+        if (!element || !editor.contains(element))
+            return null;
+        const image = element.closest("img");
+        if (image && editor.contains(image)) {
+            return (image.parentElement?.tagName === "A" ? image.parentElement : image);
+        }
+        const tableElement = element.closest("table");
+        if (tableElement && editor.contains(tableElement)) {
+            return (tableElement.closest('[data-table-wrapper="true"]') || tableElement);
+        }
+        const listElement = element.closest("ul,ol");
+        if (listElement && editor.contains(listElement))
+            return listElement;
+        const block = element.closest('[data-table-wrapper="true"],blockquote,pre,p,h1,h2,h3,h4,h5,h6,div');
+        if (!block || block === editor || !editor.contains(block))
+            return null;
+        if (block.getAttribute("data-srte-caret-boundary") === "true")
+            return null;
+        return block;
+    };
+    const updateDragHandleForTarget = (target) => {
+        const scroller = editorScrollRef.current;
+        if (dragHandleHideTimerRef.current != null) {
+            window.clearTimeout(dragHandleHideTimerRef.current);
+            dragHandleHideTimerRef.current = null;
+        }
+        if (!target || !scroller || !editableRef.current?.contains(target)) {
+            setDragHandle(null);
+            return;
+        }
+        const targetRect = target.getBoundingClientRect();
+        const scrollRect = scroller.getBoundingClientRect();
+        const next = {
+            left: Math.max(4, targetRect.left - scrollRect.left + scroller.scrollLeft - 30),
+            top: targetRect.top - scrollRect.top + scroller.scrollTop,
+            height: Math.max(24, targetRect.height),
+            target,
+        };
+        setDragHandle((current) => {
+            if (current?.target === next.target &&
+                Math.abs(current.left - next.left) < 1 &&
+                Math.abs(current.top - next.top) < 1 &&
+                Math.abs(current.height - next.height) < 1) {
+                return current;
+            }
+            return next;
+        });
+    };
+    const scheduleDragHandleHide = () => {
+        if (dragHandleHideTimerRef.current != null) {
+            window.clearTimeout(dragHandleHideTimerRef.current);
+        }
+        dragHandleHideTimerRef.current = window.setTimeout(() => {
+            dragHandleHideTimerRef.current = null;
+            if (!draggedBlockRef.current)
+                setDragHandle(null);
+        }, 120);
+    };
+    const getImageFromMovableBlock = (block) => {
+        if (block.tagName === "IMG")
+            return block;
+        return block.querySelector("img");
+    };
+    const dropBlockAtPoint = (block, x, y) => {
+        const editor = editableRef.current;
+        if (!editor || !editor.contains(block))
+            return false;
+        const under = document.elementFromPoint(x, y);
+        const draggedImage = getImageFromMovableBlock(block);
+        const targetCell = draggedImage ? getClosestCell(under) : null;
+        if (draggedImage && targetCell && !block.contains(targetCell)) {
+            if (targetCell.contains(block))
+                return false;
+            const range = getRangeFromPoint(x, y);
+            if (range && targetCell.contains(range.commonAncestorContainer)) {
+                range.insertNode(block);
+            }
+            else {
+                targetCell.appendChild(block);
+            }
+            return true;
+        }
+        const target = getMovableElementFromNode(under);
+        if (target && target !== block && !block.contains(target) && !target.contains(block)) {
+            const rect = target.getBoundingClientRect();
+            const parent = target.parentElement;
+            if (!parent)
+                return false;
+            if (y < rect.top + rect.height / 2)
+                parent.insertBefore(block, target);
+            else
+                parent.insertBefore(block, target.nextSibling);
+            return true;
+        }
+        const range = getRangeFromPoint(x, y);
+        if (range && editor.contains(range.commonAncestorContainer)) {
+            if (block.contains(range.commonAncestorContainer))
+                return false;
+            range.insertNode(block);
+            return true;
+        }
+        editor.appendChild(block);
+        return true;
+    };
+    const getTopLevelMovableElement = () => {
+        const editor = editableRef.current;
+        if (!editor)
+            return null;
+        const imageTarget = selectedImage?.parentElement?.tagName === "A"
+            ? selectedImage.parentElement
+            : selectedImage;
+        if (imageTarget && editor.contains(imageTarget))
+            return imageTarget;
+        const range = getSelectionRangeInEditor();
+        let node = range?.commonAncestorContainer || null;
+        if (node && node.nodeType === Node.TEXT_NODE)
+            node = node.parentNode;
+        let element = node instanceof HTMLElement ? node : null;
+        if (!element)
+            return null;
+        return getMovableElementFromNode(element);
+    };
+    const elementSibling = (element, direction) => {
+        let sibling = direction === "previous" ? element.previousSibling : element.nextSibling;
+        while (sibling && sibling.nodeType === Node.TEXT_NODE && !sibling.textContent?.trim()) {
+            sibling = direction === "previous" ? sibling.previousSibling : sibling.nextSibling;
+        }
+        return sibling;
+    };
+    const moveCurrentElement = (direction) => {
+        const editor = editableRef.current;
+        const target = getTopLevelMovableElement();
+        if (!editor || !target)
+            return;
+        pushEditorHistory();
+        if (direction === "up") {
+            const previous = elementSibling(target, "previous");
+            if (previous)
+                target.parentElement?.insertBefore(target, previous);
+        }
+        else if (direction === "down") {
+            const next = elementSibling(target, "next");
+            if (next)
+                target.parentElement?.insertBefore(next, target);
+        }
+        else {
+            const current = parseInt(target.style.marginLeft || "0", 10) || 0;
+            const nextMargin = direction === "right"
+                ? Math.min(current + 24, 240)
+                : Math.max(current - 24, 0);
+            target.style.marginLeft = nextMargin ? `${nextMargin}px` : "";
+        }
+        focusElementEnd(target);
+        setSelectedImage(target.tagName === "IMG" ? target : target.querySelector("img"));
+        scheduleImageOverlay();
+        handleInput();
+    };
     const addTableResizeHandles = () => {
         if (!table)
             return;
@@ -2894,7 +3419,24 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             background: "var(--srte-bg)",
             color: "var(--srte-text)",
             boxSizing: "border-box"
-        }, children: [_jsxs("div", { onMouseDown: preserveToolbarMouseDown, style: {
+        }, children: [_jsxs("div", { "aria-disabled": readOnly, onMouseDown: (event) => {
+                    if (readOnly) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        return;
+                    }
+                    preserveToolbarMouseDown(event);
+                }, onClick: (event) => {
+                    if (!readOnly)
+                        return;
+                    event.preventDefault();
+                    event.stopPropagation();
+                }, onKeyDown: (event) => {
+                    if (!readOnly)
+                        return;
+                    event.preventDefault();
+                    event.stopPropagation();
+                }, style: {
                     display: "flex",
                     flexWrap: "wrap",
                     maxWidth: "100%",
@@ -2905,6 +3447,9 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     position: "sticky",
                     top: 0,
                     zIndex: 1,
+                    opacity: readOnly ? 0.55 : 1,
+                    pointerEvents: readOnly ? "none" : "auto",
+                    userSelect: readOnly ? "none" : undefined,
                 }, children: [media && (_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", multiple: true, style: { display: "none" }, onChange: (e) => {
                             const list = e.currentTarget.files;
                             if (list && list.length) {
@@ -2943,7 +3488,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         } }), _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", onMouseDown: preserveEditorSelection, onChange: (e) => {
+                        } }), _jsxs("select", { value: currentBlockType, onMouseDown: preserveEditorSelection, onChange: (e) => {
                             const val = e.target.value;
                             if (val === "p")
                                 applyFormatBlock("<p>");
@@ -2960,7 +3505,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: "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"), "aria-pressed": activeState.bold, style: activeButtonStyle(activeState.bold), children: _jsx("span", { style: { fontWeight: 700 }, children: "B" }) }), _jsx("button", { title: "Italic", onClick: () => exec("italic"), "aria-pressed": activeState.italic, style: activeButtonStyle(activeState.italic, { fontStyle: "italic" }), children: "I" }), _jsx("button", { title: "Underline", onClick: () => exec("underline"), "aria-pressed": activeState.underline, style: activeButtonStyle(activeState.underline, { textDecoration: "underline" }), children: "U" }), _jsx("button", { title: "Strikethrough", onClick: () => exec("strikeThrough"), "aria-pressed": activeState.strikeThrough, style: activeButtonStyle(activeState.strikeThrough, { textDecoration: "line-through" }), children: "S" }), _jsxs("select", { value: currentFontSize, onMouseDown: () => {
+                        }, 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"), "aria-pressed": activeState.bold, style: activeButtonStyle(activeState.bold), children: _jsx("span", { style: { fontWeight: 700 }, children: "B" }) }), _jsx("button", { title: "Italic", onClick: () => exec("italic"), "aria-pressed": activeState.italic, style: activeButtonStyle(activeState.italic, { fontStyle: "italic" }), children: "I" }), _jsx("button", { title: "Underline", onClick: () => exec("underline"), "aria-pressed": activeState.underline, style: activeButtonStyle(activeState.underline, { textDecoration: "underline" }), children: "U" }), _jsx("button", { title: "Strikethrough", onClick: () => exec("strikeThrough"), "aria-pressed": activeState.strikeThrough, style: activeButtonStyle(activeState.strikeThrough, { textDecoration: "line-through" }), children: "S" }), showFontSize && (_jsxs("select", { value: currentFontSize, onMouseDown: () => {
                             // Save selection before dropdown interaction
                             const sel = window.getSelection();
                             if (sel && sel.rangeCount > 0) {
@@ -2977,7 +3522,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" })] }), preserveFontFamily && (_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);
@@ -3185,7 +3730,12 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             borderRadius: 6,
                             background: "var(--srte-input-bg)",
                             color: "var(--srte-input-text)",
-                        }, children: "\u2795 Table" })), _jsx("button", { title: "Undo", onClick: () => exec("undo"), style: {
+                        }, children: "\u2795 Table" })), _jsxs("div", { style: {
+                            display: "inline-flex",
+                            gap: 4,
+                            alignItems: "center",
+                            marginLeft: 6,
+                        }, children: [_jsx("span", { style: { fontSize: 12, opacity: 0.7 }, children: "Move:" }), _jsx("button", { title: "Move selected block up", onClick: () => moveCurrentElement("up"), style: activeButtonStyle(false, { height: 28, minWidth: 28, padding: "0 6px" }), children: "\u2191" }), _jsx("button", { title: "Move selected block down", onClick: () => moveCurrentElement("down"), style: activeButtonStyle(false, { height: 28, minWidth: 28, padding: "0 6px" }), children: "\u2193" }), _jsx("button", { title: "Move selected block left", onClick: () => moveCurrentElement("left"), style: activeButtonStyle(false, { height: 28, minWidth: 28, padding: "0 6px" }), children: "\u2190" }), _jsx("button", { title: "Move selected block right", onClick: () => moveCurrentElement("right"), style: activeButtonStyle(false, { height: 28, minWidth: 28, padding: "0 6px" }), children: "\u2192" })] }), _jsx("button", { title: "Undo", onClick: () => exec("undo"), style: {
                             height: 32,
                             padding: "0 10px",
                             border: "1px solid var(--srte-input-border)",
@@ -3352,7 +3902,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                     borderRadius: 4,
                                     background: color,
                                     cursor: 'pointer',
-                                }, title: color }, color))) }), _jsxs("div", { style: { marginBottom: 12 }, children: [_jsx("label", { style: { display: 'block', marginBottom: 6, fontSize: 12 }, children: "Custom color:" }), _jsx("input", { type: "color", onChange: (e) => {
+                                }, title: color }, color))) }), _jsxs("div", { style: { marginBottom: 12 }, children: [_jsx("label", { style: { display: 'block', marginBottom: 6, fontSize: 12 }, children: "Custom color:" }), _jsx("input", { type: "color", value: currentPickerColorHex(), onChange: (e) => {
                                         if (colorPickerType === 'text') {
                                             applyTextColor(e.target.value);
                                         }
@@ -3521,7 +4071,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                         borderRadius: 4,
                                         background: "var(--srte-input-bg)",
                                         color: "var(--srte-modal-text)",
-                                    }, title: sym, children: sym }, i)))] })] }) })), _jsxs("div", { ref: editorScrollRef, style: {
+                                    }, title: sym, children: sym }, i)))] })] }) })), _jsxs("div", { ref: editorScrollRef, onScroll: () => updateDragHandleForTarget(dragHandle?.target || null), style: {
                     width: "100%",
                     maxWidth: "100%",
                     flex: "1 1 auto",
@@ -3537,6 +4087,13 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 }, children: [_jsx("div", { ref: editableRef, contentEditable: !readOnly, suppressContentEditableWarning: true, onInput: handleInput, onKeyUp: updateActiveState, onMouseUp: updateActiveState, onCompositionStart: () => (isComposingRef.current = true), onCompositionEnd: () => {
                             isComposingRef.current = false;
                             handleInput();
+                        }, onMouseMove: (e) => {
+                            if (draggedBlockRef.current)
+                                return;
+                            updateDragHandleForTarget(getMovableElementFromNode(e.target));
+                        }, onMouseLeave: () => {
+                            if (!draggedBlockRef.current)
+                                scheduleDragHandleHide();
                         }, onPaste: (e) => {
                             const items = e.clipboardData?.files;
                             if (media && items && items.length) {
@@ -3554,29 +4111,30 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             }
                         }, onDragOver: (e) => {
                             // Allow dragging images within editor and file drops
-                            if (draggedImageRef.current ||
+                            if (draggedBlockRef.current ||
+                                draggedImageRef.current ||
                                 e.dataTransfer?.types?.includes("Files")) {
                                 e.preventDefault();
                             }
                         }, onDrop: (e) => {
+                            if (draggedBlockRef.current) {
+                                e.preventDefault();
+                                const block = draggedBlockRef.current;
+                                draggedBlockRef.current = null;
+                                pushEditorHistory();
+                                if (dropBlockAtPoint(block, e.clientX, e.clientY)) {
+                                    focusElementEnd(block);
+                                    updateDragHandleForTarget(block);
+                                    handleInput();
+                                }
+                                return;
+                            }
                             // Move existing dragged image inside editor
                             if (draggedImageRef.current) {
                                 e.preventDefault();
                                 const x = e.clientX;
                                 const y = e.clientY;
-                                let range = null;
-                                // @ts-ignore
-                                if (document.caretRangeFromPoint) {
-                                    // @ts-ignore
-                                    range = document.caretRangeFromPoint(x, y);
-                                }
-                                else if (document.caretPositionFromPoint) {
-                                    const pos = document.caretPositionFromPoint(x, y);
-                                    if (pos) {
-                                        range = document.createRange();
-                                        range.setStart(pos.offsetNode, pos.offset);
-                                    }
-                                }
+                                let range = getRangeFromPoint(x, y);
                                 const img = draggedImageRef.current;
                                 draggedImageRef.current = null;
                                 if (range &&
@@ -3585,6 +4143,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                     // Avoid inserting inside the image itself
                                     if (range.startContainer === img || range.endContainer === img)
                                         return;
+                                    pushEditorHistory();
                                     // If dropping inside a link, insert right after the link element
                                     let container = range.commonAncestorContainer;
                                     let linkAncestor = null;
@@ -3617,19 +4176,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                 // Try to move caret to drop point
                                 const x = e.clientX;
                                 const y = e.clientY;
-                                let range = null;
-                                // @ts-ignore
-                                if (document.caretRangeFromPoint) {
-                                    // @ts-ignore
-                                    range = document.caretRangeFromPoint(x, y);
-                                }
-                                else if (document.caretPositionFromPoint) {
-                                    const pos = document.caretPositionFromPoint(x, y);
-                                    if (pos) {
-                                        range = document.createRange();
-                                        range.setStart(pos.offsetNode, pos.offset);
-                                    }
-                                }
+                                let range = getRangeFromPoint(x, y);
                                 if (range) {
                                     const sel = window.getSelection();
                                     sel?.removeAllRanges();
@@ -3671,6 +4218,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             }
                         }, onDragEnd: () => {
                             draggedImageRef.current = null;
+                            draggedBlockRef.current = null;
                         }, style: {
                             minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight,
                             maxWidth: "100%",
@@ -3824,7 +4372,55 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                 setTableMenu(null);
                                 setImageMenu(null);
                             }
-                        } }), selectedImage && imageOverlay && (_jsxs("div", { style: {
+                        } }), dragHandle && !readOnly && (_jsx("button", { type: "button", draggable: true, title: "Drag block", "aria-label": "Drag block", onMouseEnter: () => {
+                            if (dragHandleHideTimerRef.current != null) {
+                                window.clearTimeout(dragHandleHideTimerRef.current);
+                                dragHandleHideTimerRef.current = null;
+                            }
+                        }, onMouseLeave: () => {
+                            if (!draggedBlockRef.current)
+                                scheduleDragHandleHide();
+                        }, onMouseDown: (e) => {
+                            e.stopPropagation();
+                        }, onDragStart: (e) => {
+                            draggedBlockRef.current = dragHandle.target;
+                            e.dataTransfer.effectAllowed = "move";
+                            e.dataTransfer.setData("text/plain", "moving-block");
+                            try {
+                                const ghost = dragHandle.target.cloneNode(true);
+                                ghost.style.position = "fixed";
+                                ghost.style.left = "-10000px";
+                                ghost.style.top = "-10000px";
+                                ghost.style.width = `${Math.min(dragHandle.target.getBoundingClientRect().width, 480)}px`;
+                                ghost.style.opacity = "0.75";
+                                document.body.appendChild(ghost);
+                                e.dataTransfer.setDragImage(ghost, 12, 12);
+                                window.setTimeout(() => ghost.remove(), 0);
+                            }
+                            catch { }
+                        }, onDragEnd: () => {
+                            draggedBlockRef.current = null;
+                            updateDragHandleForTarget(dragHandle.target);
+                        }, style: {
+                            position: "absolute",
+                            left: dragHandle.left,
+                            top: dragHandle.top + Math.max(0, (dragHandle.height - 24) / 2),
+                            width: 24,
+                            height: 24,
+                            display: "inline-flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            border: "1px solid var(--srte-border)",
+                            borderRadius: 6,
+                            background: "var(--srte-input-bg)",
+                            color: "var(--srte-input-text)",
+                            boxShadow: "var(--srte-menu-shadow)",
+                            cursor: "grab",
+                            zIndex: 8,
+                            fontSize: 14,
+                            lineHeight: 1,
+                            padding: 0,
+                        }, children: "\u22EE\u22EE" })), selectedImage && imageOverlay && (_jsxs("div", { style: {
                             position: "absolute",
                             left: imageOverlay.left,
                             top: imageOverlay.top,
@@ -3955,7 +4551,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                         alignItems: "center",
                                         padding: "4px 6px",
                                         fontSize: 12,
-                                    }, children: [_jsx("span", { children: "Fill:" }), _jsx("input", { type: "color", defaultValue: "#ffffff", onChange: (e) => {
+                                    }, children: [_jsx("span", { children: "Fill:" }), _jsx("input", { type: "color", value: tableMenuFillHex(tableMenu.cell), onChange: (e) => {
                                                 runTableCellAction(tableMenu.cell, (cell) => applyBgToSelection(e.target.value, cell));
                                             }, style: {
                                                 width: 28,

package/dist/standalone/classic-editor-embed.js

@@ -37,7 +37,7 @@ function ClassicEditorHost(props, ref) {
                     }
                 }
                 catch { }
-            }, placeholder: props.placeholder, minHeight: props.minHeight, maxHeight: props.maxHeight, readOnly: props.readOnly, table: props.table, media: props.media, formula: props.formula, mediaManager: props.mediaManager, theme: props.theme, className: props.className }) }));
+            }, placeholder: props.placeholder, minHeight: props.minHeight, maxHeight: props.maxHeight, readOnly: props.readOnly, table: props.table, media: props.media, formula: props.formula, showFontSize: props.showFontSize, mediaManager: props.mediaManager, theme: props.theme, className: props.className }) }));
 }
 const ClassicEditorHostWithRef = React.forwardRef(ClassicEditorHost);
 function initClassicEditor(opts) {

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-backdrop-filter: blur(2px);\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.22);\n  --srte-modal-backdrop-filter: blur(10px) saturate(0.9);\n  --srte-modal-bg: #1e293b;\n  --srte-modal-text: #e0e0e0;\n  --srte-menu-bg: #1e293b;\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 [contenteditable] ul {\n  list-style-type: disc;\n  list-style-position: outside;\n  margin: 0.75em 0;\n  padding-left: 1.75em;\n}\n.srte-editor [contenteditable] ol {\n  list-style-type: decimal;\n  list-style-position: outside;\n  margin: 0.75em 0;\n  padding-left: 1.75em;\n}\n.srte-editor [contenteditable] li {\n  display: list-item;\n  margin: 0.25em 0;\n  padding-left: 0.25em;\n}\n.srte-editor [contenteditable] li::marker {\n  color: currentColor;\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 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-backdrop-filter: blur(2px);\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.22);\n  --srte-modal-backdrop-filter: blur(10px) saturate(0.9);\n  --srte-modal-bg: #1e293b;\n  --srte-modal-text: #e0e0e0;\n  --srte-menu-bg: #1e293b;\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 [contenteditable] p,\n.srte-editor [contenteditable] h1,\n.srte-editor [contenteditable] h2,\n.srte-editor [contenteditable] h3 {\n  color: inherit;\n}\n.srte-editor [contenteditable] p {\n  display: block;\n  margin: 0 0 0.75em;\n  font-size: 1em;\n  font-weight: 400;\n  line-height: 1.6;\n}\n.srte-editor [contenteditable] h1,\n.srte-editor [contenteditable] h2,\n.srte-editor [contenteditable] h3 {\n  display: block;\n  margin: 0.75em 0 0.4em;\n  font-weight: 700;\n  line-height: 1.25;\n}\n.srte-editor [contenteditable] h1 {\n  font-size: 2em;\n}\n.srte-editor [contenteditable] h2 {\n  font-size: 1.5em;\n}\n.srte-editor [contenteditable] h3 {\n  font-size: 1.25em;\n}\n.srte-editor [contenteditable] > :first-child {\n  margin-top: 0;\n}\n.srte-editor [contenteditable] ul {\n  list-style-type: disc;\n  list-style-position: outside;\n  margin: 0.75em 0;\n  padding-left: 1.75em;\n}\n.srte-editor [contenteditable] ol {\n  list-style-type: decimal;\n  list-style-position: outside;\n  margin: 0.75em 0;\n  padding-left: 1.75em;\n}\n.srte-editor [contenteditable] li {\n  display: list-item;\n  margin: 0.25em 0;\n  padding-left: 0.25em;\n}\n.srte-editor [contenteditable] li::marker {\n  color: currentColor;\n}\n.srte-editor.srte-dark [contenteditable] [style*=\"color\"]:not(td):not(th):not(.srte-preserve-colors):not(.srte-preserve-colors *),\n.srte-editor.srte-dark [contenteditable] [style*=\"background\"]:not(td):not(th):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

@@ -56,6 +56,39 @@ export const SRTE_DEFAULT_CSS = `
   background: var(--srte-surface-subtle);
   color: var(--srte-text);
 }
+.srte-editor [contenteditable] p,
+.srte-editor [contenteditable] h1,
+.srte-editor [contenteditable] h2,
+.srte-editor [contenteditable] h3 {
+  color: inherit;
+}
+.srte-editor [contenteditable] p {
+  display: block;
+  margin: 0 0 0.75em;
+  font-size: 1em;
+  font-weight: 400;
+  line-height: 1.6;
+}
+.srte-editor [contenteditable] h1,
+.srte-editor [contenteditable] h2,
+.srte-editor [contenteditable] h3 {
+  display: block;
+  margin: 0.75em 0 0.4em;
+  font-weight: 700;
+  line-height: 1.25;
+}
+.srte-editor [contenteditable] h1 {
+  font-size: 2em;
+}
+.srte-editor [contenteditable] h2 {
+  font-size: 1.5em;
+}
+.srte-editor [contenteditable] h3 {
+  font-size: 1.25em;
+}
+.srte-editor [contenteditable] > :first-child {
+  margin-top: 0;
+}
 .srte-editor [contenteditable] ul {
   list-style-type: disc;
   list-style-position: outside;
@@ -76,8 +109,8 @@ export const SRTE_DEFAULT_CSS = `
 .srte-editor [contenteditable] li::marker {
   color: currentColor;
 }
-.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 *) {
+.srte-editor.srte-dark [contenteditable] [style*="color"]:not(td):not(th):not(.srte-preserve-colors):not(.srte-preserve-colors *),
+.srte-editor.srte-dark [contenteditable] [style*="background"]:not(td):not(th):not(.srte-preserve-colors):not(.srte-preserve-colors *) {
   color: var(--srte-text) !important;
   background: transparent !important;
   background-color: transparent !important;
@@ -91,8 +124,13 @@ const SRTE_STYLE_ID = 'srte-theme-defaults';
 export function ensureStyleSheet() {
     if (typeof document === 'undefined')
         return;
-    if (document.getElementById(SRTE_STYLE_ID))
+    const existing = document.getElementById(SRTE_STYLE_ID);
+    if (existing) {
+        if (existing.textContent !== SRTE_DEFAULT_CSS) {
+            existing.textContent = SRTE_DEFAULT_CSS;
+        }
         return;
+    }
     const style = document.createElement('style');
     style.id = SRTE_STYLE_ID;
     style.textContent = SRTE_DEFAULT_CSS;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smartrte-react",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "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",