@kopexa/extension-table 17.0.45 → 17.0.46

package/dist/table/table.mjs

@@ -1,13 +1,13 @@
 "use client";
 import {
   Table
-} from "../chunk-OPDSKEZR.mjs";
-import "../chunk-GMNNSVR3.mjs";
-import "../chunk-NTWXQSW6.mjs";
-import "../chunk-BAQU2YT5.mjs";
-import "../chunk-DF6ZMJLL.mjs";
-import "../chunk-7NEAULTF.mjs";
-import "../chunk-IMRHHVEF.mjs";
+} from "../chunk-LPHCE6EI.mjs";
+import "../chunk-GHOJLOCF.mjs";
+import "../chunk-KNOMCS6F.mjs";
+import "../chunk-3XEOCAHB.mjs";
+import "../chunk-KLUH6EZS.mjs";
+import "../chunk-BTJ3DCGC.mjs";
+import "../chunk-QHD3QTD2.mjs";
 import "../chunk-WKV76XOR.mjs";
 export {
   Table

package/dist/table/views/table-column-menu.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Editor } from '@tiptap/core';
+
+interface TableColumnMenuProps {
+    editor: Editor;
+    cellPos?: number;
+    style?: React.CSSProperties;
+}
+declare function TableColumnMenu({ editor, cellPos, style, }: TableColumnMenuProps): react_jsx_runtime.JSX.Element;
+
+export { TableColumnMenu };

package/dist/table/views/table-column-menu.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Editor } from '@tiptap/core';
+
+interface TableColumnMenuProps {
+    editor: Editor;
+    cellPos?: number;
+    style?: React.CSSProperties;
+}
+declare function TableColumnMenu({ editor, cellPos, style, }: TableColumnMenuProps): react_jsx_runtime.JSX.Element;
+
+export { TableColumnMenu };

package/dist/table/views/table-column-menu.js

