@underverse-ui/underverse 1.0.156 → 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)(
@@ -28978,6 +29073,20 @@ function createEmptyCellNode(cellNode) {
 function createCellCopyForColumnDuplicate(cellNode) {
   return cellNode.type.create(cellNode.attrs, cellNode.content);
 }
+function createCellWithDuplicatedLogicalColumn(cellNode, widthIndex) {
+  const colspan = Math.max(1, Number(cellNode.attrs.colspan) || 1);
+  let nextColwidth = null;
+  if (Array.isArray(cellNode.attrs.colwidth)) {
+    nextColwidth = [...cellNode.attrs.colwidth];
+    const duplicateWidth = nextColwidth[widthIndex];
+    nextColwidth.splice(widthIndex + 1, 0, typeof duplicateWidth === "number" ? duplicateWidth : 0);
+  }
+  return cellNode.type.create({
+    ...cellNode.attrs,
+    colspan: colspan + 1,
+    ...nextColwidth ? { colwidth: nextColwidth } : null
+  }, cellNode.content);
+}
 function getTableRows(tableNode) {
   const rows = [];
   tableNode.forEach((rowNode, rowOffset) => {
@@ -29153,6 +29262,11 @@ function duplicateTableColumnAt(editor, columnIndex, cellPos) {
         return rect && rect.top === rowIndex && rect.left <= columnIndex && columnIndex < rect.right;
       });
       if (!sourceCell) return rowInfo.node;
+      const sourceRect = safeFindCell(map, sourceCell.relativePos);
+      if (sourceRect && (sourceRect.left < columnIndex || sourceRect.right > columnIndex + 1)) {
+        cells[sourceCell.index] = createCellWithDuplicatedLogicalColumn(sourceCell.node, columnIndex - sourceRect.left);
+        return rowInfo.node.type.create(rowInfo.node.attrs, cells);
+      }
       cells.splice(sourceCell.index + 1, 0, createCellCopyForColumnDuplicate(sourceCell.node));
       return rowInfo.node.type.create(rowInfo.node.attrs, cells);
     });
@@ -30452,6 +30566,25 @@ function getTableFormulaRecalculationOrder(graph) {
   }
   return { order, circular };
 }
+function getAffectedTableFormulaLabels(graph, changedLabels) {
+  const affected = /* @__PURE__ */ new Set();
+  const queue = Array.from(changedLabels, (label) => label.toUpperCase());
+  for (const label of queue) {
+    if (graph.formulas.has(label)) {
+      affected.add(label);
+    }
+  }
+  for (let index = 0; index < queue.length; index += 1) {
+    const label = queue[index];
+    if (!label) continue;
+    for (const dependent of graph.dependents.get(label) ?? []) {
+      if (affected.has(dependent)) continue;
+      affected.add(dependent);
+      queue.push(dependent);
+    }
+  }
+  return affected;
+}
 function evaluateBasicTableFormula(formula, getCellValue) {
   const normalized = normalizeTableFormula(formula);
   if (!normalized) {
@@ -30599,10 +30732,19 @@ var FormulaParser = class {
         const range = parseTableCellRange(token.value);
         if (!range) return { value: null, error: "invalid-reference" };
         for (const label of getTableCellRangeLabels(range)) {
+          if (name === "COUNT") {
+            const cellValue2 = this.readOptionalCellNumber(label);
+            if (cellValue2 != null) values.push(cellValue2);
+            continue;
+          }
           const cellValue = this.readCellNumber(label);
           if (cellValue.error) return cellValue;
           values.push(cellValue.value);
         }
+      } else if (name === "COUNT" && token.type === "cell") {
+        this.index += 1;
+        const cellValue = this.readOptionalCellNumber(token.value);
+        if (cellValue != null) values.push(cellValue);
       } else {
         const value = this.parseExpression();
         if (value.error) return value;
@@ -30616,7 +30758,7 @@ var FormulaParser = class {
       }
       return { value: null, error: "invalid-formula" };
     }
-    if (values.length === 0) {
+    if (values.length === 0 && name !== "COUNT") {
       return { value: null, error: "invalid-formula" };
     }
     if (name === "SUM") return { value: values.reduce((sum, value) => sum + value, 0), error: null };
@@ -30634,6 +30776,11 @@ var FormulaParser = class {
     }
     return { value: parsed, error: null };
   }
+  readOptionalCellNumber(label) {
+    const value = this.getCellValue(label);
+    const parsed = typeof value === "number" ? value : Number.parseFloat(String(value ?? "").trim());
+    return Number.isFinite(parsed) ? parsed : null;
+  }
   peekOperator(operators) {
     const token = this.tokens[this.index];
     return token?.type === "operator" && operators.includes(token.value) ? token : null;
@@ -30697,6 +30844,41 @@ function getSelectionTableCellNode(editor) {
   }
   return null;
 }
+function getSelectionTableInfo(editor) {
+  const { $from } = editor.state.selection;
+  for (let depth = $from.depth; depth > 0; depth -= 1) {
+    const node = $from.node(depth);
+    if (node.type.name === "table") {
+      return {
+        node,
+        pos: $from.before(depth)
+      };
+    }
+  }
+  return null;
+}
+function getSelectionTableCellLabel(editor) {
+  const { $from } = editor.state.selection;
+  let cellDepth = -1;
+  let tableDepth = -1;
+  for (let depth = $from.depth; depth > 0; depth -= 1) {
+    const node = $from.node(depth);
+    if (cellDepth < 0 && (node.type.name === "tableCell" || node.type.name === "tableHeader")) {
+      cellDepth = depth;
+    }
+    if (node.type.name === "table") {
+      tableDepth = depth;
+      break;
+    }
+  }
+  if (cellDepth < 0 || tableDepth < 0) return null;
+  const tableNode = $from.node(tableDepth);
+  const tableStart = $from.start(tableDepth);
+  const relativeCellPos = $from.before(cellDepth) - tableStart;
+  const rect = safeFindCell2(import_tables2.TableMap.get(tableNode), relativeCellPos);
+  if (!rect) return null;
+  return `${indexToColumnName(rect.left)}${rect.top + 1}`;
+}
 function isEditingTableFormulaText(editor) {
   const cellNode = getSelectionTableCellNode(editor);
   return Boolean(cellNode && getCellText(cellNode).startsWith("="));
@@ -30708,20 +30890,6 @@ function createCellDisplayContent(cellNode, displayValue) {
   }
   return [paragraphType.create(null, cellNode.type.schema.text(displayValue))];
 }
-function buildTableValueGetter(tableNode) {
-  const map = import_tables2.TableMap.get(tableNode);
-  const values = /* @__PURE__ */ new Map();
-  for (const rowInfo of getTableRows2(tableNode)) {
-    for (const entry of rowInfo.cells) {
-      const rect = safeFindCell2(map, entry.relativePos);
-      if (!rect) continue;
-      const label = `${indexToColumnName(rect.left)}${rect.top + 1}`;
-      const computedValue = entry.node.attrs.computedValue;
-      values.set(label, typeof computedValue === "string" && computedValue.trim() ? computedValue : getCellText(entry.node));
-    }
-  }
-  return (label) => values.get(label.toUpperCase());
-}
 function buildTableValueMap(tableNode) {
   const map = import_tables2.TableMap.get(tableNode);
   const values = /* @__PURE__ */ new Map();
@@ -30736,10 +30904,6 @@ function buildTableValueMap(tableNode) {
   }
   return values;
 }
-function getFormulaComputedValue(formula, tableNode) {
-  const result = evaluateBasicTableFormula(formula, buildTableValueGetter(tableNode));
-  return result.error ? `#${result.error.toUpperCase()}` : String(result.value);
-}
 function normalizeFormulaInput(formula) {
   const trimmed = formula.trim();
   if (!trimmed) return "";
@@ -30750,19 +30914,19 @@ function setSelectedTableCellFormula(editor, formula) {
   const { state, view } = editor;
   if (!normalized) {
     const clearedFormula = (0, import_tables2.setCellAttr)("formula", null)(state, view.dispatch.bind(view));
-    const clearedValue = (0, import_tables2.setCellAttr)("computedValue", null)(editor.state, view.dispatch.bind(view));
-    if (clearedFormula || clearedValue) {
+    const clearedValue2 = (0, import_tables2.setCellAttr)("computedValue", null)(editor.state, view.dispatch.bind(view));
+    if (clearedFormula || clearedValue2) {
+      recalculateActiveTableFormulas(editor);
       view.focus();
       dispatchTableLayoutChange(editor);
       return true;
     }
     return false;
   }
-  const rect = (0, import_tables2.selectedRect)(state);
-  const computedValue = getFormulaComputedValue(normalized, rect.table);
   const appliedFormula = (0, import_tables2.setCellAttr)("formula", normalized)(state, view.dispatch.bind(view));
-  const appliedValue = (0, import_tables2.setCellAttr)("computedValue", computedValue)(editor.state, view.dispatch.bind(view));
-  if (appliedFormula || appliedValue) {
+  const clearedValue = (0, import_tables2.setCellAttr)("computedValue", null)(editor.state, view.dispatch.bind(view));
+  if (appliedFormula || clearedValue) {
+    recalculateActiveTableFormulas(editor);
     view.focus();
     dispatchTableLayoutChange(editor);
     return true;
@@ -30844,7 +31008,7 @@ function promoteFormulaTextInTableNode(tableNode) {
     changed
   };
 }
-function recalculateTableNode(tableNode) {
+function recalculateTableNode(tableNode, options) {
   const promoted = promoteFormulaTextInTableNode(tableNode);
   tableNode = promoted.tableNode;
   const map = import_tables2.TableMap.get(tableNode);
@@ -30874,13 +31038,16 @@ function recalculateTableNode(tableNode) {
     }))
   );
   const { order, circular } = getTableFormulaRecalculationOrder(graph);
+  const affectedLabels = options?.changedLabels ? getAffectedTableFormulaLabels(graph, options.changedLabels) : null;
   const computedValues = /* @__PURE__ */ new Map();
   const getCellValue = (label) => values.get(label.toUpperCase());
   for (const label of circular) {
+    if (affectedLabels && !affectedLabels.has(label)) continue;
     computedValues.set(label, formatFormulaError("circular-reference"));
     values.set(label, formatFormulaError("circular-reference"));
   }
   for (const label of order) {
+    if (affectedLabels && !affectedLabels.has(label)) continue;
     const entry = formulaEntries.get(label);
     if (!entry) continue;
     const result = evaluateBasicTableFormula(entry.formula, getCellValue);
@@ -30925,6 +31092,22 @@ function recalculateSelectedTable(editor) {
   dispatchTableLayoutChange(editor);
   return true;
 }
+function recalculateActiveTableFormulas(editor) {
+  const tableInfo = getSelectionTableInfo(editor);
+  if (!tableInfo) {
+    return recalculateAllTableFormulas(editor);
+  }
+  const activeCellLabel = getSelectionTableCellLabel(editor);
+  const nextTable = recalculateTableNode(tableInfo.node, {
+    changedLabels: activeCellLabel ? [activeCellLabel] : null
+  });
+  if (!nextTable) return false;
+  editor.view.dispatch(
+    editor.state.tr.replaceWith(tableInfo.pos, tableInfo.pos + tableInfo.node.nodeSize, nextTable).setMeta(UEDITOR_TABLE_FORMULA_RECALCULATE_META, true)
+  );
+  dispatchTableLayoutChange(editor);
+  return true;
+}
 function recalculateAllTableFormulas(editor) {
   const replacements = [];
   editor.state.doc.descendants((node, pos) => {
@@ -30961,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
@@ -30994,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();
@@ -31007,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]);
@@ -31027,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);
@@ -31059,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",
@@ -31125,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"
       }
     ) });
@@ -31513,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
@@ -31594,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) {
@@ -31613,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);
@@ -31624,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;
@@ -31681,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
           }
         )
       }
