@underverse-ui/underverse 1.0.157 → 1.0.158

package/dist/index.cjs

@@ -6042,7 +6042,7 @@ var Modal = ({
   const modalContent = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
-      className: cn("fixed inset-0 z-9999 flex items-center justify-center p-4 md:p-6", overlayClassName),
+      className: cn("fixed inset-0 z-[9999] flex items-center justify-center p-4 md:p-6", overlayClassName),
       style: { overscrollBehavior: "contain" },
       onMouseDown: handleOverlayMouseDown,
       onMouseUp: handleOverlayMouseUp,
@@ -27217,6 +27217,111 @@ var import_react55 = require("react");
 var import_extension_image = __toESM(require("@tiptap/extension-image"), 1);
 var import_core9 = require("@tiptap/core");
 var import_react56 = require("@tiptap/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/resizable-image.tsx
 var import_jsx_runtime82 = require("react/jsx-runtime");
 var MIN_IMAGE_SIZE_PX = 40;
 var IMAGE_LAYOUTS = /* @__PURE__ */ new Set(["block", "left", "right"]);
@@ -27298,6 +27403,7 @@ function ResizableImageNodeView(props) {
   const { node, selected, updateAttributes, editor, getPos } = props;
   const wrapperRef = (0, import_react55.useRef)(null);
   const imgRef = (0, import_react55.useRef)(null);
+  const resizePreviewRef = (0, import_react55.useRef)(null);
   const [isHovered, setIsHovered] = (0, import_react55.useState)(false);
   const [isResizing, setIsResizing] = (0, import_react55.useState)(false);
   const widthAttr = toNullableNumber(node.attrs["width"]);
@@ -27305,11 +27411,59 @@ function ResizableImageNodeView(props) {
   const textAlign = String(node.attrs["textAlign"] ?? "");
   const imageLayout = parseImageLayout(node.attrs["imageLayout"]);
   const dragStateRef = (0, import_react55.useRef)(null);
+  const dispatchTableLayoutChange2 = () => {
+    editor.view.dom.dispatchEvent(new CustomEvent(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT, { bubbles: true }));
+  };
+  const getImageDisplayStyle = (width, height) => ({
+    width: width ? `${width}px` : void 0,
+    height: width && height ? "auto" : height ? `${height}px` : void 0,
+    aspectRatio: width && height ? `${width} / ${height}` : void 0
+  });
+  const setResizePreviewStyle = (width, height, visible, resetBase = false) => {
+    const preview = resizePreviewRef.current;
+    if (!preview) return;
+    const drag = dragStateRef.current;
+    const baseW = resetBase || !drag ? Math.max(MIN_IMAGE_SIZE_PX, Math.round(width)) : drag.previewBaseW;
+    const baseH = resetBase || !drag ? Math.max(MIN_IMAGE_SIZE_PX, Math.round(height)) : drag.previewBaseH;
+    const scaleX = width / baseW;
+    const scaleY = height / baseH;
+    if (resetBase) {
+      preview.style.width = `${baseW}px`;
+      preview.style.height = `${baseH}px`;
+    }
+    preview.style.maxWidth = "none";
+    preview.style.maxHeight = "none";
+    preview.style.transform = visible ? `translateZ(0) scale(${scaleX}, ${scaleY})` : "translateZ(0) scale(1)";
+    preview.style.display = visible ? "block" : "none";
+  };
+  const applyPendingResizeFrame = () => {
+    const drag = dragStateRef.current;
+    if (!drag) return;
+    drag.frameId = null;
+    setResizePreviewStyle(drag.pendingW, drag.pendingH, true);
+  };
+  const scheduleResizeFrame = () => {
+    const drag = dragStateRef.current;
+    if (!drag || drag.frameId !== null) return;
+    drag.frameId = window.requestAnimationFrame(applyPendingResizeFrame);
+  };
+  (0, import_react55.useEffect)(() => {
+    return () => {
+      const drag = dragStateRef.current;
+      if (drag && drag.frameId !== null) {
+        window.cancelAnimationFrame(drag.frameId);
+      }
+      dragStateRef.current = null;
+      document.body.style.cursor = "";
+    };
+  }, []);
   (0, import_react55.useEffect)(() => {
     const img = imgRef.current;
     if (!img) return;
-    img.style.width = widthAttr ? `${widthAttr}px` : "";
-    img.style.height = heightAttr ? `${heightAttr}px` : "";
+    const displayStyle = getImageDisplayStyle(widthAttr, heightAttr);
+    img.style.width = typeof displayStyle.width === "string" ? displayStyle.width : "";
+    img.style.height = typeof displayStyle.height === "string" ? displayStyle.height : "";
+    img.style.aspectRatio = typeof displayStyle.aspectRatio === "string" ? displayStyle.aspectRatio : "";
   }, [widthAttr, heightAttr]);
   const selectNode = () => {
     const pos = typeof getPos === "function" ? getPos() : null;
@@ -27340,12 +27494,17 @@ function ResizableImageNodeView(props) {
       startY: event.clientY,
       startW,
       startH,
-      lastW: startW,
-      lastH: startH,
       aspect,
-      maxW: Math.max(MIN_IMAGE_SIZE_PX, maxW)
+      maxW: Math.max(MIN_IMAGE_SIZE_PX, maxW),
+      previewBaseW: Math.max(MIN_IMAGE_SIZE_PX, Math.round(startW)),
+      previewBaseH: Math.max(MIN_IMAGE_SIZE_PX, Math.round(startH)),
+      pendingW: startW,
+      pendingH: startH,
+      frameId: null
     };
     setIsResizing(true);
+    setResizePreviewStyle(startW, startH, true, true);
+    document.body.style.cursor = "nwse-resize";
     event.currentTarget.setPointerCapture(event.pointerId);
   };
   const onResizePointerMove = (event) => {
@@ -27358,19 +27517,33 @@ function ResizableImageNodeView(props) {
     const nextSize = Math.abs(dx) >= Math.abs(dy) ? sizeFromWidth(drag.startW + dx, drag.aspect, drag.maxW) : sizeFromHeight(drag.startH + dy, drag.aspect, drag.maxW);
     const nextW = nextSize.width;
     const nextH = nextSize.height;
-    drag.lastW = nextW;
-    drag.lastH = nextH;
-    img.style.width = `${Math.round(nextW)}px`;
-    img.style.height = `${Math.round(nextH)}px`;
+    drag.pendingW = nextW;
+    drag.pendingH = nextH;
+    scheduleResizeFrame();
   };
   const finishResize = () => {
     const drag = dragStateRef.current;
     dragStateRef.current = null;
     setIsResizing(false);
+    document.body.style.cursor = "";
     if (!drag) return;
+    if (drag.frameId !== null) {
+      window.cancelAnimationFrame(drag.frameId);
+      drag.frameId = null;
+    }
+    const img = imgRef.current;
+    const nextW = Math.round(drag.pendingW);
+    const nextH = Math.round(drag.pendingH);
+    setResizePreviewStyle(nextW, nextH, false);
+    if (img) {
+      img.style.width = `${nextW}px`;
+      img.style.height = "auto";
+      img.style.aspectRatio = `${nextW} / ${nextH}`;
+    }
+    dispatchTableLayoutChange2();
     updateAttributes({
-      width: Math.round(drag.lastW),
-      height: Math.round(drag.lastH),
+      width: nextW,
+      height: nextH,
       imageWidthPreset: null
     });
   };
@@ -27419,9 +27592,30 @@ function ResizableImageNodeView(props) {
               selected ? "ring-2 ring-primary/60 ring-offset-2 ring-offset-background" : "",
               isResizing ? "select-none" : ""
             ].join(" "),
+            style: getImageDisplayStyle(widthAttr, heightAttr)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+          "div",
+          {
+            ref: resizePreviewRef,
+            "aria-hidden": "true",
+            "data-ueditor-image-resize-preview": "",
+            className: [
+              "pointer-events-none absolute left-0 top-0 z-20 hidden rounded-lg",
+              "border border-primary/70 bg-background/30 bg-center bg-no-repeat bg-[length:100%_100%]",
+              "opacity-45 shadow-md ring-2 ring-primary/25 will-change-transform",
+              "select-none"
+            ].join(" "),
             style: {
               width: widthAttr ? `${widthAttr}px` : void 0,
-              height: heightAttr ? `${heightAttr}px` : void 0
+              height: heightAttr ? `${heightAttr}px` : void 0,
+              maxWidth: "none",
+              maxHeight: "none",
+              backgroundImage: `url("${String(node.attrs["src"] ?? "").replace(/"/g, "%22")}")`,
+              transform: "translateZ(0) scale(1)",
+              transformOrigin: "top left",
+              display: isResizing ? "block" : "none"
             }
           }
         ),
@@ -27429,6 +27623,7 @@ function ResizableImageNodeView(props) {
           "div",
           {
             "aria-hidden": "true",
+            "data-ueditor-image-resize-handle": "",
             onPointerDown: onResizePointerDown,
             onPointerMove: onResizePointerMove,
             onPointerUp: onResizePointerUp,
@@ -27685,109 +27880,6 @@ var letter_spacing_default = LetterSpacing;
 var import_extension_table = require("@tiptap/extension-table");
 var import_state6 = require("@tiptap/pm/state");
 
-// 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-align-utils.ts
 function findTableNodeInfoAtResolvedPos($pos) {
   for (let depth = $pos.depth; depth > 0; depth -= 1) {
@@ -28589,6 +28681,9 @@ var HIGHLIGHT_COLOR_SWATCHES = [
 function buildColorOptions(colors, prefix) {
   return colors.map((color, index) => ({ name: `${prefix} ${index + 1}`, color }));
 }
+function getSwatchCheckClass(color) {
+  return /^#(?:fff|ffffff)$/i.test(color) ? "text-foreground" : "text-white drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]";
+}
 var useEditorColors = () => {
   const t = useSmartTranslations("UEditor");
   const textColors = (0, import_react60.useMemo)(
@@ -28663,7 +28758,7 @@ var EditorColorPalette = ({
           currentColor === c.color ? "border-primary ring-2 ring-primary/25" : "border-border/70"
         ),
         style: { backgroundColor: c.color || "transparent" },
-        children: currentColor === c.color && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react47.Check, { className: "h-3.5 w-3.5 text-white drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]" }) })
+        children: currentColor === c.color && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react47.Check, { className: cn("h-3.5 w-3.5", getSwatchCheckClass(c.color)) }) })
       }
     ) }, `${c.name}-${c.color}`)) }),
     /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
