@overlap/rte 0.1.4 → 0.1.6

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,7 @@ 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 iconMap = {
     "mdi:format-bold": BoldIcon,
     "mdi:format-italic": ItalicIcon,
@@ -35,6 +37,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 +45,7 @@ const iconMap = {
     "mdi:upload": UploadIcon,
     "mdi:format-indent-increase": IndentIcon,
     "mdi:format-indent-decrease": OutdentIcon,
+    "mdi:checkbox-marked-outline": CheckboxIcon,
 };
 const Icon = ({ icon, width = 18, height = 18, className }) => {
     const IconComponent = iconMap[icon];
@@ -135,7 +139,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 +233,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 +254,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 +319,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 +378,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,7 +402,7 @@ const clearFormattingPlugin = {
     },
 };
 
-const defaultHeadings$1 = ["h1", "h2", "h3"];
+const defaultHeadings$1 = ["h1", "h2", "h3", "h4", "h5", "h6"];
 /**
  * Standard-Plugins
  */
@@ -387,10 +476,10 @@ const defaultBlockFormatPlugin = createBlockFormatPlugin(defaultHeadings$1);
 const defaultPlugins = [
     undoPlugin,
     redoPlugin,
+    defaultBlockFormatPlugin,
     boldPlugin,
     italicPlugin,
     underlinePlugin,
-    defaultBlockFormatPlugin,
     clearFormattingPlugin,
     _indentPlugin,
     _outdentPlugin,
@@ -779,6 +868,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 +1193,229 @@ 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 (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");
+            if (src)
+                attributes.src = src;
+            if (alt)
+                attributes.alt = alt;
+            return {
+                type: "image",
+                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 = {};
+            // Detect checkbox lists (own + Lexical + GitHub formats)
+            if (tagName === "ul" && isCheckboxList(el)) {
+                attributes.class = "rte-checkbox-list";
             }
-            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;
+            // 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,
-                    children: children.length > 0 ? children : [],
-                    attributes: Object.keys(attributes).length > 0
-                        ? attributes
-                        : undefined,
-                };
             }
-            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,
-                    };
+            // 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;
                 }
-                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;
-                                }
-                            }
-                        });
-                    }
+                const processed = processNode(child);
+                if (processed) {
+                    children.push(processed);
                 }
-                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,
-                };
-            }
+            });
+            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",
+        ].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
+            if (tagName === "a") {
+                const href = el.getAttribute("href");
+                if (href)
+                    attributes.href = href;
                 return {
-                    type: tagName,
-                    children,
+                    type: "link",
+                    children: children.length > 0 ? children : undefined,
+                    attributes: Object.keys(attributes).length > 0
+                        ? attributes
+                        : 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;
+            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 +1429,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,6 +1459,7 @@ function contentToDOM(content, container, customLinkComponent, customHeadingRend
             bold: "strong",
             italic: "em",
             underline: "u",
+            strikethrough: "s",
             link: "a",
         };
         let tagName = tagMap[node.type] || node.type;
@@ -1161,19 +1472,20 @@ 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 === "href" && tagName === "a") {
+                    element.setAttribute("href", value);
+                }
+                else if (key === "class") {
+                    element.className = value;
                 }
                 else {
                     element.setAttribute(key, value);
@@ -1182,32 +1494,49 @@ function contentToDOM(content, container, customLinkComponent, customHeadingRend
         }
         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);
 }
