@kopexa/extension-table 17.0.45 → 17.0.46

package/dist/{chunk-SNJF4UW6.mjs → chunk-2L3HZWWG.mjs}

@@ -1,16 +1,16 @@
 "use client";
 import {
   TableCell
-} from "./chunk-ARSGMUXM.mjs";
+} from "./chunk-DR2GZJH6.mjs";
 import {
   TableHeader
-} from "./chunk-74O2ORPO.mjs";
+} from "./chunk-POJFNXG7.mjs";
 import {
   TableRow
-} from "./chunk-6NY5XWR7.mjs";
+} from "./chunk-HWVA6DOK.mjs";
 import {
   Table
-} from "./chunk-OPDSKEZR.mjs";
+} from "./chunk-LPHCE6EI.mjs";
 
 // src/kit.ts
 import { Extension } from "@tiptap/react";

package/dist/{chunk-BAQU2YT5.mjs → chunk-3XEOCAHB.mjs}

@@ -1,6 +1,6 @@
 "use client";
 
-// src/table/utilities/insert-line-above-table-action.ts
+// src/table/lib/insert-line-above-table-action.ts
 import { findParentNodeOfType } from "@kopexa/editor-utils";
 var insertLineAboveTableAction = ({
   editor

package/dist/{chunk-FKOIW52J.mjs → chunk-5W5ARI64.mjs}

@@ -1,6 +1,6 @@
 "use client";
 
-// src/table/utilities/is-cell-selection.ts
+// src/table/lib/is-cell-selection.ts
 import { CellSelection } from "@tiptap/pm/tables";
 function isCellSelection(value) {
   return value instanceof CellSelection;

package/dist/{chunk-IMRHHVEF.mjs → chunk-BTJ3DCGC.mjs}

@@ -3,7 +3,7 @@ import {
   __publicField
 } from "./chunk-WKV76XOR.mjs";
 
-// src/table/table-controls.ts
+// src/table/lib/table-controls.ts
 import { findParentNode } from "@tiptap/core";
 import {
   Plugin,
@@ -28,7 +28,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,

package/dist/chunk-DR2GZJH6.mjs

@@ -0,0 +1,70 @@
+"use client";
+
+// src/table-cell.ts
+import { mergeAttributes, Node } from "@tiptap/core";
+var TableCell = Node.create({
+  name: "tableCell",
+  content: "block+",
+  tableRole: "cell",
+  isolating: true,
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
+  },
+  parseHTML() {
+    return [{ tag: "td" }];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    const attrs = {};
+    if (node.attrs.align) {
+      attrs["data-align"] = node.attrs.align;
+      attrs.style = `text-align: ${node.attrs.align}`;
+    }
+    if (node.attrs.backgroundColor) {
+      attrs["data-background-color"] = node.attrs.backgroundColor;
+    }
+    return [
+      "td",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, attrs),
+      0
+    ];
+  },
+  addAttributes() {
+    return {
+      colspan: {
+        default: 1,
+        parseHTML: (element) => {
+          const colspan = element.getAttribute("colspan");
+          return colspan ? Number.parseInt(colspan, 10) : 1;
+        }
+      },
+      rowspan: {
+        default: 1,
+        parseHTML: (element) => {
+          const rowspan = element.getAttribute("rowspan");
+          return rowspan ? Number.parseInt(rowspan, 10) : 1;
+        }
+      },
+      colwidth: {
+        default: null,
+        parseHTML: (element) => {
+          const colwidth = element.getAttribute("colwidth");
+          return colwidth ? colwidth.split(",").map((w) => Number.parseInt(w, 10)) : null;
+        }
+      },
+      align: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-align")
+      },
+      backgroundColor: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-background-color")
+      }
+    };
+  }
+});
+
+export {
+  TableCell
+};

package/dist/chunk-GHOJLOCF.mjs

