@overlap/rte 0.1.5 → 0.1.7

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 
 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" }) }));
 const ItalicIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }) }));
@@ -12,8 +12,9 @@ const QuoteIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { wid
 const BulletListIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" }) }));
 const NumberedListIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 11.9V11H2zm6-5v2h14V6H8zm0 14h14v-2H8v2zm0-6h14v-2H8v2z" }) }));
 const TextColorIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M2 20h20v4H2v-4zm3.49-3h2.42l1.27-3.58h5.64L16.09 17h2.42L13.25 3h-2.5L5.49 17zm4.22-5.61l2.03-5.79h.12l2.03 5.79H9.71z" }) }));
-const BackgroundColorIcon = ({ width = 18, height = 18, className, }) => (jsxs("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: [jsx("path", { d: "M17.5 4.5c-1.95 0-4.05.4-5.5 1.5-1.45-1.1-3.55-1.5-5.5-1.5-1.45 0-2.99.22-4.28.79C1.49 5.62 1 6.33 1 7.14v11.28c0 1.3 1.22 2.26 2.48 1.94.98-.25 2.02-.36 3.02-.36 1.56 0 3.22.26 4.56.92.6.3 1.28.3 1.88 0 1.34-.67 3-.92 4.56-.92 1 0 2.04.11 3.02.36C22.78 20.68 24 19.72 24 18.42V7.14c0-.81-.49-1.52-1.22-1.85-1.29-.57-2.83-.79-4.28-.79zM21 17.23c0 .63-.58 1.09-1.2.98-.75-.14-1.53-.2-2.3-.2-1.7 0-4.15.65-5.5 1.5V8c1.35-.85 3.8-1.5 5.5-1.5.77 0 1.55.06 2.3.2.62.11 1.2.58 1.2 1.18v9.35z" }), jsx("rect", { x: "4", y: "13", width: "16", height: "6", fill: "currentColor", opacity: "0.5" })] }));
+const BackgroundColorIcon = ({ width = 18, height = 18, className, }) => (jsxs("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [jsx("path", { d: "M14.5 2.5L21.5 9.5L13 18L6 11L14.5 2.5Z" }), jsx("path", { d: "M6 11L13 18" }), jsx("rect", { x: "2", y: "16", width: "8", height: "6", fill: "currentColor", opacity: "0.6", rx: "1" }), jsx("path", { d: "M21.5 9.5L19 7" })] }));
 const HeadingIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M5 4v3h5.5v12h3V7H19V4H5z" }) }));
+const FormatIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M3 4h18v2H3V4zm0 4h12v2H3V8zm0 4h18v2H3v-2zm0 4h12v2H3v-2z" }) }));
 const FontSizeIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M9 4v3h5v12h3V7h5V4H9zm-6 8h3v8h3v-8h3V10H3z" }) }));
 const ImageIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }) }));
 const CloseIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }));
@@ -21,6 +22,16 @@ const LoadingIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { w
 const UploadIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z" }) }));
 const IndentIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M3 21h18v-2H3v2zM3 8l4 4-4 4V8zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }) }));
 const OutdentIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M3 21h18v-2H3v2zM11 8l4 4-4 4V8zM3 3v2h18V3H3zm0 4h10v2H3V7zm0 4h10v2H3v-2zm0 4h18v2H3v-2z" }) }));