@@ -0,0 +1,84 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/table/views/table-column-menu.tsx
+var table_column_menu_exports = {};
+__export(table_column_menu_exports, {
+  TableColumnMenu: () => TableColumnMenu
+});
+module.exports = __toCommonJS(table_column_menu_exports);
+var import_dropdown_menu = require("@kopexa/dropdown-menu");
+var import_tables = require("@tiptap/pm/tables");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function TableColumnMenu({
+  editor,
+  cellPos,
+  style
+}) {
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const chainAtCell = (0, import_react.useCallback)(() => {
+    const chain = editor.chain().focus();
+    if (cellPos != null) {
+      return chain.setTextSelection(cellPos + 1);
+    }
+    return chain;
+  }, [editor, cellPos]);
+  const handleToggleHeader = (0, import_react.useCallback)(() => {
+    chainAtCell().command(({ state, dispatch }) => (0, import_tables.toggleHeaderColumn)(state, dispatch)).run();
+    setOpen(false);
+  }, [chainAtCell]);
+  const handleAddBefore = (0, import_react.useCallback)(() => {
+    chainAtCell().addColumnBefore().run();
+    setOpen(false);
+  }, [chainAtCell]);
+  const handleAddAfter = (0, import_react.useCallback)(() => {
+    chainAtCell().addColumnAfter().run();
+    setOpen(false);
+  }, [chainAtCell]);
+  const handleDelete = (0, import_react.useCallback)(() => {
+    chainAtCell().deleteColumn().run();
+    setOpen(false);
+  }, [chainAtCell]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_menu.DropdownMenu.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "columns-control-div",
+        "aria-label": "Column actions",
+        style
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_menu.DropdownMenu.Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_menu.DropdownMenu.Group, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Item, { onSelect: handleToggleHeader, children: "Toggle header column" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Item, { onSelect: handleAddBefore, children: "Insert column before" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Item, { onSelect: handleAddAfter, children: "Insert column after" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Item, { variant: "destructive", onSelect: handleDelete, children: "Delete column" })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TableColumnMenu
+});

package/dist/table/views/table-column-menu.mjs

@@ -0,0 +1,8 @@
+"use client";
+import {
+  TableColumnMenu
+} from "../../chunk-QHD3QTD2.mjs";
+import "../../chunk-WKV76XOR.mjs";
+export {
+  TableColumnMenu
+};

package/dist/table/views/table-node-view.d.mts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { NodeViewProps } from '@tiptap/react';
+
+/**
+ * React-based Table NodeView
+ *
+ * Replaces the old imperative JSX-DOM TableView with a React component.
+ * Handles:
+ * - Column width management via colgroup (for columnResizing plugin)
+ * - Column/row selection controls (via table-controls plugin decorations)
+ * - Hover-based add column/row bar buttons on table edges
+ *
+ * DOM structure:
+ *   NodeViewWrapper.table-node-view (position: relative, no overflow)
+ *   ├── div.table-controls (absolute, not clipped)
+ *   │   ├── div.rows-control → TableRowMenu
+ *   │   └── div.columns-control → TableColumnMenu
+ *   ├── div.table-wrapper (overflow-x: auto, scrollable)
+ *   │   └── <table> (NodeViewContent)
+ *   ├── div add-column-bar (absolute, right edge)
+ *   └── div add-row-bar (absolute, bottom edge)
+ */
+declare function TableNodeView({ editor, node, decorations, getPos, }: NodeViewProps): react_jsx_runtime.JSX.Element;
+
+export { TableNodeView };

package/dist/table/views/table-node-view.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { NodeViewProps } from '@tiptap/react';
+
+/**
+ * React-based Table NodeView
+ *
+ * Replaces the old imperative JSX-DOM TableView with a React component.
+ * Handles:
+ * - Column width management via colgroup (for columnResizing plugin)
+ * - Column/row selection controls (via table-controls plugin decorations)
+ * - Hover-based add column/row bar buttons on table edges
+ *
+ * DOM structure:
+ *   NodeViewWrapper.table-node-view (position: relative, no overflow)
+ *   ├── div.table-controls (absolute, not clipped)
+ *   │   ├── div.rows-control → TableRowMenu
+ *   │   └── div.columns-control → TableColumnMenu
+ *   ├── div.table-wrapper (overflow-x: auto, scrollable)
+ *   │   └── <table> (NodeViewContent)
+ *   ├── div add-column-bar (absolute, right edge)
+ *   └── div add-row-bar (absolute, bottom edge)
+ */
+declare function TableNodeView({ editor, node, decorations, getPos, }: NodeViewProps): react_jsx_runtime.JSX.Element;
+
+export { TableNodeView };

package/dist/table/views/table-node-view.js

@@ -0,0 +1,370 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/table/views/table-node-view.tsx
+var table_node_view_exports = {};
+__export(table_node_view_exports, {
+  TableNodeView: () => TableNodeView
+});
+module.exports = __toCommonJS(table_node_view_exports);
+var import_tables3 = require("@tiptap/pm/tables");
+var import_react3 = require("@tiptap/react");
+var import_react4 = require("react");
+
+// src/table/views/table-column-menu.tsx
+var import_dropdown_menu = require("@kopexa/dropdown-menu");
+var import_tables = require("@tiptap/pm/tables");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function TableColumnMenu({
+  editor,
+  cellPos,
+  style
+}) {
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const chainAtCell = (0, import_react.useCallback)(() => {
+    const chain = editor.chain().focus();
+    if (cellPos != null) {
+      return chain.setTextSelection(cellPos + 1);
+    }
+    return chain;
+  }, [editor, cellPos]);
+  const handleToggleHeader = (0, import_react.useCallback)(() => {
+    chainAtCell().command(({ state, dispatch }) => (0, import_tables.toggleHeaderColumn)(state, dispatch)).run();
+    setOpen(false);
+  }, [chainAtCell]);
+  const handleAddBefore = (0, import_react.useCallback)(() => {
+    chainAtCell().addColumnBefore().run();
+    setOpen(false);
+  }, [chainAtCell]);
+  const handleAddAfter = (0, import_react.useCallback)(() => {
+    chainAtCell().addColumnAfter().run();
+    setOpen(false);
+  }, [chainAtCell]);
+  const handleDelete = (0, import_react.useCallback)(() => {
+    chainAtCell().deleteColumn().run();
+    setOpen(false);
+  }, [chainAtCell]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_menu.DropdownMenu.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "columns-control-div",
+        "aria-label": "Column actions",
+        style
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_menu.DropdownMenu.Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_menu.DropdownMenu.Group, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Item, { onSelect: handleToggleHeader, children: "Toggle header column" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Item, { onSelect: handleAddBefore, children: "Insert column before" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Item, { onSelect: handleAddAfter, children: "Insert column after" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Item, { variant: "destructive", onSelect: handleDelete, children: "Delete column" })
+    ] })
+  ] });
+}
+
+// src/table/views/table-row-menu.tsx
+var import_dropdown_menu2 = require("@kopexa/dropdown-menu");
+var import_tables2 = require("@tiptap/pm/tables");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function TableRowMenu({ editor, cellPos, style }) {
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  const chainAtCell = (0, import_react2.useCallback)(() => {
+    const chain = editor.chain().focus();
+    if (cellPos != null) {
+      return chain.setTextSelection(cellPos + 1);
+    }
+    return chain;
+  }, [editor, cellPos]);
+  const handleToggleHeader = (0, import_react2.useCallback)(() => {
+    chainAtCell().command(({ state, dispatch }) => (0, import_tables2.toggleHeaderRow)(state, dispatch)).run();
+    setOpen(false);
+  }, [chainAtCell]);
+  const handleAddAbove = (0, import_react2.useCallback)(() => {
+    chainAtCell().addRowBefore().run();
+    setOpen(false);
+  }, [chainAtCell]);
+  const handleAddBelow = (0, import_react2.useCallback)(() => {
+    chainAtCell().addRowAfter().run();
+    setOpen(false);
+  }, [chainAtCell]);
+  const handleDelete = (0, import_react2.useCallback)(() => {
+    chainAtCell().deleteRow().run();
+    setOpen(false);
+  }, [chainAtCell]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_dropdown_menu2.DropdownMenu.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dropdown_menu2.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "rows-control-div",
+        "aria-label": "Row actions",
+        style
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_dropdown_menu2.DropdownMenu.Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_dropdown_menu2.DropdownMenu.Group, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dropdown_menu2.DropdownMenu.Item, { onSelect: handleToggleHeader, children: "Toggle header row" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dropdown_menu2.DropdownMenu.Item, { onSelect: handleAddAbove, children: "Insert row above" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dropdown_menu2.DropdownMenu.Item, { onSelect: handleAddBelow, children: "Insert row below" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dropdown_menu2.DropdownMenu.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dropdown_menu2.DropdownMenu.Item, { variant: "destructive", onSelect: handleDelete, children: "Delete row" })
+    ] })
+  ] });
+}
+
+// src/table/views/table-node-view.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function extractHoverInfo(decorations) {
+  const info = {};
+  for (const dec of decorations) {
+    const spec = dec.spec;
+    if ((spec == null ? void 0 : spec.hoveredCell) !== void 0)
+      info.hoveredCell = spec.hoveredCell;
+    if ((spec == null ? void 0 : spec.hoveredTable) !== void 0)
+      info.hoveredTable = spec.hoveredTable;
+  }
+  return info;
+}
+function TableNodeView({
+  editor,
+  node,
+  decorations,
+  getPos
+}) {
+  const wrapperRef = (0, import_react4.useRef)(null);
+  const scrollRef = (0, import_react4.useRef)(null);
+  const isEditable = (0, import_react3.useEditorState)({
+    editor,
+    selector: ({ editor: e }) => {
+      var _a;
+      return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
+    }
+  });
+  const cellMinWidth = (0, import_react4.useMemo)(() => {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = editor.extensionManager.extensions.find((ext) => ext.name === "table")) == null ? void 0 : _a.options) == null ? void 0 : _b.cellMinWidth) != null ? _c : 100;
+  }, [editor]);
+  const map = (0, import_react4.useMemo)(() => import_tables3.TableMap.get(node), [node]);
+  const [isSideHovered, setIsSideHovered] = (0, import_react4.useState)(false);
+  const [isBottomHovered, setIsBottomHovered] = (0, import_react4.useState)(false);
+  const { hoveredTable, hoveredCell } = (0, import_react4.useMemo)(
+    () => extractHoverInfo(decorations),
+    [decorations]
+  );
+  const controlsDisabled = !hoveredTable || !hoveredCell;
+  (0, import_react4.useEffect)(() => {
+    var _a;
+    const table = (_a = scrollRef.current) == null ? void 0 : _a.querySelector("table");
+    if (!table) return;
+    let colgroup = table.querySelector("colgroup");
+    if (!colgroup) {
+      colgroup = document.createElement("colgroup");
+      table.insertBefore(colgroup, table.firstChild);
+    }
+    const width = map.width;
+    while (colgroup.children.length < width) {
+      colgroup.appendChild(document.createElement("col"));
+    }
+    while (colgroup.children.length > width) {
+      if (colgroup.lastChild) colgroup.removeChild(colgroup.lastChild);
+    }
+    (0, import_tables3.updateColumnsOnResize)(node, colgroup, table, cellMinWidth);
+  }, [node, map.width, cellMinWidth]);
+  const [controlPos, setControlPos] = (0, import_react4.useState)(null);
+  const updatePositions = (0, import_react4.useCallback)(() => {
+    if (!hoveredCell || !wrapperRef.current) {
+      setControlPos(null);
+      return;
+    }
+    const cellDom = editor.view.nodeDOM(hoveredCell.pos);
+    if (!cellDom) {
+      setControlPos(null);
+      return;
+    }
+    const wrapperRect = wrapperRef.current.getBoundingClientRect();
+    const cellRect = cellDom.getBoundingClientRect();
+    setControlPos({
+      columnLeft: cellRect.left - wrapperRect.left,
+      columnWidth: cellRect.width,
+      rowTop: cellRect.top - wrapperRect.top,
+      rowHeight: cellRect.height
+    });
+  }, [hoveredCell, editor.view]);
+  (0, import_react4.useEffect)(() => {
+    updatePositions();
+    const scrollEl = scrollRef.current;
+    if (!scrollEl) return;
+    scrollEl.addEventListener("scroll", updatePositions, { passive: true });
+    return () => scrollEl.removeEventListener("scroll", updatePositions);
+  }, [updatePositions]);
+  const handleMouseMove = (0, import_react4.useCallback)(
+    (e) => {
+      if (!isEditable) return;
+      const rect = e.currentTarget.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const threshold = 50;
+      setIsSideHovered(x >= rect.width - threshold);
+      setIsBottomHovered(y >= rect.height - threshold);
+    },
+    [isEditable]
+  );
+  const handleMouseLeave = (0, import_react4.useCallback)((e) => {
+    const relatedTarget = e.relatedTarget;
+    const currentTarget = e.currentTarget;
+    if (relatedTarget instanceof Node && currentTarget instanceof Node && currentTarget.contains(relatedTarget)) {
+      return;
+    }
+    if (wrapperRef.current && relatedTarget instanceof Node && wrapperRef.current.contains(relatedTarget)) {
+      return;
+    }
+    setIsSideHovered(false);
+    setIsBottomHovered(false);
+  }, []);
+  const focusTable = (0, import_react4.useCallback)(() => {
+    const pos = getPos();
+    if (pos === void 0) return false;
+    try {
+      const resolvedPos = editor.state.doc.resolve(pos + 1);
+      const table = resolvedPos.node(1);
+      if ((table == null ? void 0 : table.type.name) === "table") {
+        let cellPos = pos + 1;
+        table.descendants((n, nodePos) => {
+          if (n.type.name === "tableCell" || n.type.name === "tableHeader") {
+            cellPos = pos + 1 + nodePos + 1;
+            return false;
+          }
+          return true;
+        });
+        editor.chain().focus().setTextSelection(cellPos).run();
+        return true;
+      }
+    } catch {
+    }
+    return false;
+  }, [editor, getPos]);
+  const handleAddColumn = (0, import_react4.useCallback)(() => {
+    if (focusTable()) {
+      editor.chain().addColumnAfter().run();
+    } else {
+      editor.chain().focus().addColumnAfter().run();
+    }
+  }, [editor, focusTable]);
+  const handleAddRow = (0, import_react4.useCallback)(() => {
+    if (focusTable()) {
+      editor.chain().addRowAfter().run();
+    } else {
+      editor.chain().focus().addRowAfter().run();
+    }
+  }, [editor, focusTable]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_react3.NodeViewWrapper,
+    {
+      ref: wrapperRef,
+      className: [
+        "table-node-view pr-6 pb-6",
+        controlsDisabled ? "controls--disabled" : ""
+      ].join(" "),
+      onMouseEnter: handleMouseMove,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      "data-type": "table",
+      children: [
+        isEditable && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "table-controls", contentEditable: false, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              className: "rows-control",
+              style: controlPos ? {
+                top: `${controlPos.rowTop}px`,
+                height: `${controlPos.rowHeight}px`
+              } : void 0,
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TableRowMenu, { editor, cellPos: hoveredCell == null ? void 0 : hoveredCell.pos })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              className: "columns-control",
+              style: controlPos ? {
+                left: `${controlPos.columnLeft}px`,
+                width: `${controlPos.columnWidth}px`
+              } : void 0,
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TableColumnMenu, { editor, cellPos: hoveredCell == null ? void 0 : hoveredCell.pos })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            ref: scrollRef,
+            className: "table-wrapper horizontal-scrollbar scrollbar-md",
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react3.NodeViewContent, { as: "table" })
+          }
+        ),
+        isEditable && isSideHovered && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: "absolute -right-6 top-0 h-full flex items-center",
+            contentEditable: false,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "w-4 h-full hover:bg-accent cursor-pointer flex items-center justify-center rounded-sm transition-colors text-muted-foreground text-xs",
+                onClick: handleAddColumn,
+                "aria-label": "Add column",
+                children: "+"
+              }
+            )
+          }
+        ),
+        isEditable && isBottomHovered && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: "absolute -bottom-6 left-0 w-full flex justify-center",
+            contentEditable: false,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "h-4 w-full hover:bg-accent cursor-pointer flex items-center justify-center rounded-sm transition-colors text-muted-foreground text-xs",
+                onClick: handleAddRow,
+                "aria-label": "Add row",
+                children: "+"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TableNodeView
+});