@@ -0,0 +1,247 @@
+"use client";
+import {
+  TableRowMenu
+} from "./chunk-KNOMCS6F.mjs";
+import {
+  TableColumnMenu
+} from "./chunk-QHD3QTD2.mjs";
+
+// src/table/views/table-node-view.tsx
+import { TableMap, updateColumnsOnResize } from "@tiptap/pm/tables";
+import {
+  NodeViewContent,
+  NodeViewWrapper,
+  useEditorState
+} from "@tiptap/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "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 = useRef(null);
+  const scrollRef = useRef(null);
+  const isEditable = useEditorState({
+    editor,
+    selector: ({ editor: e }) => {
+      var _a;
+      return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
+    }
+  });
+  const cellMinWidth = 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 = useMemo(() => TableMap.get(node), [node]);
+  const [isSideHovered, setIsSideHovered] = useState(false);
+  const [isBottomHovered, setIsBottomHovered] = useState(false);
+  const { hoveredTable, hoveredCell } = useMemo(
+    () => extractHoverInfo(decorations),
+    [decorations]
+  );
+  const controlsDisabled = !hoveredTable || !hoveredCell;
+  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);
+    }
+    updateColumnsOnResize(node, colgroup, table, cellMinWidth);
+  }, [node, map.width, cellMinWidth]);
+  const [controlPos, setControlPos] = useState(null);
+  const updatePositions = 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]);
+  useEffect(() => {
+    updatePositions();
+    const scrollEl = scrollRef.current;
+    if (!scrollEl) return;
+    scrollEl.addEventListener("scroll", updatePositions, { passive: true });
+    return () => scrollEl.removeEventListener("scroll", updatePositions);
+  }, [updatePositions]);
+  const handleMouseMove = 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 = 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 = 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 = useCallback(() => {
+    if (focusTable()) {
+      editor.chain().addColumnAfter().run();
+    } else {
+      editor.chain().focus().addColumnAfter().run();
+    }
+  }, [editor, focusTable]);
+  const handleAddRow = useCallback(() => {
+    if (focusTable()) {
+      editor.chain().addRowAfter().run();
+    } else {
+      editor.chain().focus().addRowAfter().run();
+    }
+  }, [editor, focusTable]);
+  return /* @__PURE__ */ jsxs(
+    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__ */ jsxs("div", { className: "table-controls", contentEditable: false, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "rows-control",
+              style: controlPos ? {
+                top: `${controlPos.rowTop}px`,
+                height: `${controlPos.rowHeight}px`
+              } : void 0,
+              children: /* @__PURE__ */ jsx(TableRowMenu, { editor, cellPos: hoveredCell == null ? void 0 : hoveredCell.pos })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "columns-control",
+              style: controlPos ? {
+                left: `${controlPos.columnLeft}px`,
+                width: `${controlPos.columnWidth}px`
+              } : void 0,
+              children: /* @__PURE__ */ jsx(TableColumnMenu, { editor, cellPos: hoveredCell == null ? void 0 : hoveredCell.pos })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: scrollRef,
+            className: "table-wrapper horizontal-scrollbar scrollbar-md",
+            children: /* @__PURE__ */ jsx(NodeViewContent, { as: "table" })
+          }
+        ),
+        isEditable && isSideHovered && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute -right-6 top-0 h-full flex items-center",
+            contentEditable: false,
+            children: /* @__PURE__ */ 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__ */ jsx(
+          "div",
+          {
+            className: "absolute -bottom-6 left-0 w-full flex justify-center",
+            contentEditable: false,
+            children: /* @__PURE__ */ 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: "+"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  TableNodeView
+};

package/dist/chunk-HWVA6DOK.mjs

@@ -0,0 +1,20 @@
+"use client";
+
+// src/table-row.ts
+import { TableRow as TiptapTableRow } from "@tiptap/extension-table";
+var TableRow = TiptapTableRow.extend({
+  content: "(tableCell | tableHeader)*",
+  addOptions() {
+    var _a;
+    return {
+      ...(_a = this.parent) == null ? void 0 : _a.call(this),
+      HTMLAttributes: {
+        class: "min-w-full"
+      }
+    };
+  }
+});
+
+export {
+  TableRow
+};

package/dist/{chunk-DF6ZMJLL.mjs → chunk-KLUH6EZS.mjs}

@@ -1,6 +1,6 @@
 "use client";
 
-// src/table/utilities/insert-line-below-table-action.ts
+// src/table/lib/insert-line-below-table-action.ts
 import { findParentNodeOfType } from "@kopexa/editor-utils";
 var insertLineBelowTableAction = ({
   editor

package/dist/chunk-KNOMCS6F.mjs

@@ -0,0 +1,57 @@
+"use client";
+
+// src/table/views/table-row-menu.tsx
+import { DropdownMenu } from "@kopexa/dropdown-menu";
+import { toggleHeaderRow as pmToggleHeaderRow } from "@tiptap/pm/tables";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TableRowMenu({ editor, cellPos, style }) {
+  const [open, setOpen] = useState(false);
+  const chainAtCell = useCallback(() => {
+    const chain = editor.chain().focus();
+    if (cellPos != null) {
+      return chain.setTextSelection(cellPos + 1);
+    }
+    return chain;
+  }, [editor, cellPos]);
+  const handleToggleHeader = useCallback(() => {
+    chainAtCell().command(({ state, dispatch }) => pmToggleHeaderRow(state, dispatch)).run();
+    setOpen(false);
+  }, [chainAtCell]);
+  const handleAddAbove = useCallback(() => {
+    chainAtCell().addRowBefore().run();
+    setOpen(false);
+  }, [chainAtCell]);
+  const handleAddBelow = useCallback(() => {
+    chainAtCell().addRowAfter().run();
+    setOpen(false);
+  }, [chainAtCell]);
+  const handleDelete = useCallback(() => {
+    chainAtCell().deleteRow().run();
+    setOpen(false);
+  }, [chainAtCell]);
+  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "rows-control-div",
+        "aria-label": "Row actions",
+        style
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
+      /* @__PURE__ */ jsxs(DropdownMenu.Group, { children: [
+        /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect: handleToggleHeader, children: "Toggle header row" }),
+        /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect: handleAddAbove, children: "Insert row above" }),
+        /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect: handleAddBelow, children: "Insert row below" })
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+      /* @__PURE__ */ jsx(DropdownMenu.Item, { variant: "destructive", onSelect: handleDelete, children: "Delete row" })
+    ] })
+  ] });
+}
+
+export {
+  TableRowMenu
+};