@@ -38125,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);
@@ -38144,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);
@@ -38178,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,
@@ -38660,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);
@@ -38668,10 +39099,7 @@ var MenuBar = ({
     setShowPreviewDialog(true);
   };
   const handlePreview = () => {
-    if (onPreview) {
-      onPreview();
-      return;
-    }
+    if (onPreview?.(editor.getHTML()) === false) return;
     openPreviewDialog();
   };
   const applySourceHtml = () => {
@@ -38906,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 }
               }
             )
           }
@@ -38921,6 +39349,146 @@ var MenuBar = ({
   ] });
 };
 
+// src/components/UEditor/table-formula-range-picker.ts
+var import_state9 = require("@tiptap/pm/state");
+var import_tables4 = require("@tiptap/pm/tables");
+function getCellText2(cellNode) {
+  return cellNode.textBetween(0, cellNode.content.size, "\n").trim();
+}
+function findSelectionFormulaCell(view) {
+  const { $from } = view.state.selection;
+  for (let depth = $from.depth; depth > 0; depth -= 1) {
+    const node = $from.node(depth);
+    if (node.type.name !== "tableCell" && node.type.name !== "tableHeader") continue;
+    if (!getCellText2(node).startsWith("=")) return null;
+    const cellPos = $from.before(depth);
+    const cellDom = view.nodeDOM(cellPos);
+    const tableDepth = depth - 2;
+    const tableNode = tableDepth > 0 ? $from.node(tableDepth) : null;
+    if (!tableNode || tableNode.type.name !== "table") return null;
+    return {
+      cellDom: cellDom instanceof HTMLTableCellElement ? cellDom : null,
+      tablePos: $from.before(tableDepth)
+    };
+  }
+  return null;
+}
+function findTableForPos(view, pos) {
+  const $pos = view.state.doc.resolve(pos);
+  for (let depth = $pos.depth; depth > 0; depth -= 1) {
+    const node = $pos.node(depth);
+    if (node.type.name === "table") {
+      return {
+        node,
+        pos: $pos.before(depth),
+        start: $pos.start(depth)
+      };
+    }
+  }
+  return null;
+}
+function getCellRelativePosFromDomPos2(map, tableStart, domPos) {
+  const relativeDomPos = domPos - tableStart;
+  const seen = /* @__PURE__ */ new Set();
+  for (const relativeCellPos of map.map) {
+    if (seen.has(relativeCellPos)) continue;
+    seen.add(relativeCellPos);
+    if (relativeDomPos === relativeCellPos || relativeDomPos === relativeCellPos + 1) {
+      return relativeCellPos;
+    }
+  }
+  return null;
+}
+function getPickedCellLabel(view, target, tablePos) {
+  const element = resolveEventElement(target);
+  const cell = element?.closest?.("th,td");
+  if (!(cell instanceof HTMLTableCellElement)) return null;
+  const domPos = view.posAtDOM(cell, 0);
+  const tableInfo = findTableForPos(view, domPos);
+  if (!tableInfo || tableInfo.pos !== tablePos) return null;
+  const map = import_tables4.TableMap.get(tableInfo.node);
+  const relativeCellPos = getCellRelativePosFromDomPos2(map, tableInfo.start, domPos);
+  if (relativeCellPos == null) return null;
+  const rect = map.findCell(relativeCellPos);
+  return {
+    cell,
+    label: `${indexToColumnName(rect.left)}${rect.top + 1}`
+  };
+}
+function normalizeFormulaRangeLabel(fromLabel, toLabel) {
+  return fromLabel === toLabel ? fromLabel : `${fromLabel}:${toLabel}`;
+}
+function replacePickedLabel(view, pickState, nextLabel, currentCell) {
+  if (nextLabel === pickState.currentLabel && currentCell === pickState.currentCell) return pickState;
+  if (nextLabel === pickState.currentLabel) {
+    return {
+      ...pickState,
+      currentCell
+    };
+  }
+  let tr = view.state.tr.insertText(nextLabel, pickState.insertedFrom, pickState.insertedTo);
+  const nextTo = pickState.insertedFrom + nextLabel.length;
+  tr = tr.setSelection(import_state9.TextSelection.create(tr.doc, nextTo));
+  view.dispatch(tr);
+  return {
+    ...pickState,
+    insertedTo: nextTo,
+    currentLabel: nextLabel,
+    currentCell
+  };
+}
+function beginFormulaRangePick(view, event) {
+  if (event.button !== 0) return null;
+  const formulaCell = findSelectionFormulaCell(view);
+  if (!formulaCell) return null;
+  const picked = getPickedCellLabel(view, event.target, formulaCell.tablePos);
+  if (!picked || picked.cell === formulaCell.cellDom) return null;
+  const { from, to } = view.state.selection;
+  let tr = view.state.tr.insertText(picked.label, from, to);
+  tr = tr.setSelection(import_state9.TextSelection.create(tr.doc, from + picked.label.length));
+  view.dispatch(tr);
+  view.focus();
+  event.preventDefault();
+  event.stopPropagation();
+  return {
+    anchorLabel: picked.label,
+    anchorCell: picked.cell,
+    tablePos: formulaCell.tablePos,
+    insertedFrom: from,
+    insertedTo: from + picked.label.length,
+    currentLabel: picked.label,
+    currentCell: picked.cell
+  };
+}
+function updateFormulaRangePick(view, pickState, event) {
+  const picked = getPickedCellLabel(view, event.target, pickState.tablePos);
+  if (!picked) return pickState;
+  event.preventDefault();
+  event.stopPropagation();
+  return replacePickedLabel(
+    view,
+    pickState,
+    normalizeFormulaRangeLabel(pickState.anchorLabel, picked.label),
+    picked.cell
+  );
+}
+function getFormulaRangePickHighlight(container, pickState) {
+  if (!container.contains(pickState.anchorCell) || !container.contains(pickState.currentCell)) return null;
+  const containerRect = container.getBoundingClientRect();
+  const anchorRect = pickState.anchorCell.getBoundingClientRect();
+  const currentRect = pickState.currentCell.getBoundingClientRect();
+  const left = Math.min(anchorRect.left, currentRect.left) - containerRect.left + container.scrollLeft;
+  const top = Math.min(anchorRect.top, currentRect.top) - containerRect.top + container.scrollTop;
+  const right = Math.max(anchorRect.right, currentRect.right) - containerRect.left + container.scrollLeft;
+  const bottom = Math.max(anchorRect.bottom, currentRect.bottom) - containerRect.top + container.scrollTop;
+  return {
+    left,
+    top,
+    width: Math.max(0, right - left),
+    height: Math.max(0, bottom - top)
+  };
+}
+
 // src/components/UEditor/UEditor.tsx
 var import_jsx_runtime95 = require("react/jsx-runtime");
 var UEditor = import_react71.default.forwardRef(({
@@ -38965,6 +39533,9 @@ var UEditor = import_react71.default.forwardRef(({
   const inFlightPrepareRef = (0, import_react71.useRef)(null);
   const lastAppliedContentRef = (0, import_react71.useRef)(content ?? "");
   const scheduledFormulaRecalculateRef = (0, import_react71.useRef)(false);
+  const formulaRangePickRef = (0, import_react71.useRef)(null);
+  const formulaRangeSurfaceRef = (0, import_react71.useRef)(null);
+  const [formulaRangeHighlight, setFormulaRangeHighlight] = import_react71.default.useState(null);
   const scheduleFormulaRecalculate = import_react71.default.useCallback((editor2, options) => {
     if (editor2.isDestroyed || scheduledFormulaRecalculateRef.current) return;
     if (!options?.force && isEditingTableFormulaText(editor2)) return;
@@ -38972,7 +39543,7 @@ var UEditor = import_react71.default.forwardRef(({
     queueMicrotask(() => {
       scheduledFormulaRecalculateRef.current = false;
       if (!editor2.isDestroyed && (options?.force || !isEditingTableFormulaText(editor2))) {
-        recalculateAllTableFormulas(editor2);
+        recalculateActiveTableFormulas(editor2);
       }
     });
   }, []);
@@ -39005,6 +39576,10 @@ var UEditor = import_react71.default.forwardRef(({
     ],
     [effectivePlaceholder, t, maxCharacters, uploadImage, resolvedUploadFile, imageInsertMode, maxImageFileSize, allowedImageMimeTypes, fallbackToDataUrl, editable, fetchMetadata, extraExtensions]
   );
+  const syncFormulaRangeHighlight = import_react71.default.useCallback((pickState) => {
+    const container = formulaRangeSurfaceRef.current;
+    setFormulaRangeHighlight(container && pickState ? getFormulaRangePickHighlight(container, pickState) : null);
+  }, []);
   const editor = (0, import_react72.useEditor)({
     immediatelyRender: false,
     extensions,
@@ -39013,6 +39588,37 @@ var UEditor = import_react71.default.forwardRef(({
     autofocus,
     editorProps: {
       handleDOMEvents: {
+        mousedown: (view, event) => {
+          if (!(event instanceof MouseEvent)) return false;
+          const pickState = beginFormulaRangePick(view, event);
+          if (!pickState) return false;
+          formulaRangePickRef.current = pickState;
+          syncFormulaRangeHighlight(pickState);
+          return true;
+        },
+        mousemove: (view, event) => {
+          if (!(event instanceof MouseEvent)) return false;
+          const pickState = formulaRangePickRef.current;
+          if (!pickState) return false;
+          if (event.buttons === 0) {
+            formulaRangePickRef.current = null;
+            syncFormulaRangeHighlight(null);
+            return false;
+          }
+          const nextPickState = updateFormulaRangePick(view, pickState, event);
+          formulaRangePickRef.current = nextPickState;
+          syncFormulaRangeHighlight(nextPickState);
+          return true;
+        },
+        mouseup: (_view, event) => {
+          if (!(event instanceof MouseEvent)) return false;
+          if (!formulaRangePickRef.current) return false;
+          formulaRangePickRef.current = null;
+          syncFormulaRangeHighlight(null);
+          event.preventDefault();
+          event.stopPropagation();
+          return true;
+        },
         keydown: (_view, event) => {
           if (!(event instanceof KeyboardEvent)) return false;
           if (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "ArrowDown") {
@@ -39178,7 +39784,10 @@ var UEditor = import_react71.default.forwardRef(({
         /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
           "div",
           {
-            ref: editorContentRef,
+            ref: (node) => {
+              editorContentRef.current = node;
+              formulaRangeSurfaceRef.current = node;
+            },
             className: "relative flex-1 overflow-y-auto",
             style: {
               minHeight: editable ? minHeight : void 0,
@@ -39210,6 +39819,20 @@ var UEditor = import_react71.default.forwardRef(({
                   className: "pointer-events-none hidden absolute z-20 rounded-[2px] border-2 border-primary bg-primary/10"
                 }
               ),
+              formulaRangeHighlight && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  "data-ueditor-formula-range-highlight": "",
+                  className: "pointer-events-none absolute z-20 rounded-[2px] border-2 border-primary bg-primary/10",
+                  style: {
+                    left: formulaRangeHighlight.left,
+                    top: formulaRangeHighlight.top,
+                    width: formulaRangeHighlight.width,
+                    height: formulaRangeHighlight.height
+                  }
+                }
+              ),
               editable && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(TableControls, { editor, containerRef: editorContentRef }),
               /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
                 import_react72.EditorContent,