@kopexa/extension-table 17.0.44 → 17.0.46

package/dist/table/index.js

@@ -23,15 +23,88 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 // src/table/index.ts
 var table_exports = {};
 __export(table_exports, {
-  Table: () => Table
+  Table: () => Table,
+  TableNodeView: () => TableNodeView
 });
 module.exports = __toCommonJS(table_exports);
 
 // src/table/table.ts
 var import_extension_table = require("@tiptap/extension-table");
-var import_tables2 = require("@tiptap/pm/tables");
+var import_tables4 = require("@tiptap/pm/tables");
+var import_react5 = require("@tiptap/react");
+
+// src/table/lib/insert-line-above-table-action.ts
+var import_editor_utils = require("@kopexa/editor-utils");
+var insertLineAboveTableAction = ({
+  editor
+}) => {
+  if (!editor.isActive("table")) return false;
+  try {
+    const { selection } = editor.state;
+    const tableNode = (0, import_editor_utils.findParentNodeOfType)(selection, "table");
+    if (!tableNode) return false;
+    const tablePos = tableNode.pos;
+    const firstRow = tableNode.node.child(0);
+    const selectionPath = selection.$anchor.path;
+    const selectionInFirstRow = selectionPath.includes(firstRow);
+    if (!selectionInFirstRow) return false;
+    if (tablePos === 0) {
+      editor.chain().insertContentAt(tablePos, { type: "paragraph" }).run();
+      editor.chain().setTextSelection(tablePos + 1).run();
+    } else {
+      const prevNodePos = tablePos - 1;
+      if (prevNodePos <= 0) return false;
+      const prevNode = editor.state.doc.nodeAt(prevNodePos - 1);
+      if (prevNode && prevNode.type.name === "paragraph") {
+        const endOfParagraphPos = tablePos - prevNode.nodeSize;
+        editor.chain().setTextSelection(endOfParagraphPos).run();
+      } else {
+        return false;
+      }
+    }
+    return true;
+  } catch (e) {
+    console.error("failed to insert line above table", e);
+    return false;
+  }
+};
+
+// src/table/lib/insert-line-below-table-action.ts
+var import_editor_utils2 = require("@kopexa/editor-utils");
+var insertLineBelowTableAction = ({
+  editor
+}) => {
+  if (!editor.isActive("table")) return false;
+  try {
+    const { selection } = editor.state;
+    const tableNode = (0, import_editor_utils2.findParentNodeOfType)(selection, "table");
+    if (!tableNode) return false;
+    const tablePos = tableNode.pos;
+    const table = tableNode.node;
+    const rowCount = table.childCount;
+    const lastRow = table.child(rowCount - 1);
+    const selectionPath = selection.$anchor.path;
+    const selectionInLastRow = selectionPath.includes(lastRow);
+    if (!selectionInLastRow) return false;
+    const nextNodePos = tablePos + table.nodeSize;
+    const nextNode = editor.state.doc.nodeAt(nextNodePos);
+    if (nextNode && nextNode.type.name === "paragraph") {
+      const endOfParagraphPos = nextNodePos + nextNode.nodeSize - 1;
+      editor.chain().setTextSelection(endOfParagraphPos).run();
+    } else if (!nextNode) {
+      editor.chain().insertContentAt(nextNodePos, { type: "paragraph" }).run();
+      editor.chain().setTextSelection(nextNodePos + 1).run();
+    } else {
+      return false;
+    }
+    return true;
+  } catch (e) {
+    console.error("failed to insert line above table", e);
+    return false;
+  }
+};
 
-// src/table/table-controls.ts
+// src/table/lib/table-controls.ts
 var import_core = require("@tiptap/core");
 var import_state = require("@tiptap/pm/state");
 var import_view = require("@tiptap/pm/view");