package/dist/table/views/table-node-view.mjs

@@ -0,0 +1,10 @@
+"use client";
+import {
+  TableNodeView
+} from "../../chunk-GHOJLOCF.mjs";
+import "../../chunk-KNOMCS6F.mjs";
+import "../../chunk-QHD3QTD2.mjs";
+import "../../chunk-WKV76XOR.mjs";
+export {
+  TableNodeView
+};

package/dist/table/views/table-row-menu.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Editor } from '@tiptap/core';
+
+interface TableRowMenuProps {
+    editor: Editor;
+    cellPos?: number;
+    style?: React.CSSProperties;
+}
+declare function TableRowMenu({ editor, cellPos, style }: TableRowMenuProps): react_jsx_runtime.JSX.Element;
+
+export { TableRowMenu };

package/dist/table/views/table-row-menu.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Editor } from '@tiptap/core';
+
+interface TableRowMenuProps {
+    editor: Editor;
+    cellPos?: number;
+    style?: React.CSSProperties;
+}
+declare function TableRowMenu({ editor, cellPos, style }: TableRowMenuProps): react_jsx_runtime.JSX.Element;
+
+export { TableRowMenu };

package/dist/table/views/table-row-menu.js

@@ -0,0 +1,80 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/table/views/table-row-menu.tsx
+var table_row_menu_exports = {};
+__export(table_row_menu_exports, {
+  TableRowMenu: () => TableRowMenu
+});
+module.exports = __toCommonJS(table_row_menu_exports);
+var import_dropdown_menu = require("@kopexa/dropdown-menu");
+var import_tables = require("@tiptap/pm/tables");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function TableRowMenu({ editor, cellPos, style }) {
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const chainAtCell = (0, import_react.useCallback)(() => {
+    const chain = editor.chain().focus();
+    if (cellPos != null) {
+      return chain.setTextSelection(cellPos + 1);
+    }
+    return chain;
+  }, [editor, cellPos]);
+  const handleToggleHeader = (0, import_react.useCallback)(() => {
+    chainAtCell().command(({ state, dispatch }) => (0, import_tables.toggleHeaderRow)(state, dispatch)).run();
+    setOpen(false);
+  }, [chainAtCell]);
+  const handleAddAbove = (0, import_react.useCallback)(() => {
+    chainAtCell().addRowBefore().run();
+    setOpen(false);
+  }, [chainAtCell]);
+  const handleAddBelow = (0, import_react.useCallback)(() => {
+    chainAtCell().addRowAfter().run();
+    setOpen(false);
+  }, [chainAtCell]);
+  const handleDelete = (0, import_react.useCallback)(() => {
+    chainAtCell().deleteRow().run();
+    setOpen(false);
+  }, [chainAtCell]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_menu.DropdownMenu.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "rows-control-div",
+        "aria-label": "Row actions",
+        style
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_menu.DropdownMenu.Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_menu.DropdownMenu.Group, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Item, { onSelect: handleToggleHeader, children: "Toggle header row" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Item, { onSelect: handleAddAbove, children: "Insert row above" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Item, { onSelect: handleAddBelow, children: "Insert row below" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Item, { variant: "destructive", onSelect: handleDelete, children: "Delete row" })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TableRowMenu
+});