@overlap/rte 0.1.11 → 1.0.2

package/dist/index.js

@@ -106,7 +106,20 @@ const Dropdown = ({ icon, label, options, onSelect, currentValue, disabled, show
         setIsOpen(false);
     };
     const currentOption = options.find(opt => opt.value === currentValue);
-    return (jsxRuntime.jsxs("div", { className: "rte-dropdown", ref: dropdownRef, onMouseDown: (e) => e.preventDefault(), children: [jsxRuntime.jsxs("button", { type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `rte-toolbar-button rte-dropdown-button ${currentOption ? 'rte-dropdown-button-has-value' : ''}`, title: label, "aria-label": label, children: [jsxRuntime.jsx(Icon, { icon: icon, width: 18, height: 18 }), currentOption && (jsxRuntime.jsx("span", { className: "rte-dropdown-value", children: currentOption.label }))] }), isOpen && (jsxRuntime.jsxs("div", { className: "rte-dropdown-menu", children: [options.map((option) => (jsxRuntime.jsxs("button", { type: "button", className: `rte-dropdown-item ${currentValue === option.value ? 'rte-dropdown-item-active' : ''}`, onClick: () => handleSelect(option.value), children: [option.color && (jsxRuntime.jsx("span", { className: `rte-dropdown-color-preview ${currentValue === option.value ? 'active' : ''}`, style: { backgroundColor: option.color } })), option.preview && !option.headingPreview && (jsxRuntime.jsx("span", { className: "rte-dropdown-fontsize-preview", style: { fontSize: `${option.preview}px` }, children: "Aa" })), option.headingPreview && (jsxRuntime.jsx("span", { className: `rte-dropdown-heading-preview ${option.headingPreview}`, children: option.headingPreview === 'p' ? 'Normal' : option.headingPreview.toUpperCase() })), option.icon && jsxRuntime.jsx(Icon, { icon: option.icon, width: 16, height: 16 }), jsxRuntime.jsx("span", { style: { flex: 1, fontWeight: currentValue === option.value ? 600 : 400 }, children: option.label })] }, option.value))), showCustomColorInput && (jsxRuntime.jsxs("div", { className: "rte-color-custom-input", onMouseDown: (e) => e.stopPropagation(), children: [jsxRuntime.jsx("input", { type: "color", value: customColor, onChange: (e) => setCustomColor(e.target.value), title: "Pick a color" }), jsxRuntime.jsx("input", { type: "text", value: customColor, onChange: (e) => {
+    // Close on Escape key
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen]);
+    return (jsxRuntime.jsxs("div", { className: "rte-dropdown", ref: dropdownRef, onMouseDown: (e) => e.preventDefault(), children: [jsxRuntime.jsxs("button", { type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `rte-toolbar-button rte-dropdown-button ${currentOption ? 'rte-dropdown-button-has-value' : ''}`, title: label, "aria-label": label, "aria-expanded": isOpen, "aria-haspopup": "listbox", children: [jsxRuntime.jsx(Icon, { icon: icon, width: 18, height: 18 }), currentOption && (jsxRuntime.jsx("span", { className: "rte-dropdown-value", children: currentOption.label }))] }), isOpen && (jsxRuntime.jsxs("div", { className: "rte-dropdown-menu", role: "listbox", "aria-label": label, children: [options.map((option) => (jsxRuntime.jsxs("button", { type: "button", role: "option", "aria-selected": currentValue === option.value, className: `rte-dropdown-item ${currentValue === option.value ? 'rte-dropdown-item-active' : ''}`, onClick: () => handleSelect(option.value), children: [option.color && (jsxRuntime.jsx("span", { className: `rte-dropdown-color-preview ${currentValue === option.value ? 'active' : ''}`, style: { backgroundColor: option.color } })), option.preview && !option.headingPreview && (jsxRuntime.jsx("span", { className: "rte-dropdown-fontsize-preview", style: { fontSize: `${option.preview}px` }, children: "Aa" })), option.headingPreview && (jsxRuntime.jsx("span", { className: `rte-dropdown-heading-preview ${option.headingPreview}`, children: option.headingPreview === 'p' ? 'Normal' : option.headingPreview.toUpperCase() })), option.icon && jsxRuntime.jsx(Icon, { icon: option.icon, width: 16, height: 16 }), jsxRuntime.jsx("span", { style: { flex: 1, fontWeight: currentValue === option.value ? 600 : 400 }, children: option.label })] }, option.value))), showCustomColorInput && (jsxRuntime.jsxs("div", { className: "rte-color-custom-input", onMouseDown: (e) => e.stopPropagation(), children: [jsxRuntime.jsx("input", { type: "color", value: customColor, onChange: (e) => setCustomColor(e.target.value), title: "Pick a color" }), jsxRuntime.jsx("input", { type: "text", value: customColor, onChange: (e) => {
                                     const v = e.target.value;
                                     setCustomColor(v);
                                 }, placeholder: "#000000", maxLength: 7, onKeyDown: (e) => {
@@ -661,6 +674,168 @@ function useCheckbox({ editorRef, isUpdatingRef, pushToHistory, notifyChange, ge
     };
 }
 
+/**
+ * Lightweight HTML sanitizer (no external dependencies).
+ *
+ * Uses an allowlist approach to strip dangerous elements and attributes
+ * from pasted/imported HTML before it enters the editor.
+ */
+/** Tags that are always removed (including their content). */
+const REMOVE_TAGS = new Set([
+    "script",
+    "style",
+    "iframe",
+    "object",
+    "embed",
+    "applet",
+    "form",
+    "input",
+    "textarea",
+    "select",
+    "button",
+    "noscript",
+    "meta",
+    "link",
+    "base",
+    "svg",
+    "math",
+    "template",
+    "details",
+    "video",
+    "audio",
+    "marquee",
+]);
+/** Attributes that are always removed (event handlers, dangerous data-* attrs). */
+const REMOVE_ATTRS_PATTERN = /^on|^data-(?!(attachment-id|placeholder)$)/i;
+/** Specific dangerous attribute names. */
+const REMOVE_ATTRS = new Set([
+    "srcdoc",
+    "formaction",
+    "xlink:href",
+    "ping",
+]);
+/** Allowed URL schemes for href/src attributes. */
+const ALLOWED_SCHEMES = /^(https?:|mailto:|tel:|#|\/(?!\/))/i;
+/**
+ * Check if a URL is safe to set as href/src.
+ * Blocks javascript:, data:, vbscript:, and unknown schemes.
+ * Strips control characters before checking.
+ */
+function isUrlSafe(url) {
+    if (!url)
+        return false;
+    // Strip control characters and whitespace that could obfuscate schemes
+    const cleaned = url.trim().replace(/[\x00-\x1f\x7f]/g, "");
+    if (!cleaned)
+        return false;
+    // Block protocol-relative URLs (//evil.com)
+    if (cleaned.startsWith("//"))
+        return false;
+    // Must match an allowed scheme or be a relative path
+    return ALLOWED_SCHEMES.test(cleaned);
+}
+/**
+ * Sanitize an HTML string by stripping dangerous tags and attributes.
+ *
+ * @param html - Raw HTML string
+ * @returns Sanitized HTML string
+ */
+function sanitizeHtml(html) {
+    // Use the browser's DOMParser to parse the HTML safely
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+    sanitizeNode(doc.body);
+    return doc.body.innerHTML;
+}
+/** Recursively sanitize a DOM node. */
+function sanitizeNode(node) {
+    const childrenToRemove = [];
+    node.childNodes.forEach((child) => {
+        if (child.nodeType === Node.ELEMENT_NODE) {
+            const el = child;
+            const tag = el.tagName.toLowerCase();
+            // Remove dangerous tags entirely
+            if (REMOVE_TAGS.has(tag)) {
+                childrenToRemove.push(child);
+                return;
+            }
+            // Remove dangerous attributes
+            const attrsToRemove = [];
+            for (let i = 0; i < el.attributes.length; i++) {
+                const attr = el.attributes[i];
+                const name = attr.name.toLowerCase();
+                if (REMOVE_ATTRS.has(name) || REMOVE_ATTRS_PATTERN.test(name)) {
+                    attrsToRemove.push(attr.name);
+                    continue;
+                }
+                // Validate URL attributes
+                if (name === "href" || name === "src" || name === "action" || name === "cite" || name === "poster") {
+                    const value = attr.value.trim();
+                    if (value) {
+                        // Allow data:image/* for img src (matches contentToDOM behavior)
+                        const isDataImage = name === "src" && el.tagName === "IMG" && value.startsWith("data:image/");
+                        if (!isDataImage && !ALLOWED_SCHEMES.test(value)) {
+                            attrsToRemove.push(attr.name);
+                        }
+                    }
+                }
+                // Remove dangerous URI schemes in any attribute value
+                const lowerValue = attr.value.toLowerCase().replace(/[\x00-\x1f\x7f\s]/g, "");
+                if (lowerValue.includes("javascript:") ||
+                    lowerValue.includes("vbscript:") ||
+                    lowerValue.includes("data:text/html")) {
+                    attrsToRemove.push(attr.name);
+                }
+            }
+            attrsToRemove.forEach((attrName) => el.removeAttribute(attrName));
+            // Recurse into children
+            sanitizeNode(child);
+        }
+    });
+    // Remove marked children
+    childrenToRemove.forEach((child) => {
+        node.removeChild(child);
+    });
+}
+
+/** Allowed tag names that contentToDOM may create from JSON. */
+const ALLOWED_CONTENT_TAGS = new Set([
+    "p", "div", "span", "h1", "h2", "h3", "h4", "h5", "h6",
+    "ul", "ol", "li", "a", "strong", "em", "u", "s", "del",
+    "sub", "sup", "code", "pre", "blockquote", "br", "hr",
+    "img", "table", "thead", "tbody", "tr", "th", "td",
+    "b", "i", "strike",
+]);
+/** Checks if an attribute key is safe to set on a DOM element. */
+function isSafeAttribute(key) {
+    const lower = key.toLowerCase();
+    // Block all event handler attributes
+    if (lower.startsWith("on"))
+        return false;
+    // Block dangerous attributes
+    if (lower === "srcdoc" || lower === "formaction" || lower === "xlink:href" || lower === "ping")
+        return false;
+    return true;
+}
+/** Validates style values against expected patterns. */
+function isSafeStyleValue(prop, value) {
+    const clean = value.trim().toLowerCase();
+    // Block expression(), url(), import, javascript, and other injection vectors
+    if (/expression\s*\(|url\s*\(|@import|javascript:|vbscript:|-moz-binding/i.test(clean)) {
+        return false;
+    }
+    switch (prop) {
+        case "fontSize":
+            return /^[\d.]+(px|em|rem|pt|%|vw|vh)$/i.test(clean);
+        case "color":
+        case "backgroundColor":
+            return /^(#[0-9a-f]{3,8}|rgb\([\d\s,.%]+\)|rgba\([\d\s,.%]+\)|[a-z]+)$/i.test(clean);
+        case "textAlign":
+            return /^(left|right|center|justify|start|end)$/.test(clean);
+        default:
+            return true;
+    }
+}
 /**
  * Converts a DOM element (editor root) to EditorContent JSON.
  * Supports own format, Lexical HTML, and GitHub HTML.
@@ -981,8 +1156,13 @@ function contentToDOM(content, container, customLinkComponent, customHeadingRend
         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.src) {
+                    // Allow data:image/* for placeholders/uploads, otherwise validate
+                    const imgSrc = node.attributes.src;
+                    if (isUrlSafe(imgSrc) || imgSrc.startsWith("data:image/")) {
+                        img.setAttribute("src", imgSrc);
+                    }
+                }
                 if (node.attributes.alt)
                     img.setAttribute("alt", node.attributes.alt);
                 if (node.attributes.uploading === "true") {
@@ -1009,23 +1189,32 @@ function contentToDOM(content, container, customLinkComponent, customHeadingRend
                 node.attributes["data-custom-link"] = "true";
             }
         }
+        // Whitelist check: fall back to span for unknown/dangerous tags
+        if (!ALLOWED_CONTENT_TAGS.has(tagName)) {
+            tagName = "span";
+        }
         const element = document.createElement(tagName);
         if (node.attributes) {
             Object.entries(node.attributes).forEach(([key, value]) => {
                 if (key === "fontSize") {
-                    element.style.fontSize = value;
+                    if (isSafeStyleValue("fontSize", value))
+                        element.style.fontSize = value;
                 }
                 else if (key === "color") {
-                    element.style.color = value;
+                    if (isSafeStyleValue("color", value))
+                        element.style.color = value;
                 }
                 else if (key === "backgroundColor") {
-                    element.style.backgroundColor = value;
+                    if (isSafeStyleValue("backgroundColor", value))
+                        element.style.backgroundColor = value;
                 }
                 else if (key === "textAlign") {
-                    element.style.textAlign = value;
+                    if (isSafeStyleValue("textAlign", value))
+                        element.style.textAlign = value;
                 }
                 else if (key === "href" && tagName === "a") {
-                    element.setAttribute("href", value);
+                    if (isUrlSafe(value))
+                        element.setAttribute("href", value);
                 }
                 else if (key === "target" && tagName === "a") {
                     element.setAttribute("target", value);
@@ -1055,8 +1244,16 @@ function contentToDOM(content, container, customLinkComponent, customHeadingRend
                     element.className = value;
                 }
                 else if (key === "checkboxChecked") ;
-                else {
-                    element.setAttribute(key, value);
+                else if (isSafeAttribute(key)) {
+                    // Validate URL-like attribute values
+                    const lowerKey = key.toLowerCase();
+                    if (["cite", "action", "poster", "background"].includes(lowerKey)) {
+                        if (isUrlSafe(value))
+                            element.setAttribute(key, value);
+                    }
+                    else {
+                        element.setAttribute(key, value);
+                    }
                 }
             });
         }
@@ -1103,10 +1300,12 @@ function contentToHTML(content) {
 /**
  * Converts an HTML string to EditorContent.
  * Supports Lexical, GitHub, and standard HTML formats.
+ * Sanitizes HTML before parsing to prevent XSS.
  */
 function htmlToContent(htmlString) {
+    const sanitized = sanitizeHtml(htmlString);
     const tempDiv = document.createElement("div");
-    tempDiv.innerHTML = htmlString;
+    tempDiv.innerHTML = sanitized;
     return domToContent(tempDiv);
 }
 
@@ -1116,7 +1315,7 @@ function htmlToContent(htmlString) {
  * Detects URLs in text nodes and wraps them in <a> tags.
  * Triggered after space/enter when the preceding word looks like a URL.
  */
-const URL_REGEX = /(?:https?:\/\/|www\.)[^\s<>'"]+\.[^\s<>'"]+/i;
+const URL_REGEX = /^(?:https?:\/\/|www\.)[^\s<>'"]+\.[a-z]{2,}[^\s<>'"]*$/i;
 /**
  * Check if the word before the cursor is a URL and wrap it in an <a> tag.
  * Called on space/enter keypress in the editor.
@@ -1154,6 +1353,9 @@ function handleAutoLink(editor, e) {
     if (href.startsWith("www.")) {
         href = "https://" + href;
     }
+    // Validate the URL is safe before creating a link
+    if (!isUrlSafe(href))
+        return false;
     // Create the link element
     const anchor = document.createElement("a");
     anchor.href = href;
@@ -1215,22 +1417,22 @@ function indentListItem(selection) {
             break;
         }
     }
-    // Max depth: 6 (wie in HTML Standard)
+    // Max depth: 6 (as per HTML standard)
     if (depth >= 6)
         return false;
-    // Finde vorheriges List-Item
+    // Find previous list item
     const previousItem = listItem.previousElementSibling;
     if (previousItem && previousItem.tagName === 'LI') {
-        // Erstelle verschachtelte Liste im vorherigen Item
+        // Create nested list in the previous item
         let nestedList = previousItem.querySelector('ul, ol');
         if (!nestedList) {
-            // Erstelle neue verschachtelte Liste
+            // Create new nested list
             nestedList = document.createElement(list.tagName.toLowerCase());
             previousItem.appendChild(nestedList);
         }
-        // Verschiebe aktuelles Item in verschachtelte Liste
+        // Move current item into nested list
         nestedList.appendChild(listItem);
-        // Cursor setzen
+        // Set cursor position
         const textNode = listItem.firstChild;
         if (textNode && textNode.nodeType === Node.TEXT_NODE) {
             range.setStart(textNode, 0);
@@ -1251,9 +1453,9 @@ function indentListItem(selection) {
         return true;
     }
     else {
-        // Kein vorheriges Item - erstelle neue verschachtelte Liste im aktuellen Item
+        // No previous item — create new nested list in current item
         const nestedList = document.createElement(list.tagName.toLowerCase());
-        // Verschiebe alle nachfolgenden Items in die verschachtelte Liste
+        // Move all following items into the nested list
         let nextSibling = listItem.nextElementSibling;
         while (nextSibling && nextSibling.tagName === 'LI') {
             const toMove = nextSibling;
@@ -1264,11 +1466,11 @@ function indentListItem(selection) {
             listItem.appendChild(nestedList);
         }
         else {
-            // Wenn keine nachfolgenden Items, erstelle leeres Sub-Item
+            // If no following items, create empty sub-item
             const subItem = document.createElement('li');
             nestedList.appendChild(subItem);
             listItem.appendChild(nestedList);
-            // Cursor ins Sub-Item setzen
+            // Set cursor in sub-item
             const newText = document.createTextNode('');
             subItem.appendChild(newText);
             range.setStart(newText, 0);
@@ -1298,17 +1500,17 @@ function outdentListItem(selection) {
     // Check if in nested list
     const parentListItem = list.parentElement;
     if (!parentListItem || parentListItem.tagName !== 'LI') {
-        // Bereits auf oberstem Level
+        // Already at top 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
+    // Move item to parent level
+    // Find position after the parent item
     const insertAfter = parentListItem;
-    // Verschiebe Item und alle nachfolgenden Items aus der verschachtelten Liste
+    // Move item and all following items out of the nested list
     const itemsToMove = [listItem];
     let nextSibling = listItem.nextElementSibling;
     while (nextSibling && nextSibling.tagName === 'LI') {
@@ -1319,11 +1521,11 @@ function outdentListItem(selection) {
     itemsToMove.forEach(item => {
         parentList.insertBefore(item, insertAfter.nextSibling);
     });
-    // Entferne leere verschachtelte Liste
+    // Remove empty nested list
     if (list.children.length === 0) {
         list.remove();
     }
-    // Cursor setzen
+    // Set cursor position
     const textNode = listItem.firstChild;
     if (textNode && textNode.nodeType === Node.TEXT_NODE) {
         range.setStart(textNode, 0);
@@ -1857,7 +2059,7 @@ function navigateTableCell(direction) {
 /**
  * Hook that sets up input and keydown event listeners on the editor.
  */
-function useEditorEvents({ editorRef, historyRef, isUpdatingRef, notifyChange, handleCheckboxKeyDown, handleCheckboxEnter, undo, redo, }) {
+function useEditorEvents({ editorRef, historyRef, isUpdatingRef, mountedRef, notifyChange, handleCheckboxKeyDown, handleCheckboxEnter, undo, redo, }) {
     React.useEffect(() => {
         const editor = editorRef.current;
         if (!editor)
@@ -1865,11 +2067,15 @@ function useEditorEvents({ editorRef, historyRef, isUpdatingRef, notifyChange, h
         let inputTimeout = null;
         const handleInput = () => {
             setTimeout(() => {
+                if (!mountedRef.current)
+                    return;
                 const content = domToContent(editor);
                 notifyChange(content);
                 if (inputTimeout)
                     clearTimeout(inputTimeout);
                 inputTimeout = setTimeout(() => {
+                    if (!mountedRef.current)
+                        return;
                     const sel = serializeSelection(editor);
                     historyRef.current.push(content, sel);
                     inputTimeout = null;
@@ -1881,6 +2087,8 @@ function useEditorEvents({ editorRef, historyRef, isUpdatingRef, notifyChange, h
             // Markdown-style shortcuts (e.g., # + space → heading)
             if (!isModifierPressed && handleMarkdownShortcut(editor, e)) {
                 setTimeout(() => {
+                    if (!mountedRef.current)
+                        return;
                     const content = domToContent(editor);
                     notifyChange(content);
                 }, 0);
@@ -1905,6 +2113,8 @@ function useEditorEvents({ editorRef, historyRef, isUpdatingRef, notifyChange, h
                     e.stopImmediatePropagation();
                     navigateTableCell(e.shiftKey ? "prev" : "next");
                     setTimeout(() => {
+                        if (!mountedRef.current)
+                            return;
                         if (editor) {
                             const content = domToContent(editor);
                             notifyChange(content);
@@ -1936,6 +2146,8 @@ function useEditorEvents({ editorRef, historyRef, isUpdatingRef, notifyChange, h
                         indentListItem(selection);
                     }
                     setTimeout(() => {
+                        if (!mountedRef.current)
+                            return;
                         if (editor) {
                             const content = domToContent(editor);
                             notifyChange(content);
@@ -2047,6 +2259,8 @@ function useEditorEvents({ editorRef, historyRef, isUpdatingRef, notifyChange, h
                         document.execCommand(command, false);
                     }
                     setTimeout(() => {
+                        if (!mountedRef.current)
+                            return;
                         if (editor) {
                             const content = domToContent(editor);
                             notifyChange(content);
@@ -2096,6 +2310,7 @@ function useEditorInit({ editorRef, historyRef, isUpdatingRef, initialContent, c
         // Normalize all checkbox lists (own + Lexical + GitHub formats)
         ensureAllCheckboxes(editor);
         // MutationObserver: ensure new checkbox list items get correct attributes
+        let checkboxTimeout = null;
         const observer = new MutationObserver((mutations) => {
             if (isUpdatingRef.current)
                 return;
@@ -2125,11 +2340,15 @@ function useEditorInit({ editorRef, historyRef, isUpdatingRef, initialContent, c
                     break;
             }
             if (needsUpdate) {
-                setTimeout(() => ensureAllCheckboxes(editor), 0);
+                if (checkboxTimeout)
+                    clearTimeout(checkboxTimeout);
+                checkboxTimeout = setTimeout(() => ensureAllCheckboxes(editor), 0);
             }
         });
         observer.observe(editor, { childList: true, subtree: true });
         return () => {
+            if (checkboxTimeout)
+                clearTimeout(checkboxTimeout);
             observer.disconnect();
         };
         // Only run once on mount
@@ -2170,7 +2389,7 @@ function createInlinePlugin(name, command, icon, label) {
         },
         canExecute: (editor) => {
             // Formatting should also work without a selection
-            // (z.B. wenn Editor leer ist, wird beim Klick eine Selection erstellt)
+            // (e.g. when the editor is empty, a selection is created on click)
             return true;
         },
     };
@@ -2941,7 +3160,7 @@ function getDisplayUrl(raw) {
     return raw;
 }
 /**
- * Image-Plugin mit URL-Eingabe und File-Upload
+ * Image plugin with URL input and file upload support.
  */
 function createImagePlugin(onImageUpload) {
     return {
@@ -2964,7 +3183,17 @@ function createImagePlugin(onImageUpload) {
                     alert('Please enter an image URL');
                     return;
                 }
-                props.editorAPI.executeCommand('insertImage', src);
+                // Validate URL safety
+                const srcWithoutMeta = src.split('|__aid__:')[0];
+                if (!isUrlSafe(srcWithoutMeta)) {
+                    alert('Invalid image URL');
+                    return;
+                }
+                // Append alt text metadata if provided
+                const fullValue = altText.trim()
+                    ? `${src}|__alt__:${altText.trim()}`
+                    : src;
+                props.editorAPI.executeCommand('insertImage', fullValue);
                 // Close modal
                 setShowModal(false);
                 setRawUrl('');
@@ -3002,11 +3231,11 @@ function createImagePlugin(onImageUpload) {
                             if (e.target === e.currentTarget) {
                                 setShowModal(false);
                             }
-                        }, children: jsxRuntime.jsxs("div", { className: "rte-image-modal", children: [jsxRuntime.jsxs("div", { className: "rte-image-modal-header", children: [jsxRuntime.jsx("h3", { children: "Insert Image" }), jsxRuntime.jsx("button", { type: "button", onClick: () => setShowModal(false), className: "rte-image-modal-close", "aria-label": "Close", children: jsxRuntime.jsx(IconWrapper, { icon: "mdi:close", width: 20, height: 20 }) })] }), jsxRuntime.jsxs("div", { className: "rte-image-modal-content", children: [onImageUpload && (jsxRuntime.jsx("div", { className: "rte-image-upload-section", children: jsxRuntime.jsxs("label", { className: "rte-image-upload-label", children: [jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileSelect, style: { display: 'none' } }), jsxRuntime.jsx("div", { className: "rte-image-upload-button", children: isUploading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconWrapper, { icon: "mdi:loading", width: 24, height: 24, className: "rte-spin" }), jsxRuntime.jsx("span", { children: "Wird hochgeladen..." })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconWrapper, { icon: "mdi:upload", width: 24, height: 24 }), jsxRuntime.jsx("span", { children: "Choose File" })] })) })] }) })), jsxRuntime.jsx("div", { className: "rte-image-url-section", children: jsxRuntime.jsxs("label", { children: ["Bild-URL", jsxRuntime.jsx("input", { type: "url", value: imageUrl, onChange: (e) => {
+                        }, children: jsxRuntime.jsxs("div", { className: "rte-image-modal", children: [jsxRuntime.jsxs("div", { className: "rte-image-modal-header", children: [jsxRuntime.jsx("h3", { children: "Insert Image" }), jsxRuntime.jsx("button", { type: "button", onClick: () => setShowModal(false), className: "rte-image-modal-close", "aria-label": "Close", children: jsxRuntime.jsx(IconWrapper, { icon: "mdi:close", width: 20, height: 20 }) })] }), jsxRuntime.jsxs("div", { className: "rte-image-modal-content", children: [onImageUpload && (jsxRuntime.jsx("div", { className: "rte-image-upload-section", children: jsxRuntime.jsxs("label", { className: "rte-image-upload-label", children: [jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileSelect, style: { display: 'none' } }), jsxRuntime.jsx("div", { className: "rte-image-upload-button", children: isUploading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconWrapper, { icon: "mdi:loading", width: 24, height: 24, className: "rte-spin" }), jsxRuntime.jsx("span", { children: "Uploading..." })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconWrapper, { icon: "mdi:upload", width: 24, height: 24 }), jsxRuntime.jsx("span", { children: "Choose File" })] })) })] }) })), jsxRuntime.jsx("div", { className: "rte-image-url-section", children: jsxRuntime.jsxs("label", { children: ["Image URL", jsxRuntime.jsx("input", { type: "url", value: imageUrl, onChange: (e) => {
                                                             setImageUrl(e.target.value);
                                                             // Clear raw URL when user manually edits
                                                             setRawUrl('');
-                                                        }, placeholder: "https://example.com/image.jpg", className: "rte-image-url-input" })] }) }), jsxRuntime.jsx("div", { className: "rte-image-alt-section", children: jsxRuntime.jsxs("label", { children: ["Alt-Text (optional)", jsxRuntime.jsx("input", { type: "text", value: altText, onChange: (e) => setAltText(e.target.value), placeholder: "Image description", className: "rte-image-alt-input" })] }) }), imageUrl && (jsxRuntime.jsx("div", { className: "rte-image-preview", children: jsxRuntime.jsx("img", { src: imageUrl, alt: altText || 'Preview' }) }))] }), jsxRuntime.jsxs("div", { className: "rte-image-modal-footer", children: [jsxRuntime.jsx("button", { type: "button", onClick: () => setShowModal(false), className: "rte-image-modal-cancel", children: "Abbrechen" }), jsxRuntime.jsx("button", { type: "button", onClick: handleInsertImage, disabled: !imageUrl.trim() || isUploading, className: "rte-image-modal-insert", children: "Insert" })] })] }) }))] }));
+                                                        }, placeholder: "https://example.com/image.jpg", className: "rte-image-url-input" })] }) }), jsxRuntime.jsx("div", { className: "rte-image-alt-section", children: jsxRuntime.jsxs("label", { children: ["Alt Text (optional)", jsxRuntime.jsx("input", { type: "text", value: altText, onChange: (e) => setAltText(e.target.value), placeholder: "Image description", className: "rte-image-alt-input" })] }) }), imageUrl && (jsxRuntime.jsx("div", { className: "rte-image-preview", children: jsxRuntime.jsx("img", { src: imageUrl, alt: altText || 'Preview' }) }))] }), jsxRuntime.jsxs("div", { className: "rte-image-modal-footer", children: [jsxRuntime.jsx("button", { type: "button", onClick: () => setShowModal(false), className: "rte-image-modal-cancel", children: "Cancel" }), jsxRuntime.jsx("button", { type: "button", onClick: handleInsertImage, disabled: !imageUrl.trim() || isUploading, className: "rte-image-modal-insert", children: "Insert" })] })] }) }))] }));
         },
         execute: (editor) => {
             // Handled via renderButton
@@ -3077,7 +3306,7 @@ function clearFormatting(selection) {
     }
     catch (error) {
         console.error('Error clearing formatting:', error);
-        // Fallback: Einfache Methode
+        // Fallback: simple method
         document.execCommand('removeFormat', false);
         document.execCommand('unlink', false);
     }
@@ -3226,7 +3455,7 @@ class HistoryManager {
         // Limit history size
         if (this.history.length > this.maxHistorySize) {
             this.history.shift();
-            this.currentIndex--;
+            this.currentIndex = Math.max(0, this.currentIndex - 1);
         }
     }
     undo() {
@@ -3273,98 +3502,6 @@ class HistoryManager {
     }
 }
 
-/**
- * Lightweight HTML sanitizer (no external dependencies).
- *
- * Uses an allowlist approach to strip dangerous elements and attributes
- * from pasted/imported HTML before it enters the editor.
- */
-/** Tags that are always removed (including their content). */
-const REMOVE_TAGS = new Set([
-    "script",
-    "style",
-    "iframe",
-    "object",
-    "embed",
-    "applet",
-    "form",
-    "input",
-    "textarea",
-    "select",
-    "button",
-    "noscript",
-    "meta",
-    "link",
-    "base",
-]);
-/** Attributes that are always removed (event handlers, dangerous attrs). */
-const REMOVE_ATTRS_PATTERN = /^on|^data-(?!attachment-id$|placeholder$)/i;
-/** Specific dangerous attribute names. */
-const REMOVE_ATTRS = new Set([
-    "srcdoc",
-    "formaction",
-    "xlink:href",
-    "ping",
-]);
-/** Allowed URL schemes for href/src attributes. */
-const ALLOWED_SCHEMES = /^(https?:|mailto:|tel:|#|\/)/i;
-/**
- * Sanitize an HTML string by stripping dangerous tags and attributes.
- *
- * @param html - Raw HTML string
- * @returns Sanitized HTML string
- */
-function sanitizeHtml(html) {
-    // Use the browser's DOMParser to parse the HTML safely
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, "text/html");
-    sanitizeNode(doc.body);
-    return doc.body.innerHTML;
-}
-/** Recursively sanitize a DOM node. */
-function sanitizeNode(node) {
-    const childrenToRemove = [];
-    node.childNodes.forEach((child) => {
-        if (child.nodeType === Node.ELEMENT_NODE) {
-            const el = child;
-            const tag = el.tagName.toLowerCase();
-            // Remove dangerous tags entirely
-            if (REMOVE_TAGS.has(tag)) {
-                childrenToRemove.push(child);
-                return;
-            }
-            // Remove dangerous attributes
-            const attrsToRemove = [];
-            for (let i = 0; i < el.attributes.length; i++) {
-                const attr = el.attributes[i];
-                const name = attr.name.toLowerCase();
-                if (REMOVE_ATTRS.has(name) || REMOVE_ATTRS_PATTERN.test(name)) {
-                    attrsToRemove.push(attr.name);
-                    continue;
-                }
-                // Validate URL attributes
-                if (name === "href" || name === "src" || name === "action") {
-                    const value = attr.value.trim();
-                    if (value && !ALLOWED_SCHEMES.test(value)) {
-                        attrsToRemove.push(attr.name);
-                    }
-                }
-                // Remove javascript: in any attribute value
-                if (attr.value.toLowerCase().includes("javascript:")) {
-                    attrsToRemove.push(attr.name);
-                }
-            }
-            attrsToRemove.forEach((attrName) => el.removeAttribute(attrName));
-            // Recurse into children
-            sanitizeNode(child);
-        }
-    });
-    // Remove marked children
-    childrenToRemove.forEach((child) => {
-        node.removeChild(child);
-    });
-}
-
 const alignmentLabels = {
     left: "Left",
     center: "Center",
@@ -3582,9 +3719,9 @@ const FloatingLinkEditor = ({ linkData: initialData, options, anchorRect, isEdit
     const urlDisabledByCustom = customFields.some((f) => f.disablesUrl && !!data.custom[f.key]);
     const hasAdvancedSection = options.enableTarget || customFields.length > 0;
     const pos = computePosition(anchorRect);
-    return reactDom.createPortal(jsxRuntime.jsxs("div", { ref: dialogRef, className: "rte-link-dialog rte-link-dialog-floating", style: { top: pos.top, left: pos.left, position: "fixed" }, onKeyDown: handleKeyDown, onMouseDown: (e) => e.stopPropagation(), children: [jsxRuntime.jsx("button", { type: "button", className: "rte-link-dialog-close", onClick: onClose, onMouseDown: (e) => e.preventDefault(), "aria-label": "Close", children: jsxRuntime.jsx(IconWrapper, { icon: "mdi:close", width: 16, height: 16 }) }), jsxRuntime.jsxs("div", { className: "rte-link-dialog-field", children: [jsxRuntime.jsx("label", { className: "rte-link-dialog-label", children: "URL" }), jsxRuntime.jsx("input", { ref: urlInputRef, type: "url", className: "rte-link-dialog-input", value: data.url, onChange: (e) => setField("url", e.target.value), placeholder: "https://...", disabled: urlDisabledByCustom })] }), hasAdvancedSection && (jsxRuntime.jsxs("div", { className: "rte-link-dialog-advanced-section", children: [jsxRuntime.jsx("button", { type: "button", className: "rte-link-dialog-toggle", onClick: () => setShowAdvanced(!showAdvanced), onMouseDown: (e) => e.preventDefault(), children: jsxRuntime.jsxs("span", { children: [showAdvanced ? "▾" : "▸", " Erweitert"] }) }), showAdvanced && (jsxRuntime.jsxs("div", { className: "rte-link-dialog-advanced", children: [customFields.map((field) => (jsxRuntime.jsxs("div", { className: "rte-link-dialog-field", children: [jsxRuntime.jsx("label", { className: "rte-link-dialog-label", children: field.label }), jsxRuntime.jsx("input", { type: "text", className: "rte-link-dialog-input", value: data.custom[field.key] || "", onChange: (e) => setCustom(field.key, e.target.value), placeholder: field.placeholder })] }, field.key))), options.enableTarget && (jsxRuntime.jsxs("label", { className: "rte-link-dialog-checkbox-row", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: data.target === "_blank", onChange: (e) => setField("target", e.target.checked
+    return reactDom.createPortal(jsxRuntime.jsxs("div", { ref: dialogRef, className: "rte-link-dialog rte-link-dialog-floating", style: { top: pos.top, left: pos.left, position: "fixed" }, onKeyDown: handleKeyDown, onMouseDown: (e) => e.stopPropagation(), children: [jsxRuntime.jsx("button", { type: "button", className: "rte-link-dialog-close", onClick: onClose, onMouseDown: (e) => e.preventDefault(), "aria-label": "Close", children: jsxRuntime.jsx(IconWrapper, { icon: "mdi:close", width: 16, height: 16 }) }), jsxRuntime.jsxs("div", { className: "rte-link-dialog-field", children: [jsxRuntime.jsx("label", { className: "rte-link-dialog-label", children: "URL" }), jsxRuntime.jsx("input", { ref: urlInputRef, type: "url", className: "rte-link-dialog-input", value: data.url, onChange: (e) => setField("url", e.target.value), placeholder: "https://...", disabled: urlDisabledByCustom })] }), hasAdvancedSection && (jsxRuntime.jsxs("div", { className: "rte-link-dialog-advanced-section", children: [jsxRuntime.jsx("button", { type: "button", className: "rte-link-dialog-toggle", onClick: () => setShowAdvanced(!showAdvanced), onMouseDown: (e) => e.preventDefault(), children: jsxRuntime.jsxs("span", { children: [showAdvanced ? "▾" : "▸", " Advanced"] }) }), showAdvanced && (jsxRuntime.jsxs("div", { className: "rte-link-dialog-advanced", children: [customFields.map((field) => (jsxRuntime.jsxs("div", { className: "rte-link-dialog-field", children: [jsxRuntime.jsx("label", { className: "rte-link-dialog-label", children: field.label }), jsxRuntime.jsx("input", { type: "text", className: "rte-link-dialog-input", value: data.custom[field.key] || "", onChange: (e) => setCustom(field.key, e.target.value), placeholder: field.placeholder })] }, field.key))), options.enableTarget && (jsxRuntime.jsxs("label", { className: "rte-link-dialog-checkbox-row", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: data.target === "_blank", onChange: (e) => setField("target", e.target.checked
                                             ? "_blank"
-                                            : "_self") }), jsxRuntime.jsx("span", { children: "Open in new tab" })] }))] }))] })), jsxRuntime.jsxs("div", { className: "rte-link-dialog-actions", children: [isEditing && (jsxRuntime.jsx("button", { type: "button", className: "rte-link-dialog-btn rte-link-dialog-btn-danger", onMouseDown: (e) => e.preventDefault(), onClick: onRemove, children: "Entfernen" })), jsxRuntime.jsx("div", { style: { flex: 1 } }), jsxRuntime.jsx("button", { type: "button", className: "rte-link-dialog-btn", onMouseDown: (e) => e.preventDefault(), onClick: onClose, children: "Abbrechen" }), jsxRuntime.jsx("button", { type: "button", className: "rte-link-dialog-btn rte-link-dialog-btn-primary", onMouseDown: (e) => e.preventDefault(), onClick: () => onSave(data), disabled: !data.url.trim() || data.url.trim() === "https://", children: "Speichern" })] })] }), document.body);
+                                            : "_self") }), jsxRuntime.jsx("span", { children: "Open in new tab" })] }))] }))] })), jsxRuntime.jsxs("div", { className: "rte-link-dialog-actions", children: [isEditing && (jsxRuntime.jsx("button", { type: "button", className: "rte-link-dialog-btn rte-link-dialog-btn-danger", onMouseDown: (e) => e.preventDefault(), onClick: onRemove, children: "Remove" })), jsxRuntime.jsx("div", { style: { flex: 1 } }), jsxRuntime.jsx("button", { type: "button", className: "rte-link-dialog-btn", onMouseDown: (e) => e.preventDefault(), onClick: onClose, children: "Cancel" }), jsxRuntime.jsx("button", { type: "button", className: "rte-link-dialog-btn rte-link-dialog-btn-primary", onMouseDown: (e) => e.preventDefault(), onClick: () => onSave(data), disabled: !data.url.trim() || data.url.trim() === "https://", children: "Save" })] })] }), document.body);
 };
 /* ══════════════════════════════════════════════════════════════════════════
    Helpers
@@ -3631,6 +3768,9 @@ function applyLinkData(link, data, customFields) {
             href += data.custom[field.key];
         }
     }
+    // Validate URL before setting href to prevent javascript: / data: injection
+    if (!isUrlSafe(href))
+        return;
     link.setAttribute("href", href);
     // Target
     if (data.target && data.target !== "_self") {
@@ -3706,7 +3846,7 @@ const LinkToolbarButton = (props) => {
                 e.preventDefault();
                 e.stopPropagation();
                 const href = link.getAttribute("href");
-                if (href)
+                if (href && isUrlSafe(href))
                     window.open(href, "_blank");
                 return;
             }
@@ -3746,6 +3886,8 @@ const LinkToolbarButton = (props) => {
                     href += data.custom[field.key];
                 }
             }
+            if (!isUrlSafe(href))
+                return;
             document.execCommand("createLink", false, href);
             const newLink = getSelectedLink();
             if (newLink) {
@@ -3976,6 +4118,7 @@ const defaultEditorSettings = {
         numberedList: true,
         quote: true,
         codeBlock: true,
+        horizontalRule: true,
         check: true,
         typography: ["h1", "h2", "h3", "h4", "h5", "h6"],
         colors: [
@@ -4054,6 +4197,9 @@ function buildPluginsFromSettings(settings = defaultEditorSettings, options = {}
         plugins.push(subscriptPlugin);
     if (fmt.superscript)
         plugins.push(superscriptPlugin);
+    // Horizontal rule
+    if (fmt.horizontalRule)
+        plugins.push(horizontalRulePlugin);
     // Table
     if (settings.table?.enabled) {
         plugins.push(tablePlugin);
@@ -4309,7 +4455,7 @@ const LinkTooltip = ({ editorElement }) => {
         scheduleHide();
     };
     const handleOpen = () => {
-        if (state.href) {
+        if (state.href && isUrlSafe(state.href)) {
             window.open(state.href, "_blank", "noopener,noreferrer");
         }
     };
@@ -4335,14 +4481,15 @@ const Toolbar = ({ plugins, editorAPI, className, }) => {
     const toolbarRef = React.useRef(null);
     React.useEffect(() => {
         setIsClient(true);
+        const timeoutIds = [];
         const handleSelectionChange = () => {
             setUpdateTrigger((prev) => prev + 1);
         };
         const handleMouseUp = () => {
-            setTimeout(handleSelectionChange, 10);
+            timeoutIds.push(setTimeout(handleSelectionChange, 10));
         };
         const handleKeyUp = () => {
-            setTimeout(handleSelectionChange, 10);
+            timeoutIds.push(setTimeout(handleSelectionChange, 10));
         };
         if (typeof document !== 'undefined') {
             document.addEventListener("selectionchange", handleSelectionChange);
@@ -4350,6 +4497,7 @@ const Toolbar = ({ plugins, editorAPI, className, }) => {
             document.addEventListener("keyup", handleKeyUp);
         }
         return () => {
+            timeoutIds.forEach(clearTimeout);
             if (typeof document !== 'undefined') {
                 document.removeEventListener("selectionchange", handleSelectionChange);
                 document.removeEventListener("mouseup", handleMouseUp);
@@ -4375,6 +4523,15 @@ const Toolbar = ({ plugins, editorAPI, className, }) => {
     const clearFormattingPlugin = plugins.find((p) => p.name === "clearFormatting");
     // Roving tabindex keyboard navigation (ARIA toolbar pattern)
     const handleToolbarKeyDown = React.useCallback((e) => {
+        // Escape: return focus to the editor
+        if (e.key === "Escape") {
+            e.preventDefault();
+            const container = toolbarRef.current?.closest(".rte-container");
+            const editor = container?.querySelector(".rte-editor");
+            if (editor)
+                editor.focus();
+            return;
+        }
         if (e.key !== "ArrowLeft" && e.key !== "ArrowRight" && e.key !== "Home" && e.key !== "End")
             return;
         const toolbar = toolbarRef.current;
@@ -4406,7 +4563,7 @@ const Toolbar = ({ plugins, editorAPI, className, }) => {
         }
         buttons[nextIndex].focus();
     }, []);
-    return (jsxRuntime.jsxs("div", { ref: toolbarRef, className: `rte-toolbar rte-toolbar-sticky ${className || ""}`, onMouseDown: (e) => e.preventDefault(), onKeyDown: handleToolbarKeyDown, role: "toolbar", "aria-label": "Text formatting", children: [jsxRuntime.jsx("div", { className: "rte-toolbar-left", children: leftPlugins.map((plugin) => {
+    return (jsxRuntime.jsxs("div", { ref: toolbarRef, className: `rte-toolbar rte-toolbar-sticky ${className || ""}`, onMouseDown: (e) => e.preventDefault(), onKeyDown: handleToolbarKeyDown, role: "toolbar", "aria-label": "Text formatting", "aria-orientation": "horizontal", children: [jsxRuntime.jsx("div", { className: "rte-toolbar-left", children: leftPlugins.map((plugin) => {
                     if (!plugin.renderButton)
                         return null;
                     const isActive = isClient && plugin.isActive
@@ -4449,6 +4606,14 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
     const editorRef = React.useRef(null);
     const historyRef = React.useRef(new HistoryManager());
     const isUpdatingRef = React.useRef(false);
+    const mountedRef = React.useRef(true);
+    // Track mount status to guard async callbacks
+    React.useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
     // --- Plugins ---
     const plugins = React.useMemo(() => {
         // When settings is provided and plugins is not, use buildPluginsFromSettings
@@ -4459,7 +4624,12 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
             };
             return buildPluginsFromSettings(settings, opts);
         }
-        const allPlugins = [...(providedPlugins || defaultPlugins)];
+        // When plugins are explicitly provided, use them as-is
+        if (providedPlugins) {
+            return [...providedPlugins];
+        }
+        // Default plugins path: apply shorthand customizations
+        const allPlugins = [...defaultPlugins];
         if (headings && headings.length > 0) {
             const blockFormatIndex = allPlugins.findIndex((p) => p.name === "blockFormat");
             if (blockFormatIndex !== -1) {
@@ -4574,12 +4744,14 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
                 return checkbox.insertCheckboxList(editor);
             }
             if (command === "insertImage" && value) {
-                return handleInsertImage(editor, value, isUpdatingRef, historyRef, notifyChange);
+                return handleInsertImage(editor, value, isUpdatingRef, historyRef, mountedRef, notifyChange);
             }
             // General commands via document.execCommand
             ensureEditorFocused(editor);
             document.execCommand(command, false, value);
             setTimeout(() => {
+                if (!mountedRef.current)
+                    return;
                 if (editor && !isUpdatingRef.current) {
                     ensureAllCheckboxes(editor);
                     const content = domToContent(editor);
@@ -4620,6 +4792,9 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
                 const block = document.createElement(type);
                 if (attributes) {
                     Object.entries(attributes).forEach(([key, val]) => {
+                        // Filter out event handler attributes
+                        if (key.toLowerCase().startsWith("on"))
+                            return;
                         block.setAttribute(key, val);
                     });
                 }
@@ -4642,6 +4817,9 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
                 const inline = document.createElement(type);
                 if (attributes) {
                     Object.entries(attributes).forEach(([key, val]) => {
+                        // Filter out event handler attributes
+                        if (key.toLowerCase().startsWith("on"))
+                            return;
                         inline.setAttribute(key, val);
                     });
                 }
@@ -4728,6 +4906,8 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
             historyRef.current.push(currentContent, sel);
             operation(selection);
             setTimeout(() => {
+                if (!mountedRef.current)
+                    return;
                 if (editor)
                     notifyChange(domToContent(editor));
             }, 0);
@@ -4754,6 +4934,7 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
         editorRef,
         historyRef,
         isUpdatingRef,
+        mountedRef,
         notifyChange,
         handleCheckboxKeyDown: checkbox.handleCheckboxKeyDown,
         handleCheckboxEnter: checkbox.handleCheckboxEnter,
@@ -4850,6 +5031,9 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
             }
             // Upload
             const url = await onImageUpload(file);
+            // Guard against unmount during async upload
+            if (!mountedRef.current)
+                return;
             // Parse the "url|__aid__:attachmentId" convention
             let realUrl = url;
             if (url.includes("|__aid__:")) {
@@ -4860,6 +5044,11 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
                     placeholder.setAttribute("data-attachment-id", attachmentId);
                 }
             }
+            // Validate the returned URL before setting it
+            if (!isUrlSafe(realUrl) && !realUrl.startsWith("data:image/")) {
+                placeholder.remove();
+                return;
+            }
             // Replace placeholder with final image
             placeholder.src = realUrl;
             placeholder.removeAttribute("data-uploading");
@@ -4980,7 +5169,7 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
                 }, suppressContentEditableWarning: true }), !readOnly && (jsxRuntime.jsx(FloatingToolbar, { plugins: plugins, editorAPI: editorAPI, editorElement: editorRef.current })), jsxRuntime.jsx(LinkTooltip, { editorElement: editorRef.current }), showWordCount && (jsxRuntime.jsxs("div", { className: "rte-word-count", children: [wordCount.words, " words \u00B7 ", wordCount.characters, " characters"] }))] }));
 };
 // --- Helper: Insert Image ---
-function handleInsertImage(editor, value, isUpdatingRef, historyRef, notifyChange) {
+function handleInsertImage(editor, value, isUpdatingRef, historyRef, mountedRef, notifyChange) {
     let selection = window.getSelection();
     if (!selection)
         return false;
@@ -5002,7 +5191,7 @@ function handleInsertImage(editor, value, isUpdatingRef, historyRef, notifyChang
             newRange.collapse(true);
             selection.removeAllRanges();
             selection.addRange(newRange);
-            saveAndNotify(editor, isUpdatingRef, historyRef, notifyChange);
+            saveAndNotify(editor, isUpdatingRef, historyRef, mountedRef, notifyChange);
             return true;
         }
         selection.removeAllRanges();
@@ -5043,7 +5232,7 @@ function handleInsertImage(editor, value, isUpdatingRef, historyRef, notifyChang
     newRange.collapse(true);
     selection.removeAllRanges();
     selection.addRange(newRange);
-    saveAndNotify(editor, isUpdatingRef, historyRef, notifyChange);
+    saveAndNotify(editor, isUpdatingRef, historyRef, mountedRef, notifyChange);
     return true;
 }
 /**
@@ -5057,23 +5246,36 @@ function handleInsertImage(editor, value, isUpdatingRef, historyRef, notifyChang
 function createImageElement(src) {
     const img = document.createElement("img");
     let realSrc = src;
+    let altText = "";
+    // Parse the "url|__alt__:altText" convention
+    if (realSrc.includes("|__alt__:")) {
+        const altIdx = realSrc.indexOf("|__alt__:");
+        altText = realSrc.substring(altIdx + "|__alt__:".length);
+        realSrc = realSrc.substring(0, altIdx);
+    }
     // Parse the "url|__aid__:attachmentId" convention
-    if (src.includes("|__aid__:")) {
-        const idx = src.indexOf("|__aid__:");
-        realSrc = src.substring(0, idx);
-        const attachmentId = src.substring(idx + "|__aid__:".length);
+    if (realSrc.includes("|__aid__:")) {
+        const idx = realSrc.indexOf("|__aid__:");
+        const attachmentId = realSrc.substring(idx + "|__aid__:".length);
+        realSrc = realSrc.substring(0, idx);
         if (attachmentId) {
             img.setAttribute("data-attachment-id", attachmentId);
         }
     }
+    // Validate URL safety — block javascript:, data:, etc.
+    if (!isUrlSafe(realSrc) && !realSrc.startsWith("data:image/")) {
+        realSrc = "";
+    }
     img.setAttribute("src", realSrc);
-    img.setAttribute("alt", "");
+    img.setAttribute("alt", altText);
     img.className = "rte-image";
     return img;
 }
-function saveAndNotify(editor, isUpdatingRef, historyRef, notifyChange) {
+function saveAndNotify(editor, isUpdatingRef, historyRef, mountedRef, notifyChange) {
     isUpdatingRef.current = true;
     setTimeout(() => {
+        if (!mountedRef.current)
+            return;
         const content = domToContent(editor);
         const sel = serializeSelection(editor);
         historyRef.current.push(content, sel);
@@ -5203,14 +5405,14 @@ function createLinkPlugin() {
             // Check if a link already exists
             const existingLink = element?.closest("a");
             if (existingLink) {
-                // Link entfernen
+                // Remove link
                 const parent = existingLink.parentNode;
                 if (parent) {
                     while (existingLink.firstChild) {
                         parent.insertBefore(existingLink.firstChild, existingLink);
                     }
                     parent.removeChild(existingLink);
-                    // Content aktualisieren
+                    // Update content
                     const editorEl = editor.getSelection()?.anchorNode;
                     if (editorEl) {
                         const content = editor.getContent();
@@ -5221,7 +5423,7 @@ function createLinkPlugin() {
             else {
                 // Insert new link
                 const url = prompt("Enter URL:");
-                if (url) {
+                if (url && isUrlSafe(url)) {
                     editor.executeCommand("createLink", url);
                 }
             }
@@ -5388,6 +5590,7 @@ exports.htmlToContent = htmlToContent;
 exports.indentListItem = indentListItem;
 exports.indentListItemPlugin = indentListItemPlugin;
 exports.isCheckboxList = isCheckboxList;
+exports.isUrlSafe = isUrlSafe;
 exports.italicPlugin = italicPlugin;
 exports.linkPlugin = linkPlugin;
 exports.orderedListPlugin = orderedListPlugin;