@trafica/editor 1.0.32 → 1.0.34

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { forwardRef, useRef, useEffect, useCallback, useMemo, useImperativeHandle, useState, useLayoutEffect, useSyncExternalStore } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useSyncExternalStore, useRef, useCallback, useState, useEffect, useLayoutEffect, useMemo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
 // src/editor/core/DocumentModel.ts
@@ -1633,38 +1633,47 @@ var htmlSerializer = {
     return parseHTMLBody(parsed.body);
   }
 };
+function alignAttrs(align, extraStyles = "") {
+  const dataAlign = align ? ` data-align="${align}"` : "";
+  const textAlign = align && align !== "left" ? `text-align:${align};` : "";
+  const combined = textAlign + extraStyles;
+  const style = combined ? ` style="${combined}"` : "";
+  return dataAlign + style;
+}
 function serializeBlock(node, idCounts = /* @__PURE__ */ new Map(), inCell = false) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B;
   switch (node.type) {
     case "paragraph": {
-      const align = ((_a = node.attrs) == null ? void 0 : _a.align) ? ` data-align="${node.attrs.align}"` : "";
-      const style = inCell ? ` style="margin:0;min-height:1.2em;"` : "";
-      return `<p${align}${style}>${serializeChildren(node.children)}</p>`;
+      const align = (_a = node.attrs) == null ? void 0 : _a.align;
+      const extra = inCell ? "margin:0;min-height:1.2em;" : "";
+      return `<p${alignAttrs(align, extra)}>${serializeChildren(node.children)}</p>`;
     }
     case "heading": {
       const l = (_c = (_b = node.attrs) == null ? void 0 : _b.level) != null ? _c : 1;
-      const align = ((_d = node.attrs) == null ? void 0 : _d.align) ? ` data-align="${node.attrs.align}"` : "";
+      const align = (_d = node.attrs) == null ? void 0 : _d.align;
       const rawText = node.children.filter((c) => "text" in c).map((c) => c.text).join("");
       const base = slugify(rawText) || `heading-${l}`;
       const count = (_e = idCounts.get(base)) != null ? _e : 0;
       idCounts.set(base, count + 1);
       const id = count === 0 ? base : `${base}-${count}`;
-      return `<h${l} id="${id}"${align}>${serializeChildren(node.children)}</h${l}>`;
+      return `<h${l} id="${id}"${alignAttrs(align)}>${serializeChildren(node.children)}</h${l}>`;
     }
     case "blockquote": {
-      const align = ((_f = node.attrs) == null ? void 0 : _f.align) ? ` data-align="${node.attrs.align}"` : "";
-      return `<blockquote${align}>${serializeChildren(node.children)}</blockquote>`;
+      const align = (_f = node.attrs) == null ? void 0 : _f.align;
+      return `<blockquote${alignAttrs(align)}>${serializeChildren(node.children)}</blockquote>`;
     }
     case "bullet_list":
       return `<ul>${serializeChildren(node.children)}</ul>`;
     case "ordered_list":
       return `<ol>${serializeChildren(node.children)}</ol>`;
-    case "list_item":
-      return `<li>${serializeChildren(node.children)}</li>`;
+    case "list_item": {
+      const align = (_g = node.attrs) == null ? void 0 : _g.align;
+      return `<li${alignAttrs(align)}>${serializeChildren(node.children)}</li>`;
+    }
     case "check_list":
       return `<ul class="todo-list" data-type="checklist">${serializeChildren(node.children)}</ul>`;
     case "check_list_item": {
-      const checked = !!((_g = node.attrs) == null ? void 0 : _g.checked);
+      const checked = !!((_h = node.attrs) == null ? void 0 : _h.checked);
       const dataChecked = checked ? ' data-checked="true"' : "";
       const itemClass = `todo-list__item${checked ? " todo-list__item_checked" : ""}`;
       const checkedAttr = checked ? ' checked="checked"' : "";
@@ -1672,16 +1681,16 @@ function serializeBlock(node, idCounts = /* @__PURE__ */ new Map(), inCell = fal
       return `<li class="${itemClass}"${dataChecked}><label class="todo-list__label"><input type="checkbox" disabled="disabled"${checkedAttr}><span class="todo-list__label__description">${innerContent}</span></label></li>`;
     }
     case "code_block": {
-      const lang = ((_h = node.attrs) == null ? void 0 : _h.language) ? ` class="language-${node.attrs.language}"` : "";
+      const lang = ((_i = node.attrs) == null ? void 0 : _i.language) ? ` class="language-${node.attrs.language}"` : "";
       const raw = node.children.map((c) => isTextNode(c) ? escapeHTML(c.text) : "").join("");
       return `<pre><code${lang}>${raw}</code></pre>`;
     }
     case "image": {
-      const src = escapeAttr((_j = (_i = node.attrs) == null ? void 0 : _i.src) != null ? _j : "");
-      const alt = escapeAttr((_l = (_k = node.attrs) == null ? void 0 : _k.alt) != null ? _l : "");
-      const width = ((_m = node.attrs) == null ? void 0 : _m.width) ? ` width="${node.attrs.width}"` : "";
-      const align = ((_n = node.attrs) == null ? void 0 : _n.align) ? ` data-align="${node.attrs.align}"` : "";
-      const caption = ((_o = node.attrs) == null ? void 0 : _o.caption) ? escapeHTML(node.attrs.caption) : "";
+      const src = escapeAttr((_k = (_j = node.attrs) == null ? void 0 : _j.src) != null ? _k : "");
+      const alt = escapeAttr((_m = (_l = node.attrs) == null ? void 0 : _l.alt) != null ? _m : "");
+      const width = ((_n = node.attrs) == null ? void 0 : _n.width) ? ` width="${node.attrs.width}"` : "";
+      const align = ((_o = node.attrs) == null ? void 0 : _o.align) ? ` data-align="${node.attrs.align}"` : "";
+      const caption = ((_p = node.attrs) == null ? void 0 : _p.caption) ? escapeHTML(node.attrs.caption) : "";
       if (caption) {
         return `<figure${align}><img src="${src}" alt="${alt}"${width} /><figcaption>${caption}</figcaption></figure>`;
       }
@@ -1691,7 +1700,7 @@ function serializeBlock(node, idCounts = /* @__PURE__ */ new Map(), inCell = fal
       return "<hr />";
     case "table": {
       const rows = node.children.map((c) => serializeBlock(c)).join("");
-      const colWidths = (_q = (_p = node.attrs) == null ? void 0 : _p.colWidths) != null ? _q : [];
+      const colWidths = (_r = (_q = node.attrs) == null ? void 0 : _q.colWidths) != null ? _r : [];
       let colgroup = "";
       if (colWidths.length > 0) {
         const total = colWidths.reduce((s, w) => s + w, 0) || colWidths.length * 120;
@@ -1704,15 +1713,15 @@ function serializeBlock(node, idCounts = /* @__PURE__ */ new Map(), inCell = fal
       return `<tr>${cells}</tr>`;
     }
     case "table_cell": {
-      if ((_r = node.attrs) == null ? void 0 : _r.covered) return "";
-      const cs = ((_s = node.attrs) == null ? void 0 : _s.colspan) > 1 ? ` colspan="${(_t = node.attrs) == null ? void 0 : _t.colspan}"` : "";
-      const rs = ((_u = node.attrs) == null ? void 0 : _u.rowspan) > 1 ? ` rowspan="${(_v = node.attrs) == null ? void 0 : _v.rowspan}"` : "";
+      if ((_s = node.attrs) == null ? void 0 : _s.covered) return "";
+      const cs = ((_t = node.attrs) == null ? void 0 : _t.colspan) > 1 ? ` colspan="${(_u = node.attrs) == null ? void 0 : _u.colspan}"` : "";
+      const rs = ((_v = node.attrs) == null ? void 0 : _v.rowspan) > 1 ? ` rowspan="${(_w = node.attrs) == null ? void 0 : _w.rowspan}"` : "";
       return `<td${cs}${rs} style="border:1px solid #d1d5db;padding:0.5em 0.75em;vertical-align:top;min-width:40px;word-break:break-word;">${node.children.map((c) => serializeBlock(c, /* @__PURE__ */ new Map(), true)).join("")}</td>`;
     }
     case "table_header": {
-      if ((_w = node.attrs) == null ? void 0 : _w.covered) return "";
-      const cs = ((_x = node.attrs) == null ? void 0 : _x.colspan) > 1 ? ` colspan="${(_y = node.attrs) == null ? void 0 : _y.colspan}"` : "";
-      const rs = ((_z = node.attrs) == null ? void 0 : _z.rowspan) > 1 ? ` rowspan="${(_A = node.attrs) == null ? void 0 : _A.rowspan}"` : "";
+      if ((_x = node.attrs) == null ? void 0 : _x.covered) return "";
+      const cs = ((_y = node.attrs) == null ? void 0 : _y.colspan) > 1 ? ` colspan="${(_z = node.attrs) == null ? void 0 : _z.colspan}"` : "";
+      const rs = ((_A = node.attrs) == null ? void 0 : _A.rowspan) > 1 ? ` rowspan="${(_B = node.attrs) == null ? void 0 : _B.rowspan}"` : "";
       return `<th${cs}${rs} style="border:1px solid #d1d5db;padding:0.5em 0.75em;vertical-align:top;min-width:40px;word-break:break-word;background:#f9fafb;font-weight:600;text-align:left;">${node.children.map((c) => serializeBlock(c, /* @__PURE__ */ new Map(), true)).join("")}</th>`;
     }
     default:
@@ -7831,7 +7840,7 @@ var jsonSerializer = {
     }
   }
 };
-function EditorCore({
+function Editor({
   engine,
   placeholder = "Start writing...",
   className = "",
@@ -7839,14 +7848,11 @@ function EditorCore({
   onHTMLChange,
   onJSONChange,
   onOpenLinkPopup,
-  onUploadImage: _onUploadImage,
-  onFocus: onFocusProp,
-  onBlur: onBlurProp,
-  hideToolbar = false,
-  toolbarConfig
+  onUploadImage: _onUploadImage
 }) {
   const containerRef = useRef(null);
   const isRenderingRef = useRef(false);
+  const skipRestoreSelectionRef = useRef(false);
   const scrollCaretIntoView = useCallback(() => {
     var _a, _b;
     const sel = window.getSelection();
@@ -7959,8 +7965,14 @@ function EditorCore({
   useLayoutEffect(() => {
     const container = containerRef.current;
     if (!container || !state.selection) return;
+    if (skipRestoreSelectionRef.current) {
+      skipRestoreSelectionRef.current = false;
+      return;
+    }
+    isRenderingRef.current = true;
     restoreSelection(container, state.selection);
     scrollCaretIntoView();
+    isRenderingRef.current = false;
   }, [state.selection]);
   useEffect(() => {
     const container = containerRef.current;
@@ -8025,6 +8037,7 @@ function EditorCore({
       if (currentSelection && JSON.stringify(currentSelection.anchor) === JSON.stringify(captured.anchor) && JSON.stringify(currentSelection.focus) === JSON.stringify(captured.focus)) {
         return;
       }
+      skipRestoreSelectionRef.current = true;
       const tr = createTransaction();
       tr.steps.push(tr_setSelection(captured));
       engine.dispatch(tr);
@@ -8051,11 +8064,7 @@ function EditorCore({
       );
       engine.dispatch(tr);
     }
-    onFocusProp == null ? void 0 : onFocusProp();
-  }, [engine, onFocusProp]);
-  const handleBlur = useCallback(() => {
-    onBlurProp == null ? void 0 : onBlurProp();
-  }, [onBlurProp]);
+  }, [engine]);
   const handleKeyDown = useCallback(
     (e) => {
       var _a, _b, _c;
@@ -8407,6 +8416,7 @@ function EditorCore({
     if (!container) return;
     const selection = captureSelection(container);
     if (!selection) return;
+    skipRestoreSelectionRef.current = true;
     const tr = createTransaction();
     tr.steps.push(
       tr_setSelection(selection)
@@ -8489,7 +8499,7 @@ function EditorCore({
       className: `editor-root relative flex flex-col ${className}`,
       style: editorHeight ? { minHeight: editorHeight } : void 0,
       children: [
-        !readOnly && !hideToolbar && /* @__PURE__ */ jsx(
+        !readOnly && /* @__PURE__ */ jsx(
           Toolbar,
           {
             engine,
@@ -8500,8 +8510,7 @@ function EditorCore({
             linkPopupOpen,
             onLinkPopupClose: () => setLinkPopupOpen(false),
             isSourceMode,
-            onToggleSource: handleToggleSource,
-            toolbarConfig
+            onToggleSource: handleToggleSource
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "relative", children: isSourceMode ? /* @__PURE__ */ jsx(
@@ -8528,7 +8537,7 @@ function EditorCore({
           isVisualEmpty && /* @__PURE__ */ jsx(
             "div",
             {
-              className: "\r\n                  absolute\r\n                  top-6\r\n                  left-6\r\n                  pointer-events-none\r\n                  select-none\r\n                  text-base\r\n                  text-gray-400\r\n                  \r\n                ",
+              className: "\r\n                  absolute\r\n                  top-6\r\n                  left-6\r\n                  pointer-events-none\r\n                  select-none\r\n                  text-base\r\n                  text-gray-400\r\n                  dark:text-gray-500\r\n                ",
               "aria-hidden": "true",
               children: placeholder
             }
@@ -8546,7 +8555,6 @@ function EditorCore({
               onMouseDown: handleMouseDown,
               onContextMenu: handleContextMenu,
               onFocus: handleFocus,
-              onBlur: handleBlur,
               onClick: handleClick,
               onKeyDown: handleKeyDown,
               className: [
@@ -8558,7 +8566,7 @@ function EditorCore({
                 "text-base",
                 "leading-relaxed",
                 "text-gray-900",
-                "",
+                "dark:text-gray-100",
                 readOnly ? "cursor-default" : "cursor-text"
               ].join(" ")
             }
@@ -8568,7 +8576,7 @@ function EditorCore({
             {
               role: "tooltip",
               style: { left: linkTooltip.x, top: linkTooltip.y },
-              className: "absolute z-50 pointer-events-none flex items-center gap-1.5 bg-gray-900  text-white text-xs px-2.5 py-1.5 rounded shadow-lg max-w-xs",
+              className: "absolute z-50 pointer-events-none flex items-center gap-1.5 bg-gray-900 dark:bg-gray-700 text-white text-xs px-2.5 py-1.5 rounded shadow-lg max-w-xs",
               children: [
                 /* @__PURE__ */ jsxs("svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "none", className: "shrink-0 opacity-70", "aria-hidden": "true", children: [
                   /* @__PURE__ */ jsx("path", { d: "M6.5 3.5H4A2.5 2.5 0 0 0 4 8.5h2", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
@@ -8683,168 +8691,1020 @@ function prettyPrintHTML(html) {
   }
   return result.join("\n");
 }
-
-// src/editor/table/TablePlugin.ts
-function getCellDOMElement(cellPathJson) {
-  return document.querySelector(`[data-block-path='${cellPathJson}']`);
-}
-function isCaretAtContainerStart(container) {
-  const sel = window.getSelection();
-  if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return false;
-  const range = sel.getRangeAt(0);
-  if (range.startOffset !== 0) return false;
-  let node = range.startContainer;
-  while (node && node !== container) {
-    if (node.previousSibling) return false;
-    node = node.parentNode;
-  }
-  return node === container;
-}
-function isCaretAtContainerEnd(container) {
-  var _a, _b;
-  const sel = window.getSelection();
-  if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return false;
-  const range = sel.getRangeAt(0);
-  const endNode = range.endContainer;
-  const endOffset = range.endOffset;
-  const len = endNode.nodeType === Node.TEXT_NODE ? (_b = (_a = endNode.textContent) == null ? void 0 : _a.length) != null ? _b : 0 : endNode.childNodes.length;
-  if (endOffset !== len) return false;
-  let node = endNode;
-  while (node && node !== container) {
-    if (node.nextSibling) return false;
-    node = node.parentNode;
-  }
-  return node === container;
-}
-function isCaretOnEdgeLine(container, direction) {
-  const sel = window.getSelection();
-  if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return false;
-  const caretRange = sel.getRangeAt(0).cloneRange();
-  caretRange.collapse(true);
-  const caretRects = caretRange.getClientRects();
-  if (!caretRects.length) return true;
-  const caretRect = caretRects[0];
-  const containerRect = container.getBoundingClientRect();
-  const lineHeight = parseFloat(getComputedStyle(container).lineHeight) || 20;
-  if (direction === "up") {
-    return caretRect.top < containerRect.top + lineHeight;
-  } else {
-    return caretRect.bottom > containerRect.bottom - lineHeight;
-  }
-}
-var TablePlugin = {
-  name: "table",
-  keyBindings: {
-    Tab: (engine) => {
-      var _a;
-      const state = engine.getState();
-      const sel = state.selection;
-      if (!sel) return false;
-      const cellPos = findCellPosition(state.doc, sel.anchor.path);
-      if (!cellPos) return false;
-      const { tablePath, row, col } = cellPos;
-      const table = getNodeAtPath(state.doc, tablePath);
-      const { rows, cols } = getTableDimensions(table);
-      let nextRow = row;
-      let nextCol = col + 1;
-      while (nextRow < rows) {
-        if (nextCol >= cols) {
-          nextCol = 0;
-          nextRow++;
-          continue;
-        }
-        const c = getNodeAtPath(state.doc, [...tablePath, nextRow, nextCol]);
-        if (!((_a = c == null ? void 0 : c.attrs) == null ? void 0 : _a.covered)) break;
-        nextCol++;
-      }
-      if (nextRow >= rows) {
-        const newTable = insertTableRowAfter(table, rows - 1);
-        const newChildren = [...state.doc.children];
-        newChildren[tablePath[0]] = newTable;
-        const tempDoc = { type: "doc", children: newChildren };
-        const tr2 = createTransaction();
-        tr2.steps.push({ type: "delete_node", path: tablePath });
-        tr2.steps.push({
-          type: "insert_node",
-          parentPath: tablePath.length > 1 ? tablePath.slice(0, -1) : [],
-          index: tablePath[tablePath.length - 1],
-          node: newTable
-        });
-        const pos2 = getCellFirstPosition(tempDoc, tablePath, rows, 0);
-        if (pos2) tr2.steps.push(tr_setSelection(makeCollapsedSelection(pos2)));
-        engine.dispatch(tr2);
-        return true;
+function EditorCore({
+  engine,
+  placeholder = "Start writing...",
+  className = "",
+  readOnly = false,
+  onHTMLChange,
+  onJSONChange,
+  onOpenLinkPopup,
+  onUploadImage: _onUploadImage,
+  onFocus: onFocusProp,
+  onBlur: onBlurProp,
+  hideToolbar = false,
+  toolbarConfig
+}) {
+  const containerRef = useRef(null);
+  const isRenderingRef = useRef(false);
+  const scrollCaretIntoView = useCallback(() => {
+    var _a, _b;
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0).cloneRange();
+    range.collapse(true);
+    const caretRect = range.getBoundingClientRect();
+    let rect = caretRect;
+    if (!rect || rect.top === 0 && rect.bottom === 0 && rect.left === 0) {
+      const node = range.startContainer;
+      const el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+      if (el) rect = el.getBoundingClientRect();
+    }
+    if (!rect || rect.bottom === 0) return;
+    let scrollEl = (_b = (_a = containerRef.current) == null ? void 0 : _a.parentElement) != null ? _b : null;
+    while (scrollEl) {
+      const style = window.getComputedStyle(scrollEl);
+      const overflow = style.overflow + style.overflowY;
+      if (/auto|scroll/.test(overflow)) break;
+      scrollEl = scrollEl.parentElement;
+    }
+    const PADDING = 24;
+    if (scrollEl) {
+      const containerRect = scrollEl.getBoundingClientRect();
+      if (rect.bottom > containerRect.bottom - PADDING) {
+        scrollEl.scrollBy({ top: rect.bottom - containerRect.bottom + PADDING, behavior: "smooth" });
+      } else if (rect.top < containerRect.top + PADDING) {
+        scrollEl.scrollBy({ top: rect.top - containerRect.top - PADDING, behavior: "smooth" });
       }
-      const pos = getCellFirstPosition(state.doc, tablePath, nextRow, nextCol);
-      if (!pos) return false;
-      const tr = createTransaction();
-      tr.steps.push(tr_setSelection(makeCollapsedSelection(pos)));
-      engine.dispatch(tr);
-      return true;
-    },
-    "ArrowRight": (engine) => {
-      var _a;
-      const state = engine.getState();
-      const sel = state.selection;
-      if (!sel) return false;
-      const cellPos = findCellPosition(state.doc, sel.anchor.path);
-      if (!cellPos) return false;
-      const { tablePath, row, col } = cellPos;
-      const cellPath = [...tablePath, row, col];
-      const cellEl = getCellDOMElement(JSON.stringify(cellPath));
-      if (!cellEl || !isCaretAtContainerEnd(cellEl)) return false;
-      const table = getNodeAtPath(state.doc, tablePath);
-      const { rows, cols } = getTableDimensions(table);
-      let nextRow = row;
-      let nextCol = col + 1;
-      while (nextRow < rows) {
-        if (nextCol >= cols) {
-          nextCol = 0;
-          nextRow++;
-          continue;
-        }
-        const c = getNodeAtPath(state.doc, [...tablePath, nextRow, nextCol]);
-        if (!((_a = c == null ? void 0 : c.attrs) == null ? void 0 : _a.covered)) break;
-        nextCol++;
+    } else {
+      if (rect.bottom > window.innerHeight - PADDING) {
+        window.scrollBy({ top: rect.bottom - window.innerHeight + PADDING, behavior: "smooth" });
+      } else if (rect.top < PADDING) {
+        window.scrollBy({ top: rect.top - PADDING, behavior: "smooth" });
       }
-      if (nextRow >= rows) return true;
-      const pos = getCellFirstPosition(state.doc, tablePath, nextRow, nextCol);
-      if (!pos) return false;
+    }
+  }, []);
+  const isComposingRef = useRef(false);
+  const stateRef = useRef(engine.getState());
+  const [selectedImagePath, setSelectedImagePath] = useState(null);
+  const [findReplaceOpen, setFindReplaceOpen] = useState(false);
+  const [findReplaceMode, setFindReplaceMode] = useState("find");
+  const [linkPopupOpen, setLinkPopupOpen] = useState(false);
+  const [isSourceMode, setIsSourceMode] = useState(false);
+  const [sourceHTML, setSourceHTML] = useState("");
+  const [editorHeight, setEditorHeight] = useState(null);
+  const editorRootRef = useRef(null);
+  const resizeDragRef = useRef(null);
+  const [linkTooltip, setLinkTooltip] = useState(null);
+  const linkTooltipTimerRef = useRef(null);
+  const handleToggleSource = useCallback(() => {
+    if (!isSourceMode) {
+      const html = htmlSerializer.serialize(engine.getState().doc);
+      setSourceHTML(prettyPrintHTML2(html));
+      setIsSourceMode(true);
+    } else {
+      const newDoc = htmlSerializer.deserialize(sourceHTML);
       const tr = createTransaction();
-      tr.steps.push(tr_setSelection(makeCollapsedSelection(pos)));
+      tr.steps.push(tr_replaceDoc(newDoc));
       engine.dispatch(tr);
-      return true;
-    },
-    "ArrowLeft": (engine) => {
-      var _a;
-      const state = engine.getState();
-      const sel = state.selection;
-      if (!sel) return false;
-      const cellPos = findCellPosition(state.doc, sel.anchor.path);
-      if (!cellPos) return false;
-      const { tablePath, row, col } = cellPos;
-      const cellPath = [...tablePath, row, col];
-      const cellEl = getCellDOMElement(JSON.stringify(cellPath));
-      if (!cellEl || !isCaretAtContainerStart(cellEl)) return false;
-      const table = getNodeAtPath(state.doc, tablePath);
-      const { cols } = getTableDimensions(table);
-      let prevRow = row;
-      let prevCol = col - 1;
-      while (prevRow >= 0) {
-        if (prevCol < 0) {
-          prevCol = cols - 1;
-          prevRow--;
-          continue;
-        }
-        const c = getNodeAtPath(state.doc, [...tablePath, prevRow, prevCol]);
-        if (!((_a = c == null ? void 0 : c.attrs) == null ? void 0 : _a.covered)) break;
-        prevCol--;
-      }
-      if (prevRow < 0) return true;
-      const pos = getCellLastPosition(state.doc, tablePath, prevRow, prevCol);
-      if (!pos) return false;
-      const tr = createTransaction();
-      tr.steps.push(tr_setSelection(makeCollapsedSelection(pos)));
+      setIsSourceMode(false);
+    }
+  }, [isSourceMode, sourceHTML, engine]);
+  useEffect(() => {
+    const onMouseMove = (e) => {
+      const drag = resizeDragRef.current;
+      if (!drag) return;
+      const newHeight = Math.max(120, drag.startHeight + (e.clientY - drag.startY));
+      setEditorHeight(newHeight);
+    };
+    const onMouseUp = () => {
+      resizeDragRef.current = null;
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+  }, []);
+  const [tableContextMenu, setTableContextMenu] = useState(null);
+  const [tableSelection, setTableSelection] = useState(null);
+  const cellDragRef = useRef(null);
+  const colResizeRef = useRef(null);
+  const state = useEditorState(engine);
+  const inTableCellPos = state.selection ? findCellPosition(state.doc, state.selection.anchor.path) : null;
+  useLayoutEffect(() => {
+    stateRef.current = state;
+  }, [state]);
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    isRenderingRef.current = true;
+    renderDocument(state.doc, container);
+    if (!container.contains(document.activeElement)) {
+      container.focus({ preventScroll: true });
+    }
+    if (state.selection) {
+      restoreSelection(container, state.selection);
+      scrollCaretIntoView();
+    }
+    isRenderingRef.current = false;
+    if (onHTMLChange) {
+      onHTMLChange(htmlSerializer.serialize(state.doc));
+    }
+    if (onJSONChange) {
+      onJSONChange(jsonSerializer.serialize(state.doc));
+    }
+  }, [state.doc]);
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container || !state.selection) return;
+    restoreSelection(container, state.selection);
+    scrollCaretIntoView();
+  }, [state.selection]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || readOnly) return;
+    return attachClipboardHandlers(container, engine);
+  }, [engine, readOnly]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    container.querySelectorAll(".editor-cell-selected").forEach((el) => {
+      el.classList.remove("editor-cell-selected");
+    });
+    if (!tableSelection) return;
+    const { tablePath, anchorCell, focusCell } = tableSelection;
+    const minRow = Math.min(anchorCell[0], focusCell[0]);
+    const maxRow = Math.max(anchorCell[0], focusCell[0]);
+    const minCol = Math.min(anchorCell[1], focusCell[1]);
+    const maxCol = Math.max(anchorCell[1], focusCell[1]);
+    for (let r = minRow; r <= maxRow; r++) {
+      for (let c = minCol; c <= maxCol; c++) {
+        const cellPath = [...tablePath, r, c];
+        const td = container.querySelector(
+          `[data-block-path="${JSON.stringify(cellPath)}"]`
+        );
+        if (td) td.classList.add("editor-cell-selected");
+      }
+    }
+  }, [tableSelection, state.doc]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    container.querySelectorAll(".editor-cell-active").forEach((el) => {
+      el.classList.remove("editor-cell-active");
+    });
+    if (!inTableCellPos) {
+      setTableSelection(null);
+      return;
+    }
+    if (tableSelection) {
+      const { anchorCell, focusCell, tablePath } = tableSelection;
+      const sameTable = JSON.stringify(tablePath) === JSON.stringify(inTableCellPos.tablePath);
+      const singleCell = anchorCell[0] === focusCell[0] && anchorCell[1] === focusCell[1];
+      if (!sameTable || singleCell) {
+        setTableSelection(null);
+      }
+    }
+    const cellPath = [...inTableCellPos.tablePath, inTableCellPos.row, inTableCellPos.col];
+    const td = container.querySelector(
+      `[data-block-path="${JSON.stringify(cellPath)}"]`
+    );
+    if (td) td.classList.add("editor-cell-active");
+  }, [inTableCellPos, state.doc]);
+  useEffect(() => {
+    const onSelectionChange = () => {
+      if (isRenderingRef.current) return;
+      const container = containerRef.current;
+      if (!container) return;
+      if (!isSelectionInContainer(container)) return;
+      const captured = captureSelection(container);
+      if (!captured) return;
+      const currentSelection = engine.getState().selection;
+      if (currentSelection && JSON.stringify(currentSelection.anchor) === JSON.stringify(captured.anchor) && JSON.stringify(currentSelection.focus) === JSON.stringify(captured.focus)) {
+        return;
+      }
+      const tr = createTransaction();
+      tr.steps.push(tr_setSelection(captured));
+      engine.dispatch(tr);
+    };
+    document.addEventListener(
+      "selectionchange",
+      onSelectionChange
+    );
+    return () => {
+      document.removeEventListener(
+        "selectionchange",
+        onSelectionChange
+      );
+    };
+  }, [engine]);
+  const handleFocus = useCallback(() => {
+    const currentState = engine.getState();
+    if (!currentState.selection) {
+      const tr = createTransaction();
+      tr.steps.push(
+        tr_setSelection(
+          makeCollapsedSelection({ path: [0], offset: 0 })
+        )
+      );
+      engine.dispatch(tr);
+    }
+    onFocusProp == null ? void 0 : onFocusProp();
+  }, [engine, onFocusProp]);
+  const handleBlur = useCallback(() => {
+    onBlurProp == null ? void 0 : onBlurProp();
+  }, [onBlurProp]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      var _a, _b, _c;
+      if (readOnly) return;
+      if ((e.ctrlKey || e.metaKey) && e.key === "f") {
+        e.preventDefault();
+        setFindReplaceMode("find");
+        setFindReplaceOpen(true);
+        return;
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key === "h") {
+        e.preventDefault();
+        setFindReplaceMode("replace");
+        setFindReplaceOpen(true);
+        return;
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key === "k") {
+        e.preventDefault();
+        setLinkPopupOpen(true);
+        onOpenLinkPopup == null ? void 0 : onOpenLinkPopup();
+        return;
+      }
+      if ((e.ctrlKey || e.metaKey) && (e.key === "a" || e.key === "A")) {
+        e.preventDefault();
+        const container = containerRef.current;
+        if (container) {
+          const spans = container.querySelectorAll("[data-path]");
+          const first = spans[0];
+          const last = spans[spans.length - 1];
+          if (first && last) {
+            const sel = window.getSelection();
+            const range = document.createRange();
+            range.setStart((_a = leafTextNode2(first, "first")) != null ? _a : first, 0);
+            const lastLeaf = leafTextNode2(last, "last");
+            range.setEnd(lastLeaf != null ? lastLeaf : last, (_c = (_b = lastLeaf == null ? void 0 : lastLeaf.textContent) == null ? void 0 : _b.length) != null ? _c : 0);
+            sel == null ? void 0 : sel.removeAllRanges();
+            sel == null ? void 0 : sel.addRange(range);
+          }
+        }
+        return;
+      }
+      if (selectedImagePath && (e.key === "Delete" || e.key === "Backspace")) {
+        e.preventDefault();
+        deleteImageAtPath(selectedImagePath)(engine);
+        setSelectedImagePath(null);
+        return;
+      }
+      if (selectedImagePath) setSelectedImagePath(null);
+      if (e.key === "Tab") {
+        const { doc, selection: sel } = engine.getState();
+        if (sel) {
+          const bp = findContentBlockPath(doc, sel.anchor.path);
+          const block = bp ? getNodeAtPath(doc, bp) : null;
+          if ((block == null ? void 0 : block.type) === "code_block") {
+            e.preventDefault();
+            insertText("  ")(engine);
+            return;
+          }
+          if ((block == null ? void 0 : block.type) === "list_item") {
+            e.preventDefault();
+            if (e.shiftKey) {
+              outdentListItem(engine);
+            } else {
+              indentListItem(engine);
+            }
+            return;
+          }
+          if (findCellPosition(doc, sel.anchor.path)) {
+            e.preventDefault();
+          }
+        }
+      }
+      const handled = engine.handleKeyDown(
+        e.nativeEvent
+      );
+      if (handled) return;
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleEnter(engine);
+        return;
+      }
+      if (e.key === "Backspace") {
+        e.preventDefault();
+        handleBackspace(engine);
+        return;
+      }
+      if (e.key === "Delete") {
+        e.preventDefault();
+        handleDelete(engine);
+        return;
+      }
+      if (e.key === "Enter" && e.shiftKey) {
+        e.preventDefault();
+        insertText("\n")(engine);
+        return;
+      }
+    },
+    [engine, readOnly, onOpenLinkPopup, selectedImagePath]
+  );
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || readOnly) return;
+    const onBeforeInput = (e) => {
+      if (e.isComposing || isComposingRef.current) return;
+      switch (e.inputType) {
+        case "insertText":
+        case "insertReplacementText": {
+          if (!e.data) return;
+          e.preventDefault();
+          insertText(e.data)(engine);
+          return;
+        }
+        case "insertParagraph": {
+          e.preventDefault();
+          handleEnter(engine);
+          return;
+        }
+        case "insertLineBreak": {
+          e.preventDefault();
+          insertText("\n")(engine);
+          return;
+        }
+        case "deleteContentBackward":
+        case "deleteWordBackward":
+        case "deleteSoftLineBackward": {
+          e.preventDefault();
+          handleBackspace(engine);
+          return;
+        }
+        case "insertFromPaste":
+        case "insertFromDrop":
+          return;
+        default:
+          e.preventDefault();
+      }
+    };
+    container.addEventListener("beforeinput", onBeforeInput);
+    return () => container.removeEventListener("beforeinput", onBeforeInput);
+  }, [engine, readOnly]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || readOnly) return;
+    const onCompositionStart = () => {
+      isComposingRef.current = true;
+    };
+    const onCompositionEnd = (e) => {
+      isComposingRef.current = false;
+      if (e.data) insertText(e.data)(engine);
+    };
+    container.addEventListener("compositionstart", onCompositionStart);
+    container.addEventListener("compositionend", onCompositionEnd);
+    return () => {
+      container.removeEventListener("compositionstart", onCompositionStart);
+      container.removeEventListener("compositionend", onCompositionEnd);
+    };
+  }, [engine, readOnly]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const onMouseOver = (e) => {
+      var _a;
+      const anchor = e.target.closest("a.editor-link");
+      if (!anchor) return;
+      const href = (_a = anchor.getAttribute("href")) != null ? _a : "";
+      if (!href) return;
+      if (linkTooltipTimerRef.current) clearTimeout(linkTooltipTimerRef.current);
+      linkTooltipTimerRef.current = setTimeout(() => {
+        const rect = anchor.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        setLinkTooltip({
+          href,
+          x: rect.left - containerRect.left,
+          y: rect.bottom - containerRect.top + 6
+        });
+      }, 200);
+    };
+    const onMouseOut = (e) => {
+      const anchor = e.target.closest("a.editor-link");
+      if (!anchor) return;
+      if (linkTooltipTimerRef.current) clearTimeout(linkTooltipTimerRef.current);
+      setLinkTooltip(null);
+    };
+    const onClick = (e) => {
+      if (!(e.ctrlKey || e.metaKey)) return;
+      const anchor = e.target.closest("a.editor-link");
+      if (!anchor) return;
+      e.preventDefault();
+      const href = anchor.getAttribute("href");
+      if (href) window.open(href, "_blank", "noopener,noreferrer");
+    };
+    container.addEventListener("mouseover", onMouseOver);
+    container.addEventListener("mouseout", onMouseOut);
+    container.addEventListener("click", onClick);
+    return () => {
+      container.removeEventListener("mouseover", onMouseOver);
+      container.removeEventListener("mouseout", onMouseOut);
+      container.removeEventListener("click", onClick);
+      if (linkTooltipTimerRef.current) clearTimeout(linkTooltipTimerRef.current);
+    };
+  }, []);
+  useEffect(() => {
+    const onMouseMove = (e) => {
+      const drag = colResizeRef.current;
+      if (!drag) return;
+      const delta = e.clientX - drag.startX;
+      const newWidth = Math.max(40, drag.startWidth + delta);
+      const container = containerRef.current;
+      if (container) {
+        const colEl = container.querySelector(
+          `col[data-col-index="${drag.colIndex}"]`
+        );
+        if (colEl) colEl.style.width = `${newWidth}px`;
+      }
+    };
+    const onMouseUp = (e) => {
+      const drag = colResizeRef.current;
+      if (!drag) return;
+      const delta = e.clientX - drag.startX;
+      const newWidth = Math.max(40, drag.startWidth + delta);
+      colResizeRef.current = null;
+      setColumnWidth(drag.tablePath, drag.colIndex, newWidth)(engine);
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [engine]);
+  useEffect(() => {
+    const onMouseMove = (e) => {
+      var _a, _b;
+      const drag = cellDragRef.current;
+      if (!drag) return;
+      const td = e.target.closest("[data-cell-row]");
+      if (!td) return;
+      const row = parseInt((_a = td.dataset.cellRow) != null ? _a : "0");
+      const col = parseInt((_b = td.dataset.cellCol) != null ? _b : "0");
+      const tdTablePath = td.dataset.cellTablePath ? JSON.parse(td.dataset.cellTablePath) : null;
+      if (!tdTablePath || JSON.stringify(tdTablePath) !== JSON.stringify(drag.tablePath)) return;
+      setTableSelection({
+        tablePath: drag.tablePath,
+        anchorCell: [drag.startRow, drag.startCol],
+        focusCell: [row, col]
+      });
+    };
+    const onMouseUp = () => {
+      cellDragRef.current = null;
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+  }, []);
+  const handleContextMenu = useCallback(
+    (e) => {
+      var _a, _b, _c, _d, _e, _f;
+      const td = e.target.closest("[data-cell-row]");
+      if (!td) return;
+      e.preventDefault();
+      const row = parseInt((_a = td.dataset.cellRow) != null ? _a : "0");
+      const col = parseInt((_b = td.dataset.cellCol) != null ? _b : "0");
+      const tablePath = td.dataset.cellTablePath ? JSON.parse(td.dataset.cellTablePath) : null;
+      if (!tablePath) return;
+      const cellNode = getNodeAtPath(
+        engine.getState().doc,
+        [...tablePath, row, col]
+      );
+      const isMerged = !!cellNode && (((_d = (_c = cellNode.attrs) == null ? void 0 : _c.colspan) != null ? _d : 1) > 1 || ((_f = (_e = cellNode.attrs) == null ? void 0 : _e.rowspan) != null ? _f : 1) > 1);
+      setTableContextMenu({ x: e.clientX, y: e.clientY, tablePath, row, col, isMerged });
+    },
+    [engine]
+  );
+  const handleMouseDown = useCallback(
+    (e) => {
+      var _a, _b, _c, _d;
+      if (readOnly) return;
+      const target = e.target;
+      if (target.dataset.resizeImagePath) {
+        e.preventDefault();
+        const imagePath = JSON.parse(target.dataset.resizeImagePath);
+        const corner = (_a = target.dataset.resizeImagePos) != null ? _a : "se";
+        const container = containerRef.current;
+        let startWidth = 300;
+        if (container) {
+          const fig2 = container.querySelector(`[data-image-path="${JSON.stringify(imagePath)}"]`);
+          const img = fig2 == null ? void 0 : fig2.querySelector("img");
+          if (img) startWidth = img.getBoundingClientRect().width || 300;
+        }
+        imageResizeRef.current = {
+          imagePath,
+          corner,
+          startX: e.clientX,
+          startY: e.clientY,
+          startWidth,
+          startHeight: 0
+        };
+        return;
+      }
+      const fig = target.closest("[data-image-path]");
+      if (fig == null ? void 0 : fig.dataset.imagePath) {
+        e.preventDefault();
+        setSelectedImagePath(JSON.parse(fig.dataset.imagePath));
+        return;
+      }
+      setSelectedImagePath(null);
+      if (target.dataset.resizeTable) {
+        e.preventDefault();
+        const tablePath = JSON.parse(target.dataset.resizeTable);
+        const colIndex = parseInt((_b = target.dataset.resizeCol) != null ? _b : "0");
+        const container = containerRef.current;
+        let startWidth = 120;
+        if (container) {
+          const colEl = container.querySelector(
+            `col[data-col-index="${colIndex}"]`
+          );
+          if (colEl) startWidth = colEl.getBoundingClientRect().width || 120;
+        }
+        colResizeRef.current = { tablePath, colIndex, startX: e.clientX, startWidth };
+        return;
+      }
+      const td = target.closest("[data-cell-row]");
+      if (!td) setTableSelection(null);
+      if (td && !readOnly) {
+        const row = parseInt((_c = td.dataset.cellRow) != null ? _c : "0");
+        const col = parseInt((_d = td.dataset.cellCol) != null ? _d : "0");
+        const tdTablePath = td.dataset.cellTablePath ? JSON.parse(td.dataset.cellTablePath) : null;
+        if (tdTablePath) {
+          cellDragRef.current = { tablePath: tdTablePath, startRow: row, startCol: col };
+          setTableSelection({
+            tablePath: tdTablePath,
+            anchorCell: [row, col],
+            focusCell: [row, col]
+          });
+        }
+      }
+      const checkTarget = target.dataset.checkPath ? target : target.closest("[data-check-path]");
+      if (checkTarget == null ? void 0 : checkTarget.dataset.checkPath) {
+        e.preventDefault();
+        toggleCheckItemAt(JSON.parse(checkTarget.dataset.checkPath))(engine);
+      }
+    },
+    [engine, readOnly]
+  );
+  const handleClick = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const selection = captureSelection(container);
+    if (!selection) return;
+    const tr = createTransaction();
+    tr.steps.push(
+      tr_setSelection(selection)
+    );
+    engine.dispatch(tr);
+  }, [engine]);
+  const imageResizeRef = useRef(null);
+  useEffect(() => {
+    const onMouseMove = (e) => {
+      const drag = imageResizeRef.current;
+      if (!drag) return;
+      const deltaX = e.clientX - drag.startX;
+      const isRight = drag.corner === "ne" || drag.corner === "se";
+      const newWidth = Math.max(60, drag.startWidth + (isRight ? deltaX : -deltaX));
+      const container = containerRef.current;
+      if (container) {
+        const fig = container.querySelector(
+          `[data-image-path="${JSON.stringify(drag.imagePath)}"]`
+        );
+        const img = fig == null ? void 0 : fig.querySelector("img");
+        if (img) img.style.width = `${newWidth}px`;
+      }
+    };
+    const onMouseUp = (e) => {
+      const drag = imageResizeRef.current;
+      if (!drag) return;
+      const deltaX = e.clientX - drag.startX;
+      const isRight = drag.corner === "ne" || drag.corner === "se";
+      const newWidth = Math.max(60, drag.startWidth + (isRight ? deltaX : -deltaX));
+      imageResizeRef.current = null;
+      setImageAttr(drag.imagePath, { width: newWidth })(engine);
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [engine]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    container.querySelectorAll("[data-image-path]").forEach((el) => {
+      el.removeAttribute("data-selected");
+    });
+    if (selectedImagePath) {
+      const fig = container.querySelector(
+        `[data-image-path="${JSON.stringify(selectedImagePath)}"]`
+      );
+      if (fig) fig.setAttribute("data-selected", "true");
+    }
+  }, [selectedImagePath, state.doc]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || readOnly) return;
+    const onDragOver = (e) => {
+      var _a;
+      if ((_a = e.dataTransfer) == null ? void 0 : _a.types.includes("Files")) e.preventDefault();
+    };
+    const onDrop = (e) => {
+      var _a;
+      e.preventDefault();
+      const file = (_a = e.dataTransfer) == null ? void 0 : _a.files[0];
+      if (!file || !file.type.startsWith("image/")) return;
+      const blobUrl = URL.createObjectURL(file);
+      insertImage(blobUrl, file.name.replace(/\.[^.]+$/, ""))(engine);
+    };
+    container.addEventListener("dragover", onDragOver);
+    container.addEventListener("drop", onDrop);
+    return () => {
+      container.removeEventListener("dragover", onDragOver);
+      container.removeEventListener("drop", onDrop);
+    };
+  }, [engine, readOnly]);
+  const isVisualEmpty = state.doc.children.length === 1 && state.doc.children[0].type === "paragraph" && state.doc.children[0].children.length === 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: editorRootRef,
+      className: `editor-root relative flex flex-col ${className}`,
+      style: editorHeight ? { minHeight: editorHeight } : void 0,
+      children: [
+        !readOnly && !hideToolbar && /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            engine,
+            onFindReplace: (mode) => {
+              setFindReplaceMode(mode);
+              setFindReplaceOpen(true);
+            },
+            linkPopupOpen,
+            onLinkPopupClose: () => setLinkPopupOpen(false),
+            isSourceMode,
+            onToggleSource: handleToggleSource,
+            toolbarConfig
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "relative", children: isSourceMode ? /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            "aria-label": "HTML source editor",
+            value: sourceHTML,
+            onChange: (e) => {
+              setSourceHTML(e.target.value);
+              const t = e.target;
+              t.style.height = "auto";
+              t.style.height = t.scrollHeight + "px";
+            },
+            ref: (el) => {
+              if (el) {
+                el.style.height = "auto";
+                el.style.height = el.scrollHeight + "px";
+              }
+            },
+            spellCheck: false,
+            className: "w-full block px-6 py-4 font-mono text-sm leading-relaxed bg-gray-950 text-green-300 outline-none resize-none border-0 overflow-hidden"
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          isVisualEmpty && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "\r\n                  absolute\r\n                  top-6\r\n                  left-6\r\n                  pointer-events-none\r\n                  select-none\r\n                  text-base\r\n                  text-gray-400\r\n                  \r\n                ",
+              "aria-hidden": "true",
+              children: placeholder
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: containerRef,
+              contentEditable: !readOnly,
+              suppressContentEditableWarning: true,
+              role: "textbox",
+              "aria-multiline": "true",
+              "aria-label": "Rich text editor",
+              spellCheck: true,
+              onMouseDown: handleMouseDown,
+              onContextMenu: handleContextMenu,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onClick: handleClick,
+              onKeyDown: handleKeyDown,
+              className: [
+                "editor-canvas",
+                "min-h-[300px]",
+                "px-6",
+                "py-4",
+                "outline-none",
+                "text-base",
+                "leading-relaxed",
+                "text-gray-900",
+                "",
+                readOnly ? "cursor-default" : "cursor-text"
+              ].join(" ")
+            }
+          ),
+          linkTooltip && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "tooltip",
+              style: { left: linkTooltip.x, top: linkTooltip.y },
+              className: "absolute z-50 pointer-events-none flex items-center gap-1.5 bg-gray-900  text-white text-xs px-2.5 py-1.5 rounded shadow-lg max-w-xs",
+              children: [
+                /* @__PURE__ */ jsxs("svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "none", className: "shrink-0 opacity-70", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ jsx("path", { d: "M6.5 3.5H4A2.5 2.5 0 0 0 4 8.5h2", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
+                  /* @__PURE__ */ jsx("path", { d: "M9.5 3.5H12A2.5 2.5 0 0 1 12 8.5h-2", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
+                  /* @__PURE__ */ jsx("path", { d: "M5.5 6h5", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: linkTooltip.href }),
+                /* @__PURE__ */ jsx("span", { className: "shrink-0 opacity-50 ml-1", children: "Ctrl+click to open" })
+              ]
+            }
+          )
+        ] }) }),
+        inTableCellPos && !readOnly && /* @__PURE__ */ jsx(
+          TableToolbar,
+          {
+            engine,
+            tablePath: inTableCellPos.tablePath,
+            cellPos: { row: inTableCellPos.row, col: inTableCellPos.col },
+            tableSelection,
+            editorContainer: containerRef
+          }
+        ),
+        tableContextMenu && /* @__PURE__ */ jsx(
+          TableContextMenu,
+          {
+            x: tableContextMenu.x,
+            y: tableContextMenu.y,
+            tablePath: tableContextMenu.tablePath,
+            row: tableContextMenu.row,
+            col: tableContextMenu.col,
+            isMerged: tableContextMenu.isMerged,
+            tableSelection,
+            engine,
+            onClose: () => setTableContextMenu(null)
+          }
+        ),
+        findReplaceOpen && /* @__PURE__ */ jsx(
+          FindReplaceModal,
+          {
+            engine,
+            editorContainer: containerRef,
+            initialMode: findReplaceMode,
+            onClose: () => setFindReplaceOpen(false)
+          }
+        ),
+        selectedImagePath && !readOnly && /* @__PURE__ */ jsx(
+          ImageToolbar,
+          {
+            engine,
+            imagePath: selectedImagePath,
+            editorContainer: containerRef,
+            onClose: () => setSelectedImagePath(null)
+          }
+        ),
+        !readOnly && /* @__PURE__ */ jsx(
+          "div",
+          {
+            title: "Drag to resize",
+            onMouseDown: (e) => {
+              e.preventDefault();
+              const rootEl = editorRootRef.current;
+              if (!rootEl) return;
+              resizeDragRef.current = {
+                startY: e.clientY,
+                startHeight: rootEl.getBoundingClientRect().height
+              };
+            },
+            className: "absolute bottom-0 right-0 w-4 h-4 cursor-s-resize flex items-end justify-end pr-0.5 pb-0.5 select-none",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M7 1L1 7M7 4L4 7M7 7L7 7", stroke: "#9ca3af", strokeWidth: "1.2", strokeLinecap: "round" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+var BLOCK_TAGS2 = "p|h[1-6]|ul|ol|li|blockquote|pre|figure|table|thead|tbody|tr|th|td";
+var _OPEN_ONLY_RE2 = new RegExp(`^<(${BLOCK_TAGS2})(?:\\s[^>]*)?>$`, "i");
+var _CLOSE_ONLY_RE2 = new RegExp(`^<\\/(${BLOCK_TAGS2})>$`, "i");
+var _HR_RE2 = /^<hr(\s[^>]*)?\/?>$/i;
+function leafTextNode2(el, end) {
+  let node = el;
+  while (node.hasChildNodes()) {
+    node = end === "first" ? node.firstChild : node.lastChild;
+  }
+  return node.nodeType === Node.TEXT_NODE ? node : null;
+}
+function prettyPrintHTML2(html) {
+  const blockOpen = new RegExp(`(<(?:${BLOCK_TAGS2})(?:\\s[^>]*)?>)`, "gi");
+  const blockClose = new RegExp(`(<\\/(?:${BLOCK_TAGS2})>)`, "gi");
+  const spread = html.replace(blockOpen, "\n$1").replace(blockClose, "$1\n").replace(/<hr(\s[^>]*)?\/?>(\s*)/gi, "\n<hr />\n");
+  let depth = 0;
+  const result = [];
+  for (const raw of spread.split("\n")) {
+    const line = raw.trim();
+    if (!line) continue;
+    if (_HR_RE2.test(line)) {
+      result.push("  ".repeat(depth) + line);
+      continue;
+    }
+    if (_CLOSE_ONLY_RE2.test(line)) {
+      depth = Math.max(0, depth - 1);
+      result.push("  ".repeat(depth) + line);
+      continue;
+    }
+    if (_OPEN_ONLY_RE2.test(line)) {
+      result.push("  ".repeat(depth) + line);
+      depth++;
+      continue;
+    }
+    result.push("  ".repeat(depth) + line);
+  }
+  return result.join("\n");
+}
+
+// src/editor/table/TablePlugin.ts
+function getCellDOMElement(cellPathJson) {
+  return document.querySelector(`[data-block-path='${cellPathJson}']`);
+}
+function isCaretAtContainerStart(container) {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return false;
+  const range = sel.getRangeAt(0);
+  if (range.startOffset !== 0) return false;
+  let node = range.startContainer;
+  while (node && node !== container) {
+    if (node.previousSibling) return false;
+    node = node.parentNode;
+  }
+  return node === container;
+}
+function isCaretAtContainerEnd(container) {
+  var _a, _b;
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return false;
+  const range = sel.getRangeAt(0);
+  const endNode = range.endContainer;
+  const endOffset = range.endOffset;
+  const len = endNode.nodeType === Node.TEXT_NODE ? (_b = (_a = endNode.textContent) == null ? void 0 : _a.length) != null ? _b : 0 : endNode.childNodes.length;
+  if (endOffset !== len) return false;
+  let node = endNode;
+  while (node && node !== container) {
+    if (node.nextSibling) return false;
+    node = node.parentNode;
+  }
+  return node === container;
+}
+function isCaretOnEdgeLine(container, direction) {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return false;
+  const caretRange = sel.getRangeAt(0).cloneRange();
+  caretRange.collapse(true);
+  const caretRects = caretRange.getClientRects();
+  if (!caretRects.length) return true;
+  const caretRect = caretRects[0];
+  const containerRect = container.getBoundingClientRect();
+  const lineHeight = parseFloat(getComputedStyle(container).lineHeight) || 20;
+  if (direction === "up") {
+    return caretRect.top < containerRect.top + lineHeight;
+  } else {
+    return caretRect.bottom > containerRect.bottom - lineHeight;
+  }
+}
+var TablePlugin = {
+  name: "table",
+  keyBindings: {
+    Tab: (engine) => {
+      var _a;
+      const state = engine.getState();
+      const sel = state.selection;
+      if (!sel) return false;
+      const cellPos = findCellPosition(state.doc, sel.anchor.path);
+      if (!cellPos) return false;
+      const { tablePath, row, col } = cellPos;
+      const table = getNodeAtPath(state.doc, tablePath);
+      const { rows, cols } = getTableDimensions(table);
+      let nextRow = row;
+      let nextCol = col + 1;
+      while (nextRow < rows) {
+        if (nextCol >= cols) {
+          nextCol = 0;
+          nextRow++;
+          continue;
+        }
+        const c = getNodeAtPath(state.doc, [...tablePath, nextRow, nextCol]);
+        if (!((_a = c == null ? void 0 : c.attrs) == null ? void 0 : _a.covered)) break;
+        nextCol++;
+      }
+      if (nextRow >= rows) {
+        const newTable = insertTableRowAfter(table, rows - 1);
+        const newChildren = [...state.doc.children];
+        newChildren[tablePath[0]] = newTable;
+        const tempDoc = { type: "doc", children: newChildren };
+        const tr2 = createTransaction();
+        tr2.steps.push({ type: "delete_node", path: tablePath });
+        tr2.steps.push({
+          type: "insert_node",
+          parentPath: tablePath.length > 1 ? tablePath.slice(0, -1) : [],
+          index: tablePath[tablePath.length - 1],
+          node: newTable
+        });
+        const pos2 = getCellFirstPosition(tempDoc, tablePath, rows, 0);
+        if (pos2) tr2.steps.push(tr_setSelection(makeCollapsedSelection(pos2)));
+        engine.dispatch(tr2);
+        return true;
+      }
+      const pos = getCellFirstPosition(state.doc, tablePath, nextRow, nextCol);
+      if (!pos) return false;
+      const tr = createTransaction();
+      tr.steps.push(tr_setSelection(makeCollapsedSelection(pos)));
+      engine.dispatch(tr);
+      return true;
+    },
+    "ArrowRight": (engine) => {
+      var _a;
+      const state = engine.getState();
+      const sel = state.selection;
+      if (!sel) return false;
+      const cellPos = findCellPosition(state.doc, sel.anchor.path);
+      if (!cellPos) return false;
+      const { tablePath, row, col } = cellPos;
+      const cellPath = [...tablePath, row, col];
+      const cellEl = getCellDOMElement(JSON.stringify(cellPath));
+      if (!cellEl || !isCaretAtContainerEnd(cellEl)) return false;
+      const table = getNodeAtPath(state.doc, tablePath);
+      const { rows, cols } = getTableDimensions(table);
+      let nextRow = row;
+      let nextCol = col + 1;
+      while (nextRow < rows) {
+        if (nextCol >= cols) {
+          nextCol = 0;
+          nextRow++;
+          continue;
+        }
+        const c = getNodeAtPath(state.doc, [...tablePath, nextRow, nextCol]);
+        if (!((_a = c == null ? void 0 : c.attrs) == null ? void 0 : _a.covered)) break;
+        nextCol++;
+      }
+      if (nextRow >= rows) return true;
+      const pos = getCellFirstPosition(state.doc, tablePath, nextRow, nextCol);
+      if (!pos) return false;
+      const tr = createTransaction();
+      tr.steps.push(tr_setSelection(makeCollapsedSelection(pos)));
+      engine.dispatch(tr);
+      return true;
+    },
+    "ArrowLeft": (engine) => {
+      var _a;
+      const state = engine.getState();
+      const sel = state.selection;
+      if (!sel) return false;
+      const cellPos = findCellPosition(state.doc, sel.anchor.path);
+      if (!cellPos) return false;
+      const { tablePath, row, col } = cellPos;
+      const cellPath = [...tablePath, row, col];
+      const cellEl = getCellDOMElement(JSON.stringify(cellPath));
+      if (!cellEl || !isCaretAtContainerStart(cellEl)) return false;
+      const table = getNodeAtPath(state.doc, tablePath);
+      const { cols } = getTableDimensions(table);
+      let prevRow = row;
+      let prevCol = col - 1;
+      while (prevRow >= 0) {
+        if (prevCol < 0) {
+          prevCol = cols - 1;
+          prevRow--;
+          continue;
+        }
+        const c = getNodeAtPath(state.doc, [...tablePath, prevRow, prevCol]);
+        if (!((_a = c == null ? void 0 : c.attrs) == null ? void 0 : _a.covered)) break;
+        prevCol--;
+      }
+      if (prevRow < 0) return true;
+      const pos = getCellLastPosition(state.doc, tablePath, prevRow, prevCol);
+      if (!pos) return false;
+      const tr = createTransaction();
+      tr.steps.push(tr_setSelection(makeCollapsedSelection(pos)));
       engine.dispatch(tr);
       return true;
     },
@@ -9146,151 +10006,6 @@ function execCommand(engine, command, ...args) {
 function registerCommand(name, fn) {
   REGISTRY[name] = fn;
 }
-var Editor = forwardRef(function Editor2(props, ref) {
-  var _a;
-  const {
-    value,
-    defaultValue,
-    onChange,
-    placeholder,
-    readOnly = false,
-    toolbar = DEFAULT_TOOLBAR,
-    theme = "light",
-    plugins,
-    onFocus,
-    onBlur,
-    onReady,
-    onUploadImage,
-    className,
-    style,
-    minHeight,
-    maxHeight
-  } = props;
-  const engine = useEditorEngine();
-  const pluginsRegisteredRef = useRef(false);
-  if (!pluginsRegisteredRef.current && (plugins == null ? void 0 : plugins.length)) {
-    pluginsRegisteredRef.current = true;
-    for (const p of plugins) {
-      engine.registerPlugin(p);
-    }
-  }
-  const initializedRef = useRef(false);
-  useEffect(() => {
-    if (initializedRef.current) return;
-    initializedRef.current = true;
-    const initHTML = value != null ? value : defaultValue;
-    if (!initHTML) return;
-    const doc = htmlSerializer.deserialize(initHTML);
-    const tr = createTransaction();
-    tr.steps.push(tr_replaceDoc(doc));
-    engine.dispatch(tr);
-  }, []);
-  const lastEmittedRef = useRef("");
-  useEffect(() => {
-    if (value === void 0) return;
-    if (value === lastEmittedRef.current) return;
-    const currentHTML = htmlSerializer.serialize(engine.getState().doc);
-    if (value === currentHTML) return;
-    const doc = htmlSerializer.deserialize(value);
-    const tr = createTransaction();
-    tr.steps.push(tr_replaceDoc(doc));
-    engine.dispatch(tr);
-  }, [value, engine]);
-  const handleHTMLChange = useCallback((html) => {
-    lastEmittedRef.current = html;
-    onChange == null ? void 0 : onChange(html);
-  }, [onChange]);
-  const rootRef = useRef(null);
-  const api = useMemo(() => ({
-    getHTML: () => htmlSerializer.serialize(engine.getState().doc),
-    setHTML: (html) => {
-      const doc = htmlSerializer.deserialize(html);
-      const tr = createTransaction();
-      tr.steps.push(tr_replaceDoc(doc));
-      engine.dispatch(tr);
-    },
-    getJSON: () => engine.getState().doc,
-    getMarkdown: () => markdownSerializer.serialize(engine.getState().doc),
-    focus: () => {
-      var _a2;
-      const ce = (_a2 = rootRef.current) == null ? void 0 : _a2.querySelector("[contenteditable]");
-      ce == null ? void 0 : ce.focus();
-    },
-    blur: () => {
-      var _a2;
-      const ce = (_a2 = rootRef.current) == null ? void 0 : _a2.querySelector("[contenteditable]");
-      ce == null ? void 0 : ce.blur();
-    },
-    clear: () => {
-      const tr = createTransaction();
-      tr.steps.push(tr_replaceDoc(createEmptyDocument()));
-      engine.dispatch(tr);
-    },
-    undo: () => {
-      engine.handleKeyDown(
-        new KeyboardEvent("keydown", { key: "z", ctrlKey: true, bubbles: true })
-      );
-    },
-    redo: () => {
-      engine.handleKeyDown(
-        new KeyboardEvent("keydown", { key: "y", ctrlKey: true, bubbles: true })
-      );
-    },
-    execCommand: (command, ...args) => {
-      return execCommand(engine, command, ...args);
-    },
-    registerCommand: (name, fn) => {
-      registerCommand(name, fn);
-    },
-    getEngine: () => engine
-  }), [engine]);
-  useImperativeHandle(ref, () => api, [api]);
-  useEffect(() => {
-    onReady == null ? void 0 : onReady(api);
-  }, []);
-  const themeMode = typeof theme === "string" ? theme : (_a = theme.mode) != null ? _a : "light";
-  const themeTokenOverrides = typeof theme === "object" && theme.tokens ? theme.tokens : void 0;
-  const rootStyle = useMemo(() => {
-    const base = { ...style };
-    if (minHeight !== void 0)
-      base.minHeight = typeof minHeight === "number" ? `${minHeight}px` : minHeight;
-    if (maxHeight !== void 0) {
-      base.maxHeight = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
-      base.overflow = "auto";
-    }
-    if (themeTokenOverrides) {
-      for (const [key, val] of Object.entries(themeTokenOverrides)) {
-        const cssVar = `--editor-${key.replace(/([A-Z])/g, (m) => `-${m.toLowerCase()}`)}`;
-        base[cssVar] = val;
-      }
-    }
-    return base;
-  }, [style, minHeight, maxHeight, themeTokenOverrides]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: rootRef,
-      "data-editor-theme": themeMode,
-      "data-traffica-editor": "",
-      className,
-      style: rootStyle,
-      children: /* @__PURE__ */ jsx(
-        EditorCore,
-        {
-          engine,
-          placeholder,
-          readOnly,
-          hideToolbar: toolbar === false,
-          toolbarConfig: toolbar !== false ? toolbar : void 0,
-          onHTMLChange: handleHTMLChange,
-          onFocus,
-          onBlur,
-          onUploadImage
-        }
-      )
-    }
-  );
-});
 
 export { BASIC_TOOLBAR, DEFAULT_TOOLBAR, Editor, EditorCore, EditorEngine, MINIMAL_TOOLBAR, TablePlugin, Toolbar, addColumnLeft, addColumnRight, addMarkToNode, addRowAbove, addRowBelow, applyMarkToRange, applySearchHighlights, applyTransaction, attachClipboardHandlers, attachPasteHandler, captureSelection, clearSearchHighlights, collectText, comparePaths, comparePositions, createEmptyDocument, createHistoryManager, createHistoryPlugin, createParagraph, createPastePlugin, createTableCell, createTableNode, createTransaction, deleteColumn, deleteImageAtPath, deleteRange, deleteRow, deleteTable, deleteTableColumn, deleteTableRow, deleteTextAtPath, execCommand, findCellPosition, findContentBlockPath, findMatches, findTablePath, getActiveAlignment, getActiveBlockType, getActiveFontFamily, getActiveFontSize, getActiveHighlightColor, getActiveLinkHref, getActiveLinkRange, getActiveMarks, getActiveTextColor, getCellFirstPosition, getCellLastPosition, getDocumentLength, getDocumentMarkAttrValues, getNodeAtPath, getTableDimensions, getTextNodesBetween, htmlSerializer, insertImage, insertLink, insertTable, insertTableColumnAfter, insertTableColumnBefore, insertTableRowAfter, insertTableRowBefore, insertText, insertTextAtPath, isBlockNode, isContainerBlock, isSelectionInContainer, isTextNode, joinBlocks, jsonSerializer, makeCollapsedSelection, makePosition, markdownSerializer, marksEqual, mergeAdjacentTextNodesInDoc, mergeCells, mergeTableCells, normalizeRange, redo, registerCommand, removeMarkFromNode, removeMarkFromRange, renderDocument, replaceAllMatches, replaceMatch, restoreSelection, scrollMatchIntoView, setAlignment, setBlockType2 as setBlockType, setCodeBlockLanguage, setColumnWidth, setFontFamily, setFontSize, setHighlightColor, setImageAttr, setMarkOnRange, setTextColor, splitBlock, splitCell, splitTableCell, toggleCheckItemAt, toggleHeaderRow, toggleMark, undo, updateColumnWidth, useEditorEngine, useEditorState, walkDocument };
 //# sourceMappingURL=index.mjs.map