smartrte-react 0.2.7 → 0.2.10

package/dist/components/ClassicEditor.js

@@ -55,10 +55,12 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const [showSpecialChars, setShowSpecialChars] = useState(false);
     const [colorPickerType, setColorPickerType] = useState('text');
     const savedRangeRef = useRef(null);
+    const inlineScriptCaretOverrideRef = useRef(null);
     const historyRef = useRef({
         undo: [],
         redo: [],
     });
+    const inputHistoryGroupRef = useRef(null);
     const [currentFontSize, setCurrentFontSize] = useState("");
     const [currentFont, setCurrentFont] = useState("");
     const [currentBlockType, setCurrentBlockType] = useState("p");
@@ -114,14 +116,28 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             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();
+            const scriptOverride = inlineScriptCaretOverrideRef.current;
+            const overrideApplies = Boolean(scriptOverride &&
+                range.collapsed &&
+                range.startContainer === scriptOverride.container &&
+                range.startOffset === scriptOverride.offset);
+            if (scriptOverride && !overrideApplies) {
+                inlineScriptCaretOverrideRef.current = null;
+            }
+            const subscriptActive = document.queryCommandState("subscript") || Boolean(element?.closest("sub"));
+            const superscriptActive = document.queryCommandState("superscript") || Boolean(element?.closest("sup"));
             setCurrentBlockType(tag === "h1" || tag === "h2" || tag === "h3" ? tag : "p");
             setActiveState({
                 bold: document.queryCommandState("bold"),
                 italic: document.queryCommandState("italic"),
                 underline: document.queryCommandState("underline"),
                 strikeThrough: document.queryCommandState("strikeThrough"),
-                subscript: document.queryCommandState("subscript"),
-                superscript: document.queryCommandState("superscript"),
+                subscript: overrideApplies && scriptOverride?.command === "subscript"
+                    ? false
+                    : subscriptActive,
+                superscript: overrideApplies && scriptOverride?.command === "superscript"
+                    ? false
+                    : superscriptActive,
                 unorderedList: Boolean(element?.closest("ul")),
                 orderedList: Boolean(element?.closest("ol")),
                 blockquote: Boolean(element?.closest("blockquote")),
@@ -165,6 +181,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 toggleList("ol");
                 return;
             }
+            pushEditorHistory();
             const beforeHtml = editableRef.current?.innerHTML || "";
             const ok = document.execCommand(command, false, valueArg);
             const afterHtml = editableRef.current?.innerHTML || "";
@@ -178,6 +195,74 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         }
         catch { }
     };
