@underverse-ui/underverse 1.0.142 → 1.0.144

package/dist/index.cjs

@@ -25896,6 +25896,45 @@ function getImageFiles(dataTransfer) {
   }
   return Array.from(byKey.values());
 }
+function getClipboardData(dataTransfer, type) {
+  try {
+    return dataTransfer.getData(type) ?? "";
+  } catch {
+    return "";
+  }
+}
+function extractClipboardHtmlFragment(html) {
+  const startMarker = "<!--StartFragment-->";
+  const endMarker = "<!--EndFragment-->";
+  const start = html.indexOf(startMarker);
+  const end = html.indexOf(endMarker);
+  if (start >= 0 && end > start) {
+    return html.slice(start + startMarker.length, end);
+  }
+  return html;
+}
+function getClipboardTableHtml(dataTransfer) {
+  const html = getClipboardData(dataTransfer, "text/html");
+  if (!/<table(?:\s|>)/i.test(html)) return "";
+  const fragment = extractClipboardHtmlFragment(html);
+  if (typeof DOMParser !== "undefined") {
+    const doc = new DOMParser().parseFromString(fragment, "text/html");
+    const table = doc.querySelector("table");
+    if (table) return table.outerHTML;
+  }
+  return fragment;
+}
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function getClipboardTsvTableHtml(dataTransfer) {
+  const text = getClipboardData(dataTransfer, "text/plain").replace(/\r\n/g, "\n").replace(/\r/g, "\n").replace(/\n+$/, "");
+  if (!text.includes("	")) return "";
+  const rows = text.split("\n").map((row) => row.split("	"));
+  if (rows.length === 0 || rows.every((row) => row.length < 2)) return "";
+  const body = rows.map((row) => `<tr>${row.map((cell) => `<td>${escapeHtml(cell)}</td>`).join("")}</tr>`).join("");
+  return `<table><tbody>${body}</tbody></table>`;
+}
 function fileToDataUrl(file) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -25950,6 +25989,18 @@ var ClipboardImages = import_core5.Extension.create({
         props: {
           handlePaste: (_view, event) => {
             if (!event || !event.clipboardData) return false;
+            const tableHtml = getClipboardTableHtml(event.clipboardData);
+            if (tableHtml) {
+              event.preventDefault();
+              editor.chain().focus().insertContent(tableHtml).run();
+              return true;
+            }
+            const tsvTableHtml = getClipboardTsvTableHtml(event.clipboardData);
+            if (tsvTableHtml) {
+              event.preventDefault();
+              editor.chain().focus().insertContent(tsvTableHtml).run();
+              return true;
+            }
             const files = getImageFiles(event.clipboardData);
             if (files.length === 0) return false;
             event.preventDefault();
@@ -27302,7 +27353,7 @@ function buildUEditorExtensions({
       handleWidth: 10,
       allowTableNodeSelection: true,
       HTMLAttributes: {
-        class: "border-collapse w-full my-4"
+        class: "border-collapse my-4"
       }
     }),
     table_row_default,
@@ -27825,6 +27876,229 @@ var ImageInput = ({ onSubmit, onCancel }) => {
   ] });
 };
 
+// src/components/UEditor/table-cell-commands.ts
+var import_state7 = require("@tiptap/pm/state");
+var import_tables = require("@tiptap/pm/tables");
+function getCellSelectionPositions(selection) {
+  const value = selection;
+  const anchor = value.$anchorCell?.pos;
+  const head = value.$headCell?.pos;
+  return typeof anchor === "number" && typeof head === "number" ? { anchor, head } : null;
+}
+function findTableInfoFromCellPos(editor, cellPos) {
+  const $pos = editor.state.doc.resolve(cellPos);
+  for (let depth = $pos.depth; depth > 0; depth -= 1) {
+    const node = $pos.node(depth);
+    if (node.type.name === "table") {
+      return {
+        table: node,
+        tablePos: $pos.before(depth),
+        tableStart: $pos.start(depth)
+      };
+    }
+  }
+  return null;
+}
+function getFocusableCellPos(editor, cellPos) {
+  const cellNode = editor.state.doc.nodeAt(cellPos);
+  if (!cellNode) return cellPos + 1;
+  let offset = cellPos + 1;
+  let node = cellNode.firstChild ?? null;
+  while (node && !node.isTextblock) {
+    offset += 1;
+    node = node.firstChild ?? null;
+  }
+  return node?.isTextblock ? offset + 1 : cellPos + 1;
+}
+function focusCell(editor, cellPos) {
+  const selection = import_state7.TextSelection.near(editor.state.doc.resolve(getFocusableCellPos(editor, cellPos)));
+  editor.view.dispatch(editor.state.tr.setSelection(selection));
+  editor.view.focus();
+}
+function collectChildren(node) {
+  const children = [];
+  node.forEach((child) => children.push(child));
+  return children;
+}
+function createEmptyCellNode(cellNode) {
+  return cellNode.type.createAndFill(cellNode.attrs) ?? cellNode;
+}
+function getSelectedTableRect(editor) {
+  const cellSelection = getCellSelectionPositions(editor.state.selection);
+  if (cellSelection) {
+    const tableInfo = findTableInfoFromCellPos(editor, cellSelection.anchor);
+    if (tableInfo) {
+      const map = import_tables.TableMap.get(tableInfo.table);
+      const rect = map.rectBetween(
+        cellSelection.anchor - tableInfo.tableStart,
+        cellSelection.head - tableInfo.tableStart
+      );
+      return {
+        ...rect,
+        map,
+        table: tableInfo.table,
+        tableStart: tableInfo.tableStart
+      };
+    }
+  }
+  return (0, import_tables.selectedRect)(editor.state);
+}
+function parsePixelWidth(value) {
+  if (!value) return null;
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) && parsed > 0 ? Math.round(parsed) : null;
+}
+function getDomColumnWidths(editor, rect) {
+  const tableDom = editor.view.nodeDOM(rect.tableStart - 1);
+  if (!(tableDom instanceof HTMLTableElement)) return null;
+  const cols = Array.from(tableDom.querySelectorAll("colgroup > col"));
+  if (cols.length === 0) return null;
+  const widths = [];
+  for (let col = rect.left; col < rect.right; col += 1) {
+    const colElement = cols[col];
+    if (!colElement) return null;
+    const width = parsePixelWidth(colElement.style.width) ?? parsePixelWidth(colElement.getAttribute("width")) ?? Math.round(colElement.getBoundingClientRect().width);
+    if (!Number.isFinite(width) || width <= 0) return null;
+    widths.push(width);
+  }
+  return widths.length > 0 ? widths : null;
+}
+function getNodeColumnWidths(rect) {
+  const widths = [];
+  for (let col = rect.left; col < rect.right; col += 1) {
+    let width = null;
+    const seen = /* @__PURE__ */ new Set();
+    for (let row = 0; row < rect.map.height && width == null; row += 1) {
+      const cellPos = rect.map.map[row * rect.map.width + col];
+      if (seen.has(cellPos)) continue;
+      seen.add(cellPos);
+      const cell = rect.table.nodeAt(cellPos);
+      const colwidth = cell?.attrs.colwidth;
+      if (!Array.isArray(colwidth)) continue;
+      const cellLeft = rect.map.colCount(cellPos);
+      const widthIndex = col - cellLeft;
+      const candidate = colwidth[widthIndex];
+      if (typeof candidate === "number" && candidate > 0) {
+        width = candidate;
+      }
+    }
+    if (width == null) return null;
+    widths.push(width);
+  }
+  return widths.length > 0 ? widths : null;
+}
+function getSelectedColumnWidths(editor, rect) {
+  return getDomColumnWidths(editor, rect) ?? getNodeColumnWidths(rect);
+}
+function dispatchTableLayoutChange(editor) {
+  editor.view.dom.dispatchEvent(new CustomEvent(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT, { bubbles: true }));
+}
+function mergeTableCellsPreservingColumnWidths(editor) {
+  const rect = getSelectedTableRect(editor);
+  const widths = getSelectedColumnWidths(editor, rect);
+  const merged = editor.chain().focus().mergeCells().run();
+  if (!merged) return merged;
+  if (!widths) {
+    dispatchTableLayoutChange(editor);
+    return merged;
+  }
+  const nextRect = getSelectedTableRect(editor);
+  const cellPos = nextRect.map.map[nextRect.top * nextRect.map.width + nextRect.left];
+  const absolutePos = nextRect.tableStart + cellPos;
+  const node = editor.state.doc.nodeAt(absolutePos);
+  if (!node) return merged;
+  editor.view.dispatch(
+    editor.state.tr.setNodeMarkup(absolutePos, node.type, {
+      ...node.attrs,
+      colwidth: widths
+    })
+  );
+  dispatchTableLayoutChange(editor);
+  return true;
+}
+function runTableCommandAtCellPos(editor, cellPos, command) {
+  if (cellPos == null) return false;
+  focusCell(editor, cellPos);
+  return command(editor.chain().focus(null, { scrollIntoView: false })).run();
+}
+function getTableCornerCellPos(editor, activePos) {
+  const tableInfo = findTableInfoFromCellPos(editor, activePos);
+  if (!tableInfo) return null;
+  const map = import_tables.TableMap.get(tableInfo.table);
+  return tableInfo.tableStart + map.positionAt(map.height - 1, map.width - 1, tableInfo.table);
+}
+function replaceTableAtCellPos(editor, cellPos, updateTable) {
+  if (cellPos == null) return false;
+  const tableInfo = findTableInfoFromCellPos(editor, cellPos);
+  if (!tableInfo) return false;
+  const nextTable = updateTable(tableInfo.table);
+  if (!nextTable) return false;
+  editor.view.dispatch(editor.state.tr.replaceWith(tableInfo.tablePos, tableInfo.tablePos + tableInfo.table.nodeSize, nextTable));
+  dispatchTableLayoutChange(editor);
+  return true;
+}
+function duplicateTableRowAt(editor, rowIndex, cellPos) {
+  return replaceTableAtCellPos(editor, cellPos, (tableNode) => {
+    const rows = collectChildren(tableNode);
+    const rowNode = rows[rowIndex];
+    if (!rowNode) return null;
+    rows.splice(rowIndex + 1, 0, rowNode.copy(rowNode.content));
+    return tableNode.type.create(tableNode.attrs, rows);
+  });
+}
+function clearTableRowAt(editor, rowIndex, cellPos) {
+  return replaceTableAtCellPos(editor, cellPos, (tableNode) => {
+    const rows = collectChildren(tableNode);
+    const rowNode = rows[rowIndex];
+    if (!rowNode) return null;
+    const cells = collectChildren(rowNode).map((cellNode) => createEmptyCellNode(cellNode));
+    rows[rowIndex] = rowNode.type.create(rowNode.attrs, cells);
+    return tableNode.type.create(tableNode.attrs, rows);
+  });
+}
+function duplicateTableColumnAt(editor, columnIndex, cellPos) {
+  return replaceTableAtCellPos(editor, cellPos, (tableNode) => {
+    const rows = collectChildren(tableNode).map((rowNode) => {
+      const cells = collectChildren(rowNode);
+      const cellNode = cells[columnIndex];
+      if (!cellNode) return rowNode;
+      cells.splice(columnIndex + 1, 0, cellNode.copy(cellNode.content));
+      return rowNode.type.create(rowNode.attrs, cells);
+    });
+    return tableNode.type.create(tableNode.attrs, rows);
+  });
+}
+function clearTableColumnAt(editor, columnIndex, cellPos) {
+  return replaceTableAtCellPos(editor, cellPos, (tableNode) => {
+    const rows = collectChildren(tableNode).map((rowNode) => {
+      const cells = collectChildren(rowNode);
+      const cellNode = cells[columnIndex];
+      if (!cellNode) return rowNode;
+      cells[columnIndex] = createEmptyCellNode(cellNode);
+      return rowNode.type.create(rowNode.attrs, cells);
+    });
+    return tableNode.type.create(tableNode.attrs, rows);
+  });
+}
+function expandTableFromCell(editor, activeCellPos, rows, columns) {
+  let cornerCellPos = getTableCornerCellPos(editor, activeCellPos);
+  if (cornerCellPos == null) return false;
+  for (let index = 0; index < rows; index += 1) {
+    const ok = runTableCommandAtCellPos(editor, cornerCellPos, (chain) => chain.addRowAfter());
+    if (!ok) return false;
+    cornerCellPos = getTableCornerCellPos(editor, cornerCellPos);
+    if (cornerCellPos == null) return false;
+  }
+  for (let index = 0; index < columns; index += 1) {
+    const ok = runTableCommandAtCellPos(editor, cornerCellPos, (chain) => chain.addColumnAfter());
+    if (!ok) return false;
+    cornerCellPos = getTableCornerCellPos(editor, cornerCellPos);
+    if (cornerCellPos == null) return false;
+  }
+  dispatchTableLayoutChange(editor);
+  return true;
+}
+
 // src/components/UEditor/typography-options.ts
 function normalizeStyleValue(value) {
   return typeof value === "string" ? value.trim().replace(/^['"]|['"]$/g, "") : "";
@@ -28020,6 +28294,8 @@ var EditorToolbar = ({
   const currentTableAlign = tableAlignAttr === "center" || tableAlignAttr === "right" ? tableAlignAttr : "left";
   const isTableSelected = tableInfo !== null;
   const hasTableContext = isTableSelected || tableCommandAnchorPosRef.current !== null;
+  const canMergeCells = hasTableContext && editor.can().mergeCells();
+  const canSplitCell = hasTableContext && editor.can().splitCell();
   const currentFontFamily = normalizeStyleValue(textStyleAttrs.fontFamily);
   const currentFontSize = normalizeStyleValue(textStyleAttrs.fontSize);
   const currentTextColor = normalizeStyleValue(textStyleAttrs.color) || "inherit";
@@ -28675,408 +28951,186 @@ var EditorToolbar = ({
             {
               icon: import_lucide_react48.AlignLeft,
               label: t("tableMenu.alignLeft"),
-              onClick: () => applyTableAlignment(editor, "left", tableCommandAnchorPos),
-              active: hasTableContext && currentTableAlign === "left",
-              disabled: !hasTableContext
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-            DropdownMenuItem,
-            {
-              icon: import_lucide_react48.AlignCenter,
-              label: t("tableMenu.alignCenter"),
-              onClick: () => applyTableAlignment(editor, "center", tableCommandAnchorPos),
-              active: hasTableContext && currentTableAlign === "center",
-              disabled: !hasTableContext
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-            DropdownMenuItem,
-            {
-              icon: import_lucide_react48.AlignRight,
-              label: t("tableMenu.alignRight"),
-              onClick: () => applyTableAlignment(editor, "right", tableCommandAnchorPos),
-              active: hasTableContext && currentTableAlign === "right",
-              disabled: !hasTableContext
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "my-1 border-t" }),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-            DropdownMenuItem,
-            {
-              icon: import_lucide_react48.ArrowLeft,
-              label: t("tableMenu.addColumnBefore"),
-              onClick: () => editor.chain().focus().addColumnBefore().run(),
-              disabled: !hasTableContext || !editor.can().addColumnBefore()
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-            DropdownMenuItem,
-            {
-              icon: import_lucide_react48.ArrowDown,
-              label: t("tableMenu.addColumnAfter"),
-              onClick: () => editor.chain().focus().addColumnAfter().run(),
-              disabled: !hasTableContext || !editor.can().addColumnAfter()
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-            DropdownMenuItem,
-            {
-              icon: import_lucide_react48.ArrowUp,
-              label: t("tableMenu.addRowBefore"),
-              onClick: () => editor.chain().focus().addRowBefore().run(),
-              disabled: !hasTableContext || !editor.can().addRowBefore()
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-            DropdownMenuItem,
-            {
-              icon: import_lucide_react48.ArrowRight,
-              label: t("tableMenu.addRowAfter"),
-              onClick: () => editor.chain().focus().addRowAfter().run(),
-              disabled: !hasTableContext || !editor.can().addRowAfter()
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "my-1 border-t" }),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-            DropdownMenuItem,
-            {
-              icon: import_lucide_react48.Table,
-              label: t("tableMenu.toggleHeaderRow"),
-              onClick: () => editor.chain().focus().toggleHeaderRow().run(),
-              disabled: !hasTableContext || !editor.can().toggleHeaderRow()
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-            DropdownMenuItem,
-            {
-              icon: import_lucide_react48.Table,
-              label: t("tableMenu.toggleHeaderColumn"),
-              onClick: () => editor.chain().focus().toggleHeaderColumn().run(),
-              disabled: !hasTableContext || !editor.can().toggleHeaderColumn()
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "my-1 border-t" }),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-            DropdownMenuItem,
-            {
-              icon: import_lucide_react48.Trash2,
-              label: t("tableMenu.deleteColumn"),
-              onClick: () => editor.chain().focus().deleteColumn().run(),
-              disabled: !hasTableContext || !editor.can().deleteColumn()
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-            DropdownMenuItem,
-            {
-              icon: import_lucide_react48.Trash2,
-              label: t("tableMenu.deleteRow"),
-              onClick: () => editor.chain().focus().deleteRow().run(),
-              disabled: !hasTableContext || !editor.can().deleteRow()
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-            DropdownMenuItem,
-            {
-              icon: import_lucide_react48.Trash2,
-              label: t("tableMenu.deleteTable"),
-              onClick: () => editor.chain().focus().deleteTable().run(),
-              disabled: !hasTableContext || !editor.can().deleteTable()
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ToolbarDivider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: t("toolbar.undo"), children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react48.Undo, { className: "w-4 h-4" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: t("toolbar.redo"), children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react48.Redo, { className: "w-4 h-4" }) })
-  ] });
-};
-
-// src/components/UEditor/menus.tsx
-var import_react62 = require("react");
-var import_react63 = require("@tiptap/react");
-var import_tables2 = require("@tiptap/pm/tables");
-var import_react_dom8 = require("react-dom");
-var import_lucide_react49 = require("lucide-react");
-
-// src/components/UEditor/table-cell-commands.ts
-var import_state7 = require("@tiptap/pm/state");
-var import_tables = require("@tiptap/pm/tables");
-function getCellSelectionPositions(selection) {
-  const value = selection;
-  const anchor = value.$anchorCell?.pos;
-  const head = value.$headCell?.pos;
-  return typeof anchor === "number" && typeof head === "number" ? { anchor, head } : null;
-}
-function findTableInfoFromCellPos(editor, cellPos) {
-  const $pos = editor.state.doc.resolve(cellPos);
-  for (let depth = $pos.depth; depth > 0; depth -= 1) {
-    const node = $pos.node(depth);
-    if (node.type.name === "table") {
-      return {
-        table: node,
-        tablePos: $pos.before(depth),
-        tableStart: $pos.start(depth)
-      };
-    }
-  }
-  return null;
-}
-function getFocusableCellPos(editor, cellPos) {
-  const cellNode = editor.state.doc.nodeAt(cellPos);
-  if (!cellNode) return cellPos + 1;
-  let offset = cellPos + 1;
-  let node = cellNode.firstChild ?? null;
-  while (node && !node.isTextblock) {
-    offset += 1;
-    node = node.firstChild ?? null;
-  }
-  return node?.isTextblock ? offset + 1 : cellPos + 1;
-}
-function focusCell(editor, cellPos) {
-  const selection = import_state7.TextSelection.near(editor.state.doc.resolve(getFocusableCellPos(editor, cellPos)));
-  editor.view.dispatch(editor.state.tr.setSelection(selection));
-  editor.view.focus();
-}
-function collectChildren(node) {
-  const children = [];
-  node.forEach((child) => children.push(child));
-  return children;
-}
-function createEmptyCellNode(cellNode) {
-  return cellNode.type.createAndFill(cellNode.attrs) ?? cellNode;
-}
-function getSelectedTableRect(editor) {
-  const cellSelection = getCellSelectionPositions(editor.state.selection);
-  if (cellSelection) {
-    const tableInfo = findTableInfoFromCellPos(editor, cellSelection.anchor);
-    if (tableInfo) {
-      const map = import_tables.TableMap.get(tableInfo.table);
-      const rect = map.rectBetween(
-        cellSelection.anchor - tableInfo.tableStart,
-        cellSelection.head - tableInfo.tableStart
-      );
-      return {
-        ...rect,
-        map,
-        table: tableInfo.table,
-        tableStart: tableInfo.tableStart
-      };
-    }
-  }
-  return (0, import_tables.selectedRect)(editor.state);
-}
-function parsePixelWidth(value) {
-  if (!value) return null;
-  const parsed = Number.parseFloat(value);
-  return Number.isFinite(parsed) && parsed > 0 ? Math.round(parsed) : null;
-}
-function getDomColumnWidths(editor, rect) {
-  const tableDom = editor.view.nodeDOM(rect.tableStart - 1);
-  if (!(tableDom instanceof HTMLTableElement)) return null;
-  const cols = Array.from(tableDom.querySelectorAll("colgroup > col"));
-  if (cols.length === 0) return null;
-  const widths = [];
-  for (let col = rect.left; col < rect.right; col += 1) {
-    const colElement = cols[col];
-    if (!colElement) return null;
-    const width = parsePixelWidth(colElement.style.width) ?? parsePixelWidth(colElement.getAttribute("width")) ?? Math.round(colElement.getBoundingClientRect().width);
-    if (!Number.isFinite(width) || width <= 0) return null;
-    widths.push(width);
-  }
-  return widths.length > 0 ? widths : null;
-}
-function getNodeColumnWidths(rect) {
-  const widths = [];
-  for (let col = rect.left; col < rect.right; col += 1) {
-    let width = null;
-    const seen = /* @__PURE__ */ new Set();
-    for (let row = 0; row < rect.map.height && width == null; row += 1) {
-      const cellPos = rect.map.map[row * rect.map.width + col];
-      if (seen.has(cellPos)) continue;
-      seen.add(cellPos);
-      const cell = rect.table.nodeAt(cellPos);
-      const colwidth = cell?.attrs.colwidth;
-      if (!Array.isArray(colwidth)) continue;
-      const cellLeft = rect.map.colCount(cellPos);
-      const widthIndex = col - cellLeft;
-      const candidate = colwidth[widthIndex];
-      if (typeof candidate === "number" && candidate > 0) {
-        width = candidate;
-      }
-    }
-    if (width == null) return null;
-    widths.push(width);
-  }
-  return widths.length > 0 ? widths : null;
-}
-function getSelectedColumnWidths(editor, rect) {
-  return getDomColumnWidths(editor, rect) ?? getNodeColumnWidths(rect);
-}
-function dispatchTableLayoutChange(editor) {
-  editor.view.dom.dispatchEvent(new CustomEvent(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT, { bubbles: true }));
-}
-function mergeTableCellsPreservingColumnWidths(editor) {
-  const rect = getSelectedTableRect(editor);
-  const widths = getSelectedColumnWidths(editor, rect);
-  const merged = editor.chain().focus().mergeCells().run();
-  if (!merged) return merged;
-  if (!widths) {
-    dispatchTableLayoutChange(editor);
-    return merged;
-  }
-  const nextRect = getSelectedTableRect(editor);
-  const cellPos = nextRect.map.map[nextRect.top * nextRect.map.width + nextRect.left];
-  const absolutePos = nextRect.tableStart + cellPos;
-  const node = editor.state.doc.nodeAt(absolutePos);
-  if (!node) return merged;
-  editor.view.dispatch(
-    editor.state.tr.setNodeMarkup(absolutePos, node.type, {
-      ...node.attrs,
-      colwidth: widths
-    })
-  );
-  dispatchTableLayoutChange(editor);
-  return true;
-}
-function runTableCommandAtCellPos(editor, cellPos, command) {
-  if (cellPos == null) return false;
-  focusCell(editor, cellPos);
-  return command(editor.chain().focus(null, { scrollIntoView: false })).run();
-}
-function getTableCornerCellPos(editor, activePos) {
-  const tableInfo = findTableInfoFromCellPos(editor, activePos);
-  if (!tableInfo) return null;
-  const map = import_tables.TableMap.get(tableInfo.table);
-  return tableInfo.tableStart + map.positionAt(map.height - 1, map.width - 1, tableInfo.table);
-}
-function replaceTableAtCellPos(editor, cellPos, updateTable) {
-  if (cellPos == null) return false;
-  const tableInfo = findTableInfoFromCellPos(editor, cellPos);
-  if (!tableInfo) return false;
-  const nextTable = updateTable(tableInfo.table);
-  if (!nextTable) return false;
-  editor.view.dispatch(editor.state.tr.replaceWith(tableInfo.tablePos, tableInfo.tablePos + tableInfo.table.nodeSize, nextTable));
-  dispatchTableLayoutChange(editor);
-  return true;
-}
-function duplicateTableRowAt(editor, rowIndex, cellPos) {
-  return replaceTableAtCellPos(editor, cellPos, (tableNode) => {
-    const rows = collectChildren(tableNode);
-    const rowNode = rows[rowIndex];
-    if (!rowNode) return null;
-    rows.splice(rowIndex + 1, 0, rowNode.copy(rowNode.content));
-    return tableNode.type.create(tableNode.attrs, rows);
-  });
-}
-function clearTableRowAt(editor, rowIndex, cellPos) {
-  return replaceTableAtCellPos(editor, cellPos, (tableNode) => {
-    const rows = collectChildren(tableNode);
-    const rowNode = rows[rowIndex];
-    if (!rowNode) return null;
-    const cells = collectChildren(rowNode).map((cellNode) => createEmptyCellNode(cellNode));
-    rows[rowIndex] = rowNode.type.create(rowNode.attrs, cells);
-    return tableNode.type.create(tableNode.attrs, rows);
-  });
-}
-function duplicateTableColumnAt(editor, columnIndex, cellPos) {
-  return replaceTableAtCellPos(editor, cellPos, (tableNode) => {
-    const rows = collectChildren(tableNode).map((rowNode) => {
-      const cells = collectChildren(rowNode);
-      const cellNode = cells[columnIndex];
-      if (!cellNode) return rowNode;
-      cells.splice(columnIndex + 1, 0, cellNode.copy(cellNode.content));
-      return rowNode.type.create(rowNode.attrs, cells);
-    });
-    return tableNode.type.create(tableNode.attrs, rows);
-  });
-}
-function clearTableColumnAt(editor, columnIndex, cellPos) {
-  return replaceTableAtCellPos(editor, cellPos, (tableNode) => {
-    const rows = collectChildren(tableNode).map((rowNode) => {
-      const cells = collectChildren(rowNode);
-      const cellNode = cells[columnIndex];
-      if (!cellNode) return rowNode;
-      cells[columnIndex] = createEmptyCellNode(cellNode);
-      return rowNode.type.create(rowNode.attrs, cells);
-    });
-    return tableNode.type.create(tableNode.attrs, rows);
-  });
-}
-function expandTableFromCell(editor, activeCellPos, rows, columns) {
-  let cornerCellPos = getTableCornerCellPos(editor, activeCellPos);
-  if (cornerCellPos == null) return false;
-  for (let index = 0; index < rows; index += 1) {
-    const ok = runTableCommandAtCellPos(editor, cornerCellPos, (chain) => chain.addRowAfter());
-    if (!ok) return false;
-    cornerCellPos = getTableCornerCellPos(editor, cornerCellPos);
-    if (cornerCellPos == null) return false;
-  }
-  for (let index = 0; index < columns; index += 1) {
-    const ok = runTableCommandAtCellPos(editor, cornerCellPos, (chain) => chain.addColumnAfter());
-    if (!ok) return false;
-    cornerCellPos = getTableCornerCellPos(editor, cornerCellPos);
-    if (cornerCellPos == null) return false;
-  }
-  dispatchTableLayoutChange(editor);
-  return true;
-}
+              onClick: () => applyTableAlignment(editor, "left", tableCommandAnchorPos),
+              active: hasTableContext && currentTableAlign === "left",
+              disabled: !hasTableContext
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react48.AlignCenter,
+              label: t("tableMenu.alignCenter"),
+              onClick: () => applyTableAlignment(editor, "center", tableCommandAnchorPos),
+              active: hasTableContext && currentTableAlign === "center",
+              disabled: !hasTableContext
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react48.AlignRight,
+              label: t("tableMenu.alignRight"),
+              onClick: () => applyTableAlignment(editor, "right", tableCommandAnchorPos),
+              active: hasTableContext && currentTableAlign === "right",
+              disabled: !hasTableContext
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "my-1 border-t" }),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react48.ArrowLeft,
+              label: t("tableMenu.addColumnBefore"),
+              onClick: () => editor.chain().focus().addColumnBefore().run(),
+              disabled: !hasTableContext || !editor.can().addColumnBefore()
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react48.ArrowDown,
+              label: t("tableMenu.addColumnAfter"),
+              onClick: () => editor.chain().focus().addColumnAfter().run(),
+              disabled: !hasTableContext || !editor.can().addColumnAfter()
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react48.ArrowUp,
+              label: t("tableMenu.addRowBefore"),
+              onClick: () => editor.chain().focus().addRowBefore().run(),
+              disabled: !hasTableContext || !editor.can().addRowBefore()
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react48.ArrowRight,
+              label: t("tableMenu.addRowAfter"),
+              onClick: () => editor.chain().focus().addRowAfter().run(),
+              disabled: !hasTableContext || !editor.can().addRowAfter()
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "my-1 border-t" }),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react48.Table,
+              label: t("tableMenu.toggleHeaderRow"),
+              onClick: () => editor.chain().focus().toggleHeaderRow().run(),
+              disabled: !hasTableContext || !editor.can().toggleHeaderRow()
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react48.Table,
+              label: t("tableMenu.toggleHeaderColumn"),
+              onClick: () => editor.chain().focus().toggleHeaderColumn().run(),
+              disabled: !hasTableContext || !editor.can().toggleHeaderColumn()
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "my-1 border-t" }),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react48.Trash2,
+              label: t("tableMenu.deleteColumn"),
+              onClick: () => editor.chain().focus().deleteColumn().run(),
+              disabled: !hasTableContext || !editor.can().deleteColumn()
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react48.Trash2,
+              label: t("tableMenu.deleteRow"),
+              onClick: () => editor.chain().focus().deleteRow().run(),
+              disabled: !hasTableContext || !editor.can().deleteRow()
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react48.Trash2,
+              label: t("tableMenu.deleteTable"),
+              onClick: () => editor.chain().focus().deleteTable().run(),
+              disabled: !hasTableContext || !editor.can().deleteTable()
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ToolbarDivider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: t("toolbar.undo"), children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react48.Undo, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: t("toolbar.redo"), children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react48.Redo, { className: "w-4 h-4" }) }),
+    hasTableContext && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ToolbarDivider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().addColumnBefore().run(),
+          disabled: !editor.can().addColumnBefore(),
+          title: t("tableMenu.addColumnBefore"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react48.ArrowLeft, { className: "w-4 h-4" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().addColumnAfter().run(),
+          disabled: !editor.can().addColumnAfter(),
+          title: t("tableMenu.addColumnAfter"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react48.ArrowRight, { className: "w-4 h-4" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().addRowBefore().run(),
+          disabled: !editor.can().addRowBefore(),
+          title: t("tableMenu.addRowBefore"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react48.ArrowUp, { className: "w-4 h-4" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().addRowAfter().run(),
+          disabled: !editor.can().addRowAfter(),
+          title: t("tableMenu.addRowAfter"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react48.ArrowDown, { className: "w-4 h-4" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+        ToolbarButton,
+        {
+          onClick: () => {
+            if (canSplitCell) {
+              editor.chain().focus().splitCell().run();
+              return;
+            }
+            mergeTableCellsPreservingColumnWidths(editor);
+          },
+          active: canSplitCell,
+          disabled: !canMergeCells && !canSplitCell,
+          title: canSplitCell ? t("tableMenu.splitCell") : t("tableMenu.mergeCells"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react48.TableCellsMerge, { className: "w-4 h-4" })
+        }
+      )
+    ] })
+  ] });
+};
 
 // src/components/UEditor/menus.tsx
