@overlap/rte 1.0.8 → 1.0.9

package/dist/components/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,UAAU,aAAa;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,cAAc,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC3H,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAsJ5C,CAAC"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,UAAU,aAAa;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,cAAc,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC3H,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwM5C,CAAC"}

package/dist/components/FloatingToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingToolbar.d.ts","sourceRoot":"","sources":["../../src/components/FloatingToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAAe,SAAS,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAE1D,UAAU,oBAAoB;IAC1B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,EAAE,SAAS,CAAC;IACrB,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;CACrC;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA0L1D,CAAC"}
+{"version":3,"file":"FloatingToolbar.d.ts","sourceRoot":"","sources":["../../src/components/FloatingToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,EAAe,SAAS,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAE1D,UAAU,oBAAoB;IAC1B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,EAAE,SAAS,CAAC;IACrB,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;CACrC;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA0L1D,CAAC"}

package/dist/hooks/useEditorEvents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEditorEvents.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditorEvents.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGzC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAOlD,UAAU,sBAAsB;IAC5B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,UAAU,EAAE;QAAE,OAAO,EAAE,cAAc,CAAA;KAAE,CAAC;IACxC,aAAa,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;IACpC,UAAU,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;IACjC,YAAY,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC/C,qBAAqB,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,OAAO,CAAC;IACrD,mBAAmB,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,OAAO,CAAC;IACnD,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC5B,SAAS,EACT,UAAU,EACV,aAAa,EACb,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,mBAAmB,EACnB,IAAI,EACJ,IAAI,GACP,EAAE,sBAAsB,QAoOxB"}
+{"version":3,"file":"useEditorEvents.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditorEvents.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGzC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAOlD,UAAU,sBAAsB;IAC5B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,UAAU,EAAE;QAAE,OAAO,EAAE,cAAc,CAAA;KAAE,CAAC;IACxC,aAAa,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;IACpC,UAAU,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;IACjC,YAAY,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC/C,qBAAqB,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,OAAO,CAAC;IACrD,mBAAmB,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,OAAO,CAAC;IACnD,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC5B,SAAS,EACT,UAAU,EACV,aAAa,EACb,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,mBAAmB,EACnB,IAAI,EACJ,IAAI,GACP,EAAE,sBAAsB,QA0TxB"}

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 
 const BoldIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" }) }));
@@ -83,10 +83,45 @@ const Icon = ({ icon, width = 18, height = 18, className }) => {
 const Dropdown = ({ icon, label, options, onSelect, currentValue, disabled, showCustomColorInput, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [customColor, setCustomColor] = useState("#000000");
+    const [menuPos, setMenuPos] = useState({ top: 0, left: 0 });
     const dropdownRef = useRef(null);
+    const menuRef = useRef(null);
+    const buttonRef = useRef(null);
+    const updateMenuPosition = 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 });
+    }, []);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        updateMenuPosition();
+        requestAnimationFrame(updateMenuPosition);
+    }, [isOpen, updateMenuPosition]);
     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);
             }
         };