+    const getScriptAncestor = (node, tagName) => {
+        const editor = editableRef.current;
+        let element = node instanceof HTMLElement ? node : node?.parentElement || null;
+        while (element && element !== editor) {
+            if (element.tagName.toLowerCase() === tagName)
+                return element;
+            element = element.parentElement;
+        }
+        return null;
+    };
+    const toggleInlineScript = (command) => {
+        try {
+            if (!restoreSavedSelection()) {
+                safeSelectRange(getSelectionRangeInEditor());
+            }
+            const editor = editableRef.current;
+            const range = getSelectionRangeInEditor();
+            if (!editor || !range)
+                return;
+            const tagName = command === "subscript" ? "sub" : "sup";
+            const script = range.collapsed
+                ? getScriptAncestor(range.startContainer, tagName)
+                : null;
+            if (range.collapsed && document.queryCommandState(command)) {
+                document.execCommand(command, false);
+                const currentRange = getSelectionRangeInEditor();
+                savedRangeRef.current = currentRange?.cloneRange() || null;
+                inlineScriptCaretOverrideRef.current = currentRange?.collapsed
+                    ? {
+                        command,
+                        container: currentRange.startContainer,
+                        offset: currentRange.startOffset,
+                    }
+                    : null;
+                setActiveState((current) => ({
+                    ...current,
+                    subscript: command === "subscript" ? false : current.subscript,
+                    superscript: command === "superscript" ? false : current.superscript,
+                }));
+                handleInput();
+                requestAnimationFrame(updateActiveState);
+                return;
+            }
+            if (script) {
+                const nextRange = document.createRange();
+                nextRange.setStartAfter(script);
+                nextRange.collapse(true);
+                safeSelectRange(nextRange);
+                savedRangeRef.current = nextRange.cloneRange();
+                inlineScriptCaretOverrideRef.current = {
+                    command,
+                    container: nextRange.startContainer,
+                    offset: nextRange.startOffset,
+                };
+                setActiveState((current) => ({
+                    ...current,
+                    subscript: command === "subscript" ? false : current.subscript,
+                    superscript: command === "superscript" ? false : current.superscript,
+                }));
+                requestAnimationFrame(updateActiveState);
+                return;
+            }
+            inlineScriptCaretOverrideRef.current = null;
+            exec(command);
+            requestAnimationFrame(updateActiveState);
+        }
+        catch { }
+    };
     const applyFormatBlock = (blockName) => {
         try {
             if (!restoreSavedSelection()) {
@@ -206,10 +291,12 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             onChange(html);
         }
     };
-    const pushEditorHistory = () => {
+    const pushEditorHistory = (preserveInputGroup = false) => {
         const editor = editableRef.current;
         if (!editor)
             return;
+        if (!preserveInputGroup)
+            inputHistoryGroupRef.current = null;
         const selectionCells = selectionRef.current
             ? getCellsInGridRect(selectionRef.current.tbody, selectionRef.current.sr, selectionRef.current.sc, selectionRef.current.er, selectionRef.current.ec)
             : [];
@@ -247,22 +334,47 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const history = historyRef.current;
         const from = dir === "undo" ? history.undo : history.redo;
         const to = dir === "undo" ? history.redo : history.undo;
-        const html = from.pop();
+        const currentHtml = editor.innerHTML;
+        let html;
+        while (from.length > 0) {
+            const candidate = from.pop();
+            if (candidate !== currentHtml) {
+                html = candidate;
+                break;
+            }
+        }
         if (html == null)
             return false;
-        to.push(editor.innerHTML);
+        if (to[to.length - 1] !== currentHtml)
+            to.push(currentHtml);
         editor.innerHTML = html;
         fixNegativeMargins(editor);
         ensureTableWrappers(editor);
         addTableResizeHandles();
         clearSelectionDecor();
         setTableMenu(null);
+        inputHistoryGroupRef.current = null;
+        focusElementEnd(editor);
+        requestAnimationFrame(updateActiveState);
         if (html !== lastEmittedRef.current) {
             lastEmittedRef.current = html;
             onChange?.(html);
         }
         return true;
     };
+    const captureInputHistory = (inputType) => {
+        const now = Date.now();
+        const previous = inputHistoryGroupRef.current;
+        const groupable = inputType === "insertText" ||
+            inputType === "deleteContentBackward" ||
+            inputType === "deleteContentForward";
+        const continuesGroup = groupable &&
+            previous?.inputType === inputType &&
+            now - previous.timestamp < 1000;
+        if (!continuesGroup)
+            pushEditorHistory(true);
+        inputHistoryGroupRef.current = { inputType, timestamp: now };
+    };
     const restoreSavedSelection = () => {
         const editor = editableRef.current;
         if (!editor)
@@ -292,6 +404,21 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             return;
         exec("createLink", url);
     };
+    const openEditorLink = (anchor) => {
+        const rawHref = anchor.getAttribute("href")?.trim();
+        if (!rawHref)
+            return;
+        try {
+            const url = new URL(rawHref, window.location.href);
+            if (!["http:", "https:", "mailto:", "tel:"].includes(url.protocol))
+                return;
+            const target = anchor.getAttribute("target") || "_blank";
+            const opened = window.open(url.href, target, target === "_blank" ? "noopener,noreferrer" : undefined);
+            if (opened && target === "_blank")
+                opened.opener = null;
+        }
+        catch { }
+    };
     const getSelectionRangeInEditor = () => {
         const editor = editableRef.current;
         if (!editor)
@@ -568,6 +695,89 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         }
         return changed;
     };
+    const nestListSelection = () => {
+        const editor = editableRef.current;
+        if (!editor)
+            return;
+        if (!restoreSavedSelection())
+            safeSelectRange(getSelectionRangeInEditor());
+        const range = getSelectionRangeInEditor();
+        if (!range || range.collapsed)
+            return;
+        const items = sortInDocumentOrder(getSelectedListItems(getSelectedBlocks(range)));
+        const firstList = items[0]?.parentElement;
+        if (items.length === 0 ||
+            !firstList ||
+            !["ul", "ol"].includes(firstList.tagName.toLowerCase())) {
+            return;
+        }
+        const listTag = firstList.tagName.toLowerCase();
+        const directItems = items.filter((item) => item.parentElement === firstList);
+        if (directItems.length === 0 || !directItems[0].previousElementSibling)
+            return;
+        pushEditorHistory();
+        if (nestSelectedListItems(directItems, listTag)) {
+            handleInput();
+            requestAnimationFrame(updateActiveState);
+        }
+    };
+    const applyListStyle = (value) => {
+        const listTag = value.startsWith("ordered:") ? "ol" : "ul";
+        const styleType = value.replace(/^(ordered|bullet):/, "");
+        if (!restoreSavedSelection())
+            safeSelectRange(getSelectionRangeInEditor());
+        const range = getSelectionRangeInEditor();
+        if (!range)
+            return;
+        const lists = new Set();
+        getSelectedListItems(getSelectedBlocks(range)).forEach((item) => {
+            const list = item.parentElement;
+            if (list &&
+                ["ul", "ol"].includes(list.tagName.toLowerCase())) {
+                lists.add(list);
+            }
+        });
+        [range.startContainer, range.endContainer].forEach((node) => {
+            const element = node instanceof HTMLElement ? node : node.parentElement;
+            const list = element?.closest("ul,ol");
+            if (list && editableRef.current?.contains(list))
+                lists.add(list);
+        });
+        if (lists.size === 0) {
+            const block = getCurrentBlock();
+            if (!block?.closest("ul,ol")) {
+                toggleList(listTag);
+                const currentList = getCurrentBlock()?.closest(listTag);
+                if (currentList)
+                    currentList.style.listStyleType = styleType;
+                handleInput();
+                return;
+            }
+            const currentList = block.closest("ul,ol");
+            if (currentList)
+                lists.add(currentList);
+        }
+        if (lists.size === 0)
+            return;
+        pushEditorHistory();
+        let lastList = null;
+        lists.forEach((list) => {
+            const target = list.tagName.toLowerCase() === listTag
+                ? list
+                : cloneListShell(list, listTag);
+            if (target !== list) {
+                target.innerHTML = list.innerHTML;
+                list.parentElement?.replaceChild(target, list);
+            }
+            target.style.listStyleType = styleType;
+            lastList = target;
+        });
+        const lastItem = lastList?.lastElementChild;
+        if (lastItem)
+            focusElementEnd(lastItem);
+        handleInput();
+        requestAnimationFrame(updateActiveState);
+    };
     const convertSelectedBlocksToList = (blocks, listTag) => {
         const editor = editableRef.current;
         if (!editor || blocks.length === 0)
@@ -612,19 +822,99 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             focusElementEnd(lastLi);
         return true;
     };
+    const transformSelectedListItems = (items, listTag) => {
+        const editor = editableRef.current;
+        if (!editor || items.length === 0)
+            return false;
+        const selected = new Set(items.filter((item) => {
+            const parentItem = item.parentElement?.closest("li");
+            return !parentItem || !items.includes(parentItem);
+        }));
+        const lists = new Set();
+        selected.forEach((item) => {
+            const list = item.parentElement;
+            if (list &&
+                (list.tagName.toLowerCase() === "ul" || list.tagName.toLowerCase() === "ol")) {
+                lists.add(list);
+            }
+        });
+        let changed = false;
+        let lastTarget = null;
+        lists.forEach((list) => {
+            const parent = list.parentElement;
+            if (!parent || !editor.contains(list))
+                return;
+            const toggleOff = list.tagName.toLowerCase() === listTag;
+            let pendingList = null;
+            const flushPendingList = () => {
+                if (!pendingList?.childNodes.length)
+                    return;
+                parent.insertBefore(pendingList, list);
+                pendingList = null;
+            };
+            Array.from(list.children).forEach((child) => {
+                if (!(child instanceof HTMLElement) || child.tagName.toLowerCase() !== "li")
+                    return;
+                const isSelected = selected.has(child);
+                if (isSelected && toggleOff) {
+                    flushPendingList();
+                    const paragraph = document.createElement("p");
+                    paragraph.innerHTML = child.innerHTML || "<br>";
+                    parent.insertBefore(paragraph, list);
+                    lastTarget = paragraph;
+                    child.remove();
+                    changed = true;
+                    return;
+                }
+                const outputTag = isSelected ? listTag : list.tagName.toLowerCase();
+                if (!pendingList || pendingList.tagName.toLowerCase() !== outputTag) {
+                    flushPendingList();
+                    pendingList = cloneListShell(list, outputTag);
+                }
+                pendingList.appendChild(child);
+                if (isSelected) {
+                    lastTarget = child;
+                    changed = true;
+                }
+            });
+            flushPendingList();
+            list.remove();
+        });
+        if (changed && lastTarget)
+            focusElementEnd(lastTarget);
+        return changed;
+    };
     const toggleList = (listTag) => {
         const editor = editableRef.current;
         if (!editor)
             return;
         if (!restoreSavedSelection())
             safeSelectRange(getSelectionRangeInEditor());
+        const setListActiveState = (active) => {
+            setActiveState((current) => ({
+                ...current,
+                unorderedList: listTag === "ul" ? active : false,
+                orderedList: listTag === "ol" ? active : false,
+            }));
+        };
         const range = getSelectionRangeInEditor();
         if (range && !range.collapsed) {
             const blocks = getSelectedBlocks(range);
             const selectedListItems = getSelectedListItems(blocks);
+            if (selectedListItems.length > 0) {
+                pushEditorHistory();
+                if (transformSelectedListItems(selectedListItems, listTag)) {
+                    const active = Boolean(getCurrentBlock()?.closest(listTag));
+                    setListActiveState(active);
+                    handleInput();
+                    requestAnimationFrame(updateActiveState);
+                    return;
+                }
+            }
+            pushEditorHistory();
             const convertedBlocks = convertSelectedBlocksToList(blocks, listTag);
-            const nestedItems = nestSelectedListItems(selectedListItems, listTag);
-            if (convertedBlocks || nestedItems) {
+            if (convertedBlocks) {
+                setListActiveState(true);
                 handleInput();
                 requestAnimationFrame(updateActiveState);
                 return;
@@ -632,31 +922,39 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         }
         const block = getCurrentBlock();
         if (!block) {
+            pushEditorHistory();
             insertEmptyListAtSelection(listTag);
+            setListActiveState(true);
             handleInput();
             requestAnimationFrame(updateActiveState);
             return;
         }
         const currentList = block.closest("ul,ol");
         if (currentList && editor.contains(currentList)) {
+            pushEditorHistory();
             if (currentList.tagName.toLowerCase() === listTag) {
                 const li = block.closest("li");
-                if (li)
+                if (li) {
                     unwrapListItem(li, currentList);
+                    setListActiveState(false);
+                }
             }
             else {
                 convertListTag(currentList, listTag);
+                setListActiveState(true);
             }
             handleInput();
             requestAnimationFrame(updateActiveState);
             return;
         }
+        pushEditorHistory();
         const list = document.createElement(listTag);
         const li = document.createElement("li");
         li.innerHTML = block.innerHTML || "<br>";
         list.appendChild(li);
         block.parentElement?.replaceChild(list, block);
         focusElementEnd(li);
+        setListActiveState(true);
         handleInput();
         requestAnimationFrame(updateActiveState);
     };
@@ -3327,6 +3625,50 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             return null;
         return getMovableElementFromNode(element);
     };
+    const getMoveTarget = () => {
+        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?.nodeType === Node.TEXT_NODE)
+            node = node.parentNode;
+        const element = node instanceof HTMLElement ? node : null;
+        if (!element)
+            return null;
+        const listItem = element.closest("li");
+        if (listItem && editor.contains(listItem))
+            return listItem;
+        const cell = getClosestCell(element);
+        if (cell) {
+            const block = element.closest("p,h1,h2,h3,h4,h5,h6,blockquote,pre,div");
+            if (block && block !== cell && cell.contains(block))
+                return block;
+            return cell;
+        }
+        return getTopLevelMovableElement();
+    };
+    const outdentListItem = (item) => {
+        const list = item.parentElement;
+        const parentItem = list?.parentElement;
+        const outerList = parentItem?.parentElement;
+        if (!list ||
+            !parentItem ||
+            parentItem.tagName.toLowerCase() !== "li" ||
+            !outerList ||
+            !["ul", "ol"].includes(outerList.tagName.toLowerCase())) {
+            return false;
+        }
+        outerList.insertBefore(item, parentItem.nextSibling);
+        if (!list.querySelector("li"))
+            list.remove();
+        return true;
+    };
     const elementSibling = (element, direction) => {
         let sibling = direction === "previous" ? element.previousSibling : element.nextSibling;
         while (sibling && sibling.nodeType === Node.TEXT_NODE && !sibling.textContent?.trim()) {
@@ -3336,11 +3678,40 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     };
     const moveCurrentElement = (direction) => {
         const editor = editableRef.current;
-        const target = getTopLevelMovableElement();
+        let target = getMoveTarget();
         if (!editor || !target)
             return;
         pushEditorHistory();
-        if (direction === "up") {
+        if (target.tagName === "TD" || target.tagName === "TH") {
+            const cell = target;
+            const paragraph = document.createElement("p");
+            while (cell.firstChild)
+                paragraph.appendChild(cell.firstChild);
+            cell.appendChild(paragraph);
+            target = paragraph;
+        }
+        if (target.tagName.toLowerCase() === "li") {
+            const list = target.parentElement;
+            if (!list)
+                return;
+            if (direction === "up") {
+                const previous = elementSibling(target, "previous");
+                if (previous?.nodeName === "LI")
+                    list.insertBefore(target, previous);
+            }
+            else if (direction === "down") {
+                const next = elementSibling(target, "next");
+                if (next?.nodeName === "LI")
+                    list.insertBefore(next, target);
+            }
+            else if (direction === "right") {
+                nestSelectedListItems([target], list.tagName.toLowerCase());
+            }
+            else {
+                outdentListItem(target);
+            }
+        }
+        else if (direction === "up") {
             const previous = elementSibling(target, "previous");
             if (previous)
                 target.parentElement?.insertBefore(target, previous);
@@ -3419,7 +3790,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%",
@@ -3430,6 +3818,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) {
@@ -3542,7 +3933,20 @@ 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: "1px 4px", background: "var(--srte-accent-bg)", borderRadius: 3 }, children: "A" }) }), _jsxs("button", { title: "Subscript", onClick: () => exec("subscript"), "aria-pressed": activeState.subscript, style: activeButtonStyle(activeState.subscript), children: ["X", _jsx("sub", { children: "2" })] }), _jsxs("button", { title: "Superscript", onClick: () => exec("superscript"), "aria-pressed": activeState.superscript, style: activeButtonStyle(activeState.superscript), children: ["X", _jsx("sup", { children: "2" })] }), _jsx("button", { title: "Bulleted list", onClick: () => exec("insertUnorderedList"), "aria-pressed": activeState.unorderedList, style: activeButtonStyle(activeState.unorderedList, { padding: "0 10px" }), children: "\u2022 List" }), _jsx("button", { title: "Numbered list", onClick: () => exec("insertOrderedList"), "aria-pressed": activeState.orderedList, style: activeButtonStyle(activeState.orderedList, { padding: "0 10px" }), children: "1. List" }), _jsx("button", { title: "Blockquote", onClick: toggleBlockquote, "aria-pressed": activeState.blockquote, style: activeButtonStyle(activeState.blockquote), children: "\u275D" }), _jsx("button", { title: "Special characters", onClick: () => setShowSpecialChars(true), style: {
+                        }, children: _jsx("span", { style: { fontWeight: 700, padding: "1px 4px", background: "var(--srte-accent-bg)", borderRadius: 3 }, children: "A" }) }), _jsxs("button", { title: "Subscript", onClick: () => toggleInlineScript("subscript"), "aria-pressed": activeState.subscript, style: activeButtonStyle(activeState.subscript), children: ["X", _jsx("sub", { children: "2" })] }), _jsxs("button", { title: "Superscript", onClick: () => toggleInlineScript("superscript"), "aria-pressed": activeState.superscript, style: activeButtonStyle(activeState.superscript), children: ["X", _jsx("sup", { children: "2" })] }), _jsx("button", { title: "Bulleted list", onClick: () => exec("insertUnorderedList"), "aria-pressed": activeState.unorderedList, style: activeButtonStyle(activeState.unorderedList, { padding: "0 10px" }), children: "\u2022 List" }), _jsx("button", { title: "Numbered list", onClick: () => exec("insertOrderedList"), "aria-pressed": activeState.orderedList, style: activeButtonStyle(activeState.orderedList, { padding: "0 10px" }), children: "1. List" }), _jsxs("select", { defaultValue: "", onMouseDown: preserveEditorSelection, onChange: (e) => {
+                            const value = e.target.value;
+                            if (value)
+                                applyListStyle(value);
+                            e.currentTarget.value = "";
+                        }, title: "List style", "aria-label": "List style", style: {
+                            height: 32,
+                            maxWidth: 112,
+                            padding: "0 6px",
+                            border: "1px solid var(--srte-input-border)",
+                            borderRadius: 6,
+                            background: "var(--srte-input-bg)",
+                            color: "var(--srte-input-text)",
+                        }, children: [_jsx("option", { value: "", disabled: true, children: "List style" }), _jsxs("optgroup", { label: "Bullets", children: [_jsx("option", { value: "bullet:disc", children: "Disc" }), _jsx("option", { value: "bullet:circle", children: "Circle" }), _jsx("option", { value: "bullet:square", children: "Square" })] }), _jsxs("optgroup", { label: "Numbered", children: [_jsx("option", { value: "ordered:decimal", children: "1, 2, 3" }), _jsx("option", { value: "ordered:lower-alpha", children: "a, b, c" }), _jsx("option", { value: "ordered:upper-alpha", children: "A, B, C" }), _jsx("option", { value: "ordered:lower-roman", children: "i, ii, iii" }), _jsx("option", { value: "ordered:upper-roman", children: "I, II, III" })] })] }), _jsx("button", { title: "Blockquote", onClick: toggleBlockquote, "aria-pressed": activeState.blockquote, style: activeButtonStyle(activeState.blockquote), children: "\u275D" }), _jsx("button", { title: "Special characters", onClick: () => setShowSpecialChars(true), style: {
                             height: 32,
                             minWidth: 32,
                             padding: "0 8px",
@@ -4064,7 +4468,16 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     boxSizing: "border-box",
                     position: "relative",
                     scrollPaddingBottom: 24,
-                }, children: [_jsx("div", { ref: editableRef, contentEditable: !readOnly, suppressContentEditableWarning: true, onInput: handleInput, onKeyUp: updateActiveState, onMouseUp: updateActiveState, onCompositionStart: () => (isComposingRef.current = true), onCompositionEnd: () => {
+                }, children: [_jsx("div", { ref: editableRef, contentEditable: !readOnly, suppressContentEditableWarning: true, onBeforeInput: (e) => {
+                            const inputType = e.nativeEvent.inputType || "input";
+                            if (inputType === "historyUndo" || inputType === "historyRedo") {
+                                if (restoreEditorHistory(inputType === "historyUndo" ? "undo" : "redo")) {
+                                    e.preventDefault();
+                                }
+                                return;
+                            }
+                            captureInputHistory(inputType);
+                        }, onInput: handleInput, onKeyUp: updateActiveState, onMouseUp: updateActiveState, onCompositionStart: () => (isComposingRef.current = true), onCompositionEnd: () => {
                             isComposingRef.current = false;
                             handleInput();
                         }, onMouseMove: (e) => {
@@ -4084,6 +4497,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                     return;
                                 }
                             }
+                            pushEditorHistory();
                             const html = e.clipboardData?.getData("text/html");
                             if (html) {
                                 e.preventDefault();
@@ -4166,6 +4580,13 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             }
                         }, onClick: (e) => {
                             const t = e.target;
+                            const anchor = t?.closest("a");
+                            if (anchor && editableRef.current?.contains(anchor)) {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                openEditorLink(anchor);
+                                return;
+                            }
                             if (t && t.tagName === "IMG") {
                                 setSelectedImage(t);
                                 scheduleImageOverlay();
@@ -4241,13 +4662,29 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             // Keep Tab for indentation in lists; otherwise insert 2 spaces
                             if (e.key === "Tab") {
                                 e.preventDefault();
-                                if (document.queryCommandState("insertUnorderedList") ||
-                                    document.queryCommandState("insertOrderedList")) {
+                                const selection = getSelectionRangeInEditor();
+                                const selectedListItems = selection && !selection.collapsed
+                                    ? getSelectedListItems(getSelectedBlocks(selection))
+                                    : [];
+                                if (selectedListItems.length > 0) {
+                                    if (!e.shiftKey) {
+                                        nestListSelection();
+                                        return;
+                                    }
+                                    pushEditorHistory();
+                                    exec("outdent");
+                                    return;
+                                }
+                                const currentBlock = getCurrentBlock();
+                                if (currentBlock?.closest("li")) {
+                                    pushEditorHistory();
                                     exec(e.shiftKey ? "outdent" : "indent");
                                 }
                                 else {
+                                    captureInputHistory("insertText");
                                     document.execCommand("insertText", false, "  ");
                                 }
+                                return;
                             }
                             // Table navigation with arrows inside cells
                             if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {

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] 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 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 [contenteditable] a,\n.srte-editor [contenteditable] a:visited {\n  color: var(--srte-primary) !important;\n  text-decoration: underline !important;\n  text-decoration-thickness: 1px !important;\n  text-underline-offset: 2px !important;\n  cursor: pointer;\n}\n.srte-editor [contenteditable] a:hover {\n  color: var(--srte-accent) !important;\n}\n.srte-editor [contenteditable] a:focus-visible {\n  outline: 2px solid var(--srte-accent);\n  outline-offset: 2px;\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

@@ -109,6 +109,21 @@ export const SRTE_DEFAULT_CSS = `
 .srte-editor [contenteditable] li::marker {
   color: currentColor;
 }
+.srte-editor [contenteditable] a,
+.srte-editor [contenteditable] a:visited {
+  color: var(--srte-primary) !important;
+  text-decoration: underline !important;
+  text-decoration-thickness: 1px !important;
+  text-underline-offset: 2px !important;
+  cursor: pointer;
+}
+.srte-editor [contenteditable] a:hover {
+  color: var(--srte-accent) !important;
+}
+.srte-editor [contenteditable] a:focus-visible {
+  outline: 2px solid var(--srte-accent);
+  outline-offset: 2px;
+}
 .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;

package/package.json

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