@underverse-ui/underverse 1.0.192 → 1.0.193

package/dist/index.cjs

@@ -1107,6 +1107,19 @@ var en_default = {
       borderStyle: "Border Style",
       borderWidth: "Border Width",
       borderColor: "Border Color",
+      borderPosition: "Border placement",
+      borderMode: "Border mode",
+      borderDraw: "Draw borders",
+      borderErase: "Hide borders",
+      borderAll: "All borders",
+      borderOuter: "Outer borders",
+      borderInner: "Inner borders",
+      borderHorizontal: "Inner horizontal borders",
+      borderVertical: "Inner vertical borders",
+      borderTop: "Top border",
+      borderRight: "Right border",
+      borderBottom: "Bottom border",
+      borderLeft: "Left border",
       clearBorder: "Clear Border",
       formula: "Formula",
       formulaBar: "Formula bar",
@@ -1540,6 +1553,19 @@ var vi_default = {
       borderStyle: "Ki\u1EC3u vi\u1EC1n",
       borderWidth: "\u0110\u1ED9 d\xE0y vi\u1EC1n",
       borderColor: "M\xE0u vi\u1EC1n",
+      borderPosition: "V\u1ECB tr\xED vi\u1EC1n",
+      borderMode: "Ch\u1EBF \u0111\u1ED9 vi\u1EC1n",
+      borderDraw: "V\u1EBD vi\u1EC1n",
+      borderErase: "\u1EA8n c\u1EA1nh",
+      borderAll: "T\u1EA5t c\u1EA3 vi\u1EC1n",
+      borderOuter: "Vi\u1EC1n ngo\xE0i",
+      borderInner: "Vi\u1EC1n trong",
+      borderHorizontal: "Vi\u1EC1n ngang b\xEAn trong",
+      borderVertical: "Vi\u1EC1n d\u1ECDc b\xEAn trong",
+      borderTop: "Vi\u1EC1n tr\xEAn",
+      borderRight: "Vi\u1EC1n ph\u1EA3i",
+      borderBottom: "Vi\u1EC1n d\u01B0\u1EDBi",
+      borderLeft: "Vi\u1EC1n tr\xE1i",
       clearBorder: "X\xF3a vi\u1EC1n",
       formula: "C\xF4ng th\u1EE9c",
       formulaBar: "Thanh c\xF4ng th\u1EE9c",
@@ -1973,6 +1999,19 @@ var ko_default = {
       borderStyle: "\uD14C\uB450\uB9AC \uC2A4\uD0C0\uC77C",
       borderWidth: "\uD14C\uB450\uB9AC \uB450\uAED8",
       borderColor: "\uD14C\uB450\uB9AC \uC0C9\uC0C1",
+      borderPosition: "\uD14C\uB450\uB9AC \uC704\uCE58",
+      borderMode: "\uD14C\uB450\uB9AC \uBAA8\uB4DC",
+      borderDraw: "\uD14C\uB450\uB9AC \uADF8\uB9AC\uAE30",
+      borderErase: "\uD14C\uB450\uB9AC \uC228\uAE30\uAE30",
+      borderAll: "\uBAA8\uB4E0 \uD14C\uB450\uB9AC",
+      borderOuter: "\uBC14\uAE65\uCABD \uD14C\uB450\uB9AC",
+      borderInner: "\uC548\uCABD \uD14C\uB450\uB9AC",
+      borderHorizontal: "\uC548\uCABD \uAC00\uB85C \uD14C\uB450\uB9AC",
+      borderVertical: "\uC548\uCABD \uC138\uB85C \uD14C\uB450\uB9AC",
+      borderTop: "\uC704\uCABD \uD14C\uB450\uB9AC",
+      borderRight: "\uC624\uB978\uCABD \uD14C\uB450\uB9AC",
+      borderBottom: "\uC544\uB798\uCABD \uD14C\uB450\uB9AC",
+      borderLeft: "\uC67C\uCABD \uD14C\uB450\uB9AC",
       clearBorder: "\uD14C\uB450\uB9AC \uC9C0\uC6B0\uAE30",
       formula: "\uC218\uC2DD",
       formulaBar: "\uC218\uC2DD \uC785\uB825\uC904",
@@ -2406,6 +2445,19 @@ var ja_default = {
       borderStyle: "\u67A0\u7DDA\u30B9\u30BF\u30A4\u30EB",
       borderWidth: "\u67A0\u7DDA\u306E\u592A\u3055",
       borderColor: "\u67A0\u7DDA\u306E\u8272",
+      borderPosition: "\u67A0\u7DDA\u306E\u4F4D\u7F6E",
+      borderMode: "\u67A0\u7DDA\u30E2\u30FC\u30C9",
+      borderDraw: "\u67A0\u7DDA\u3092\u5F15\u304F",
+      borderErase: "\u67A0\u7DDA\u3092\u975E\u8868\u793A",
+      borderAll: "\u3059\u3079\u3066\u306E\u67A0\u7DDA",
+      borderOuter: "\u5916\u67A0",
+      borderInner: "\u5185\u5074\u306E\u67A0\u7DDA",
+      borderHorizontal: "\u5185\u5074\u306E\u6A2A\u7F6B\u7DDA",
+      borderVertical: "\u5185\u5074\u306E\u7E26\u7F6B\u7DDA",
+      borderTop: "\u4E0A\u7F6B\u7DDA",
+      borderRight: "\u53F3\u7F6B\u7DDA",
+      borderBottom: "\u4E0B\u7F6B\u7DDA",
+      borderLeft: "\u5DE6\u7F6B\u7DDA",
       clearBorder: "\u67A0\u7DDA\u3092\u30AF\u30EA\u30A2",
       formula: "\u6570\u5F0F",
       formulaBar: "\u6570\u5F0F\u30D0\u30FC",
@@ -31970,7 +32022,7 @@ var CustomTableCell = import_extension_table_cell.default.extend({
       },
       textDirection: {
         default: null,
-        parseHTML: (element) => element.getAttribute("data-text-direction") === "vertical" || element.style.writingMode === "vertical-rl" ? "vertical" : null,
+        parseHTML: (element) => element.getAttribute("data-text-direction") === "vertical" || ["sideways-lr", "vertical-lr", "vertical-rl"].includes(element.style.writingMode) ? "vertical" : null,
         renderHTML: (attributes) => attributes.textDirection === "vertical" ? { "data-text-direction": "vertical" } : {}
       }
     };
@@ -31989,7 +32041,7 @@ var CustomTableCell = import_extension_table_cell.default.extend({
     if (borderStyle) mergedStyle += `; border-style: ${borderStyle}`;
     if (borderWidth) mergedStyle += `; border-width: ${borderWidth}`;
     if (verticalAlign) mergedStyle += `; vertical-align: ${verticalAlign}`;
-    if (textDirection === "vertical") mergedStyle += "; writing-mode: vertical-rl; text-orientation: mixed";
+    if (textDirection === "vertical") mergedStyle += "; writing-mode: sideways-lr; text-orientation: mixed";
     mergedStyle = mergedStyle.replace(/^;/, "").trim();
     return [
       "td",
@@ -32096,7 +32148,7 @@ var CustomTableHeader = import_extension_table_header.default.extend({
       },
       textDirection: {
         default: null,
-        parseHTML: (element) => element.getAttribute("data-text-direction") === "vertical" || element.style.writingMode === "vertical-rl" ? "vertical" : null,
+        parseHTML: (element) => element.getAttribute("data-text-direction") === "vertical" || ["sideways-lr", "vertical-lr", "vertical-rl"].includes(element.style.writingMode) ? "vertical" : null,
         renderHTML: (attributes) => attributes.textDirection === "vertical" ? { "data-text-direction": "vertical" } : {}
       }
     };
@@ -32115,7 +32167,7 @@ var CustomTableHeader = import_extension_table_header.default.extend({
     if (borderStyle) mergedStyle += `; border-style: ${borderStyle}`;
     if (borderWidth) mergedStyle += `; border-width: ${borderWidth}`;
     if (verticalAlign) mergedStyle += `; vertical-align: ${verticalAlign}`;
-    if (textDirection === "vertical") mergedStyle += "; writing-mode: vertical-rl; text-orientation: mixed";
+    if (textDirection === "vertical") mergedStyle += "; writing-mode: sideways-lr; text-orientation: mixed";
     mergedStyle = mergedStyle.replace(/^;/, "").trim();
     return [
       "th",
@@ -34305,13 +34357,141 @@ var EditorToolbar = ({
 // src/components/UEditor/menus.tsx
 var import_react72 = require("react");
 var import_react73 = require("@tiptap/react");
-var import_tables6 = require("@tiptap/pm/tables");
+var import_tables7 = require("@tiptap/pm/tables");
 var import_react_dom8 = require("react-dom");
 var import_lucide_react54 = require("lucide-react");
 
+// src/components/UEditor/table-border-commands.ts
+var import_tables5 = require("@tiptap/pm/tables");
+var SIDES = ["top", "right", "bottom", "left"];
+var OPPOSITE_SIDE = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right"
+};
+function splitCssValues(value) {
+  const values = [];
+  let token = "";
+  let parentheses = 0;
+  for (const character of value.trim()) {
+    if (/\s/.test(character) && parentheses === 0) {
+      if (token) values.push(token);
+      token = "";
+      continue;
+    }
+    if (character === "(") parentheses += 1;
+    if (character === ")") parentheses = Math.max(0, parentheses - 1);
+    token += character;
+  }
+  if (token) values.push(token);
+  return values;
+}
+function expandCssQuad(value, fallback) {
+  const values = typeof value === "string" ? splitCssValues(value) : [];
+  const [top = fallback, right = top, bottom = top, left = right] = values;
+  return { top, right, bottom, left };
+}
+function serializeCssQuad({ top, right, bottom, left }) {
+  if (top === right && top === bottom && top === left) return top;
+  if (top === bottom && right === left) return `${top} ${right}`;
+  if (right === left) return `${top} ${right} ${bottom}`;
+  return `${top} ${right} ${bottom} ${left}`;
+}
+function getAppliedSides(position, cell, selection) {
+  const outer = {
+    top: cell.top === selection.top,
+    right: cell.right === selection.right,
+    bottom: cell.bottom === selection.bottom,
+    left: cell.left === selection.left
+  };
+  const inner = {
+    top: cell.top > selection.top,
+    right: cell.right < selection.right,
+    bottom: cell.bottom < selection.bottom,
+    left: cell.left > selection.left
+  };
+  switch (position) {
+    case "all":
+      return { top: true, right: true, bottom: true, left: true };
+    case "outer":
+      return outer;
+    case "inner":
+      return inner;
+    case "horizontal":
+      return { top: inner.top, right: false, bottom: inner.bottom, left: false };
+    case "vertical":
+      return { top: false, right: inner.right, bottom: false, left: inner.left };
+    default:
+      return {
+        top: position === "top" && outer.top,
+        right: position === "right" && outer.right,
+        bottom: position === "bottom" && outer.bottom,
+        left: position === "left" && outer.left
+      };
+  }
+}
+function applyTableCellBorders(editor, position, format, options = {}) {
+  const { state, view } = editor;
+  const selection = (0, import_tables5.selectedRect)(state);
+  const transaction = state.tr;
+  const cellPositions = new Set(selection.map.cellsInRect(selection));
+  const sidesByCell = /* @__PURE__ */ new Map();
+  const addSide = (cellPos, side) => {
+    const sides = sidesByCell.get(cellPos) ?? /* @__PURE__ */ new Set();
+    sides.add(side);
+    sidesByCell.set(cellPos, sides);
+  };
+  const addAdjacentSides = (cell, side) => {
+    const adjacentPositions = /* @__PURE__ */ new Set();
+    if (side === "top" && cell.top > 0) {
+      for (let col = cell.left; col < cell.right; col += 1) adjacentPositions.add(selection.map.map[(cell.top - 1) * selection.map.width + col]);
+    } else if (side === "bottom" && cell.bottom < selection.map.height) {
+      for (let col = cell.left; col < cell.right; col += 1) adjacentPositions.add(selection.map.map[cell.bottom * selection.map.width + col]);
+    } else if (side === "left" && cell.left > 0) {
+      for (let row = cell.top; row < cell.bottom; row += 1) adjacentPositions.add(selection.map.map[row * selection.map.width + cell.left - 1]);
+    } else if (side === "right" && cell.right < selection.map.width) {
+      for (let row = cell.top; row < cell.bottom; row += 1) adjacentPositions.add(selection.map.map[row * selection.map.width + cell.right]);
+    }
+    for (const adjacentPos of adjacentPositions) addSide(adjacentPos, OPPOSITE_SIDE[side]);
+  };
+  for (const relativePos of cellPositions) {
+    const cell = selection.map.findCell(relativePos);
+    const appliedSides = getAppliedSides(position, cell, selection);
+    for (const side of SIDES) {
+      if (!appliedSides[side]) continue;
+      addSide(relativePos, side);
+      addAdjacentSides(cell, side);
+    }
+  }
+  for (const [relativePos, appliedSides] of sidesByCell) {
+    const absolutePos = selection.tableStart + relativePos;
+    const node = state.doc.nodeAt(absolutePos);
+    if (!node) continue;
+    const styles = expandCssQuad(node.attrs.borderStyle, "solid");
+    const widths = expandCssQuad(node.attrs.borderWidth, "1px");
+    const colors = expandCssQuad(node.attrs.borderColor, "#000000");
+    for (const side of SIDES) {
+      if (!appliedSides.has(side)) continue;
+      styles[side] = format.style;
+      widths[side] = format.width;
+      colors[side] = format.color || "currentColor";
+    }
+    transaction.setNodeMarkup(absolutePos, void 0, {
+      ...node.attrs,
+      borderStyle: serializeCssQuad(styles),
+      borderWidth: serializeCssQuad(widths),
+      borderColor: serializeCssQuad(colors)
+    });
+  }
+  if (transaction.docChanged) view.dispatch(transaction);
+  if (options.focus ?? true) view.focus();
+  return transaction.docChanged;
+}
+
 // src/components/UEditor/table-formula-commands.ts
 var import_state11 = require("@tiptap/pm/state");
-var import_tables5 = require("@tiptap/pm/tables");
+var import_tables6 = require("@tiptap/pm/tables");
 
 // src/components/UEditor/table-formula.ts
 var CELL_ADDRESS_RE = /^([A-Z]+)([1-9]\d*)$/i;
@@ -34902,7 +35082,7 @@ function getSelectionTableCellAnchor(editor) {
     const tableNode = $cell.node(depth);
     if (tableNode.type.name !== "table") continue;
     const tableStart = $cell.start(depth);
-    const rect = safeFindCell2(import_tables5.TableMap.get(tableNode), cellPos - tableStart);
+    const rect = safeFindCell2(import_tables6.TableMap.get(tableNode), cellPos - tableStart);
     if (!rect) return null;
     return {
       cellPos,
@@ -34918,7 +35098,7 @@ function getSelectionTableCellAnchor(editor) {
 function restoreSelectionAtTableCell(editor, anchor) {
   const tableNode = editor.state.doc.nodeAt(anchor.tablePos);
   if (!tableNode || tableNode.type.name !== "table") return false;
-  const map = import_tables5.TableMap.get(tableNode);
+  const map = import_tables6.TableMap.get(tableNode);
   if (anchor.row >= map.height || anchor.column >= map.width) return false;
   const relativeCellPos = map.positionAt(anchor.row, anchor.column, tableNode);
   const cellPos = anchor.tablePos + 1 + relativeCellPos;
@@ -34974,7 +35154,7 @@ function getSelectionTableCellLabel(editor) {
   const tableNode = $from.node(tableDepth);
   const tableStart = $from.start(tableDepth);
   const relativeCellPos = $from.before(cellDepth) - tableStart;
-  const rect = safeFindCell2(import_tables5.TableMap.get(tableNode), relativeCellPos);
+  const rect = safeFindCell2(import_tables6.TableMap.get(tableNode), relativeCellPos);
   if (!rect) return null;
   return `${indexToColumnName(rect.left)}${rect.top + 1}`;
 }
@@ -35012,7 +35192,7 @@ function removeSelectedTableCellFormula(editor, clearContent) {
   return true;
 }
 function buildTableValueMap(tableNode) {
-  const map = import_tables5.TableMap.get(tableNode);
+  const map = import_tables6.TableMap.get(tableNode);
   const values = /* @__PURE__ */ new Map();
   for (const rowInfo of getTableRows2(tableNode)) {
     for (const entry of rowInfo.cells) {
@@ -35037,8 +35217,8 @@ function setSelectedTableCellFormula(editor, formula) {
   if (!normalized) {
     return clearSelectedTableCellFormula(editor);
   }
-  const appliedFormula = (0, import_tables5.setCellAttr)("formula", normalized)(state, view.dispatch.bind(view));
-  const clearedValue = (0, import_tables5.setCellAttr)("computedValue", null)(editor.state, view.dispatch.bind(view));
+  const appliedFormula = (0, import_tables6.setCellAttr)("formula", normalized)(state, view.dispatch.bind(view));
+  const clearedValue = (0, import_tables6.setCellAttr)("computedValue", null)(editor.state, view.dispatch.bind(view));
   if (appliedFormula || clearedValue) {
     recalculateActiveTableFormulas(editor);
     if (selectionAnchor) restoreSelectionAtTableCell(editor, selectionAnchor);
@@ -35057,7 +35237,7 @@ function convertSelectedTableCellFormulaToValue(editor) {
 function setSelectedTableCellNumberFormat(editor, numberFormat) {
   const value = numberFormat && numberFormat !== "text" ? numberFormat : null;
   const { state, view } = editor;
-  const applied = (0, import_tables5.setCellAttr)("numberFormat", value)(state, view.dispatch.bind(view));
+  const applied = (0, import_tables6.setCellAttr)("numberFormat", value)(state, view.dispatch.bind(view));
   if (!applied) return false;
   recalculateSelectedTable(editor);
   view.focus();
@@ -35129,7 +35309,7 @@ function promoteFormulaTextInTableNode(tableNode) {
 function recalculateTableNode(tableNode, options) {
   const promoted = promoteFormulaTextInTableNode(tableNode);
   tableNode = promoted.tableNode;
-  const map = import_tables5.TableMap.get(tableNode);
+  const map = import_tables6.TableMap.get(tableNode);
   const values = buildTableValueMap(tableNode);
   const formulaEntries = /* @__PURE__ */ new Map();
   let changed = false;
@@ -35200,7 +35380,7 @@ function recalculateTableNode(tableNode, options) {
   return tableNode.type.create(tableNode.attrs, rows);
 }
 function recalculateSelectedTable(editor) {
-  const rect = (0, import_tables5.selectedRect)(editor.state);
+  const rect = (0, import_tables6.selectedRect)(editor.state);
   const tableNode = rect.table;
   const nextTable = recalculateTableNode(tableNode);
   if (!nextTable) return false;
@@ -35307,7 +35487,7 @@ var FloatingMenuContent = ({ editor }) => {
 function applyTableCellBackground(editor, color) {
   const value = color || null;
   const { state, view } = editor;
-  const applied = (0, import_tables6.setCellAttr)("backgroundColor", value)(state, view.dispatch.bind(view));
+  const applied = (0, import_tables7.setCellAttr)("backgroundColor", value)(state, view.dispatch.bind(view));
   if (applied) {
     view.focus();
     return;
@@ -35317,7 +35497,7 @@ function applyTableCellBackground(editor, color) {
 function applyTableCellAttribute2(editor, name, value, options = {}) {
   const shouldFocus = options.focus ?? true;
   const { state, view } = editor;
-  const applied = (0, import_tables6.setCellAttr)(name, value)(state, view.dispatch.bind(view));
+  const applied = (0, import_tables7.setCellAttr)(name, value)(state, view.dispatch.bind(view));
   if (applied) {
     if (shouldFocus) view.focus();
     return;
@@ -35344,6 +35524,32 @@ function BorderStylePreviewIcon({ style }) {
     }
   );
 }
+function BorderPositionPreviewIcon({ position }) {
+  const showTop = position === "all" || position === "outer" || position === "top";
+  const showRight = position === "all" || position === "outer" || position === "right";
+  const showBottom = position === "all" || position === "outer" || position === "bottom";
+  const showLeft = position === "all" || position === "outer" || position === "left";
+  const showHorizontal = position === "all" || position === "inner" || position === "horizontal";
+  const showVertical = position === "all" || position === "inner" || position === "vertical";
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", className: "h-5 w-5 fill-none stroke-current", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+      "path",
+      {
+        d: "M2 2H18V18H2Z M2 10H18 M10 2V18",
+        className: "text-foreground opacity-70",
+        stroke: "currentColor",
+        strokeDasharray: "2 1.5",
+        strokeWidth: "1.25"
+      }
+    ),
+    showTop && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("path", { d: "M2 2H18", strokeWidth: "2" }),
+    showRight && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("path", { d: "M18 2V18", strokeWidth: "2" }),
+    showBottom && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("path", { d: "M2 18H18", strokeWidth: "2" }),
+    showLeft && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("path", { d: "M2 2V18", strokeWidth: "2" }),
+    showHorizontal && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("path", { d: "M2 10H18", strokeWidth: "2" }),
+    showVertical && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("path", { d: "M10 2V18", strokeWidth: "2" })
+  ] });
+}
 var BubbleMenuContent = ({
   editor,
   onKeepOpenChange,
@@ -35351,7 +35557,8 @@ var BubbleMenuContent = ({
   onRequestClose,
   fontSizes,
   lineHeights,
-  initialShowLinkInput = false
+  initialShowLinkInput = false,
+  cellBorderOpenRequest = 0
 }) => {
   const t = useSmartTranslations("UEditor");
   (0, import_react73.useEditorState)({
@@ -35364,6 +35571,11 @@ var BubbleMenuContent = ({
   (0, import_react72.useEffect)(() => {
     setShowLinkInput(initialShowLinkInput);
   }, [initialShowLinkInput]);
+  (0, import_react72.useEffect)(() => {
+    if (!cellBorderOpenRequest) return;
+    setActiveColorPalette("cell-border");
+    onKeepOpenChange?.(true);
+  }, [cellBorderOpenRequest, onKeepOpenChange]);
   const [showTypographyPanel, setShowTypographyPanel] = (0, import_react72.useState)(false);
   const [showFormulaPanel, setShowFormulaPanel] = (0, import_react72.useState)(false);
   const [formulaDraft, setFormulaDraft] = (0, import_react72.useState)("");
@@ -35381,9 +35593,17 @@ var BubbleMenuContent = ({
   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 currentCellBorderColor = normalizeStyleValue(editor.getAttributes("tableCell").borderColor || editor.getAttributes("tableHeader").borderColor) || "#000000";
+  const [borderStyleDraft, setBorderStyleDraft] = (0, import_react72.useState)(
+    ["solid", "dashed", "dotted", "double"].includes(currentCellBorderStyle) ? currentCellBorderStyle : "solid"
+  );
+  const [borderWidthDraft, setBorderWidthDraft] = (0, import_react72.useState)(currentCellBorderWidth);
+  const [borderColorDraft, setBorderColorDraft] = (0, import_react72.useState)(currentCellBorderColor);
+  const [borderEditMode, setBorderEditMode] = (0, import_react72.useState)("draw");
+  const [activeBorderPosition, setActiveBorderPosition] = (0, import_react72.useState)("all");
   const currentCellVerticalAlign = normalizeStyleValue(editor.getAttributes("tableCell").verticalAlign || editor.getAttributes("tableHeader").verticalAlign) || "";
   const currentCellTextDirection = normalizeStyleValue(editor.getAttributes("tableCell").textDirection || editor.getAttributes("tableHeader").textDirection) || "horizontal";
-  const isInTable2 = (0, import_tables6.isInTable)(editor.state);
+  const isInTable2 = (0, import_tables7.isInTable)(editor.state);
   const canMergeCells = isInTable2 && editor.can().mergeCells();
   const canSplitCell = isInTable2 && editor.can().splitCell();
   const currentFontSize = normalizeStyleValue(textStyleAttrs.fontSize);
@@ -35437,21 +35657,60 @@ var BubbleMenuContent = ({
     onLinkInputOpenChange?.(false);
     onRequestClose?.();
   }, [onKeepOpenChange, onLinkInputOpenChange, onRequestClose]);
-  const applyTableCellAttributeAndClose = (0, import_react72.useCallback)((name, value) => {
-    applyTableCellAttribute2(editor, name, value, { focus: false });
-    closeTransientPanels();
-  }, [closeTransientPanels, editor]);
-  const clearTableCellBorderAndClose = (0, import_react72.useCallback)(() => {
-    applyTableCellAttribute2(editor, "borderColor", null, { focus: false });
-    applyTableCellAttribute2(editor, "borderStyle", null, { focus: false });
-    applyTableCellAttribute2(editor, "borderWidth", null, { focus: false });
-    closeTransientPanels();
-  }, [closeTransientPanels, editor]);
-  const applyTableCellBorderColorAndClose = (0, import_react72.useCallback)((color) => {
-    const value = color || null;
-    applyTableCellAttribute2(editor, "borderColor", value, { focus: false });
-    closeTransientPanels();
-  }, [closeTransientPanels, editor]);
+  const selectTableCellBorderColor = (0, import_react72.useCallback)((color) => {
+    const value = color || "currentColor";
+    setBorderColorDraft(value);
+    setBorderEditMode("draw");
+    setActiveBorderPosition("all");
+    applyTableCellBorders(editor, "all", {
+      color: value,
+      style: borderStyleDraft,
+      width: borderWidthDraft
+    }, { focus: false });
+    setActiveColorPalette("cell-border");
+    onKeepOpenChange?.(true);
+  }, [borderStyleDraft, borderWidthDraft, editor, onKeepOpenChange]);
+  const applyTableCellBorderPosition = (0, import_react72.useCallback)((position) => {
+    setActiveBorderPosition(position);
+    applyTableCellBorders(editor, position, {
+      color: borderColorDraft,
+      style: borderEditMode === "erase" ? "none" : borderStyleDraft,
+      width: borderWidthDraft
+    }, { focus: false });
+    onKeepOpenChange?.(true);
+  }, [borderColorDraft, borderEditMode, borderStyleDraft, borderWidthDraft, editor, onKeepOpenChange]);
+  const applyTableCellBorderStyle = (0, import_react72.useCallback)((style) => {
+    setBorderStyleDraft(style);
+    setBorderEditMode("draw");
+    setActiveBorderPosition("all");
+    applyTableCellBorders(editor, "all", {
+      color: borderColorDraft,
+      style,
+      width: borderWidthDraft
+    }, { focus: false });
+    onKeepOpenChange?.(true);
+  }, [borderColorDraft, borderWidthDraft, editor, onKeepOpenChange]);
+  const applyTableCellBorderWidth = (0, import_react72.useCallback)((width) => {
+    setBorderWidthDraft(width);
+    setBorderEditMode("draw");
+    setActiveBorderPosition("all");
+    applyTableCellBorders(editor, "all", {
+      color: borderColorDraft,
+      style: borderStyleDraft,
+      width
+    }, { focus: false });
+    onKeepOpenChange?.(true);
+  }, [borderColorDraft, borderStyleDraft, editor, onKeepOpenChange]);
+  const clearTableCellBorders = (0, import_react72.useCallback)(() => {
+    setActiveBorderPosition("all");
+    setBorderEditMode("erase");
+    applyTableCellBorders(editor, "all", {
+      color: borderColorDraft,
+      style: "none",
+      width: borderWidthDraft
+    }, { focus: false });
+    onKeepOpenChange?.(true);
+  }, [borderColorDraft, borderWidthDraft, editor, onKeepOpenChange]);
   const closeColorPalette = (0, import_react72.useCallback)(() => {
     setActiveColorPalette(null);
     onKeepOpenChange?.(false);
@@ -35505,27 +35764,104 @@ var BubbleMenuContent = ({
     const isTextPalette = activeColorPalette === "text";
     const isHighlightPalette = activeColorPalette === "highlight";
     if (activeColorPalette === "cell-border") {
-      const currentBorderColor = editor.getAttributes("tableCell").borderColor || editor.getAttributes("tableHeader").borderColor || "currentColor";
-      return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "flex flex-col gap-2 p-2 w-56 text-sm", "data-ueditor-keep-open": true, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "flex w-72 flex-col gap-2 p-2 text-sm", "data-ueditor-keep-open": true, children: [
         /* @__PURE__ */ (0, import_jsx_runtime93.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_runtime93.jsxs)("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("label", { className: "mb-1 block text-xs text-muted-foreground", children: t("tableMenu.borderPosition") || "Border placement" }),
+            /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "grid grid-cols-5 gap-1", role: "group", "aria-label": t("tableMenu.borderPosition") || "Border placement", children: [
+              [
+                ["all", "borderAll"],
+                ["outer", "borderOuter"],
+                ["inner", "borderInner"],
+                ["horizontal", "borderHorizontal"],
+                ["vertical", "borderVertical"],
+                ["top", "borderTop"],
+                ["right", "borderRight"],
+                ["bottom", "borderBottom"],
+                ["left", "borderLeft"]
+              ].map(([position, labelKey]) => {
+                const label = t(`tableMenu.${labelKey}`) || position;
+                return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": label,
+                    title: label,
+                    onMouseDown: (event) => event.preventDefault(),
+                    onClick: () => applyTableCellBorderPosition(position),
+                    className: cn(
+                      "inline-flex h-8 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted hover:text-primary",
+                      activeBorderPosition === position ? "bg-primary/10 text-primary" : "bg-muted/40"
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(BorderPositionPreviewIcon, { position })
+                  },
+                  position
+                );
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": t("tableMenu.clearBorder") || "Clear borders",
+                  title: t("tableMenu.clearBorder") || "Clear borders",
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: clearTableCellBorders,
+                  className: "inline-flex h-8 items-center justify-center rounded-md bg-muted/40 text-destructive transition-colors hover:bg-destructive/10",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(BorderStylePreviewIcon, { style: "none" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "flex flex-col gap-1 border-l border-border pl-2 pt-5", role: "group", "aria-label": t("tableMenu.borderMode") || "Border mode", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": t("tableMenu.borderDraw") || "Draw borders",
+                title: t("tableMenu.borderDraw") || "Draw borders",
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => setBorderEditMode("draw"),
+                className: cn(
+                  "inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-muted",
+                  borderEditMode === "draw" ? "bg-primary/10 text-primary" : "text-muted-foreground"
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_lucide_react54.Edit2, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": t("tableMenu.borderErase") || "Hide borders",
+                title: t("tableMenu.borderErase") || "Hide borders",
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => setBorderEditMode("erase"),
+                className: cn(
+                  "inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-muted",
+                  borderEditMode === "erase" ? "bg-destructive/10 text-destructive" : "text-muted-foreground"
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_lucide_react54.Eraser, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("label", { className: "text-xs text-muted-foreground", children: t("tableMenu.borderStyle") || "Border Style" }),
-          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "grid grid-cols-3 gap-1", role: "group", "aria-label": t("tableMenu.borderStyle") || "Border Style", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "grid grid-cols-4 gap-1.5", role: "group", "aria-label": t("tableMenu.borderStyle") || "Border Style", children: [
             ["solid", "Solid"],
             ["dashed", "Dashed"],
             ["dotted", "Dotted"],
-            ["double", "Double"],
-            ["none", "None"]
+            ["double", "Double"]
           ].map(([style, label]) => /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
             "button",
             {
               type: "button",
-              "data-ueditor-close-on-select": true,
               onMouseDown: (event) => event.preventDefault(),
-              onClick: () => applyTableCellAttributeAndClose("borderStyle", style),
+              onClick: () => applyTableCellBorderStyle(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"
+                "inline-flex h-8 min-w-0 items-center justify-center gap-1.5 rounded-md px-2.5 text-xs font-medium transition-colors hover:bg-muted",
+                borderStyleDraft === style ? "bg-primary/10 text-primary" : "bg-muted/40 text-foreground"
               ),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(BorderStylePreviewIcon, { style }),
@@ -35541,12 +35877,11 @@ var BubbleMenuContent = ({
             "button",
             {
               type: "button",
-              "data-ueditor-close-on-select": true,
               onMouseDown: (event) => event.preventDefault(),
-              onClick: () => applyTableCellAttributeAndClose("borderWidth", width),
+              onClick: () => applyTableCellBorderWidth(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"
+                borderWidthDraft === width ? "bg-primary/10 text-primary" : "bg-muted/40 text-foreground"
               ),
               children: width
             },
@@ -35566,33 +35901,22 @@ var BubbleMenuContent = ({
                 {
                   className: "w-4 h-4 rounded-full border border-border",
                   style: {
-                    backgroundColor: currentBorderColor
+                    backgroundColor: borderColorDraft
                   }
                 }
               )
             ]
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "flex items-center justify-between gap-2 mt-2 pt-2 border-t border-border", children: /* @__PURE__ */ (0, import_jsx_runtime93.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_runtime93.jsx)("div", { className: "w-56", "data-ueditor-keep-open": true, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
         EditorColorPalette,
         {
           colors: borderColors,
-          currentColor: currentBorderColor,
-          onSelect: applyTableCellBorderColorAndClose,
+          currentColor: borderColorDraft,
+          onSelect: selectTableCellBorderColor,
           label: t("tableMenu.borderColor") || "Border Color"
         }
       ) });
@@ -36110,6 +36434,7 @@ var CustomBubbleMenu = ({
   const BUBBLE_MENU_ESTIMATED_HEIGHT = 44;
   const [isVisible, setIsVisible] = (0, import_react72.useState)(false);
   const [linkInputOpen, setLinkInputOpen] = (0, import_react72.useState)(false);
+  const [cellBorderOpenRequest, setCellBorderOpenRequest] = (0, import_react72.useState)(0);
   const [position, setPosition2] = (0, import_react72.useState)({
     top: 0,
     left: 0,
@@ -36126,8 +36451,8 @@ var CustomBubbleMenu = ({
     if (!next) setLinkInputOpen(false);
     if (next) setIsVisible(true);
   }, []);
-  const closeBubbleMenu = (0, import_react72.useCallback)(() => {
-    suppressShowUntilRef.current = Date.now() + 1e3;
+  const closeBubbleMenu = (0, import_react72.useCallback)((suppressShow = true) => {
+    suppressShowUntilRef.current = suppressShow ? Date.now() + 1e3 : 0;
     keepOpenRef.current = false;
     setKeepOpenState(false);
     setLinkInputOpen(false);
@@ -36219,6 +36544,41 @@ var CustomBubbleMenu = ({
       editor.off("update", updatePosition);
     };
   }, [editor]);
+  (0, import_react72.useEffect)(() => {
+    if (!isVisible) return;
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (target && (menuRef.current?.contains(target) || target.closest("[data-ueditor-keep-open]"))) return;
+      const table = target?.closest("table");
+      if (table && editor.view.dom.contains(table)) return;
+      closeBubbleMenu(false);
+    };
+    const handleKeyDown2 = (event) => {
+      if (event.key === "Escape") closeBubbleMenu();
+    };
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    document.addEventListener("keydown", handleKeyDown2);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+      document.removeEventListener("keydown", handleKeyDown2);
+    };
+  }, [closeBubbleMenu, editor, isVisible]);
+  (0, import_react72.useEffect)(() => {
+    const handleTableDoubleClick = (event) => {
+      const target = event.target;
+      const cell = target?.closest("td,th");
+      if (!cell || !editor.view.dom.contains(cell)) return;
+      suppressShowUntilRef.current = 0;
+      keepOpenRef.current = true;
+      setKeepOpenState(true);
+      setLinkInputOpen(false);
+      setCellBorderOpenRequest((request) => request + 1);
+      setIsVisible(true);
+      requestAnimationFrame(() => editor.view.focus());
+    };
+    editor.view.dom.addEventListener("dblclick", handleTableDoubleClick);
+    return () => editor.view.dom.removeEventListener("dblclick", handleTableDoubleClick);
+  }, [editor]);
   if (!isVisible) return null;
   return (0, import_react_dom8.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
@@ -36259,7 +36619,8 @@ var CustomBubbleMenu = ({
             onRequestClose: closeBubbleMenu,
             fontSizes,
             lineHeights,
-            initialShowLinkInput: linkInputOpen
+            initialShowLinkInput: linkInputOpen,
+            cellBorderOpenRequest
           }
         )
       }
@@ -40711,7 +41072,7 @@ function moveTableRow$1(table, indexesOrigin, indexesTarget, direction) {
   rows = moveRowInArrayOfRows(rows, indexesOrigin, indexesTarget, direction);
   return convertArrayOfRowsToTableNode(table, rows);
 }
-function selectedRect3(state) {
+function selectedRect4(state) {
   const sel = state.selection;
   const $pos = selectionCell(state);
   const table = $pos.node(-1);
@@ -40729,7 +41090,7 @@ function deprecated_toggleHeader(type) {
     if (!isInTable(state)) return false;
     if (dispatch) {
       const types = tableNodeTypes2(state.schema);
-      const rect = selectedRect3(state), tr = state.tr;
+      const rect = selectedRect4(state), tr = state.tr;
       const cells = rect.map.cellsInRect(type == "column" ? {
         left: rect.left,
         top: 0,
@@ -40769,7 +41130,7 @@ function toggleHeader(type, options) {
     if (!isInTable(state)) return false;
     if (dispatch) {
       const types = tableNodeTypes2(state.schema);
-      const rect = selectedRect3(state), tr = state.tr;
+      const rect = selectedRect4(state), tr = state.tr;
       const isHeaderRowEnabled = isHeaderEnabledByType("row", rect, types);
       const isHeaderColumnEnabled = isHeaderEnabledByType("column", rect, types);
       const selectionStartsAt = (type === "column" ? isHeaderRowEnabled : type === "row" ? isHeaderColumnEnabled : false) ? 1 : 0;
@@ -42789,11 +43150,11 @@ function useUEditorTableInteractions(editor, editable = true) {
 
 // src/components/UEditor/use-formula-coordinate-overlay.ts
 var import_react77 = require("react");
-var import_tables8 = require("@tiptap/pm/tables");
+var import_tables9 = require("@tiptap/pm/tables");
 
 // src/components/UEditor/table-formula-range-picker.ts
 var import_state12 = require("@tiptap/pm/state");
-var import_tables7 = require("@tiptap/pm/tables");
+var import_tables8 = require("@tiptap/pm/tables");
 function getCellText2(cellNode) {
   return cellNode.textBetween(0, cellNode.content.size, "\n").trim();
 }
@@ -42811,7 +43172,7 @@ function getFormulaEditingTableContext(view) {
     if (!tableNode || tableNode.type.name !== "table") return null;
     const tableDom = cellDom.closest("table");
     if (!(tableDom instanceof HTMLTableElement)) return null;
-    const tableMap = import_tables7.TableMap.get(tableNode);
+    const tableMap = import_tables8.TableMap.get(tableNode);
     const tableStart = $from.start(tableDepth);
     const formulaCellRect = tableMap.findCell(cellPos - tableStart);
     return {
@@ -42828,7 +43189,7 @@ function getFormulaEditingTableContext(view) {
   return null;
 }
 function collectTableFormulaCells(tableNode) {
-  const tableMap = import_tables7.TableMap.get(tableNode);
+  const tableMap = import_tables8.TableMap.get(tableNode);
   const formulas = [];
   tableNode.forEach((rowNode, rowOffset) => {
     rowNode.forEach((cellNode, cellOffset) => {
@@ -42914,7 +43275,7 @@ function getFormulaTableCellInfo(view, target, tablePos) {
   const domPos = view.posAtDOM(cell, 0);
   const tableInfo = findTableForPos(view, domPos);
   if (!tableInfo || tableInfo.pos !== tablePos) return null;
-  const map = import_tables7.TableMap.get(tableInfo.node);
+  const map = import_tables8.TableMap.get(tableInfo.node);
   const relativeCellPos = getCellRelativePosFromDomPos2(map, tableInfo.start, domPos);
   if (relativeCellPos == null) return null;
   const rect = map.findCell(relativeCellPos);
@@ -43088,7 +43449,7 @@ function useFormulaCoordinateOverlay(editor, containerRef, labels) {
       const tableRect = context.tableDom.getBoundingClientRect();
       const tableLeft = tableRect.left - containerRect.left + container.scrollLeft;
       const tableTop = tableRect.top - containerRect.top + container.scrollTop;
-      const map = import_tables8.TableMap.get(context.tableNode);
+      const map = import_tables9.TableMap.get(context.tableNode);
       const columnSegments = Array(map.width);
       const rowSegments = Array(map.height);
       const cellInfos = [];