package/dist/{chunk-OPDSKEZR.mjs → chunk-LPHCE6EI.mjs}

@@ -1,20 +1,21 @@
 "use client";
 import {
-  TableView
-} from "./chunk-GMNNSVR3.mjs";
+  TableNodeView
+} from "./chunk-GHOJLOCF.mjs";
 import {
   insertLineAboveTableAction
-} from "./chunk-BAQU2YT5.mjs";
+} from "./chunk-3XEOCAHB.mjs";
 import {
   insertLineBelowTableAction
-} from "./chunk-DF6ZMJLL.mjs";
+} from "./chunk-KLUH6EZS.mjs";
 import {
   tableControls
-} from "./chunk-IMRHHVEF.mjs";
+} from "./chunk-BTJ3DCGC.mjs";
 
 // src/table/table.ts
 import { Table as TiptapTable } from "@tiptap/extension-table";
 import { columnResizing, tableEditing } from "@tiptap/pm/tables";
+import { ReactNodeViewRenderer } from "@tiptap/react";
 var Table = TiptapTable.extend({
   addOptions() {
     var _a;
@@ -54,17 +55,16 @@ var Table = TiptapTable.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 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;
@@ -79,7 +79,6 @@ var Table = TiptapTable.extend({
         columnResizing({
           handleWidth: this.options.handleWidth,
           cellMinWidth: this.options.cellMinWidth,
-          // View: TableView,
           lastColumnResizable: this.options.lastColumnResizable
         })
       );

package/dist/chunk-POJFNXG7.mjs

@@ -0,0 +1,44 @@
+"use client";
+
+// src/table-header.ts
+import { mergeAttributes } from "@tiptap/core";
+import { TableHeader as TiptapTableHeader } from "@tiptap/extension-table";
+var TableHeader = TiptapTableHeader.extend({
+  renderHTML({ node, HTMLAttributes }) {
+    const attrs = {};
+    if (node.attrs.align) {
+      attrs["data-align"] = node.attrs.align;
+      attrs.style = `text-align: ${node.attrs.align}`;
+    }
+    return [
+      "th",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, attrs),
+      0
+    ];
+  },
+  addAttributes() {
+    return {
+      colspan: {
+        default: 1
+      },
+      rowspan: {
+        default: 1
+      },
+      colwidth: {
+        default: null,
+        parseHTML: (element) => {
+          const colwidth = element.getAttribute("colwidth");
+          return colwidth ? colwidth.split(",").map((w) => Number.parseInt(w, 10)) : null;
+        }
+      },
+      align: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-align")
+      }
+    };
+  }
+});
+
+export {
+  TableHeader
+};

package/dist/chunk-QHD3QTD2.mjs

@@ -0,0 +1,61 @@
+"use client";
+
+// src/table/views/table-column-menu.tsx
+import { DropdownMenu } from "@kopexa/dropdown-menu";
+import { toggleHeaderColumn as pmToggleHeaderColumn } from "@tiptap/pm/tables";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TableColumnMenu({
+  editor,
+  cellPos,
+  style
+}) {
+  const [open, setOpen] = useState(false);
+  const chainAtCell = useCallback(() => {
+    const chain = editor.chain().focus();
+    if (cellPos != null) {
+      return chain.setTextSelection(cellPos + 1);
+    }
+    return chain;
+  }, [editor, cellPos]);
+  const handleToggleHeader = useCallback(() => {
+    chainAtCell().command(({ state, dispatch }) => pmToggleHeaderColumn(state, dispatch)).run();
+    setOpen(false);
+  }, [chainAtCell]);
+  const handleAddBefore = useCallback(() => {
+    chainAtCell().addColumnBefore().run();
+    setOpen(false);
+  }, [chainAtCell]);
+  const handleAddAfter = useCallback(() => {
+    chainAtCell().addColumnAfter().run();
+    setOpen(false);
+  }, [chainAtCell]);
+  const handleDelete = useCallback(() => {
+    chainAtCell().deleteColumn().run();
+    setOpen(false);
+  }, [chainAtCell]);
+  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "columns-control-div",
+        "aria-label": "Column actions",
+        style
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
+      /* @__PURE__ */ jsxs(DropdownMenu.Group, { children: [
+        /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect: handleToggleHeader, children: "Toggle header column" }),
+        /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect: handleAddBefore, children: "Insert column before" }),
+        /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect: handleAddAfter, children: "Insert column after" })
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+      /* @__PURE__ */ jsx(DropdownMenu.Item, { variant: "destructive", onSelect: handleDelete, children: "Delete column" })
+    ] })
+  ] });
+}
+
+export {
+  TableColumnMenu
+};

package/dist/index.d.mts

@@ -1,8 +1,10 @@
 export { TableKit, TableKitOptions } from './kit.mjs';
 export { Table } from './table/table.mjs';
+export { TableNodeView } from './table/views/table-node-view.mjs';
 export { TableCell, TableCellOptions } from './table-cell.mjs';
 export { TableHeader } from './table-header.mjs';
 export { TableRow } from './table-row.mjs';
 import '@tiptap/extension-table';
 import '@tiptap/react';
 import '@tiptap/core';
+import 'react/jsx-runtime';

package/dist/index.d.ts

@@ -1,8 +1,10 @@
 export { TableKit, TableKitOptions } from './kit.js';
 export { Table } from './table/table.js';
+export { TableNodeView } from './table/views/table-node-view.js';
 export { TableCell, TableCellOptions } from './table-cell.js';
 export { TableHeader } from './table-header.js';
 export { TableRow } from './table-row.js';
 import '@tiptap/extension-table';
 import '@tiptap/react';
 import '@tiptap/core';
+import 'react/jsx-runtime';