@underverse-ui/underverse 1.0.101 → 1.0.103

package/dist/index.cjs

@@ -23278,8 +23278,8 @@ function useLocale2() {
 }
 
 // src/components/UEditor/UEditor.tsx
-var import_react52 = __toESM(require("react"), 1);
-var import_react53 = require("@tiptap/react");
+var import_react54 = __toESM(require("react"), 1);
+var import_react55 = require("@tiptap/react");
 
 // src/components/UEditor/extensions.ts
 var import_extension_document = __toESM(require("@tiptap/extension-document"), 1);
@@ -30805,6 +30805,111 @@ var columnResizingPluginKey = new PluginKey3("tableColumnResizing");
 
 // src/components/UEditor/table-controls.tsx
 var import_lucide_react46 = require("lucide-react");
+
+// src/components/UEditor/table-dom-utils.ts
+var MIN_TABLE_ROW_HEIGHT = 36;
+var COLUMN_RESIZE_LINE_THICKNESS = 2;
+var ROW_RESIZE_LINE_THICKNESS = 2;
+var UEDITOR_TABLE_LAYOUT_CHANGE_EVENT = "ueditor-table-layout-change";
+var TABLE_RESIZE_HIT_ZONE = 10;
+function findTableRowNodeInfo(view, rowElement) {
+  const firstCell = rowElement.querySelector("th,td");
+  if (!firstCell) return null;
+  const cellPos = view.posAtDOM(firstCell, 0);
+  const $pos = view.state.doc.resolve(cellPos);
+  for (let depth = $pos.depth; depth > 0; depth -= 1) {
+    const node = $pos.node(depth);
+    if (node.type.name === "tableRow") {
+      return {
+        pos: $pos.before(depth),
+        node
+      };
+    }
+  }
+  return null;
+}
+function resolveEventElement(target) {
+  if (target instanceof Element) return target;
+  if (target instanceof Node) return target.parentElement;
+  return null;
+}
+function getSelectionTableCell(view) {
+  const browserSelection = window.getSelection();
+  const anchorElement = resolveEventElement(browserSelection?.anchorNode ?? null);
+  const anchorCell = anchorElement?.closest?.("th,td");
+  if (anchorCell instanceof HTMLElement) {
+    return anchorCell;
+  }
+  const { from } = view.state.selection;
+  const domAtPos = view.domAtPos(from);
+  const element = resolveEventElement(domAtPos.node);
+  const cell = element?.closest?.("th,td");
+  return cell instanceof HTMLElement ? cell : null;
+}
+function isRowResizeHotspot(cell, clientX, clientY) {
+  const rect = cell.getBoundingClientRect();
+  const nearBottom = rect.bottom - clientY <= TABLE_RESIZE_HIT_ZONE;
+  const nearRight = rect.right - clientX <= TABLE_RESIZE_HIT_ZONE;
+  return nearBottom && !nearRight;
+}
+function isColumnResizeHotspot(cell, clientX, clientY) {
+  const rect = cell.getBoundingClientRect();
+  const nearRight = rect.right - clientX <= TABLE_RESIZE_HIT_ZONE;
+  const nearBottom = rect.bottom - clientY <= TABLE_RESIZE_HIT_ZONE;
+  return nearRight && !nearBottom;
+}
+function getRelativeBoundaryMetrics(surface, table, row, cell) {
+  const surfaceRect = surface.getBoundingClientRect();
+  const tableRect = table.getBoundingClientRect();
+  const rowRect = row.getBoundingClientRect();
+  const cellRect = cell.getBoundingClientRect();
+  return {
+    left: tableRect.left - surfaceRect.left + surface.scrollLeft,
+    top: tableRect.top - surfaceRect.top + surface.scrollTop,
+    width: tableRect.width,
+    height: tableRect.height,
+    rowBottom: rowRect.bottom - surfaceRect.top + surface.scrollTop,
+    columnRight: cellRect.right - surfaceRect.left + surface.scrollLeft
+  };
+}
+function getRelativeCellMetrics(surface, cell) {
+  const surfaceRect = surface.getBoundingClientRect();
+  const cellRect = cell.getBoundingClientRect();
+  return {
+    left: cellRect.left - surfaceRect.left + surface.scrollLeft,
+    top: cellRect.top - surfaceRect.top + surface.scrollTop,
+    width: cellRect.width,
+    height: cellRect.height
+  };
+}
+function getRelativeSelectedCellsMetrics(surface) {
+  const selectedCells = Array.from(
+    surface.querySelectorAll("td.selectedCell, th.selectedCell")
+  );
+  if (selectedCells.length === 0) {
+    return null;
+  }
+  const surfaceRect = surface.getBoundingClientRect();
+  let left = Number.POSITIVE_INFINITY;
+  let top = Number.POSITIVE_INFINITY;
+  let right = Number.NEGATIVE_INFINITY;
+  let bottom = Number.NEGATIVE_INFINITY;
+  selectedCells.forEach((cell) => {
+    const rect = cell.getBoundingClientRect();
+    left = Math.min(left, rect.left);
+    top = Math.min(top, rect.top);
+    right = Math.max(right, rect.right);
+    bottom = Math.max(bottom, rect.bottom);
+  });
+  return {
+    left: left - surfaceRect.left + surface.scrollLeft,
+    top: top - surfaceRect.top + surface.scrollTop,
+    width: right - left,
+    height: bottom - top
+  };
+}
+
+// src/components/UEditor/table-controls.tsx
 var import_jsx_runtime83 = require("react/jsx-runtime");
 var FALLBACK_TABLE_ROW_HEIGHT = 44;
 var FALLBACK_TABLE_COLUMN_WIDTH = 160;
@@ -31104,6 +31209,7 @@ function TableControls({ editor, containerRef }) {
     surface.addEventListener("mouseover", handleSurfaceMouseMove);
     surface.addEventListener("mousemove", handleSurfaceMouseMove);
     surface.addEventListener("scroll", refreshCurrentLayout, { passive: true });
+    surface.addEventListener(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT, refreshCurrentLayout);
     window.addEventListener("resize", refreshCurrentLayout);
     editor.on("selectionUpdate", syncFromSelection);
     editor.on("update", refreshCurrentLayout);
@@ -31115,6 +31221,7 @@ function TableControls({ editor, containerRef }) {
       surface.removeEventListener("mouseover", handleSurfaceMouseMove);
       surface.removeEventListener("mousemove", handleSurfaceMouseMove);
       surface.removeEventListener("scroll", refreshCurrentLayout);
+      surface.removeEventListener(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT, refreshCurrentLayout);
       window.removeEventListener("resize", refreshCurrentLayout);
       editor.off("selectionUpdate", syncFromSelection);
       editor.off("update", refreshCurrentLayout);
@@ -31798,194 +31905,352 @@ function TableControls({ editor, containerRef }) {
   ] });
 }
 