@@ -31049,9 +31144,41 @@ function applyTableCellBackground(editor, color) {
   }
   editor.chain().focus().setCellAttribute("backgroundColor", value).run();
 }
+function applyTableCellAttribute(editor, name, value, options = {}) {
+  const shouldFocus = options.focus ?? true;
+  const { state, view } = editor;
+  const applied = (0, import_tables3.setCellAttr)(name, value)(state, view.dispatch.bind(view));
+  if (applied) {
+    if (shouldFocus) view.focus();
+    return;
+  }
+  const chain = editor.chain();
+  if (shouldFocus) chain.focus();
+  chain.setCellAttribute(name, value).run();
+}
+function BorderStylePreviewIcon({ style }) {
+  const isNone = style === "none";
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "relative inline-flex h-4 w-4 shrink-0 rounded-[2px]",
+        isNone ? "border border-border/70 bg-muted/30" : "border text-current"
+      ),
+      style: isNone ? void 0 : {
+        borderStyle: style,
+        borderWidth: style === "double" ? 3 : 2
+      },
+      children: isNone && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "absolute left-1/2 top-0 h-full w-px -translate-x-1/2 rotate-45 bg-muted-foreground/70" })
+    }
+  );
+}
 var BubbleMenuContent = ({
   editor,
   onKeepOpenChange,
+  onLinkInputOpenChange,
+  onRequestClose,
   fontSizes,
   lineHeights,
   initialShowLinkInput = false
@@ -31082,6 +31209,8 @@ var BubbleMenuContent = ({
   const currentCellBgColor = normalizeStyleValue(editor.getAttributes("tableCell").backgroundColor || editor.getAttributes("tableHeader").backgroundColor) || "";
   const currentCellFormula = normalizeStyleValue(editor.getAttributes("tableCell").formula || editor.getAttributes("tableHeader").formula) || "";
   const currentCellNumberFormat = normalizeStyleValue(editor.getAttributes("tableCell").numberFormat || editor.getAttributes("tableHeader").numberFormat) || "text";
+  const currentCellBorderStyle = editor.getAttributes("tableCell").borderStyle || editor.getAttributes("tableHeader").borderStyle || "solid";
+  const currentCellBorderWidth = editor.getAttributes("tableCell").borderWidth || editor.getAttributes("tableHeader").borderWidth || "1px";
   const isInTable2 = (0, import_tables3.isInTable)(editor.state);
   const canMergeCells = isInTable2 && editor.can().mergeCells();
   const canSplitCell = isInTable2 && editor.can().splitCell();
@@ -31095,6 +31224,15 @@ var BubbleMenuContent = ({
     () => (lineHeights ?? getDefaultLineHeights()).filter((option) => ["1.2", "1.5", "1.75"].includes(option.value)),
     [lineHeights]
   );
+  const borderColors = (0, import_react64.useMemo)(
+    () => [
+      highlightColors[0] ?? { name: t("colors.default"), color: "" },
+      { name: "Black", color: "#000000" },
+      { name: "White", color: "#ffffff" },
+      ...highlightColors.slice(1)
+    ],
+    [highlightColors, t]
+  );
   (0, import_react64.useEffect)(() => {
     setFontSizeDraft(currentFontSize.replace(/px$/i, ""));
   }, [currentFontSize]);
@@ -31115,7 +31253,55 @@ var BubbleMenuContent = ({
   };
   (0, import_react64.useEffect)(() => {
     onKeepOpenChange?.(showLinkInput);
-  }, [onKeepOpenChange, showLinkInput]);
+    onLinkInputOpenChange?.(showLinkInput);
+  }, [onKeepOpenChange, onLinkInputOpenChange, showLinkInput]);
+  (0, import_react64.useEffect)(() => {
+    onKeepOpenChange?.(Boolean(activeColorPalette));
+  }, [activeColorPalette, onKeepOpenChange]);
+  const closeTransientPanels = (0, import_react64.useCallback)(() => {
+    setActiveColorPalette(null);
+    setShowLinkInput(false);
+    onKeepOpenChange?.(false);
+    onLinkInputOpenChange?.(false);
+    onRequestClose?.();
+  }, [onKeepOpenChange, onLinkInputOpenChange, onRequestClose]);
+  const applyTableCellAttributeAndClose = (0, import_react64.useCallback)((name, value) => {
+    applyTableCellAttribute(editor, name, value, { focus: false });
+    closeTransientPanels();
+  }, [closeTransientPanels, editor]);
+  const clearTableCellBorderAndClose = (0, import_react64.useCallback)(() => {
+    applyTableCellAttribute(editor, "borderColor", null, { focus: false });
+    applyTableCellAttribute(editor, "borderStyle", null, { focus: false });
+    applyTableCellAttribute(editor, "borderWidth", null, { focus: false });
+    closeTransientPanels();
+  }, [closeTransientPanels, editor]);
+  const applyTableCellBorderColorAndClose = (0, import_react64.useCallback)((color) => {
+    const value = color || null;
+    applyTableCellAttribute(editor, "borderColor", value, { focus: false });
+    closeTransientPanels();
+  }, [closeTransientPanels, editor]);
+  const closeColorPalette = (0, import_react64.useCallback)(() => {
+    setActiveColorPalette(null);
+    onKeepOpenChange?.(false);
+  }, [onKeepOpenChange]);
+  const applyInlineColorAndClose = (0, import_react64.useCallback)((color) => {
+    if (activeColorPalette === "text") {
+      if (color === "inherit") {
+        editor.chain().focus().unsetColor().run();
+      } else {
+        editor.chain().focus().setColor(color).run();
+      }
+    } else if (activeColorPalette === "highlight") {
+      if (color === "") {
+        editor.chain().focus().unsetHighlight().run();
+      } else {
+        editor.chain().focus().toggleHighlight({ color }).run();
+      }
+    } else {
+      applyTableCellBackground(editor, color);
+    }
+    closeColorPalette();
+  }, [activeColorPalette, closeColorPalette, editor]);
   (0, import_react64.useEffect)(() => {
     if (!showLinkInput) return;
     const close2 = () => setShowLinkInput(false);
@@ -31147,51 +31333,53 @@ var BubbleMenuContent = ({
     const isTextPalette = activeColorPalette === "text";
     const isHighlightPalette = activeColorPalette === "highlight";
     if (activeColorPalette === "cell-border") {
-      const currentBorderStyle = editor.getAttributes("tableCell").borderStyle || editor.getAttributes("tableHeader").borderStyle || "solid";
-      const currentBorderWidth = editor.getAttributes("tableCell").borderWidth || editor.getAttributes("tableHeader").borderWidth || "1px";
       const currentBorderColor = editor.getAttributes("tableCell").borderColor || editor.getAttributes("tableHeader").borderColor || "currentColor";
-      return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex flex-col gap-2 p-2 w-56 text-sm", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex flex-col gap-2 p-2 w-56 text-sm", "data-ueditor-keep-open": true, children: [
         /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "font-semibold text-xs text-muted-foreground uppercase tracking-wider mb-1", children: t("tableMenu.cellBorder") || "Cell Borders" }),
         /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("label", { className: "text-xs text-muted-foreground", children: t("tableMenu.borderStyle") || "Border Style" }),
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
-            "select",
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "grid grid-cols-3 gap-1", role: "group", "aria-label": t("tableMenu.borderStyle") || "Border Style", children: [
+            ["solid", "Solid"],
+            ["dashed", "Dashed"],
+            ["dotted", "Dotted"],
+            ["double", "Double"],
+            ["none", "None"]
+          ].map(([style, label]) => /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+            "button",
             {
-              className: "flex h-8 w-full rounded-md border border-input bg-background px-2 py-1 text-xs ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-              value: currentBorderStyle,
-              onChange: (e) => {
-                const style = e.target.value;
-                editor.chain().focus().setCellAttribute("borderStyle", style).run();
-              },
+              type: "button",
+              "data-ueditor-close-on-select": true,
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: () => applyTableCellAttributeAndClose("borderStyle", style),
+              className: cn(
+                "inline-flex h-8 items-center justify-center gap-1.5 rounded-md px-2 text-xs font-medium transition-colors hover:bg-muted",
+                currentCellBorderStyle === style ? "bg-primary/10 text-primary" : "bg-muted/40 text-foreground"
+              ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("option", { value: "solid", children: "Solid" }),
-                /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("option", { value: "dashed", children: "Dashed" }),
-                /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("option", { value: "dotted", children: "Dotted" }),
-                /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("option", { value: "double", children: "Double" }),
-                /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("option", { value: "none", children: "None" })
+                /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(BorderStylePreviewIcon, { style }),
+                /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: label })
               ]
-            }
-          )
+            },
+            style
+          )) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("label", { className: "text-xs text-muted-foreground", children: t("tableMenu.borderWidth") || "Border Width" }),
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
-            "select",
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "grid grid-cols-4 gap-1", role: "group", "aria-label": t("tableMenu.borderWidth") || "Border Width", children: ["1px", "2px", "3px", "4px"].map((width) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+            "button",
             {
-              className: "flex h-8 w-full rounded-md border border-input bg-background px-2 py-1 text-xs ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-              value: currentBorderWidth,
-              onChange: (e) => {
-                const width = e.target.value;
-                editor.chain().focus().setCellAttribute("borderWidth", width).run();
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("option", { value: "1px", children: "1px" }),
-                /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("option", { value: "2px", children: "2px" }),
-                /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("option", { value: "3px", children: "3px" }),
-                /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("option", { value: "4px", children: "4px" })
-              ]
-            }
-          )
+              type: "button",
+              "data-ueditor-close-on-select": true,
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: () => applyTableCellAttributeAndClose("borderWidth", width),
+              className: cn(
+                "h-8 rounded-md px-2 text-xs font-medium transition-colors hover:bg-muted",
+                currentCellBorderWidth === width ? "bg-primary/10 text-primary" : "bg-muted/40 text-foreground"
+              ),
+              children: width
+            },
+            width
+          )) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
           "button",
