@underverse-ui/underverse 1.0.101 → 1.0.102

package/dist/index.js

@@ -23109,7 +23109,7 @@ function useLocale2() {
 }
 
 // src/components/UEditor/UEditor.tsx
-import React74, { useEffect as useEffect35, useImperativeHandle as useImperativeHandle3, useMemo as useMemo24, useRef as useRef31 } from "react";
+import React75, { useEffect as useEffect36, useImperativeHandle as useImperativeHandle3, useMemo as useMemo24, useRef as useRef32 } from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 
 // src/components/UEditor/extensions.ts
@@ -30715,6 +30715,111 @@ import {
   Table as TableIcon2,
   Trash2 as Trash24
 } from "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
 import { Fragment as Fragment27, jsx as jsx82, jsxs as jsxs70 } from "react/jsx-runtime";
 var FALLBACK_TABLE_ROW_HEIGHT = 44;
 var FALLBACK_TABLE_COLUMN_WIDTH = 160;
@@ -31014,6 +31119,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);
@@ -31025,6 +31131,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);
@@ -31708,167 +31815,163 @@ function TableControls({ editor, containerRef }) {
   ] });
 }
 
-// src/components/UEditor/UEditor.tsx
-import { jsx as jsx83, jsxs as jsxs71 } from "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`;
-    }
-  });
-}
-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 = "";
-    }
-  });
-}
-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
-  };
-}
-var UEditor = React74.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 = useRef31(null);
-  const lastAppliedContentRef = useRef31(content ?? "");
+// 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
+import React74, { useEffect as useEffect35, useRef as useRef31 } from "react";
+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 proseMirror = editorContentRef.current?.querySelector(".ProseMirror");
@@ -31910,6 +32013,14 @@ var UEditor = React74.forwardRef(({
     highlight.style.width = `${metrics.width}px`;
     highlight.style.height = `${metrics.height}px`;
   }, []);
+  const scheduleTableLayoutSync = React74.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 = React74.useCallback((cell) => {
     if (activeTableCellRef.current === cell) return;
     activeTableCellRef.current = cell;
@@ -31951,239 +32062,49 @@ var UEditor = React74.forwardRef(({
     surface.classList.add("resize-row-cursor");
     setEditorResizeCursor("row-resize");
   }, [setEditorResizeCursor]);
-  const extensions = useMemo24(
-    () => buildUEditorExtensions({
-      placeholder: effectivePlaceholder,
-      translate: t,
-      maxCharacters,
-      uploadImage,
-      imageInsertMode,
-      maxImageFileSize,
-      allowedImageMimeTypes,
-      fallbackToDataUrl,
-      editable
-    }),
-    [effectivePlaceholder, t, maxCharacters, uploadImage, imageInsertMode, maxImageFileSize, allowedImageMimeTypes, fallbackToDataUrl, editable]
-  );
-  const editor = 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 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(() => {
     if (!editor) return;
     setActiveTableCell(getSelectionTableCell(editor.view));
   }, [editor, setActiveTableCell]);
-  useImperativeHandle3(
-    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]
-  );
-  useEffect35(() => {
-    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]);
   useEffect35(() => {
     if (!editor) return void 0;
     const proseMirror = editor.view.dom;
@@ -32273,6 +32194,7 @@ var UEditor = React74.forwardRef(({
       setHoveredTableCell(cell);
       const rowInfo = findTableRowNodeInfo(editor.view, row);
       if (!rowInfo) return;
+      const startHeight = row.getBoundingClientRect().height;
       rowResizeStateRef.current = {
         rowElement: row,
         tableElement: table,
@@ -32281,8 +32203,9 @@ var UEditor = React74.forwardRef(({
         rowPos: rowInfo.pos,
         rowNode: rowInfo.node,
         startY: event.clientY,
-        startHeight: row.getBoundingClientRect().height,
-        previewHeight: row.getBoundingClientRect().height
+        startHeight,
+        previewHeight: startHeight,
+        pendingHeight: startHeight
       };
       showRowGuide(table, row, cell);
       document.body.style.cursor = "row-resize";
@@ -32296,15 +32219,14 @@ var UEditor = React74.forwardRef(({
         MIN_TABLE_ROW_HEIGHT,
         Math.round(state.startHeight + (event.clientY - state.startY))
       );
-      if (nextHeight === state.previewHeight) {
+      if (nextHeight === state.pendingHeight) {
         document.body.style.cursor = "row-resize";
         showRowGuide(state.tableElement, state.rowElement, state.cellElement);
         return;
       }
-      state.previewHeight = nextHeight;
-      applyPreviewRowHeight(state.rowElement, nextHeight);
+      state.pendingHeight = nextHeight;
       document.body.style.cursor = "row-resize";
-      showRowGuide(state.tableElement, state.rowElement, state.cellElement);
+      scheduleRowResizeCommit();
     };
     const handlePointerUp = (event) => {
       const state = rowResizeStateRef.current;
@@ -32313,11 +32235,17 @@ var UEditor = React74.forwardRef(({
         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);
+      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(state.rowPos, void 0, {
+        tr.setNodeMarkup(latestState.rowPos, void 0, {
           ...rowNode.attrs,
           rowHeight: nextHeight
         });
@@ -32327,15 +32255,20 @@ var UEditor = React74.forwardRef(({
       document.body.style.cursor = "";
       clearHoveredTableCell();
       clearAllTableResizeHover();
+      scheduleTableLayoutSync();
     };
     const handleWindowBlur = () => {
       const state = rowResizeStateRef.current;
       if (!state) return;
-      clearPreviewRowHeight(state.rowElement);
+      if (rowResizeCommitFrameRef.current !== null) {
+        window.cancelAnimationFrame(rowResizeCommitFrameRef.current);
+        rowResizeCommitFrameRef.current = null;
+      }
       rowResizeStateRef.current = null;
       document.body.style.cursor = "";
       clearHoveredTableCell();
       clearAllTableResizeHover();
+      scheduleTableLayoutSync();
     };
     proseMirror.addEventListener("mousemove", handleEditorMouseMove);
     proseMirror.addEventListener("mouseleave", handleEditorMouseLeave);
@@ -32374,13 +32307,156 @@ var UEditor = React74.forwardRef(({
       editor.off("selectionUpdate", syncActiveTableCellFromSelection);
       editor.off("focus", syncActiveTableCellFromSelection);
       window.clearTimeout(selectionSyncTimeoutId);
+      if (tableLayoutSyncFrameRef.current !== null) {
+        window.cancelAnimationFrame(tableLayoutSyncFrameRef.current);
+        tableLayoutSyncFrameRef.current = null;
+      }
+      if (rowResizeCommitFrameRef.current !== null) {
+        window.cancelAnimationFrame(rowResizeCommitFrameRef.current);
+        rowResizeCommitFrameRef.current = null;
+      }
       document.body.style.cursor = "";
       clearActiveTableCell();
       clearHoveredTableCell();
       clearAllTableResizeHover();
       rowResizeStateRef.current = null;
     };
-  }, [clearActiveTableCell, clearAllTableResizeHover, clearHoveredTableCell, editor, hideColumnGuide, hideRowGuide, setHoveredTableCell, showColumnGuide, showRowGuide, syncActiveTableCellFromSelection, updateActiveCellHighlight]);
+  }, [clearActiveTableCell, clearAllTableResizeHover, clearHoveredTableCell, commitRowResizePreview, editor, hideColumnGuide, hideRowGuide, scheduleRowResizeCommit, scheduleTableLayoutSync, setHoveredTableCell, showColumnGuide, showRowGuide, syncActiveTableCellFromSelection, updateActiveCellHighlight]);
+  return {
+    editorContentRef,
+    tableColumnGuideRef,
+    tableRowGuideRef,
+    activeTableCellHighlightRef
+  };
+}
+
+// src/components/UEditor/UEditor.tsx
+import { jsx as jsx83, jsxs as jsxs71 } from "react/jsx-runtime";
+var UEditor = React75.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 = useRef32(null);
+  const lastAppliedContentRef = useRef32(content ?? "");
+  const extensions = useMemo24(
+    () => buildUEditorExtensions({
+      placeholder: effectivePlaceholder,
+      translate: t,
+      maxCharacters,
+      uploadImage,
+      imageInsertMode,
+      maxImageFileSize,
+      allowedImageMimeTypes,
+      fallbackToDataUrl,
+      editable
+    }),
+    [effectivePlaceholder, t, maxCharacters, uploadImage, imageInsertMode, maxImageFileSize, allowedImageMimeTypes, fallbackToDataUrl, editable]
+  );
+  const editor = 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);
+  useImperativeHandle3(
+    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]
+  );
+  useEffect36(() => {
+    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__ */ jsx83(
       "div",