@trafica/editor 1.0.32 → 1.0.33

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
@@ -7831,6 +7831,857 @@ var jsonSerializer = {
     }
   }
 };
+function Editor({
+  engine,
+  placeholder = "Start writing...",
+  className = "",
+  readOnly = false,
+  onHTMLChange,
+  onJSONChange,
+  onOpenLinkPopup,
+  onUploadImage: _onUploadImage
+}) {
+  const containerRef = useRef(null);
+  const isRenderingRef = useRef(false);
+  const skipRestoreSelectionRef = 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" });
+      }
+    } 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" });
+      }
+    }
+  }, []);
+  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(prettyPrintHTML(html));
+      setIsSourceMode(true);
+    } else {
+      const newDoc = htmlSerializer.deserialize(sourceHTML);
+      const tr = createTransaction();
+      tr.steps.push(tr_replaceDoc(newDoc));
+      engine.dispatch(tr);
+      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;
+    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;
+    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;
+      }
+      skipRestoreSelectionRef.current = true;
+      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);
+    }
+  }, [engine]);
+  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 = leafTextNode(first, "first")) != null ? _a : first, 0);
+            const lastLeaf = leafTextNode(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;
+    skipRestoreSelectionRef.current = true;
+    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 && /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            engine,
+            onFindReplace: (mode) => {
+              setFindReplaceMode(mode);
+              setFindReplaceOpen(true);
+            },
+            linkPopupOpen,
+            onLinkPopupClose: () => setLinkPopupOpen(false),
+            isSourceMode,
+            onToggleSource: handleToggleSource
+          }
+        ),
+        /* @__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                  dark:text-gray-500\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,
+              onClick: handleClick,
+              onKeyDown: handleKeyDown,
+              className: [
+                "editor-canvas",
+                "min-h-[300px]",
+                "px-6",
+                "py-4",
+                "outline-none",
+                "text-base",
+                "leading-relaxed",
+                "text-gray-900",
+                "dark:text-gray-100",
+                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 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" }),
+                  /* @__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_TAGS = "p|h[1-6]|ul|ol|li|blockquote|pre|figure|table|thead|tbody|tr|th|td";
+var _OPEN_ONLY_RE = new RegExp(`^<(${BLOCK_TAGS})(?:\\s[^>]*)?>$`, "i");
+var _CLOSE_ONLY_RE = new RegExp(`^<\\/(${BLOCK_TAGS})>$`, "i");
+var _HR_RE = /^<hr(\s[^>]*)?\/?>$/i;
+function leafTextNode(el, end) {
+  let node = el;
+  while (node.hasChildNodes()) {
+    node = end === "first" ? node.firstChild : node.lastChild;
+  }
+  return node.nodeType === Node.TEXT_NODE ? node : null;
+}
+function prettyPrintHTML(html) {
+  const blockOpen = new RegExp(`(<(?:${BLOCK_TAGS})(?:\\s[^>]*)?>)`, "gi");
+  const blockClose = new RegExp(`(<\\/(?:${BLOCK_TAGS})>)`, "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_RE.test(line)) {
+      result.push("  ".repeat(depth) + line);
+      continue;
+    }
+    if (_CLOSE_ONLY_RE.test(line)) {
+      depth = Math.max(0, depth - 1);
+      result.push("  ".repeat(depth) + line);
+      continue;
+    }
+    if (_OPEN_ONLY_RE.test(line)) {
+      result.push("  ".repeat(depth) + line);
+      depth++;
+      continue;
+    }
+    result.push("  ".repeat(depth) + line);
+  }
+  return result.join("\n");
+}
 function EditorCore({
   engine,
   placeholder = "Start writing...",
@@ -7900,7 +8751,7 @@ function EditorCore({
   const handleToggleSource = useCallback(() => {
     if (!isSourceMode) {
       const html = htmlSerializer.serialize(engine.getState().doc);
-      setSourceHTML(prettyPrintHTML(html));
+      setSourceHTML(prettyPrintHTML2(html));
       setIsSourceMode(true);
     } else {
       const newDoc = htmlSerializer.deserialize(sourceHTML);
@@ -8088,8 +8939,8 @@ function EditorCore({
           if (first && last) {
             const sel = window.getSelection();
             const range = document.createRange();
-            range.setStart((_a = leafTextNode(first, "first")) != null ? _a : first, 0);
-            const lastLeaf = leafTextNode(last, "last");
+            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);
@@ -8645,36 +9496,36 @@ function EditorCore({
     }
   );
 }
-var BLOCK_TAGS = "p|h[1-6]|ul|ol|li|blockquote|pre|figure|table|thead|tbody|tr|th|td";
-var _OPEN_ONLY_RE = new RegExp(`^<(${BLOCK_TAGS})(?:\\s[^>]*)?>$`, "i");
-var _CLOSE_ONLY_RE = new RegExp(`^<\\/(${BLOCK_TAGS})>$`, "i");
-var _HR_RE = /^<hr(\s[^>]*)?\/?>$/i;
-function leafTextNode(el, end) {
+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 prettyPrintHTML(html) {
-  const blockOpen = new RegExp(`(<(?:${BLOCK_TAGS})(?:\\s[^>]*)?>)`, "gi");
-  const blockClose = new RegExp(`(<\\/(?:${BLOCK_TAGS})>)`, "gi");
+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_RE.test(line)) {
+    if (_HR_RE2.test(line)) {
       result.push("  ".repeat(depth) + line);
       continue;
     }
-    if (_CLOSE_ONLY_RE.test(line)) {
+    if (_CLOSE_ONLY_RE2.test(line)) {
       depth = Math.max(0, depth - 1);
       result.push("  ".repeat(depth) + line);
       continue;
     }
-    if (_OPEN_ONLY_RE.test(line)) {
+    if (_OPEN_ONLY_RE2.test(line)) {
       result.push("  ".repeat(depth) + line);
       depth++;
       continue;
@@ -9146,151 +9997,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