-// src/components/UEditor/UEditor.tsx
-var import_jsx_runtime84 = require("react/jsx-runtime");
-var TABLE_RESIZE_HIT_ZONE = 10;
-var MIN_TABLE_ROW_HEIGHT = 36;
-var COLUMN_RESIZE_LINE_THICKNESS = 2;
-var ROW_RESIZE_LINE_THICKNESS = 2;
-function applyPreviewRowHeight(rowElement, nextHeight) {
-  rowElement.style.height = `${nextHeight}px`;
-  rowElement.style.minHeight = `${nextHeight}px`;
-  rowElement.querySelectorAll("th,td").forEach((cell) => {
-    if (cell instanceof HTMLElement) {
-      cell.style.height = `${nextHeight}px`;
-      cell.style.minHeight = `${nextHeight}px`;
+// src/components/UEditor/editor-styles.ts
+var UEDITOR_PROSEMIRROR_CLASS_NAME = cn(
+  "prose prose-sm sm:prose dark:prose-invert max-w-none",
+  "focus:outline-none",
+  "px-4 py-4",
+  "[&_.is-editor-empty]:before:content-[attr(data-placeholder)]",
+  "[&_.is-editor-empty]:before:text-muted-foreground/50",
+  "[&_.is-editor-empty]:before:float-left",
+  "[&_.is-editor-empty]:before:pointer-events-none",
+  "[&_.is-editor-empty]:before:h-0",
+  "[&_ul[data-type='taskList']]:list-none",
+  "[&_ul[data-type='taskList']]:pl-0",
+  "[&_ul[data-type='taskList']_li]:flex",
+  "[&_ul[data-type='taskList']_li]:items-start",
+  "[&_ul[data-type='taskList']_li]:gap-2",
+  "[&_ul[data-type='taskList']_li>label]:mt-0.5",
+  "[&_ul[data-type='taskList']_li>label>input]:w-4",
+  "[&_ul[data-type='taskList']_li>label>input]:h-4",
+  "[&_ul[data-type='taskList']_li>label>input]:rounded",
+  "[&_ul[data-type='taskList']_li>label>input]:border-2",
+  "[&_ul[data-type='taskList']_li>label>input]:border-primary/50",
+  "[&_ul[data-type='taskList']_li>label>input]:accent-primary",
+  "[&_pre]:bg-muted/40!",
+  "[&_pre]:text-foreground!",
+  "[&_pre]:border!",
+  "[&_pre]:border-border/60!",
+  "[&_pre_code]:bg-transparent!",
+  "[&_.tableWrapper]:overflow-x-auto",
+  "[&_.tableWrapper]:pb-1.5",
+  "[&_.tableWrapper]:select-text",
+  "[&_.tableWrapper]:[scrollbar-width:thin]",
+  "[&_.tableWrapper]:[scrollbar-color:hsl(var(--border))_transparent]",
+  "[&_.tableWrapper::-webkit-scrollbar]:h-2",
+  "[&_.tableWrapper::-webkit-scrollbar]:w-2",
+  "[&_.tableWrapper::-webkit-scrollbar-track]:rounded-full",
+  "[&_.tableWrapper::-webkit-scrollbar-track]:bg-transparent",
+  "[&_.tableWrapper::-webkit-scrollbar-thumb]:rounded-full",
+  "[&_.tableWrapper::-webkit-scrollbar-thumb]:border",
+  "[&_.tableWrapper::-webkit-scrollbar-thumb]:border-solid",
+  "[&_.tableWrapper::-webkit-scrollbar-thumb]:border-transparent",
+  "[&_.tableWrapper::-webkit-scrollbar-thumb]:bg-border/70",
+  "[&_.tableWrapper::-webkit-scrollbar-thumb:hover]:bg-muted-foreground/45",
+  "[&_table]:table-fixed",
+  "[&_table]:overflow-hidden",
+  "[&_table]:select-text",
+  "[&_table[data-table-align]]:w-max",
+  "[&_table[data-table-align]]:max-w-full",
+  "[&_table[data-table-align='center']]:mx-auto",
+  "[&_table[data-table-align='right']]:ml-auto",
+  "[&_table[data-table-align='right']]:mr-0",
+  "[&_td]:relative",
+  "[&_td]:align-top",
+  "[&_td]:box-border",
+  "[&_td]:select-text",
+  "[&_th]:relative",
+  "[&_th]:align-top",
+  "[&_th]:box-border",
+  "[&_th]:select-text",
+  "[&_.selectedCell]:after:content-['']",
+  "[&_.selectedCell]:after:absolute",
+  "[&_.selectedCell]:after:inset-0",
+  "[&_.selectedCell]:after:z-[2]",
+  "[&_.selectedCell]:after:bg-primary/15",
+  "[&_.selectedCell]:after:pointer-events-none",
+  "[&_.column-resize-handle]:pointer-events-auto",
+  "[&_.column-resize-handle]:cursor-col-resize",
+  "[&_.column-resize-handle]:absolute",
+  "[&_.column-resize-handle]:top-[-1px]",
+  "[&_.column-resize-handle]:bottom-[-1px]",
+  "[&_.column-resize-handle]:right-[-5px]",
+  "[&_.column-resize-handle]:z-10",
+  "[&_.column-resize-handle]:w-2.5",
+  "[&_.column-resize-handle]:bg-transparent",
+  "[&_.column-resize-handle]:rounded-none",
+  "[&_.column-resize-handle]:opacity-0",
+  "[&_.column-resize-handle]:transition-opacity",
+  "[&_.column-resize-handle]:after:absolute",
+  "[&_.column-resize-handle]:after:top-0",
+  "[&_.column-resize-handle]:after:bottom-0",
+  "[&_.column-resize-handle]:after:left-1/2",
+  "[&_.column-resize-handle]:after:w-0.5",
+  "[&_.column-resize-handle]:after:-translate-x-1/2",
+  "[&_.column-resize-handle]:after:rounded-full",
+  "[&_.column-resize-handle]:after:bg-primary/75",
+  "[&_.column-resize-handle]:after:content-['']",
+  "[&.resize-cursor_.column-resize-handle]:opacity-100",
+  "[&.resize-cursor_.column-resize-handle]:after:bg-primary",
+  "[&.resize-cursor]:cursor-col-resize",
+  "[&.resize-row-cursor]:cursor-row-resize",
+  "[&_img.ProseMirror-selectednode]:ring-2",
+  "[&_img.ProseMirror-selectednode]:ring-primary/60",
+  "[&_img.ProseMirror-selectednode]:ring-offset-2",
+  "[&_img.ProseMirror-selectednode]:ring-offset-background",
+  "[&_hr]:border-t-2",
+  "[&_hr]:border-primary/30",
+  "[&_hr]:my-8",
+  "[&_h1]:text-3xl",
+  "[&_h1]:font-bold",
+  "[&_h1]:mt-6",
+  "[&_h1]:mb-4",
+  "[&_h1]:text-foreground",
+  "[&_h2]:text-2xl",
+  "[&_h2]:font-semibold",
+  "[&_h2]:mt-5",
+  "[&_h2]:mb-3",
+  "[&_h2]:text-foreground",
+  "[&_h3]:text-xl",
+  "[&_h3]:font-semibold",
+  "[&_h3]:mt-4",
+  "[&_h3]:mb-2",
+  "[&_h3]:text-foreground",
+  "[&_ul:not([data-type='taskList'])]:list-disc",
+  "[&_ul:not([data-type='taskList'])]:pl-6",
+  "[&_ul:not([data-type='taskList'])]:my-3",
+  "[&_ol]:list-decimal",
+  "[&_ol]:pl-6",
+  "[&_ol]:my-3",
+  "[&_li]:my-1",
+  "[&_li]:pl-1",
+  "[&_li_p]:my-0",
+  "[&_blockquote]:border-l-4",
+  "[&_blockquote]:border-primary",
+  "[&_blockquote]:pl-4",
+  "[&_blockquote]:py-2",
+  "[&_blockquote]:my-4",
+  "[&_blockquote]:bg-muted/30",
+  "[&_blockquote]:rounded-r-lg",
+  "[&_blockquote]:italic",
+  "[&_blockquote]:text-muted-foreground",
+  "[&_blockquote_p]:my-0",
+  "[&_[data-image-layout='left']+p]:mt-1",
+  "[&_[data-image-layout='left']+p]:min-h-[5rem]",
+  "[&_[data-image-layout='right']+p]:mt-1",
+  "[&_[data-image-layout='right']+p]:min-h-[5rem]",
+  "max-md:[&_[data-image-layout='left']]:float-none",
+  "max-md:[&_[data-image-layout='left']]:mr-0",
+  "max-md:[&_[data-image-layout='left']]:ml-0",
+  "max-md:[&_[data-image-layout='left']]:max-w-full",
+  "max-md:[&_[data-image-layout='right']]:float-none",
+  "max-md:[&_[data-image-layout='right']]:mr-0",
+  "max-md:[&_[data-image-layout='right']]:ml-0",
+  "max-md:[&_[data-image-layout='right']]:max-w-full",
+  "max-md:[&_[data-image-layout='left']+p]:min-h-0",
+  "max-md:[&_[data-image-layout='right']+p]:min-h-0"
+);
+
+// src/components/UEditor/use-table-interactions.ts
+var import_react53 = __toESM(require("react"), 1);
+
+// src/components/UEditor/use-table-row-resize.ts
+var import_react52 = __toESM(require("react"), 1);
+function useTableRowResize({
+  editor,
+  setHoveredTableCell,
+  clearHoveredTableCell,
+  showRowGuide,
+  clearAllTableResizeHover,
+  scheduleTableLayoutSync
+}) {
+  const commitFrameRef = (0, import_react52.useRef)(null);
+  const stateRef = (0, import_react52.useRef)(null);
+  const commitPreview = import_react52.default.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;
     }
-  });
-}
-function clearPreviewRowHeight(rowElement) {
-  rowElement.style.height = "";
-  rowElement.style.minHeight = "";
-  rowElement.querySelectorAll("th,td").forEach((cell) => {
-    if (cell instanceof HTMLElement) {
-      cell.style.height = "";
-      cell.style.minHeight = "";
+    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 = import_react52.default.useCallback(() => {
+    if (commitFrameRef.current !== null) return;
+    commitFrameRef.current = window.requestAnimationFrame(() => {
+      commitFrameRef.current = null;
+      commitPreview();
+    });
+  }, [commitPreview]);
+  const syncActiveGuide = import_react52.default.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 = import_react52.default.useCallback(() => stateRef.current !== null, []);
+  const beginResize = import_react52.default.useCallback((event, table, row, cell) => {
+    if (!editor || !isRowResizeHotspot(cell, event.clientX, event.clientY)) {
+      return false;
     }
-  });
-}
-function findTableRowNodeInfo(view, rowElement) {
-  const firstCell = rowElement.querySelector("th,td");
-  if (!firstCell) return null;
-  const cellPos = view.posAtDOM(firstCell, 0);
-  const $pos = view.state.doc.resolve(cellPos);
-  for (let depth = $pos.depth; depth > 0; depth -= 1) {
-    const node = $pos.node(depth);
-    if (node.type.name === "tableRow") {
-      return {
-        pos: $pos.before(depth),
-        node
-      };
+    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 = import_react52.default.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;
     }
-  }
-  return null;
-}
-function resolveEventElement(target) {
-  if (target instanceof Element) return target;
-  if (target instanceof Node) return target.parentElement;
-  return null;
-}
-function getSelectionTableCell(view) {
-  const browserSelection = window.getSelection();
-  const anchorElement = resolveEventElement(browserSelection?.anchorNode ?? null);
-  const anchorCell = anchorElement?.closest?.("th,td");
-  if (anchorCell instanceof HTMLElement) {
-    return anchorCell;
-  }
-  const { from } = view.state.selection;
-  const domAtPos = view.domAtPos(from);
-  const element = resolveEventElement(domAtPos.node);
-  const cell = element?.closest?.("th,td");
-  return cell instanceof HTMLElement ? cell : null;
-}
-function isRowResizeHotspot(cell, clientX, clientY) {
-  const rect = cell.getBoundingClientRect();
-  const nearBottom = rect.bottom - clientY <= TABLE_RESIZE_HIT_ZONE;
-  const nearRight = rect.right - clientX <= TABLE_RESIZE_HIT_ZONE;
-  return nearBottom && !nearRight;
-}
-function isColumnResizeHotspot(cell, clientX, clientY) {
-  const rect = cell.getBoundingClientRect();
-  const nearRight = rect.right - clientX <= TABLE_RESIZE_HIT_ZONE;
-  const nearBottom = rect.bottom - clientY <= TABLE_RESIZE_HIT_ZONE;
-  return nearRight && !nearBottom;
-}
-function getRelativeBoundaryMetrics(surface, table, row, cell) {
-  const surfaceRect = surface.getBoundingClientRect();
-  const tableRect = table.getBoundingClientRect();
-  const rowRect = row.getBoundingClientRect();
-  const cellRect = cell.getBoundingClientRect();
-  return {
-    left: tableRect.left - surfaceRect.left + surface.scrollLeft,
-    top: tableRect.top - surfaceRect.top + surface.scrollTop,
-    width: tableRect.width,
-    height: tableRect.height,
-    rowBottom: rowRect.bottom - surfaceRect.top + surface.scrollTop,
-    columnRight: cellRect.right - surfaceRect.left + surface.scrollLeft
-  };
-}
-function getRelativeCellMetrics(surface, cell) {
-  const surfaceRect = surface.getBoundingClientRect();
-  const cellRect = cell.getBoundingClientRect();
-  return {
-    left: cellRect.left - surfaceRect.left + surface.scrollLeft,
-    top: cellRect.top - surfaceRect.top + surface.scrollTop,
-    width: cellRect.width,
-    height: cellRect.height
-  };
-}
-function getRelativeSelectedCellsMetrics(surface) {
-  const selectedCells = Array.from(
-    surface.querySelectorAll("td.selectedCell, th.selectedCell")
-  );
-  if (selectedCells.length === 0) {
-    return null;
-  }
-  const surfaceRect = surface.getBoundingClientRect();
-  let left = Number.POSITIVE_INFINITY;
-  let top = Number.POSITIVE_INFINITY;
-  let right = Number.NEGATIVE_INFINITY;
-  let bottom = Number.NEGATIVE_INFINITY;
-  selectedCells.forEach((cell) => {
-    const rect = cell.getBoundingClientRect();
-    left = Math.min(left, rect.left);
-    top = Math.min(top, rect.top);
-    right = Math.max(right, rect.right);
-    bottom = Math.max(bottom, rect.bottom);
-  });
+    state.pendingHeight = nextHeight;
+    document.body.style.cursor = "row-resize";
+    scheduleCommit();
+  }, [scheduleCommit, showRowGuide]);
+  const handlePointerUp = import_react52.default.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 = import_react52.default.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 = import_react52.default.useCallback(() => {
+    if (commitFrameRef.current !== null) {
+      window.cancelAnimationFrame(commitFrameRef.current);
+      commitFrameRef.current = null;
+    }
+    stateRef.current = null;
+    document.body.style.cursor = "";
+  }, []);
   return {
-    left: left - surfaceRect.left + surface.scrollLeft,
-    top: top - surfaceRect.top + surface.scrollTop,
-    width: right - left,
-    height: bottom - top
+    beginResize,
+    cancelResize,
+    cleanup,
+    handlePointerMove,
+    handlePointerUp,
+    isResizing,
+    syncActiveGuide
   };
 }
-var UEditor = import_react52.default.forwardRef(({
-  content = "",
-  onChange,
-  onHtmlChange,
-  onJsonChange,
-  uploadImage,
-  uploadImageForSave,
-  uploadImageConcurrency = 3,
-  imageInsertMode = "base64",
-  maxImageFileSize,
-  allowedImageMimeTypes,
-  fallbackToDataUrl,
-  placeholder,
-  className,
-  editable = true,
-  autofocus = false,
-  showToolbar = true,
-  showBubbleMenu = true,
-  showFloatingMenu = false,
-  showCharacterCount = true,
-  maxCharacters,
-  minHeight = "200px",
-  maxHeight = "auto",
-  variant = "default",
-  fontFamilies,
-  fontSizes,
-  lineHeights,
-  letterSpacings
-}, ref) => {
-  const t = useSmartTranslations("UEditor");
-  const effectivePlaceholder = placeholder ?? t("placeholder");
-  const inFlightPrepareRef = (0, import_react52.useRef)(null);
-  const lastAppliedContentRef = (0, import_react52.useRef)(content ?? "");
-  const editorContentRef = (0, import_react52.useRef)(null);
-  const tableColumnGuideRef = (0, import_react52.useRef)(null);
-  const tableRowGuideRef = (0, import_react52.useRef)(null);
-  const activeTableCellHighlightRef = (0, import_react52.useRef)(null);
-  const hoveredTableCellRef = (0, import_react52.useRef)(null);
-  const activeTableCellRef = (0, import_react52.useRef)(null);
-  const rowResizeStateRef = (0, import_react52.useRef)(null);
-  const setEditorResizeCursor = import_react52.default.useCallback((cursor) => {
+
+// src/components/UEditor/use-table-interactions.ts
+function useUEditorTableInteractions(editor) {
+  const editorContentRef = (0, import_react53.useRef)(null);
+  const tableColumnGuideRef = (0, import_react53.useRef)(null);
+  const tableRowGuideRef = (0, import_react53.useRef)(null);
+  const activeTableCellHighlightRef = (0, import_react53.useRef)(null);
+  const hoveredTableCellRef = (0, import_react53.useRef)(null);
+  const activeTableCellRef = (0, import_react53.useRef)(null);
+  const tableLayoutSyncFrameRef = (0, import_react53.useRef)(null);
+  const setEditorResizeCursor = import_react53.default.useCallback((cursor) => {
     const proseMirror = editorContentRef.current?.querySelector(".ProseMirror");
     if (proseMirror) {
       proseMirror.style.cursor = cursor;
     }
   }, []);
-  const hideColumnGuide = import_react52.default.useCallback(() => {
+  const hideColumnGuide = import_react53.default.useCallback(() => {
     editorContentRef.current?.classList.remove("resize-cursor");
     const guide = tableColumnGuideRef.current;
     if (guide) {
       guide.style.opacity = "0";
     }
   }, []);
-  const hideRowGuide = import_react52.default.useCallback(() => {
+  const hideRowGuide = import_react53.default.useCallback(() => {
     editorContentRef.current?.classList.remove("resize-row-cursor");
     const guide = tableRowGuideRef.current;
     if (guide) {
       guide.style.opacity = "0";
     }
   }, []);
-  const clearAllTableResizeHover = import_react52.default.useCallback(() => {
+  const clearAllTableResizeHover = import_react53.default.useCallback(() => {
     setEditorResizeCursor("");
     hideColumnGuide();
     hideRowGuide();
   }, [hideColumnGuide, hideRowGuide, setEditorResizeCursor]);
-  const updateActiveCellHighlight = import_react52.default.useCallback((cell) => {
+  const updateActiveCellHighlight = import_react53.default.useCallback((cell) => {
     const surface = editorContentRef.current;
     const highlight = activeTableCellHighlightRef.current;
     if (!highlight) return;
@@ -32000,22 +32265,30 @@ var UEditor = import_react52.default.forwardRef(({
     highlight.style.width = `${metrics.width}px`;
     highlight.style.height = `${metrics.height}px`;
   }, []);
-  const setActiveTableCell = import_react52.default.useCallback((cell) => {
+  const scheduleTableLayoutSync = import_react53.default.useCallback(() => {
+    if (tableLayoutSyncFrameRef.current !== null) return;
+    tableLayoutSyncFrameRef.current = window.requestAnimationFrame(() => {
+      tableLayoutSyncFrameRef.current = null;
+      updateActiveCellHighlight(activeTableCellRef.current);
+      editorContentRef.current?.dispatchEvent(new CustomEvent(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT));
+    });
+  }, [updateActiveCellHighlight]);
+  const setActiveTableCell = import_react53.default.useCallback((cell) => {
     if (activeTableCellRef.current === cell) return;
     activeTableCellRef.current = cell;
     updateActiveCellHighlight(activeTableCellRef.current);
   }, [updateActiveCellHighlight]);
-  const clearActiveTableCell = import_react52.default.useCallback(() => {
+  const clearActiveTableCell = import_react53.default.useCallback(() => {
     activeTableCellRef.current = null;
     updateActiveCellHighlight(null);
   }, [updateActiveCellHighlight]);
-  const setHoveredTableCell = import_react52.default.useCallback((cell) => {
+  const setHoveredTableCell = import_react53.default.useCallback((cell) => {
     hoveredTableCellRef.current = cell;
   }, []);
-  const clearHoveredTableCell = import_react52.default.useCallback(() => {
+  const clearHoveredTableCell = import_react53.default.useCallback(() => {
     hoveredTableCellRef.current = null;
   }, []);
-  const showColumnGuide = import_react52.default.useCallback((table, row, cell) => {
+  const showColumnGuide = import_react53.default.useCallback((table, row, cell) => {
     const surface = editorContentRef.current;
     const guide = tableColumnGuideRef.current;
     if (!surface || !guide) return;
@@ -32028,7 +32301,7 @@ var UEditor = import_react52.default.forwardRef(({
     surface.classList.add("resize-cursor");
     setEditorResizeCursor("col-resize");
   }, [setEditorResizeCursor]);
-  const showRowGuide = import_react52.default.useCallback((table, row, cell) => {
+  const showRowGuide = import_react53.default.useCallback((table, row, cell) => {
     const surface = editorContentRef.current;
     const guide = tableRowGuideRef.current;
     if (!surface || !guide) return;
@@ -32041,240 +32314,27 @@ var UEditor = import_react52.default.forwardRef(({
     surface.classList.add("resize-row-cursor");
     setEditorResizeCursor("row-resize");
   }, [setEditorResizeCursor]);
-  const extensions = (0, import_react52.useMemo)(
-    () => buildUEditorExtensions({
-      placeholder: effectivePlaceholder,
-      translate: t,
-      maxCharacters,
-      uploadImage,
-      imageInsertMode,
-      maxImageFileSize,
-      allowedImageMimeTypes,
-      fallbackToDataUrl,
-      editable
-    }),
-    [effectivePlaceholder, t, maxCharacters, uploadImage, imageInsertMode, maxImageFileSize, allowedImageMimeTypes, fallbackToDataUrl, editable]
-  );
-  const editor = (0, import_react53.useEditor)({
-    immediatelyRender: false,
-    extensions,
-    content,
-    editable,
-    autofocus,
-    editorProps: {
-      handleDOMEvents: {
-        keydown: (_view, event) => {
-          if (!(event instanceof KeyboardEvent)) return false;
-          if (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "ArrowDown") {
-            event.stopPropagation();
-          }
-          return false;
-        },
-        click: (view, event) => {
-          if (!(event instanceof MouseEvent)) return false;
-          if (event.button !== 0) return false;
-          const target = resolveEventElement(event.target);
-          const anchor = target?.closest?.("a[href]");
-          const href = anchor?.getAttribute("href") ?? "";
-          if (!href) return false;
-          if (!view.state.selection.empty) return false;
-          event.preventDefault();
-          event.stopPropagation();
-          window.open(href, "_blank", "noopener,noreferrer");
-          return true;
-        }
-      },
-      attributes: {
-        class: cn(
-          "prose prose-sm sm:prose dark:prose-invert max-w-none",
-          "focus:outline-none",
-          "px-4 py-4",
-          "[&_.is-editor-empty]:before:content-[attr(data-placeholder)]",
-          "[&_.is-editor-empty]:before:text-muted-foreground/50",
-          "[&_.is-editor-empty]:before:float-left",
-          "[&_.is-editor-empty]:before:pointer-events-none",
-          "[&_.is-editor-empty]:before:h-0",
-          "[&_ul[data-type='taskList']]:list-none",
-          "[&_ul[data-type='taskList']]:pl-0",
-          "[&_ul[data-type='taskList']_li]:flex",
-          "[&_ul[data-type='taskList']_li]:items-start",
-          "[&_ul[data-type='taskList']_li]:gap-2",
-          "[&_ul[data-type='taskList']_li>label]:mt-0.5",
-          "[&_ul[data-type='taskList']_li>label>input]:w-4",
-          "[&_ul[data-type='taskList']_li>label>input]:h-4",
-          "[&_ul[data-type='taskList']_li>label>input]:rounded",
-          "[&_ul[data-type='taskList']_li>label>input]:border-2",
-          "[&_ul[data-type='taskList']_li>label>input]:border-primary/50",
-          "[&_ul[data-type='taskList']_li>label>input]:accent-primary",
-          "[&_pre]:bg-muted/40!",
-          "[&_pre]:text-foreground!",
-          "[&_pre]:border!",
-          "[&_pre]:border-border/60!",
-          "[&_pre_code]:bg-transparent!",
-          "[&_.tableWrapper]:overflow-x-auto",
-          "[&_.tableWrapper]:pb-1.5",
-          "[&_.tableWrapper]:select-text",
-          "[&_.tableWrapper]:[scrollbar-width:thin]",
-          "[&_.tableWrapper]:[scrollbar-color:hsl(var(--border))_transparent]",
-          "[&_.tableWrapper::-webkit-scrollbar]:h-2",
-          "[&_.tableWrapper::-webkit-scrollbar]:w-2",
-          "[&_.tableWrapper::-webkit-scrollbar-track]:rounded-full",
-          "[&_.tableWrapper::-webkit-scrollbar-track]:bg-transparent",
-          "[&_.tableWrapper::-webkit-scrollbar-thumb]:rounded-full",
-          "[&_.tableWrapper::-webkit-scrollbar-thumb]:border",
-          "[&_.tableWrapper::-webkit-scrollbar-thumb]:border-solid",
-          "[&_.tableWrapper::-webkit-scrollbar-thumb]:border-transparent",
-          "[&_.tableWrapper::-webkit-scrollbar-thumb]:bg-border/70",
-          "[&_.tableWrapper::-webkit-scrollbar-thumb:hover]:bg-muted-foreground/45",
-          "[&_table]:table-fixed",
-          "[&_table]:overflow-hidden",
-          "[&_table]:select-text",
-          "[&_table[data-table-align]]:w-max",
-          "[&_table[data-table-align]]:max-w-full",
-          "[&_table[data-table-align='center']]:mx-auto",
-          "[&_table[data-table-align='right']]:ml-auto",
-          "[&_table[data-table-align='right']]:mr-0",
-          "[&_td]:relative",
-          "[&_td]:align-top",
-          "[&_td]:box-border",
-          "[&_td]:select-text",
-          "[&_th]:relative",
-          "[&_th]:align-top",
-          "[&_th]:box-border",
-          "[&_th]:select-text",
-          "[&_.selectedCell]:after:content-['']",
-          "[&_.selectedCell]:after:absolute",
-          "[&_.selectedCell]:after:inset-0",
-          "[&_.selectedCell]:after:z-[2]",
-          "[&_.selectedCell]:after:bg-primary/15",
-          "[&_.selectedCell]:after:pointer-events-none",
-          "[&_.column-resize-handle]:pointer-events-auto",
-          "[&_.column-resize-handle]:cursor-col-resize",
-          "[&_.column-resize-handle]:absolute",
-          "[&_.column-resize-handle]:top-[-1px]",
-          "[&_.column-resize-handle]:bottom-[-1px]",
-          "[&_.column-resize-handle]:right-[-5px]",
-          "[&_.column-resize-handle]:z-10",
-          "[&_.column-resize-handle]:w-2.5",
-          "[&_.column-resize-handle]:bg-transparent",
-          "[&_.column-resize-handle]:rounded-none",
-          "[&_.column-resize-handle]:opacity-0",
-          "[&_.column-resize-handle]:transition-opacity",
-          "[&_.column-resize-handle]:after:absolute",
-          "[&_.column-resize-handle]:after:top-0",
-          "[&_.column-resize-handle]:after:bottom-0",
-          "[&_.column-resize-handle]:after:left-1/2",
-          "[&_.column-resize-handle]:after:w-0.5",
-          "[&_.column-resize-handle]:after:-translate-x-1/2",
-          "[&_.column-resize-handle]:after:rounded-full",
-          "[&_.column-resize-handle]:after:bg-primary/75",
-          "[&_.column-resize-handle]:after:content-['']",
-          "[&.resize-cursor_.column-resize-handle]:opacity-100",
-          "[&.resize-cursor_.column-resize-handle]:after:bg-primary",
-          "[&.resize-cursor]:cursor-col-resize",
-          "[&.resize-row-cursor]:cursor-row-resize",
-          "[&_img.ProseMirror-selectednode]:ring-2",
-          "[&_img.ProseMirror-selectednode]:ring-primary/60",
-          "[&_img.ProseMirror-selectednode]:ring-offset-2",
-          "[&_img.ProseMirror-selectednode]:ring-offset-background",
-          "[&_hr]:border-t-2",
-          "[&_hr]:border-primary/30",
-          "[&_hr]:my-8",
-          "[&_h1]:text-3xl",
-          "[&_h1]:font-bold",
-          "[&_h1]:mt-6",
-          "[&_h1]:mb-4",
-          "[&_h1]:text-foreground",
-          "[&_h2]:text-2xl",
-          "[&_h2]:font-semibold",
-          "[&_h2]:mt-5",
-          "[&_h2]:mb-3",
-          "[&_h2]:text-foreground",
-          "[&_h3]:text-xl",
-          "[&_h3]:font-semibold",
-          "[&_h3]:mt-4",
-          "[&_h3]:mb-2",
-          "[&_h3]:text-foreground",
-          "[&_ul:not([data-type='taskList'])]:list-disc",
-          "[&_ul:not([data-type='taskList'])]:pl-6",
-          "[&_ul:not([data-type='taskList'])]:my-3",
-          "[&_ol]:list-decimal",
-          "[&_ol]:pl-6",
-          "[&_ol]:my-3",
-          "[&_li]:my-1",
-          "[&_li]:pl-1",
-          "[&_li_p]:my-0",
-          "[&_blockquote]:border-l-4",
-          "[&_blockquote]:border-primary",
-          "[&_blockquote]:pl-4",
-          "[&_blockquote]:py-2",
-          "[&_blockquote]:my-4",
-          "[&_blockquote]:bg-muted/30",
-          "[&_blockquote]:rounded-r-lg",
-          "[&_blockquote]:italic",
-          "[&_blockquote]:text-muted-foreground",
-          "[&_blockquote_p]:my-0",
-          "[&_[data-image-layout='left']+p]:mt-1",
-          "[&_[data-image-layout='left']+p]:min-h-[5rem]",
-          "[&_[data-image-layout='right']+p]:mt-1",
-          "[&_[data-image-layout='right']+p]:min-h-[5rem]",
-          "max-md:[&_[data-image-layout='left']]:float-none",
-          "max-md:[&_[data-image-layout='left']]:mr-0",
-          "max-md:[&_[data-image-layout='left']]:ml-0",
-          "max-md:[&_[data-image-layout='left']]:max-w-full",
-          "max-md:[&_[data-image-layout='right']]:float-none",
-          "max-md:[&_[data-image-layout='right']]:mr-0",
-          "max-md:[&_[data-image-layout='right']]:ml-0",
-          "max-md:[&_[data-image-layout='right']]:max-w-full",
-          "max-md:[&_[data-image-layout='left']+p]:min-h-0",
-          "max-md:[&_[data-image-layout='right']+p]:min-h-0"
-        )
-      }
-    },
-    onUpdate: ({ editor: editor2 }) => {
-      const html = editor2.getHTML();
-      onChange?.(html);
-      onHtmlChange?.(html);
-      onJsonChange?.(editor2.getJSON());
-    }
+  const {
+    beginResize,
+    cancelResize,
+    cleanup: cleanupRowResize,
+    handlePointerMove: handleRowResizePointerMove,
+    handlePointerUp: handleRowResizePointerUp,
+    isResizing: isRowResizing,
+    syncActiveGuide: syncActiveRowResizeGuide
+  } = useTableRowResize({
+    editor,
+    setHoveredTableCell,
+    clearHoveredTableCell,
+    showRowGuide,
+    clearAllTableResizeHover,
+    scheduleTableLayoutSync
   });
-  const syncActiveTableCellFromSelection = import_react52.default.useCallback(() => {
+  const syncActiveTableCellFromSelection = import_react53.default.useCallback(() => {
     if (!editor) return;
     setActiveTableCell(getSelectionTableCell(editor.view));
   }, [editor, setActiveTableCell]);
-  (0, import_react52.useImperativeHandle)(
-    ref,
-    () => ({
-      prepareContentForSave: async ({ throwOnError = false } = {}) => {
-        if (!inFlightPrepareRef.current) {
-          const htmlSnapshot = editor?.getHTML() ?? content ?? "";
-          inFlightPrepareRef.current = prepareUEditorContentForSave({
-            html: htmlSnapshot,
-            uploadImageForSave,
-            uploadConcurrency: uploadImageConcurrency
-          }).finally(() => {
-            inFlightPrepareRef.current = null;
-          });
-        }
-        const result = await inFlightPrepareRef.current;
-        if (throwOnError && result.errors.length > 0) {
-          throw new UEditorPrepareContentForSaveError(result);
-        }
-        return result;
-      }
-    }),
-    [content, editor, uploadImageForSave, uploadImageConcurrency]
-  );
-  (0, import_react52.useEffect)(() => {
-    if (!editor) return;
-    const nextContent = content ?? "";
-    if (lastAppliedContentRef.current === nextContent) return;
-    lastAppliedContentRef.current = nextContent;
-    if (editor.getHTML() !== nextContent) {
-      editor.commands.setContent(nextContent, { emitUpdate: false });
-    }
-  }, [content, editor]);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (!editor) return void 0;
     const proseMirror = editor.view.dom;
     const surface = editorContentRef.current;
@@ -32295,10 +32355,7 @@ var UEditor = import_react52.default.forwardRef(({
       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);
@@ -32336,7 +32393,7 @@ var UEditor = import_react52.default.forwardRef(({
     };
     const handleEditorMouseLeave = () => {
       clearHoveredTableCell();
-      if (!rowResizeStateRef.current) {
+      if (!isRowResizing()) {
         clearAllTableResizeHover();
       }
     };
@@ -32357,75 +32414,16 @@ var UEditor = import_react52.default.forwardRef(({
       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;
-      }
-      setHoveredTableCell(cell);
-      const rowInfo = findTableRowNodeInfo(editor.view, row);
-      if (!rowInfo) return;
-      rowResizeStateRef.current = {
-        rowElement: row,
-        tableElement: table,
-        cellElement: cell,
-        cellIndex: cell.cellIndex,
-        rowPos: rowInfo.pos,
-        rowNode: rowInfo.node,
-        startY: event.clientY,
-        startHeight: row.getBoundingClientRect().height,
-        previewHeight: row.getBoundingClientRect().height
-      };
-      showRowGuide(table, row, cell);
-      document.body.style.cursor = "row-resize";
-      event.preventDefault();
-      event.stopPropagation();
+      beginResize(event, table, row, cell);
     };
     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.previewHeight) {
-        document.body.style.cursor = "row-resize";
-        showRowGuide(state.tableElement, state.rowElement, state.cellElement);
-        return;
-      }
-      state.previewHeight = nextHeight;
-      applyPreviewRowHeight(state.rowElement, nextHeight);
-      document.body.style.cursor = "row-resize";
-      showRowGuide(state.tableElement, state.rowElement, state.cellElement);
+      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))
-      );
-      const rowNode = editor.view.state.doc.nodeAt(state.rowPos) ?? state.rowNode;
-      clearPreviewRowHeight(state.rowElement);
-      if (rowNode.attrs.rowHeight !== nextHeight) {
-        const tr = editor.view.state.tr;
-        tr.setNodeMarkup(state.rowPos, void 0, {
-          ...rowNode.attrs,
-          rowHeight: nextHeight
-        });
-        editor.view.dispatch(tr);
-      }
-      rowResizeStateRef.current = null;
-      document.body.style.cursor = "";
-      clearHoveredTableCell();
-      clearAllTableResizeHover();
+      handleRowResizePointerUp(event);
     };
     const handleWindowBlur = () => {
-      const state = rowResizeStateRef.current;
-      if (!state) return;
-      clearPreviewRowHeight(state.rowElement);
-      rowResizeStateRef.current = null;
-      document.body.style.cursor = "";
-      clearHoveredTableCell();
-      clearAllTableResizeHover();
+      cancelResize();
     };
     proseMirror.addEventListener("mousemove", handleEditorMouseMove);
     proseMirror.addEventListener("mouseleave", handleEditorMouseLeave);
@@ -32464,13 +32462,152 @@ var UEditor = import_react52.default.forwardRef(({
       editor.off("selectionUpdate", syncActiveTableCellFromSelection);
       editor.off("focus", syncActiveTableCellFromSelection);
       window.clearTimeout(selectionSyncTimeoutId);
+      if (tableLayoutSyncFrameRef.current !== null) {
+        window.cancelAnimationFrame(tableLayoutSyncFrameRef.current);
+        tableLayoutSyncFrameRef.current = null;
+      }
+      cleanupRowResize();
       document.body.style.cursor = "";
       clearActiveTableCell();
       clearHoveredTableCell();
       clearAllTableResizeHover();
-      rowResizeStateRef.current = null;
     };
-  }, [clearActiveTableCell, clearAllTableResizeHover, clearHoveredTableCell, editor, hideColumnGuide, hideRowGuide, 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,
+    tableRowGuideRef,
+    activeTableCellHighlightRef
+  };
+}
+
+// src/components/UEditor/UEditor.tsx
+var import_jsx_runtime84 = require("react/jsx-runtime");
+var UEditor = import_react54.default.forwardRef(({
+  content = "",
+  onChange,
+  onHtmlChange,
+  onJsonChange,
+  uploadImage,
+  uploadImageForSave,
+  uploadImageConcurrency = 3,
+  imageInsertMode = "base64",
+  maxImageFileSize,
+  allowedImageMimeTypes,
+  fallbackToDataUrl,
+  placeholder,
+  className,
+  editable = true,
+  autofocus = false,
+  showToolbar = true,
+  showBubbleMenu = true,
+  showFloatingMenu = false,
+  showCharacterCount = true,
+  maxCharacters,
+  minHeight = "200px",
+  maxHeight = "auto",
+  variant = "default",
+  fontFamilies,
+  fontSizes,
+  lineHeights,
+  letterSpacings
+}, ref) => {
+  const t = useSmartTranslations("UEditor");
+  const effectivePlaceholder = placeholder ?? t("placeholder");
+  const inFlightPrepareRef = (0, import_react54.useRef)(null);
+  const lastAppliedContentRef = (0, import_react54.useRef)(content ?? "");
+  const extensions = (0, import_react54.useMemo)(
+    () => buildUEditorExtensions({
+      placeholder: effectivePlaceholder,
+      translate: t,
+      maxCharacters,
+      uploadImage,
+      imageInsertMode,
+      maxImageFileSize,
+      allowedImageMimeTypes,
+      fallbackToDataUrl,
+      editable
+    }),
+    [effectivePlaceholder, t, maxCharacters, uploadImage, imageInsertMode, maxImageFileSize, allowedImageMimeTypes, fallbackToDataUrl, editable]
+  );
+  const editor = (0, import_react55.useEditor)({
+    immediatelyRender: false,
+    extensions,
+    content,
+    editable,
+    autofocus,
+    editorProps: {
+      handleDOMEvents: {
+        keydown: (_view, event) => {
+          if (!(event instanceof KeyboardEvent)) return false;
+          if (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "ArrowDown") {
+            event.stopPropagation();
+          }
+          return false;
+        },
+        click: (view, event) => {
+          if (!(event instanceof MouseEvent)) return false;
+          if (event.button !== 0) return false;
+          const target = resolveEventElement(event.target);
+          const anchor = target?.closest?.("a[href]");
+          const href = anchor?.getAttribute("href") ?? "";
+          if (!href) return false;
+          if (!view.state.selection.empty) return false;
+          event.preventDefault();
+          event.stopPropagation();
+          window.open(href, "_blank", "noopener,noreferrer");
+          return true;
+        }
+      },
+      attributes: {
+        class: UEDITOR_PROSEMIRROR_CLASS_NAME
+      }
+    },
+    onUpdate: ({ editor: editor2 }) => {
+      const html = editor2.getHTML();
+      onChange?.(html);
+      onHtmlChange?.(html);
+      onJsonChange?.(editor2.getJSON());
+    }
+  });
+  const {
+    editorContentRef,
+    tableColumnGuideRef,
+    tableRowGuideRef,
+    activeTableCellHighlightRef
+  } = useUEditorTableInteractions(editor);
+  (0, import_react54.useImperativeHandle)(
+    ref,
+    () => ({
+      prepareContentForSave: async ({ throwOnError = false } = {}) => {
+        if (!inFlightPrepareRef.current) {
+          const htmlSnapshot = editor?.getHTML() ?? content ?? "";
+          inFlightPrepareRef.current = prepareUEditorContentForSave({
+            html: htmlSnapshot,
+            uploadImageForSave,
+            uploadConcurrency: uploadImageConcurrency
+          }).finally(() => {
+            inFlightPrepareRef.current = null;
+          });
+        }
+        const result = await inFlightPrepareRef.current;
+        if (throwOnError && result.errors.length > 0) {
+          throw new UEditorPrepareContentForSaveError(result);
+        }
+        return result;
+      }
+    }),
+    [content, editor, uploadImageForSave, uploadImageConcurrency]
+  );
+  (0, import_react54.useEffect)(() => {
+    if (!editor) return;
+    const nextContent = content ?? "";
+    if (lastAppliedContentRef.current === nextContent) return;
+    lastAppliedContentRef.current = nextContent;
+    if (editor.getHTML() !== nextContent) {
+      editor.commands.setContent(nextContent, { emitUpdate: false });
+    }
+  }, [content, editor]);
   if (!editor) {
     return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
       "div",
@@ -32553,7 +32690,7 @@ var UEditor = import_react52.default.forwardRef(({
               ),
               editable && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(TableControls, { editor, containerRef: editorContentRef }),
               /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-                import_react53.EditorContent,
+                import_react55.EditorContent,
                 {
                   editor,
                   className: "min-h-full"