@trafica/editor 1.0.36 → 1.0.38

package/dist/index.js

@@ -7833,848 +7833,6 @@ var jsonSerializer = {
     }
   }
 };
-function Editor({
-  engine,
-  placeholder = "Start writing...",
-  className = "",
-  readOnly = false,
-  onHTMLChange,
-  onJSONChange,
-  onOpenLinkPopup,
-  onUploadImage: _onUploadImage
-}) {
-  const containerRef = react.useRef(null);
-  const isRenderingRef = react.useRef(false);
-  const scrollCaretIntoView = react.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 = react.useRef(false);
-  const stateRef = react.useRef(engine.getState());
-  const [selectedImagePath, setSelectedImagePath] = react.useState(null);
-  const [findReplaceOpen, setFindReplaceOpen] = react.useState(false);
-  const [findReplaceMode, setFindReplaceMode] = react.useState("find");
-  const [linkPopupOpen, setLinkPopupOpen] = react.useState(false);
-  const [isSourceMode, setIsSourceMode] = react.useState(false);
-  const [sourceHTML, setSourceHTML] = react.useState("");
-  const [editorHeight, setEditorHeight] = react.useState(null);
-  const editorRootRef = react.useRef(null);
-  const resizeDragRef = react.useRef(null);
-  const [linkTooltip, setLinkTooltip] = react.useState(null);
-  const linkTooltipTimerRef = react.useRef(null);
-  const handleToggleSource = react.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]);
-  react.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] = react.useState(null);
-  const [tableSelection, setTableSelection] = react.useState(null);
-  const cellDragRef = react.useRef(null);
-  const colResizeRef = react.useRef(null);
-  const state = useEditorState(engine);
-  const inTableCellPos = state.selection ? findCellPosition(state.doc, state.selection.anchor.path) : null;
-  react.useLayoutEffect(() => {
-    stateRef.current = state;
-  }, [state]);
-  react.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]);
-  react.useLayoutEffect(() => {
-    const container = containerRef.current;
-    if (!container || !state.selection) return;
-    restoreSelection(container, state.selection);
-    scrollCaretIntoView();
-  }, [state.selection]);
-  react.useEffect(() => {
-    const container = containerRef.current;
-    if (!container || readOnly) return;
-    return attachClipboardHandlers(container, engine);
-  }, [engine, readOnly]);
-  react.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]);
-  react.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]);
-  react.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 = react.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 = react.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]
-  );
-  react.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]);
-  react.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]);
-  react.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);
-    };
-  }, []);
-  react.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]);
-  react.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 = react.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 = react.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 = react.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 = react.useRef(null);
-  react.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]);
-  react.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]);
-  react.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__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: editorRootRef,
-      className: `editor-root relative flex flex-col ${className}`,
-      style: editorHeight ? { minHeight: editorHeight } : void 0,
-      children: [
-        !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
-          Toolbar,
-          {
-            engine,
-            onFindReplace: (mode) => {
-              setFindReplaceMode(mode);
-              setFindReplaceOpen(true);
-            },
-            linkPopupOpen,
-            onLinkPopupClose: () => setLinkPopupOpen(false),
-            isSourceMode,
-            onToggleSource: handleToggleSource
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: isSourceMode ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          isVisualEmpty && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "none", className: "shrink-0 opacity-70", "aria-hidden": "true", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.5 3.5H4A2.5 2.5 0 0 0 4 8.5h2", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
-                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M5.5 6h5", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: linkTooltip.href }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 opacity-50 ml-1", children: "Ctrl+click to open" })
-              ]
-            }
-          )
-        ] }) }),
-        inTableCellPos && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
-          TableToolbar,
-          {
-            engine,
-            tablePath: inTableCellPos.tablePath,
-            cellPos: { row: inTableCellPos.row, col: inTableCellPos.col },
-            tableSelection,
-            editorContainer: containerRef
-          }
-        ),
-        tableContextMenu && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          FindReplaceModal,
-          {
-            engine,
-            editorContainer: containerRef,
-            initialMode: findReplaceMode,
-            onClose: () => setFindReplaceOpen(false)
-          }
-        ),
-        selectedImagePath && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
-          ImageToolbar,
-          {
-            engine,
-            imagePath: selectedImagePath,
-            editorContainer: containerRef,
-            onClose: () => setSelectedImagePath(null)
-          }
-        ),
-        !readOnly && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", children: /* @__PURE__ */ jsxRuntime.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...",
@@ -8744,7 +7902,7 @@ function EditorCore({
   const handleToggleSource = react.useCallback(() => {
     if (!isSourceMode) {
       const html = htmlSerializer.serialize(engine.getState().doc);
-      setSourceHTML(prettyPrintHTML2(html));
+      setSourceHTML(prettyPrintHTML(html));
       setIsSourceMode(true);
     } else {
       const newDoc = htmlSerializer.deserialize(sourceHTML);
@@ -8932,8 +8090,8 @@ function EditorCore({
           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.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);
@@ -9489,36 +8647,36 @@ function EditorCore({
     }
   );
 }
-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) {
+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 prettyPrintHTML2(html) {
-  const blockOpen = new RegExp(`(<(?:${BLOCK_TAGS2})(?:\\s[^>]*)?>)`, "gi");
-  const blockClose = new RegExp(`(<\\/(?:${BLOCK_TAGS2})>)`, "gi");
+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_RE2.test(line)) {
+    if (_HR_RE.test(line)) {
       result.push("  ".repeat(depth) + line);
       continue;
     }
-    if (_CLOSE_ONLY_RE2.test(line)) {
+    if (_CLOSE_ONLY_RE.test(line)) {
       depth = Math.max(0, depth - 1);
       result.push("  ".repeat(depth) + line);
       continue;
     }
-    if (_OPEN_ONLY_RE2.test(line)) {
+    if (_OPEN_ONLY_RE.test(line)) {
       result.push("  ".repeat(depth) + line);
       depth++;
       continue;
@@ -9990,6 +9148,117 @@ function execCommand(engine, command, ...args) {
 function registerCommand(name, fn) {
   REGISTRY[name] = fn;
 }
+var Editor = react.forwardRef(function Editor2({
+  value,
+  onChange,
+  defaultValue,
+  toolbar,
+  theme: _theme,
+  placeholder = "Start writing...",
+  className = "",
+  style,
+  minHeight,
+  maxHeight,
+  readOnly = false,
+  plugins,
+  onFocus,
+  onBlur,
+  onReady,
+  onUploadImage
+}, ref) {
+  const engine = useEditorEngine();
+  const pluginsRegisteredRef = react.useRef(false);
+  if (!pluginsRegisteredRef.current && (plugins == null ? void 0 : plugins.length)) {
+    pluginsRegisteredRef.current = true;
+    for (const plugin of plugins) {
+      engine.registerPlugin(plugin);
+    }
+  }
+  const defaultLoadedRef = react.useRef(false);
+  react.useEffect(() => {
+    if (defaultLoadedRef.current) return;
+    defaultLoadedRef.current = true;
+    if (defaultValue) {
+      const doc = htmlSerializer.deserialize(defaultValue);
+      const tr = createTransaction();
+      tr.steps.push(tr_replaceDoc(doc));
+      engine.dispatch(tr);
+    }
+  }, []);
+  const lastExternalValueRef = react.useRef(void 0);
+  react.useEffect(() => {
+    if (value === void 0) return;
+    if (value === lastExternalValueRef.current) return;
+    lastExternalValueRef.current = value;
+    const doc = htmlSerializer.deserialize(value);
+    const tr = createTransaction();
+    tr.steps.push(tr_replaceDoc(doc));
+    engine.dispatch(tr);
+  }, [value, engine]);
+  const api = {
+    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: () => {
+      const el = document.querySelector('[role="textbox"]');
+      el == null ? void 0 : el.focus();
+    },
+    blur: () => {
+      const el = document.querySelector('[role="textbox"]');
+      el == null ? void 0 : el.blur();
+    },
+    clear: () => {
+      const doc = htmlSerializer.deserialize("");
+      const tr = createTransaction();
+      tr.steps.push(tr_replaceDoc(doc));
+      engine.dispatch(tr);
+    },
+    undo: () => undo(engine),
+    redo: () => redo(engine),
+    execCommand: (command, ...args) => execCommand(engine, command, ...args),
+    registerCommand: (name, fn) => registerCommand(name, fn),
+    getEngine: () => engine
+  };
+  react.useImperativeHandle(ref, () => api);
+  react.useEffect(() => {
+    onReady == null ? void 0 : onReady(api);
+  }, []);
+  const containerStyle = { ...style };
+  if (minHeight !== void 0) {
+    containerStyle.minHeight = typeof minHeight === "number" ? `${minHeight}px` : minHeight;
+  }
+  if (maxHeight !== void 0) {
+    containerStyle.maxHeight = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+    containerStyle.overflow = "auto";
+  }
+  const hideToolbar = toolbar === false;
+  const toolbarConfig = toolbar === false || toolbar === void 0 ? void 0 : Array.isArray(toolbar) ? toolbar : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+    EditorCore,
+    {
+      engine,
+      placeholder,
+      className,
+      readOnly,
+      onHTMLChange: (html) => {
+        lastExternalValueRef.current = html;
+        onChange == null ? void 0 : onChange(html);
+      },
+      onFocus,
+      onBlur,
+      hideToolbar,
+      toolbarConfig,
+      onUploadImage
+    }
+  ) });
+});
+Editor.displayName = "Editor";
 
 exports.BASIC_TOOLBAR = BASIC_TOOLBAR;
 exports.DEFAULT_TOOLBAR = DEFAULT_TOOLBAR;