@overlap/rte 0.1.6 → 0.1.8

package/dist/index.esm.js

@@ -23,6 +23,15 @@ const UploadIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { wi
 const IndentIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M3 21h18v-2H3v2zM3 8l4 4-4 4V8zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }) }));
 const OutdentIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M3 21h18v-2H3v2zM11 8l4 4-4 4V8zM3 3v2h18V3H3zm0 4h10v2H3V7zm0 4h10v2H3v-2zm0 4h18v2H3v-2z" }) }));
 const CheckboxIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M19 3H5c-1.11 0-2 .89-2 2v14c0 1.11.89 2 2 2h14c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }));
+const StrikethroughIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z" }) }));
+const SubscriptIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M22 18h-2v1h3v1h-4v-2.5c0-.83.67-1.5 1.5-1.5h1.5v-1h-3v-1h2.5c.83 0 1.5.67 1.5 1.5v1c0 .83-.67 1.5-1.5 1.5zM5.88 18h2.66l3.4-5.42h.12l3.4 5.42h2.66l-4.65-7.27L17.81 4h-2.68l-3.07 4.99h-.12L8.87 4H6.19l4.32 6.73L5.88 18z" }) }));
+const SuperscriptIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M22 7h-2v1h3v1h-4V6.5c0-.83.67-1.5 1.5-1.5h1.5V4h-3V3h2.5c.83 0 1.5.67 1.5 1.5v1c0 .83-.67 1.5-1.5 1.5zM5.88 20h2.66l3.4-5.42h.12l3.4 5.42h2.66l-4.65-7.27L17.81 6h-2.68l-3.07 4.99h-.12L8.87 6H6.19l4.32 6.73L5.88 20z" }) }));
+const CodeIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" }) }));
+const AlignLeftIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" }) }));
+const AlignCenterIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }) }));
+const AlignRightIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }) }));
+const AlignJustifyIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z" }) }));
+const TableIcon = ({ width = 18, height = 18, className, }) => (jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsx("path", { d: "M3 3v18h18V3H3zm8 16H5v-6h6v6zm0-8H5V5h6v6zm8 8h-6v-6h6v6zm0-8h-6V5h6v6z" }) }));
 const iconMap = {
     "mdi:format-bold": BoldIcon,
     "mdi:format-italic": ItalicIcon,
@@ -46,6 +55,15 @@ const iconMap = {
     "mdi:format-indent-increase": IndentIcon,
     "mdi:format-indent-decrease": OutdentIcon,
     "mdi:checkbox-marked-outline": CheckboxIcon,
+    "mdi:format-strikethrough": StrikethroughIcon,
+    "mdi:format-subscript": SubscriptIcon,
+    "mdi:format-superscript": SuperscriptIcon,
+    "mdi:code-tags": CodeIcon,
+    "mdi:format-align-left": AlignLeftIcon,
+    "mdi:format-align-center": AlignCenterIcon,
+    "mdi:format-align-right": AlignRightIcon,
+    "mdi:format-align-justify": AlignJustifyIcon,
+    "mdi:table": TableIcon,
 };
 const Icon = ({ icon, width = 18, height = 18, className }) => {
     const IconComponent = iconMap[icon];
@@ -409,6 +427,62 @@ const defaultHeadings$1 = ["h1", "h2", "h3", "h4", "h5", "h6"];
 const boldPlugin = createInlinePlugin("bold", "bold", "mdi:format-bold", "Fett");
 const italicPlugin = createInlinePlugin("italic", "italic", "mdi:format-italic", "Kursiv");
 const underlinePlugin = createInlinePlugin("underline", "underline", "mdi:format-underline", "Unterstrichen");
+const strikethroughPlugin = createInlinePlugin("strikethrough", "strikeThrough", "mdi:format-strikethrough", "Durchgestrichen");
+const subscriptPlugin = createInlinePlugin("subscript", "subscript", "mdi:format-subscript", "Tiefgestellt");
+const superscriptPlugin = createInlinePlugin("superscript", "superscript", "mdi:format-superscript", "Hochgestellt");
+const codeInlinePlugin = {
+    name: "codeInline",
+    type: "inline",
+    renderButton: (props) => (jsx("button", { type: "button", onClick: props.onClick, disabled: props.disabled, className: `rte-toolbar-button ${props.isActive ? "rte-toolbar-button-active" : ""}`, title: "Code", "aria-label": "Code", children: jsx(IconWrapper, { icon: "mdi:code-tags", width: 18, height: 18 }) })),
+    execute: (editor) => {
+        const selection = editor.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const range = selection.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        const element = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        const existingCode = element?.closest("code");
+        if (existingCode) {
+            // Unwrap code
+            const parent = existingCode.parentNode;
+            if (parent) {
+                while (existingCode.firstChild) {
+                    parent.insertBefore(existingCode.firstChild, existingCode);
+                }
+                parent.removeChild(existingCode);
+            }
+        }
+        else if (!range.collapsed) {
+            // Wrap in code
+            const code = document.createElement("code");
+            try {
+                range.surroundContents(code);
+            }
+            catch {
+                // If surroundContents fails (partial selection), use extractContents
+                const fragment = range.extractContents();
+                code.appendChild(fragment);
+                range.insertNode(code);
+            }
+        }
+    },
+    isActive: () => {
+        if (typeof document === "undefined")
+            return false;
+        const selection = document.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return false;
+        const range = selection.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        const element = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        return element?.closest("code") !== null;
+    },
+    canExecute: () => true,
+};
 const undoPlugin = createCommandPlugin("undo", "undo", "mdi:undo", "Rückgängig");
 const redoPlugin = createCommandPlugin("redo", "redo", "mdi:redo", "Wiederholen");
 /**
@@ -1239,10 +1313,13 @@ function domToContent(element) {
             const attributes = {};
             const src = el.getAttribute("src");
             const alt = el.getAttribute("alt");
+            const attachmentId = el.getAttribute("data-attachment-id");
             if (src)
                 attributes.src = src;
             if (alt)
                 attributes.alt = alt;
+            if (attachmentId)
+                attributes["data-attachment-id"] = attachmentId;
             return {
                 type: "image",
                 attributes: Object.keys(attributes).length > 0
@@ -1250,6 +1327,45 @@ function domToContent(element) {
                     : undefined,
             };
         }
+        // Table elements
+        if (["table", "thead", "tbody", "tr", "td", "th"].includes(tagName)) {
+            const children = [];
+            const attributes = {};
+            // Preserve class
+            const cls = el.getAttribute("class");
+            if (cls)
+                attributes.class = cls;
+            // Table cell attributes
+            if (tagName === "td" || tagName === "th") {
+                const colspan = el.getAttribute("colspan");
+                const rowspan = el.getAttribute("rowspan");
+                if (colspan && colspan !== "1")
+                    attributes.colspan = colspan;
+                if (rowspan && rowspan !== "1")
+                    attributes.rowspan = rowspan;
+                // Preserve text-align on cells
+                const textAlign = el.style.textAlign;
+                if (textAlign && textAlign !== "left" && textAlign !== "start") {
+                    attributes.textAlign = textAlign;
+                }
+                // Preserve background-color
+                const bgColor = el.style.backgroundColor;
+                if (bgColor)
+                    attributes.backgroundColor = bgColor;
+            }
+            Array.from(el.childNodes).forEach((child) => {
+                const processed = processNode(child);
+                if (processed)
+                    children.push(processed);
+            });
+            return {
+                type: tagName,
+                children: children.length > 0 ? children : [],
+                attributes: Object.keys(attributes).length > 0
+                    ? attributes
+                    : undefined,
+            };
+        }
         // Block elements
         if ([
             "p",
@@ -1267,6 +1383,11 @@ function domToContent(element) {
         ].includes(tagName)) {
             const children = [];
             const attributes = {};
+            // Preserve text-align on block elements
+            const textAlign = el.style.textAlign;
+            if (textAlign && textAlign !== "left" && textAlign !== "start" && textAlign !== "") {
+                attributes.textAlign = textAlign;
+            }
             // Detect checkbox lists (own + Lexical + GitHub formats)
             if (tagName === "ul" && isCheckboxList(el)) {
                 attributes.class = "rte-checkbox-list";
@@ -1316,6 +1437,9 @@ function domToContent(element) {
             "strike",
             "a",
             "span",
+            "sub",
+            "sup",
+            "code",
         ].includes(tagName)) {
             const children = [];
             Array.from(el.childNodes).forEach((child) => {
@@ -1327,16 +1451,32 @@ function domToContent(element) {
             Array.from(el.attributes).forEach((attr) => {
                 attributes[attr.name] = attr.value;
             });
-            // Links
+            // Links — capture all relevant attributes
             if (tagName === "a") {
+                const linkAttrs = {};
                 const href = el.getAttribute("href");
                 if (href)
-                    attributes.href = href;
+                    linkAttrs.href = href;
+                const target = el.getAttribute("target");
+                if (target)
+                    linkAttrs.target = target;
+                const rel = el.getAttribute("rel");
+                if (rel)
+                    linkAttrs.rel = rel;
+                const title = el.getAttribute("title");
+                if (title)
+                    linkAttrs.title = title;
+                const pageRef = el.getAttribute("data-page-ref");
+                if (pageRef)
+                    linkAttrs["data-page-ref"] = pageRef;
+                const urlExtra = el.getAttribute("data-url-extra");
+                if (urlExtra)
+                    linkAttrs["data-url-extra"] = urlExtra;
                 return {
                     type: "link",
                     children: children.length > 0 ? children : undefined,
-                    attributes: Object.keys(attributes).length > 0
-                        ? attributes
+                    attributes: Object.keys(linkAttrs).length > 0
+                        ? linkAttrs
                         : undefined,
                 };
             }
@@ -1400,7 +1540,13 @@ function domToContent(element) {
                             tagName === "del" ||
                             tagName === "strike"
                             ? "strikethrough"
-                            : tagName;
+                            : tagName === "sub"
+                                ? "subscript"
+                                : tagName === "sup"
+                                    ? "superscript"
+                                    : tagName === "code"
+                                        ? "code"
+                                        : tagName;
             return {
                 type,
                 children: children.length > 0 ? children : undefined,
@@ -1461,6 +1607,9 @@ function contentToDOM(content, container, customLinkComponent, customHeadingRend
             underline: "u",
             strikethrough: "s",
             link: "a",
+            subscript: "sub",
+            superscript: "sup",
+            code: "code",
         };
         let tagName = tagMap[node.type] || node.type;
         if (node.type === "link" && customLinkComponent) {
@@ -1481,17 +1630,49 @@ function contentToDOM(content, container, customLinkComponent, customHeadingRend
                 else if (key === "backgroundColor") {
                     element.style.backgroundColor = value;
                 }
+                else if (key === "textAlign") {
+                    element.style.textAlign = value;
+                }
                 else if (key === "href" && tagName === "a") {
                     element.setAttribute("href", value);
                 }
+                else if (key === "target" && tagName === "a") {
+                    element.setAttribute("target", value);
+                }
+                else if (key === "rel" && tagName === "a") {
+                    element.setAttribute("rel", value);
+                }
+                else if (key === "title" && tagName === "a") {
+                    element.setAttribute("title", value);
+                }
+                else if (key === "data-page-ref" && tagName === "a") {
+                    element.setAttribute("data-page-ref", value);
+                }
+                else if (key === "data-url-extra" && tagName === "a") {
+                    element.setAttribute("data-url-extra", value);
+                }
+                else if (key === "data-attachment-id") {
+                    element.setAttribute("data-attachment-id", value);
+                }
+                else if (key === "colspan") {
+                    element.setAttribute("colspan", value);
+                }
+                else if (key === "rowspan") {
+                    element.setAttribute("rowspan", value);
+                }
                 else if (key === "class") {
                     element.className = value;
                 }
+                else if (key === "checkboxChecked") ;
                 else {
                     element.setAttribute(key, value);
                 }
             });
         }
+        // Ensure tables have the rte-table class
+        if (node.type === "table" && !element.classList.contains("rte-table")) {
+            element.classList.add("rte-table");
+        }
         if (node.children) {
             node.children.forEach((child) => {
                 element.appendChild(createNode(child));
@@ -2031,6 +2212,255 @@ function useCheckbox({ editorRef, isUpdatingRef, pushToHistory, notifyChange, ge
     };
 }
 
+/**
+ * Table DOM manipulation utilities for contentEditable.
+ * Pure DOM functions — no React dependency.
+ */
+/* ── Helpers ──────────────────────────────────────────────────────────── */
+/** Get the <td>/<th> cell that contains the current selection. */
+function getActiveCell() {
+    const sel = document.getSelection();
+    if (!sel || sel.rangeCount === 0)
+        return null;
+    const range = sel.getRangeAt(0);
+    const container = range.commonAncestorContainer;
+    const el = container.nodeType === Node.TEXT_NODE
+        ? container.parentElement
+        : container;
+    return el?.closest("td, th");
+}
+/** Get the <table> that contains the current selection. */
+function getActiveTable() {
+    const cell = getActiveCell();
+    return cell?.closest("table") ?? null;
+}
+/** Get the <tr> that contains the current selection. */
+function getActiveRow() {
+    const cell = getActiveCell();
+    return cell?.closest("tr") ?? null;
+}
+/** Place the cursor inside a cell (at the start). */
+function focusCell(cell) {
+    const range = document.createRange();
+    const sel = document.getSelection();
+    if (!sel)
+        return;
+    if (cell.firstChild) {
+        range.setStart(cell.firstChild, 0);
+    }
+    else {
+        // Empty cell — add a <br> so the cursor has something to land on
+        const br = document.createElement("br");
+        cell.appendChild(br);
+        range.setStart(cell, 0);
+    }
+    range.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(range);
+}
+/** Count the number of columns in a table (from the first row). */
+function getColumnCount(table) {
+    const firstRow = table.querySelector("tr");
+    return firstRow ? firstRow.cells.length : 0;
+}
+/* ── Create ───────────────────────────────────────────────────────────── */
+/** Create a new table element with the given dimensions. */
+function createTable(rows, cols, withHeader = false) {
+    const table = document.createElement("table");
+    table.classList.add("rte-table");
+    if (withHeader) {
+        const thead = document.createElement("thead");
+        const tr = document.createElement("tr");
+        for (let c = 0; c < cols; c++) {
+            const th = document.createElement("th");
+            th.innerHTML = "<br>";
+            tr.appendChild(th);
+        }
+        thead.appendChild(tr);
+        table.appendChild(thead);
+    }
+    const tbody = document.createElement("tbody");
+    const dataRows = withHeader ? rows - 1 : rows;
+    for (let r = 0; r < dataRows; r++) {
+        const tr = document.createElement("tr");
+        for (let c = 0; c < cols; c++) {
+            const td = document.createElement("td");
+            td.innerHTML = "<br>";
+            tr.appendChild(td);
+        }
+        tbody.appendChild(tr);
+    }
+    table.appendChild(tbody);
+    return table;
+}
+/* ── Row operations ───────────────────────────────────────────────────── */
+/** Insert a row above or below the currently selected row. */
+function insertRow(position) {
+    const row = getActiveRow();
+    const table = getActiveTable();
+    if (!row || !table)
+        return;
+    const cols = row.cells.length;
+    const newRow = document.createElement("tr");
+    for (let c = 0; c < cols; c++) {
+        const td = document.createElement("td");
+        td.innerHTML = "<br>";
+        newRow.appendChild(td);
+    }
+    if (position === "above") {
+        row.parentNode?.insertBefore(newRow, row);
+    }
+    else {
+        row.parentNode?.insertBefore(newRow, row.nextSibling);
+    }
+    focusCell(newRow.cells[0]);
+}
+/** Delete the row that contains the current selection. */
+function deleteRow() {
+    const row = getActiveRow();
+    const table = getActiveTable();
+    if (!row || !table)
+        return;
+    const allRows = table.querySelectorAll("tr");
+    if (allRows.length <= 1) {
+        // Last row — remove the whole table
+        deleteTable();
+        return;
+    }
+    // Focus adjacent row before deleting
+    const nextRow = (row.nextElementSibling ||
+        row.previousElementSibling);
+    row.remove();
+    if (nextRow?.cells[0]) {
+        focusCell(nextRow.cells[0]);
+    }
+}
+/* ── Column operations ────────────────────────────────────────────────── */
+/** Insert a column to the left or right of the currently selected cell. */
+function insertColumn(position) {
+    const cell = getActiveCell();
+    const table = getActiveTable();
+    if (!cell || !table)
+        return;
+    const cellIndex = cell.cellIndex;
+    const rows = table.querySelectorAll("tr");
+    rows.forEach((row) => {
+        const tag = row.parentElement?.tagName === "THEAD" ? "th" : "td";
+        const newCell = document.createElement(tag);
+        newCell.innerHTML = "<br>";
+        const refCell = row.cells[cellIndex];
+        if (!refCell) {
+            row.appendChild(newCell);
+        }
+        else if (position === "left") {
+            row.insertBefore(newCell, refCell);
+        }
+        else {
+            row.insertBefore(newCell, refCell.nextSibling);
+        }
+    });
+}
+/** Delete the column that contains the currently selected cell. */
+function deleteColumn() {
+    const cell = getActiveCell();
+    const table = getActiveTable();
+    if (!cell || !table)
+        return;
+    const cellIndex = cell.cellIndex;
+    const colCount = getColumnCount(table);
+    if (colCount <= 1) {
+        // Last column — remove the whole table
+        deleteTable();
+        return;
+    }
+    const rows = table.querySelectorAll("tr");
+    rows.forEach((row) => {
+        if (row.cells[cellIndex]) {
+            row.cells[cellIndex].remove();
+        }
+    });
+    // Focus an adjacent cell
+    const activeRow = getActiveRow();
+    if (activeRow) {
+        const idx = Math.min(cellIndex, activeRow.cells.length - 1);
+        if (activeRow.cells[idx])
+            focusCell(activeRow.cells[idx]);
+    }
+}
+/* ── Table delete ─────────────────────────────────────────────────────── */
+/** Remove the entire table and place cursor after it. */
+function deleteTable() {
+    const table = getActiveTable();
+    if (!table)
+        return;
+    const parent = table.parentNode;
+    const nextSibling = table.nextSibling;
+    // Create a paragraph to place the cursor
+    const p = document.createElement("p");
+    p.innerHTML = "<br>";
+    if (nextSibling) {
+        parent?.insertBefore(p, nextSibling);
+    }
+    else {
+        parent?.appendChild(p);
+    }
+    table.remove();
+    // Focus the new paragraph
+    const range = document.createRange();
+    const sel = document.getSelection();
+    if (sel && p.firstChild) {
+        range.setStart(p, 0);
+        range.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+}
+/* ── Tab navigation ───────────────────────────────────────────────────── */
+/**
+ * Move focus to the next or previous table cell.
+ * Returns true if navigation happened (caller should preventDefault).
+ */
+function navigateTableCell(direction) {
+    const cell = getActiveCell();
+    if (!cell)
+        return false;
+    const row = cell.closest("tr");
+    const table = cell.closest("table");
+    if (!row || !table)
+        return false;
+    const cellIndex = cell.cellIndex;
+    const allRows = Array.from(table.querySelectorAll("tr"));
+    const rowIndex = allRows.indexOf(row);
+    let targetCell = null;
+    if (direction === "next") {
+        if (cellIndex < row.cells.length - 1) {
+            targetCell = row.cells[cellIndex + 1];
+        }
+        else if (rowIndex < allRows.length - 1) {
+            targetCell = allRows[rowIndex + 1].cells[0];
+        }
+        else {
+            // Last cell of last row — add a new row
+            insertRow("below");
+            return true;
+        }
+    }
+    else {
+        if (cellIndex > 0) {
+            targetCell = row.cells[cellIndex - 1];
+        }
+        else if (rowIndex > 0) {
+            const prevRow = allRows[rowIndex - 1];
+            targetCell = prevRow.cells[prevRow.cells.length - 1];
+        }
+    }
+    if (targetCell) {
+        focusCell(targetCell);
+        return true;
+    }
+    return false;
+}
+
 /**
  * Hook that sets up input, keyup, and keydown event listeners on the editor.
  */
@@ -2060,8 +2490,22 @@ function useEditorEvents({ editorRef, historyRef, isUpdatingRef, notifyChange, h
             // Checkbox keyboard navigation
             if (handleCheckboxKeyDown(e))
                 return;
-            // Tab: indent/outdent in lists
+            // Tab: navigate table cells OR indent/outdent in lists
             if (e.key === "Tab" && !isModifierPressed && !e.altKey) {
+                // Table tab navigation takes priority
+                if (getActiveCell()) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    e.stopImmediatePropagation();
+                    navigateTableCell(e.shiftKey ? "prev" : "next");
+                    setTimeout(() => {
+                        if (editor) {
+                            const content = domToContent(editor);
+                            notifyChange(content);
+                        }
+                    }, 0);
+                    return;
+                }
                 e.preventDefault();
                 e.stopPropagation();
                 e.stopImmediatePropagation();
@@ -2093,6 +2537,19 @@ function useEditorEvents({ editorRef, historyRef, isUpdatingRef, notifyChange, h
                     return;
                 }
             }
+            // Cmd/Ctrl+K: trigger link button click (if present in toolbar)
+            if (isModifierPressed && e.key === "k") {
+                e.preventDefault();
+                e.stopPropagation();
+                // Find and click the link button in the toolbar
+                const editorContainer = editor.closest(".rte-container");
+                if (editorContainer) {
+                    const linkBtn = editorContainer.querySelector('button[aria-label="Link"], button[aria-label="Link einfügen"]');
+                    if (linkBtn)
+                        linkBtn.click();
+                }
+                return;
+            }
             // Undo/Redo shortcuts
             if (isModifierPressed && e.key === "z" && !e.shiftKey) {
                 e.preventDefault();
@@ -2592,8 +3049,75 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
         if (onEditorAPIReady)
             onEditorAPIReady(editorAPI);
     }, [editorAPI, onEditorAPIReady]);
+    // --- Helper: insert an image file via the onImageUpload callback ---
+    const insertImageFile = useCallback(async (file) => {
+        if (!onImageUpload || !file.type.startsWith("image/"))
+            return;
+        const editor = editorRef.current;
+        if (!editor)
+            return;
+        try {
+            // Show a placeholder while uploading
+            const placeholder = document.createElement("img");
+            placeholder.setAttribute("data-uploading", "true");
+            placeholder.style.maxWidth = "100%";
+            placeholder.style.height = "auto";
+            placeholder.style.display = "block";
+            placeholder.style.margin = "16px 0";
+            placeholder.style.opacity = "0.5";
+            // Use a tiny transparent gif as placeholder src
+            placeholder.src =
+                "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+            placeholder.alt = file.name;
+            const sel = window.getSelection();
+            if (sel && sel.rangeCount > 0) {
+                const range = sel.getRangeAt(0);
+                range.deleteContents();
+                range.insertNode(placeholder);
+                range.setStartAfter(placeholder);
+                range.collapse(true);
+                sel.removeAllRanges();
+                sel.addRange(range);
+            }
+            else {
+                editor.appendChild(placeholder);
+            }
+            // Upload
+            const url = await onImageUpload(file);
+            // Replace placeholder with final image
+            placeholder.src = url;
+            placeholder.removeAttribute("data-uploading");
+            placeholder.style.opacity = "1";
+            // Preserve data-attachment-id if returned in a special format
+            // The onImageUpload callback can return "url|attachmentId"
+            if (url.includes("|__aid__:")) {
+                const [realUrl, aid] = url.split("|__aid__:");
+                placeholder.src = realUrl;
+                placeholder.setAttribute("data-attachment-id", aid);
+            }
+            notifyChange(domToContent(editor));
+        }
+        catch (err) {
+            console.error("Image upload failed:", err);
+            // Remove failed placeholder
+            const failedImg = editor.querySelector('img[data-uploading="true"]');
+            failedImg?.remove();
+        }
+    }, [onImageUpload, notifyChange]);
     // --- Paste handler ---
     const handlePaste = (e) => {
+        // Check for pasted image files first
+        const items = e.clipboardData.items;
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            if (item.type.startsWith("image/")) {
+                e.preventDefault();
+                const file = item.getAsFile();
+                if (file)
+                    insertImageFile(file);
+                return;
+            }
+        }
         e.preventDefault();
         const html = e.clipboardData.getData("text/html");
         const text = e.clipboardData.getData("text/plain");
@@ -2660,7 +3184,22 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
                 }),
         }
         : {};
-    return (jsxs("div", { className: `rte-container ${className || ""}`, style: containerStyle, children: [jsx(Toolbar, { plugins: plugins, editorAPI: editorAPI, className: toolbarClassName }), jsx("div", { ref: editorRef, contentEditable: true, className: `rte-editor ${editorClassName || ""}`, "data-placeholder": placeholder, onPaste: handlePaste, suppressContentEditableWarning: true })] }));
+    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, onDrop: (e) => {
+                    const files = e.dataTransfer.files;
+                    for (let i = 0; i < files.length; i++) {
+                        if (files[i].type.startsWith("image/")) {
+                            e.preventDefault();
+                            insertImageFile(files[i]);
+                            return;
+                        }
+                    }
+                }, onDragOver: (e) => {
+                    // Allow drop
+                    const types = e.dataTransfer.types;
+                    if (types && Array.from(types).includes("Files")) {
+                        e.preventDefault();
+                    }
+                }, suppressContentEditableWarning: true })] }));
 };
 // --- Helper: Insert Image ---
 function handleInsertImage(editor, value, isUpdatingRef, historyRef, notifyChange) {
@@ -3015,5 +3554,465 @@ const orderedListPlugin = {
     },
 };
 