@@ -102,7 +137,6 @@ const Dropdown = ({ icon, label, options, onSelect, currentValue, disabled, show
         setIsOpen(false);
     };
     const currentOption = options.find(opt => opt.value === currentValue);
-    // Close on Escape key
     useEffect(() => {
         if (!isOpen)
             return;
@@ -115,21 +149,26 @@ const Dropdown = ({ icon, label, options, onSelect, currentValue, disabled, show
         document.addEventListener("keydown", handleKeyDown);
         return () => document.removeEventListener("keydown", handleKeyDown);
     }, [isOpen]);
-    return (jsxs("div", { className: "rte-dropdown", ref: dropdownRef, onMouseDown: (e) => e.preventDefault(), children: [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: [jsx(Icon, { icon: icon, width: 18, height: 18 }), currentOption && (jsx("span", { className: "rte-dropdown-value", children: currentOption.label }))] }), isOpen && (jsxs("div", { className: "rte-dropdown-menu", role: "listbox", "aria-label": label, children: [options.map((option) => (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 && (jsx("span", { className: `rte-dropdown-color-preview ${currentValue === option.value ? 'active' : ''}`, style: { backgroundColor: option.color } })), option.preview && !option.headingPreview && (jsx("span", { className: "rte-dropdown-fontsize-preview", style: { fontSize: `${option.preview}px` }, children: "Aa" })), option.headingPreview && (jsx("span", { className: `rte-dropdown-heading-preview ${option.headingPreview}`, children: option.headingPreview === 'p' ? 'Normal' : option.headingPreview.toUpperCase() })), option.icon && jsx(Icon, { icon: option.icon, width: 16, height: 16 }), jsx("span", { style: { flex: 1, fontWeight: currentValue === option.value ? 600 : 400 }, children: option.label })] }, option.value))), showCustomColorInput && (jsxs("div", { className: "rte-color-custom-input", onMouseDown: (e) => e.stopPropagation(), children: [jsx("input", { type: "color", value: customColor, onChange: (e) => setCustomColor(e.target.value), title: "Pick a color" }), 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);
-                                        }
-                                    }
-                                } }), 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 ? (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) => (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 && (jsx("span", { className: `rte-dropdown-color-preview ${currentValue === option.value ? 'active' : ''}`, style: { backgroundColor: option.color } })), option.preview && !option.headingPreview && (jsx("span", { className: "rte-dropdown-fontsize-preview", style: { fontSize: `${option.preview}px` }, children: "Aa" })), option.headingPreview && (jsx("span", { className: `rte-dropdown-heading-preview ${option.headingPreview}`, children: option.headingPreview === 'p' ? 'Normal' : option.headingPreview.toUpperCase() })), option.icon && jsx(Icon, { icon: option.icon, width: 16, height: 16 }), jsx("span", { style: { flex: 1, fontWeight: currentValue === option.value ? 600 : 400 }, children: option.label })] }, option.value))), showCustomColorInput && (jsxs("div", { className: "rte-color-custom-input", onMouseDown: (e) => e.stopPropagation(), children: [jsx("input", { type: "color", value: customColor, onChange: (e) => setCustomColor(e.target.value), title: "Pick a color" }), 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);
+                                }
+                            }
+                        } }), 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 (jsxs("div", { className: "rte-dropdown", ref: dropdownRef, onMouseDown: (e) => e.preventDefault(), children: [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: [jsx(Icon, { icon: icon, width: 18, height: 18 }), currentOption && (jsx("span", { className: "rte-dropdown-value", children: currentOption.label }))] }), menuContent && createPortal(menuContent, document.body)] }));
 };
 
 /**
@@ -804,7 +843,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) {
@@ -1012,6 +1051,7 @@ function domToContent(element) {
             "sub",
             "sup",
             "code",
+            "font",
         ].includes(tagName)) {
             const children = [];
             Array.from(el.childNodes).forEach((child) => {
@@ -1101,6 +1141,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"
@@ -2119,6 +2199,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);
@@ -4013,7 +4148,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] = useState(3);
     const [cols, setCols] = useState(3);
     const dialogRef = useRef(null);
@@ -4027,7 +4162,25 @@ const InsertTableDialog = ({ onInsert, onClose, }) => {
         document.addEventListener("mousedown", handler);
         return () => document.removeEventListener("mousedown", handler);
     }, [onClose]);
-    return (jsxs("div", { className: "rte-table-insert-dialog", ref: dialogRef, children: [jsx("div", { className: "rte-table-insert-title", children: "Insert Table" }), jsxs("div", { className: "rte-table-insert-fields", children: [jsxs("label", { className: "rte-table-insert-label", children: [jsx("span", { children: "Zeilen" }), 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" })] }), jsxs("label", { className: "rte-table-insert-label", children: [jsx("span", { children: "Spalten" }), 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" })] })] }), 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 createPortal(jsxs("div", { className: "rte-table-insert-dialog", ref: dialogRef, style: style, onMouseDown: (e) => e.preventDefault(), children: [jsx("div", { className: "rte-table-insert-title", children: "Insert Table" }), jsxs("div", { className: "rte-table-insert-fields", children: [jsxs("label", { className: "rte-table-insert-label", children: [jsx("span", { children: "Zeilen" }), 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() })] }), jsxs("label", { className: "rte-table-insert-label", children: [jsx("span", { children: "Spalten" }), 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() })] })] }), jsx("button", { type: "button", className: "rte-table-insert-btn", onClick: () => onInsert(rows, cols), children: "Insert" })] }), document.body);
 };
 const TableContextMenu = ({ x, y, onClose, }) => {
     const ref = useRef(null);
@@ -4048,6 +4201,14 @@ const TableContextMenu = ({ x, y, onClose, }) => {
 };
 const TableToolbarButton = (props) => {
     const [showDialog, setShowDialog] = useState(false);
+    const btnRef = useRef(null);
+    const [anchorRect, setAnchorRect] = useState(null);
+    const handleToggle = useCallback(() => {
+        if (!showDialog && btnRef.current) {
+            setAnchorRect(btnRef.current.getBoundingClientRect());
+        }
+        setShowDialog((v) => !v);
+    }, [showDialog]);
     const handleInsert = useCallback((rows, cols) => {
         setShowDialog(false);
         if (!props.editorAPI)
@@ -4056,7 +4217,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
@@ -4065,7 +4225,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 &&
@@ -4078,11 +4237,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();
@@ -4092,7 +4249,7 @@ const TableToolbarButton = (props) => {
             sel.addRange(newRange);
         }
     }, [props.editorAPI]);
-    return (jsxs("div", { style: { position: "relative" }, children: [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: jsx(IconWrapper, { icon: "mdi:table", width: 18, height: 18 }) }), showDialog && (jsx(InsertTableDialog, { onInsert: handleInsert, onClose: () => setShowDialog(false) }))] }));
+    return (jsxs(Fragment, { children: [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: jsx(IconWrapper, { icon: "mdi:table", width: 18, height: 18 }) }), showDialog && (jsx(InsertTableDialog, { onInsert: handleInsert, onClose: () => setShowDialog(false), anchorRect: anchorRect }))] }));
 };
 /* ══════════════════════════════════════════════════════════════════════════
    Table Plugin export
@@ -4302,10 +4459,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
@@ -4350,16 +4507,14 @@ const FloatingToolbar = ({ plugins, editorAPI, editorElement, }) => {
         requestAnimationFrame(() => scheduleUpdate());
     }, [editorAPI, scheduleUpdate]);
     const isHidden = !pos.visible || leftPlugins.length === 0;
-    return (jsx("div", { ref: toolbarRef, className: "rte-floating-toolbar", style: {
+    return createPortal(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: jsxs("div", { className: "rte-floating-toolbar-content", children: [jsx("div", { className: "rte-toolbar-left", children: leftPlugins.map((plugin) => {
+        }, onMouseDown: (e) => e.preventDefault(), children: jsxs("div", { className: "rte-floating-toolbar-content", children: [jsx("div", { className: "rte-toolbar-left", children: leftPlugins.map((plugin) => {
                         if (!plugin.renderButton)
                             return null;
                         const isActive = plugin.isActive
@@ -4393,7 +4548,7 @@ const FloatingToolbar = ({ plugins, editorAPI, editorElement, }) => {
                                 disabled: !canExecute,
                                 editorAPI,
                             });
-                        })()] }))] }) }));
+                        })()] }))] }) }), document.body);
 };
 
 /**