@@ -31213,70 +31401,36 @@ var BubbleMenuContent = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex items-center justify-between gap-2 mt-2 pt-2 border-t border-border", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                editor.chain().focus().setCellAttribute("borderColor", null).setCellAttribute("borderStyle", null).setCellAttribute("borderWidth", null).run();
-                setActiveColorPalette(null);
-              },
-              className: "text-xs text-destructive hover:underline",
-              children: t("tableMenu.clearBorder") || "Clear Border"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-            "button",
-            {
-              type: "button",
-              onClick: () => setActiveColorPalette(null),
-              className: "text-xs font-medium text-primary hover:underline",
-              children: t("tableMenu.done") || "Done"
-            }
-          )
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "flex items-center justify-between gap-2 mt-2 pt-2 border-t border-border", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+          "button",
+          {
+            type: "button",
+            "data-ueditor-close-on-select": true,
+            onClick: clearTableCellBorderAndClose,
+            className: "text-xs text-destructive hover:underline",
+            children: t("tableMenu.clearBorder") || "Clear Border"
+          }
+        ) })
       ] });
     }
     if (activeColorPalette === "cell-border-color") {
       const currentBorderColor = normalizeStyleValue(editor.getAttributes("tableCell").borderColor || editor.getAttributes("tableHeader").borderColor) || "";
-      return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "w-56", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "w-56", "data-ueditor-keep-open": true, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
         EditorColorPalette,
         {
-          colors: highlightColors,
+          colors: borderColors,
           currentColor: currentBorderColor,
-          onSelect: (color) => {
-            const value = color || null;
-            editor.chain().focus().setCellAttribute("borderColor", value).run();
-            setActiveColorPalette("cell-border");
-          },
+          onSelect: applyTableCellBorderColorAndClose,
           label: t("tableMenu.borderColor") || "Border Color"
         }
       ) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "w-56", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "w-56", "data-ueditor-keep-open": true, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
       EditorColorPalette,
       {
         colors: isTextPalette ? textColors : highlightColors,
         currentColor: isTextPalette ? currentTextColor : isHighlightPalette ? currentHighlightColor : currentCellBgColor,
-        onSelect: (color) => {
-          if (isTextPalette) {
-            if (color === "inherit") {
-              editor.chain().focus().unsetColor().run();
-            } else {
-              editor.chain().focus().setColor(color).run();
-            }
-          } else if (isHighlightPalette) {
-            if (color === "") {
-              editor.chain().focus().unsetHighlight().run();
-            } else {
-              editor.chain().focus().toggleHighlight({ color }).run();
-            }
-          } else {
-            applyTableCellBackground(editor, color);
-          }
-          setActiveColorPalette(null);
-        },
+        onSelect: applyInlineColorAndClose,
         label: isTextPalette ? t("colors.textColor") : isHighlightPalette ? t("colors.highlight") : t("tableMenu.cellBackground") || "Cell background"
       }
     ) });