+/**
+ * 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,21 +1746,484 @@ 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 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 handleMouseUp = () => {
-            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();
+            }
         };
-        const handleKeyUp = () => {
-            setTimeout(handleSelectionChange, 10);
+        editor.addEventListener("click", handleClick, true);
+        editor.addEventListener("pointerdown", handlePointerDown, true);
+        return () => {
+            editor.removeEventListener("click", handleClick, true);
+            editor.removeEventListener("pointerdown", handlePointerDown, true);
         };
-        if (typeof document !== 'undefined') {
+    }, [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;
+                }
+            }
+        }
+        // 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;
+            }
+        }
+        // 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;
+            }
+        }
+        // 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;
+                }
+            }
+        }
+        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);
+        }
+        else {
+            checkboxList.appendChild(newLi);
+        }
+        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);
+        }
+        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 (!selection || selection.rangeCount === 0) {
+            isUpdatingRef.current = false;
+            return false;
+        }
+        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);
+            }
+        }
+        else {
+            try {
+                range.deleteContents();
+                range.insertNode(ul);
+                const finalTextNode = li.firstChild;
+                if (finalTextNode) {
+                    setCursorInTextNode(finalTextNode, 0, editor);
+                }
+            }
+            catch (_) {
+                editor.appendChild(ul);
+                const finalTextNode = li.firstChild;
+                if (finalTextNode) {
+                    setCursorInTextNode(finalTextNode, 0, editor);
+                }
+            }
+        }
+        // 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,
+    };
+}
+
+/**
+ * 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: indent/outdent in lists
+            if (e.key === "Tab" && !isModifierPressed && !e.altKey) {
+                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;
+                }
+            }
+            // 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);
@@ -1499,222 +2291,135 @@ const Toolbar = ({ plugins, editorAPI, className, }) => {
 };
 
 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) {
-            allPlugins.push(createFontSizePlugin(fontSizes));
+            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));
         }
-        // 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));
-        }
         allPlugins.push(createImagePlugin(onImageUpload));
         return allPlugins;
     }, [providedPlugins, fontSizes, colors, headings, onImageUpload]);
-    const editorRef = useRef(null);
-    const historyRef = useRef(new HistoryManager());
-    const isUpdatingRef = useRef(false);
+    // --- Callbacks ---
     const notifyChange = useCallback((content) => {
-        if (onChange && !isUpdatingRef.current) {
+        if (onChange)
             onChange(content);
-        }
     }, [onChange]);
-    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);
-        }
+    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 !== "insertImage" &&
+                command !== "insertCheckboxList") {
                 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);
-                }
+                undo();
                 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);
-                }
+                redo();
                 return true;
             }
-            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);
-                    }
-                }
-                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);
-                }
-                selection?.removeAllRanges();
-                selection?.addRange(range);
+            if (command === "insertCheckboxList") {
+                return checkbox.insertCheckboxList(editor);
             }
-            else if (savedRange) {
-                selection.removeAllRanges();
-                selection.addRange(savedRange);
+            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);
                 }
@@ -1732,6 +2437,7 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
                 const editor = editorRef.current;
                 if (!editor)
                     return createEmptyContent();
+                ensureAllCheckboxes(editor);
                 return domToContent(editor);
             },
             setContent: (content) => {
@@ -1751,23 +2457,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,42 +2479,30 @@ 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();
+                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;
@@ -1828,230 +2519,80 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
                 const editor = editorRef.current;
                 if (!editor)
                     return "";
-                const content = domToContent(editor);
-                return contentToHTML(content);
+                return contentToHTML(domToContent(editor));
             },
             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);
-                }
+                executeWithHistory((selection) => clearFormatting(selection));
             },
             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);
-                }
+                executeWithHistory((selection) => clearTextColor(selection));
             },
             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);
-                }
+                executeWithHistory((selection) => clearBackgroundColor(selection));
             },
             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);
-                }
+                executeWithHistory((selection) => clearFontSize(selection));
             },
             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);
-                }
+                executeWithHistory((selection) => clearLinks(selection));
             },
             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);
-                }
+                executeWithHistory((selection) => indentListItem(selection));
             },
             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);
-                }
+                executeWithHistory((selection) => outdentListItem(selection));
             },
         };
+        /** 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,
-        restoreSelection,
         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) {
+        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);
-            }
-        };
-    }, [editorAPI, notifyChange]);
+    // --- Paste handler ---
     const handlePaste = (e) => {
         e.preventDefault();
         const html = e.clipboardData.getData("text/html");
@@ -2079,11 +2620,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 +2631,7 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
             document.execCommand("insertText", false, text);
         }
     };
+    // --- Theme styles ---
     const containerStyle = theme
         ? {
             ...(theme.borderColor &&
@@ -2121,6 +2662,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 +3015,5 @@ 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 };
+export { Dropdown, Editor, HistoryManager, Toolbar, blockquotePlugin, boldPlugin, clearFormattingPlugin, contentToDOM, contentToHTML, 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, underlinePlugin, undoPlugin, unorderedListPlugin };
 //# sourceMappingURL=index.esm.js.map