+const CheckboxIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M19 3H5c-1.11 0-2 .89-2 2v14c0 1.11.89 2 2 2h14c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }));
+const StrikethroughIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z" }) }));
+const SubscriptIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M22 18h-2v1h3v1h-4v-2.5c0-.83.67-1.5 1.5-1.5h1.5v-1h-3v-1h2.5c.83 0 1.5.67 1.5 1.5v1c0 .83-.67 1.5-1.5 1.5zM5.88 18h2.66l3.4-5.42h.12l3.4 5.42h2.66l-4.65-7.27L17.81 4h-2.68l-3.07 4.99h-.12L8.87 4H6.19l4.32 6.73L5.88 18z" }) }));
+const SuperscriptIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M22 7h-2v1h3v1h-4V6.5c0-.83.67-1.5 1.5-1.5h1.5V4h-3V3h2.5c.83 0 1.5.67 1.5 1.5v1c0 .83-.67 1.5-1.5 1.5zM5.88 20h2.66l3.4-5.42h.12l3.4 5.42h2.66l-4.65-7.27L17.81 6h-2.68l-3.07 4.99h-.12L8.87 6H6.19l4.32 6.73L5.88 20z" }) }));
+const CodeIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" }) }));
+const AlignLeftIcon = ({ 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 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" }) }));
+const AlignCenterIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }) }));
+const AlignRightIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }) }));
+const AlignJustifyIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z" }) }));
+const TableIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M3 3v18h18V3H3zm8 16H5v-6h6v6zm0-8H5V5h6v6zm8 8h-6v-6h6v6zm0-8h-6V5h6v6z" }) }));
 const iconMap = {
     "mdi:format-bold": BoldIcon,
     "mdi:format-italic": ItalicIcon,
@@ -35,6 +46,7 @@ const iconMap = {
     "mdi:format-color-text": TextColorIcon,
     "mdi:format-color-fill": BackgroundColorIcon,
     "mdi:format-header-1": HeadingIcon,
+    "mdi:format-paragraph": FormatIcon,
     "mdi:format-size": FontSizeIcon,
     "mdi:image": ImageIcon,
     "mdi:close": CloseIcon,
@@ -42,6 +54,16 @@ const iconMap = {
     "mdi:upload": UploadIcon,
     "mdi:format-indent-increase": IndentIcon,
     "mdi:format-indent-decrease": OutdentIcon,
+    "mdi:checkbox-marked-outline": CheckboxIcon,
+    "mdi:format-strikethrough": StrikethroughIcon,
+    "mdi:format-subscript": SubscriptIcon,
+    "mdi:format-superscript": SuperscriptIcon,
+    "mdi:code-tags": CodeIcon,
+    "mdi:format-align-left": AlignLeftIcon,
+    "mdi:format-align-center": AlignCenterIcon,
+    "mdi:format-align-right": AlignRightIcon,
+    "mdi:format-align-justify": AlignJustifyIcon,
+    "mdi:table": TableIcon,
 };
 const Icon = ({ icon, width = 18, height = 18, className }) => {
     const IconComponent = iconMap[icon];
@@ -135,7 +157,91 @@ function createCommandPlugin(name, command, icon, label) {
     };
 }
 
-const defaultHeadings$2 = ["h1", "h2", "h3"];
+/**
+ * Pure DOM utility functions.
+ * No React dependencies - only native browser APIs.
+ */
+/**
+ * Checks if a UL element is a checkbox list.
+ * Detects: own format, Lexical format, and GitHub format.
+ */
+function isCheckboxList(element) {
+    if (element.tagName !== "UL")
+        return false;
+    // Own format
+    if (element.classList.contains("rte-checkbox-list"))
+        return true;
+    // Lexical format (attribute)
+    if (element.getAttribute("__lexicallisttype") === "check")
+        return true;
+    // Lexical theme class (any class containing "checklist")
+    const hasChecklistClass = Array.from(element.classList).some((cls) => cls.toLowerCase().includes("checklist"));
+    if (hasChecklistClass)
+        return true;
+    // GitHub format
+    if (element.classList.contains("contains-task-list"))
+        return true;
+    return false;
+}
+/**
+ * Finds the closest checkbox list ancestor from an element.
+ * Works with all supported formats (own, Lexical, GitHub).
+ */
+function findClosestCheckboxList(element) {
+    let current = element;
+    while (current) {
+        if (current.tagName === "UL" && isCheckboxList(current)) {
+            return current;
+        }
+        current = current.parentElement;
+    }
+    return null;
+}
+/**
+ * Checks if a list item has a nested list as its first child (not a leaf item).
+ */
+function isNestedListItem(li) {
+    const firstChild = li.firstChild;
+    return (firstChild instanceof HTMLElement &&
+        (firstChild.tagName === "UL" || firstChild.tagName === "OL"));
+}
+/**
+ * Finds the closest list item from a node.
+ */
+function findClosestListItem(node) {
+    const element = node.nodeType === Node.TEXT_NODE
+        ? node.parentElement
+        : node;
+    return element?.closest("li") || null;
+}
+/**
+ * Sets cursor position in a text node after an async DOM update.
+ */
+function setCursorInTextNode(textNode, position, editor) {
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+            try {
+                const range = document.createRange();
+                const maxPos = textNode.textContent?.length || 0;
+                const safePos = Math.min(Math.max(0, position), maxPos);
+                range.setStart(textNode, safePos);
+                range.collapse(true);
+                const selection = window.getSelection();
+                if (selection) {
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                    if (editor)
+                        editor.focus();
+                }
+            }
+            catch (_) {
+                // Silently fail - cursor positioning is best-effort
+            }
+        });
+    });
+}
+
+const defaultHeadings$2 = ["h1", "h2", "h3", "h4", "h5", "h6"];
 const headingLabels$1 = {
     h1: "Überschrift 1",
     h2: "Überschrift 2",
@@ -145,8 +251,8 @@ const headingLabels$1 = {
     h6: "Überschrift 6",
 };
 /**
- * Erstellt ein Block-Format-Plugin, das Headlines, Listen und Quote in einem Dropdown kombiniert
- * @param headings - Array von Heading-Levels (z.B. ["h1", "h2", "h3"])
+ * Creates a Block Format plugin that combines headings, lists, and quote in a dropdown.
+ * @param headings - Array of heading levels (e.g. ["h1", "h2", "h3"])
  */
 function createBlockFormatPlugin(headings = defaultHeadings$2) {
     const options = [
@@ -166,16 +272,64 @@ function createBlockFormatPlugin(headings = defaultHeadings$2) {
             label: "Nummerierte Liste",
             icon: "mdi:format-list-numbered",
         },
-        { value: "blockquote", label: "Zitat", icon: "mdi:format-quote-close" },
+        {
+            value: "checkbox-list",
+            label: "Checkbox-Liste",
+            icon: "mdi:checkbox-marked-outline",
+        },
+        {
+            value: "blockquote",
+            label: "Zitat",
+            icon: "mdi:format-quote-close",
+        },
     ];
+    /** Detects the current block format at the cursor position. */
+    function detectCurrentFormat(editor) {
+        const selection = editor.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return undefined;
+        const range = selection.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        const element = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        if (!element)
+            return undefined;
+        const tagName = element.tagName.toLowerCase();
+        if (headings.includes(tagName))
+            return tagName;
+        if (element.closest("blockquote"))
+            return "blockquote";
+        if (findClosestCheckboxList(element))
+            return "checkbox-list";
+        if (element.closest("ul"))
+            return "ul";
+        if (element.closest("ol"))
+            return "ol";
+        if (tagName === "p")
+            return "p";
+        return undefined;
+    }
     return {
         name: "blockFormat",
         type: "block",
         renderButton: (props) => {
-            // Aktuelles Format bestimmen
             const editor = props.editorAPI;
+            const onSelect = props.onSelect;
             let currentValue = props.currentValue;
             if (!currentValue && editor) {
+                currentValue = detectCurrentFormat(editor);
+            }
+            return (jsx(Dropdown, { icon: "mdi:format-paragraph", label: "Format", options: options, onSelect: (value) => {
+                    if (onSelect)
+                        onSelect(value);
+                }, currentValue: currentValue, disabled: props.disabled }));
+        },
+        getCurrentValue: (editor) => detectCurrentFormat(editor),
+        execute: (editor, value) => {
+            if (!value)
+                return;
+            if (value === "checkbox-list") {
                 const selection = editor.getSelection();
                 if (selection && selection.rangeCount > 0) {
                     const range = selection.getRangeAt(0);
@@ -183,74 +337,26 @@ function createBlockFormatPlugin(headings = defaultHeadings$2) {
                     const element = container.nodeType === Node.TEXT_NODE
                         ? container.parentElement
                         : container;
-                    if (element) {
-                        const tagName = element.tagName.toLowerCase();
-                        // Prüfe auf Heading
-                        if (headings.includes(tagName)) {
-                            currentValue = tagName;
-                        }
-                        // Prüfe auf Blockquote
-                        else if (element.closest("blockquote")) {
-                            currentValue = "blockquote";
-                        }
-                        // Prüfe auf Liste
-                        else if (element.closest("ul")) {
-                            currentValue = "ul";
-                        }
-                        else if (element.closest("ol")) {
-                            currentValue = "ol";
-                        }
-                        // Prüfe auf Paragraph
-                        else if (tagName === "p") {
-                            currentValue = "p";
-                        }
+                    if (!element)
+                        return;
+                    const checkboxList = findClosestCheckboxList(element);
+                    if (checkboxList) {
+                        // Remove checkbox list: convert to normal list
+                        checkboxList.classList.remove("rte-checkbox-list");
+                        checkboxList
+                            .querySelectorAll("li[role='checkbox']")
+                            .forEach((li) => {
+                            li.removeAttribute("role");
+                            li.removeAttribute("tabIndex");
+                            li.removeAttribute("aria-checked");
+                        });
                     }
-                }
-            }
-            return (jsx(Dropdown, { icon: "mdi:format-header-1", label: "Format", options: options, onSelect: (value) => {
-                    // onSelect wird von der Toolbar übergeben und ruft handlePluginClick auf
-                    if (props.onSelect) {
-                        props.onSelect(value);
+                    else {
+                        editor.executeCommand("insertCheckboxList");
                     }
-                }, currentValue: currentValue, disabled: props.disabled }));
-        },
-        getCurrentValue: (editor) => {
-            const selection = editor.getSelection();
-            if (!selection || selection.rangeCount === 0)
-                return undefined;
-            const range = selection.getRangeAt(0);
-            const container = range.commonAncestorContainer;
-            const element = container.nodeType === Node.TEXT_NODE
-                ? container.parentElement
-                : container;
-            if (!element)
-                return undefined;
-            const tagName = element.tagName.toLowerCase();
-            // Prüfe auf Heading
-            if (headings.includes(tagName)) {
-                return tagName;
-            }
-            // Prüfe auf Blockquote
-            if (element.closest("blockquote")) {
-                return "blockquote";
-            }
-            // Prüfe auf Liste
-            if (element.closest("ul")) {
-                return "ul";
-            }
-            if (element.closest("ol")) {
-                return "ol";
-            }
-            // Prüfe auf Paragraph
-            if (tagName === "p") {
-                return "p";
+                }
             }
-            return undefined;
-        },
-        execute: (editor, value) => {
-            if (!value)
-                return;
-            if (value === "ul") {
+            else if (value === "ul") {
                 editor.executeCommand("insertUnorderedList");
             }
             else if (value === "ol") {
@@ -290,6 +396,7 @@ function createBlockFormatPlugin(headings = defaultHeadings$2) {
             const tagName = element.tagName.toLowerCase();
             return (headings.includes(tagName) ||
                 element.closest("blockquote") !== null ||
+                findClosestCheckboxList(element) !== null ||
                 element.closest("ul") !== null ||
                 element.closest("ol") !== null);
         },
@@ -313,13 +420,69 @@ const clearFormattingPlugin = {
     },
 };
 
-const defaultHeadings$1 = ["h1", "h2", "h3"];
+const defaultHeadings$1 = ["h1", "h2", "h3", "h4", "h5", "h6"];
 /**
  * Standard-Plugins
  */
 const boldPlugin = createInlinePlugin("bold", "bold", "mdi:format-bold", "Fett");
 const italicPlugin = createInlinePlugin("italic", "italic", "mdi:format-italic", "Kursiv");
 const underlinePlugin = createInlinePlugin("underline", "underline", "mdi:format-underline", "Unterstrichen");
+const strikethroughPlugin = createInlinePlugin("strikethrough", "strikeThrough", "mdi:format-strikethrough", "Durchgestrichen");
+const subscriptPlugin = createInlinePlugin("subscript", "subscript", "mdi:format-subscript", "Tiefgestellt");
+const superscriptPlugin = createInlinePlugin("superscript", "superscript", "mdi:format-superscript", "Hochgestellt");
+const codeInlinePlugin = {
+    name: "codeInline",
+    type: "inline",
+    renderButton: (props) => (jsx("button", { type: "button", onClick: props.onClick, disabled: props.disabled, className: `rte-toolbar-button ${props.isActive ? "rte-toolbar-button-active" : ""}`, title: "Code", "aria-label": "Code", children: jsx(IconWrapper, { icon: "mdi:code-tags", width: 18, height: 18 }) })),
+    execute: (editor) => {
+        const selection = editor.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const range = selection.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        const element = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        const existingCode = element?.closest("code");
+        if (existingCode) {
+            // Unwrap code
+            const parent = existingCode.parentNode;
+            if (parent) {
+                while (existingCode.firstChild) {
+                    parent.insertBefore(existingCode.firstChild, existingCode);
+                }
+                parent.removeChild(existingCode);
+            }
+        }
+        else if (!range.collapsed) {
+            // Wrap in code
+            const code = document.createElement("code");
+            try {
+                range.surroundContents(code);
+            }
+            catch {
+                // If surroundContents fails (partial selection), use extractContents
+                const fragment = range.extractContents();
+                code.appendChild(fragment);
+                range.insertNode(code);
+            }
+        }
+    },
+    isActive: () => {
+        if (typeof document === "undefined")
+            return false;
+        const selection = document.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return false;
+        const range = selection.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        const element = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        return element?.closest("code") !== null;
+    },
+    canExecute: () => true,
+};
 const undoPlugin = createCommandPlugin("undo", "undo", "mdi:undo", "Rückgängig");
 const redoPlugin = createCommandPlugin("redo", "redo", "mdi:redo", "Wiederholen");
 /**
@@ -387,10 +550,10 @@ const defaultBlockFormatPlugin = createBlockFormatPlugin(defaultHeadings$1);
 const defaultPlugins = [
     undoPlugin,
     redoPlugin,
+    defaultBlockFormatPlugin,
     boldPlugin,
     italicPlugin,
     underlinePlugin,
-    defaultBlockFormatPlugin,
     clearFormattingPlugin,
     _indentPlugin,
     _outdentPlugin,
@@ -779,6 +942,138 @@ function createImagePlugin(onImageUpload) {
     };
 }
 
+/**
+ * Pure checkbox utility functions for checkbox lists.
+ * Supports detection of own format, Lexical format, and GitHub format.
+ * No React dependencies.
+ */
+/**
+ * Updates a list item's checkbox attributes (role, aria-checked, tabindex).
+ */
+function updateListItemChecked(li, checked) {
+    const parent = li.parentElement;
+    if (!parent ||
+        parent.tagName !== "UL" ||
+        !isCheckboxList(parent) ||
+        isNestedListItem(li)) {
+        li.removeAttribute("role");
+        li.removeAttribute("tabIndex");
+        li.removeAttribute("aria-checked");
+        return;
+    }
+    li.setAttribute("role", "checkbox");
+    li.setAttribute("tabIndex", "-1");
+    li.setAttribute("aria-checked", checked ? "true" : "false");
+}
+/**
+ * Toggles the checked state of a checkbox list item.
+ */
+function toggleListItemChecked(li) {
+    const currentChecked = li.getAttribute("aria-checked") === "true";
+    li.setAttribute("aria-checked", currentChecked ? "false" : "true");
+    if (li.getAttribute("role") !== "checkbox") {
+        li.setAttribute("role", "checkbox");
+        li.setAttribute("tabIndex", "-1");
+    }
+}
+/**
+ * Ensures all checkbox list items in the editor have correct attributes.
+ * Normalizes foreign formats (Lexical, GitHub) to internal format.
+ */
+function ensureAllCheckboxes(editor) {
+    const allULs = editor.querySelectorAll("ul");
+    allULs.forEach((ul) => {
+        if (!isCheckboxList(ul))
+            return;
+        // Normalize: ensure our class is always present
+        if (!ul.classList.contains("rte-checkbox-list")) {
+            ul.classList.add("rte-checkbox-list");
+        }
+        // Handle GitHub format: convert <input type="checkbox"> to aria-checked
+        ul.querySelectorAll(":scope > li").forEach((li) => {
+            const input = li.querySelector('input[type="checkbox"]');
+            if (input) {
+                const checked = input.checked || input.hasAttribute("checked");
+                if (li.getAttribute("aria-checked") === null) {
+                    li.setAttribute("aria-checked", checked ? "true" : "false");
+                }
+                input.remove();
+            }
+        });
+        const listItems = ul.querySelectorAll(":scope > li");
+        listItems.forEach((li) => {
+            const htmlLi = li;
+            if (!isNestedListItem(htmlLi)) {
+                const ariaChecked = htmlLi.getAttribute("aria-checked");
+                const checked = ariaChecked === "true";
+                updateListItemChecked(htmlLi, checked);
+            }
+            else {
+                htmlLi.removeAttribute("role");
+                htmlLi.removeAttribute("tabIndex");
+                htmlLi.removeAttribute("aria-checked");
+            }
+        });
+    });
+}
+/**
+ * Returns the currently focused checkbox list item, or null.
+ */
+function getActiveCheckListItem() {
+    const activeElement = document.activeElement;
+    if (activeElement &&
+        activeElement.tagName === "LI" &&
+        activeElement.parentElement &&
+        isCheckboxList(activeElement.parentElement)) {
+        return activeElement;
+    }
+    return null;
+}
+/**
+ * Finds the next or previous checkbox list item sibling.
+ */
+function findCheckListItemSibling(li, backward) {
+    let sibling = backward
+        ? li.previousElementSibling
+        : li.nextElementSibling;
+    let parent = li;
+    // Walk up the tree to find a non-null sibling
+    while (sibling == null && parent) {
+        const parentList = parent.parentElement;
+        if (parentList && parentList.tagName === "UL") {
+            const grandParent = parentList.parentElement;
+            if (grandParent && grandParent.tagName === "LI") {
+                parent = grandParent;
+                sibling = backward
+                    ? parent.previousElementSibling
+                    : parent.nextElementSibling;
+            }
+            else {
+                break;
+            }
+        }
+        else {
+            break;
+        }
+    }
+    // Walk down the tree to find the first non-nested list item
+    while (sibling && sibling.tagName === "LI") {
+        const child = backward
+            ? sibling.lastElementChild
+            : sibling.firstElementChild;
+        if (child &&
+            (child.tagName === "UL" || child.tagName === "OL")) {
+            sibling = backward
+                ? child.lastElementChild
+                : child.firstElementChild;
+        }
+        else {
+            return sibling;
+        }
+    }
+    return null;
+}
+
 /**
  * Entfernt alle Formatierungen aus der aktuellen Selection
  */
@@ -972,143 +1267,301 @@ function clearLinks(selection) {
     });
 }
 
+/**
+ * Converts a DOM element (editor root) to EditorContent JSON.
+ * Supports own format, Lexical HTML, and GitHub HTML.
+ */
 function domToContent(element) {
     const blocks = [];
+    // Normalize all checkbox lists before conversion
+    ensureAllCheckboxes(element);
     function processNode(node) {
         if (node.nodeType === Node.TEXT_NODE) {
             const text = node.textContent;
             if (text === null || text === undefined)
                 return null;
+            // In checkbox lists, skip whitespace-only text nodes
+            // if the LI has other meaningful text
+            const isOnlyWhitespace = /^[\s\u200B]*$/.test(text);
+            const isInCheckboxList = node.parentElement?.closest("ul.rte-checkbox-list") !== null;
+            if (isOnlyWhitespace && isInCheckboxList) {
+                const li = node.parentElement?.closest("li");
+                if (li) {
+                    const allText = li.textContent || "";
+                    const textWithoutWhitespace = allText.replace(/[\s\u200B]/g, "");
+                    if (textWithoutWhitespace.length > 0) {
+                        return null;
+                    }
+                }
+            }
             return { type: "text", text };
         }
-        if (node.nodeType === Node.ELEMENT_NODE) {
-            const el = node;
-            const tagName = el.tagName.toLowerCase();
-            if (tagName === "img") {
-                const attributes = {};
-                const src = el.getAttribute("src");
-                const alt = el.getAttribute("alt");
-                if (src)
-                    attributes.src = src;
-                if (alt)
-                    attributes.alt = alt;
-                return {
-                    type: "image",
-                    attributes: Object.keys(attributes).length > 0
-                        ? attributes
-                        : undefined,
-                };
-            }
-            if ([
-                "p",
-                "div",
-                "h1",
-                "h2",
-                "h3",
-                "h4",
-                "h5",
-                "h6",
-                "blockquote",
-                "ul",
-                "ol",
-                "li",
-            ].includes(tagName)) {
-                const children = [];
-                Array.from(el.childNodes).forEach((child) => {
-                    const processed = processNode(child);
-                    if (processed)
-                        children.push(processed);
-                });
-                const attributes = {};
-                if (tagName === "a") {
-                    const href = el.getAttribute("href");
-                    if (href)
-                        attributes.href = href;
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+            return null;
+        }
+        const el = node;
+        const tagName = el.tagName.toLowerCase();
+        // Skip checkbox input elements (GitHub format remnants)
+        if (tagName === "input" && el.getAttribute("type") === "checkbox") {
+            return null;
+        }
+        // Handle <br> as empty text
+        if (tagName === "br") {
+            return null;
+        }
+        if (tagName === "img") {
+            const attributes = {};
+            const src = el.getAttribute("src");
+            const alt = el.getAttribute("alt");
+            const attachmentId = el.getAttribute("data-attachment-id");
+            if (src)
+                attributes.src = src;
+            if (alt)
+                attributes.alt = alt;
+            if (attachmentId)
+                attributes["data-attachment-id"] = attachmentId;
+            return {
+                type: "image",
+                attributes: Object.keys(attributes).length > 0
+                    ? attributes
+                    : undefined,
+            };
+        }
+        // Table elements
+        if (["table", "thead", "tbody", "tr", "td", "th"].includes(tagName)) {
+            const children = [];
+            const attributes = {};
+            // Preserve class
+            const cls = el.getAttribute("class");
+            if (cls)
+                attributes.class = cls;
+            // Table cell attributes
+            if (tagName === "td" || tagName === "th") {
+                const colspan = el.getAttribute("colspan");
+                const rowspan = el.getAttribute("rowspan");
+                if (colspan && colspan !== "1")
+                    attributes.colspan = colspan;
+                if (rowspan && rowspan !== "1")
+                    attributes.rowspan = rowspan;
+                // Preserve text-align on cells
+                const textAlign = el.style.textAlign;
+                if (textAlign && textAlign !== "left" && textAlign !== "start") {
+                    attributes.textAlign = textAlign;
                 }
-                return {
-                    type: tagName,
-                    children: children.length > 0 ? children : [],
-                    attributes: Object.keys(attributes).length > 0
-                        ? attributes
-                        : undefined,
-                };
+                // Preserve background-color
+                const bgColor = el.style.backgroundColor;
+                if (bgColor)
+                    attributes.backgroundColor = bgColor;
             }
-            if (["strong", "b", "em", "i", "u", "a", "span"].includes(tagName)) {
-                const children = [];
-                Array.from(el.childNodes).forEach((child) => {
-                    const processed = processNode(child);
-                    if (processed)
-                        children.push(processed);
-                });
-                const attributes = {};
-                Array.from(el.attributes).forEach((attr) => {
-                    attributes[attr.name] = attr.value;
-                });
-                if (tagName === "a") {
-                    const href = el.getAttribute("href");
-                    if (href)
-                        attributes.href = href;
-                    return {
-                        type: "link",
-                        children: children.length > 0 ? children : undefined,
-                        attributes: Object.keys(attributes).length > 0
-                            ? attributes
-                            : undefined,
-                    };
-                }
-                if (tagName === "span") {
-                    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") {
-                                    attributes.fontSize = value;
-                                }
-                                else if (key === "color") {
-                                    attributes.color = value;
-                                }
-                                else if (key === "background-color") {
-                                    attributes.backgroundColor = value;
-                                }
-                            }
-                        });
+            Array.from(el.childNodes).forEach((child) => {
+                const processed = processNode(child);
+                if (processed)
+                    children.push(processed);
+            });
+            return {
+                type: tagName,
+                children: children.length > 0 ? children : [],
+                attributes: Object.keys(attributes).length > 0
+                    ? attributes
+                    : undefined,
+            };
+        }
+        // Block elements
+        if ([
+            "p",
+            "div",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "blockquote",
+            "ul",
+            "ol",
+            "li",
+        ].includes(tagName)) {
+            const children = [];
+            const attributes = {};
+            // Preserve text-align on block elements
+            const textAlign = el.style.textAlign;
+            if (textAlign && textAlign !== "left" && textAlign !== "start" && textAlign !== "") {
+                attributes.textAlign = textAlign;
+            }
+            // Detect checkbox lists (own + Lexical + GitHub formats)
+            if (tagName === "ul" && isCheckboxList(el)) {
+                attributes.class = "rte-checkbox-list";
+            }
+            // Detect checkbox list items via aria-checked
+            if (tagName === "li") {
+                const parentUl = el.closest("ul");
+                if (parentUl &&
+                    isCheckboxList(parentUl) &&
+                    el.getAttribute("role") === "checkbox") {
+                    const ariaChecked = el.getAttribute("aria-checked");
+                    if (ariaChecked !== null) {
+                        attributes.checkboxChecked = ariaChecked;
                     }
                 }
-                return {
-                    type: tagName === "strong" || tagName === "b"
-                        ? "bold"
-                        : tagName === "em" || tagName === "i"
-                            ? "italic"
-                            : tagName === "u"
-                                ? "underline"
-                                : tagName,
-                    children: children.length > 0 ? children : undefined,
-                    attributes: Object.keys(attributes).length > 0
-                        ? attributes
-                        : undefined,
-                };
             }
+            // Process children recursively
+            Array.from(el.childNodes).forEach((child) => {
+                // Skip checkbox input nodes
+                if (child.nodeType === Node.ELEMENT_NODE &&
+                    child.tagName.toLowerCase() === "input" &&
+                    child.getAttribute("type") === "checkbox") {
+                    return;
+                }
+                const processed = processNode(child);
+                if (processed) {
+                    children.push(processed);
+                }
+            });
+            return {
+                type: tagName,
+                children: children.length > 0 ? children : [],
+                attributes: Object.keys(attributes).length > 0
+                    ? attributes
+                    : undefined,
+            };
+        }
+        // Inline elements
+        if ([
+            "strong",
+            "b",
+            "em",
+            "i",
+            "u",
+            "s",
+            "del",
+            "strike",
+            "a",
+            "span",
+            "sub",
+            "sup",
+            "code",
+        ].includes(tagName)) {
             const children = [];
             Array.from(el.childNodes).forEach((child) => {
                 const processed = processNode(child);
                 if (processed)
                     children.push(processed);
             });
-            if (children.length > 0) {
+            const attributes = {};
+            Array.from(el.attributes).forEach((attr) => {
+                attributes[attr.name] = attr.value;
+            });
+            // Links — capture all relevant attributes
+            if (tagName === "a") {
+                const linkAttrs = {};
+                const href = el.getAttribute("href");
+                if (href)
+                    linkAttrs.href = href;
+                const target = el.getAttribute("target");
+                if (target)
+                    linkAttrs.target = target;
+                const rel = el.getAttribute("rel");
+                if (rel)
+                    linkAttrs.rel = rel;
+                const title = el.getAttribute("title");
+                if (title)
+                    linkAttrs.title = title;
+                const pageRef = el.getAttribute("data-page-ref");
+                if (pageRef)
+                    linkAttrs["data-page-ref"] = pageRef;
+                const urlExtra = el.getAttribute("data-url-extra");
+                if (urlExtra)
+                    linkAttrs["data-url-extra"] = urlExtra;
                 return {
-                    type: tagName,
-                    children,
+                    type: "link",
+                    children: children.length > 0 ? children : undefined,
+                    attributes: Object.keys(linkAttrs).length > 0
+                        ? linkAttrs
+                        : undefined,
                 };
             }
+            // Spans: handle Lexical's white-space: pre-wrap wrapper
+            if (tagName === "span") {
+                const style = el.getAttribute("style") || "";
+                const hasSemanticStyle = style.includes("font-size") ||
+                    style.includes("color") ||
+                    style.includes("background-color");
+                // Transparent wrapper (e.g. Lexical's <span style="white-space: pre-wrap;">)
+                // Return text content directly
+                if (!hasSemanticStyle) {
+                    if (el.childNodes.length === 1 &&
+                        el.firstChild?.nodeType === Node.TEXT_NODE) {
+                        return {
+                            type: "text",
+                            text: el.firstChild.textContent || "",
+                        };
+                    }
+                    // Multiple children: flatten (return each child as-is)
+                    if (children.length === 1) {
+                        return children[0];
+                    }
+                    // If multiple children, keep as span but without extra attributes
+                    if (children.length > 1) {
+                        return {
+                            type: "span",
+                            children,
+                        };
+                    }
+                    return null;
+                }
+                // Semantic span: extract meaningful style properties
+                if (style) {
+                    style.split(";").forEach((rule) => {
+                        const [key, value] = rule
+                            .split(":")
+                            .map((s) => s.trim());
+                        if (key && value) {
+                            if (key === "font-size") {
+                                attributes.fontSize = value;
+                            }
+                            else if (key === "color") {
+                                attributes.color = value;
+                            }
+                            else if (key === "background-color") {
+                                attributes.backgroundColor = value;
+                            }
+                        }
+                    });
+                }
+            }
+            // Map tag names to semantic types
+            const type = tagName === "strong" || tagName === "b"
+                ? "bold"
+                : tagName === "em" || tagName === "i"
+                    ? "italic"
+                    : tagName === "u"
+                        ? "underline"
+                        : tagName === "s" ||
+                            tagName === "del" ||
+                            tagName === "strike"
+                            ? "strikethrough"
+                            : tagName === "sub"
+                                ? "subscript"
+                                : tagName === "sup"
+                                    ? "superscript"
+                                    : tagName === "code"
+                                        ? "code"
+                                        : tagName;
+            return {
+                type,
+                children: children.length > 0 ? children : undefined,
+                attributes: Object.keys(attributes).length > 0
+                    ? attributes
+                    : undefined,
+            };
         }
         return null;
     }
+    // Process all child nodes of the editor element
     Array.from(element.childNodes).forEach((node) => {
         const processed = processNode(node);
         if (processed) {
+            // Wrap bare text nodes in a paragraph
             if (processed.type === "text") {
                 blocks.push({ type: "p", children: [processed] });
             }
@@ -1122,6 +1575,9 @@ function domToContent(element) {
     }
     return { blocks };
 }
+/**
+ * Converts EditorContent JSON to DOM and appends to the container.
+ */
 function contentToDOM(content, container, customLinkComponent, customHeadingRenderer) {
     container.innerHTML = "";
     function createNode(node) {
@@ -1149,7 +1605,11 @@ function contentToDOM(content, container, customLinkComponent, customHeadingRend
             bold: "strong",
             italic: "em",
             underline: "u",
+            strikethrough: "s",
             link: "a",
+            subscript: "sub",
+            superscript: "sup",
+            code: "code",
         };
         let tagName = tagMap[node.type] || node.type;
         if (node.type === "link" && customLinkComponent) {
@@ -1161,53 +1621,103 @@ function contentToDOM(content, container, customLinkComponent, customHeadingRend
         const element = document.createElement(tagName);
         if (node.attributes) {
             Object.entries(node.attributes).forEach(([key, value]) => {
-                if (key === "fontSize" ||
-                    key === "color" ||
-                    key === "backgroundColor") {
-                    const currentStyle = element.getAttribute("style") || "";
-                    if (key === "fontSize") {
-                        element.setAttribute("style", `${currentStyle}font-size: ${value};`.trim());
-                    }
-                    else if (key === "color") {
-                        element.setAttribute("style", `${currentStyle}color: ${value};`.trim());
-                    }
-                    else if (key === "backgroundColor") {
-                        element.setAttribute("style", `${currentStyle}background-color: ${value};`.trim());
-                    }
+                if (key === "fontSize") {
+                    element.style.fontSize = value;
                 }
+                else if (key === "color") {
+                    element.style.color = value;
+                }
+                else if (key === "backgroundColor") {
+                    element.style.backgroundColor = value;
+                }
+                else if (key === "textAlign") {
+                    element.style.textAlign = value;
+                }
+                else if (key === "href" && tagName === "a") {
+                    element.setAttribute("href", value);
+                }
+                else if (key === "target" && tagName === "a") {
+                    element.setAttribute("target", value);
+                }
+                else if (key === "rel" && tagName === "a") {
+                    element.setAttribute("rel", value);
+                }
+                else if (key === "title" && tagName === "a") {
+                    element.setAttribute("title", value);
+                }
+                else if (key === "data-page-ref" && tagName === "a") {
+                    element.setAttribute("data-page-ref", value);
+                }
+                else if (key === "data-url-extra" && tagName === "a") {
+                    element.setAttribute("data-url-extra", value);
+                }
+                else if (key === "data-attachment-id") {
+                    element.setAttribute("data-attachment-id", value);
+                }
+                else if (key === "colspan") {
+                    element.setAttribute("colspan", value);
+                }
+                else if (key === "rowspan") {
+                    element.setAttribute("rowspan", value);
+                }
+                else if (key === "class") {
+                    element.className = value;
+                }
+                else if (key === "checkboxChecked") ;
                 else {
                     element.setAttribute(key, value);
                 }
             });
         }
+        // Ensure tables have the rte-table class
+        if (node.type === "table" && !element.classList.contains("rte-table")) {
+            element.classList.add("rte-table");
+        }
         if (node.children) {
             node.children.forEach((child) => {
-                const childNode = createNode(child);
-                element.appendChild(childNode);
+                element.appendChild(createNode(child));
             });
         }
+        // Set checkbox attributes on list items
+        if (node.type === "li" &&
+            node.attributes?.checkboxChecked !== undefined) {
+            element.setAttribute("role", "checkbox");
+            element.setAttribute("tabIndex", "-1");
+            element.setAttribute("aria-checked", node.attributes.checkboxChecked);
+        }
         return element;
     }
     content.blocks.forEach((block) => {
-        const blockNode = createNode(block);
-        container.appendChild(blockNode);
+        container.appendChild(createNode(block));
     });
+    // Normalize all checkbox lists after DOM creation
+    ensureAllCheckboxes(container);
 }
-function createEmptyContent() {
+/**
+ * Creates empty editor content with a single paragraph.
+ */
+function createEmptyContent() {
     return {
         blocks: [{ type: "p", children: [] }],
     };
 }
-function htmlToContent(htmlString) {
-    const tempDiv = document.createElement("div");
-    tempDiv.innerHTML = htmlString.trim();
-    return domToContent(tempDiv);
-}
+/**
+ * Converts EditorContent to an HTML string.
+ */
 function contentToHTML(content) {
     const tempDiv = document.createElement("div");
     contentToDOM(content, tempDiv);
     return tempDiv.innerHTML;
 }
+/**
+ * Converts an HTML string to EditorContent.
+ * Supports Lexical, GitHub, and standard HTML formats.
+ */
+function htmlToContent(htmlString) {
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = htmlString;
+    return domToContent(tempDiv);
+}
 
 class HistoryManager {
     constructor() {
@@ -1417,321 +1927,974 @@ function outdentListItem(selection) {
     return true;
 }
 
-const Toolbar = ({ plugins, editorAPI, className, }) => {
-    const [updateTrigger, setUpdateTrigger] = useState(0);
-    const [isClient, setIsClient] = useState(false);
+/** Debounce time for pushing to history after input (ms) */
+const HISTORY_DEBOUNCE_MS = 300;
+/** Width of the clickable checkbox area in pixels */
+const CHECKBOX_CLICK_ZONE_PX = 40;
+
+/**
+ * Hook that manages all checkbox list interactions.
+ * Consolidates click handling, keyboard navigation, and checkbox insertion.
+ * Uses event delegation (single listener on editor root) for all checkbox events.
+ */
+function useCheckbox({ editorRef, isUpdatingRef, pushToHistory, notifyChange, getDomContent, }) {
+    // --- Event Listeners (click + pointerdown) ---
     useEffect(() => {
-        setIsClient(true);
-        const handleSelectionChange = () => {
-            setUpdateTrigger((prev) => prev + 1);
-        };
-        const handleMouseUp = () => {
-            setTimeout(handleSelectionChange, 10);
+        const editor = editorRef.current;
+        if (!editor)
+            return;
+        const handleClick = (event) => {
+            const clickTarget = event.target;
+            if (!(clickTarget instanceof HTMLElement))
+                return;
+            const listItem = clickTarget.tagName === "LI"
+                ? clickTarget
+                : clickTarget.closest("li");
+            if (!listItem)
+                return;
+            const parentNode = listItem.parentElement;
+            if (!parentNode || !isCheckboxList(parentNode))
+                return;
+            if (listItem.getAttribute("role") !== "checkbox")
+                return;
+            if (isNestedListItem(listItem))
+                return;
+            const rect = listItem.getBoundingClientRect();
+            const clientX = event.clientX;
+            const isInCheckboxArea = listItem.dir === "rtl"
+                ? clientX >= rect.right - CHECKBOX_CLICK_ZONE_PX
+                : clientX <= rect.left + CHECKBOX_CLICK_ZONE_PX;
+            if (isInCheckboxArea) {
+                event.preventDefault();
+                event.stopPropagation();
+                toggleListItemChecked(listItem);
+                // Trigger change event
+                const changeEvent = new Event("input", { bubbles: true });
+                editor.dispatchEvent(changeEvent);
+            }
         };
-        const handleKeyUp = () => {
-            setTimeout(handleSelectionChange, 10);
+        const handlePointerDown = (event) => {
+            const target = event.target;
+            if (!(target instanceof HTMLElement))
+                return;
+            const listItem = target.tagName === "LI"
+                ? target
+                : target.closest("li");
+            if (!listItem)
+                return;
+            if (isNestedListItem(listItem))
+                return;
+            const parentNode = listItem.parentElement;
+            if (!parentNode || !isCheckboxList(parentNode))
+                return;
+            const rect = listItem.getBoundingClientRect();
+            const clientX = event.clientX;
+            const isInCheckboxArea = listItem.dir === "rtl"
+                ? clientX >= rect.right - CHECKBOX_CLICK_ZONE_PX
+                : clientX <= rect.left + CHECKBOX_CLICK_ZONE_PX;
+            if (isInCheckboxArea) {
+                event.preventDefault();
+            }
         };
-        if (typeof document !== 'undefined') {
-            document.addEventListener("selectionchange", handleSelectionChange);
-            document.addEventListener("mouseup", handleMouseUp);
-            document.addEventListener("keyup", handleKeyUp);
-        }
+        editor.addEventListener("click", handleClick, true);
+        editor.addEventListener("pointerdown", handlePointerDown, true);
         return () => {
-            if (typeof document !== 'undefined') {
-                document.removeEventListener("selectionchange", handleSelectionChange);
-                document.removeEventListener("mouseup", handleMouseUp);
-                document.removeEventListener("keyup", handleKeyUp);
-            }
+            editor.removeEventListener("click", handleClick, true);
+            editor.removeEventListener("pointerdown", handlePointerDown, true);
         };
-    }, []);
-    const handlePluginClick = (plugin, value) => {
-        if (plugin.canExecute?.(editorAPI) !== false) {
-            if (plugin.execute) {
-                plugin.execute(editorAPI, value);
+    }, [editorRef]);
+    // --- Keyboard handlers (called from useEditorEvents) ---
+    /**
+     * Handles checkbox-specific keyboard events.
+     * Returns true if the event was handled and should not propagate.
+     */
+    const handleCheckboxKeyDown = useCallback((e) => {
+        // Arrow up/down: navigate between checkbox items
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            const activeItem = getActiveCheckListItem();
+            if (activeItem) {
+                const backward = e.key === "ArrowUp";
+                const nextItem = findCheckListItemSibling(activeItem, backward);
+                if (nextItem) {
+                    e.preventDefault();
+                    nextItem.focus();
+                    return true;
+                }
             }
-            else if (plugin.command && value !== undefined) {
-                editorAPI.executeCommand(plugin.command, value);
+        }
+        // Space: toggle checkbox
+        if (e.key === " ") {
+            const activeItem = getActiveCheckListItem();
+            if (activeItem) {
+                e.preventDefault();
+                toggleListItemChecked(activeItem);
+                const editorEl = activeItem.closest(".rte-editor");
+                if (editorEl) {
+                    editorEl.dispatchEvent(new Event("input", { bubbles: true }));
+                }
+                return true;
             }
-            else if (plugin.command) {
-                editorAPI.executeCommand(plugin.command);
+        }
+        // Escape: blur from checkbox item
+        if (e.key === "Escape") {
+            const activeItem = getActiveCheckListItem();
+            if (activeItem) {
+                const editorEl = activeItem.closest(".rte-editor");
+                if (editorEl instanceof HTMLElement) {
+                    editorEl.focus();
+                }
+                return true;
             }
-            setTimeout(() => setUpdateTrigger((prev) => prev + 1), 50);
         }
-    };
-    const leftPlugins = plugins.filter((p) => p.name !== "clearFormatting");
-    const clearFormattingPlugin = plugins.find((p) => p.name === "clearFormatting");
-    return (jsxs("div", { className: `rte-toolbar rte-toolbar-sticky ${className || ""}`, children: [jsx("div", { className: "rte-toolbar-left", children: leftPlugins.map((plugin) => {
-                    if (!plugin.renderButton)
-                        return null;
-                    const isActive = isClient && plugin.isActive
-                        ? plugin.isActive(editorAPI)
-                        : false;
-                    const canExecute = isClient && plugin.canExecute
-                        ? plugin.canExecute(editorAPI)
-                        : true;
-                    const currentValue = isClient && plugin.getCurrentValue
-                        ? plugin.getCurrentValue(editorAPI)
-                        : undefined;
-                    const buttonProps = {
-                        isActive,
-                        onClick: () => handlePluginClick(plugin),
-                        disabled: !canExecute,
-                        onSelect: (value) => handlePluginClick(plugin, value),
-                        editorAPI,
-                        currentValue,
-                    };
-                    return (jsx(React.Fragment, { children: plugin.renderButton(buttonProps) }, plugin.name));
-                }) }), clearFormattingPlugin && clearFormattingPlugin.renderButton && (jsxs("div", { className: "rte-toolbar-right", children: [jsx("div", { className: "rte-toolbar-divider" }), (() => {
-                        const isActive = isClient && clearFormattingPlugin.isActive
-                            ? clearFormattingPlugin.isActive(editorAPI)
-                            : false;
-                        const canExecute = isClient && clearFormattingPlugin.canExecute
-                            ? clearFormattingPlugin.canExecute(editorAPI)
-                            : true;
-                        const buttonProps = {
-                            isActive,
-                            onClick: () => handlePluginClick(clearFormattingPlugin),
-                            disabled: !canExecute,
-                            editorAPI,
-                        };
-                        return (jsx(React.Fragment, { children: clearFormattingPlugin.renderButton(buttonProps) }, clearFormattingPlugin.name));
-                    })()] }))] }));
-};
-
-const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholder = "Text eingeben...", className, toolbarClassName, editorClassName, fontSizes, colors, headings, customLinkComponent, customHeadingRenderer, customRenderer, onEditorAPIReady, theme, onImageUpload, }) => {
-    const plugins = useMemo(() => {
-        const allPlugins = [...(providedPlugins || defaultPlugins)];
-        if (fontSizes && fontSizes.length > 0) {
-            allPlugins.push(createFontSizePlugin(fontSizes));
+        // Arrow left: focus list item when cursor is at the start
+        if (e.key === "ArrowLeft") {
+            const selection = window.getSelection();
+            if (!selection || selection.rangeCount === 0)
+                return false;
+            const range = selection.getRangeAt(0);
+            const container = range.commonAncestorContainer;
+            const listItem = findClosestListItem(container);
+            if (!listItem)
+                return false;
+            const parent = listItem.parentElement;
+            if (parent &&
+                isCheckboxList(parent) &&
+                range.collapsed &&
+                range.startOffset === 0) {
+                if (document.activeElement !== listItem) {
+                    listItem.focus();
+                    e.preventDefault();
+                    return true;
+                }
+            }
         }
-        if (colors && colors.length > 0) {
-            allPlugins.push(createTextColorPlugin(colors));
-            allPlugins.push(createBackgroundColorPlugin(colors));
+        return false;
+    }, []);
+    /**
+     * Handles Enter key in checkbox lists.
+     * Creates a new unchecked item after the current one.
+     * Returns true if the event was handled.
+     */
+    const handleCheckboxEnter = useCallback((e) => {
+        if (e.key !== "Enter")
+            return false;
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return false;
+        const range = selection.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        const listItem = findClosestListItem(container);
+        if (!listItem)
+            return false;
+        const checkboxList = findClosestCheckboxList(listItem);
+        if (!checkboxList)
+            return false;
+        e.preventDefault();
+        const newLi = document.createElement("li");
+        updateListItemChecked(newLi, false);
+        const textNode = document.createTextNode(" ");
+        newLi.appendChild(textNode);
+        if (listItem.nextSibling) {
+            checkboxList.insertBefore(newLi, listItem.nextSibling);
         }
-        // BlockFormat Plugin ist bereits in defaultPlugins enthalten
-        // Wenn custom headings angegeben sind, ersetze das Standard-Plugin
-        if (headings && headings.length > 0) {
-            // Entferne das Standard-BlockFormat-Plugin
-            const blockFormatIndex = allPlugins.findIndex((p) => p.name === "blockFormat");
-            if (blockFormatIndex !== -1) {
-                allPlugins.splice(blockFormatIndex, 1);
-            }
-            // Füge das Plugin mit custom Headlines hinzu
-            allPlugins.push(createBlockFormatPlugin(headings));
+        else {
+            checkboxList.appendChild(newLi);
         }
-        allPlugins.push(createImagePlugin(onImageUpload));
-        return allPlugins;
-    }, [providedPlugins, fontSizes, colors, headings, onImageUpload]);
-    const editorRef = useRef(null);
-    const historyRef = useRef(new HistoryManager());
-    const isUpdatingRef = useRef(false);
-    const notifyChange = useCallback((content) => {
-        if (onChange && !isUpdatingRef.current) {
-            onChange(content);
+        const editor = editorRef.current;
+        if (editor)
+            ensureAllCheckboxes(editor);
+        const newRange = document.createRange();
+        newRange.setStart(textNode, 0);
+        newRange.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(newRange);
+        if (editor) {
+            const content = getDomContent();
+            pushToHistory(content);
+            notifyChange(content);
         }
-    }, [onChange]);
-    const restoreSelection = useCallback((editor) => {
-        if (typeof window === "undefined" || typeof document === "undefined")
-            return;
-        const range = document.createRange();
+        return true;
+    }, [editorRef, getDomContent, pushToHistory, notifyChange]);
+    /**
+     * Inserts a new checkbox list at the current cursor position,
+     * or removes it if already inside one.
+     * Returns true on success.
+     */
+    const insertCheckboxList = useCallback((editor) => {
+        isUpdatingRef.current = true;
         const selection = window.getSelection();
-        if (editor.firstChild) {
-            range.setStart(editor.firstChild, 0);
-            range.collapse(true);
-            selection?.removeAllRanges();
-            selection?.addRange(range);
+        if (!selection || selection.rangeCount === 0) {
+            isUpdatingRef.current = false;
+            return false;
         }
-    }, []);
-    const editorAPI = useMemo(() => {
-        const executeCommand = (command, value) => {
-            const editor = editorRef.current;
-            if (!editor)
-                return false;
-            if (command !== "undo" &&
-                command !== "redo" &&
-                command !== "insertImage") {
-                const currentContent = domToContent(editor);
-                historyRef.current.push(currentContent);
-            }
-            if (command === "undo") {
-                const content = historyRef.current.undo();
-                if (content && editor) {
-                    isUpdatingRef.current = true;
-                    contentToDOM(content, editor, customLinkComponent);
-                    restoreSelection(editor);
-                    isUpdatingRef.current = false;
-                    notifyChange(content);
-                }
-                return true;
-            }
-            if (command === "redo") {
-                const content = historyRef.current.redo();
-                if (content && editor) {
-                    isUpdatingRef.current = true;
-                    contentToDOM(content, editor, customLinkComponent);
-                    restoreSelection(editor);
-                    isUpdatingRef.current = false;
-                    notifyChange(content);
-                }
-                return true;
+        const range = selection.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        const element = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        if (!element) {
+            isUpdatingRef.current = false;
+            return false;
+        }
+        // Already in a checkbox list? Remove it.
+        const existingList = findClosestCheckboxList(element);
+        if (existingList) {
+            existingList.classList.remove("rte-checkbox-list");
+            existingList
+                .querySelectorAll("li[role='checkbox']")
+                .forEach((li) => {
+                li.removeAttribute("role");
+                li.removeAttribute("tabIndex");
+                li.removeAttribute("aria-checked");
+            });
+            isUpdatingRef.current = false;
+            return true;
+        }
+        // Create new checkbox list
+        const ul = document.createElement("ul");
+        ul.classList.add("rte-checkbox-list");
+        const li = document.createElement("li");
+        updateListItemChecked(li, false);
+        const textNode = document.createTextNode(" ");
+        li.appendChild(textNode);
+        ul.appendChild(li);
+        // Find block element to replace
+        const blockElement = element.closest("p, div, h1, h2, h3, h4, h5, h6, blockquote");
+        const isValidBlockElement = blockElement &&
+            blockElement !== editor &&
+            editor.contains(blockElement) &&
+            blockElement.parentElement;
+        if (isValidBlockElement) {
+            const textContent = blockElement.textContent || "";
+            blockElement.parentElement.replaceChild(ul, blockElement);
+            const finalTextNode = li.firstChild;
+            if (finalTextNode) {
+                finalTextNode.textContent = textContent || " ";
+                const cursorPos = textContent ? textContent.length : 0;
+                setCursorInTextNode(finalTextNode, cursorPos, editor);
             }
-            if (command === "insertImage" && value) {
-                let selection = window.getSelection();
-                if (!selection)
-                    return false;
-                if (document.activeElement !== editor) {
-                    editor.focus();
-                }
-                if (selection.rangeCount === 0) {
-                    const range = document.createRange();
-                    if (editor.childNodes.length > 0) {
-                        const lastChild = editor.childNodes[editor.childNodes.length - 1];
-                        range.setStartAfter(lastChild);
-                        range.collapse(true);
-                    }
-                    else {
-                        const img = document.createElement("img");
-                        img.setAttribute("src", value);
-                        img.setAttribute("alt", "");
-                        img.style.maxWidth = "100%";
-                        img.style.height = "auto";
-                        img.style.display = "block";
-                        img.style.margin = "16px 0";
-                        editor.appendChild(img);
-                        const newRange = document.createRange();
-                        newRange.setStartAfter(img);
-                        newRange.collapse(true);
-                        selection.removeAllRanges();
-                        selection.addRange(newRange);
-                        isUpdatingRef.current = true;
-                        setTimeout(() => {
-                            if (editor) {
-                                const currentContent = domToContent(editor);
-                                historyRef.current.push(currentContent);
-                                isUpdatingRef.current = false;
-                                notifyChange(currentContent);
-                            }
-                        }, 0);
-                        return true;
-                    }
-                    selection.removeAllRanges();
-                    selection.addRange(range);
-                }
-                if (selection.rangeCount === 0)
-                    return false;
-                const range = selection.getRangeAt(0);
-                const container = range.commonAncestorContainer;
-                let parentElement = null;
-                if (container.nodeType === Node.TEXT_NODE) {
-                    parentElement = container.parentElement;
-                }
-                else if (container.nodeType === Node.ELEMENT_NODE) {
-                    parentElement = container;
-                }
-                const img = document.createElement("img");
-                img.setAttribute("src", value);
-                img.setAttribute("alt", "");
-                img.style.maxWidth = "100%";
-                img.style.height = "auto";
-                img.style.display = "block";
-                img.style.margin = "16px 0";
-                if (parentElement &&
-                    parentElement !== editor &&
-                    (parentElement.tagName === "P" ||
-                        parentElement.tagName === "DIV" ||
-                        parentElement.tagName === "H1" ||
-                        parentElement.tagName === "H2" ||
-                        parentElement.tagName === "H3" ||
-                        parentElement.tagName === "H4" ||
-                        parentElement.tagName === "H5" ||
-                        parentElement.tagName === "H6")) {
-                    if (parentElement.nextSibling) {
-                        editor.insertBefore(img, parentElement.nextSibling);
-                    }
-                    else {
-                        editor.appendChild(img);
-                    }
-                }
-                else {
-                    try {
-                        range.insertNode(img);
-                    }
-                    catch (e) {
-                        editor.appendChild(img);
-                    }
+        }
+        else {
+            try {
+                range.deleteContents();
+                range.insertNode(ul);
+                const finalTextNode = li.firstChild;
+                if (finalTextNode) {
+                    setCursorInTextNode(finalTextNode, 0, editor);
                 }
-                const newRange = document.createRange();
-                newRange.setStartAfter(img);
-                newRange.collapse(true);
-                selection.removeAllRanges();
-                selection.addRange(newRange);
-                isUpdatingRef.current = true;
-                setTimeout(() => {
-                    if (editor) {
-                        const currentContent = domToContent(editor);
-                        historyRef.current.push(currentContent);
-                        isUpdatingRef.current = false;
-                        notifyChange(currentContent);
-                    }
-                }, 0);
-                return true;
-            }
-            const selection = window.getSelection();
-            let savedRange = null;
-            if (selection && selection.rangeCount > 0) {
-                savedRange = selection.getRangeAt(0).cloneRange();
-            }
-            if (document.activeElement !== editor) {
-                editor.focus();
             }
-            if (!selection || selection.rangeCount === 0) {
-                const range = document.createRange();
-                if (editor.childNodes.length > 0) {
-                    const lastChild = editor.childNodes[editor.childNodes.length - 1];
-                    if (lastChild.nodeType === Node.TEXT_NODE) {
-                        range.setStart(lastChild, lastChild.textContent?.length || 0);
-                        range.setEnd(lastChild, lastChild.textContent?.length || 0);
-                    }
-                    else {
-                        range.selectNodeContents(lastChild);
-                        range.collapse(false);
-                    }
-                }
-                else {
-                    const p = document.createElement("p");
-                    editor.appendChild(p);
-                    const textNode = document.createTextNode("");
-                    p.appendChild(textNode);
-                    range.setStart(textNode, 0);
-                    range.setEnd(textNode, 0);
+            catch (_) {
+                editor.appendChild(ul);
+                const finalTextNode = li.firstChild;
+                if (finalTextNode) {
+                    setCursorInTextNode(finalTextNode, 0, editor);
                 }
-                selection?.removeAllRanges();
-                selection?.addRange(range);
             }
-            else if (savedRange) {
-                selection.removeAllRanges();
-                selection.addRange(savedRange);
-            }
-            document.execCommand(command, false, value);
-            setTimeout(() => {
-                if (editor && !isUpdatingRef.current) {
-                    const content = domToContent(editor);
-                    notifyChange(content);
-                }
-            }, 0);
-            return true;
-        };
-        return {
-            executeCommand,
-            getSelection: () => {
-                if (typeof window === "undefined")
-                    return null;
+        }
+        // After insertion: ensure attributes and save to history
+        setTimeout(() => {
+            if (!editor)
+                return;
+            ensureAllCheckboxes(editor);
+            const content = getDomContent();
+            pushToHistory(content);
+            isUpdatingRef.current = false;
+            notifyChange(content);
+        }, 100);
+        return true;
+    }, [isUpdatingRef, getDomContent, pushToHistory, notifyChange]);
+    return {
+        ensureAllCheckboxes,
+        insertCheckboxList,
+        handleCheckboxKeyDown,
+        handleCheckboxEnter,
+        updateListItemChecked,
+    };
+}
+
+/**
+ * Table DOM manipulation utilities for contentEditable.
+ * Pure DOM functions — no React dependency.
+ */
+/* ── Helpers ──────────────────────────────────────────────────────────── */
+/** Get the <td>/<th> cell that contains the current selection. */
+function getActiveCell() {
+    const sel = document.getSelection();
+    if (!sel || sel.rangeCount === 0)
+        return null;
+    const range = sel.getRangeAt(0);
+    const container = range.commonAncestorContainer;
+    const el = container.nodeType === Node.TEXT_NODE
+        ? container.parentElement
+        : container;
+    return el?.closest("td, th");
+}
+/** Get the <table> that contains the current selection. */
+function getActiveTable() {
+    const cell = getActiveCell();
+    return cell?.closest("table") ?? null;
+}
+/** Get the <tr> that contains the current selection. */
+function getActiveRow() {
+    const cell = getActiveCell();
+    return cell?.closest("tr") ?? null;
+}
+/** Place the cursor inside a cell (at the start). */
+function focusCell(cell) {
+    const range = document.createRange();
+    const sel = document.getSelection();
+    if (!sel)
+        return;
+    if (cell.firstChild) {
+        range.setStart(cell.firstChild, 0);
+    }
+    else {
+        // Empty cell — add a <br> so the cursor has something to land on
+        const br = document.createElement("br");
+        cell.appendChild(br);
+        range.setStart(cell, 0);
+    }
+    range.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(range);
+}
+/** Count the number of columns in a table (from the first row). */
+function getColumnCount(table) {
+    const firstRow = table.querySelector("tr");
+    return firstRow ? firstRow.cells.length : 0;
+}
+/* ── Create ───────────────────────────────────────────────────────────── */
+/** Create a new table element with the given dimensions. */
+function createTable(rows, cols, withHeader = false) {
+    const table = document.createElement("table");
+    table.classList.add("rte-table");
+    if (withHeader) {
+        const thead = document.createElement("thead");
+        const tr = document.createElement("tr");
+        for (let c = 0; c < cols; c++) {
+            const th = document.createElement("th");
+            th.innerHTML = "<br>";
+            tr.appendChild(th);
+        }
+        thead.appendChild(tr);
+        table.appendChild(thead);
+    }
+    const tbody = document.createElement("tbody");
+    const dataRows = withHeader ? rows - 1 : rows;
+    for (let r = 0; r < dataRows; r++) {
+        const tr = document.createElement("tr");
+        for (let c = 0; c < cols; c++) {
+            const td = document.createElement("td");
+            td.innerHTML = "<br>";
+            tr.appendChild(td);
+        }
+        tbody.appendChild(tr);
+    }
+    table.appendChild(tbody);
+    return table;
+}
+/* ── Row operations ───────────────────────────────────────────────────── */
+/** Insert a row above or below the currently selected row. */
+function insertRow(position) {
+    const row = getActiveRow();
+    const table = getActiveTable();
+    if (!row || !table)
+        return;
+    const cols = row.cells.length;
+    const newRow = document.createElement("tr");
+    for (let c = 0; c < cols; c++) {
+        const td = document.createElement("td");
+        td.innerHTML = "<br>";
+        newRow.appendChild(td);
+    }
+    if (position === "above") {
+        row.parentNode?.insertBefore(newRow, row);
+    }
+    else {
+        row.parentNode?.insertBefore(newRow, row.nextSibling);
+    }
+    focusCell(newRow.cells[0]);
+}
+/** Delete the row that contains the current selection. */
+function deleteRow() {
+    const row = getActiveRow();
+    const table = getActiveTable();
+    if (!row || !table)
+        return;
+    const allRows = table.querySelectorAll("tr");
+    if (allRows.length <= 1) {
+        // Last row — remove the whole table
+        deleteTable();
+        return;
+    }
+    // Focus adjacent row before deleting
+    const nextRow = (row.nextElementSibling ||
+        row.previousElementSibling);
+    row.remove();
+    if (nextRow?.cells[0]) {
+        focusCell(nextRow.cells[0]);
+    }
+}
+/* ── Column operations ────────────────────────────────────────────────── */
+/** Insert a column to the left or right of the currently selected cell. */
+function insertColumn(position) {
+    const cell = getActiveCell();
+    const table = getActiveTable();
+    if (!cell || !table)
+        return;
+    const cellIndex = cell.cellIndex;
+    const rows = table.querySelectorAll("tr");
+    rows.forEach((row) => {
+        const tag = row.parentElement?.tagName === "THEAD" ? "th" : "td";
+        const newCell = document.createElement(tag);
+        newCell.innerHTML = "<br>";
+        const refCell = row.cells[cellIndex];
+        if (!refCell) {
+            row.appendChild(newCell);
+        }
+        else if (position === "left") {
+            row.insertBefore(newCell, refCell);
+        }
+        else {
+            row.insertBefore(newCell, refCell.nextSibling);
+        }
+    });
+}
+/** Delete the column that contains the currently selected cell. */
+function deleteColumn() {
+    const cell = getActiveCell();
+    const table = getActiveTable();
+    if (!cell || !table)
+        return;
+    const cellIndex = cell.cellIndex;
+    const colCount = getColumnCount(table);
+    if (colCount <= 1) {
+        // Last column — remove the whole table
+        deleteTable();
+        return;
+    }
+    const rows = table.querySelectorAll("tr");
+    rows.forEach((row) => {
+        if (row.cells[cellIndex]) {
+            row.cells[cellIndex].remove();
+        }
+    });
+    // Focus an adjacent cell
+    const activeRow = getActiveRow();
+    if (activeRow) {
+        const idx = Math.min(cellIndex, activeRow.cells.length - 1);
+        if (activeRow.cells[idx])
+            focusCell(activeRow.cells[idx]);
+    }
+}
+/* ── Table delete ─────────────────────────────────────────────────────── */
+/** Remove the entire table and place cursor after it. */
+function deleteTable() {
+    const table = getActiveTable();
+    if (!table)
+        return;
+    const parent = table.parentNode;
+    const nextSibling = table.nextSibling;
+    // Create a paragraph to place the cursor
+    const p = document.createElement("p");
+    p.innerHTML = "<br>";
+    if (nextSibling) {
+        parent?.insertBefore(p, nextSibling);
+    }
+    else {
+        parent?.appendChild(p);
+    }
+    table.remove();
+    // Focus the new paragraph
+    const range = document.createRange();
+    const sel = document.getSelection();
+    if (sel && p.firstChild) {
+        range.setStart(p, 0);
+        range.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+}
+/* ── Tab navigation ───────────────────────────────────────────────────── */
+/**
+ * Move focus to the next or previous table cell.
+ * Returns true if navigation happened (caller should preventDefault).
+ */
+function navigateTableCell(direction) {
+    const cell = getActiveCell();
+    if (!cell)
+        return false;
+    const row = cell.closest("tr");
+    const table = cell.closest("table");
+    if (!row || !table)
+        return false;
+    const cellIndex = cell.cellIndex;
+    const allRows = Array.from(table.querySelectorAll("tr"));
+    const rowIndex = allRows.indexOf(row);
+    let targetCell = null;
+    if (direction === "next") {
+        if (cellIndex < row.cells.length - 1) {
+            targetCell = row.cells[cellIndex + 1];
+        }
+        else if (rowIndex < allRows.length - 1) {
+            targetCell = allRows[rowIndex + 1].cells[0];
+        }
+        else {
+            // Last cell of last row — add a new row
+            insertRow("below");
+            return true;
+        }
+    }
+    else {
+        if (cellIndex > 0) {
+            targetCell = row.cells[cellIndex - 1];
+        }
+        else if (rowIndex > 0) {
+            const prevRow = allRows[rowIndex - 1];
+            targetCell = prevRow.cells[prevRow.cells.length - 1];
+        }
+    }
+    if (targetCell) {
+        focusCell(targetCell);
+        return true;
+    }
+    return false;
+}
+
+/**
+ * Hook that sets up input, keyup, and keydown event listeners on the editor.
+ */
+function useEditorEvents({ editorRef, historyRef, isUpdatingRef, notifyChange, handleCheckboxKeyDown, handleCheckboxEnter, undo, redo, }) {
+    useEffect(() => {
+        const editor = editorRef.current;
+        if (!editor)
+            return;
+        let inputTimeout = null;
+        const handleInput = () => {
+            setTimeout(() => {
+                const content = domToContent(editor);
+                notifyChange(content);
+                if (inputTimeout)
+                    clearTimeout(inputTimeout);
+                inputTimeout = setTimeout(() => {
+                    historyRef.current.push(content);
+                    inputTimeout = null;
+                }, HISTORY_DEBOUNCE_MS);
+            }, 0);
+        };
+        const handleKeyDown = (e) => {
+            const isModifierPressed = e.metaKey || e.ctrlKey;
+            // Checkbox Enter: create new checkbox item
+            if (handleCheckboxEnter(e))
+                return;
+            // Checkbox keyboard navigation
+            if (handleCheckboxKeyDown(e))
+                return;
+            // Tab: navigate table cells OR indent/outdent in lists
+            if (e.key === "Tab" && !isModifierPressed && !e.altKey) {
+                // Table tab navigation takes priority
+                if (getActiveCell()) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    e.stopImmediatePropagation();
+                    navigateTableCell(e.shiftKey ? "prev" : "next");
+                    setTimeout(() => {
+                        if (editor) {
+                            const content = domToContent(editor);
+                            notifyChange(content);
+                        }
+                    }, 0);
+                    return;
+                }
+                e.preventDefault();
+                e.stopPropagation();
+                e.stopImmediatePropagation();
+                const selection = window.getSelection();
+                if (!selection || selection.rangeCount === 0)
+                    return;
+                const range = selection.getRangeAt(0);
+                const container = range.commonAncestorContainer;
+                if (!editor.contains(container))
+                    return;
+                const listItem = container.nodeType === Node.TEXT_NODE
+                    ? container.parentElement?.closest("li")
+                    : container.closest("li");
+                if (listItem && editor.contains(listItem)) {
+                    const currentContent = domToContent(editor);
+                    historyRef.current.push(currentContent);
+                    if (e.shiftKey) {
+                        outdentListItem(selection);
+                    }
+                    else {
+                        indentListItem(selection);
+                    }
+                    setTimeout(() => {
+                        if (editor) {
+                            const content = domToContent(editor);
+                            notifyChange(content);
+                        }
+                    }, 0);
+                    return;
+                }
+            }
+            // Cmd/Ctrl+K: trigger link button click (if present in toolbar)
+            if (isModifierPressed && e.key === "k") {
+                e.preventDefault();
+                e.stopPropagation();
+                // Find and click the link button in the toolbar
+                const editorContainer = editor.closest(".rte-container");
+                if (editorContainer) {
+                    const linkBtn = editorContainer.querySelector('button[aria-label="Link"], button[aria-label="Link einfügen"]');
+                    if (linkBtn)
+                        linkBtn.click();
+                }
+                return;
+            }
+            // Undo/Redo shortcuts
+            if (isModifierPressed && e.key === "z" && !e.shiftKey) {
+                e.preventDefault();
+                e.stopPropagation();
+                undo();
+            }
+            else if (isModifierPressed &&
+                (e.key === "y" || (e.key === "z" && e.shiftKey))) {
+                e.preventDefault();
+                e.stopPropagation();
+                redo();
+            }
+        };
+        editor.addEventListener("input", handleInput);
+        editor.addEventListener("keyup", handleInput);
+        editor.addEventListener("keydown", handleKeyDown, true);
+        return () => {
+            editor.removeEventListener("input", handleInput);
+            editor.removeEventListener("keyup", handleInput);
+            editor.removeEventListener("keydown", handleKeyDown, true);
+            if (inputTimeout)
+                clearTimeout(inputTimeout);
+        };
+    }, [
+        editorRef,
+        historyRef,
+        isUpdatingRef,
+        notifyChange,
+        handleCheckboxKeyDown,
+        handleCheckboxEnter,
+        undo,
+        redo,
+    ]);
+}
+
+/**
+ * Hook that initializes the editor with initial content and sets up the MutationObserver.
+ * Runs once on mount.
+ */
+function useEditorInit({ editorRef, historyRef, isUpdatingRef, initialContent, customLinkComponent, customHeadingRenderer, }) {
+    const isInitializedRef = useRef(false);
+    useEffect(() => {
+        const editor = editorRef.current;
+        if (!editor || isInitializedRef.current)
+            return;
+        // Load initial content
+        const content = initialContent || createEmptyContent();
+        isUpdatingRef.current = true;
+        contentToDOM(content, editor, customLinkComponent);
+        historyRef.current.push(content);
+        isUpdatingRef.current = false;
+        isInitializedRef.current = true;
+        // Normalize all checkbox lists (own + Lexical + GitHub formats)
+        ensureAllCheckboxes(editor);
+        // MutationObserver: ensure new checkbox list items get correct attributes
+        const observer = new MutationObserver((mutations) => {
+            if (isUpdatingRef.current)
+                return;
+            let needsUpdate = false;
+            for (const mutation of mutations) {
+                for (let i = 0; i < mutation.addedNodes.length; i++) {
+                    const node = mutation.addedNodes[i];
+                    if (node.nodeType !== Node.ELEMENT_NODE)
+                        continue;
+                    const el = node;
+                    if (el.tagName === "LI" &&
+                        el.closest("ul.rte-checkbox-list")) {
+                        needsUpdate = true;
+                        break;
+                    }
+                    if (el.tagName === "UL" &&
+                        el.classList.contains("rte-checkbox-list")) {
+                        needsUpdate = true;
+                        break;
+                    }
+                    if (el.querySelector("ul.rte-checkbox-list li")) {
+                        needsUpdate = true;
+                        break;
+                    }
+                }
+                if (needsUpdate)
+                    break;
+            }
+            if (needsUpdate) {
+                setTimeout(() => ensureAllCheckboxes(editor), 0);
+            }
+        });
+        observer.observe(editor, { childList: true, subtree: true });
+        return () => {
+            observer.disconnect();
+        };
+        // Only run once on mount
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+}
+
+/**
+ * Hook for editor selection management.
+ */
+function useEditorSelection() {
+    const restoreSelection = useCallback((editor) => {
+        if (typeof window === "undefined" ||
+            typeof document === "undefined")
+            return;
+        const range = document.createRange();
+        const selection = window.getSelection();
+        if (editor.firstChild) {
+            range.setStart(editor.firstChild, 0);
+            range.collapse(true);
+            selection?.removeAllRanges();
+            selection?.addRange(range);
+        }
+    }, []);
+    return { restoreSelection };
+}
+
+const Toolbar = ({ plugins, editorAPI, className, }) => {
+    const [updateTrigger, setUpdateTrigger] = useState(0);
+    const [isClient, setIsClient] = useState(false);
+    useEffect(() => {
+        setIsClient(true);
+        const handleSelectionChange = () => {
+            setUpdateTrigger((prev) => prev + 1);
+        };
+        const handleMouseUp = () => {
+            setTimeout(handleSelectionChange, 10);
+        };
+        const handleKeyUp = () => {
+            setTimeout(handleSelectionChange, 10);
+        };
+        if (typeof document !== 'undefined') {
+            document.addEventListener("selectionchange", handleSelectionChange);
+            document.addEventListener("mouseup", handleMouseUp);
+            document.addEventListener("keyup", handleKeyUp);
+        }
+        return () => {
+            if (typeof document !== 'undefined') {
+                document.removeEventListener("selectionchange", handleSelectionChange);
+                document.removeEventListener("mouseup", handleMouseUp);
+                document.removeEventListener("keyup", handleKeyUp);
+            }
+        };
+    }, []);
+    const handlePluginClick = (plugin, value) => {
+        if (plugin.canExecute?.(editorAPI) !== false) {
+            if (plugin.execute) {
+                plugin.execute(editorAPI, value);
+            }
+            else if (plugin.command && value !== undefined) {
+                editorAPI.executeCommand(plugin.command, value);
+            }
+            else if (plugin.command) {
+                editorAPI.executeCommand(plugin.command);
+            }
+            setTimeout(() => setUpdateTrigger((prev) => prev + 1), 50);
+        }
+    };
+    const leftPlugins = plugins.filter((p) => p.name !== "clearFormatting");
+    const clearFormattingPlugin = plugins.find((p) => p.name === "clearFormatting");
+    return (jsxs("div", { className: `rte-toolbar rte-toolbar-sticky ${className || ""}`, children: [jsx("div", { className: "rte-toolbar-left", children: leftPlugins.map((plugin) => {
+                    if (!plugin.renderButton)
+                        return null;
+                    const isActive = isClient && plugin.isActive
+                        ? plugin.isActive(editorAPI)
+                        : false;
+                    const canExecute = isClient && plugin.canExecute
+                        ? plugin.canExecute(editorAPI)
+                        : true;
+                    const currentValue = isClient && plugin.getCurrentValue
+                        ? plugin.getCurrentValue(editorAPI)
+                        : undefined;
+                    const buttonProps = {
+                        isActive,
+                        onClick: () => handlePluginClick(plugin),
+                        disabled: !canExecute,
+                        onSelect: (value) => handlePluginClick(plugin, value),
+                        editorAPI,
+                        currentValue,
+                    };
+                    return (jsx(React.Fragment, { children: plugin.renderButton(buttonProps) }, plugin.name));
+                }) }), clearFormattingPlugin && clearFormattingPlugin.renderButton && (jsxs("div", { className: "rte-toolbar-right", children: [jsx("div", { className: "rte-toolbar-divider" }), (() => {
+                        const isActive = isClient && clearFormattingPlugin.isActive
+                            ? clearFormattingPlugin.isActive(editorAPI)
+                            : false;
+                        const canExecute = isClient && clearFormattingPlugin.canExecute
+                            ? clearFormattingPlugin.canExecute(editorAPI)
+                            : true;
+                        const buttonProps = {
+                            isActive,
+                            onClick: () => handlePluginClick(clearFormattingPlugin),
+                            disabled: !canExecute,
+                            editorAPI,
+                        };
+                        return (jsx(React.Fragment, { children: clearFormattingPlugin.renderButton(buttonProps) }, clearFormattingPlugin.name));
+                    })()] }))] }));
+};
+
+const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholder = "Text eingeben...", className, toolbarClassName, editorClassName, fontSizes, colors, headings, customLinkComponent, customHeadingRenderer, customRenderer, onEditorAPIReady, theme, onImageUpload, }) => {
+    // --- Shared Refs ---
+    const editorRef = useRef(null);
+    const historyRef = useRef(new HistoryManager());
+    const isUpdatingRef = useRef(false);
+    // --- Plugins ---
+    const plugins = useMemo(() => {
+        const allPlugins = [...(providedPlugins || defaultPlugins)];
+        if (headings && headings.length > 0) {
+            const blockFormatIndex = allPlugins.findIndex((p) => p.name === "blockFormat");
+            if (blockFormatIndex !== -1) {
+                allPlugins[blockFormatIndex] =
+                    createBlockFormatPlugin(headings);
+            }
+            else {
+                const redoIndex = allPlugins.findIndex((p) => p.name === "redo");
+                if (redoIndex !== -1) {
+                    allPlugins.splice(redoIndex + 1, 0, createBlockFormatPlugin(headings));
+                }
+                else {
+                    allPlugins.push(createBlockFormatPlugin(headings));
+                }
+            }
+        }
+        if (fontSizes && fontSizes.length > 0) {
+            const blockFormatIndex = allPlugins.findIndex((p) => p.name === "blockFormat");
+            if (blockFormatIndex !== -1) {
+                allPlugins.splice(blockFormatIndex + 1, 0, createFontSizePlugin(fontSizes));
+            }
+            else {
+                allPlugins.push(createFontSizePlugin(fontSizes));
+            }
+        }
+        if (colors && colors.length > 0) {
+            allPlugins.push(createTextColorPlugin(colors));
+            allPlugins.push(createBackgroundColorPlugin(colors));
+        }
+        allPlugins.push(createImagePlugin(onImageUpload));
+        return allPlugins;
+    }, [providedPlugins, fontSizes, colors, headings, onImageUpload]);
+    // --- Callbacks ---
+    const notifyChange = useCallback((content) => {
+        if (onChange)
+            onChange(content);
+    }, [onChange]);
+    const getDomContent = useCallback(() => {
+        const editor = editorRef.current;
+        if (!editor)
+            return createEmptyContent();
+        return domToContent(editor);
+    }, []);
+    const pushToHistory = useCallback((content) => {
+        historyRef.current.push(content);
+    }, []);
+    // --- Hooks ---
+    const { restoreSelection } = useEditorSelection();
+    const checkbox = useCheckbox({
+        editorRef,
+        isUpdatingRef,
+        pushToHistory,
+        notifyChange,
+        getDomContent,
+    });
+    // --- Undo / Redo ---
+    const undo = useCallback(() => {
+        const content = historyRef.current.undo();
+        const editor = editorRef.current;
+        if (content && editor) {
+            isUpdatingRef.current = true;
+            contentToDOM(content, editor, customLinkComponent);
+            restoreSelection(editor);
+            isUpdatingRef.current = false;
+            notifyChange(content);
+        }
+    }, [
+        customLinkComponent,
+        customHeadingRenderer,
+        restoreSelection,
+        notifyChange,
+    ]);
+    const redo = useCallback(() => {
+        const content = historyRef.current.redo();
+        const editor = editorRef.current;
+        if (content && editor) {
+            isUpdatingRef.current = true;
+            contentToDOM(content, editor, customLinkComponent);
+            restoreSelection(editor);
+            isUpdatingRef.current = false;
+            notifyChange(content);
+        }
+    }, [
+        customLinkComponent,
+        customHeadingRenderer,
+        restoreSelection,
+        notifyChange,
+    ]);
+    // --- Editor API ---
+    const editorAPI = useMemo(() => {
+        const executeCommand = (command, value) => {
+            const editor = editorRef.current;
+            if (!editor)
+                return false;
+            // Save history before non-history commands
+            if (command !== "undo" &&
+                command !== "redo" &&
+                command !== "insertImage" &&
+                command !== "insertCheckboxList") {
+                const currentContent = domToContent(editor);
+                historyRef.current.push(currentContent);
+            }
+            if (command === "undo") {
+                undo();
+                return true;
+            }
+            if (command === "redo") {
+                redo();
+                return true;
+            }
+            if (command === "insertCheckboxList") {
+                return checkbox.insertCheckboxList(editor);
+            }
+            if (command === "insertImage" && value) {
+                return handleInsertImage(editor, value, isUpdatingRef, historyRef, notifyChange);
+            }
+            // General commands via document.execCommand
+            ensureEditorFocused(editor);
+            document.execCommand(command, false, value);
+            setTimeout(() => {
+                if (editor && !isUpdatingRef.current) {
+                    ensureAllCheckboxes(editor);
+                    const content = domToContent(editor);
+                    notifyChange(content);
+                }
+            }, 0);
+            return true;
+        };
+        return {
+            executeCommand,
+            getSelection: () => {
+                if (typeof window === "undefined")
+                    return null;
                 return window.getSelection();
             },
             getContent: () => {
                 const editor = editorRef.current;
                 if (!editor)
                     return createEmptyContent();
+                ensureAllCheckboxes(editor);
                 return domToContent(editor);
             },
             setContent: (content) => {
@@ -1751,23 +2914,20 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
                 const range = selection.getRangeAt(0);
                 const block = document.createElement(type);
                 if (attributes) {
-                    Object.entries(attributes).forEach(([key, value]) => {
-                        block.setAttribute(key, value);
+                    Object.entries(attributes).forEach(([key, val]) => {
+                        block.setAttribute(key, val);
                     });
                 }
                 range.insertNode(block);
-                const textNode = document.createTextNode("\u200B"); // Zero-width space
+                const textNode = document.createTextNode("\u200B");
                 block.appendChild(textNode);
-                // Cursor setzen
                 range.setStartAfter(textNode);
                 range.collapse(true);
                 selection.removeAllRanges();
                 selection.addRange(range);
                 const editor = editorRef.current;
-                if (editor) {
-                    const content = domToContent(editor);
-                    notifyChange(content);
-                }
+                if (editor)
+                    notifyChange(domToContent(editor));
             },
             insertInline: (type, attributes) => {
                 const selection = window.getSelection();
@@ -1776,282 +2936,120 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
                 const range = selection.getRangeAt(0);
                 const inline = document.createElement(type);
                 if (attributes) {
-                    Object.entries(attributes).forEach(([key, value]) => {
-                        inline.setAttribute(key, value);
+                    Object.entries(attributes).forEach(([key, val]) => {
+                        inline.setAttribute(key, val);
                     });
                 }
                 try {
                     range.surroundContents(inline);
                 }
-                catch (e) {
-                    // Falls surroundContents fehlschlägt, versuche es anders
+                catch (_) {
                     const contents = range.extractContents();
                     inline.appendChild(contents);
                     range.insertNode(inline);
                 }
-                // Cursor setzen
-                range.setStartAfter(inline);
-                range.collapse(true);
-                selection.removeAllRanges();
-                selection.addRange(range);
-                const editor = editorRef.current;
-                if (editor) {
-                    const content = domToContent(editor);
-                    notifyChange(content);
-                }
-            },
-            undo: () => {
-                executeCommand("undo");
-            },
-            redo: () => {
-                executeCommand("redo");
-            },
-            canUndo: () => {
-                return historyRef.current.canUndo();
-            },
-            canRedo: () => {
-                return historyRef.current.canRedo();
-            },
-            importHtml: (htmlString) => {
-                const content = htmlToContent(htmlString);
-                const editor = editorRef.current;
-                if (editor) {
-                    isUpdatingRef.current = true;
-                    contentToDOM(content, editor, customLinkComponent);
-                    historyRef.current.push(content);
-                    isUpdatingRef.current = false;
-                    notifyChange(content);
-                }
-                return content;
-            },
-            exportHtml: () => {
-                const editor = editorRef.current;
-                if (!editor)
-                    return "";
-                const content = domToContent(editor);
-                return contentToHTML(content);
-            },
-            clearFormatting: () => {
-                const editor = editorRef.current;
-                if (!editor)
-                    return;
-                const selection = window.getSelection();
-                if (selection && selection.rangeCount > 0) {
-                    const currentContent = domToContent(editor);
-                    historyRef.current.push(currentContent);
-                    clearFormatting(selection);
-                    setTimeout(() => {
-                        if (editor) {
-                            const content = domToContent(editor);
-                            notifyChange(content);
-                        }
-                    }, 0);
-                }
-            },
-            clearTextColor: () => {
-                const editor = editorRef.current;
-                if (!editor)
-                    return;
-                const selection = window.getSelection();
-                if (selection && selection.rangeCount > 0) {
-                    const currentContent = domToContent(editor);
-                    historyRef.current.push(currentContent);
-                    clearTextColor(selection);
-                    setTimeout(() => {
-                        if (editor) {
-                            const content = domToContent(editor);
-                            notifyChange(content);
-                        }
-                    }, 0);
-                }
-            },
-            clearBackgroundColor: () => {
-                const editor = editorRef.current;
-                if (!editor)
-                    return;
-                const selection = window.getSelection();
-                if (selection && selection.rangeCount > 0) {
-                    const currentContent = domToContent(editor);
-                    historyRef.current.push(currentContent);
-                    clearBackgroundColor(selection);
-                    setTimeout(() => {
-                        if (editor) {
-                            const content = domToContent(editor);
-                            notifyChange(content);
-                        }
-                    }, 0);
-                }
-            },
-            clearFontSize: () => {
-                const editor = editorRef.current;
-                if (!editor)
-                    return;
-                const selection = window.getSelection();
-                if (selection && selection.rangeCount > 0) {
-                    const currentContent = domToContent(editor);
-                    historyRef.current.push(currentContent);
-                    clearFontSize(selection);
-                    setTimeout(() => {
-                        if (editor) {
-                            const content = domToContent(editor);
-                            notifyChange(content);
-                        }
-                    }, 0);
-                }
-            },
-            clearLinks: () => {
-                const editor = editorRef.current;
-                if (!editor)
-                    return;
-                const selection = window.getSelection();
-                if (selection && selection.rangeCount > 0) {
-                    const currentContent = domToContent(editor);
-                    historyRef.current.push(currentContent);
-                    clearLinks(selection);
-                    setTimeout(() => {
-                        if (editor) {
-                            const content = domToContent(editor);
-                            notifyChange(content);
-                        }
-                    }, 0);
-                }
-            },
-            indentListItem: () => {
-                const editor = editorRef.current;
-                if (!editor)
-                    return;
-                const selection = window.getSelection();
-                if (selection && selection.rangeCount > 0) {
-                    const currentContent = domToContent(editor);
-                    historyRef.current.push(currentContent);
-                    indentListItem(selection);
-                    setTimeout(() => {
-                        if (editor) {
-                            const content = domToContent(editor);
-                            notifyChange(content);
-                        }
-                    }, 0);
-                }
-            },
-            outdentListItem: () => {
-                const editor = editorRef.current;
-                if (!editor)
-                    return;
-                const selection = window.getSelection();
-                if (selection && selection.rangeCount > 0) {
-                    const currentContent = domToContent(editor);
-                    historyRef.current.push(currentContent);
-                    outdentListItem(selection);
-                    setTimeout(() => {
-                        if (editor) {
-                            const content = domToContent(editor);
-                            notifyChange(content);
-                        }
-                    }, 0);
-                }
-            },
-        };
-    }, [
-        notifyChange,
-        restoreSelection,
-        customLinkComponent,
-        customHeadingRenderer,
-    ]);
-    useEffect(() => {
-        if (onEditorAPIReady) {
-            onEditorAPIReady(editorAPI);
-        }
-    }, [editorAPI, onEditorAPIReady]);
-    const isInitializedRef = useRef(false);
-    useEffect(() => {
-        const editor = editorRef.current;
-        if (!editor || isInitializedRef.current)
-            return;
-        const content = initialContent || createEmptyContent();
-        isUpdatingRef.current = true;
-        contentToDOM(content, editor, customLinkComponent);
-        historyRef.current.push(content);
-        isUpdatingRef.current = false;
-        isInitializedRef.current = true;
-        let inputTimeout = null;
-        const handleInput = () => {
-            if (isUpdatingRef.current)
-                return;
-            const content = domToContent(editor);
-            notifyChange(content);
-            if (inputTimeout) {
-                clearTimeout(inputTimeout);
-            }
-            inputTimeout = setTimeout(() => {
-                historyRef.current.push(content);
-                inputTimeout = null;
-            }, 300);
-        };
-        const handleKeyDown = (e) => {
-            const isModifierPressed = e.metaKey || e.ctrlKey;
-            if (e.key === "Tab" && !isModifierPressed && !e.altKey) {
-                // Immer preventDefault aufrufen (wie Lexical), damit Tab den Fokus nicht aus dem Editor entfernt
-                e.preventDefault();
-                e.stopPropagation();
-                e.stopImmediatePropagation();
-                const selection = window.getSelection();
-                if (!selection || selection.rangeCount === 0) {
-                    // Keine Selection: Tab verhindern, Fokus bleibt im Editor
-                    return;
-                }
-                const range = selection.getRangeAt(0);
-                const container = range.commonAncestorContainer;
-                if (!editor.contains(container)) {
-                    // Container nicht im Editor: Tab verhindern
-                    return;
-                }
-                // Prüfe ob wir in einer Liste sind
-                const listItem = container.nodeType === Node.TEXT_NODE
-                    ? container.parentElement?.closest("li")
-                    : container.closest("li");
-                if (listItem && editor.contains(listItem)) {
-                    // In Liste: Indent/Outdent durchführen
-                    const currentContent = domToContent(editor);
-                    historyRef.current.push(currentContent);
-                    if (e.shiftKey) {
-                        outdentListItem(selection);
-                    }
-                    else {
-                        indentListItem(selection);
-                    }
-                    setTimeout(() => {
-                        if (editor) {
-                            const content = domToContent(editor);
-                            notifyChange(content);
-                        }
-                    }, 0);
-                    return;
-                }
-                // Nicht in Liste: Tab verhindern, aber kein Tab-Zeichen einfügen
-                // Der Fokus bleibt im Editor (durch preventDefault)
-            }
-            if (isModifierPressed && e.key === "z" && !e.shiftKey) {
-                e.preventDefault();
-                e.stopPropagation();
-                editorAPI.undo();
-            }
-            else if (isModifierPressed &&
-                (e.key === "y" || (e.key === "z" && e.shiftKey))) {
-                e.preventDefault();
-                e.stopPropagation();
-                editorAPI.redo();
-            }
-        };
-        editor.addEventListener("input", handleInput);
-        editor.addEventListener("keydown", handleKeyDown, true);
-        return () => {
-            editor.removeEventListener("input", handleInput);
-            editor.removeEventListener("keydown", handleKeyDown, true);
-            if (inputTimeout) {
-                clearTimeout(inputTimeout);
-            }
+                range.setStartAfter(inline);
+                range.collapse(true);
+                selection.removeAllRanges();
+                selection.addRange(range);
+                const editor = editorRef.current;
+                if (editor)
+                    notifyChange(domToContent(editor));
+            },
+            undo: () => undo(),
+            redo: () => redo(),
+            canUndo: () => historyRef.current.canUndo(),
+            canRedo: () => historyRef.current.canRedo(),
+            importHtml: (htmlString) => {
+                const content = htmlToContent(htmlString);
+                const editor = editorRef.current;
+                if (editor) {
+                    isUpdatingRef.current = true;
+                    contentToDOM(content, editor, customLinkComponent);
+                    historyRef.current.push(content);
+                    isUpdatingRef.current = false;
+                    notifyChange(content);
+                }
+                return content;
+            },
+            exportHtml: () => {
+                const editor = editorRef.current;
+                if (!editor)
+                    return "";
+                return contentToHTML(domToContent(editor));
+            },
+            clearFormatting: () => {
+                executeWithHistory((selection) => clearFormatting(selection));
+            },
+            clearTextColor: () => {
+                executeWithHistory((selection) => clearTextColor(selection));
+            },
+            clearBackgroundColor: () => {
+                executeWithHistory((selection) => clearBackgroundColor(selection));
+            },
+            clearFontSize: () => {
+                executeWithHistory((selection) => clearFontSize(selection));
+            },
+            clearLinks: () => {
+                executeWithHistory((selection) => clearLinks(selection));
+            },
+            indentListItem: () => {
+                executeWithHistory((selection) => indentListItem(selection));
+            },
+            outdentListItem: () => {
+                executeWithHistory((selection) => outdentListItem(selection));
+            },
         };
-    }, [editorAPI, notifyChange]);
+        /** Helper: push history, execute operation, then notify change. */
+        function executeWithHistory(operation) {
+            const editor = editorRef.current;
+            if (!editor)
+                return;
+            const selection = window.getSelection();
+            if (!selection || selection.rangeCount === 0)
+                return;
+            const currentContent = domToContent(editor);
+            historyRef.current.push(currentContent);
+            operation(selection);
+            setTimeout(() => {
+                if (editor)
+                    notifyChange(domToContent(editor));
+            }, 0);
+        }
+    }, [
+        undo,
+        redo,
+        checkbox,
+        notifyChange,
+        customLinkComponent,
+        customHeadingRenderer,
+    ]);
+    // --- Initialize editor ---
+    useEditorInit({
+        editorRef,
+        historyRef,
+        isUpdatingRef,
+        initialContent,
+        customLinkComponent,
+        customHeadingRenderer,
+    });
+    // --- Set up event listeners ---
+    useEditorEvents({
+        editorRef,
+        historyRef,
+        isUpdatingRef,
+        notifyChange,
+        handleCheckboxKeyDown: checkbox.handleCheckboxKeyDown,
+        handleCheckboxEnter: checkbox.handleCheckboxEnter,
+        undo,
+        redo,
+    });
+    // --- Expose editor API ---
+    useEffect(() => {
+        if (onEditorAPIReady)
+            onEditorAPIReady(editorAPI);
+    }, [editorAPI, onEditorAPIReady]);
+    // --- Paste handler ---
     const handlePaste = (e) => {
         e.preventDefault();
         const html = e.clipboardData.getData("text/html");
@@ -2079,11 +3077,10 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
                     }
                     selection.removeAllRanges();
                     selection.addRange(range);
-                    const content = domToContent(editor);
-                    notifyChange(content);
+                    notifyChange(domToContent(editor));
                 }
             }
-            catch (error) {
+            catch (_) {
                 document.execCommand("insertText", false, text);
             }
         }
@@ -2091,6 +3088,7 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
             document.execCommand("insertText", false, text);
         }
     };
+    // --- Theme styles ---
     const containerStyle = theme
         ? {
             ...(theme.borderColor &&
@@ -2121,6 +3119,131 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
         : {};
     return (jsxs("div", { className: `rte-container ${className || ""}`, style: containerStyle, children: [jsx(Toolbar, { plugins: plugins, editorAPI: editorAPI, className: toolbarClassName }), jsx("div", { ref: editorRef, contentEditable: true, className: `rte-editor ${editorClassName || ""}`, "data-placeholder": placeholder, onPaste: handlePaste, suppressContentEditableWarning: true })] }));
 };
+// --- Helper: Insert Image ---
+function handleInsertImage(editor, value, isUpdatingRef, historyRef, notifyChange) {
+    let selection = window.getSelection();
+    if (!selection)
+        return false;
+    if (document.activeElement !== editor) {
+        editor.focus();
+    }
+    if (selection.rangeCount === 0) {
+        const range = document.createRange();
+        if (editor.childNodes.length > 0) {
+            const lastChild = editor.childNodes[editor.childNodes.length - 1];
+            range.setStartAfter(lastChild);
+            range.collapse(true);
+        }
+        else {
+            const img = createImageElement(value);
+            editor.appendChild(img);
+            const newRange = document.createRange();
+            newRange.setStartAfter(img);
+            newRange.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(newRange);
+            saveAndNotify(editor, isUpdatingRef, historyRef, notifyChange);
+            return true;
+        }
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+    if (selection.rangeCount === 0)
+        return false;
+    const range = selection.getRangeAt(0);
+    const container = range.commonAncestorContainer;
+    let parentElement = null;
+    if (container.nodeType === Node.TEXT_NODE) {
+        parentElement = container.parentElement;
+    }
+    else if (container.nodeType === Node.ELEMENT_NODE) {
+        parentElement = container;
+    }
+    const img = createImageElement(value);
+    if (parentElement &&
+        parentElement !== editor &&
+        /^(P|DIV|H[1-6])$/.test(parentElement.tagName)) {
+        if (parentElement.nextSibling) {
+            editor.insertBefore(img, parentElement.nextSibling);
+        }
+        else {
+            editor.appendChild(img);
+        }
+    }
+    else {
+        try {
+            range.insertNode(img);
+        }
+        catch (_) {
+            editor.appendChild(img);
+        }
+    }
+    const newRange = document.createRange();
+    newRange.setStartAfter(img);
+    newRange.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(newRange);
+    saveAndNotify(editor, isUpdatingRef, historyRef, notifyChange);
+    return true;
+}
+function createImageElement(src) {
+    const img = document.createElement("img");
+    img.setAttribute("src", src);
+    img.setAttribute("alt", "");
+    img.style.maxWidth = "100%";
+    img.style.height = "auto";
+    img.style.display = "block";
+    img.style.margin = "16px 0";
+    return img;
+}
+function saveAndNotify(editor, isUpdatingRef, historyRef, notifyChange) {
+    isUpdatingRef.current = true;
+    setTimeout(() => {
+        const content = domToContent(editor);
+        historyRef.current.push(content);
+        isUpdatingRef.current = false;
+        notifyChange(content);
+    }, 0);
+}
+/** Ensures the editor is focused and has a valid selection. */
+function ensureEditorFocused(editor) {
+    const selection = window.getSelection();
+    let savedRange = null;
+    if (selection && selection.rangeCount > 0) {
+        savedRange = selection.getRangeAt(0).cloneRange();
+    }
+    if (document.activeElement !== editor) {
+        editor.focus();
+    }
+    if (!selection || selection.rangeCount === 0) {
+        const range = document.createRange();
+        if (editor.childNodes.length > 0) {
+            const lastChild = editor.childNodes[editor.childNodes.length - 1];
+            if (lastChild.nodeType === Node.TEXT_NODE) {
+                range.setStart(lastChild, lastChild.textContent?.length || 0);
+                range.setEnd(lastChild, lastChild.textContent?.length || 0);
+            }
+            else {
+                range.selectNodeContents(lastChild);
+                range.collapse(false);
+            }
+        }
+        else {
+            const p = document.createElement("p");
+            editor.appendChild(p);
+            const textNode = document.createTextNode("");
+            p.appendChild(textNode);
+            range.setStart(textNode, 0);
+            range.setEnd(textNode, 0);
+        }
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+    }
+    else if (savedRange) {
+        selection.removeAllRanges();
+        selection.addRange(savedRange);
+    }
+}
 
 const defaultHeadings = ["h1", "h2", "h3"];
 const headingLabels = {
@@ -2349,5 +3472,465 @@ const orderedListPlugin = {
     },
 };
 
-export { Dropdown, Editor, HistoryManager, Toolbar, blockquotePlugin, boldPlugin, clearFormattingPlugin, contentToDOM, contentToHTML, createBackgroundColorPlugin, createBlockFormatPlugin, createEmptyContent, createFontSizePlugin, createHeadingsPlugin, createImagePlugin, createLinkPlugin, createTextColorPlugin, Editor as default, defaultPlugins, domToContent, getCurrentBackgroundColor, getCurrentFontSize, getCurrentHeading, getCurrentTextColor, htmlToContent, indentListItem, indentListItemPlugin, italicPlugin, linkPlugin, orderedListPlugin, outdentListItem, outdentListItemPlugin, redoPlugin, underlinePlugin, undoPlugin, unorderedListPlugin };
+const alignmentLabels = {
+    left: "Links",
+    center: "Zentriert",
+    right: "Rechts",
+    justify: "Blocksatz",
+};
+const alignmentIcons = {
+    left: "mdi:format-align-left",
+    center: "mdi:format-align-center",
+    right: "mdi:format-align-right",
+    justify: "mdi:format-align-justify",
+};
+const alignmentCommands = {
+    left: "justifyLeft",
+    center: "justifyCenter",
+    right: "justifyRight",
+    justify: "justifyFull",
+};
+/**
+ * Detects current text alignment at cursor position.
+ */
+function detectCurrentAlignment() {
+    if (typeof document === "undefined")
+        return undefined;
+    const selection = document.getSelection();
+    if (!selection || selection.rangeCount === 0)
+        return undefined;
+    const range = selection.getRangeAt(0);
+    const container = range.commonAncestorContainer;
+    const element = container.nodeType === Node.TEXT_NODE
+        ? container.parentElement
+        : container;
+    if (!element)
+        return undefined;
+    // Walk up to find the block-level element
+    let block = element;
+    const blockTags = new Set([
+        "P",
+        "DIV",
+        "H1",
+        "H2",
+        "H3",
+        "H4",
+        "H5",
+        "H6",
+        "LI",
+        "BLOCKQUOTE",
+        "TD",
+        "TH",
+    ]);
+    while (block && !blockTags.has(block.tagName)) {
+        block = block.parentElement;
+    }
+    if (!block)
+        return undefined;
+    const align = block.style.textAlign || window.getComputedStyle(block).textAlign;
+    if (align === "center")
+        return "center";
+    if (align === "right")
+        return "right";
+    if (align === "justify")
+        return "justify";
+    return "left";
+}
+/**
+ * Creates an alignment plugin with a dropdown.
+ * @param alignments - Which alignments to offer, defaults to all four.
+ */
+function createAlignmentPlugin(alignments = ["left", "center", "right", "justify"]) {
+    const options = alignments.map((a) => ({
+        value: a,
+        label: alignmentLabels[a] || a,
+        icon: alignmentIcons[a],
+    }));
+    return {
+        name: "alignment",
+        type: "block",
+        renderButton: (props) => {
+            const onSelect = props.onSelect;
+            const currentValue = props.currentValue ||
+                detectCurrentAlignment() ||
+                "left";
+            return (jsx(Dropdown, { icon: alignmentIcons[currentValue] || "mdi:format-align-left", label: "Ausrichtung", options: options, onSelect: (value) => {
+                    if (onSelect)
+                        onSelect(value);
+                }, currentValue: currentValue, disabled: props.disabled }));
+        },
+        getCurrentValue: () => detectCurrentAlignment(),
+        execute: (_editor, value) => {
+            if (!value)
+                return;
+            const command = alignmentCommands[value];
+            if (command) {
+                document.execCommand(command, false);
+            }
+        },
+        isActive: () => {
+            const align = detectCurrentAlignment();
+            return align !== undefined && align !== "left";
+        },
+        canExecute: () => true,
+    };
+}
+/** Pre-built alignment plugin with all four options */
+const alignmentPlugin = createAlignmentPlugin();
+
+const InsertTableDialog = ({ onInsert, onClose, }) => {
+    const [rows, setRows] = useState(3);
+    const [cols, setCols] = useState(3);
+    const dialogRef = useRef(null);
+    useEffect(() => {
+        const handler = (e) => {
+            if (dialogRef.current &&
+                !dialogRef.current.contains(e.target)) {
+                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: "Tabelle einf\u00FCgen" }), 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: "Einf\u00FCgen" })] }));
+};
+const TableContextMenu = ({ x, y, onClose, }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const handler = (e) => {
+            if (ref.current && !ref.current.contains(e.target)) {
+                onClose();
+            }
+        };
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, [onClose]);
+    const action = (fn) => {
+        fn();
+        onClose();
+    };
+    return (jsxs("div", { ref: ref, className: "rte-table-context-menu", style: { position: "fixed", left: x, top: y }, children: [jsx("button", { type: "button", onClick: () => action(() => insertRow("above")), children: "Zeile oben einf\u00FCgen" }), jsx("button", { type: "button", onClick: () => action(() => insertRow("below")), children: "Zeile unten einf\u00FCgen" }), jsx("div", { className: "rte-table-context-divider" }), jsx("button", { type: "button", onClick: () => action(() => insertColumn("left")), children: "Spalte links einf\u00FCgen" }), jsx("button", { type: "button", onClick: () => action(() => insertColumn("right")), children: "Spalte rechts einf\u00FCgen" }), jsx("div", { className: "rte-table-context-divider" }), jsx("button", { type: "button", className: "rte-table-context-danger", onClick: () => action(deleteRow), children: "Zeile l\u00F6schen" }), jsx("button", { type: "button", className: "rte-table-context-danger", onClick: () => action(deleteColumn), children: "Spalte l\u00F6schen" }), jsx("button", { type: "button", className: "rte-table-context-danger", onClick: () => action(deleteTable), children: "Tabelle l\u00F6schen" })] }));
+};
+const TableToolbarButton = (props) => {
+    const [showDialog, setShowDialog] = useState(false);
+    const handleInsert = useCallback((rows, cols) => {
+        setShowDialog(false);
+        if (!props.editorAPI)
+            return;
+        const sel = document.getSelection();
+        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
+            : container;
+        const editorRoot = editorEl?.closest("[contenteditable]");
+        if (!editorRoot)
+            return;
+        const table = createTable(rows, cols);
+        // Insert after the current block element
+        let block = editorEl;
+        while (block &&
+            block !== editorRoot &&
+            block.parentElement !== editorRoot) {
+            block = block.parentElement;
+        }
+        if (block && block !== editorRoot) {
+            block.parentNode?.insertBefore(table, block.nextSibling);
+        }
+        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();
+            newRange.setStart(firstCell, 0);
+            newRange.collapse(true);
+            sel.removeAllRanges();
+            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: "Tabelle", "aria-label": "Tabelle", children: jsx(IconWrapper, { icon: "mdi:table", width: 18, height: 18 }) }), showDialog && (jsx(InsertTableDialog, { onInsert: handleInsert, onClose: () => setShowDialog(false) }))] }));
+};
+/* ══════════════════════════════════════════════════════════════════════════
+   Table Plugin export
+   ══════════════════════════════════════════════════════════════════════ */
+const tablePlugin = {
+    name: "table",
+    type: "command",
+    renderButton: (props) => (jsx(TableToolbarButton, { ...props, editorAPI: props.editorAPI })),
+    execute: () => {
+        // Insertion is handled by the dialog component
+    },
+    isActive: () => getActiveTable() !== null,
+    canExecute: () => true,
+};
+/* ══════════════════════════════════════════════════════════════════════════
+   TableContextMenuProvider — wrap the editor to enable right-click menu
+   ══════════════════════════════════════════════════════════════════════ */
+const TableContextMenuProvider = ({ children }) => {
+    const [menu, setMenu] = useState(null);
+    useEffect(() => {
+        const handler = (e) => {
+            const target = e.target;
+            const cell = target.closest("td, th");
+            const editorRoot = target.closest("[contenteditable]");
+            if (cell && editorRoot) {
+                e.preventDefault();
+                setMenu({ x: e.clientX, y: e.clientY });
+            }
+        };
+        document.addEventListener("contextmenu", handler);
+        return () => document.removeEventListener("contextmenu", handler);
+    }, []);
+    return (jsxs(Fragment, { children: [children, menu && (jsx(TableContextMenu, { x: menu.x, y: menu.y, onClose: () => setMenu(null) }))] }));
+};
+
+const EMPTY_LINK = {
+    url: "",
+    target: "_self",
+    rel: "",
+    title: "",
+    pageRef: "",
+    urlExtra: "",
+};
+const LinkDialog = ({ initialData, options, onSave, onRemove, onClose, isEditing, }) => {
+    const [data, setData] = useState(initialData);
+    const [showAdvanced, setShowAdvanced] = useState(false);
+    const dialogRef = useRef(null);
+    const urlInputRef = useRef(null);
+    useEffect(() => {
+        urlInputRef.current?.focus();
+    }, []);
+    useEffect(() => {
+        const handler = (e) => {
+            if (dialogRef.current &&
+                !dialogRef.current.contains(e.target)) {
+                onClose();
+            }
+        };
+        // Delay to avoid closing immediately on the same click
+        const timer = setTimeout(() => {
+            document.addEventListener("mousedown", handler);
+        }, 50);
+        return () => {
+            clearTimeout(timer);
+            document.removeEventListener("mousedown", handler);
+        };
+    }, [onClose]);
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            onSave(data);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            onClose();
+        }
+    };
+    const set = (key, value) => setData((prev) => ({ ...prev, [key]: value }));
+    const hasAdvancedOptions = options.enableRel ||
+        options.enableTitle ||
+        options.enableUrlExtra ||
+        options.enablePageRef;
+    return (jsxs("div", { ref: dialogRef, className: "rte-link-dialog", onKeyDown: handleKeyDown, children: [jsx("div", { className: "rte-link-dialog-title", children: isEditing ? "Link bearbeiten" : "Link einfügen" }), jsxs("div", { className: "rte-link-dialog-field", children: [jsx("label", { className: "rte-link-dialog-label", children: "URL" }), jsx("input", { ref: urlInputRef, type: "url", className: "rte-link-dialog-input", value: data.url, onChange: (e) => set("url", e.target.value), placeholder: "https://..." })] }), options.enableTarget && (jsxs("div", { className: "rte-link-dialog-field", children: [jsx("label", { className: "rte-link-dialog-label", children: "Ziel" }), jsxs("select", { className: "rte-link-dialog-select", value: data.target, onChange: (e) => set("target", e.target.value), children: [jsx("option", { value: "_self", children: "Gleiches Fenster" }), jsx("option", { value: "_blank", children: "Neues Fenster" })] })] })), hasAdvancedOptions && (jsxs(Fragment, { children: [jsx("button", { type: "button", className: "rte-link-dialog-toggle", onClick: () => setShowAdvanced(!showAdvanced), children: showAdvanced ? "Erweitert ausblenden" : "Erweitert anzeigen" }), showAdvanced && (jsxs("div", { className: "rte-link-dialog-advanced", children: [options.enablePageRef && (jsxs("div", { className: "rte-link-dialog-field", children: [jsx("label", { className: "rte-link-dialog-label", children: "Seitenreferenz" }), jsx("input", { type: "text", className: "rte-link-dialog-input", value: data.pageRef, onChange: (e) => set("pageRef", e.target.value), placeholder: "page-id" })] })), options.enableUrlExtra && (jsxs("div", { className: "rte-link-dialog-field", children: [jsx("label", { className: "rte-link-dialog-label", children: "URL Extra" }), jsx("input", { type: "text", className: "rte-link-dialog-input", value: data.urlExtra, onChange: (e) => set("urlExtra", e.target.value), placeholder: "?param=value oder #anchor" })] })), options.enableRel && (jsxs("div", { className: "rte-link-dialog-field", children: [jsx("label", { className: "rte-link-dialog-label", children: "Rel" }), jsx("input", { type: "text", className: "rte-link-dialog-input", value: data.rel, onChange: (e) => set("rel", e.target.value), placeholder: "noopener noreferrer" })] })), options.enableTitle && (jsxs("div", { className: "rte-link-dialog-field", children: [jsx("label", { className: "rte-link-dialog-label", children: "Titel" }), jsx("input", { type: "text", className: "rte-link-dialog-input", value: data.title, onChange: (e) => set("title", e.target.value), placeholder: "Link-Titel" })] }))] }))] })), jsxs("div", { className: "rte-link-dialog-actions", children: [jsx("button", { type: "button", className: "rte-link-dialog-btn rte-link-dialog-btn-primary", onClick: () => onSave(data), disabled: !data.url.trim(), children: isEditing ? "Speichern" : "Einfügen" }), isEditing && (jsx("button", { type: "button", className: "rte-link-dialog-btn rte-link-dialog-btn-danger", onClick: onRemove, children: "Entfernen" })), jsx("button", { type: "button", className: "rte-link-dialog-btn", onClick: onClose, children: "Abbrechen" })] })] }));
+};
+const LinkToolbarButton = (props) => {
+    const [showDialog, setShowDialog] = useState(false);
+    const [linkData, setLinkData] = useState(EMPTY_LINK);
+    const [isEditing, setIsEditing] = useState(false);
+    const savedRangeRef = useRef(null);
+    const openDialog = useCallback(() => {
+        const sel = document.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        // Save the current selection
+        savedRangeRef.current = sel.getRangeAt(0).cloneRange();
+        const range = sel.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        const element = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        const existingLink = element?.closest("a");
+        if (existingLink) {
+            setIsEditing(true);
+            setLinkData({
+                url: existingLink.getAttribute("href") || "",
+                target: existingLink.getAttribute("target") || "_self",
+                rel: existingLink.getAttribute("rel") || "",
+                title: existingLink.getAttribute("title") || "",
+                pageRef: existingLink.getAttribute("data-page-ref") || "",
+                urlExtra: existingLink.getAttribute("data-url-extra") || "",
+            });
+        }
+        else {
+            setIsEditing(false);
+            setLinkData(EMPTY_LINK);
+        }
+        setShowDialog(true);
+    }, []);
+    const restoreSelection = useCallback(() => {
+        if (savedRangeRef.current) {
+            const sel = document.getSelection();
+            if (sel) {
+                sel.removeAllRanges();
+                sel.addRange(savedRangeRef.current);
+            }
+        }
+    }, []);
+    const handleSave = useCallback((data) => {
+        setShowDialog(false);
+        restoreSelection();
+        const sel = document.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        const element = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        const existingLink = element?.closest("a");
+        if (existingLink) {
+            // Update existing link
+            existingLink.setAttribute("href", data.url);
+            if (data.target && data.target !== "_self") {
+                existingLink.setAttribute("target", data.target);
+            }
+            else {
+                existingLink.removeAttribute("target");
+            }
+            if (data.rel) {
+                existingLink.setAttribute("rel", data.rel);
+            }
+            else {
+                existingLink.removeAttribute("rel");
+            }
+            if (data.title) {
+                existingLink.setAttribute("title", data.title);
+            }
+            else {
+                existingLink.removeAttribute("title");
+            }
+            if (data.pageRef) {
+                existingLink.setAttribute("data-page-ref", data.pageRef);
+            }
+            else {
+                existingLink.removeAttribute("data-page-ref");
+            }
+            if (data.urlExtra) {
+                existingLink.setAttribute("data-url-extra", data.urlExtra);
+            }
+            else {
+                existingLink.removeAttribute("data-url-extra");
+            }
+        }
+        else {
+            // Create new link
+            document.execCommand("createLink", false, data.url);
+            // Now find the newly created link and set extra attributes
+            const newSel = document.getSelection();
+            if (newSel && newSel.rangeCount > 0) {
+                const newRange = newSel.getRangeAt(0);
+                const newContainer = newRange.commonAncestorContainer;
+                const newElement = newContainer.nodeType === Node.TEXT_NODE
+                    ? newContainer.parentElement
+                    : newContainer;
+                const newLink = newElement?.closest("a");
+                if (newLink) {
+                    if (data.target && data.target !== "_self") {
+                        newLink.setAttribute("target", data.target);
+                    }
+                    if (data.rel) {
+                        newLink.setAttribute("rel", data.rel);
+                    }
+                    if (data.title) {
+                        newLink.setAttribute("title", data.title);
+                    }
+                    if (data.pageRef) {
+                        newLink.setAttribute("data-page-ref", data.pageRef);
+                    }
+                    if (data.urlExtra) {
+                        newLink.setAttribute("data-url-extra", data.urlExtra);
+                    }
+                }
+            }
+        }
+    }, [restoreSelection]);
+    const handleRemove = useCallback(() => {
+        setShowDialog(false);
+        restoreSelection();
+        const sel = document.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        const element = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        const existingLink = element?.closest("a");
+        if (existingLink) {
+            const parent = existingLink.parentNode;
+            if (parent) {
+                while (existingLink.firstChild) {
+                    parent.insertBefore(existingLink.firstChild, existingLink);
+                }
+                parent.removeChild(existingLink);
+            }
+        }
+    }, [restoreSelection]);
+    return (jsxs("div", { style: { position: "relative" }, children: [jsx("button", { type: "button", onClick: openDialog, disabled: props.disabled, className: `rte-toolbar-button ${props.isActive ? "rte-toolbar-button-active" : ""}`, title: "Link", "aria-label": "Link", children: jsx(IconWrapper, { icon: "mdi:link", width: 18, height: 18 }) }), showDialog && (jsx(LinkDialog, { initialData: linkData, options: props.options, onSave: handleSave, onRemove: handleRemove, onClose: () => setShowDialog(false), isEditing: isEditing }))] }));
+};
+/* ══════════════════════════════════════════════════════════════════════════
+   Plugin factory + export
+   ══════════════════════════════════════════════════════════════════════ */
+/**
+ * Creates an advanced link plugin with a floating dialog.
+ * Supports URL, target, rel, title, page reference, and URL extra.
+ */
+function createAdvancedLinkPlugin(options = {}) {
+    const opts = {
+        enablePageRef: false,
+        enableTarget: true,
+        enableRel: true,
+        enableTitle: true,
+        enableUrlExtra: false,
+        ...options,
+    };
+    return {
+        name: "advancedLink",
+        type: "inline",
+        renderButton: (props) => (jsx(LinkToolbarButton, { ...props, editorAPI: props.editorAPI, options: opts })),
+        execute: () => {
+            // Handled by the dialog component
+        },
+        isActive: () => {
+            if (typeof document === "undefined")
+                return false;
+            const sel = document.getSelection();
+            if (!sel || sel.rangeCount === 0)
+                return false;
+            const range = sel.getRangeAt(0);
+            const container = range.commonAncestorContainer;
+            const element = container.nodeType === Node.TEXT_NODE
+                ? container.parentElement
+                : container;
+            return element?.closest("a") !== null;
+        },
+        canExecute: () => {
+            const sel = document.getSelection();
+            return sel !== null && sel.rangeCount > 0;
+        },
+    };
+}
+/** Pre-built advanced link plugin with target + rel + title enabled */
+const advancedLinkPlugin = createAdvancedLinkPlugin();
+
+export { Dropdown, Editor, HistoryManager, TableContextMenuProvider, Toolbar, advancedLinkPlugin, alignmentPlugin, blockquotePlugin, boldPlugin, clearFormattingPlugin, codeInlinePlugin, contentToDOM, contentToHTML, createAdvancedLinkPlugin, createAlignmentPlugin, createBackgroundColorPlugin, createBlockFormatPlugin, createEmptyContent, createFontSizePlugin, createHeadingsPlugin, createImagePlugin, createLinkPlugin, createTextColorPlugin, Editor as default, defaultPlugins, domToContent, ensureAllCheckboxes, findClosestCheckboxList, getCurrentBackgroundColor, getCurrentFontSize, getCurrentHeading, getCurrentTextColor, htmlToContent, indentListItem, indentListItemPlugin, isCheckboxList, italicPlugin, linkPlugin, orderedListPlugin, outdentListItem, outdentListItemPlugin, redoPlugin, strikethroughPlugin, subscriptPlugin, superscriptPlugin, tablePlugin, underlinePlugin, undoPlugin, unorderedListPlugin };
 //# sourceMappingURL=index.esm.js.map