+var import_react62 = require("react");
+var import_react63 = require("@tiptap/react");
+var import_tables2 = require("@tiptap/pm/tables");
+var import_react_dom8 = require("react-dom");
+var import_lucide_react49 = require("lucide-react");
 var import_jsx_runtime86 = require("react/jsx-runtime");
-var FloatingSlashCommandMenu = ({ editor, onClose }) => {
-  const t = useSmartTranslations("UEditor");
-  const messages = (0, import_react62.useMemo)(() => buildSlashCommandMessages(t), [t]);
-  const items = (0, import_react62.useMemo)(() => buildSlashCommandItems({ query: "", messages }), [messages]);
-  const listRef = (0, import_react62.useRef)(null);
-  (0, import_react62.useEffect)(() => {
-    const handleKeyDown2 = (event) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        onClose();
-        return;
-      }
-      const handled = listRef.current?.onKeyDown({ event }) ?? false;
-      if (handled) {
-        event.preventDefault();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown2);
-    return () => document.removeEventListener("keydown", handleKeyDown2);
-  }, [onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-    SlashCommandList,
-    {
-      ref: listRef,
-      items,
-      messages,
-      command: (item) => {
-        item.command({ editor });
-        onClose();
-      }
-    }
-  );
-};
-var FloatingMenuContent = ({ editor }) => {
-  const t = useSmartTranslations("UEditor");
-  const [showCommands, setShowCommands] = (0, import_react62.useState)(false);
-  if (showCommands) {
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(FloatingSlashCommandMenu, { editor, onClose: () => setShowCommands(false) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
-    "button",
-    {
-      type: "button",
-      onClick: () => setShowCommands(true),
-      className: "flex items-center gap-1 px-2 py-1.5 rounded-lg hover:bg-accent transition-all group",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_lucide_react49.Plus, { className: "w-4 h-4 text-muted-foreground group-hover:text-foreground" }),
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "text-sm text-muted-foreground group-hover:text-foreground", children: t("floatingMenu.addBlock") })
-      ]
-    }
-  );
-};
 function applyTableCellBackground(editor, color) {
   const value = color || null;
   const { state, view } = editor;
@@ -29703,54 +29757,6 @@ var CustomBubbleMenu = ({
     document.body
   );
 };
-var CustomFloatingMenu = ({ editor }) => {
-  const FLOATING_MENU_OFFSET = 16;
-  const [isVisible, setIsVisible] = (0, import_react62.useState)(false);
-  const [position, setPosition] = (0, import_react62.useState)({ top: 0, left: 0 });
-  (0, import_react62.useEffect)(() => {
-    const updatePosition = () => {
-      const { state, view } = editor;
-      const { $from, empty } = state.selection;
-      const isEmptyTextBlock = $from.parent.isTextblock && $from.parent.type.name === "paragraph" && $from.parent.textContent === "" && empty;
-      if (!isEmptyTextBlock || !view.hasFocus()) {
-        setIsVisible(false);
-        return;
-      }
-      const coords = view.coordsAtPos($from.pos);
-      setPosition({ top: coords.top - FLOATING_MENU_OFFSET, left: coords.left });
-      setIsVisible(true);
-    };
-    const handleBlur = () => setIsVisible(false);
-    editor.on("selectionUpdate", updatePosition);
-    editor.on("focus", updatePosition);
-    editor.on("blur", handleBlur);
-    editor.on("update", updatePosition);
-    return () => {
-      editor.off("selectionUpdate", updatePosition);
-      editor.off("focus", updatePosition);
-      editor.off("blur", handleBlur);
-      editor.off("update", updatePosition);
-    };
-  }, [editor]);
-  if (!isVisible) return null;
-  return (0, import_react_dom8.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-      "div",
-      {
-        "data-popover": true,
-        className: "fixed z-99999 rounded-2xl border border-border/50 bg-card text-card-foreground shadow-lg backdrop-blur-sm overflow-hidden animate-in fade-in-0 slide-in-from-bottom-2",
-        style: {
-          top: `${position.top}px`,
-          left: `${position.left}px`,
-          transform: "translate(-50%, -100%)"
-        },
-        onMouseDown: (e) => e.preventDefault(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(FloatingMenuContent, { editor })
-      }
-    ),
-    document.body
-  );
-};
 
 // src/components/UEditor/CharacterCount.tsx
 var import_jsx_runtime87 = require("react/jsx-runtime");
@@ -34525,8 +34531,8 @@ function TableAddRails({
   const visibleTableHeight = Math.min(layout.tableHeight, layout.viewportHeight);
   const columnRailTop = layout.tableTop;
   const columnRailLeft = layout.tableLeft + visibleTableWidth + ADD_COLUMN_RAIL_GAP;
-  const rowRailTop = layout.tableTop + visibleTableHeight + ADD_ROW_RAIL_GAP;
-  const rowRailLeft = layout.tableLeft;
+  const rowRailTop = layout.wrapperTop + layout.wrapperHeight + ADD_ROW_RAIL_GAP;
+  const rowRailLeft = Math.max(layout.tableLeft, layout.wrapperLeft);
   const showColumnRail = controlsVisible || addColumnVisible;
   const showRowRail = controlsVisible || addRowVisible;
   return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_jsx_runtime89.Fragment, { children: [
@@ -35156,6 +35162,7 @@ function TableControls({ editor, containerRef }) {
     const proseMirror = editor.view.dom;
     const surface = containerRef.current;
     if (!surface) return void 0;
+    const scrollListenerOptions = { passive: true, capture: true };
     const handleMouseOver = (event) => {
       if (dragStateRef.current) return;
       const cell = getCellFromTarget(event.target);
@@ -35181,7 +35188,7 @@ function TableControls({ editor, containerRef }) {
     proseMirror.addEventListener("focusin", handleFocusIn);
     surface.addEventListener("mouseover", handleSurfaceMouseMove);
     surface.addEventListener("mousemove", handleSurfaceMouseMove);
-    surface.addEventListener("scroll", refreshCurrentLayout, { passive: true });
+    surface.addEventListener("scroll", refreshCurrentLayout, scrollListenerOptions);
     surface.addEventListener(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT, refreshCurrentLayout);
     window.addEventListener("resize", refreshCurrentLayout);
     editor.on("selectionUpdate", syncFromSelection);
@@ -35195,7 +35202,7 @@ function TableControls({ editor, containerRef }) {
       proseMirror.removeEventListener("focusin", handleFocusIn);
       surface.removeEventListener("mouseover", handleSurfaceMouseMove);
       surface.removeEventListener("mousemove", handleSurfaceMouseMove);
-      surface.removeEventListener("scroll", refreshCurrentLayout);
+      surface.removeEventListener("scroll", refreshCurrentLayout, scrollListenerOptions);
       surface.removeEventListener(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT, refreshCurrentLayout);
       window.removeEventListener("resize", refreshCurrentLayout);
       editor.off("selectionUpdate", syncFromSelection);
@@ -35636,6 +35643,7 @@ var UEDITOR_PROSEMIRROR_CLASS_NAME = cn(
   "[&_.tableWrapper::-webkit-scrollbar-thumb]:border-transparent",
   "[&_.tableWrapper::-webkit-scrollbar-thumb]:bg-border/70",
   "[&_.tableWrapper::-webkit-scrollbar-thumb:hover]:bg-muted-foreground/45",
+  "[&_table]:w-auto",
   "[&_table]:table-fixed",
   "[&_table]:overflow-hidden",
   "[&_table]:select-text",
@@ -35664,7 +35672,7 @@ var UEDITOR_PROSEMIRROR_CLASS_NAME = cn(
   "[&_.column-resize-handle]:top-[-1px]",
   "[&_.column-resize-handle]:bottom-[-1px]",
   "[&_.column-resize-handle]:right-[-5px]",
-  "[&_.column-resize-handle]:z-10",
+  "[&_.column-resize-handle]:z-30",
   "[&_.column-resize-handle]:w-2.5",
   "[&_.column-resize-handle]:bg-transparent",
   "[&_.column-resize-handle]:rounded-none",
@@ -35918,26 +35926,31 @@ function useUEditorTableInteractions(editor, editable = true) {
   const activeTableCellRef = (0, import_react66.useRef)(null);
   const suppressActiveCellHighlightRef = (0, import_react66.useRef)(false);
   const tableLayoutSyncFrameRef = (0, import_react66.useRef)(null);
+  const getProseMirrorElement = import_react66.default.useCallback(() => {
+    return editorContentRef.current?.querySelector(".ProseMirror");
+  }, []);
   const setEditorResizeCursor = import_react66.default.useCallback((cursor) => {
-    const proseMirror = editorContentRef.current?.querySelector(".ProseMirror");
+    const proseMirror = getProseMirrorElement();
     if (proseMirror) {
       proseMirror.style.cursor = cursor;
     }
-  }, []);
+  }, [getProseMirrorElement]);
   const hideColumnGuide = import_react66.default.useCallback(() => {
     editorContentRef.current?.classList.remove("resize-cursor");
+    getProseMirrorElement()?.classList.remove("resize-cursor");
     const guide = tableColumnGuideRef.current;
     if (guide) {
       guide.style.opacity = "0";
     }
-  }, []);
+  }, [getProseMirrorElement]);
   const hideRowGuide = import_react66.default.useCallback(() => {
     editorContentRef.current?.classList.remove("resize-row-cursor");
+    getProseMirrorElement()?.classList.remove("resize-row-cursor");
     const guide = tableRowGuideRef.current;
     if (guide) {
       guide.style.opacity = "0";
     }
-  }, []);
+  }, [getProseMirrorElement]);
   const clearAllTableResizeHover = import_react66.default.useCallback(() => {
     setEditorResizeCursor("");
     hideColumnGuide();
@@ -35967,7 +35980,10 @@ function useUEditorTableInteractions(editor, editable = true) {
     });
   }, [updateActiveCellHighlight]);
   const setActiveTableCell = import_react66.default.useCallback((cell) => {
-    if (activeTableCellRef.current === cell) return;
+    if (activeTableCellRef.current === cell) {
+      updateActiveCellHighlight(cell);
+      return;
+    }
     activeTableCellRef.current = cell;
     updateActiveCellHighlight(activeTableCellRef.current);
   }, [updateActiveCellHighlight]);
@@ -35992,8 +36008,9 @@ function useUEditorTableInteractions(editor, editable = true) {
     guide.style.height = `${metrics.height}px`;
     guide.style.opacity = "1";
     surface.classList.add("resize-cursor");
+    getProseMirrorElement()?.classList.add("resize-cursor");
     setEditorResizeCursor("col-resize");
-  }, [setEditorResizeCursor]);
+  }, [getProseMirrorElement, setEditorResizeCursor]);
   const showRowGuide = import_react66.default.useCallback((table, row, cell) => {
     const surface = editorContentRef.current;
     const guide = tableRowGuideRef.current;
@@ -36005,8 +36022,9 @@ function useUEditorTableInteractions(editor, editable = true) {
     guide.style.height = `${ROW_RESIZE_LINE_THICKNESS}px`;
     guide.style.opacity = "1";
     surface.classList.add("resize-row-cursor");
+    getProseMirrorElement()?.classList.add("resize-row-cursor");
     setEditorResizeCursor("row-resize");
-  }, [setEditorResizeCursor]);
+  }, [getProseMirrorElement, setEditorResizeCursor]);
   const {
     beginResize,
     cancelResize,
@@ -36025,19 +36043,32 @@ function useUEditorTableInteractions(editor, editable = true) {
   });
   const syncActiveTableCellFromSelection = import_react66.default.useCallback(() => {
     if (!editor) return;
+    if (!editor.isFocused) {
+      clearActiveTableCell();
+      return;
+    }
     setActiveTableCell(getSelectionTableCell(editor.view));
-  }, [editor, setActiveTableCell]);
+  }, [clearActiveTableCell, editor, setActiveTableCell]);
   (0, import_react66.useEffect)(() => {
     if (!editor || !editable) return void 0;
     const proseMirror = editor.view.dom;
     const surface = editorContentRef.current;
     let selectionSyncTimeoutId = 0;
+    const scrollListenerOptions = { passive: true, capture: true };
     const scheduleActiveCellSync = (fallbackCell = null) => {
       requestAnimationFrame(() => {
+        if (!editor.isFocused) {
+          clearActiveTableCell();
+          return;
+        }
         setActiveTableCell(getSelectionTableCell(editor.view) ?? fallbackCell);
       });
       window.clearTimeout(selectionSyncTimeoutId);
       selectionSyncTimeoutId = window.setTimeout(() => {
+        if (!editor.isFocused) {
+          clearActiveTableCell();
+          return;
+        }
         setActiveTableCell(getSelectionTableCell(editor.view) ?? fallbackCell);
       }, 0);
     };
@@ -36141,13 +36172,15 @@ function useUEditorTableInteractions(editor, editable = true) {
     proseMirror.addEventListener("keyup", handleSelectionChange);
     proseMirror.addEventListener("focusin", handleSelectionChange);
     document.addEventListener("selectionchange", handleSelectionChange);
-    surface?.addEventListener("scroll", handleActiveCellLayoutChange, { passive: true });
+    surface?.addEventListener("scroll", handleActiveCellLayoutChange, scrollListenerOptions);
     window.addEventListener("resize", handleActiveCellLayoutChange);
     document.addEventListener("pointermove", handlePointerMove);
     document.addEventListener("pointerup", handlePointerUp);
     window.addEventListener("blur", handleWindowBlur);
     editor.on("selectionUpdate", syncActiveTableCellFromSelection);
     editor.on("focus", syncActiveTableCellFromSelection);
+    editor.on("blur", clearActiveTableCell);
+    editor.on("update", scheduleTableLayoutSync);
     syncActiveTableCellFromSelection();
     return () => {
       proseMirror.removeEventListener("mousemove", handleEditorMouseMove);
@@ -36158,13 +36191,15 @@ function useUEditorTableInteractions(editor, editable = true) {
       proseMirror.removeEventListener("keyup", handleSelectionChange);
       proseMirror.removeEventListener("focusin", handleSelectionChange);
       document.removeEventListener("selectionchange", handleSelectionChange);
-      surface?.removeEventListener("scroll", handleActiveCellLayoutChange);
+      surface?.removeEventListener("scroll", handleActiveCellLayoutChange, scrollListenerOptions);
       window.removeEventListener("resize", handleActiveCellLayoutChange);
       document.removeEventListener("pointermove", handlePointerMove);
       document.removeEventListener("pointerup", handlePointerUp);
       window.removeEventListener("blur", handleWindowBlur);
       editor.off("selectionUpdate", syncActiveTableCellFromSelection);
       editor.off("focus", syncActiveTableCellFromSelection);
+      editor.off("blur", clearActiveTableCell);
+      editor.off("update", scheduleTableLayoutSync);
       window.clearTimeout(selectionSyncTimeoutId);
       if (tableLayoutSyncFrameRef.current !== null) {
         window.cancelAnimationFrame(tableLayoutSyncFrameRef.current);
@@ -36177,7 +36212,7 @@ function useUEditorTableInteractions(editor, editable = true) {
       clearHoveredTableCell();
       clearAllTableResizeHover();
     };
-  }, [beginResize, cancelResize, cleanupRowResize, clearActiveTableCell, clearAllTableResizeHover, clearHoveredTableCell, editable, editor, handleRowResizePointerMove, handleRowResizePointerUp, hideColumnGuide, hideRowGuide, isRowResizing, showColumnGuide, showRowGuide, syncActiveRowResizeGuide, syncActiveTableCellFromSelection, updateActiveCellHighlight]);
+  }, [beginResize, cancelResize, cleanupRowResize, clearActiveTableCell, clearAllTableResizeHover, clearHoveredTableCell, editable, editor, handleRowResizePointerMove, handleRowResizePointerUp, hideColumnGuide, hideRowGuide, isRowResizing, scheduleTableLayoutSync, showColumnGuide, showRowGuide, syncActiveRowResizeGuide, syncActiveTableCellFromSelection, updateActiveCellHighlight]);
   return {
     editorContentRef,
     tableColumnGuideRef,
@@ -36679,6 +36714,13 @@ var MenuBar = ({
   const openPreviewDialog = () => {
     setShowPreviewDialog(true);
   };
+  const handlePreview = () => {
+    if (onPreview) {
+      onPreview();
+      return;
+    }
+    openPreviewDialog();
+  };
   const applySourceHtml = () => {
     editor.chain().focus().setContent(sourceHtml).run();
     setShowSourceDialog(false);
@@ -36790,7 +36832,7 @@ var MenuBar = ({
     { label: t("menubar.edit"), items: buildEditMenuItems(t, editor), open: void 0, onOpenChange: void 0 },
     {
       label: t("menubar.view"),
-      items: buildViewMenuItems(t, { containerRef, onSourceCode, openSourceDialog, onPreview, openPreviewDialog }),
+      items: buildViewMenuItems(t, { containerRef, onSourceCode, openSourceDialog, onPreview: handlePreview, openPreviewDialog }),
       open: void 0,
       onOpenChange: void 0
     },
@@ -36827,17 +36869,33 @@ var MenuBar = ({
         onChange: (e) => handleImageFiles(e.target.files)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "flex items-center gap-0.5 border-b border-border/35 bg-muted/20 px-1.5 py-0.5", children: menus.map(({ label, items, open, onOpenChange }) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
-      DropdownMenu,
-      {
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(MenuBarTrigger, { children: label }),
-        placement: "bottom-start",
-        isOpen: open,
-        onOpenChange,
-        children: renderMenuItems(items)
-      },
-      label
-    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "flex items-center gap-0.5 border-b border-border/35 bg-muted/20 px-1.5 py-0.5", children: [
+      menus.map(({ label, items, open, onOpenChange }) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+        DropdownMenu,
+        {
+          trigger: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(MenuBarTrigger, { children: label }),
+          placement: "bottom-start",
+          isOpen: open,
+          onOpenChange,
+          children: renderMenuItems(items)
+        },
+        label
+      )),
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: handlePreview,
+          "aria-label": t("menubar.preview"),
+          title: t("menubar.preview"),
+          className: cn(
+            "ml-auto inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors",
+            "hover:bg-accent hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_lucide_react53.Eye, { className: "h-4 w-4", "aria-hidden": "true" })
+        }
+      )
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
       Modal_default,
       {
@@ -36891,8 +36949,14 @@ var MenuBar = ({
           "div",
           {
             "data-testid": "preview-content",
-            className: "prose prose-sm sm:prose dark:prose-invert max-w-none p-2",
-            dangerouslySetInnerHTML: { __html: editor.getHTML() }
+            className: "max-h-[70vh] overflow-y-auto overscroll-contain pr-2",
+            children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+              "div",
+              {
+                className: UEDITOR_PROSEMIRROR_CLASS_NAME,
+                dangerouslySetInnerHTML: { __html: editor.getHTML() }
+              }
+            )
           }
         )
       }
@@ -36920,7 +36984,6 @@ var UEditor = import_react69.default.forwardRef(({
   autofocus = false,
   showToolbar = true,
   showBubbleMenu = true,
-  showFloatingMenu = false,
   showCharacterCount = true,
   maxCharacters,
   minHeight = "200px",
@@ -37122,7 +37185,6 @@ var UEditor = import_react69.default.forwardRef(({
             lineHeights
           }
         ),
-        editable && showFloatingMenu && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(CustomFloatingMenu, { editor }),
         /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
           "div",
           {
@@ -37155,7 +37217,7 @@ var UEditor = import_react69.default.forwardRef(({
                   ref: activeTableCellHighlightRef,
                   "aria-hidden": "true",
                   "data-ueditor-active-cell-highlight": "",
-                  className: "pointer-events-none hidden absolute z-20 rounded-[2px] border-2 border-primary bg-primary/10 transition-[left,top,width,height] duration-100"
+                  className: "pointer-events-none hidden absolute z-20 rounded-[2px] border-2 border-primary bg-primary/10"
                 }
               ),
               editable && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(TableControls, { editor, containerRef: editorContentRef }),