@@ -52,7 +125,7 @@ function tableControls() {
         mousemove: (view, event) => {
           var _a;
           const pluginState = key.getState(view.state);
-          if (!event.target.closest(".table-wrapper") && pluginState.values.hoveredTable) {
+          if (!event.target.closest(".table-node-view") && pluginState.values.hoveredTable) {
             return view.dispatch(
               view.state.tr.setMeta(key, {
                 setHoveredTable: null,
@@ -132,603 +205,347 @@ var TableControlsState = class {
   }
 };
 
-// src/table/table-view.tsx
-var import_dom = require("@floating-ui/dom");
-var import_tables = require("@tiptap/pm/tables");
-var import_jsx_dom_cjs = require("jsx-dom-cjs");
-
-// src/table/icons.ts
-var icons = {
-  colorPicker: `<svg xmlns="http://www.w3.org/2000/svg" length="24" viewBox="0 0 24 24" style="transform: ;msFilter:;"><path fill="rgb(var(--color-text-300))" d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"></path></svg>`,
-  deleteColumn: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
-  deleteRow: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
-  insertLeftTableIcon: `<svg
-    xmlns="http://www.w3.org/2000/svg"
-    length={12}
-    viewBox="0 -960 960 960"
-      >
-    <path
-      d="M224.617-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm147.691-607.69q0-4.616-3.846-8.463-3.846-3.846-8.462-3.846H600q-4.616 0-8.462 3.846-3.847 3.847-3.847 8.463v535.382q0 4.616 3.847 8.463Q595.384-200 600-200h135.383q4.616 0 8.462-3.846 3.846-3.847 3.846-8.463v-535.382ZM587.691-200h160-160Z"
-      fill="rgb(var(--color-text-300))"
-    />
-  </svg>
-`,
-  insertRightTableIcon: `<svg
-    xmlns="http://www.w3.org/2000/svg"
-    length={12}
-    viewBox="0 -960 960 960"
-  >
-    <path
-      d="M600-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm-375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm-12.308-607.69v535.382q0 4.616 3.846 8.463 3.846 3.846 8.462 3.846H360q4.616 0 8.462-3.846 3.847-3.847 3.847-8.463v-535.382q0-4.616-3.847-8.463Q364.616-760 360-760H224.617q-4.616 0-8.462 3.846-3.846 3.847-3.846 8.463Zm160 547.691h-160 160Z"
-      fill="rgb(var(--color-text-300))"
-    />
-  </svg>
-`,
-  insertTopTableIcon: `<svg
-    xmlns="http://www.w3.org/2000/svg"
-    length={24}
-    viewBox="0 -960 960 960"
-  >
-    <path
-      d="M212.309-527.693q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0 375.383q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-59.999h535.382q4.616 0 8.463-3.846 3.846-3.846 3.846-8.462V-360q0-4.616-3.846-8.462-3.847-3.847-8.463-3.847H212.309q-4.616 0-8.463 3.847Q200-364.616 200-360v135.383q0 4.616 3.846 8.462 3.847 3.846 8.463 3.846Zm-12.309-160v160-160Z"
-      fill="rgb(var(--color-text-300))"
-    />
-  </svg>
-`,
-  toggleColumnHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
-  toggleRowHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
-  insertBottomTableIcon: `<svg
-    xmlns="http://www.w3.org/2000/svg"
-    length={24}
-    viewBox="0 -960 960 960"
-  >
-    <path
-      d="M212.309-152.31q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-375.383q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm535.382-219.998H212.309q-4.616 0-8.463 3.846-3.846 3.846-3.846 8.462V-600q0 4.616 3.846 8.462 3.847 3.847 8.463 3.847h535.382q4.616 0 8.463-3.847Q760-595.384 760-600v-135.383q0-4.616-3.846-8.462-3.847-3.846-8.463-3.846ZM200-587.691v-160 160Z"
-      fill="rgb(var(--color-text-300))"
-    />
-  </svg>
-`
-};
+// src/table/views/table-node-view.tsx
+var import_tables3 = require("@tiptap/pm/tables");
+var import_react3 = require("@tiptap/react");
+var import_react4 = require("react");
 
-// src/table/table-view.tsx
-var Popover = class {
-  constructor(content, opts) {
-    __publicField(this, "reference");
-    __publicField(this, "floating");
-    __publicField(this, "cleanupAutoUpdate", null);
-    __publicField(this, "onDocClick", (e) => {
-      if (!this.floating.contains(e.target) && !this.reference.contains(e.target)) {
-        this.hide();
+// 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
       }
-    });
-    __publicField(this, "onEsc", (e) => {
-      if (e.key === "Escape") this.hide();
-    });
-    __publicField(this, "_placement");
-    __publicField(this, "_offsetPx");
-    // biome-ignore lint/correctness/noUnusedPrivateClassMembers: backwards. will be used later
-    __publicField(this, "_interactive");
-    var _a, _b, _c, _d;
-    this.reference = opts.reference;
-    this.floating = document.createElement("div");
-    this.floating.setAttribute("role", "dialog");
-    this.floating.setAttribute("aria-modal", "false");
-    this.floating.style.position = "fixed";
-    this.floating.style.zIndex = "9999";
-    this.floating.style.display = "none";
-    this.floating.className = "rounded-md border bg-background px-2 py-2.5 text-xs shadow-sm min-w-[12rem] whitespace-nowrap";
-    this.floating.appendChild(content);
-    const host = (_a = opts.container) != null ? _a : document.body;
-    host.appendChild(this.floating);
-    this._placement = (_b = opts.placement) != null ? _b : "right";
-    this._offsetPx = (_c = opts.offsetPx) != null ? _c : 6;
-    this._interactive = (_d = opts.interactive) != null ? _d : true;
-  }
-  async _updatePosition() {
-    const { x, y } = await (0, import_dom.computePosition)(this.reference, this.floating, {
-      placement: this._placement,
-      middleware: [(0, import_dom.offset)(this._offsetPx), (0, import_dom.flip)(), (0, import_dom.shift)({ padding: 8 })]
-    });
-    Object.assign(this.floating.style, { left: `${x}px`, top: `${y}px` });
-  }
-  show() {
-    if (this.floating.style.display !== "none") return;
-    this.floating.style.display = "block";
-    this.cleanupAutoUpdate = (0, import_dom.autoUpdate)(
-      this.reference,
-      this.floating,
-      () => this._updatePosition()
-    );
-    document.addEventListener("keydown", this.onEsc, { passive: true });
-    document.addEventListener("mousedown", this.onDocClick, { capture: true });
-    requestAnimationFrame(() => this._updatePosition());
-  }
-  hide() {
-    var _a;
-    if (this.floating.style.display === "none") return;
-    this.floating.style.display = "none";
-    (_a = this.cleanupAutoUpdate) == null ? void 0 : _a.call(this);
-    this.cleanupAutoUpdate = null;
-    document.removeEventListener("keydown", this.onEsc);
-    document.removeEventListener("mousedown", this.onDocClick, {
-      capture: true
-    });
-  }
-  toggle() {
-    if (this.floating.style.display === "none") this.show();
-    else this.hide();
-  }
-  destroy() {
-    this.hide();
-    this.floating.remove();
-  }
-  get el() {
-    return this.floating;
-  }
-};
-function setCellsBackgroundColor(editor, color) {
-  return editor.chain().focus().updateAttributes("tableCell", {
-    background: color.backgroundColor,
-    textColor: color.textColor
-  }).run();
+    ) }),
+    /* @__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" })
+    ] })
+  ] });
 }
-function setTableRowBackgroundColor(editor, color) {
-  const { state, dispatch } = editor.view;
-  const { selection } = state;
-  if (!(selection instanceof import_tables.CellSelection)) return false;
-  const hoveredCell = selection.$headCell || selection.$anchorCell;
-  let rowDepth = hoveredCell.depth;
-  while (rowDepth > 0 && hoveredCell.node(rowDepth).type.name !== "tableRow") {
-    rowDepth--;
-  }
-  if (hoveredCell.node(rowDepth).type.name !== "tableRow") return false;
-  const rowStartPos = hoveredCell.start(rowDepth);
-  const tr = state.tr.setNodeMarkup(rowStartPos - 1, null, {
-    ...hoveredCell.node(rowDepth).attrs,
-    background: color.backgroundColor,
-    textColor: color.textColor
-  });
-  dispatch(tr);
-  return true;
+
+// 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" })
+    ] })
+  ] });
 }
-var columnsToolboxItems = [
-  {
-    label: "Toggle column header",
-    icon: icons.toggleColumnHeader,
-    action: ({ editor }) => editor.chain().focus().toggleHeaderColumn().run()
-  },
-  {
-    label: "Add column before",
-    icon: icons.insertLeftTableIcon,
-    action: ({ editor }) => editor.chain().focus().addColumnBefore().run()
-  },
-  {
-    label: "Add column after",
-    icon: icons.insertRightTableIcon,
-    action: ({ editor }) => editor.chain().focus().addColumnAfter().run()
-  },
-  { label: "Pick color", icon: "", action: () => {
-  } },
-  {
-    label: "Delete column",
-    icon: icons.deleteColumn,
-    action: ({ editor }) => editor.chain().focus().deleteColumn().run()
-  }
-];
-var rowsToolboxItems = [
-  {
-    label: "Toggle row header",
-    icon: icons.toggleRowHeader,
-    action: ({ editor }) => editor.chain().focus().toggleHeaderRow().run()
-  },
-  {
-    label: "Add row above",
-    icon: icons.insertTopTableIcon,
-    action: ({ editor }) => editor.chain().focus().addRowBefore().run()
-  },
-  {
-    label: "Add row below",
-    icon: icons.insertBottomTableIcon,
-    action: ({ editor }) => editor.chain().focus().addRowAfter().run()
-  },
-  { label: "Pick color", icon: "", action: () => {
-  } },
-  {
-    label: "Delete row",
-    icon: icons.deleteRow,
-    action: ({ editor }) => editor.chain().focus().deleteRow().run()
+
+// 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;
   }
-];
-function buildToolboxContent({
-  items,
-  onClickItem,
-  onSelectColor,
-  colors
-}) {
-  return (0, import_jsx_dom_cjs.h)(
-    "div",
-    { className: "space-y-2" },
-    items.map((item) => {
-      if (item.label === "Pick color") {
-        return (0, import_jsx_dom_cjs.h)("div", { className: "flex flex-col" }, [
-          (0, import_jsx_dom_cjs.h)("hr", { className: "!my-2 border" }),
-          (0, import_jsx_dom_cjs.h)("div", { className: "text-foreground text-sm" }, item.label),
-          (0, import_jsx_dom_cjs.h)(
-            "div",
-            { className: "grid grid-cols-6 gap-x-1 gap-y-2.5 mt-2" },
-            Object.entries(colors).map(
-              ([_, colorValue]) => {
-                var _a;
-                return (0, import_jsx_dom_cjs.h)("button", {
-                  // @ts-expect-error JSX
-                  type: "button",
-                  className: "grid place-items-center size-6 rounded outline-none ring-offset-2 focus-visible:ring",
-                  style: `background-color:${colorValue.backgroundColor};color:${colorValue.textColor || "inherit"};`,
-                  innerHTML: (_a = colorValue.icon) != null ? _a : `<span class="text-md" style="color:${colorValue.textColor || "inherit"}">A</span>`,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    onSelectColor(colorValue);
-                  }
-                });
-              }
-            )
-          ),
-          (0, import_jsx_dom_cjs.h)("hr", { className: "!my-2 border" })
-        ]);
-      }
-      return (0, import_jsx_dom_cjs.h)(
-        "button",
-        {
-          // @ts-expect-error JSX
-          type: "button",
-          className: "w-full flex items-center gap-2 px-1 py-1.5 bg-background hover:bg-muted text-sm text-foreground rounded",
-          onClick: (e) => {
-            e.stopPropagation();
-            onClickItem(item);
-          }
-        },
-        [
-          (0, import_jsx_dom_cjs.h)("span", { className: "h-3 w-3 shrink-0", innerHTML: item.icon }),
-          (0, import_jsx_dom_cjs.h)("div", { className: "label" }, item.label)
-        ]
-      );
-    })
-  );
+  return info;
 }
-function createToolbox({
-  triggerButton,
-  items,
-  onSelectColor,
-  onClickItem,
-  colors,
-  appendTo
+function TableNodeView({
+  editor,
+  node,
+  decorations,
+  getPos
 }) {
-  if (!triggerButton) {
-    return null;
-  }
-  const content = buildToolboxContent({
-    items,
-    onClickItem,
-    onSelectColor,
-    colors
-  });
-  const pop = new Popover(content, {
-    reference: triggerButton,
-    container: appendTo != null ? appendTo : void 0,
-    placement: "right",
-    offsetPx: 6,
-    interactive: true
+  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 onTrigger = (e) => {
-    e.stopPropagation();
-    pop.toggle();
-  };
-  triggerButton.addEventListener("click", onTrigger);
-  return {
-    show: () => pop.show(),
-    hide: () => pop.hide(),
-    destroy: () => {
-      pop.destroy();
-      triggerButton.removeEventListener("click", onTrigger);
+  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);
     }
-  };
-}
-var TableView = class {
-  constructor(node, cellMinWidth, decorations, editor, getPos) {
-    __publicField(this, "node");
-    __publicField(this, "cellMinWidth");
-    __publicField(this, "decorations");
-    __publicField(this, "editor");
-    __publicField(this, "getPos");
-    __publicField(this, "hoveredCell", null);
-    __publicField(this, "map");
-    __publicField(this, "root");
-    __publicField(this, "table");
-    __publicField(this, "colgroup");
-    __publicField(this, "tbody");
-    __publicField(this, "rowsControl");
-    __publicField(this, "columnsControl");
-    __publicField(this, "columnsToolbox");
-    __publicField(this, "rowsToolbox");
-    __publicField(this, "controls");
-    var _a, _b, _c, _d;
-    this.node = node;
-    this.cellMinWidth = cellMinWidth;
-    this.decorations = decorations.slice();
-    this.editor = editor;
-    this.getPos = getPos;
-    this.hoveredCell = null;
-    this.map = import_tables.TableMap.get(node);
-    if (editor.isEditable) {
-      this.rowsControl = (0, import_jsx_dom_cjs.h)(
-        "div",
-        { className: "rows-control" },
-        (0, import_jsx_dom_cjs.h)("button", {
-          // @ts-expect-error JSX
-          type: "button",
-          className: "rows-control-div",
-          onClick: () => this.selectRow(),
-          "aria-label": "Row actions"
-        })
-      );
-      this.columnsControl = (0, import_jsx_dom_cjs.h)(
-        "div",
-        { className: "columns-control" },
-        (0, import_jsx_dom_cjs.h)("button", {
-          // @ts-expect-error JSX
-          type: "button",
-          className: "columns-control-div",
-          onClick: () => this.selectColumn(),
-          "aria-label": "Column actions"
-        })
-      );
-      this.controls = (0, import_jsx_dom_cjs.h)(
-        "div",
-        { className: "table-controls", contentEditable: "false" },
-        this.rowsControl,
-        this.columnsControl
-      );
-      const palette = {
-        Blue: { backgroundColor: "#D9E4FF", textColor: "#171717" },
-        Orange: { backgroundColor: "#FFEDD5", textColor: "#171717" },
-        Grey: { backgroundColor: "#F1F1F1", textColor: "#171717" },
-        Yellow: { backgroundColor: "#FEF3C7", textColor: "#171717" },
-        Green: { backgroundColor: "#DCFCE7", textColor: "#171717" },
-        Red: { backgroundColor: "#FFDDDD", textColor: "#171717" },
-        Pink: { backgroundColor: "#FFE8FA", textColor: "#171717" },
-        Purple: { backgroundColor: "#E8DAFB", textColor: "#171717" },
-        None: {
-          backgroundColor: "transparent",
-          textColor: "inherit",
-          icon: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="gray" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ban"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>`
-        }
-      };
-      this.columnsToolbox = createToolbox({
-        triggerButton: (_a = this.columnsControl) == null ? void 0 : _a.querySelector(
-          ".columns-control-div"
-        ),
-        items: columnsToolboxItems,
-        colors: palette,
-        appendTo: (_b = this.controls) != null ? _b : null,
-        onSelectColor: (color) => setCellsBackgroundColor(this.editor, color),
-        onClickItem: (item) => {
-          var _a2, _b2;
-          item.action({
-            editor: this.editor,
-            triggerButton: (_a2 = this.columnsControl) == null ? void 0 : _a2.firstElementChild,
-            controlsContainer: this.controls
-          });
-          (_b2 = this.columnsToolbox) == null ? void 0 : _b2.hide();
-        }
-      });
-      this.rowsToolbox = createToolbox({
-        triggerButton: (_c = this.rowsControl) == null ? void 0 : _c.querySelector(
-          ".rows-control-div"
-        ),
-        items: rowsToolboxItems,
-        colors: palette,
-        appendTo: (_d = this.controls) != null ? _d : null,
-        onSelectColor: (color) => setTableRowBackgroundColor(editor, color),
-        onClickItem: (item) => {
-          var _a2, _b2;
-          item.action({
-            editor: this.editor,
-            triggerButton: (_a2 = this.rowsControl) == null ? void 0 : _a2.firstElementChild,
-            controlsContainer: this.controls
-          });
-          (_b2 = this.rowsToolbox) == null ? void 0 : _b2.hide();
-        }
-      });
+    const width = map.width;
+    while (colgroup.children.length < width) {
+      colgroup.appendChild(document.createElement("col"));
     }
-    this.colgroup = (0, import_jsx_dom_cjs.h)(
-      "colgroup",
-      null,
-      Array.from({ length: this.map.width }, () => 1).map(() => (0, import_jsx_dom_cjs.h)("col"))
-    );
-    this.tbody = (0, import_jsx_dom_cjs.h)("tbody");
-    this.table = (0, import_jsx_dom_cjs.h)(
-      "table",
-      null,
-      this.colgroup,
-      this.tbody
-    );
-    this.root = (0, import_jsx_dom_cjs.h)(
-      "div",
-      {
-        className: "table-wrapper horizontal-scrollbar scrollbar-md controls--disabled"
-      },
-      this.controls,
-      this.table
-    );
-    this.render();
-  }
-  get dom() {
-    return this.root;
-  }
-  get contentDOM() {
-    return this.tbody;
-  }
-  update(node, decorations) {
-    if (node.type !== this.node.type) return false;
-    this.node = node;
-    this.decorations = [...decorations];
-    this.map = import_tables.TableMap.get(this.node);
-    if (this.editor.isEditable) this.updateControls();
-    this.render();
-    return true;
-  }
-  render() {
-    if (this.colgroup.children.length !== this.map.width) {
-      const cols = Array.from({ length: this.map.width }, () => 1).map(
-        () => (0, import_jsx_dom_cjs.h)("col")
-      );
-      this.colgroup.replaceChildren(...cols);
+    while (colgroup.children.length > width) {
+      if (colgroup.lastChild) colgroup.removeChild(colgroup.lastChild);
     }
-    (0, import_tables.updateColumnsOnResize)(
-      this.node,
-      this.colgroup,
-      this.table,
-      this.cellMinWidth
-    );
-  }
-  ignoreMutation() {
-    return true;
-  }
-  updateControls() {
-    var _a;
-    const { hoveredTable: table, hoveredCell: cell } = Object.values(
-      this.decorations
-    ).reduce(
-      (acc, curr) => {
-        if (curr.spec.hoveredCell !== void 0)
-          acc.hoveredCell = curr.spec.hoveredCell;
-        if (curr.spec.hoveredTable !== void 0)
-          acc.hoveredTable = curr.spec.hoveredTable;
-        return acc;
-      },
-      {}
-    );
-    if (table === void 0 || cell === void 0) {
-      this.root.classList.add("controls--disabled");
+    (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;
     }
-    this.root.classList.remove("controls--disabled");
-    this.hoveredCell = cell;
-    const cellDom = this.editor.view.nodeDOM(cell.pos);
-    if (!this.table || !cellDom) return;
-    const tableRect = this.table.getBoundingClientRect();
+    const wrapperRect = wrapperRef.current.getBoundingClientRect();
     const cellRect = cellDom.getBoundingClientRect();
-    if (this.columnsControl) {
-      this.columnsControl.style.left = `${cellRect.left - tableRect.left - (((_a = this.table.parentElement) == null ? void 0 : _a.scrollLeft) || 0)}px`;
-      this.columnsControl.style.width = `${cellRect.width}px`;
+    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 (this.rowsControl) {
-      this.rowsControl.style.top = `${cellRect.top - tableRect.top}px`;
-      this.rowsControl.style.height = `${cellRect.height}px`;
+    if (wrapperRef.current && relatedTarget instanceof Node && wrapperRef.current.contains(relatedTarget)) {
+      return;
     }
-  }
-  selectColumn() {
-    if (!this.hoveredCell) return;
-    const colIndex = this.map.colCount(
-      this.hoveredCell.pos - (this.getPos() + 1)
-    );
-    const anchorCellPos = this.hoveredCell.pos;
-    const headCellPos = this.map.map[colIndex + this.map.width * (this.map.height - 1)] + (this.getPos() + 1);
-    const cellSelection = import_tables.CellSelection.create(
-      this.editor.view.state.doc,
-      anchorCellPos,
-      headCellPos
-    );
-    this.editor.view.dispatch(this.editor.state.tr.setSelection(cellSelection));
-  }
-  selectRow() {
-    if (!this.hoveredCell) return;
-    const anchorCellPos = this.hoveredCell.pos;
-    const anchorCellIndex = this.map.map.indexOf(
-      anchorCellPos - (this.getPos() + 1)
-    );
-    const headCellPos = this.map.map[anchorCellIndex + (this.map.width - 1)] + (this.getPos() + 1);
-    const cellSelection = import_tables.CellSelection.create(
-      this.editor.state.doc,
-      anchorCellPos,
-      headCellPos
-    );
-    this.editor.view.dispatch(
-      this.editor.view.state.tr.setSelection(cellSelection)
-    );
-  }
-};
-
-// src/table/utilities/insert-line-above-table-action.ts
-var import_editor_utils = require("@kopexa/editor-utils");
-var insertLineAboveTableAction = ({
-  editor
-}) => {
-  if (!editor.isActive("table")) return false;
-  try {
-    const { selection } = editor.state;
-    const tableNode = (0, import_editor_utils.findParentNodeOfType)(selection, "table");
-    if (!tableNode) return false;
-    const tablePos = tableNode.pos;
-    const firstRow = tableNode.node.child(0);
-    const selectionPath = selection.$anchor.path;
-    const selectionInFirstRow = selectionPath.includes(firstRow);
-    if (!selectionInFirstRow) return false;
-    if (tablePos === 0) {
-      editor.chain().insertContentAt(tablePos, { type: "paragraph" }).run();
-      editor.chain().setTextSelection(tablePos + 1).run();
-    } else {
-      const prevNodePos = tablePos - 1;
-      if (prevNodePos <= 0) return false;
-      const prevNode = editor.state.doc.nodeAt(prevNodePos - 1);
-      if (prevNode && prevNode.type.name === "paragraph") {
-        const endOfParagraphPos = tablePos - prevNode.nodeSize;
-        editor.chain().setTextSelection(endOfParagraphPos).run();
-      } else {
-        return false;
+    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 true;
-  } catch (e) {
-    console.error("failed to insert line above table", e);
     return false;
-  }
-};
-
-// src/table/utilities/insert-line-below-table-action.ts
-var import_editor_utils2 = require("@kopexa/editor-utils");
-var insertLineBelowTableAction = ({
-  editor
-}) => {
-  if (!editor.isActive("table")) return false;
-  try {
-    const { selection } = editor.state;
-    const tableNode = (0, import_editor_utils2.findParentNodeOfType)(selection, "table");
-    if (!tableNode) return false;
-    const tablePos = tableNode.pos;
-    const table = tableNode.node;
-    const rowCount = table.childCount;
-    const lastRow = table.child(rowCount - 1);
-    const selectionPath = selection.$anchor.path;
-    const selectionInLastRow = selectionPath.includes(lastRow);
-    if (!selectionInLastRow) return false;
-    const nextNodePos = tablePos + table.nodeSize;
-    const nextNode = editor.state.doc.nodeAt(nextNodePos);
-    if (nextNode && nextNode.type.name === "paragraph") {
-      const endOfParagraphPos = nextNodePos + nextNode.nodeSize - 1;
-      editor.chain().setTextSelection(endOfParagraphPos).run();
-    } else if (!nextNode) {
-      editor.chain().insertContentAt(nextNodePos, { type: "paragraph" }).run();
-      editor.chain().setTextSelection(nextNodePos + 1).run();
+  }, [editor, getPos]);
+  const handleAddColumn = (0, import_react4.useCallback)(() => {
+    if (focusTable()) {
+      editor.chain().addColumnAfter().run();
     } else {
-      return false;
+      editor.chain().focus().addColumnAfter().run();
     }
-    return true;
-  } catch (e) {
-    console.error("failed to insert line above table", e);
-    return false;
-  }
-};
+  }, [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: "+"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 
 // src/table/table.ts
 var Table = import_extension_table.Table.extend({
@@ -770,32 +587,30 @@ var Table = import_extension_table.Table.extend({
     };
   },
   addNodeView() {
-    return ({ editor, getPos, node, decorations }) => {
-      const { cellMinWidth } = this.options;
-      return new TableView(
-        node,
-        cellMinWidth,
-        // biome-ignore lint/suspicious/noExplicitAny: prosemirror
-        decorations,
-        editor,
-        getPos
-      );
-    };
+    return (0, import_react5.ReactNodeViewRenderer)(TableNodeView, {
+      contentDOMElementTag: "tbody",
+      stopEvent: ({ event }) => {
+        const target = event.target;
+        if (target.closest("button, [role='button'], input, a")) {
+          return true;
+        }
+        return false;
+      }
+    });
   },
   addProseMirrorPlugins() {
     const isResizable = this.options.resizable && this.editor.isEditable;
     const plugins = [
-      (0, import_tables2.tableEditing)({
+      (0, import_tables4.tableEditing)({
         allowTableNodeSelection: this.options.allowTableNodeSelection
       }),
       tableControls()
     ];
     if (isResizable) {
       plugins.unshift(
-        (0, import_tables2.columnResizing)({
+        (0, import_tables4.columnResizing)({
           handleWidth: this.options.handleWidth,
           cellMinWidth: this.options.cellMinWidth,
-          // View: TableView,
           lastColumnResizable: this.options.lastColumnResizable
         })
       );
@@ -805,5 +620,6 @@ var Table = import_extension_table.Table.extend({
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Table
+  Table,
+  TableNodeView
 });