@overlap/rte 1.0.8 → 1.0.10

package/dist/index.js

@@ -87,10 +87,45 @@ const Icon = ({ icon, width = 18, height = 18, className }) => {
 const Dropdown = ({ icon, label, options, onSelect, currentValue, disabled, showCustomColorInput, }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [customColor, setCustomColor] = React.useState("#000000");
+    const [menuPos, setMenuPos] = React.useState({ top: 0, left: 0 });
     const dropdownRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const buttonRef = React.useRef(null);
+    const updateMenuPosition = React.useCallback(() => {
+        if (!buttonRef.current)
+            return;
+        const rect = buttonRef.current.getBoundingClientRect();
+        const pad = 8;
+        let top = rect.bottom + 4;
+        let left = rect.left;
+        const menuEl = menuRef.current;
+        if (menuEl) {
+            const menuW = menuEl.offsetWidth;
+            const menuH = menuEl.offsetHeight;
+            if (left + menuW > window.innerWidth - pad) {
+                left = window.innerWidth - menuW - pad;
+            }
+            if (left < pad)
+                left = pad;
+            if (top + menuH > window.innerHeight - pad) {
+                top = rect.top - menuH - 4;
+            }
+            if (top < pad)
+                top = pad;
+        }
+        setMenuPos({ top, left });
+    }, []);
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        updateMenuPosition();
+        requestAnimationFrame(updateMenuPosition);
+    }, [isOpen, updateMenuPosition]);
     React.useEffect(() => {
         const handleClickOutside = (event) => {
-            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+            const target = event.target;
+            if (dropdownRef.current && !dropdownRef.current.contains(target) &&
+                (!menuRef.current || !menuRef.current.contains(target))) {
                 setIsOpen(false);
             }
         };
@@ -106,7 +141,6 @@ const Dropdown = ({ icon, label, options, onSelect, currentValue, disabled, show
         setIsOpen(false);
     };
     const currentOption = options.find(opt => opt.value === currentValue);
-    // Close on Escape key
     React.useEffect(() => {
         if (!isOpen)
             return;
@@ -119,21 +153,26 @@ const Dropdown = ({ icon, label, options, onSelect, currentValue, disabled, show
         document.addEventListener("keydown", handleKeyDown);
         return () => document.removeEventListener("keydown", handleKeyDown);
     }, [isOpen]);
-    return (jsxRuntime.jsxs("div", { className: "rte-dropdown", ref: dropdownRef, onMouseDown: (e) => e.preventDefault(), children: [jsxRuntime.jsxs("button", { type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `rte-toolbar-button rte-dropdown-button ${currentOption ? 'rte-dropdown-button-has-value' : ''}`, title: label, "aria-label": label, "aria-expanded": isOpen, "aria-haspopup": "listbox", children: [jsxRuntime.jsx(Icon, { icon: icon, width: 18, height: 18 }), currentOption && (jsxRuntime.jsx("span", { className: "rte-dropdown-value", children: currentOption.label }))] }), isOpen && (jsxRuntime.jsxs("div", { className: "rte-dropdown-menu", role: "listbox", "aria-label": label, children: [options.map((option) => (jsxRuntime.jsxs("button", { type: "button", role: "option", "aria-selected": currentValue === option.value, className: `rte-dropdown-item ${currentValue === option.value ? 'rte-dropdown-item-active' : ''}`, onClick: () => handleSelect(option.value), children: [option.color && (jsxRuntime.jsx("span", { className: `rte-dropdown-color-preview ${currentValue === option.value ? 'active' : ''}`, style: { backgroundColor: option.color } })), option.preview && !option.headingPreview && (jsxRuntime.jsx("span", { className: "rte-dropdown-fontsize-preview", style: { fontSize: `${option.preview}px` }, children: "Aa" })), option.headingPreview && (jsxRuntime.jsx("span", { className: `rte-dropdown-heading-preview ${option.headingPreview}`, children: option.headingPreview === 'p' ? 'Normal' : option.headingPreview.toUpperCase() })), option.icon && jsxRuntime.jsx(Icon, { icon: option.icon, width: 16, height: 16 }), jsxRuntime.jsx("span", { style: { flex: 1, fontWeight: currentValue === option.value ? 600 : 400 }, children: option.label })] }, option.value))), showCustomColorInput && (jsxRuntime.jsxs("div", { className: "rte-color-custom-input", onMouseDown: (e) => e.stopPropagation(), children: [jsxRuntime.jsx("input", { type: "color", value: customColor, onChange: (e) => setCustomColor(e.target.value), title: "Pick a color" }), jsxRuntime.jsx("input", { type: "text", value: customColor, onChange: (e) => {
-                                    const v = e.target.value;
-                                    setCustomColor(v);
-                                }, placeholder: "#000000", maxLength: 7, onKeyDown: (e) => {
-                                    if (e.key === "Enter") {
-                                        e.preventDefault();
-                                        if (/^#[0-9a-fA-F]{3,6}$/.test(customColor)) {
-                                            handleSelect(customColor);
-                                        }
-                                    }
-                                } }), jsxRuntime.jsx("button", { type: "button", className: "rte-color-custom-apply", onClick: () => {
-                                    if (/^#[0-9a-fA-F]{3,6}$/.test(customColor)) {
-                                        handleSelect(customColor);
-                                    }
-                                }, children: "Apply" })] }))] }))] }));
+    const menuContent = isOpen ? (jsxRuntime.jsxs("div", { ref: menuRef, className: "rte-dropdown-menu", role: "listbox", "aria-label": label, style: {
+            position: 'fixed',
+            top: menuPos.top,
+            left: menuPos.left,
+        }, onMouseDown: (e) => e.preventDefault(), children: [options.map((option) => (jsxRuntime.jsxs("button", { type: "button", role: "option", "aria-selected": currentValue === option.value, className: `rte-dropdown-item ${currentValue === option.value ? 'rte-dropdown-item-active' : ''}`, onClick: () => handleSelect(option.value), children: [option.color && (jsxRuntime.jsx("span", { className: `rte-dropdown-color-preview ${currentValue === option.value ? 'active' : ''}`, style: { backgroundColor: option.color } })), option.preview && !option.headingPreview && (jsxRuntime.jsx("span", { className: "rte-dropdown-fontsize-preview", style: { fontSize: `${option.preview}px` }, children: "Aa" })), option.headingPreview && (jsxRuntime.jsx("span", { className: `rte-dropdown-heading-preview ${option.headingPreview}`, children: option.headingPreview === 'p' ? 'Normal' : option.headingPreview.toUpperCase() })), option.icon && jsxRuntime.jsx(Icon, { icon: option.icon, width: 16, height: 16 }), jsxRuntime.jsx("span", { style: { flex: 1, fontWeight: currentValue === option.value ? 600 : 400 }, children: option.label })] }, option.value))), showCustomColorInput && (jsxRuntime.jsxs("div", { className: "rte-color-custom-input", onMouseDown: (e) => e.stopPropagation(), children: [jsxRuntime.jsx("input", { type: "color", value: customColor, onChange: (e) => setCustomColor(e.target.value), title: "Pick a color" }), jsxRuntime.jsx("input", { type: "text", value: customColor, onChange: (e) => {
+                            const v = e.target.value;
+                            setCustomColor(v);
+                        }, placeholder: "#000000", maxLength: 7, onKeyDown: (e) => {
+                            if (e.key === "Enter") {
+                                e.preventDefault();
+                                if (/^#[0-9a-fA-F]{3,6}$/.test(customColor)) {
+                                    handleSelect(customColor);
+                                }
+                            }
+                        } }), jsxRuntime.jsx("button", { type: "button", className: "rte-color-custom-apply", onClick: () => {
+                            if (/^#[0-9a-fA-F]{3,6}$/.test(customColor)) {
+                                handleSelect(customColor);
+                            }
+                        }, children: "Apply" })] }))] })) : null;
+    return (jsxRuntime.jsxs("div", { className: "rte-dropdown", ref: dropdownRef, onMouseDown: (e) => e.preventDefault(), children: [jsxRuntime.jsxs("button", { ref: buttonRef, type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `rte-toolbar-button rte-dropdown-button ${currentOption ? 'rte-dropdown-button-has-value' : ''}`, title: label, "aria-label": label, "aria-expanded": isOpen, "aria-haspopup": "listbox", children: [jsxRuntime.jsx(Icon, { icon: icon, width: 18, height: 18 }), currentOption && (jsxRuntime.jsx("span", { className: "rte-dropdown-value", children: currentOption.label }))] }), menuContent && reactDom.createPortal(menuContent, document.body)] }));
 };
 
 /**
@@ -808,7 +847,7 @@ const ALLOWED_CONTENT_TAGS = new Set([
     "ul", "ol", "li", "a", "strong", "em", "u", "s", "del",
     "sub", "sup", "code", "pre", "blockquote", "br", "hr",
     "img", "table", "thead", "tbody", "tr", "th", "td",
-    "b", "i", "strike",
+    "b", "i", "strike", "font",
 ]);
 /** Checks if an attribute key is safe to set on a DOM element. */
 function isSafeAttribute(key) {
@@ -1016,6 +1055,7 @@ function domToContent(element) {
             "sub",
             "sup",
             "code",
+            "font",
         ].includes(tagName)) {
             const children = [];
             Array.from(el.childNodes).forEach((child) => {
@@ -1105,6 +1145,46 @@ function domToContent(element) {
                     });
                 }
             }
+            // <font> from execCommand('foreColor') or pasted HTML
+            if (tagName === "font") {
+                const fontAttrs = {};
+                const colorAttr = el.getAttribute("color");
+                if (colorAttr)
+                    fontAttrs.color = colorAttr;
+                const sizeAttr = el.getAttribute("size");
+                if (sizeAttr) {
+                    const sizeMap = {
+                        "1": "10px", "2": "13px", "3": "16px", "4": "18px",
+                        "5": "24px", "6": "32px", "7": "48px",
+                    };
+                    const mapped = sizeMap[sizeAttr];
+                    if (mapped)
+                        fontAttrs.fontSize = mapped;
+                }
+                const style = el.getAttribute("style") || "";
+                if (style) {
+                    style.split(";").forEach((rule) => {
+                        const [key, value] = rule
+                            .split(":")
+                            .map((s) => s.trim());
+                        if (key && value) {
+                            if (key === "font-size")
+                                fontAttrs.fontSize = value;
+                            else if (key === "color")
+                                fontAttrs.color = value;
+                            else if (key === "background-color")
+                                fontAttrs.backgroundColor = value;
+                        }
+                    });
+                }
+                return {
+                    type: "span",
+                    children: children.length > 0 ? children : undefined,
+                    attributes: Object.keys(fontAttrs).length > 0
+                        ? fontAttrs
+                        : undefined,
+                };
+            }
             // Map tag names to semantic types
             const type = tagName === "strong" || tagName === "b"
                 ? "bold"
@@ -2123,6 +2203,61 @@ function useEditorEvents({ editorRef, historyRef, isUpdatingRef, mountedRef, not
                 }, 0);
                 return;
             }
+            // Exit code block: Enter on empty last line escapes <pre>
+            if (e.key === "Enter" &&
+                !e.shiftKey &&
+                !isModifierPressed) {
+                const sel = window.getSelection();
+                if (sel && sel.rangeCount > 0 && sel.isCollapsed) {
+                    const range = sel.getRangeAt(0);
+                    const node = range.startContainer;
+                    const pre = (node instanceof HTMLElement
+                        ? node
+                        : node.parentElement)?.closest("pre");
+                    if (pre && pre.lastChild) {
+                        const lastChild = pre.lastChild;
+                        const cursorInPre = node === pre &&
+                            range.startOffset === pre.childNodes.length;
+                        const cursorAtEndOfLastText = node.nodeType === Node.TEXT_NODE &&
+                            node === lastChild &&
+                            range.startOffset ===
+                                (node.textContent?.length ?? 0);
+                        const isAtEnd = cursorInPre || cursorAtEndOfLastText;
+                        const lastIsBr = lastChild instanceof HTMLElement &&
+                            lastChild.tagName === "BR";
+                        const endsWithNewline = node.nodeType === Node.TEXT_NODE &&
+                            (node.textContent || "").endsWith("\n");
+                        if (isAtEnd && (lastIsBr || endsWithNewline)) {
+                            e.preventDefault();
+                            if (lastIsBr) {
+                                pre.removeChild(lastChild);
+                            }
+                            else if (node.nodeType === Node.TEXT_NODE &&
+                                node.textContent) {
+                                node.textContent =
+                                    node.textContent.replace(/\n$/, "");
+                            }
+                            if (!pre.textContent &&
+                                !pre.querySelector("br")) {
+                                pre.appendChild(document.createElement("br"));
+                            }
+                            const p = document.createElement("p");
+                            p.appendChild(document.createElement("br"));
+                            pre.parentNode?.insertBefore(p, pre.nextSibling);
+                            const newRange = document.createRange();
+                            newRange.setStart(p, 0);
+                            newRange.collapse(true);
+                            sel.removeAllRanges();
+                            sel.addRange(newRange);
+                            const content = domToContent(editor);
+                            const serializedSel = serializeSelection(editor);
+                            historyRef.current.push(content, serializedSel);
+                            notifyChange(content);
+                            return;
+                        }
+                    }
+                }
+            }
             // Auto-link: convert URLs to <a> tags on space/enter
             if (!isModifierPressed && (e.key === " " || e.key === "Enter")) {
                 handleAutoLink(editor, e);
@@ -4017,7 +4152,7 @@ function createAdvancedLinkPlugin(options = {}) {
 /** Pre-built link plugin with just target enabled (no custom fields). */
 const advancedLinkPlugin = createAdvancedLinkPlugin();
 
-const InsertTableDialog = ({ onInsert, onClose, }) => {
+const InsertTableDialog = ({ onInsert, onClose, anchorRect, }) => {
     const [rows, setRows] = React.useState(3);
     const [cols, setCols] = React.useState(3);
     const dialogRef = React.useRef(null);
@@ -4031,7 +4166,25 @@ const InsertTableDialog = ({ onInsert, onClose, }) => {
         document.addEventListener("mousedown", handler);
         return () => document.removeEventListener("mousedown", handler);
     }, [onClose]);
-    return (jsxRuntime.jsxs("div", { className: "rte-table-insert-dialog", ref: dialogRef, children: [jsxRuntime.jsx("div", { className: "rte-table-insert-title", children: "Insert Table" }), jsxRuntime.jsxs("div", { className: "rte-table-insert-fields", children: [jsxRuntime.jsxs("label", { className: "rte-table-insert-label", children: [jsxRuntime.jsx("span", { children: "Zeilen" }), jsxRuntime.jsx("input", { type: "number", min: 1, max: 20, value: rows, onChange: (e) => setRows(Math.max(1, Math.min(20, parseInt(e.target.value) || 1))), className: "rte-table-insert-input" })] }), jsxRuntime.jsxs("label", { className: "rte-table-insert-label", children: [jsxRuntime.jsx("span", { children: "Spalten" }), jsxRuntime.jsx("input", { type: "number", min: 1, max: 10, value: cols, onChange: (e) => setCols(Math.max(1, Math.min(10, parseInt(e.target.value) || 1))), className: "rte-table-insert-input" })] })] }), jsxRuntime.jsx("button", { type: "button", className: "rte-table-insert-btn", onClick: () => onInsert(rows, cols), children: "Insert" })] }));
+    const style = { position: "fixed" };
+    if (anchorRect) {
+        const pad = 8;
+        let top = anchorRect.bottom + 4;
+        let left = anchorRect.left;
+        if (left + 220 > window.innerWidth - pad) {
+            left = window.innerWidth - 220 - pad;
+        }
+        if (left < pad)
+            left = pad;
+        if (top + 200 > window.innerHeight - pad) {
+            top = anchorRect.top - 200 - 4;
+        }
+        if (top < pad)
+            top = pad;
+        style.top = top;
+        style.left = left;
+    }
+    return reactDom.createPortal(jsxRuntime.jsxs("div", { className: "rte-table-insert-dialog", ref: dialogRef, style: style, onMouseDown: (e) => e.preventDefault(), children: [jsxRuntime.jsx("div", { className: "rte-table-insert-title", children: "Insert Table" }), jsxRuntime.jsxs("div", { className: "rte-table-insert-fields", children: [jsxRuntime.jsxs("label", { className: "rte-table-insert-label", children: [jsxRuntime.jsx("span", { children: "Zeilen" }), jsxRuntime.jsx("input", { type: "number", min: 1, max: 20, value: rows, onChange: (e) => setRows(Math.max(1, Math.min(20, parseInt(e.target.value) || 1))), className: "rte-table-insert-input", onMouseDown: (e) => e.stopPropagation() })] }), jsxRuntime.jsxs("label", { className: "rte-table-insert-label", children: [jsxRuntime.jsx("span", { children: "Spalten" }), jsxRuntime.jsx("input", { type: "number", min: 1, max: 10, value: cols, onChange: (e) => setCols(Math.max(1, Math.min(10, parseInt(e.target.value) || 1))), className: "rte-table-insert-input", onMouseDown: (e) => e.stopPropagation() })] })] }), jsxRuntime.jsx("button", { type: "button", className: "rte-table-insert-btn", onClick: () => onInsert(rows, cols), children: "Insert" })] }), document.body);
 };
 const TableContextMenu = ({ x, y, onClose, }) => {
     const ref = React.useRef(null);
@@ -4052,6 +4205,14 @@ const TableContextMenu = ({ x, y, onClose, }) => {
 };
 const TableToolbarButton = (props) => {
     const [showDialog, setShowDialog] = React.useState(false);
+    const btnRef = React.useRef(null);
+    const [anchorRect, setAnchorRect] = React.useState(null);
+    const handleToggle = React.useCallback(() => {
+        if (!showDialog && btnRef.current) {
+            setAnchorRect(btnRef.current.getBoundingClientRect());
+        }
+        setShowDialog((v) => !v);
+    }, [showDialog]);
     const handleInsert = React.useCallback((rows, cols) => {
         setShowDialog(false);
         if (!props.editorAPI)
@@ -4060,7 +4221,6 @@ const TableToolbarButton = (props) => {
         if (!sel || sel.rangeCount === 0)
             return;
         const range = sel.getRangeAt(0);
-        // Find the editor's contentEditable root
         const container = range.commonAncestorContainer;
         const editorEl = container.nodeType === Node.TEXT_NODE
             ? container.parentElement
@@ -4069,7 +4229,6 @@ const TableToolbarButton = (props) => {
         if (!editorRoot)
             return;
         const table = createTable(rows, cols);
-        // Insert after the current block element
         let block = editorEl;
         while (block &&
             block !== editorRoot &&
@@ -4082,11 +4241,9 @@ const TableToolbarButton = (props) => {
         else {
             editorRoot.appendChild(table);
         }
-        // Add a paragraph after the table so the user can continue typing
         const p = document.createElement("p");
         p.innerHTML = "<br>";
         table.parentNode?.insertBefore(p, table.nextSibling);
-        // Focus the first cell
         const firstCell = table.querySelector("td, th");
         if (firstCell) {
             const newRange = document.createRange();
@@ -4096,7 +4253,7 @@ const TableToolbarButton = (props) => {
             sel.addRange(newRange);
         }
     }, [props.editorAPI]);
-    return (jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [jsxRuntime.jsx("button", { type: "button", onClick: () => setShowDialog(!showDialog), disabled: props.disabled, className: `rte-toolbar-button ${props.isActive ? "rte-toolbar-button-active" : ""}`, title: "Table", "aria-label": "Table", children: jsxRuntime.jsx(IconWrapper, { icon: "mdi:table", width: 18, height: 18 }) }), showDialog && (jsxRuntime.jsx(InsertTableDialog, { onInsert: handleInsert, onClose: () => setShowDialog(false) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { ref: btnRef, type: "button", onClick: handleToggle, disabled: props.disabled, className: `rte-toolbar-button ${props.isActive ? "rte-toolbar-button-active" : ""}`, title: "Table", "aria-label": "Table", children: jsxRuntime.jsx(IconWrapper, { icon: "mdi:table", width: 18, height: 18 }) }), showDialog && (jsxRuntime.jsx(InsertTableDialog, { onInsert: handleInsert, onClose: () => setShowDialog(false), anchorRect: anchorRect }))] }));
 };
 /* ══════════════════════════════════════════════════════════════════════════
    Table Plugin export
@@ -4306,10 +4463,10 @@ const FloatingToolbar = ({ plugins, editorAPI, editorElement, }) => {
         }
         // Center horizontally on the selection, clamp to viewport
         let left = rect.left + rect.width / 2 - toolbarW / 2;
-        if (left < pad)
-            left = pad;
         if (left + toolbarW > vw - pad)
             left = vw - toolbarW - pad;
+        if (left < pad)
+            left = pad;
         setPos({ top, left, visible: true });
     }, [editorElement]);
     // Debounce via requestAnimationFrame for smooth repositioning
@@ -4354,16 +4511,14 @@ const FloatingToolbar = ({ plugins, editorAPI, editorElement, }) => {
         requestAnimationFrame(() => scheduleUpdate());
     }, [editorAPI, scheduleUpdate]);
     const isHidden = !pos.visible || leftPlugins.length === 0;
-    return (jsxRuntime.jsx("div", { ref: toolbarRef, className: "rte-floating-toolbar", style: {
+    return reactDom.createPortal(jsxRuntime.jsx("div", { ref: toolbarRef, className: "rte-floating-toolbar", style: {
             position: "fixed",
             top: pos.top,
             left: pos.left,
             visibility: isHidden ? "hidden" : "visible",
             opacity: isHidden ? 0 : 1,
             pointerEvents: isHidden ? "none" : "auto",
-        }, 
-        // Prevent selection loss when clicking toolbar buttons
-        onMouseDown: (e) => e.preventDefault(), children: jsxRuntime.jsxs("div", { className: "rte-floating-toolbar-content", children: [jsxRuntime.jsx("div", { className: "rte-toolbar-left", children: leftPlugins.map((plugin) => {
+        }, onMouseDown: (e) => e.preventDefault(), children: jsxRuntime.jsxs("div", { className: "rte-floating-toolbar-content", children: [jsxRuntime.jsx("div", { className: "rte-toolbar-left", children: leftPlugins.map((plugin) => {
                         if (!plugin.renderButton)
                             return null;
                         const isActive = plugin.isActive
@@ -4397,7 +4552,7 @@ const FloatingToolbar = ({ plugins, editorAPI, editorElement, }) => {
                                 disabled: !canExecute,
                                 editorAPI,
                             });
-                        })()] }))] }) }));
+                        })()] }))] }) }), document.body);
 };
 
 /**