@@ -31601,6 +31755,9 @@ var BubbleMenuContent = ({
       /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
         ToolbarButton,
         {
+          onMouseDown: () => {
+            onKeepOpenChange?.(true);
+          },
           onClick: () => setActiveColorPalette("cell-border"),
           active: Boolean(
             editor.getAttributes("tableCell").borderColor || editor.getAttributes("tableHeader").borderColor || editor.getAttributes("tableCell").borderStyle || editor.getAttributes("tableHeader").borderStyle || editor.getAttributes("tableCell").borderWidth || editor.getAttributes("tableHeader").borderWidth
@@ -31682,14 +31839,27 @@ var CustomBubbleMenu = ({
   const SHOW_DELAY_MS = 180;
   const BUBBLE_MENU_OFFSET = 16;
   const [isVisible, setIsVisible] = (0, import_react64.useState)(false);
+  const [linkInputOpen, setLinkInputOpen] = (0, import_react64.useState)(false);
   const [position, setPosition] = (0, import_react64.useState)({ top: 0, left: 0 });
   const menuRef = (0, import_react64.useRef)(null);
   const keepOpenRef = (0, import_react64.useRef)(false);
   const showTimeoutRef = (0, import_react64.useRef)(null);
+  const suppressShowUntilRef = (0, import_react64.useRef)(0);
   const setKeepOpen = (0, import_react64.useCallback)((next) => {
     keepOpenRef.current = next;
+    if (!next) setLinkInputOpen(false);
     if (next) setIsVisible(true);
   }, []);
+  const closeBubbleMenu = (0, import_react64.useCallback)(() => {
+    suppressShowUntilRef.current = Date.now() + 1e3;
+    keepOpenRef.current = false;
+    setLinkInputOpen(false);
+    setIsVisible(false);
+    if (showTimeoutRef.current) {
+      clearTimeout(showTimeoutRef.current);
+      showTimeoutRef.current = null;
+    }
+  }, []);
   (0, import_react64.useEffect)(() => {
     const clearShowTimeout = () => {
       if (showTimeoutRef.current) {
@@ -31701,6 +31871,11 @@ var CustomBubbleMenu = ({
       const { state, view } = editor;
       const { from, to, empty } = state.selection;
       const isLinkActive = editor.isActive("link");
+      if (Date.now() < suppressShowUntilRef.current) {
+        clearShowTimeout();
+        setIsVisible(false);
+        return;
+      }
       if (!keepOpenRef.current && (empty && !isLinkActive || !view.hasFocus())) {
         clearShowTimeout();
         setIsVisible(false);
@@ -31712,6 +31887,11 @@ var CustomBubbleMenu = ({
         start = view.coordsAtPos(from);
         end = view.coordsAtPos(to);
       } catch {
+        if (keepOpenRef.current) {
+          clearShowTimeout();
+          setIsVisible(true);
+          return;
+        }
         clearShowTimeout();
         setIsVisible(false);
         return;
@@ -31769,15 +31949,34 @@ var CustomBubbleMenu = ({
           left: `${position.left}px`,
           transform: "translate(-50%, -100%)"
         },
-        onMouseDown: (e) => e.preventDefault(),
-        children: editor.isActive("link") && !keepOpenRef.current ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(LinkPreviewContent, { editor, onEdit: () => setKeepOpen(true) }) : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        onMouseDown: (e) => {
+          const target = e.target;
+          if (target?.closest?.("[data-ueditor-close-on-select]")) {
+            keepOpenRef.current = false;
+          } else if (target?.closest?.("[data-ueditor-keep-open]")) {
+            keepOpenRef.current = true;
+          }
+          e.preventDefault();
+        },
+        children: editor.isActive("link") && !keepOpenRef.current && !linkInputOpen ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+          LinkPreviewContent,
+          {
+            editor,
+            onEdit: () => {
+              setLinkInputOpen(true);
+              setKeepOpen(true);
+            }
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
           BubbleMenuContent,
           {
             editor,
             onKeepOpenChange: setKeepOpen,
+            onLinkInputOpenChange: setLinkInputOpen,
+            onRequestClose: closeBubbleMenu,
             fontSizes,
             lineHeights,
-            initialShowLinkInput: keepOpenRef.current
+            initialShowLinkInput: linkInputOpen
           }
         )
       }
@@ -38213,6 +38412,7 @@ function useUEditorTableInteractions(editor, editable = true) {
     proseMirror.addEventListener("keyup", handleSelectionChange);
     proseMirror.addEventListener("focusin", handleSelectionChange);
     document.addEventListener("selectionchange", handleSelectionChange);
+    surface?.addEventListener(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT, handleActiveCellLayoutChange);
     surface?.addEventListener("scroll", handleActiveCellLayoutChange, scrollListenerOptions);
     window.addEventListener("resize", handleActiveCellLayoutChange);
     document.addEventListener("pointermove", handlePointerMove);
@@ -38232,6 +38432,7 @@ function useUEditorTableInteractions(editor, editable = true) {
       proseMirror.removeEventListener("keyup", handleSelectionChange);
       proseMirror.removeEventListener("focusin", handleSelectionChange);
       document.removeEventListener("selectionchange", handleSelectionChange);
+      surface?.removeEventListener(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT, handleActiveCellLayoutChange);
       surface?.removeEventListener("scroll", handleActiveCellLayoutChange, scrollListenerOptions);
       window.removeEventListener("resize", handleActiveCellLayoutChange);
       document.removeEventListener("pointermove", handlePointerMove);
@@ -38266,6 +38467,144 @@ function useUEditorTableInteractions(editor, editable = true) {
 var import_react69 = __toESM(require("react"), 1);
 var import_react70 = require("@tiptap/react");
 var import_lucide_react54 = require("lucide-react");
+
+// src/components/UEditor/preview-html.ts
+var DEFAULT_TABLE_COLUMN_WIDTH = 100;
+var TIPTAP_TABLE_MIN_COLUMN_WIDTH = 25;
+function parsePixelWidth2(value) {
+  if (!value) return null;
+  const match = String(value).match(/(?:^|[\s:])(\d+(?:\.\d+)?)px\b/i) ?? String(value).match(/^(\d+(?:\.\d+)?)$/);
+  if (!match) return null;
+  const parsed = Number.parseFloat(match[1] ?? match[0]);
+  return Number.isFinite(parsed) && parsed > 0 ? Math.round(parsed) : null;
+}
+function parseStyleWidth(style) {
+  return parsePixelWidth2(style.width) ?? parsePixelWidth2(style.minWidth);
+}
+function parseStyleHeight(style) {
+  return parsePixelWidth2(style.height) ?? parsePixelWidth2(style.minHeight);
+}
+function getCellColspan(cell) {
+  return Math.max(1, cell.colSpan || Number.parseInt(cell.getAttribute("colspan") || "1", 10) || 1);
+}
+function getCellWidths(cell) {
+  const dataColwidth = cell.getAttribute("data-colwidth") || cell.getAttribute("colwidth");
+  if (dataColwidth) {
+    const widths = dataColwidth.split(/[,\s]+/).map((part) => parsePixelWidth2(part)).filter((width2) => typeof width2 === "number");
+    if (widths.length > 0) return widths;
+  }
+  const width = parsePixelWidth2(cell.getAttribute("width")) ?? parseStyleWidth(cell.style);
+  if (!width) return null;
+  const colspan = getCellColspan(cell);
+  return Array.from({ length: colspan }, () => Math.max(DEFAULT_TABLE_COLUMN_WIDTH, Math.round(width / colspan)));
+}
+function getColumnCount(table) {
+  const colCount = table.querySelectorAll("colgroup > col").length;
+  if (colCount > 0) return colCount;
+  return Math.max(
+    0,
+    ...Array.from(table.rows).map(
+      (row) => Array.from(row.cells).reduce((count, cell) => count + getCellColspan(cell), 0)
+    )
+  );
+}
+function resolveColumnWidths(table) {
+  const columnCount = getColumnCount(table);
+  if (columnCount <= 0) return [];
+  const widths = Array.from({ length: columnCount }, () => DEFAULT_TABLE_COLUMN_WIDTH);
+  const cols = Array.from(table.querySelectorAll("colgroup > col"));
+  cols.slice(0, columnCount).forEach((col, index) => {
+    const width = parsePixelWidth2(col.getAttribute("width")) ?? parseStyleWidth(col.style);
+    if (width && width > TIPTAP_TABLE_MIN_COLUMN_WIDTH) {
+      widths[index] = width;
+    }
+  });
+  Array.from(table.rows).forEach((row) => {
+    let columnIndex = 0;
+    Array.from(row.cells).forEach((cell) => {
+      const cellWidths = getCellWidths(cell);
+      if (cellWidths) {
+        cellWidths.slice(0, getCellColspan(cell)).forEach((width, offset) => {
+          if (width > TIPTAP_TABLE_MIN_COLUMN_WIDTH && columnIndex + offset < widths.length) {
+            widths[columnIndex + offset] = width;
+          }
+        });
+      }
+      columnIndex += getCellColspan(cell);
+    });
+  });
+  return widths;
+}
+function setStyleProperty(element, property, value) {
+  element.style.setProperty(property, value);
+}
+function resolveRowHeight(row) {
+  const explicitRowHeight = parsePixelWidth2(row.getAttribute("data-row-height")) ?? parseStyleHeight(row.style);
+  if (explicitRowHeight) return Math.max(MIN_TABLE_ROW_HEIGHT, explicitRowHeight);
+  const cellHeight = Array.from(row.cells).reduce((maxHeight, cell) => {
+    const height = parsePixelWidth2(cell.getAttribute("height")) ?? parseStyleHeight(cell.style);
+    return height ? Math.max(maxHeight, height) : maxHeight;
+  }, 0);
+  return Math.max(MIN_TABLE_ROW_HEIGHT, cellHeight);
+}
+function normalizePreviewRowHeight(row) {
+  const rowHeight = resolveRowHeight(row);
+  row.style.height = `${rowHeight}px`;
+  row.style.minHeight = `${rowHeight}px`;
+  Array.from(row.cells).forEach((cell) => {
+    cell.style.height = `${rowHeight}px`;
+    cell.style.minHeight = `${rowHeight}px`;
+  });
+}
+function normalizePreviewTable(table) {
+  const widths = resolveColumnWidths(table);
+  if (widths.length === 0) return;
+  let colgroup = table.querySelector("colgroup");
+  if (!colgroup) {
+    colgroup = document.createElement("colgroup");
+    table.insertBefore(colgroup, table.firstChild);
+  }
+  while (colgroup.children.length < widths.length) {
+    colgroup.appendChild(document.createElement("col"));
+  }
+  Array.from(colgroup.children).forEach((child, index) => {
+    if (child.tagName.toLowerCase() !== "col") return;
+    const col = child;
+    if (index >= widths.length) {
+      child.remove();
+      return;
+    }
+    col.style.width = `${widths[index]}px`;
+    col.style.minWidth = `${widths[index]}px`;
+    col.setAttribute("width", String(widths[index]));
+  });
+  const tableWidth = widths.reduce((sum, width) => sum + width, 0);
+  setStyleProperty(table, "width", `${tableWidth}px`);
+  setStyleProperty(table, "min-width", `${tableWidth}px`);
+  setStyleProperty(table, "table-layout", "fixed");
+  Array.from(table.rows).forEach((row) => {
+    let columnIndex = 0;
+    normalizePreviewRowHeight(row);
+    Array.from(row.cells).forEach((cell) => {
+      const colspan = getCellColspan(cell);
+      const cellWidth = widths.slice(columnIndex, columnIndex + colspan).reduce((sum, width) => sum + width, 0);
+      if (cellWidth > 0) {
+        cell.style.width = `${cellWidth}px`;
+        cell.style.minWidth = `${cellWidth}px`;
+      }
+      columnIndex += colspan;
+    });
+  });
+}
+function prepareUEditorPreviewHtml(html) {
+  if (typeof document === "undefined" || !html) return html;
+  const container = document.createElement("div");
+  container.innerHTML = html;
+  container.querySelectorAll("table").forEach((table) => normalizePreviewTable(table));
+  return container.innerHTML;
+}
+
+// src/components/UEditor/menu-bar.tsx
 var import_jsx_runtime94 = require("react/jsx-runtime");
 function MenuTableInsertGrid({
   insertLabel,
@@ -38748,6 +39087,10 @@ var MenuBar = ({
   const [showSourceDialog, setShowSourceDialog] = (0, import_react69.useState)(false);
   const [sourceHtml, setSourceHtml] = (0, import_react69.useState)("");
   const [showPreviewDialog, setShowPreviewDialog] = (0, import_react69.useState)(false);
+  const previewHtml = (0, import_react69.useMemo)(
+    () => showPreviewDialog ? prepareUEditorPreviewHtml(editor.getHTML()) : "",
+    [editor, showPreviewDialog]
+  );
   const openSourceDialog = () => {
     setSourceHtml(editor.getHTML());
     setShowSourceDialog(true);
@@ -38756,10 +39099,7 @@ var MenuBar = ({
     setShowPreviewDialog(true);
   };
   const handlePreview = () => {
-    if (onPreview) {
-      onPreview();
-      return;
-    }
+    if (onPreview?.(editor.getHTML()) === false) return;
     openPreviewDialog();
   };
   const applySourceHtml = () => {
@@ -38994,12 +39334,12 @@ var MenuBar = ({
           "div",
           {
             "data-testid": "preview-content",
-            className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-4 md:px-8",
+            className: "min-h-0 flex-1 overflow-y-auto overscroll-contain",
             children: editor.isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("p", { className: "text-muted-foreground text-sm", children: t("menubar.previewEmpty") }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
               "div",
               {
                 className: UEDITOR_PROSEMIRROR_CLASS_NAME,
-                dangerouslySetInnerHTML: { __html: editor.getHTML() }
+                dangerouslySetInnerHTML: { __html: previewHtml }
               }
             )
           }