@overlap/rte 0.1.0

package/dist/index.esm.js

@@ -0,0 +1,2080 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useState, useRef, useEffect, useMemo, useCallback } 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" }) }));
+const UnderlineIcon = ({ width = 18, height = 18, className }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" }) }));
+const UndoIcon = ({ width = 18, height = 18, className }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z" }) }));
+const RedoIcon = ({ width = 18, height = 18, className }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z" }) }));
+const ClearFormattingIcon = ({ width = 18, height = 18, className }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M6 5v.18L8.82 8h2.4L7.73 4.36C7.26 3.85 6.61 3.5 6 3.5c-1.11 0-2 .89-2 2 0 .61.35 1.26.86 1.73L6 5zm14.27 2.5L18.73 9H21v1h-4.27L15 8.27l1.23-1.23c.5-.5 1.15-.73 1.77-.73 1.11 0 2 .89 2 2 0 .62-.23 1.27-.73 1.77L18.27 13H21v1h-5.27l-2-2H9.73l-2 2H3v-1h4.27l2-2H7v-1h2.73l2-2H12v-1h-2.27l2-2h4.54zM5 15h14v2H5v-2z" }) }));
+const LinkIcon = ({ 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.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" }) }));
+const QuoteIcon = ({ width = 18, height = 18, className }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" }) }));
+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 }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z" }) }));
+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 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" }) }));
+const LoadingIcon = ({ width = 18, height = 18, className }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z" }) }));
+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 iconMap = {
+    'mdi:format-bold': BoldIcon,
+    'mdi:format-italic': ItalicIcon,
+    'mdi:format-underline': UnderlineIcon,
+    'mdi:undo': UndoIcon,
+    'mdi:redo': RedoIcon,
+    'mdi:format-clear': ClearFormattingIcon,
+    'mdi:link': LinkIcon,
+    'mdi:format-quote-close': QuoteIcon,
+    'mdi:format-list-bulleted': BulletListIcon,
+    'mdi:format-list-numbered': NumberedListIcon,
+    'mdi:format-color-text': TextColorIcon,
+    'mdi:format-color-fill': BackgroundColorIcon,
+    'mdi:format-header-1': HeadingIcon,
+    'mdi:format-size': FontSizeIcon,
+    'mdi:image': ImageIcon,
+    'mdi:close': CloseIcon,
+    'mdi:loading': LoadingIcon,
+    'mdi:upload': UploadIcon,
+};
+const Icon = ({ icon, width = 18, height = 18, className }) => {
+    const IconComponent = iconMap[icon];
+    if (!IconComponent) {
+        return jsx("span", { style: { width, height, display: 'inline-block' } });
+    }
+    return jsx(IconComponent, { width: width, height: height, className: className });
+};
+
+const IconWrapper = ({ icon, width = 18, height = 18, className }) => {
+    return jsx(Icon, { icon: icon, width: width, height: height, className: className });
+};
+
+/**
+ * Basis-Plugin für Inline-Formatierungen
+ */
+function createInlinePlugin(name, command, icon, label) {
+    return {
+        name,
+        type: 'inline',
+        command,
+        renderButton: (props) => (jsx("button", { type: "button", onClick: props.onClick, disabled: props.disabled, className: `rte-toolbar-button ${props.isActive ? 'rte-toolbar-button-active' : ''}`, title: label, "aria-label": label, children: jsx(IconWrapper, { icon: icon, width: 18, height: 18 }) })),
+        execute: (editor) => {
+            editor.executeCommand(command);
+        },
+        isActive: (editor) => {
+            if (typeof window === 'undefined' || typeof document === 'undefined')
+                return false;
+            const selection = editor.getSelection();
+            if (!selection || selection.rangeCount === 0)
+                return false;
+            const range = selection.getRangeAt(0);
+            const container = range.commonAncestorContainer;
+            const element = container.nodeType === Node.TEXT_NODE
+                ? container.parentElement
+                : container;
+            if (!element)
+                return false;
+            return document.queryCommandState(command);
+        },
+        canExecute: (editor) => {
+            // Formatierung sollte auch ohne Selection möglich sein
+            // (z.B. wenn Editor leer ist, wird beim Klick eine Selection erstellt)
+            return true;
+        },
+    };
+}
+/**
+ * Basis-Plugin für Commands
+ */
+function createCommandPlugin(name, command, icon, label) {
+    return {
+        name,
+        type: 'command',
+        command,
+        renderButton: (props) => (jsx("button", { type: "button", onClick: props.onClick, disabled: props.disabled, className: "rte-toolbar-button", title: label, "aria-label": label, children: jsx(IconWrapper, { icon: icon, width: 18, height: 18 }) })),
+        execute: (editor) => {
+            editor.executeCommand(command);
+        },
+        canExecute: (editor) => {
+            if (command === 'undo')
+                return editor.canUndo();
+            if (command === 'redo')
+                return editor.canRedo();
+            return true;
+        },
+    };
+}
+
+/**
+ * Clear Formatting Plugin - Entfernt alle Formatierungen
+ */
+const clearFormattingPlugin = {
+    name: 'clearFormatting',
+    type: 'command',
+    renderButton: (props) => (jsx("button", { type: "button", onClick: props.onClick, disabled: props.disabled, className: "rte-toolbar-button", title: "Formatierung entfernen", "aria-label": "Formatierung entfernen", children: jsx(IconWrapper, { icon: "mdi:format-clear", width: 18, height: 18 }) })),
+    execute: (editor) => {
+        editor.clearFormatting();
+    },
+    canExecute: (editor) => {
+        const selection = editor.getSelection();
+        return selection !== null && selection.rangeCount > 0 && !selection.isCollapsed;
+    },
+};
+
+/**
+ * Standard-Plugins
+ */
+const boldPlugin = createInlinePlugin('bold', 'bold', 'mdi:format-bold', 'Fett');
+const italicPlugin = createInlinePlugin('italic', 'italic', 'mdi:format-italic', 'Kursiv');
+const underlinePlugin = createInlinePlugin('underline', 'underline', 'mdi:format-underline', 'Unterstrichen');
+const undoPlugin = createCommandPlugin('undo', 'undo', 'mdi:undo', 'Rückgängig');
+const redoPlugin = createCommandPlugin('redo', 'redo', 'mdi:redo', 'Wiederholen');
+/**
+ * Standard-Plugin-Liste
+ */
+const defaultPlugins = [
+    undoPlugin,
+    redoPlugin,
+    boldPlugin,
+    italicPlugin,
+    underlinePlugin,
+    clearFormattingPlugin,
+];
+
+const Dropdown = ({ icon, label, options, onSelect, currentValue, disabled, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    const handleSelect = (value) => {
+        onSelect(value);
+        setIsOpen(false);
+    };
+    const currentOption = options.find(opt => opt.value === currentValue);
+    return (jsxs("div", { className: "rte-dropdown", ref: dropdownRef, children: [jsxs("button", { type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `rte-toolbar-button rte-dropdown-button ${currentOption ? 'rte-dropdown-button-has-value' : ''}`, title: label, "aria-label": label, children: [jsx(Icon, { icon: icon, width: 18, height: 18 }), currentOption && (jsx("span", { className: "rte-dropdown-value", children: currentOption.label }))] }), isOpen && (jsx("div", { className: "rte-dropdown-menu", children: options.map((option) => (jsxs("button", { type: "button", className: `rte-dropdown-item ${currentValue === option.value ? 'rte-dropdown-item-active' : ''}`, onClick: () => handleSelect(option.value), children: [option.color && (jsx("span", { className: `rte-dropdown-color-preview ${currentValue === option.value ? 'active' : ''}`, style: { backgroundColor: option.color } })), option.preview && !option.headingPreview && (jsx("span", { className: "rte-dropdown-fontsize-preview", style: { fontSize: `${option.preview}px` }, children: "Aa" })), option.headingPreview && (jsx("span", { className: `rte-dropdown-heading-preview ${option.headingPreview}`, children: option.headingPreview === 'p' ? 'Normal' : option.headingPreview.toUpperCase() })), option.icon && jsx(Icon, { icon: option.icon, width: 16, height: 16 }), jsx("span", { style: { flex: 1, fontWeight: currentValue === option.value ? 600 : 400 }, children: option.label })] }, option.value))) }))] }));
+};
+
+/**
+ * Liest die aktuelle Font-Size aus dem DOM an der Cursor-Position
+ */
+function getCurrentFontSize(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;
+    // Suche nach dem nächsten Element mit fontSize
+    let current = element;
+    while (current && current !== document.body) {
+        const fontSize = window.getComputedStyle(current).fontSize;
+        if (fontSize && fontSize !== 'inherit' && fontSize !== 'initial') {
+            // Konvertiere "16px" zu "16"
+            const size = parseInt(fontSize, 10);
+            if (!isNaN(size)) {
+                return size.toString();
+            }
+        }
+        current = current.parentElement;
+    }
+    return undefined;
+}
+/**
+ * Liest die aktuelle Textfarbe aus dem DOM an der Cursor-Position
+ */
+function getCurrentTextColor(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;
+    // Suche nach dem nächsten Element mit color
+    let current = element;
+    while (current && current !== document.body) {
+        // Prüfe zuerst inline style (hat Priorität)
+        const inlineColor = current.style.color;
+        if (inlineColor && inlineColor.trim()) {
+            // Wenn bereits Hex, direkt zurückgeben
+            if (inlineColor.startsWith('#')) {
+                return inlineColor;
+            }
+            // Wenn RGB/RGBA, konvertieren
+            const rgbMatch = inlineColor.match(/\d+/g);
+            if (rgbMatch && rgbMatch.length >= 3) {
+                const hex = '#' + rgbMatch.slice(0, 3).map(x => {
+                    const hex = parseInt(x, 10).toString(16);
+                    return hex.length === 1 ? '0' + hex : hex;
+                }).join('');
+                return hex;
+            }
+        }
+        // Dann computed style
+        const color = window.getComputedStyle(current).color;
+        if (color && color !== 'inherit' && color !== 'initial' && color !== 'rgb(0, 0, 0)' && color !== 'rgba(0, 0, 0, 0)') {
+            // Konvertiere RGB zu Hex
+            const rgb = color.match(/\d+/g);
+            if (rgb && rgb.length >= 3) {
+                const hex = '#' + rgb.slice(0, 3).map(x => {
+                    const hex = parseInt(x, 10).toString(16);
+                    return hex.length === 1 ? '0' + hex : hex;
+                }).join('');
+                return hex;
+            }
+        }
+        current = current.parentElement;
+    }
+    return undefined;
+}
+/**
+ * Liest die aktuelle Hintergrundfarbe aus dem DOM an der Cursor-Position
+ */
+function getCurrentBackgroundColor(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;
+    // Suche nach dem nächsten Element mit backgroundColor
+    let current = element;
+    while (current && current !== document.body) {
+        // Prüfe zuerst inline style (hat Priorität)
+        const inlineBgColor = current.style.backgroundColor;
+        if (inlineBgColor && inlineBgColor.trim()) {
+            // Wenn bereits Hex, direkt zurückgeben
+            if (inlineBgColor.startsWith('#')) {
+                return inlineBgColor;
+            }
+            // Wenn RGB/RGBA, konvertieren
+            const rgbMatch = inlineBgColor.match(/\d+/g);
+            if (rgbMatch && rgbMatch.length >= 3) {
+                const hex = '#' + rgbMatch.slice(0, 3).map(x => {
+                    const hex = parseInt(x, 10).toString(16);
+                    return hex.length === 1 ? '0' + hex : hex;
+                }).join('');
+                return hex;
+            }
+        }
+        // Dann computed style
+        const bgColor = window.getComputedStyle(current).backgroundColor;
+        if (bgColor && bgColor !== 'inherit' && bgColor !== 'initial' && bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent') {
+            // Konvertiere RGB zu Hex
+            const rgb = bgColor.match(/\d+/g);
+            if (rgb && rgb.length >= 3) {
+                const hex = '#' + rgb.slice(0, 3).map(x => {
+                    const hex = parseInt(x, 10).toString(16);
+                    return hex.length === 1 ? '0' + hex : hex;
+                }).join('');
+                return hex;
+            }
+        }
+        current = current.parentElement;
+    }
+    return undefined;
+}
+/**
+ * Liest das aktuelle Heading-Level aus dem DOM an der Cursor-Position
+ */
+function getCurrentHeading(editor, availableHeadings) {
+    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;
+    // Suche nach dem nächsten Block-Element
+    let current = element;
+    while (current && current !== document.body) {
+        const tagName = current.tagName.toLowerCase();
+        if (availableHeadings.includes(tagName)) {
+            return tagName;
+        }
+        if (tagName === 'p') {
+            return 'p';
+        }
+        current = current.parentElement;
+    }
+    return undefined;
+}
+
+const defaultColors = [
+    { value: '#000000', label: 'Schwarz', color: '#000000' },
+    { value: '#333333', label: 'Dunkelgrau', color: '#333333' },
+    { value: '#666666', label: 'Grau', color: '#666666' },
+    { value: '#ff0000', label: 'Rot', color: '#ff0000' },
+    { value: '#0000ff', label: 'Blau', color: '#0000ff' },
+    { value: '#00aa00', label: 'Grün', color: '#00aa00' },
+    { value: '#ffaa00', label: 'Orange', color: '#ffaa00' },
+    { value: '#aa00ff', label: 'Lila', color: '#aa00ff' },
+];
+function createTextColorPlugin(colors = defaultColors.map(c => c.value)) {
+    // Finde Labels für bekannte Farben
+    const getColorLabel = (color) => {
+        const found = defaultColors.find(c => c.value.toLowerCase() === color.toLowerCase());
+        return found ? found.label : color;
+    };
+    const colorOptions = colors.map(color => ({
+        value: color,
+        label: getColorLabel(color),
+        color,
+    }));
+    return {
+        name: 'textColor',
+        type: 'inline',
+        renderButton: (props) => {
+            // Aktuelle Textfarbe aus State Reflection
+            const currentValue = props.currentValue || (props.editorAPI ? getCurrentTextColor(props.editorAPI) : undefined);
+            return (jsx(Dropdown, { icon: "mdi:format-color-text", label: "Textfarbe", options: colorOptions.map(opt => ({
+                    value: opt.value,
+                    label: opt.label,
+                    color: opt.color,
+                })), onSelect: (value) => {
+                    if (props.onSelect) {
+                        props.onSelect(value);
+                    }
+                    else {
+                        props.onClick();
+                    }
+                }, currentValue: currentValue, disabled: props.disabled }));
+        },
+        execute: (editor, value) => {
+            if (value) {
+                editor.executeCommand('foreColor', value);
+            }
+        },
+        canExecute: () => true,
+        getCurrentValue: (editor) => {
+            return getCurrentTextColor(editor);
+        },
+    };
+}
+function createBackgroundColorPlugin(colors = defaultColors.map(c => c.value)) {
+    // Finde Labels für bekannte Farben
+    const getColorLabel = (color) => {
+        const found = defaultColors.find(c => c.value.toLowerCase() === color.toLowerCase());
+        return found ? found.label : color;
+    };
+    const colorOptions = colors.map(color => ({
+        value: color,
+        label: getColorLabel(color),
+        color,
+    }));
+    return {
+        name: 'backgroundColor',
+        type: 'inline',
+        renderButton: (props) => {
+            // Aktuelle Hintergrundfarbe aus State Reflection
+            const currentValue = props.currentValue || (props.editorAPI ? getCurrentBackgroundColor(props.editorAPI) : undefined);
+            return (jsx(Dropdown, { icon: "mdi:format-color-fill", label: "Hintergrundfarbe", options: colorOptions.map(opt => ({
+                    value: opt.value,
+                    label: opt.label,
+                    color: opt.color,
+                })), onSelect: (value) => {
+                    if (props.onSelect) {
+                        props.onSelect(value);
+                    }
+                    else {
+                        props.onClick();
+                    }
+                }, currentValue: currentValue, disabled: props.disabled }));
+        },
+        execute: (editor, value) => {
+            if (value) {
+                editor.executeCommand('backColor', value);
+            }
+        },
+        canExecute: () => true,
+        getCurrentValue: (editor) => {
+            return getCurrentBackgroundColor(editor);
+        },
+    };
+}
+
+function createFontSizePlugin(fontSizes = [12, 14, 16, 18, 20, 24]) {
+    return {
+        name: 'fontSize',
+        type: 'inline',
+        renderButton: (props) => {
+            const sizes = props.fontSizes || fontSizes;
+            const options = sizes.map(size => ({
+                value: size.toString(),
+                label: `${size}px`,
+                preview: size.toString(),
+            }));
+            // Aktuelle Font-Size aus State Reflection
+            const currentValue = props.currentValue || (props.editorAPI ? getCurrentFontSize(props.editorAPI) : undefined);
+            return (jsx(Dropdown, { icon: "mdi:format-size", label: "Schriftgr\u00F6\u00DFe", options: options, onSelect: (value) => {
+                    if (props.onSelect) {
+                        props.onSelect(value);
+                    }
+                    else {
+                        props.onClick();
+                    }
+                }, currentValue: currentValue, disabled: props.disabled }));
+        },
+        getCurrentValue: (editor) => {
+            return getCurrentFontSize(editor);
+        },
+        execute: (editor, value) => {
+            if (value) {
+                // Setze inline style für präzise Größe
+                const selection = editor.getSelection();
+                if (selection && selection.rangeCount > 0) {
+                    const range = selection.getRangeAt(0);
+                    let element = null;
+                    if (range.commonAncestorContainer.nodeType === Node.TEXT_NODE) {
+                        element = range.commonAncestorContainer.parentElement;
+                    }
+                    else {
+                        element = range.commonAncestorContainer;
+                    }
+                    if (element) {
+                        // Erstelle oder aktualisiere span mit fontSize
+                        const span = document.createElement('span');
+                        span.style.fontSize = `${value}px`;
+                        try {
+                            range.surroundContents(span);
+                        }
+                        catch (e) {
+                            // Falls surroundContents fehlschlägt
+                            const contents = range.extractContents();
+                            span.appendChild(contents);
+                            range.insertNode(span);
+                        }
+                        // Cursor setzen
+                        range.setStartAfter(span);
+                        range.collapse(true);
+                        selection.removeAllRanges();
+                        selection.addRange(range);
+                    }
+                }
+            }
+        },
+        canExecute: () => true,
+    };
+}
+
+const defaultHeadings = ['h1', 'h2', 'h3'];
+const headingLabels = {
+    h1: 'Überschrift 1',
+    h2: 'Überschrift 2',
+    h3: 'Überschrift 3',
+    h4: 'Überschrift 4',
+    h5: 'Überschrift 5',
+    h6: 'Überschrift 6',
+};
+function createHeadingsPlugin(headings = defaultHeadings) {
+    const options = [
+        { value: 'p', label: 'Normal', headingPreview: 'p' },
+        ...headings.map(h => ({
+            value: h,
+            label: headingLabels[h] || h.toUpperCase(),
+            headingPreview: h,
+        })),
+    ];
+    return {
+        name: 'headings',
+        type: 'block',
+        renderButton: (props) => {
+            // Aktuelles Heading aus State Reflection
+            const currentValue = props.currentValue || (props.editorAPI ? getCurrentHeading(props.editorAPI, headings) : undefined);
+            return (jsx(Dropdown, { icon: "mdi:format-header-1", label: "\u00DCberschrift", options: options, onSelect: (value) => {
+                    if (props.onSelect) {
+                        props.onSelect(value);
+                    }
+                    else {
+                        props.onClick();
+                    }
+                }, currentValue: currentValue, disabled: props.disabled }));
+        },
+        getCurrentValue: (editor) => {
+            return getCurrentHeading(editor, headings);
+        },
+        execute: (editor, value) => {
+            const tag = value || 'p';
+            editor.executeCommand('formatBlock', `<${tag}>`);
+        },
+        isActive: (editor) => {
+            const selection = editor.getSelection();
+            if (!selection || selection.rangeCount === 0)
+                return false;
+            const range = selection.getRangeAt(0);
+            const container = range.commonAncestorContainer;
+            const element = container.nodeType === Node.TEXT_NODE
+                ? container.parentElement
+                : container;
+            if (!element)
+                return false;
+            const tagName = element.tagName.toLowerCase();
+            return headings.includes(tagName);
+        },
+        canExecute: () => true,
+    };
+}
+
+/**
+ * Image-Plugin mit URL-Eingabe und File-Upload
+ */
+function createImagePlugin(onImageUpload) {
+    return {
+        name: 'image',
+        type: 'block',
+        renderButton: (props) => {
+            const [showModal, setShowModal] = useState(false);
+            const [imageUrl, setImageUrl] = useState('');
+            const [altText, setAltText] = useState('');
+            const [isUploading, setIsUploading] = useState(false);
+            const fileInputRef = useRef(null);
+            const handleInsertImage = () => {
+                if (!props.editorAPI)
+                    return;
+                const src = imageUrl.trim();
+                if (!src) {
+                    alert('Bitte geben Sie eine Bild-URL ein');
+                    return;
+                }
+                // Verwende executeCommand, das alles korrekt handhabt
+                // Alt-Text wird später über das Datenmodell gespeichert
+                props.editorAPI.executeCommand('insertImage', src);
+                // Modal schließen
+                setShowModal(false);
+                setImageUrl('');
+                setAltText('');
+            };
+            const handleFileSelect = async (e) => {
+                const file = e.target.files?.[0];
+                if (!file || !onImageUpload)
+                    return;
+                if (!file.type.startsWith('image/')) {
+                    alert('Bitte wählen Sie eine Bilddatei aus');
+                    return;
+                }
+                setIsUploading(true);
+                try {
+                    const uploadedUrl = await onImageUpload(file);
+                    setImageUrl(uploadedUrl);
+                }
+                catch (error) {
+                    console.error('Image upload failed:', error);
+                    alert('Fehler beim Hochladen des Bildes');
+                }
+                finally {
+                    setIsUploading(false);
+                    if (fileInputRef.current) {
+                        fileInputRef.current.value = '';
+                    }
+                }
+            };
+            return (jsxs(Fragment, { children: [jsx("button", { type: "button", onClick: () => setShowModal(true), disabled: props.disabled, className: "rte-toolbar-button", title: "Bild einf\u00FCgen", "aria-label": "Bild einf\u00FCgen", children: jsx(IconWrapper, { icon: "mdi:image", width: 18, height: 18 }) }), showModal && (jsx("div", { className: "rte-image-modal-overlay", onClick: (e) => {
+                            if (e.target === e.currentTarget) {
+                                setShowModal(false);
+                            }
+                        }, children: jsxs("div", { className: "rte-image-modal", children: [jsxs("div", { className: "rte-image-modal-header", children: [jsx("h3", { children: "Bild einf\u00FCgen" }), jsx("button", { type: "button", onClick: () => setShowModal(false), className: "rte-image-modal-close", "aria-label": "Schlie\u00DFen", children: jsx(IconWrapper, { icon: "mdi:close", width: 20, height: 20 }) })] }), jsxs("div", { className: "rte-image-modal-content", children: [onImageUpload && (jsx("div", { className: "rte-image-upload-section", children: jsxs("label", { className: "rte-image-upload-label", children: [jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileSelect, style: { display: 'none' } }), jsx("div", { className: "rte-image-upload-button", children: isUploading ? (jsxs(Fragment, { children: [jsx(IconWrapper, { icon: "mdi:loading", width: 24, height: 24, className: "rte-spin" }), jsx("span", { children: "Wird hochgeladen..." })] })) : (jsxs(Fragment, { children: [jsx(IconWrapper, { icon: "mdi:upload", width: 24, height: 24 }), jsx("span", { children: "Datei ausw\u00E4hlen" })] })) })] }) })), jsx("div", { className: "rte-image-url-section", children: jsxs("label", { children: ["Bild-URL", jsx("input", { type: "url", value: imageUrl, onChange: (e) => setImageUrl(e.target.value), placeholder: "https://example.com/image.jpg", className: "rte-image-url-input" })] }) }), jsx("div", { className: "rte-image-alt-section", children: jsxs("label", { children: ["Alt-Text (optional)", jsx("input", { type: "text", value: altText, onChange: (e) => setAltText(e.target.value), placeholder: "Bildbeschreibung", className: "rte-image-alt-input" })] }) }), imageUrl && (jsx("div", { className: "rte-image-preview", children: jsx("img", { src: imageUrl, alt: altText || 'Preview' }) }))] }), jsxs("div", { className: "rte-image-modal-footer", children: [jsx("button", { type: "button", onClick: () => setShowModal(false), className: "rte-image-modal-cancel", children: "Abbrechen" }), jsx("button", { type: "button", onClick: handleInsertImage, disabled: !imageUrl.trim() || isUploading, className: "rte-image-modal-insert", children: "Einf\u00FCgen" })] })] }) }))] }));
+        },
+        execute: (editor) => {
+            // Wird über renderButton gehandhabt
+        },
+        canExecute: () => true,
+    };
+}
+
+/**
+ * Entfernt alle Formatierungen aus der aktuellen Selection
+ */
+function clearFormatting(selection) {
+    if (!selection || selection.rangeCount === 0)
+        return;
+    const range = selection.getRangeAt(0);
+    // Wenn Selection leer ist, nichts zu tun
+    if (range.collapsed)
+        return;
+    try {
+        // Verwende document.execCommand für Standard-Formatierungen
+        document.execCommand('removeFormat', false);
+        document.execCommand('unlink', false);
+        // Entferne alle inline styles und Formatierungen manuell
+        const walker = document.createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_ELEMENT, null);
+        const elements = [];
+        let node = walker.currentNode;
+        while (node) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                if (range.intersectsNode(el)) {
+                    const tagName = el.tagName.toLowerCase();
+                    // Entferne Inline-Formatierungen (strong, em, u, span, a, etc.)
+                    if (['strong', 'b', 'em', 'i', 'u', 'span', 'a', 'font'].includes(tagName)) {
+                        // Ersetze durch Text-Node
+                        const text = el.textContent || '';
+                        const textNode = document.createTextNode(text);
+                        el.parentNode?.replaceChild(textNode, el);
+                    }
+                    // Entferne alle Styles
+                    if (el.style.length > 0) {
+                        el.removeAttribute('style');
+                    }
+                    // Konvertiere Headings zu Paragraphs
+                    if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName)) {
+                        const p = document.createElement('p');
+                        while (el.firstChild) {
+                            p.appendChild(el.firstChild);
+                        }
+                        el.parentNode?.replaceChild(p, el);
+                    }
+                }
+            }
+            node = walker.nextNode();
+        }
+        // Normalisiere: Entferne leere Formatierungs-Tags
+        const normalizeWalker = document.createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_ELEMENT, null);
+        node = normalizeWalker.currentNode;
+        while (node) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                const tagName = el.tagName.toLowerCase();
+                if (['strong', 'b', 'em', 'i', 'u', 'span'].includes(tagName) && !el.textContent?.trim()) {
+                    el.parentNode?.removeChild(el);
+                }
+            }
+            node = normalizeWalker.nextNode();
+        }
+    }
+    catch (error) {
+        console.error('Error clearing formatting:', error);
+        // Fallback: Einfache Methode
+        document.execCommand('removeFormat', false);
+        document.execCommand('unlink', false);
+    }
+}
+/**
+ * Entfernt nur Textfarbe
+ */
+function clearTextColor(selection) {
+    if (!selection || selection.rangeCount === 0)
+        return;
+    const range = selection.getRangeAt(0);
+    if (range.collapsed)
+        return;
+    // Finde alle Elemente mit color style
+    const walker = document.createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_ELEMENT, null);
+    const elements = [];
+    let node = walker.currentNode;
+    while (node) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            const el = node;
+            if (range.intersectsNode(el) && el.style.color) {
+                elements.push(el);
+            }
+        }
+        node = walker.nextNode();
+    }
+    elements.forEach(el => {
+        el.style.color = '';
+        if (!el.style.length) {
+            el.removeAttribute('style');
+        }
+    });
+}
+/**
+ * Entfernt nur Hintergrundfarbe
+ */
+function clearBackgroundColor(selection) {
+    if (!selection || selection.rangeCount === 0)
+        return;
+    const range = selection.getRangeAt(0);
+    if (range.collapsed)
+        return;
+    // Finde alle Elemente mit backgroundColor style
+    const walker = document.createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_ELEMENT, null);
+    const elements = [];
+    let node = walker.currentNode;
+    while (node) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            const el = node;
+            if (range.intersectsNode(el) && el.style.backgroundColor) {
+                elements.push(el);
+            }
+        }
+        node = walker.nextNode();
+    }
+    elements.forEach(el => {
+        el.style.backgroundColor = '';
+        if (!el.style.length) {
+            el.removeAttribute('style');
+        }
+    });
+}
+/**
+ * Entfernt nur Font-Size
+ */
+function clearFontSize(selection) {
+    if (!selection || selection.rangeCount === 0)
+        return;
+    const range = selection.getRangeAt(0);
+    if (range.collapsed)
+        return;
+    // Finde alle Elemente mit fontSize style
+    const walker = document.createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_ELEMENT, null);
+    const elements = [];
+    let node = walker.currentNode;
+    while (node) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            const el = node;
+            if (range.intersectsNode(el) && el.style.fontSize) {
+                elements.push(el);
+            }
+        }
+        node = walker.nextNode();
+    }
+    elements.forEach(el => {
+        el.style.fontSize = '';
+        if (!el.style.length) {
+            el.removeAttribute('style');
+        }
+    });
+}
+/**
+ * Entfernt Links (behält Text)
+ */
+function clearLinks(selection) {
+    if (!selection || selection.rangeCount === 0)
+        return;
+    const range = selection.getRangeAt(0);
+    // Finde alle Links in der Selection
+    const walker = document.createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_ELEMENT, {
+        acceptNode: (node) => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                if (el.tagName.toLowerCase() === 'a' && range.intersectsNode(el)) {
+                    return NodeFilter.FILTER_ACCEPT;
+                }
+            }
+            return NodeFilter.FILTER_SKIP;
+        }
+    });
+    const links = [];
+    let node = walker.currentNode;
+    while (node) {
+        if (node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'a') {
+            links.push(node);
+        }
+        node = walker.nextNode();
+    }
+    // Entferne Links (behält Text)
+    links.forEach(link => {
+        const parent = link.parentNode;
+        if (parent) {
+            while (link.firstChild) {
+                parent.insertBefore(link.firstChild, link);
+            }
+            parent.removeChild(link);
+        }
+    });
+}
+
+function domToContent(element) {
+    const blocks = [];
+    function processNode(node) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.textContent;
+            if (text === null || text === undefined)
+                return null;
+            return { type: "text", text };
+        }
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            const el = node;
+            const tagName = el.tagName.toLowerCase();
+            if (tagName === "img") {
+                const attributes = {};
+                const src = el.getAttribute("src");
+                const alt = el.getAttribute("alt");
+                if (src)
+                    attributes.src = src;
+                if (alt)
+                    attributes.alt = alt;
+                return {
+                    type: "image",
+                    attributes: Object.keys(attributes).length > 0
+                        ? attributes
+                        : undefined,
+                };
+            }
+            if ([
+                "p",
+                "div",
+                "h1",
+                "h2",
+                "h3",
+                "h4",
+                "h5",
+                "h6",
+                "blockquote",
+                "ul",
+                "ol",
+                "li",
+            ].includes(tagName)) {
+                const children = [];
+                Array.from(el.childNodes).forEach((child) => {
+                    const processed = processNode(child);
+                    if (processed)
+                        children.push(processed);
+                });
+                const attributes = {};
+                if (tagName === "a") {
+                    const href = el.getAttribute("href");
+                    if (href)
+                        attributes.href = href;
+                }
+                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,
+                    };
+                }
+                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;
+                                }
+                            }
+                        });
+                    }
+                }
+                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,
+                };
+            }
+            const children = [];
+            Array.from(el.childNodes).forEach((child) => {
+                const processed = processNode(child);
+                if (processed)
+                    children.push(processed);
+            });
+            if (children.length > 0) {
+                return {
+                    type: tagName,
+                    children,
+                };
+            }
+        }
+        return null;
+    }
+    Array.from(element.childNodes).forEach((node) => {
+        const processed = processNode(node);
+        if (processed) {
+            if (processed.type === "text") {
+                blocks.push({ type: "p", children: [processed] });
+            }
+            else {
+                blocks.push(processed);
+            }
+        }
+    });
+    if (blocks.length === 0) {
+        blocks.push({ type: "p", children: [] });
+    }
+    return { blocks };
+}
+function contentToDOM(content, container, customLinkComponent, customHeadingRenderer) {
+    container.innerHTML = "";
+    function createNode(node) {
+        if (node.type === "text" && node.text !== undefined) {
+            return document.createTextNode(node.text);
+        }
+        if (node.type === "image") {
+            const img = document.createElement("img");
+            if (node.attributes) {
+                if (node.attributes.src)
+                    img.setAttribute("src", node.attributes.src);
+                if (node.attributes.alt)
+                    img.setAttribute("alt", node.attributes.alt);
+                if (node.attributes.uploading === "true") {
+                    img.setAttribute("data-uploading", "true");
+                }
+            }
+            img.style.maxWidth = "100%";
+            img.style.height = "auto";
+            img.style.display = "block";
+            img.style.margin = "16px 0";
+            return img;
+        }
+        const tagMap = {
+            bold: "strong",
+            italic: "em",
+            underline: "u",
+            link: "a",
+        };
+        let tagName = tagMap[node.type] || node.type;
+        if (node.type === "link" && customLinkComponent) {
+            tagName = "a";
+            if (node.attributes) {
+                node.attributes["data-custom-link"] = "true";
+            }
+        }
+        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());
+                    }
+                }
+                else {
+                    element.setAttribute(key, value);
+                }
+            });
+        }
+        if (node.children) {
+            node.children.forEach((child) => {
+                const childNode = createNode(child);
+                element.appendChild(childNode);
+            });
+        }
+        return element;
+    }
+    content.blocks.forEach((block) => {
+        const blockNode = createNode(block);
+        container.appendChild(blockNode);
+    });
+}
+function createEmptyContent() {
+    return {
+        blocks: [{ type: "p", children: [] }],
+    };
+}
+function htmlToContent(htmlString) {
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = htmlString.trim();
+    return domToContent(tempDiv);
+}
+function contentToHTML(content) {
+    const tempDiv = document.createElement("div");
+    contentToDOM(content, tempDiv);
+    return tempDiv.innerHTML;
+}
+
+class HistoryManager {
+    constructor() {
+        this.history = [];
+        this.currentIndex = -1;
+        this.maxHistorySize = 50;
+    }
+    push(content) {
+        // Entferne alle Einträge nach currentIndex (wenn wir zurückgegangen sind)
+        this.history = this.history.slice(0, this.currentIndex + 1);
+        // Füge neuen Eintrag hinzu
+        this.history.push(JSON.parse(JSON.stringify(content))); // Deep clone
+        this.currentIndex++;
+        // Begrenze die Historie
+        if (this.history.length > this.maxHistorySize) {
+            this.history.shift();
+            this.currentIndex--;
+        }
+    }
+    undo() {
+        if (this.canUndo()) {
+            this.currentIndex--;
+            return JSON.parse(JSON.stringify(this.history[this.currentIndex]));
+        }
+        return null;
+    }
+    redo() {
+        if (this.canRedo()) {
+            this.currentIndex++;
+            return JSON.parse(JSON.stringify(this.history[this.currentIndex]));
+        }
+        return null;
+    }
+    canUndo() {
+        return this.currentIndex > 0;
+    }
+    canRedo() {
+        return this.currentIndex < this.history.length - 1;
+    }
+    getCurrent() {
+        if (this.currentIndex >= 0 && this.currentIndex < this.history.length) {
+            return JSON.parse(JSON.stringify(this.history[this.currentIndex]));
+        }
+        return null;
+    }
+    reset() {
+        this.history = [];
+        this.currentIndex = -1;
+    }
+}
+
+/**
+ * Erhöht den Einrückungs-Level eines List-Items (Tab)
+ */
+function indentListItem(selection) {
+    if (!selection || selection.rangeCount === 0)
+        return false;
+    const range = selection.getRangeAt(0);
+    const container = range.commonAncestorContainer;
+    const listItem = container.nodeType === Node.TEXT_NODE
+        ? container.parentElement?.closest('li')
+        : container.closest('li');
+    if (!listItem)
+        return false;
+    const list = listItem.parentElement;
+    if (!list || (list.tagName !== 'UL' && list.tagName !== 'OL'))
+        return false;
+    // Prüfe ob bereits verschachtelt (max depth check)
+    let depth = 0;
+    let current = listItem;
+    while (current) {
+        const parent = current.parentElement;
+        if (parent && (parent.tagName === 'UL' || parent.tagName === 'OL')) {
+            depth++;
+            current = parent.closest('li');
+        }
+        else {
+            break;
+        }
+    }
+    // Max depth: 6 (wie in HTML Standard)
+    if (depth >= 6)
+        return false;
+    // Finde vorheriges List-Item
+    const previousItem = listItem.previousElementSibling;
+    if (previousItem && previousItem.tagName === 'LI') {
+        // Erstelle verschachtelte Liste im vorherigen Item
+        let nestedList = previousItem.querySelector('ul, ol');
+        if (!nestedList) {
+            // Erstelle neue verschachtelte Liste
+            nestedList = document.createElement(list.tagName.toLowerCase());
+            previousItem.appendChild(nestedList);
+        }
+        // Verschiebe aktuelles Item in verschachtelte Liste
+        nestedList.appendChild(listItem);
+        // Cursor setzen
+        const textNode = listItem.firstChild;
+        if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+            range.setStart(textNode, 0);
+            range.collapse(true);
+        }
+        else if (listItem.firstChild) {
+            range.setStart(listItem.firstChild, 0);
+            range.collapse(true);
+        }
+        else {
+            const newText = document.createTextNode('');
+            listItem.appendChild(newText);
+            range.setStart(newText, 0);
+            range.collapse(true);
+        }
+        selection.removeAllRanges();
+        selection.addRange(range);
+        return true;
+    }
+    else {
+        // Kein vorheriges Item - erstelle neue verschachtelte Liste im aktuellen Item
+        const nestedList = document.createElement(list.tagName.toLowerCase());
+        // Verschiebe alle nachfolgenden Items in die verschachtelte Liste
+        let nextSibling = listItem.nextElementSibling;
+        while (nextSibling && nextSibling.tagName === 'LI') {
+            const toMove = nextSibling;
+            nextSibling = nextSibling.nextElementSibling;
+            nestedList.appendChild(toMove);
+        }
+        if (nestedList.children.length > 0) {
+            listItem.appendChild(nestedList);
+        }
+        else {
+            // Wenn keine nachfolgenden Items, erstelle leeres Sub-Item
+            const subItem = document.createElement('li');
+            nestedList.appendChild(subItem);
+            listItem.appendChild(nestedList);
+            // Cursor ins Sub-Item setzen
+            const newText = document.createTextNode('');
+            subItem.appendChild(newText);
+            range.setStart(newText, 0);
+            range.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+        return true;
+    }
+}
+/**
+ * Reduziert den Einrückungs-Level eines List-Items (Shift+Tab)
+ */
+function outdentListItem(selection) {
+    if (!selection || selection.rangeCount === 0)
+        return false;
+    const range = selection.getRangeAt(0);
+    const container = range.commonAncestorContainer;
+    const listItem = container.nodeType === Node.TEXT_NODE
+        ? container.parentElement?.closest('li')
+        : container.closest('li');
+    if (!listItem)
+        return false;
+    const list = listItem.parentElement;
+    if (!list || (list.tagName !== 'UL' && list.tagName !== 'OL'))
+        return false;
+    // Prüfe ob in verschachtelter Liste
+    const parentListItem = list.parentElement;
+    if (!parentListItem || parentListItem.tagName !== 'LI') {
+        // Bereits auf oberstem Level
+        return false;
+    }
+    const parentList = parentListItem.parentElement;
+    if (!parentList || (parentList.tagName !== 'UL' && parentList.tagName !== 'OL')) {
+        return false;
+    }
+    // Verschiebe Item auf oberes Level
+    // Finde Position nach dem Parent-Item
+    const insertAfter = parentListItem;
+    // Verschiebe Item und alle nachfolgenden Items aus der verschachtelten Liste
+    const itemsToMove = [listItem];
+    let nextSibling = listItem.nextElementSibling;
+    while (nextSibling && nextSibling.tagName === 'LI') {
+        itemsToMove.push(nextSibling);
+        nextSibling = nextSibling.nextElementSibling;
+    }
+    // Füge Items nach dem Parent-Item ein
+    itemsToMove.forEach(item => {
+        parentList.insertBefore(item, insertAfter.nextSibling);
+    });
+    // Entferne leere verschachtelte Liste
+    if (list.children.length === 0) {
+        list.remove();
+    }
+    // Cursor setzen
+    const textNode = listItem.firstChild;
+    if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+        range.setStart(textNode, 0);
+        range.collapse(true);
+    }
+    else if (listItem.firstChild) {
+        range.setStart(listItem.firstChild, 0);
+        range.collapse(true);
+    }
+    else {
+        const newText = document.createTextNode('');
+        listItem.appendChild(newText);
+        range.setStart(newText, 0);
+        range.collapse(true);
+    }
+    selection.removeAllRanges();
+    selection.addRange(range);
+    return true;
+}
+
+const Toolbar = ({ plugins, editorAPI, className, }) => {
+    const [updateTrigger, setUpdateTrigger] = useState(0);
+    const [isClient, setIsClient] = useState(false);
+    useEffect(() => {
+        setIsClient(true);
+        const handleSelectionChange = () => {
+            setUpdateTrigger((prev) => prev + 1);
+        };
+        const handleMouseUp = () => {
+            setTimeout(handleSelectionChange, 10);
+        };
+        const handleKeyUp = () => {
+            setTimeout(handleSelectionChange, 10);
+        };
+        if (typeof document !== 'undefined') {
+            document.addEventListener("selectionchange", handleSelectionChange);
+            document.addEventListener("mouseup", handleMouseUp);
+            document.addEventListener("keyup", handleKeyUp);
+        }
+        return () => {
+            if (typeof document !== 'undefined') {
+                document.removeEventListener("selectionchange", handleSelectionChange);
+                document.removeEventListener("mouseup", handleMouseUp);
+                document.removeEventListener("keyup", handleKeyUp);
+            }
+        };
+    }, []);
+    const handlePluginClick = (plugin, value) => {
+        if (plugin.canExecute?.(editorAPI) !== false) {
+            if (plugin.execute) {
+                plugin.execute(editorAPI, value);
+            }
+            else if (plugin.command && value !== undefined) {
+                editorAPI.executeCommand(plugin.command, value);
+            }
+            else if (plugin.command) {
+                editorAPI.executeCommand(plugin.command);
+            }
+            setTimeout(() => setUpdateTrigger((prev) => prev + 1), 50);
+        }
+    };
+    const leftPlugins = plugins.filter((p) => p.name !== "clearFormatting");
+    const clearFormattingPlugin = plugins.find((p) => p.name === "clearFormatting");
+    return (jsxs("div", { className: `rte-toolbar rte-toolbar-sticky ${className || ""}`, children: [jsx("div", { className: "rte-toolbar-left", children: leftPlugins.map((plugin) => {
+                    if (!plugin.renderButton)
+                        return null;
+                    const isActive = isClient && plugin.isActive
+                        ? plugin.isActive(editorAPI)
+                        : false;
+                    const canExecute = isClient && plugin.canExecute
+                        ? plugin.canExecute(editorAPI)
+                        : true;
+                    const currentValue = isClient && plugin.getCurrentValue
+                        ? plugin.getCurrentValue(editorAPI)
+                        : undefined;
+                    const buttonProps = {
+                        isActive,
+                        onClick: () => handlePluginClick(plugin),
+                        disabled: !canExecute,
+                        onSelect: (value) => handlePluginClick(plugin, value),
+                        editorAPI,
+                        currentValue,
+                    };
+                    return (jsx(React.Fragment, { children: plugin.renderButton(buttonProps) }, plugin.name));
+                }) }), clearFormattingPlugin && clearFormattingPlugin.renderButton && (jsxs("div", { className: "rte-toolbar-right", children: [jsx("div", { className: "rte-toolbar-divider" }), (() => {
+                        const isActive = isClient && clearFormattingPlugin.isActive
+                            ? clearFormattingPlugin.isActive(editorAPI)
+                            : false;
+                        const canExecute = isClient && clearFormattingPlugin.canExecute
+                            ? clearFormattingPlugin.canExecute(editorAPI)
+                            : true;
+                        const buttonProps = {
+                            isActive,
+                            onClick: () => handlePluginClick(clearFormattingPlugin),
+                            disabled: !canExecute,
+                            editorAPI,
+                        };
+                        return (jsx(React.Fragment, { children: clearFormattingPlugin.renderButton(buttonProps) }, clearFormattingPlugin.name));
+                    })()] }))] }));
+};
+
+const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholder = "Text eingeben...", className, toolbarClassName, editorClassName, fontSizes, colors, headings, customLinkComponent, customHeadingRenderer, customRenderer, onEditorAPIReady, theme, onImageUpload, }) => {
+    const plugins = useMemo(() => {
+        const allPlugins = [...(providedPlugins || defaultPlugins)];
+        if (fontSizes && fontSizes.length > 0) {
+            allPlugins.push(createFontSizePlugin(fontSizes));
+        }
+        if (colors && colors.length > 0) {
+            allPlugins.push(createTextColorPlugin(colors));
+            allPlugins.push(createBackgroundColorPlugin(colors));
+        }
+        if (headings && headings.length > 0) {
+            allPlugins.push(createHeadingsPlugin(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);
+    const notifyChange = useCallback((content) => {
+        if (onChange && !isUpdatingRef.current) {
+            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 editorAPI = useMemo(() => {
+        const executeCommand = (command, value) => {
+            const editor = editorRef.current;
+            if (!editor)
+                return false;
+            if (command !== "undo" &&
+                command !== "redo" &&
+                command !== "insertImage") {
+                const currentContent = domToContent(editor);
+                historyRef.current.push(currentContent);
+            }
+            if (command === "undo") {
+                const content = historyRef.current.undo();
+                if (content && editor) {
+                    isUpdatingRef.current = true;
+                    contentToDOM(content, editor, customLinkComponent);
+                    restoreSelection(editor);
+                    isUpdatingRef.current = false;
+                    notifyChange(content);
+                }
+                return true;
+            }
+            if (command === "redo") {
+                const content = historyRef.current.redo();
+                if (content && editor) {
+                    isUpdatingRef.current = true;
+                    contentToDOM(content, editor, customLinkComponent);
+                    restoreSelection(editor);
+                    isUpdatingRef.current = false;
+                    notifyChange(content);
+                }
+                return true;
+            }
+            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);
+            }
+            else if (savedRange) {
+                selection.removeAllRanges();
+                selection.addRange(savedRange);
+            }
+            document.execCommand(command, false, value);
+            setTimeout(() => {
+                if (editor && !isUpdatingRef.current) {
+                    const content = domToContent(editor);
+                    notifyChange(content);
+                }
+            }, 0);
+            return true;
+        };
+        return {
+            executeCommand,
+            getSelection: () => {
+                if (typeof window === 'undefined')
+                    return null;
+                return window.getSelection();
+            },
+            getContent: () => {
+                const editor = editorRef.current;
+                if (!editor)
+                    return createEmptyContent();
+                return domToContent(editor);
+            },
+            setContent: (content) => {
+                const editor = editorRef.current;
+                if (!editor)
+                    return;
+                isUpdatingRef.current = true;
+                contentToDOM(content, editor, customLinkComponent);
+                historyRef.current.push(content);
+                isUpdatingRef.current = false;
+                notifyChange(content);
+            },
+            insertBlock: (type, attributes) => {
+                const selection = window.getSelection();
+                if (!selection || selection.rangeCount === 0)
+                    return;
+                const range = selection.getRangeAt(0);
+                const block = document.createElement(type);
+                if (attributes) {
+                    Object.entries(attributes).forEach(([key, value]) => {
+                        block.setAttribute(key, value);
+                    });
+                }
+                range.insertNode(block);
+                const textNode = document.createTextNode("\u200B"); // Zero-width space
+                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);
+                }
+            },
+            insertInline: (type, attributes) => {
+                const selection = window.getSelection();
+                if (!selection || selection.rangeCount === 0)
+                    return;
+                const range = selection.getRangeAt(0);
+                const inline = document.createElement(type);
+                if (attributes) {
+                    Object.entries(attributes).forEach(([key, value]) => {
+                        inline.setAttribute(key, value);
+                    });
+                }
+                try {
+                    range.surroundContents(inline);
+                }
+                catch (e) {
+                    // Falls surroundContents fehlschlägt, versuche es anders
+                    const contents = range.extractContents();
+                    inline.appendChild(contents);
+                    range.insertNode(inline);
+                }
+                // Cursor setzen
+                range.setStartAfter(inline);
+                range.collapse(true);
+                selection.removeAllRanges();
+                selection.addRange(range);
+                const editor = editorRef.current;
+                if (editor) {
+                    const content = domToContent(editor);
+                    notifyChange(content);
+                }
+            },
+            undo: () => {
+                executeCommand("undo");
+            },
+            redo: () => {
+                executeCommand("redo");
+            },
+            canUndo: () => {
+                return historyRef.current.canUndo();
+            },
+            canRedo: () => {
+                return historyRef.current.canRedo();
+            },
+            importHtml: (htmlString) => {
+                const content = htmlToContent(htmlString);
+                const editor = editorRef.current;
+                if (editor) {
+                    isUpdatingRef.current = true;
+                    contentToDOM(content, editor, customLinkComponent);
+                    historyRef.current.push(content);
+                    isUpdatingRef.current = false;
+                    notifyChange(content);
+                }
+                return content;
+            },
+            exportHtml: () => {
+                const editor = editorRef.current;
+                if (!editor)
+                    return "";
+                const content = domToContent(editor);
+                return contentToHTML(content);
+            },
+            clearFormatting: () => {
+                const editor = editorRef.current;
+                if (!editor)
+                    return;
+                const selection = window.getSelection();
+                if (selection && selection.rangeCount > 0) {
+                    const currentContent = domToContent(editor);
+                    historyRef.current.push(currentContent);
+                    clearFormatting(selection);
+                    setTimeout(() => {
+                        if (editor) {
+                            const content = domToContent(editor);
+                            notifyChange(content);
+                        }
+                    }, 0);
+                }
+            },
+            clearTextColor: () => {
+                const editor = editorRef.current;
+                if (!editor)
+                    return;
+                const selection = window.getSelection();
+                if (selection && selection.rangeCount > 0) {
+                    const currentContent = domToContent(editor);
+                    historyRef.current.push(currentContent);
+                    clearTextColor(selection);
+                    setTimeout(() => {
+                        if (editor) {
+                            const content = domToContent(editor);
+                            notifyChange(content);
+                        }
+                    }, 0);
+                }
+            },
+            clearBackgroundColor: () => {
+                const editor = editorRef.current;
+                if (!editor)
+                    return;
+                const selection = window.getSelection();
+                if (selection && selection.rangeCount > 0) {
+                    const currentContent = domToContent(editor);
+                    historyRef.current.push(currentContent);
+                    clearBackgroundColor(selection);
+                    setTimeout(() => {
+                        if (editor) {
+                            const content = domToContent(editor);
+                            notifyChange(content);
+                        }
+                    }, 0);
+                }
+            },
+            clearFontSize: () => {
+                const editor = editorRef.current;
+                if (!editor)
+                    return;
+                const selection = window.getSelection();
+                if (selection && selection.rangeCount > 0) {
+                    const currentContent = domToContent(editor);
+                    historyRef.current.push(currentContent);
+                    clearFontSize(selection);
+                    setTimeout(() => {
+                        if (editor) {
+                            const content = domToContent(editor);
+                            notifyChange(content);
+                        }
+                    }, 0);
+                }
+            },
+            clearLinks: () => {
+                const editor = editorRef.current;
+                if (!editor)
+                    return;
+                const selection = window.getSelection();
+                if (selection && selection.rangeCount > 0) {
+                    const currentContent = domToContent(editor);
+                    historyRef.current.push(currentContent);
+                    clearLinks(selection);
+                    setTimeout(() => {
+                        if (editor) {
+                            const content = domToContent(editor);
+                            notifyChange(content);
+                        }
+                    }, 0);
+                }
+            },
+        };
+    }, [
+        notifyChange,
+        restoreSelection,
+        customLinkComponent,
+        customHeadingRenderer,
+    ]);
+    useEffect(() => {
+        if (onEditorAPIReady) {
+            onEditorAPIReady(editorAPI);
+        }
+    }, [editorAPI, onEditorAPIReady]);
+    const isInitializedRef = useRef(false);
+    useEffect(() => {
+        const editor = editorRef.current;
+        if (!editor || isInitializedRef.current)
+            return;
+        const content = initialContent || createEmptyContent();
+        isUpdatingRef.current = true;
+        contentToDOM(content, editor, customLinkComponent);
+        historyRef.current.push(content);
+        isUpdatingRef.current = false;
+        isInitializedRef.current = true;
+        let inputTimeout = null;
+        const handleInput = () => {
+            if (isUpdatingRef.current)
+                return;
+            const content = domToContent(editor);
+            notifyChange(content);
+            if (inputTimeout) {
+                clearTimeout(inputTimeout);
+            }
+            inputTimeout = setTimeout(() => {
+                historyRef.current.push(content);
+                inputTimeout = null;
+            }, 300);
+        };
+        const handleKeyDown = (e) => {
+            const isModifierPressed = e.metaKey || e.ctrlKey;
+            if (e.key === "Tab" && !isModifierPressed && !e.altKey) {
+                const selection = window.getSelection();
+                const isSelectionInEditor = selection &&
+                    selection.rangeCount > 0 &&
+                    editor.contains(selection.getRangeAt(0).commonAncestorContainer);
+                const isEditorFocused = document.activeElement === editor ||
+                    editor.contains(document.activeElement) ||
+                    isSelectionInEditor;
+                if (!isEditorFocused) {
+                    return;
+                }
+                e.preventDefault();
+                e.stopPropagation();
+                if (isSelectionInEditor &&
+                    selection &&
+                    selection.rangeCount > 0) {
+                    const range = selection.getRangeAt(0);
+                    const container = range.commonAncestorContainer;
+                    const listItem = container.nodeType === Node.TEXT_NODE
+                        ? container.parentElement?.closest("li")
+                        : container.closest("li");
+                    if (listItem && editor.contains(listItem)) {
+                        e.stopImmediatePropagation();
+                        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;
+                    }
+                }
+                document.execCommand("insertText", false, "\t");
+            }
+            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);
+        return () => {
+            editor.removeEventListener("input", handleInput);
+            editor.removeEventListener("keydown", handleKeyDown);
+            if (inputTimeout) {
+                clearTimeout(inputTimeout);
+            }
+        };
+    }, [editorAPI, notifyChange]);
+    const handlePaste = (e) => {
+        e.preventDefault();
+        const html = e.clipboardData.getData("text/html");
+        const text = e.clipboardData.getData("text/plain");
+        if (html) {
+            try {
+                const pastedContent = htmlToContent(html);
+                const editor = editorRef.current;
+                if (!editor)
+                    return;
+                const selection = window.getSelection();
+                if (selection && selection.rangeCount > 0) {
+                    const range = selection.getRangeAt(0);
+                    range.deleteContents();
+                    const tempDiv = document.createElement("div");
+                    contentToDOM(pastedContent, tempDiv, customLinkComponent, customHeadingRenderer);
+                    const fragment = document.createDocumentFragment();
+                    while (tempDiv.firstChild) {
+                        fragment.appendChild(tempDiv.firstChild);
+                    }
+                    range.insertNode(fragment);
+                    if (fragment.lastChild) {
+                        range.setStartAfter(fragment.lastChild);
+                        range.collapse(true);
+                    }
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                    const content = domToContent(editor);
+                    notifyChange(content);
+                }
+            }
+            catch (error) {
+                document.execCommand("insertText", false, text);
+            }
+        }
+        else if (text) {
+            document.execCommand("insertText", false, text);
+        }
+    };
+    const containerStyle = theme
+        ? {
+            ...(theme.borderColor &&
+                {
+                    "--rte-border-color": theme.borderColor,
+                }),
+            ...(theme.borderRadius &&
+                {
+                    "--rte-border-radius": `${theme.borderRadius}px`,
+                }),
+            ...(theme.toolbarBg &&
+                {
+                    "--rte-toolbar-bg": theme.toolbarBg,
+                }),
+            ...(theme.buttonHoverBg &&
+                {
+                    "--rte-button-hover-bg": theme.buttonHoverBg,
+                }),
+            ...(theme.contentBg &&
+                {
+                    "--rte-content-bg": theme.contentBg,
+                }),
+            ...(theme.primaryColor &&
+                {
+                    "--rte-primary-color": theme.primaryColor,
+                }),
+        }
+        : {};
+    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 })] }));
+};
+
+/**
+ * Link-Plugin mit verbesserter Funktionalität
+ */
+function createLinkPlugin() {
+    return {
+        name: 'link',
+        type: 'inline',
+        command: 'createLink',
+        renderButton: (props) => (jsx("button", { type: "button", onClick: props.onClick, disabled: props.disabled, className: `rte-toolbar-button ${props.isActive ? 'rte-toolbar-button-active' : ''}`, title: "Link einf\u00FCgen", "aria-label": "Link einf\u00FCgen", children: jsx(IconWrapper, { icon: "mdi:link", width: 18, height: 18 }) })),
+        execute: (editor) => {
+            const selection = editor.getSelection();
+            if (!selection || selection.rangeCount === 0)
+                return;
+            const range = selection.getRangeAt(0);
+            const container = range.commonAncestorContainer;
+            const element = container.nodeType === Node.TEXT_NODE
+                ? container.parentElement
+                : container;
+            // Prüfe ob bereits ein Link vorhanden ist
+            const existingLink = element?.closest('a');
+            if (existingLink) {
+                // Link entfernen
+                const parent = existingLink.parentNode;
+                if (parent) {
+                    while (existingLink.firstChild) {
+                        parent.insertBefore(existingLink.firstChild, existingLink);
+                    }
+                    parent.removeChild(existingLink);
+                    // Content aktualisieren
+                    const editorEl = editor.getSelection()?.anchorNode;
+                    if (editorEl) {
+                        const content = editor.getContent();
+                        editor.setContent(content);
+                    }
+                }
+            }
+            else {
+                // Neuen Link einfügen
+                const url = prompt('URL eingeben:');
+                if (url) {
+                    editor.executeCommand('createLink', url);
+                }
+            }
+        },
+        isActive: (editor) => {
+            const selection = editor.getSelection();
+            if (!selection || selection.rangeCount === 0)
+                return false;
+            const range = selection.getRangeAt(0);
+            const container = range.commonAncestorContainer;
+            const element = container.nodeType === Node.TEXT_NODE
+                ? container.parentElement
+                : container;
+            if (!element)
+                return false;
+            return element.closest('a') !== null;
+        },
+        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 link = element.closest('a');
+            return link ? link.href : undefined;
+        },
+        canExecute: (editor) => {
+            const selection = editor.getSelection();
+            return selection !== null && selection.rangeCount > 0;
+        },
+    };
+}
+const linkPlugin = createLinkPlugin();
+/**
+ * Blockquote-Plugin
+ */
+const blockquotePlugin = {
+    name: 'blockquote',
+    type: 'block',
+    command: 'formatBlock',
+    renderButton: (props) => (jsx("button", { type: "button", onClick: props.onClick, disabled: props.disabled, className: `rte-toolbar-button ${props.isActive ? 'rte-toolbar-button-active' : ''}`, title: "Zitat", "aria-label": "Zitat", children: jsx(IconWrapper, { icon: "mdi:format-quote-close", width: 18, height: 18 }) })),
+    execute: (editor) => {
+        const selection = editor.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const range = selection.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        const element = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        if (!element)
+            return;
+        const isBlockquote = element.closest('blockquote') !== null;
+        if (isBlockquote) {
+            editor.executeCommand('formatBlock', '<p>');
+        }
+        else {
+            editor.executeCommand('formatBlock', '<blockquote>');
+        }
+    },
+    isActive: (editor) => {
+        const selection = editor.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return false;
+        const range = selection.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        const element = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        if (!element)
+            return false;
+        return element.closest('blockquote') !== null;
+    },
+    canExecute: (editor) => {
+        const selection = editor.getSelection();
+        return selection !== null && selection.rangeCount > 0;
+    },
+};
+/**
+ * Unordered List Plugin
+ */
+const unorderedListPlugin = {
+    name: 'unorderedList',
+    type: 'block',
+    command: 'insertUnorderedList',
+    renderButton: (props) => (jsx("button", { type: "button", onClick: props.onClick, disabled: props.disabled, className: `rte-toolbar-button ${props.isActive ? 'rte-toolbar-button-active' : ''}`, title: "Aufz\u00E4hlungsliste", "aria-label": "Aufz\u00E4hlungsliste", children: jsx(IconWrapper, { icon: "mdi:format-list-bulleted", width: 18, height: 18 }) })),
+    execute: (editor) => {
+        editor.executeCommand('insertUnorderedList');
+    },
+    isActive: (editor) => {
+        if (typeof document === 'undefined')
+            return false;
+        return document.queryCommandState('insertUnorderedList');
+    },
+    canExecute: (editor) => {
+        const selection = editor.getSelection();
+        return selection !== null && selection.rangeCount > 0;
+    },
+};
+/**
+ * Ordered List Plugin
+ */
+const orderedListPlugin = {
+    name: 'orderedList',
+    type: 'block',
+    command: 'insertOrderedList',
+    renderButton: (props) => (jsx("button", { type: "button", onClick: props.onClick, disabled: props.disabled, className: `rte-toolbar-button ${props.isActive ? 'rte-toolbar-button-active' : ''}`, title: "Nummerierte Liste", "aria-label": "Nummerierte Liste", children: jsx(IconWrapper, { icon: "mdi:format-list-numbered", width: 18, height: 18 }) })),
+    execute: (editor) => {
+        editor.executeCommand('insertOrderedList');
+    },
+    isActive: (editor) => {
+        if (typeof document === 'undefined')
+            return false;
+        return document.queryCommandState('insertOrderedList');
+    },
+    canExecute: (editor) => {
+        const selection = editor.getSelection();
+        return selection !== null && selection.rangeCount > 0;
+    },
+};
+
+export { Dropdown, Editor, HistoryManager, Toolbar, blockquotePlugin, boldPlugin, clearFormattingPlugin, contentToDOM, contentToHTML, createBackgroundColorPlugin, createEmptyContent, createFontSizePlugin, createHeadingsPlugin, createImagePlugin, createLinkPlugin, createTextColorPlugin, Editor as default, defaultPlugins, domToContent, getCurrentBackgroundColor, getCurrentFontSize, getCurrentHeading, getCurrentTextColor, htmlToContent, indentListItem, italicPlugin, linkPlugin, orderedListPlugin, outdentListItem, redoPlugin, underlinePlugin, undoPlugin, unorderedListPlugin };
+//# sourceMappingURL=index.esm.js.map