@underverse-ui/underverse 1.0.102 → 1.0.104

package/dist/index.js

@@ -23109,7 +23109,7 @@ function useLocale2() {
 }
 
 // src/components/UEditor/UEditor.tsx
-import React75, { useEffect as useEffect36, useImperativeHandle as useImperativeHandle3, useMemo as useMemo24, useRef as useRef32 } from "react";
+import React76, { useEffect as useEffect36, useImperativeHandle as useImperativeHandle3, useMemo as useMemo24, useRef as useRef33 } from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 
 // src/components/UEditor/extensions.ts
@@ -31962,47 +31962,210 @@ var UEDITOR_PROSEMIRROR_CLASS_NAME = cn(
 );
 
 // src/components/UEditor/use-table-interactions.ts
-import React74, { useEffect as useEffect35, useRef as useRef31 } from "react";
+import React75, { useEffect as useEffect35, useRef as useRef32 } from "react";
+
+// src/components/UEditor/use-table-row-resize.ts
+import React74, { useRef as useRef31 } from "react";
+function useTableRowResize({
+  editor,
+  setHoveredTableCell,
+  clearHoveredTableCell,
+  showRowGuide,
+  clearAllTableResizeHover,
+  scheduleTableLayoutSync
+}) {
+  const commitFrameRef = useRef31(null);
+  const stateRef = useRef31(null);
+  const commitPreview = React74.useCallback(() => {
+    if (!editor) return;
+    const state = stateRef.current;
+    if (!state) return;
+    const nextHeight = state.pendingHeight;
+    if (nextHeight === state.previewHeight) {
+      document.body.style.cursor = "row-resize";
+      showRowGuide(state.tableElement, state.rowElement, state.cellElement);
+      scheduleTableLayoutSync();
+      return;
+    }
+    state.previewHeight = nextHeight;
+    const tr = editor.view.state.tr;
+    tr.setNodeMarkup(state.rowPos, void 0, {
+      ...state.rowNode.attrs,
+      rowHeight: nextHeight
+    });
+    tr.setMeta("addToHistory", false);
+    editor.view.dispatch(tr);
+    state.rowNode = editor.view.state.doc.nodeAt(state.rowPos) ?? state.rowNode;
+    const refreshedRow = state.tableElement.rows.item(state.rowElement.rowIndex);
+    if (refreshedRow instanceof HTMLTableRowElement) {
+      state.rowElement = refreshedRow;
+      const refreshedCell = refreshedRow.cells.item(state.cellIndex);
+      if (refreshedCell instanceof HTMLTableCellElement) {
+        state.cellElement = refreshedCell;
+      }
+    }
+    document.body.style.cursor = "row-resize";
+    showRowGuide(state.tableElement, state.rowElement, state.cellElement);
+    scheduleTableLayoutSync();
+  }, [editor, scheduleTableLayoutSync, showRowGuide]);
+  const scheduleCommit = React74.useCallback(() => {
+    if (commitFrameRef.current !== null) return;
+    commitFrameRef.current = window.requestAnimationFrame(() => {
+      commitFrameRef.current = null;
+      commitPreview();
+    });
+  }, [commitPreview]);
+  const syncActiveGuide = React74.useCallback(() => {
+    const state = stateRef.current;
+    if (!state) return false;
+    setHoveredTableCell(state.cellElement);
+    showRowGuide(state.tableElement, state.rowElement, state.cellElement);
+    return true;
+  }, [setHoveredTableCell, showRowGuide]);
+  const isResizing = React74.useCallback(() => stateRef.current !== null, []);
+  const beginResize = React74.useCallback((event, table, row, cell) => {
+    if (!editor || !isRowResizeHotspot(cell, event.clientX, event.clientY)) {
+      return false;
+    }
+    setHoveredTableCell(cell);
+    const rowInfo = findTableRowNodeInfo(editor.view, row);
+    if (!rowInfo) return false;
+    const startHeight = row.getBoundingClientRect().height;
+    stateRef.current = {
+      rowElement: row,
+      tableElement: table,
+      cellElement: cell,
+      cellIndex: cell.cellIndex,
+      rowPos: rowInfo.pos,
+      rowNode: rowInfo.node,
+      startY: event.clientY,
+      startHeight,
+      previewHeight: startHeight,
+      pendingHeight: startHeight
+    };
+    showRowGuide(table, row, cell);
+    document.body.style.cursor = "row-resize";
+    event.preventDefault();
+    event.stopPropagation();
+    return true;
+  }, [editor, setHoveredTableCell, showRowGuide]);
+  const handlePointerMove = React74.useCallback((event) => {
+    const state = stateRef.current;
+    if (!state) return;
+    const nextHeight = Math.max(
+      MIN_TABLE_ROW_HEIGHT,
+      Math.round(state.startHeight + (event.clientY - state.startY))
+    );
+    if (nextHeight === state.pendingHeight) {
+      document.body.style.cursor = "row-resize";
+      showRowGuide(state.tableElement, state.rowElement, state.cellElement);
+      return;
+    }
+    state.pendingHeight = nextHeight;
+    document.body.style.cursor = "row-resize";
+    scheduleCommit();
+  }, [scheduleCommit, showRowGuide]);
+  const handlePointerUp = React74.useCallback((event) => {
+    if (!editor) return;
+    const state = stateRef.current;
+    if (!state) return;
+    const nextHeight = Math.max(
+      MIN_TABLE_ROW_HEIGHT,
+      Math.round(state.startHeight + (event.clientY - state.startY))
+    );
+    state.pendingHeight = nextHeight;
+    if (commitFrameRef.current !== null) {
+      window.cancelAnimationFrame(commitFrameRef.current);
+      commitFrameRef.current = null;
+    }
+    commitPreview();
+    const latestState = stateRef.current ?? state;
+    const rowNode = editor.view.state.doc.nodeAt(latestState.rowPos) ?? latestState.rowNode;
+    if (rowNode.attrs.rowHeight !== nextHeight) {
+      const tr = editor.view.state.tr;
+      tr.setNodeMarkup(latestState.rowPos, void 0, {
+        ...rowNode.attrs,
+        rowHeight: nextHeight
+      });
+      editor.view.dispatch(tr);
+    }
+    stateRef.current = null;
+    document.body.style.cursor = "";
+    clearHoveredTableCell();
+    clearAllTableResizeHover();
+    scheduleTableLayoutSync();
+  }, [clearAllTableResizeHover, clearHoveredTableCell, commitPreview, editor, scheduleTableLayoutSync]);
+  const cancelResize = React74.useCallback(() => {
+    if (!stateRef.current) return;
+    if (commitFrameRef.current !== null) {
+      window.cancelAnimationFrame(commitFrameRef.current);
+      commitFrameRef.current = null;
+    }
+    stateRef.current = null;
+    document.body.style.cursor = "";
+    clearHoveredTableCell();
+    clearAllTableResizeHover();
+    scheduleTableLayoutSync();
+  }, [clearAllTableResizeHover, clearHoveredTableCell, scheduleTableLayoutSync]);
+  const cleanup = React74.useCallback(() => {
+    if (commitFrameRef.current !== null) {
+      window.cancelAnimationFrame(commitFrameRef.current);
+      commitFrameRef.current = null;
+    }
+    stateRef.current = null;
+    document.body.style.cursor = "";
+  }, []);
+  return {
+    beginResize,
+    cancelResize,
+    cleanup,
+    handlePointerMove,
+    handlePointerUp,
+    isResizing,
+    syncActiveGuide
+  };
+}
+
+// src/components/UEditor/use-table-interactions.ts
 function useUEditorTableInteractions(editor) {
-  const editorContentRef = useRef31(null);
-  const tableColumnGuideRef = useRef31(null);
-  const tableRowGuideRef = useRef31(null);
-  const activeTableCellHighlightRef = useRef31(null);
-  const hoveredTableCellRef = useRef31(null);
-  const activeTableCellRef = useRef31(null);
-  const tableLayoutSyncFrameRef = useRef31(null);
-  const rowResizeCommitFrameRef = useRef31(null);
-  const rowResizeStateRef = useRef31(null);
-  const setEditorResizeCursor = React74.useCallback((cursor) => {
+  const editorContentRef = useRef32(null);
+  const tableColumnGuideRef = useRef32(null);
+  const tableRowGuideRef = useRef32(null);
+  const activeTableCellHighlightRef = useRef32(null);
+  const hoveredTableCellRef = useRef32(null);
+  const activeTableCellRef = useRef32(null);
+  const suppressActiveCellHighlightRef = useRef32(false);
+  const tableLayoutSyncFrameRef = useRef32(null);
+  const setEditorResizeCursor = React75.useCallback((cursor) => {
     const proseMirror = editorContentRef.current?.querySelector(".ProseMirror");
     if (proseMirror) {
       proseMirror.style.cursor = cursor;
     }
   }, []);
-  const hideColumnGuide = React74.useCallback(() => {
+  const hideColumnGuide = React75.useCallback(() => {
     editorContentRef.current?.classList.remove("resize-cursor");
     const guide = tableColumnGuideRef.current;
     if (guide) {
       guide.style.opacity = "0";
     }
   }, []);
-  const hideRowGuide = React74.useCallback(() => {
+  const hideRowGuide = React75.useCallback(() => {
     editorContentRef.current?.classList.remove("resize-row-cursor");
     const guide = tableRowGuideRef.current;
     if (guide) {
       guide.style.opacity = "0";
     }
   }, []);
-  const clearAllTableResizeHover = React74.useCallback(() => {
+  const clearAllTableResizeHover = React75.useCallback(() => {
     setEditorResizeCursor("");
     hideColumnGuide();
     hideRowGuide();
   }, [hideColumnGuide, hideRowGuide, setEditorResizeCursor]);
-  const updateActiveCellHighlight = React74.useCallback((cell) => {
+  const updateActiveCellHighlight = React75.useCallback((cell) => {
     const surface = editorContentRef.current;
     const highlight = activeTableCellHighlightRef.current;
     if (!highlight) return;
-    if (!surface || !cell) {
+    if (suppressActiveCellHighlightRef.current || !surface || !cell) {
       highlight.style.display = "none";
       return;
     }
@@ -32013,7 +32176,7 @@ function useUEditorTableInteractions(editor) {
     highlight.style.width = `${metrics.width}px`;
     highlight.style.height = `${metrics.height}px`;
   }, []);
-  const scheduleTableLayoutSync = React74.useCallback(() => {
+  const scheduleTableLayoutSync = React75.useCallback(() => {
     if (tableLayoutSyncFrameRef.current !== null) return;
     tableLayoutSyncFrameRef.current = window.requestAnimationFrame(() => {
       tableLayoutSyncFrameRef.current = null;
@@ -32021,22 +32184,22 @@ function useUEditorTableInteractions(editor) {
       editorContentRef.current?.dispatchEvent(new CustomEvent(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT));
     });
   }, [updateActiveCellHighlight]);
-  const setActiveTableCell = React74.useCallback((cell) => {
+  const setActiveTableCell = React75.useCallback((cell) => {
     if (activeTableCellRef.current === cell) return;
     activeTableCellRef.current = cell;
     updateActiveCellHighlight(activeTableCellRef.current);
   }, [updateActiveCellHighlight]);
-  const clearActiveTableCell = React74.useCallback(() => {
+  const clearActiveTableCell = React75.useCallback(() => {
     activeTableCellRef.current = null;
     updateActiveCellHighlight(null);
   }, [updateActiveCellHighlight]);
-  const setHoveredTableCell = React74.useCallback((cell) => {
+  const setHoveredTableCell = React75.useCallback((cell) => {
     hoveredTableCellRef.current = cell;
   }, []);
-  const clearHoveredTableCell = React74.useCallback(() => {
+  const clearHoveredTableCell = React75.useCallback(() => {
     hoveredTableCellRef.current = null;
   }, []);
-  const showColumnGuide = React74.useCallback((table, row, cell) => {
+  const showColumnGuide = React75.useCallback((table, row, cell) => {
     const surface = editorContentRef.current;
     const guide = tableColumnGuideRef.current;
     if (!surface || !guide) return;
@@ -32049,7 +32212,7 @@ function useUEditorTableInteractions(editor) {
     surface.classList.add("resize-cursor");
     setEditorResizeCursor("col-resize");
   }, [setEditorResizeCursor]);
-  const showRowGuide = React74.useCallback((table, row, cell) => {
+  const showRowGuide = React75.useCallback((table, row, cell) => {
     const surface = editorContentRef.current;
     const guide = tableRowGuideRef.current;
     if (!surface || !guide) return;
@@ -32062,46 +32225,23 @@ function useUEditorTableInteractions(editor) {
     surface.classList.add("resize-row-cursor");
     setEditorResizeCursor("row-resize");
   }, [setEditorResizeCursor]);
-  const commitRowResizePreview = React74.useCallback(() => {
-    if (!editor) return;
-    const state = rowResizeStateRef.current;
-    if (!state) return;
-    const nextHeight = state.pendingHeight;
-    if (nextHeight === state.previewHeight) {
-      document.body.style.cursor = "row-resize";
-      showRowGuide(state.tableElement, state.rowElement, state.cellElement);
-      scheduleTableLayoutSync();
-      return;
-    }
-    state.previewHeight = nextHeight;
-    const tr = editor.view.state.tr;
-    tr.setNodeMarkup(state.rowPos, void 0, {
-      ...state.rowNode.attrs,
-      rowHeight: nextHeight
-    });
-    tr.setMeta("addToHistory", false);
-    editor.view.dispatch(tr);
-    state.rowNode = editor.view.state.doc.nodeAt(state.rowPos) ?? state.rowNode;
-    const refreshedRow = state.tableElement.rows.item(state.rowElement.rowIndex);
-    if (refreshedRow instanceof HTMLTableRowElement) {
-      state.rowElement = refreshedRow;
-      const refreshedCell = refreshedRow.cells.item(state.cellIndex);
-      if (refreshedCell instanceof HTMLTableCellElement) {
-        state.cellElement = refreshedCell;
-      }
-    }
-    document.body.style.cursor = "row-resize";
-    showRowGuide(state.tableElement, state.rowElement, state.cellElement);
-    scheduleTableLayoutSync();
-  }, [editor, scheduleTableLayoutSync, showRowGuide]);
-  const scheduleRowResizeCommit = React74.useCallback(() => {
-    if (rowResizeCommitFrameRef.current !== null) return;
-    rowResizeCommitFrameRef.current = window.requestAnimationFrame(() => {
-      rowResizeCommitFrameRef.current = null;
-      commitRowResizePreview();
-    });
-  }, [commitRowResizePreview]);
-  const syncActiveTableCellFromSelection = React74.useCallback(() => {
+  const {
+    beginResize,
+    cancelResize,
+    cleanup: cleanupRowResize,
+    handlePointerMove: handleRowResizePointerMove,
+    handlePointerUp: handleRowResizePointerUp,
+    isResizing: isRowResizing,
+    syncActiveGuide: syncActiveRowResizeGuide
+  } = useTableRowResize({
+    editor,
+    setHoveredTableCell,
+    clearHoveredTableCell,
+    showRowGuide,
+    clearAllTableResizeHover,
+    scheduleTableLayoutSync
+  });
+  const syncActiveTableCellFromSelection = React75.useCallback(() => {
     if (!editor) return;
     setActiveTableCell(getSelectionTableCell(editor.view));
   }, [editor, setActiveTableCell]);
@@ -32126,10 +32266,7 @@ function useUEditorTableInteractions(editor) {
       updateActiveCellHighlight(activeTableCellRef.current);
     };
     const handleEditorMouseMove = (event) => {
-      const activeRowResize = rowResizeStateRef.current;
-      if (activeRowResize) {
-        setHoveredTableCell(activeRowResize.cellElement);
-        showRowGuide(activeRowResize.tableElement, activeRowResize.rowElement, activeRowResize.cellElement);
+      if (syncActiveRowResizeGuide()) {
         return;
       }
       const target = resolveEventElement(event.target);
@@ -32167,7 +32304,7 @@ function useUEditorTableInteractions(editor) {
     };
     const handleEditorMouseLeave = () => {
       clearHoveredTableCell();
-      if (!rowResizeStateRef.current) {
+      if (!isRowResizing()) {
         clearAllTableResizeHover();
       }
     };
@@ -32188,87 +32325,31 @@ function useUEditorTableInteractions(editor) {
       const row = cell.closest("tr");
       const table = cell.closest("table");
       if (!(row instanceof HTMLTableRowElement) || !(table instanceof HTMLTableElement)) return;
-      if (!isRowResizeHotspot(cell, event.clientX, event.clientY)) {
-        return;
+      if (beginResize(event, table, row, cell)) {
+        suppressActiveCellHighlightRef.current = true;
+        updateActiveCellHighlight(null);
       }
-      setHoveredTableCell(cell);
-      const rowInfo = findTableRowNodeInfo(editor.view, row);
-      if (!rowInfo) return;
-      const startHeight = row.getBoundingClientRect().height;
-      rowResizeStateRef.current = {
-        rowElement: row,
-        tableElement: table,
-        cellElement: cell,
-        cellIndex: cell.cellIndex,
-        rowPos: rowInfo.pos,
-        rowNode: rowInfo.node,
-        startY: event.clientY,
-        startHeight,
-        previewHeight: startHeight,
-        pendingHeight: startHeight
-      };
-      showRowGuide(table, row, cell);
-      document.body.style.cursor = "row-resize";
-      event.preventDefault();
-      event.stopPropagation();
     };
     const handlePointerMove = (event) => {
-      const state = rowResizeStateRef.current;
-      if (!state) return;
-      const nextHeight = Math.max(
-        MIN_TABLE_ROW_HEIGHT,
-        Math.round(state.startHeight + (event.clientY - state.startY))
-      );
-      if (nextHeight === state.pendingHeight) {
-        document.body.style.cursor = "row-resize";
-        showRowGuide(state.tableElement, state.rowElement, state.cellElement);
-        return;
-      }
-      state.pendingHeight = nextHeight;
-      document.body.style.cursor = "row-resize";
-      scheduleRowResizeCommit();
+      handleRowResizePointerMove(event);
     };
     const handlePointerUp = (event) => {
-      const state = rowResizeStateRef.current;
-      if (!state) return;
-      const nextHeight = Math.max(
-        MIN_TABLE_ROW_HEIGHT,
-        Math.round(state.startHeight + (event.clientY - state.startY))
-      );
-      state.pendingHeight = nextHeight;
-      if (rowResizeCommitFrameRef.current !== null) {
-        window.cancelAnimationFrame(rowResizeCommitFrameRef.current);
-        rowResizeCommitFrameRef.current = null;
-      }
-      commitRowResizePreview();
-      const latestState = rowResizeStateRef.current ?? state;
-      const rowNode = editor.view.state.doc.nodeAt(latestState.rowPos) ?? latestState.rowNode;
-      if (rowNode.attrs.rowHeight !== nextHeight) {
-        const tr = editor.view.state.tr;
-        tr.setNodeMarkup(latestState.rowPos, void 0, {
-          ...rowNode.attrs,
-          rowHeight: nextHeight
+      const wasRowResizing = isRowResizing();
+      handleRowResizePointerUp(event);
+      if (wasRowResizing) {
+        suppressActiveCellHighlightRef.current = false;
+        requestAnimationFrame(() => {
+          updateActiveCellHighlight(activeTableCellRef.current);
         });
-        editor.view.dispatch(tr);
       }
-      rowResizeStateRef.current = null;
-      document.body.style.cursor = "";
-      clearHoveredTableCell();
-      clearAllTableResizeHover();
-      scheduleTableLayoutSync();
     };
     const handleWindowBlur = () => {
-      const state = rowResizeStateRef.current;
-      if (!state) return;
-      if (rowResizeCommitFrameRef.current !== null) {
-        window.cancelAnimationFrame(rowResizeCommitFrameRef.current);
-        rowResizeCommitFrameRef.current = null;
+      const wasRowResizing = isRowResizing();
+      cancelResize();
+      if (wasRowResizing) {
+        suppressActiveCellHighlightRef.current = false;
+        updateActiveCellHighlight(activeTableCellRef.current);
       }
-      rowResizeStateRef.current = null;
-      document.body.style.cursor = "";
-      clearHoveredTableCell();
-      clearAllTableResizeHover();
-      scheduleTableLayoutSync();
     };
     proseMirror.addEventListener("mousemove", handleEditorMouseMove);
     proseMirror.addEventListener("mouseleave", handleEditorMouseLeave);
@@ -32311,17 +32392,14 @@ function useUEditorTableInteractions(editor) {
         window.cancelAnimationFrame(tableLayoutSyncFrameRef.current);
         tableLayoutSyncFrameRef.current = null;
       }
-      if (rowResizeCommitFrameRef.current !== null) {
-        window.cancelAnimationFrame(rowResizeCommitFrameRef.current);
-        rowResizeCommitFrameRef.current = null;
-      }
+      cleanupRowResize();
+      suppressActiveCellHighlightRef.current = false;
       document.body.style.cursor = "";
       clearActiveTableCell();
       clearHoveredTableCell();
       clearAllTableResizeHover();
-      rowResizeStateRef.current = null;
     };
-  }, [clearActiveTableCell, clearAllTableResizeHover, clearHoveredTableCell, commitRowResizePreview, editor, hideColumnGuide, hideRowGuide, scheduleRowResizeCommit, scheduleTableLayoutSync, setHoveredTableCell, showColumnGuide, showRowGuide, syncActiveTableCellFromSelection, updateActiveCellHighlight]);
+  }, [beginResize, cancelResize, cleanupRowResize, clearActiveTableCell, clearAllTableResizeHover, clearHoveredTableCell, editor, handleRowResizePointerMove, handleRowResizePointerUp, hideColumnGuide, hideRowGuide, isRowResizing, showColumnGuide, showRowGuide, syncActiveRowResizeGuide, syncActiveTableCellFromSelection, updateActiveCellHighlight]);
   return {
     editorContentRef,
     tableColumnGuideRef,
@@ -32332,7 +32410,7 @@ function useUEditorTableInteractions(editor) {
 
 // src/components/UEditor/UEditor.tsx
 import { jsx as jsx83, jsxs as jsxs71 } from "react/jsx-runtime";
-var UEditor = React75.forwardRef(({
+var UEditor = React76.forwardRef(({
   content = "",
   onChange,
   onHtmlChange,
@@ -32363,8 +32441,8 @@ var UEditor = React75.forwardRef(({
 }, ref) => {
   const t = useSmartTranslations("UEditor");
   const effectivePlaceholder = placeholder ?? t("placeholder");
-  const inFlightPrepareRef = useRef32(null);
-  const lastAppliedContentRef = useRef32(content ?? "");
+  const inFlightPrepareRef = useRef33(null);
+  const lastAppliedContentRef = useRef33(content ?? "");
   const extensions = useMemo24(
     () => buildUEditorExtensions({
       placeholder: effectivePlaceholder,
@@ -32534,6 +32612,7 @@ var UEditor = React75.forwardRef(({
                 {
                   ref: activeTableCellHighlightRef,
                   "aria-hidden": "true",
+                  "data-ueditor-active-cell-highlight": "",
                   className: "pointer-events-none hidden absolute z-20 rounded-[2px] border-2 border-primary bg-primary/10 transition-[left,top,width,height] duration-100"
                 }
               ),