-export { Dropdown, Editor, HistoryManager, Toolbar, blockquotePlugin, boldPlugin, clearFormattingPlugin, contentToDOM, contentToHTML, createBackgroundColorPlugin, createBlockFormatPlugin, createEmptyContent, createFontSizePlugin, createHeadingsPlugin, createImagePlugin, createLinkPlugin, createTextColorPlugin, Editor as default, defaultPlugins, domToContent, ensureAllCheckboxes, findClosestCheckboxList, getCurrentBackgroundColor, getCurrentFontSize, getCurrentHeading, getCurrentTextColor, htmlToContent, indentListItem, indentListItemPlugin, isCheckboxList, italicPlugin, linkPlugin, orderedListPlugin, outdentListItem, outdentListItemPlugin, redoPlugin, underlinePlugin, undoPlugin, unorderedListPlugin };
+const alignmentLabels = {
+    left: "Links",
+    center: "Zentriert",
+    right: "Rechts",
+    justify: "Blocksatz",
+};
+const alignmentIcons = {
+    left: "mdi:format-align-left",
+    center: "mdi:format-align-center",
+    right: "mdi:format-align-right",
+    justify: "mdi:format-align-justify",
+};
+const alignmentCommands = {
+    left: "justifyLeft",
+    center: "justifyCenter",
+    right: "justifyRight",
+    justify: "justifyFull",
+};
+/**
+ * Detects current text alignment at cursor position.
+ */
+function detectCurrentAlignment() {
+    if (typeof document === "undefined")
+        return undefined;
+    const selection = document.getSelection();
+    if (!selection || selection.rangeCount === 0)
+        return undefined;
+    const range = selection.getRangeAt(0);
+    const container = range.commonAncestorContainer;
+    const element = container.nodeType === Node.TEXT_NODE
+        ? container.parentElement
+        : container;
+    if (!element)
+        return undefined;
+    // Walk up to find the block-level element
+    let block = element;
+    const blockTags = new Set([
+        "P",
+        "DIV",
+        "H1",
+        "H2",
+        "H3",
+        "H4",
+        "H5",
+        "H6",
+        "LI",
+        "BLOCKQUOTE",
+        "TD",
+        "TH",
+    ]);
+    while (block && !blockTags.has(block.tagName)) {
+        block = block.parentElement;
+    }
+    if (!block)
+        return undefined;
+    const align = block.style.textAlign || window.getComputedStyle(block).textAlign;
+    if (align === "center")
+        return "center";
+    if (align === "right")
+        return "right";
+    if (align === "justify")
+        return "justify";
+    return "left";
+}
+/**
+ * Creates an alignment plugin with a dropdown.
+ * @param alignments - Which alignments to offer, defaults to all four.
+ */
+function createAlignmentPlugin(alignments = ["left", "center", "right", "justify"]) {
+    const options = alignments.map((a) => ({
+        value: a,
+        label: alignmentLabels[a] || a,
+        icon: alignmentIcons[a],
+    }));
+    return {
+        name: "alignment",
+        type: "block",
+        renderButton: (props) => {
+            const onSelect = props.onSelect;
+            const currentValue = props.currentValue ||
+                detectCurrentAlignment() ||
+                "left";
+            return (jsx(Dropdown, { icon: alignmentIcons[currentValue] || "mdi:format-align-left", label: "Ausrichtung", options: options, onSelect: (value) => {
+                    if (onSelect)
+                        onSelect(value);
+                }, currentValue: currentValue, disabled: props.disabled }));
+        },
+        getCurrentValue: () => detectCurrentAlignment(),
+        execute: (_editor, value) => {
+            if (!value)
+                return;
+            const command = alignmentCommands[value];
+            if (command) {
+                document.execCommand(command, false);
+            }
+        },
+        isActive: () => {
+            const align = detectCurrentAlignment();
+            return align !== undefined && align !== "left";
+        },
+        canExecute: () => true,
+    };
+}
+/** Pre-built alignment plugin with all four options */
+const alignmentPlugin = createAlignmentPlugin();
+
+const InsertTableDialog = ({ onInsert, onClose, }) => {
+    const [rows, setRows] = useState(3);
+    const [cols, setCols] = useState(3);
+    const dialogRef = useRef(null);
+    useEffect(() => {
+        const handler = (e) => {
+            if (dialogRef.current &&
+                !dialogRef.current.contains(e.target)) {
+                onClose();
+            }
+        };
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, [onClose]);
+    return (jsxs("div", { className: "rte-table-insert-dialog", ref: dialogRef, children: [jsx("div", { className: "rte-table-insert-title", children: "Tabelle einf\u00FCgen" }), jsxs("div", { className: "rte-table-insert-fields", children: [jsxs("label", { className: "rte-table-insert-label", children: [jsx("span", { children: "Zeilen" }), jsx("input", { type: "number", min: 1, max: 20, value: rows, onChange: (e) => setRows(Math.max(1, Math.min(20, parseInt(e.target.value) || 1))), className: "rte-table-insert-input" })] }), jsxs("label", { className: "rte-table-insert-label", children: [jsx("span", { children: "Spalten" }), jsx("input", { type: "number", min: 1, max: 10, value: cols, onChange: (e) => setCols(Math.max(1, Math.min(10, parseInt(e.target.value) || 1))), className: "rte-table-insert-input" })] })] }), jsx("button", { type: "button", className: "rte-table-insert-btn", onClick: () => onInsert(rows, cols), children: "Einf\u00FCgen" })] }));
+};
+const TableContextMenu = ({ x, y, onClose, }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const handler = (e) => {
+            if (ref.current && !ref.current.contains(e.target)) {
+                onClose();
+            }
+        };
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, [onClose]);
+    const action = (fn) => {
+        fn();
+        onClose();
+    };
+    return (jsxs("div", { ref: ref, className: "rte-table-context-menu", style: { position: "fixed", left: x, top: y }, children: [jsx("button", { type: "button", onClick: () => action(() => insertRow("above")), children: "Zeile oben einf\u00FCgen" }), jsx("button", { type: "button", onClick: () => action(() => insertRow("below")), children: "Zeile unten einf\u00FCgen" }), jsx("div", { className: "rte-table-context-divider" }), jsx("button", { type: "button", onClick: () => action(() => insertColumn("left")), children: "Spalte links einf\u00FCgen" }), jsx("button", { type: "button", onClick: () => action(() => insertColumn("right")), children: "Spalte rechts einf\u00FCgen" }), jsx("div", { className: "rte-table-context-divider" }), jsx("button", { type: "button", className: "rte-table-context-danger", onClick: () => action(deleteRow), children: "Zeile l\u00F6schen" }), jsx("button", { type: "button", className: "rte-table-context-danger", onClick: () => action(deleteColumn), children: "Spalte l\u00F6schen" }), jsx("button", { type: "button", className: "rte-table-context-danger", onClick: () => action(deleteTable), children: "Tabelle l\u00F6schen" })] }));
+};
+const TableToolbarButton = (props) => {
+    const [showDialog, setShowDialog] = useState(false);
+    const handleInsert = useCallback((rows, cols) => {
+        setShowDialog(false);
+        if (!props.editorAPI)
+            return;
+        const sel = document.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        // Find the editor's contentEditable root
+        const container = range.commonAncestorContainer;
+        const editorEl = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        const editorRoot = editorEl?.closest("[contenteditable]");
+        if (!editorRoot)
+            return;
+        const table = createTable(rows, cols);
+        // Insert after the current block element
+        let block = editorEl;
+        while (block &&
+            block !== editorRoot &&
+            block.parentElement !== editorRoot) {
+            block = block.parentElement;
+        }
+        if (block && block !== editorRoot) {
+            block.parentNode?.insertBefore(table, block.nextSibling);
+        }
+        else {
+            editorRoot.appendChild(table);
+        }
+        // Add a paragraph after the table so the user can continue typing
+        const p = document.createElement("p");
+        p.innerHTML = "<br>";
+        table.parentNode?.insertBefore(p, table.nextSibling);
+        // Focus the first cell
+        const firstCell = table.querySelector("td, th");
+        if (firstCell) {
+            const newRange = document.createRange();
+            newRange.setStart(firstCell, 0);
+            newRange.collapse(true);
+            sel.removeAllRanges();
+            sel.addRange(newRange);
+        }
+    }, [props.editorAPI]);
+    return (jsxs("div", { style: { position: "relative" }, children: [jsx("button", { type: "button", onClick: () => setShowDialog(!showDialog), disabled: props.disabled, className: `rte-toolbar-button ${props.isActive ? "rte-toolbar-button-active" : ""}`, title: "Tabelle", "aria-label": "Tabelle", children: jsx(IconWrapper, { icon: "mdi:table", width: 18, height: 18 }) }), showDialog && (jsx(InsertTableDialog, { onInsert: handleInsert, onClose: () => setShowDialog(false) }))] }));
+};
+/* ══════════════════════════════════════════════════════════════════════════
+   Table Plugin export
+   ══════════════════════════════════════════════════════════════════════ */
+const tablePlugin = {
+    name: "table",
+    type: "command",
+    renderButton: (props) => (jsx(TableToolbarButton, { ...props, editorAPI: props.editorAPI })),
+    execute: () => {
+        // Insertion is handled by the dialog component
+    },
+    isActive: () => getActiveTable() !== null,
+    canExecute: () => true,
+};
+/* ══════════════════════════════════════════════════════════════════════════
+   TableContextMenuProvider — wrap the editor to enable right-click menu
+   ══════════════════════════════════════════════════════════════════════ */
+const TableContextMenuProvider = ({ children }) => {
+    const [menu, setMenu] = useState(null);
+    useEffect(() => {
+        const handler = (e) => {
+            const target = e.target;
+            const cell = target.closest("td, th");
+            const editorRoot = target.closest("[contenteditable]");
+            if (cell && editorRoot) {
+                e.preventDefault();
+                setMenu({ x: e.clientX, y: e.clientY });
+            }
+        };
+        document.addEventListener("contextmenu", handler);
+        return () => document.removeEventListener("contextmenu", handler);
+    }, []);
+    return (jsxs(Fragment, { children: [children, menu && (jsx(TableContextMenu, { x: menu.x, y: menu.y, onClose: () => setMenu(null) }))] }));
+};
+
+const EMPTY_LINK = {
+    url: "",
+    target: "_self",
+    rel: "",
+    title: "",
+    pageRef: "",
+    urlExtra: "",
+};
+const LinkDialog = ({ initialData, options, onSave, onRemove, onClose, isEditing, }) => {
+    const [data, setData] = useState(initialData);
+    const [showAdvanced, setShowAdvanced] = useState(false);
+    const dialogRef = useRef(null);
+    const urlInputRef = useRef(null);
+    useEffect(() => {
+        urlInputRef.current?.focus();
+    }, []);
+    useEffect(() => {
+        const handler = (e) => {
+            if (dialogRef.current &&
+                !dialogRef.current.contains(e.target)) {
+                onClose();
+            }
+        };
+        // Delay to avoid closing immediately on the same click
+        const timer = setTimeout(() => {
+            document.addEventListener("mousedown", handler);
+        }, 50);
+        return () => {
+            clearTimeout(timer);
+            document.removeEventListener("mousedown", handler);
+        };
+    }, [onClose]);
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            onSave(data);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            onClose();
+        }
+    };
+    const set = (key, value) => setData((prev) => ({ ...prev, [key]: value }));
+    const hasAdvancedOptions = options.enableRel ||
+        options.enableTitle ||
+        options.enableUrlExtra ||
+        options.enablePageRef;
+    return (jsxs("div", { ref: dialogRef, className: "rte-link-dialog", onKeyDown: handleKeyDown, children: [jsx("div", { className: "rte-link-dialog-title", children: isEditing ? "Link bearbeiten" : "Link einfügen" }), jsxs("div", { className: "rte-link-dialog-field", children: [jsx("label", { className: "rte-link-dialog-label", children: "URL" }), jsx("input", { ref: urlInputRef, type: "url", className: "rte-link-dialog-input", value: data.url, onChange: (e) => set("url", e.target.value), placeholder: "https://..." })] }), options.enableTarget && (jsxs("div", { className: "rte-link-dialog-field", children: [jsx("label", { className: "rte-link-dialog-label", children: "Ziel" }), jsxs("select", { className: "rte-link-dialog-select", value: data.target, onChange: (e) => set("target", e.target.value), children: [jsx("option", { value: "_self", children: "Gleiches Fenster" }), jsx("option", { value: "_blank", children: "Neues Fenster" })] })] })), hasAdvancedOptions && (jsxs(Fragment, { children: [jsx("button", { type: "button", className: "rte-link-dialog-toggle", onClick: () => setShowAdvanced(!showAdvanced), children: showAdvanced ? "Erweitert ausblenden" : "Erweitert anzeigen" }), showAdvanced && (jsxs("div", { className: "rte-link-dialog-advanced", children: [options.enablePageRef && (jsxs("div", { className: "rte-link-dialog-field", children: [jsx("label", { className: "rte-link-dialog-label", children: "Seitenreferenz" }), jsx("input", { type: "text", className: "rte-link-dialog-input", value: data.pageRef, onChange: (e) => set("pageRef", e.target.value), placeholder: "page-id" })] })), options.enableUrlExtra && (jsxs("div", { className: "rte-link-dialog-field", children: [jsx("label", { className: "rte-link-dialog-label", children: "URL Extra" }), jsx("input", { type: "text", className: "rte-link-dialog-input", value: data.urlExtra, onChange: (e) => set("urlExtra", e.target.value), placeholder: "?param=value oder #anchor" })] })), options.enableRel && (jsxs("div", { className: "rte-link-dialog-field", children: [jsx("label", { className: "rte-link-dialog-label", children: "Rel" }), jsx("input", { type: "text", className: "rte-link-dialog-input", value: data.rel, onChange: (e) => set("rel", e.target.value), placeholder: "noopener noreferrer" })] })), options.enableTitle && (jsxs("div", { className: "rte-link-dialog-field", children: [jsx("label", { className: "rte-link-dialog-label", children: "Titel" }), jsx("input", { type: "text", className: "rte-link-dialog-input", value: data.title, onChange: (e) => set("title", e.target.value), placeholder: "Link-Titel" })] }))] }))] })), jsxs("div", { className: "rte-link-dialog-actions", children: [jsx("button", { type: "button", className: "rte-link-dialog-btn rte-link-dialog-btn-primary", onClick: () => onSave(data), disabled: !data.url.trim(), children: isEditing ? "Speichern" : "Einfügen" }), isEditing && (jsx("button", { type: "button", className: "rte-link-dialog-btn rte-link-dialog-btn-danger", onClick: onRemove, children: "Entfernen" })), jsx("button", { type: "button", className: "rte-link-dialog-btn", onClick: onClose, children: "Abbrechen" })] })] }));
+};
+const LinkToolbarButton = (props) => {
+    const [showDialog, setShowDialog] = useState(false);
+    const [linkData, setLinkData] = useState(EMPTY_LINK);
+    const [isEditing, setIsEditing] = useState(false);
+    const savedRangeRef = useRef(null);
+    const openDialog = useCallback(() => {
+        const sel = document.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        // Save the current selection
+        savedRangeRef.current = sel.getRangeAt(0).cloneRange();
+        const range = sel.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        const element = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        const existingLink = element?.closest("a");
+        if (existingLink) {
+            setIsEditing(true);
+            setLinkData({
+                url: existingLink.getAttribute("href") || "",
+                target: existingLink.getAttribute("target") || "_self",
+                rel: existingLink.getAttribute("rel") || "",
+                title: existingLink.getAttribute("title") || "",
+                pageRef: existingLink.getAttribute("data-page-ref") || "",
+                urlExtra: existingLink.getAttribute("data-url-extra") || "",
+            });
+        }
+        else {
+            setIsEditing(false);
+            setLinkData(EMPTY_LINK);
+        }
+        setShowDialog(true);
+    }, []);
+    const restoreSelection = useCallback(() => {
+        if (savedRangeRef.current) {
+            const sel = document.getSelection();
+            if (sel) {
+                sel.removeAllRanges();
+                sel.addRange(savedRangeRef.current);
+            }
+        }
+    }, []);
+    const handleSave = useCallback((data) => {
+        setShowDialog(false);
+        restoreSelection();
+        const sel = document.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        const element = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        const existingLink = element?.closest("a");
+        if (existingLink) {
+            // Update existing link
+            existingLink.setAttribute("href", data.url);
+            if (data.target && data.target !== "_self") {
+                existingLink.setAttribute("target", data.target);
+            }
+            else {
+                existingLink.removeAttribute("target");
+            }
+            if (data.rel) {
+                existingLink.setAttribute("rel", data.rel);
+            }
+            else {
+                existingLink.removeAttribute("rel");
+            }
+            if (data.title) {
+                existingLink.setAttribute("title", data.title);
+            }
+            else {
+                existingLink.removeAttribute("title");
+            }
+            if (data.pageRef) {
+                existingLink.setAttribute("data-page-ref", data.pageRef);
+            }
+            else {
+                existingLink.removeAttribute("data-page-ref");
+            }
+            if (data.urlExtra) {
+                existingLink.setAttribute("data-url-extra", data.urlExtra);
+            }
+            else {
+                existingLink.removeAttribute("data-url-extra");
+            }
+        }
+        else {
+            // Create new link
+            document.execCommand("createLink", false, data.url);
+            // Now find the newly created link and set extra attributes
+            const newSel = document.getSelection();
+            if (newSel && newSel.rangeCount > 0) {
+                const newRange = newSel.getRangeAt(0);
+                const newContainer = newRange.commonAncestorContainer;
+                const newElement = newContainer.nodeType === Node.TEXT_NODE
+                    ? newContainer.parentElement
+                    : newContainer;
+                const newLink = newElement?.closest("a");
+                if (newLink) {
+                    if (data.target && data.target !== "_self") {
+                        newLink.setAttribute("target", data.target);
+                    }
+                    if (data.rel) {
+                        newLink.setAttribute("rel", data.rel);
+                    }
+                    if (data.title) {
+                        newLink.setAttribute("title", data.title);
+                    }
+                    if (data.pageRef) {
+                        newLink.setAttribute("data-page-ref", data.pageRef);
+                    }
+                    if (data.urlExtra) {
+                        newLink.setAttribute("data-url-extra", data.urlExtra);
+                    }
+                }
+            }
+        }
+    }, [restoreSelection]);
+    const handleRemove = useCallback(() => {
+        setShowDialog(false);
+        restoreSelection();
+        const sel = document.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        const element = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        const existingLink = element?.closest("a");
+        if (existingLink) {
+            const parent = existingLink.parentNode;
+            if (parent) {
+                while (existingLink.firstChild) {
+                    parent.insertBefore(existingLink.firstChild, existingLink);
+                }
+                parent.removeChild(existingLink);
+            }
+        }
+    }, [restoreSelection]);
+    return (jsxs("div", { style: { position: "relative" }, children: [jsx("button", { type: "button", onClick: openDialog, disabled: props.disabled, className: `rte-toolbar-button ${props.isActive ? "rte-toolbar-button-active" : ""}`, title: "Link", "aria-label": "Link", children: jsx(IconWrapper, { icon: "mdi:link", width: 18, height: 18 }) }), showDialog && (jsx(LinkDialog, { initialData: linkData, options: props.options, onSave: handleSave, onRemove: handleRemove, onClose: () => setShowDialog(false), isEditing: isEditing }))] }));
+};
+/* ══════════════════════════════════════════════════════════════════════════
+   Plugin factory + export
+   ══════════════════════════════════════════════════════════════════════ */
+/**
+ * Creates an advanced link plugin with a floating dialog.
+ * Supports URL, target, rel, title, page reference, and URL extra.
+ */
+function createAdvancedLinkPlugin(options = {}) {
+    const opts = {
+        enablePageRef: false,
+        enableTarget: true,
+        enableRel: true,
+        enableTitle: true,
+        enableUrlExtra: false,
+        ...options,
+    };
+    return {
+        name: "advancedLink",
+        type: "inline",
+        renderButton: (props) => (jsx(LinkToolbarButton, { ...props, editorAPI: props.editorAPI, options: opts })),
+        execute: () => {
+            // Handled by the dialog component
+        },
+        isActive: () => {
+            if (typeof document === "undefined")
+                return false;
+            const sel = document.getSelection();
+            if (!sel || sel.rangeCount === 0)
+                return false;
+            const range = sel.getRangeAt(0);
+            const container = range.commonAncestorContainer;
+            const element = container.nodeType === Node.TEXT_NODE
+                ? container.parentElement
+                : container;
+            return element?.closest("a") !== null;
+        },
+        canExecute: () => {
+            const sel = document.getSelection();
+            return sel !== null && sel.rangeCount > 0;
+        },
+    };
+}
+/** Pre-built advanced link plugin with target + rel + title enabled */
+const advancedLinkPlugin = createAdvancedLinkPlugin();
+
+export { Dropdown, Editor, HistoryManager, TableContextMenuProvider, Toolbar, advancedLinkPlugin, alignmentPlugin, blockquotePlugin, boldPlugin, clearFormattingPlugin, codeInlinePlugin, contentToDOM, contentToHTML, createAdvancedLinkPlugin, createAlignmentPlugin, createBackgroundColorPlugin, createBlockFormatPlugin, createEmptyContent, createFontSizePlugin, createHeadingsPlugin, createImagePlugin, createLinkPlugin, createTextColorPlugin, Editor as default, defaultPlugins, domToContent, ensureAllCheckboxes, findClosestCheckboxList, getCurrentBackgroundColor, getCurrentFontSize, getCurrentHeading, getCurrentTextColor, htmlToContent, indentListItem, indentListItemPlugin, isCheckboxList, italicPlugin, linkPlugin, orderedListPlugin, outdentListItem, outdentListItemPlugin, redoPlugin, strikethroughPlugin, subscriptPlugin, superscriptPlugin, tablePlugin, underlinePlugin, undoPlugin, unorderedListPlugin };
 //# sourceMappingURL=index.esm.js.map