@kopexa/extension-table 17.0.45 → 17.1.0

package/dist/extensions/kit.js

@@ -0,0 +1,1041 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+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);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/extensions/kit.ts
+var kit_exports = {};
+__export(kit_exports, {
+  TableKit: () => TableKit
+});
+module.exports = __toCommonJS(kit_exports);
+var import_extension_table2 = require("@tiptap/extension-table");
+var import_react = require("@tiptap/react");
+
+// src/extensions/table.ts
+var import_extension_table = require("@tiptap/extension-table");
+var import_tables = require("@tiptap/pm/tables");
+
+// src/lib/constants.ts
+var EMPTY_CELL_WIDTH = 120;
+var RESIZE_MIN_WIDTH = 35;
+
+// src/extensions/table.ts
+var Table = import_extension_table.Table.configure({
+  resizable: true
+}).extend({
+  addProseMirrorPlugins() {
+    const isResizable = this.options.resizable && this.editor.isEditable;
+    const defaultCellMinWidth = this.options.cellMinWidth < EMPTY_CELL_WIDTH ? EMPTY_CELL_WIDTH : this.options.cellMinWidth;
+    return [
+      ...isResizable ? [
+        (0, import_tables.columnResizing)({
+          handleWidth: this.options.handleWidth,
+          cellMinWidth: RESIZE_MIN_WIDTH,
+          defaultCellMinWidth,
+          View: null,
+          lastColumnResizable: this.options.lastColumnResizable
+        })
+      ] : [],
+      (0, import_tables.tableEditing)({
+        allowTableNodeSelection: this.options.allowTableNodeSelection
+      })
+    ];
+  },
+  addNodeView() {
+    return ({ node, HTMLAttributes }) => {
+      class TiptapTableView extends import_tables.TableView {
+        constructor(node2, minCellWidth, containerAttributes) {
+          super(node2, minCellWidth);
+          __publicField(this, "blockContainer");
+          __publicField(this, "innerTableContainer");
+          __publicField(this, "widgetsContainer");
+          __publicField(this, "overlayContainer");
+          __publicField(this, "containerAttributes");
+          this.containerAttributes = containerAttributes != null ? containerAttributes : {};
+          this.blockContainer = this.createBlockContainer();
+          this.innerTableContainer = this.createInnerTableContainer();
+          this.widgetsContainer = this.createWidgetsContainer();
+          this.overlayContainer = this.createOverlayContainer();
+          this.setupDOMStructure();
+        }
+        createBlockContainer() {
+          const container = document.createElement("div");
+          container.setAttribute("data-content-type", "table");
+          container.style.position = "relative";
+          this.applyContainerAttributes(container);
+          return container;
+        }
+        createInnerTableContainer() {
+          const container = document.createElement("div");
+          container.className = "table-container";
+          return container;
+        }
+        createWidgetsContainer() {
+          const container = document.createElement("div");
+          container.className = "table-controls";
+          container.style.position = "absolute";
+          container.style.inset = "0";
+          container.style.pointerEvents = "none";
+          return container;
+        }
+        createOverlayContainer() {
+          const container = document.createElement("div");
+          container.className = "table-selection-overlay-container";
+          container.style.position = "absolute";
+          container.style.inset = "0";
+          container.style.pointerEvents = "none";
+          return container;
+        }
+        applyContainerAttributes(element) {
+          Object.entries(this.containerAttributes).forEach(([key, value]) => {
+            if (key !== "class") {
+              element.setAttribute(key, value);
+            }
+          });
+        }
+        setupDOMStructure() {
+          const originalTable = this.dom;
+          const tableElement = originalTable.firstChild;
+          if (tableElement) {
+            this.innerTableContainer.appendChild(tableElement);
+          }
+          originalTable.appendChild(this.innerTableContainer);
+          this.blockContainer.appendChild(originalTable);
+          this.blockContainer.appendChild(this.widgetsContainer);
+          this.blockContainer.appendChild(this.overlayContainer);
+          this.dom = this.blockContainer;
+        }
+        ignoreMutation(mutation) {
+          const target = mutation.target;
+          if (!target.closest(".table-container")) {
+            return true;
+          }
+          return super.ignoreMutation(mutation);
+        }
+      }
+      const cellMinWidth = this.options.cellMinWidth < EMPTY_CELL_WIDTH ? EMPTY_CELL_WIDTH : this.options.cellMinWidth;
+      return new TiptapTableView(node, cellMinWidth, HTMLAttributes);
+    };
+  }
+});
+
+// src/extensions/table-cell.ts
+var import_cell = require("@tiptap/extension-table/cell");
+var import_state = require("@tiptap/pm/state");
+var import_tables2 = require("@tiptap/pm/tables");
+var TableCell = import_cell.TableCell.extend({
+  addKeyboardShortcuts() {
+    var _a;
+    return {
+      ...(_a = this.parent) == null ? void 0 : _a.call(this),
+      "Mod-a": () => {
+        const { state, view } = this.editor;
+        const { selection, doc } = state;
+        const $anchor = selection.$anchor;
+        const cellPos = (0, import_tables2.cellAround)($anchor);
+        if (!cellPos) {
+          return false;
+        }
+        const cellNode = doc.nodeAt(cellPos.pos);
+        if (!cellNode || !cellNode.textContent) {
+          return false;
+        }
+        const from = cellPos.pos + 1;
+        const to = cellPos.pos + cellNode.nodeSize - 1;
+        if (from >= to) {
+          return true;
+        }
+        const $from = doc.resolve(from);
+        const $to = doc.resolve(to);
+        const nextSel = import_state.TextSelection.between($from, $to, 1);
+        if (!nextSel) {
+          return true;
+        }
+        if (state.selection.eq(nextSel)) {
+          return true;
+        }
+        view.dispatch(state.tr.setSelection(nextSel));
+        return true;
+      }
+    };
+  }
+});
+
+// src/extensions/table-handle.ts
+var import_core = require("@tiptap/core");
+
+// src/extensions/table-handle-plugin.ts
+var import_editor_utils = require("@kopexa/editor-utils");
+var import_shared_utils2 = require("@kopexa/shared-utils");
+var import_state2 = require("@tiptap/pm/state");
+var import_tables4 = require("@tiptap/pm/tables");
+var import_view = require("@tiptap/pm/view");
+
+// src/lib/table-utils.ts
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_tables3 = require("@tiptap/pm/tables");
+var EMPTY_CELLS_RESULT = { cells: [], mergedCells: [] };
+function domCellAround(target) {
+  let current = target;
+  while (current && current.tagName !== "TD" && current.tagName !== "TH" && !current.classList.contains("tableWrapper")) {
+    if (current.classList.contains("ProseMirror")) return void 0;
+    current = (0, import_shared_utils.isHTMLElement)(current.parentNode) ? current.parentNode : null;
+  }
+  if (!current) return void 0;
+  if (current.tagName === "TD" || current.tagName === "TH") {
+    return {
+      type: "cell",
+      domNode: current,
+      tbodyNode: (0, import_shared_utils.safeClosest)(current, "tbody")
+    };
+  }
+  return {
+    type: "wrapper",
+    domNode: current,
+    tbodyNode: current.querySelector("tbody")
+  };
+}
+function getCellIndicesFromDOM(cell, tableNode, editor) {
+  if (!tableNode) return null;
+  try {
+    const cellPos = editor.view.posAtDOM(cell, 0);
+    const $cellPos = editor.view.state.doc.resolve(cellPos);
+    for (let d = $cellPos.depth; d > 0; d--) {
+      const node = $cellPos.node(d);
+      if (node.type.name === "tableCell" || node.type.name === "tableHeader") {
+        const tableMap = import_tables3.TableMap.get(tableNode);
+        const cellNodePos = $cellPos.before(d);
+        const tableStart = $cellPos.start(d - 2);
+        const cellOffset = cellNodePos - tableStart;
+        const cellIndex = tableMap.map.indexOf(cellOffset);
+        return {
+          rowIndex: Math.floor(cellIndex / tableMap.width),
+          colIndex: cellIndex % tableMap.width
+        };
+      }
+    }
+  } catch (error) {
+    console.warn("Could not get cell position:", error);
+  }
+  return null;
+}
+function collectCells(editor, orientation, index, tablePos) {
+  if (!editor) return EMPTY_CELLS_RESULT;
+  const { state } = editor;
+  const table = getTable(editor, tablePos);
+  if (!table) return EMPTY_CELLS_RESULT;
+  const tableStart = table.start;
+  const tableNode = table.node;
+  const map = table.map;
+  const resolvedIndex = resolveOrientationIndex(
+    state,
+    table,
+    orientation,
+    index
+  );
+  if (resolvedIndex === null) return EMPTY_CELLS_RESULT;
+  const maxIndex = orientation === "row" ? map.height : map.width;
+  if (resolvedIndex < 0 || resolvedIndex >= maxIndex) {
+    return EMPTY_CELLS_RESULT;
+  }
+  const cells = [];
+  const mergedCells = [];
+  const seenMerged = /* @__PURE__ */ new Set();
+  const iterationCount = orientation === "row" ? map.width : map.height;
+  for (let i = 0; i < iterationCount; i++) {
+    const row = orientation === "row" ? resolvedIndex : i;
+    const col = orientation === "row" ? i : resolvedIndex;
+    const cellIndex = row * map.width + col;
+    const mapCell = map.map[cellIndex];
+    if (mapCell === void 0) continue;
+    const cellPos = tableStart + mapCell;
+    const cellNode = tableNode.nodeAt(mapCell);
+    if (!cellNode) continue;
+    const cell = createCellInfo(row, col, cellPos, cellNode);
+    if (isCellMerged(cellNode)) {
+      if (!seenMerged.has(cellPos)) {
+        mergedCells.push(cell);
+        seenMerged.add(cellPos);
+      }
+    }
+    cells.push(cell);
+  }
+  return { cells, mergedCells };
+}
+function isCellMerged(node) {
+  var _a, _b;
+  if (!node) return false;
+  const colspan = (_a = node.attrs.colspan) != null ? _a : 1;
+  const rowspan = (_b = node.attrs.rowspan) != null ? _b : 1;
+  return colspan > 1 || rowspan > 1;
+}
+function getColumnCells(editor, columnIndex, tablePos) {
+  return collectCells(editor, "column", columnIndex, tablePos);
+}
+function getTable(editor, tablePos) {
+  if (!editor) return null;
+  let table = null;
+  if (typeof tablePos === "number") {
+    const tableNode = editor.state.doc.nodeAt(tablePos);
+    if ((tableNode == null ? void 0 : tableNode.type.name) === "table") {
+      table = {
+        node: tableNode,
+        pos: tablePos,
+        start: tablePos + 1,
+        depth: editor.state.doc.resolve(tablePos).depth
+      };
+    }
+  }
+  if (!table) {
+    const { state } = editor;
+    const $from = state.doc.resolve(state.selection.from);
+    table = (0, import_tables3.findTable)($from);
+  }
+  if (!table) return null;
+  const tableMap = import_tables3.TableMap.get(table.node);
+  if (!tableMap) return null;
+  return { ...table, map: tableMap };
+}
+function createCellInfo(row, column, cellPos, cellNode) {
+  return {
+    row,
+    column,
+    pos: cellPos,
+    node: cellNode,
+    start: cellPos + 1,
+    depth: cellNode ? cellNode.content.size : 0
+  };
+}
+function resolveOrientationIndex(state, table, orientation, providedIndex) {
+  var _a;
+  if (typeof providedIndex === "number") {
+    return providedIndex;
+  }
+  if (state.selection instanceof import_tables3.CellSelection) {
+    const rect2 = (0, import_tables3.selectedRect)(state);
+    return orientation === "row" ? rect2.top : rect2.left;
+  }
+  const $cell = (_a = (0, import_tables3.cellAround)(state.selection.$anchor)) != null ? _a : (0, import_tables3.selectionCell)(state);
+  if (!$cell) return null;
+  const rel = $cell.pos - table.start;
+  const rect = table.map.findCell(rel);
+  return orientation === "row" ? rect.top : rect.left;
+}
+function getIndexCoordinates({
+  editor,
+  index,
+  orientation,
+  tablePos
+}) {
+  if (!editor) return null;
+  const table = getTable(editor, tablePos);
+  if (!table) return null;
+  const { map } = table;
+  const { width, height } = map;
+  if (index < 0) return null;
+  if (orientation === "row" && index >= height) return null;
+  if (orientation === "column" && index >= width) return null;
+  return orientation === "row" ? Array.from({ length: map.width }, (_, col) => ({ row: index, col })) : Array.from({ length: map.height }, (_, row) => ({ row, col: index }));
+}
+function getRowCells(editor, rowIndex, tablePos) {
+  return collectCells(editor, "row", rowIndex, tablePos);
+}
+function getTableFromDOM(tableElement, editor) {
+  try {
+    const pos = editor.view.posAtDOM(tableElement, 0);
+    const $pos = editor.view.state.doc.resolve(pos);
+    for (let d = $pos.depth; d >= 0; d--) {
+      const node = $pos.node(d);
+      if (isTableNode(node)) {
+        return { node, pos: d === 0 ? 0 : $pos.before(d) };
+      }
+    }
+  } catch (error) {
+    console.warn("Could not get table from DOM:", error);
+  }
+  return null;
+}
+function isTableNode(node) {
+  return !!node && (node.type.name === "table" || node.type.spec.tableRole === "table");
+}
+function selectCellsByCoords(editor, tablePos, coords, options = { mode: "state" }) {
+  if (!editor) return;
+  const table = getTable(editor, tablePos);
+  if (!table) return;
+  const { state } = editor;
+  const tableMap = table.map;
+  const cleanedCoords = coords.map((coord) => ({
+    row: (0, import_shared_utils.clamp)(coord.row, 0, tableMap.height - 1),
+    col: (0, import_shared_utils.clamp)(coord.col, 0, tableMap.width - 1)
+  })).filter((coord) => isWithinBounds(coord.row, coord.col, tableMap));
+  if (cleanedCoords.length === 0) {
+    return;
+  }
+  const allRows = cleanedCoords.map((coord) => coord.row);
+  const topRow = Math.min(...allRows);
+  const bottomRow = Math.max(...allRows);
+  const allCols = cleanedCoords.map((coord) => coord.col);
+  const leftCol = Math.min(...allCols);
+  const rightCol = Math.max(...allCols);
+  const getCellPositionFromMap = (row, col) => {
+    const cellOffset = tableMap.map[row * tableMap.width + col];
+    if (cellOffset === void 0) return null;
+    return tablePos + 1 + cellOffset;
+  };
+  const anchorPosition = getCellPositionFromMap(topRow, leftCol);
+  if (anchorPosition === null) return;
+  let headPosition = getCellPositionFromMap(bottomRow, rightCol);
+  if (headPosition === null) return;
+  if (headPosition === anchorPosition) {
+    let foundDifferentCell = false;
+    for (let row = bottomRow; row >= topRow && !foundDifferentCell; row--) {
+      for (let col = rightCol; col >= leftCol && !foundDifferentCell; col--) {
+        const candidatePosition = getCellPositionFromMap(row, col);
+        if (candidatePosition !== null && candidatePosition !== anchorPosition) {
+          headPosition = candidatePosition;
+          foundDifferentCell = true;
+        }
+      }
+    }
+  }
+  try {
+    const anchorRef = state.doc.resolve(anchorPosition);
+    const headRef = state.doc.resolve(headPosition);
+    const cellSelection = new import_tables3.CellSelection(anchorRef, headRef);
+    const transaction = state.tr.setSelection(cellSelection);
+    return applySelectionWithMode(state, transaction, options);
+  } catch (error) {
+    console.error("Failed to create cell selection:", error);
+    return;
+  }
+}
+function isWithinBounds(row, col, map) {
+  return row >= 0 && row < map.height && col >= 0 && col < map.width;
+}
+function applySelectionWithMode(state, transaction, options) {
+  var _a;
+  const mode = (_a = options.mode) != null ? _a : "state";
+  switch (mode) {
+    case "dispatch": {
+      const dispatchOptions = options;
+      if (typeof dispatchOptions.dispatch === "function") {
+        dispatchOptions.dispatch(transaction);
+      }
+      return;
+    }
+    case "transaction":
+      return transaction;
+    default:
+      return state.apply(transaction);
+  }
+}
+
+// src/extensions/table-handle-plugin.ts
+function hideElements(selector, rootEl) {
+  rootEl.querySelectorAll(selector).forEach((el) => {
+    el.style.visibility = "hidden";
+  });
+}
+var tableHandlePluginKey = new import_state2.PluginKey("tableHandlePlugin");
+var viewRegistry = /* @__PURE__ */ new WeakMap();
+var TableHandleView = class {
+  constructor(editor, editorView, emitUpdate) {
+    __publicField(this, "editor");
+    __publicField(this, "editorView");
+    __publicField(this, "state");
+    __publicField(this, "menuFrozen", false);
+    __publicField(this, "mouseState", "up");
+    __publicField(this, "tableId");
+    __publicField(this, "tablePos");
+    __publicField(this, "tableElement");
+    __publicField(this, "hideTimeout", null);
+    __publicField(this, "emitUpdate");
+    __publicField(this, "viewMousedownHandler", (event) => {
+      this.mouseState = "down";
+      const { state, view } = this.editor;
+      if (!(state.selection instanceof import_tables4.CellSelection) || this.editor.isFocused)
+        return;
+      const posInfo = view.posAtCoords({
+        left: event.clientX,
+        top: event.clientY
+      });
+      if (!posInfo) return;
+      const $pos = state.doc.resolve(posInfo.pos);
+      const { nodes } = state.schema;
+      let paraDepth = -1;
+      let inTableCell = false;
+      for (let d = $pos.depth; d >= 0; d--) {
+        const node = $pos.node(d);
+        if (!inTableCell && (node.type === nodes.tableCell || node.type === nodes.tableHeader)) {
+          inTableCell = true;
+        }
+        if (paraDepth === -1 && node.type === nodes.paragraph) {
+          paraDepth = d;
+        }
+        if (inTableCell && paraDepth !== -1) break;
+      }
+      if (!inTableCell || paraDepth === -1) return;
+      const from = $pos.start(paraDepth);
+      const to = $pos.end(paraDepth);
+      const nextSel = import_state2.TextSelection.create(state.doc, from, to);
+      if (state.selection.eq(nextSel)) return;
+      view.dispatch(state.tr.setSelection(nextSel));
+      view.focus();
+    });
+    __publicField(this, "mouseUpHandler", (event) => {
+      this.mouseState = "up";
+      this.mouseMoveHandler(event);
+    });
+    __publicField(this, "mouseMoveHandler", (event) => {
+      if (this.menuFrozen || this.mouseState === "selecting") return;
+      const target = event.target;
+      if (!(0, import_shared_utils2.isHTMLElement)(target) || !this.editorView.dom.contains(target)) return;
+      this._handleMouseMoveNow(event);
+    });
+    __publicField(this, "dragOverHandler", (event) => {
+      var _a;
+      if (((_a = this.state) == null ? void 0 : _a.draggingState) === void 0) {
+        return;
+      }
+      event.preventDefault();
+      event.dataTransfer.dropEffect = "move";
+      hideElements(
+        ".prosemirror-dropcursor-block, .prosemirror-dropcursor-inline",
+        this.editorView.root
+      );
+      const {
+        left: tableLeft,
+        right: tableRight,
+        top: tableTop,
+        bottom: tableBottom
+      } = this.state.referencePosTable;
+      const boundedMouseCoords = {
+        left: (0, import_shared_utils2.clamp)(event.clientX, tableLeft + 1, tableRight - 1),
+        top: (0, import_shared_utils2.clamp)(event.clientY, tableTop + 1, tableBottom - 1)
+      };
+      const tableCellElements = this.editorView.root.elementsFromPoint(boundedMouseCoords.left, boundedMouseCoords.top).filter(
+        (element) => element.tagName === "TD" || element.tagName === "TH"
+      );
+      if (tableCellElements.length === 0) {
+        return;
+      }
+      const tableCellElement = tableCellElements[0];
+      if (!(0, import_shared_utils2.isHTMLElement)(tableCellElement)) {
+        return;
+      }
+      const cellPosition = getCellIndicesFromDOM(
+        tableCellElement,
+        this.state.block,
+        this.editor
+      );
+      if (!cellPosition) return;
+      const { rowIndex, colIndex } = cellPosition;
+      const oldIndex = this.state.draggingState.draggedCellOrientation === "row" ? this.state.rowIndex : this.state.colIndex;
+      const newIndex = this.state.draggingState.draggedCellOrientation === "row" ? rowIndex : colIndex;
+      const dispatchDecorationsTransaction = newIndex !== oldIndex;
+      const mousePos = this.state.draggingState.draggedCellOrientation === "row" ? boundedMouseCoords.top : boundedMouseCoords.left;
+      const cellChanged = this.state.rowIndex !== rowIndex || this.state.colIndex !== colIndex;
+      const mousePosChanged = this.state.draggingState.mousePos !== mousePos;
+      if (cellChanged || mousePosChanged) {
+        this.state = {
+          ...this.state,
+          rowIndex,
+          colIndex,
+          referencePosCell: tableCellElement.getBoundingClientRect(),
+          draggingState: {
+            ...this.state.draggingState,
+            mousePos
+          }
+        };
+        this.emitUpdate();
+      }
+      if (dispatchDecorationsTransaction) {
+        this.editor.view.dispatch(
+          this.editor.state.tr.setMeta(tableHandlePluginKey, true)
+        );
+      }
+    });
+    __publicField(this, "dropHandler", () => {
+      this.mouseState = "up";
+      const st = this.state;
+      if (!(st == null ? void 0 : st.draggingState)) return false;
+      const { draggingState, rowIndex, colIndex, blockPos } = st;
+      if (!(0, import_editor_utils.isValidPosition)(blockPos)) return false;
+      if (draggingState.draggedCellOrientation === "row" && rowIndex === void 0 || draggingState.draggedCellOrientation === "col" && colIndex === void 0) {
+        console.warn(
+          "Attempted to drop table row or column, but no table block was hovered prior."
+        );
+        return false;
+      }
+      const isRow = draggingState.draggedCellOrientation === "row";
+      const orientation = isRow ? "row" : "column";
+      const destIndex = isRow ? rowIndex : colIndex;
+      const cellCoords = getIndexCoordinates({
+        editor: this.editor,
+        index: draggingState.originalIndex,
+        orientation,
+        tablePos: blockPos
+      });
+      if (!cellCoords) return false;
+      const stateWithCellSel = selectCellsByCoords(
+        this.editor,
+        blockPos,
+        cellCoords,
+        { mode: "state" }
+      );
+      if (!stateWithCellSel) return false;
+      const dispatch = (tr) => this.editor.view.dispatch(tr);
+      if (isRow) {
+        (0, import_tables4.moveTableRow)({
+          from: draggingState.originalIndex,
+          to: destIndex,
+          select: true,
+          pos: blockPos + 1
+        })(stateWithCellSel, dispatch);
+      } else {
+        (0, import_tables4.moveTableColumn)({
+          from: draggingState.originalIndex,
+          to: destIndex,
+          select: true,
+          pos: blockPos + 1
+        })(stateWithCellSel, dispatch);
+      }
+      this.state = { ...st, draggingState: void 0 };
+      this.emitUpdate();
+      this.editor.view.dispatch(
+        this.editor.state.tr.setMeta(tableHandlePluginKey, null)
+      );
+      return true;
+    });
+    this.editor = editor;
+    this.editorView = editorView;
+    this.emitUpdate = () => this.state && emitUpdate(this.state);
+    viewRegistry.set(editor, this);
+    this.editorView.dom.addEventListener("mousemove", this.mouseMoveHandler);
+    this.editorView.dom.addEventListener(
+      "mousedown",
+      this.viewMousedownHandler
+    );
+    window.addEventListener("mouseup", this.mouseUpHandler);
+    this.editorView.root.addEventListener(
+      "dragover",
+      this.dragOverHandler
+    );
+    this.editorView.root.addEventListener(
+      "drop",
+      this.dropHandler
+    );
+  }
+  /**
+   * Schedule a delayed hide of handles. This allows the user to cross
+   * gaps between table cells and floating handles without the handles
+   * disappearing prematurely.
+   */
+  scheduleHide() {
+    if (this.hideTimeout) return;
+    this.hideTimeout = setTimeout(() => {
+      this.hideTimeout = null;
+      if (!this.menuFrozen) {
+        this.hideHandles();
+      }
+    }, 200);
+  }
+  cancelScheduledHide() {
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+      this.hideTimeout = null;
+    }
+  }
+  hideHandles() {
+    var _a;
+    this.cancelScheduledHide();
+    if (!((_a = this.state) == null ? void 0 : _a.show)) return;
+    this.state = {
+      ...this.state,
+      show: false,
+      showAddOrRemoveRowsButton: false,
+      showAddOrRemoveColumnsButton: false,
+      colIndex: void 0,
+      rowIndex: void 0,
+      referencePosCell: void 0
+    };
+    this.emitUpdate();
+  }
+  _handleMouseMoveNow(event) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    const around = domCellAround(event.target);
+    if ((around == null ? void 0 : around.type) === "cell" && this.mouseState === "down" && !((_a = this.state) == null ? void 0 : _a.draggingState)) {
+      this.mouseState = "selecting";
+      this.cancelScheduledHide();
+      this.hideHandles();
+      return;
+    }
+    if (!around || !this.editor.isEditable) {
+      this.scheduleHide();
+      return;
+    }
+    this.cancelScheduledHide();
+    const tbody = around.tbodyNode;
+    if (!tbody) return;
+    let tableRect = tbody.getBoundingClientRect();
+    if (tableRect.width === 0 && tableRect.height === 0) {
+      const fallback = (_b = tbody.closest(".table-container")) != null ? _b : tbody.closest(".tableWrapper");
+      if (!fallback) return;
+      tableRect = fallback.getBoundingClientRect();
+    }
+    const coords = this.editor.view.posAtCoords({
+      left: event.clientX,
+      top: event.clientY
+    });
+    if (!coords) return;
+    const $pos = this.editor.view.state.doc.resolve(coords.pos);
+    let blockInfo;
+    for (let d = $pos.depth; d >= 0; d--) {
+      const node = $pos.node(d);
+      if (isTableNode(node)) {
+        blockInfo = { node, pos: d === 0 ? 0 : $pos.before(d) };
+        break;
+      }
+    }
+    if (!blockInfo || blockInfo.node.type.name !== "table") return;
+    this.tableElement = this.editor.view.nodeDOM(blockInfo.pos);
+    this.tablePos = blockInfo.pos;
+    this.tableId = blockInfo.node.attrs.id;
+    const widgetContainer = (_c = this.tableElement) == null ? void 0 : _c.querySelector(
+      ".table-controls"
+    );
+    if (around.type === "wrapper") {
+      const below = event.clientY >= tableRect.bottom - 1 && event.clientY < tableRect.bottom + 20;
+      const right = event.clientX >= tableRect.right - 1 && event.clientX < tableRect.right + 20;
+      const cursorBeyondRightOrBottom = event.clientX > tableRect.right || event.clientY > tableRect.bottom;
+      this.state = {
+        ...this.state,
+        show: true,
+        showAddOrRemoveRowsButton: below,
+        showAddOrRemoveColumnsButton: right,
+        referencePosTable: tableRect,
+        block: blockInfo.node,
+        blockPos: blockInfo.pos,
+        widgetContainer,
+        colIndex: cursorBeyondRightOrBottom ? void 0 : (_d = this.state) == null ? void 0 : _d.colIndex,
+        rowIndex: cursorBeyondRightOrBottom ? void 0 : (_e = this.state) == null ? void 0 : _e.rowIndex,
+        referencePosCell: cursorBeyondRightOrBottom ? void 0 : (_f = this.state) == null ? void 0 : _f.referencePosCell
+      };
+    } else {
+      const cellPosition = getCellIndicesFromDOM(
+        around.domNode,
+        blockInfo.node,
+        this.editor
+      );
+      if (!cellPosition) return;
+      const { rowIndex, colIndex } = cellPosition;
+      const cellRect = around.domNode.getBoundingClientRect();
+      const lastRowIndex = blockInfo.node.content.childCount - 1;
+      const lastColIndex = ((_h = (_g = blockInfo.node.content.firstChild) == null ? void 0 : _g.content.childCount) != null ? _h : 0) - 1;
+      if (((_i = this.state) == null ? void 0 : _i.show) && this.tableId === blockInfo.node.attrs.id && this.state.rowIndex === rowIndex && this.state.colIndex === colIndex) {
+        return;
+      }
+      this.state = {
+        show: true,
+        showAddOrRemoveColumnsButton: colIndex === lastColIndex,
+        showAddOrRemoveRowsButton: rowIndex === lastRowIndex,
+        referencePosTable: tableRect,
+        block: blockInfo.node,
+        blockPos: blockInfo.pos,
+        draggingState: void 0,
+        referencePosCell: cellRect,
+        colIndex,
+        rowIndex,
+        widgetContainer
+      };
+    }
+    this.emitUpdate();
+    return false;
+  }
+  update(view) {
+    var _a, _b, _c, _d;
+    const pluginState = tableHandlePluginKey.getState(view.state);
+    if (pluginState !== void 0 && pluginState !== this.menuFrozen) {
+      this.menuFrozen = pluginState;
+      if (this.menuFrozen) {
+        this.cancelScheduledHide();
+      }
+    }
+    if (!((_a = this.state) == null ? void 0 : _a.show)) return;
+    if (!((_b = this.tableElement) == null ? void 0 : _b.isConnected)) {
+      this.hideHandles();
+      return;
+    }
+    const tableInfo = getTableFromDOM(this.tableElement, this.editor);
+    if (!tableInfo) {
+      this.hideHandles();
+      return;
+    }
+    const blockChanged = this.state.block !== tableInfo.node || this.state.blockPos !== tableInfo.pos;
+    if (!tableInfo.node || tableInfo.node.type.name !== "table" || !((_c = this.tableElement) == null ? void 0 : _c.isConnected)) {
+      this.hideHandles();
+      return;
+    }
+    const { height: rowCount, width: colCount } = import_tables4.TableMap.get(tableInfo.node);
+    let newRowIndex = this.state.rowIndex;
+    let newColIndex = this.state.colIndex;
+    if (newRowIndex !== void 0 && newRowIndex >= rowCount) {
+      newRowIndex = rowCount ? rowCount - 1 : void 0;
+    }
+    if (newColIndex !== void 0 && newColIndex >= colCount) {
+      newColIndex = colCount ? colCount - 1 : void 0;
+    }
+    const tableBody = this.tableElement.querySelector("tbody");
+    if (!tableBody) {
+      throw new Error(
+        "Table block does not contain a 'tbody' HTML element. This should never happen."
+      );
+    }
+    let newReferencePosCell = this.state.referencePosCell;
+    if (newRowIndex !== void 0 && newColIndex !== void 0) {
+      const rowEl = tableBody.children[newRowIndex];
+      const cellEl = rowEl == null ? void 0 : rowEl.children[newColIndex];
+      if (cellEl) {
+        newReferencePosCell = cellEl.getBoundingClientRect();
+      } else {
+        newRowIndex = void 0;
+        newColIndex = void 0;
+        newReferencePosCell = void 0;
+      }
+    }
+    let newReferencePosTable = tableBody.getBoundingClientRect();
+    if (newReferencePosTable.width === 0 && newReferencePosTable.height === 0) {
+      const fallback = (_d = tableBody.closest(".table-container")) != null ? _d : tableBody.closest(".tableWrapper");
+      if (fallback) {
+        newReferencePosTable = fallback.getBoundingClientRect();
+      }
+    }
+    const indicesChanged = newRowIndex !== this.state.rowIndex || newColIndex !== this.state.colIndex;
+    const refPosChanged = newReferencePosCell !== this.state.referencePosCell || newReferencePosTable !== this.state.referencePosTable;
+    if (blockChanged || indicesChanged || refPosChanged) {
+      this.state = {
+        ...this.state,
+        block: tableInfo.node,
+        blockPos: tableInfo.pos,
+        rowIndex: newRowIndex,
+        colIndex: newColIndex,
+        referencePosCell: newReferencePosCell,
+        referencePosTable: newReferencePosTable
+      };
+      this.emitUpdate();
+    }
+  }
+  destroy() {
+    this.cancelScheduledHide();
+    viewRegistry.delete(this.editor);
+    this.editorView.dom.removeEventListener(
+      "mousemove",
+      this.mouseMoveHandler
+    );
+    window.removeEventListener("mouseup", this.mouseUpHandler);
+    this.editorView.dom.removeEventListener(
+      "mousedown",
+      this.viewMousedownHandler
+    );
+    this.editorView.root.removeEventListener(
+      "dragover",
+      this.dragOverHandler
+    );
+    this.editorView.root.removeEventListener(
+      "drop",
+      this.dropHandler
+    );
+  }
+};
+function TableHandlePlugin(editor, emitUpdate) {
+  let viewInstance = null;
+  return new import_state2.Plugin({
+    key: tableHandlePluginKey,
+    state: {
+      init: () => false,
+      apply: (tr, frozen) => {
+        const meta = tr.getMeta(tableHandlePluginKey);
+        return meta !== void 0 ? meta : frozen;
+      }
+    },
+    view: (editorView) => {
+      viewInstance = new TableHandleView(editor, editorView, emitUpdate);
+      return viewInstance;
+    },
+    props: {
+      decorations: (state) => {
+        if (!viewInstance || viewInstance.state === void 0 || viewInstance.state.draggingState === void 0 || viewInstance.tablePos === void 0) {
+          return;
+        }
+        const newIndex = viewInstance.state.draggingState.draggedCellOrientation === "row" ? viewInstance.state.rowIndex : viewInstance.state.colIndex;
+        if (newIndex === void 0) {
+          return;
+        }
+        const decorations = [];
+        const { draggingState } = viewInstance.state;
+        const { originalIndex } = draggingState;
+        if (viewInstance.state.draggingState.draggedCellOrientation === "row") {
+          const originalCells = getRowCells(
+            editor,
+            originalIndex,
+            viewInstance.state.blockPos
+          );
+          originalCells.cells.forEach((cell) => {
+            if (cell.node) {
+              decorations.push(
+                import_view.Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
+                  class: "table-cell-dragging-source"
+                })
+              );
+            }
+          });
+        } else {
+          const originalCells = getColumnCells(
+            editor,
+            originalIndex,
+            viewInstance.state.blockPos
+          );
+          originalCells.cells.forEach((cell) => {
+            if (cell.node) {
+              decorations.push(
+                import_view.Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
+                  class: "table-cell-dragging-source"
+                })
+              );
+            }
+          });
+        }
+        if (newIndex === originalIndex || !editor) {
+          return import_view.DecorationSet.create(state.doc, decorations);
+        }
+        if (viewInstance.state.draggingState.draggedCellOrientation === "row") {
+          const cellsInRow = getRowCells(
+            editor,
+            newIndex,
+            viewInstance.state.blockPos
+          );
+          cellsInRow.cells.forEach((cell) => {
+            const cellNode = cell.node;
+            if (!cellNode) {
+              return;
+            }
+            const decorationPos = cell.pos + (newIndex > originalIndex ? cellNode.nodeSize - 2 : 2);
+            decorations.push(
+              import_view.Decoration.widget(decorationPos, () => {
+                const widget = document.createElement("div");
+                widget.className = "tiptap-table-dropcursor";
+                widget.style.left = "0";
+                widget.style.right = "0";
+                if (newIndex > originalIndex) {
+                  widget.style.bottom = "-1px";
+                } else {
+                  widget.style.top = "-1px";
+                }
+                widget.style.height = "3px";
+                return widget;
+              })
+            );
+          });
+        } else {
+          const cellsInColumn = getColumnCells(
+            editor,
+            newIndex,
+            viewInstance.state.blockPos
+          );
+          cellsInColumn.cells.forEach((cell) => {
+            const cellNode = cell.node;
+            if (!cellNode) {
+              return;
+            }
+            const decorationPos = cell.pos + (newIndex > originalIndex ? cellNode.nodeSize - 2 : 2);
+            decorations.push(
+              import_view.Decoration.widget(decorationPos, () => {
+                const widget = document.createElement("div");
+                widget.className = "tiptap-table-dropcursor";
+                widget.style.top = "0";
+                widget.style.bottom = "0";
+                if (newIndex > originalIndex) {
+                  widget.style.right = "-1px";
+                } else {
+                  widget.style.left = "-1px";
+                }
+                widget.style.width = "3px";
+                return widget;
+              })
+            );
+          });
+        }
+        return import_view.DecorationSet.create(state.doc, decorations);
+      }
+    }
+  });
+}
+
+// src/extensions/table-handle.ts
+var TableHandleExtension = import_core.Extension.create({
+  name: "tableHandleExtension",
+  addCommands() {
+    return {
+      freezeHandles: () => ({ tr, dispatch }) => {
+        if (dispatch) tr.setMeta(tableHandlePluginKey, true);
+        return true;
+      },
+      unfreezeHandles: () => ({ tr, dispatch }) => {
+        if (dispatch) tr.setMeta(tableHandlePluginKey, false);
+        return true;
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    const { editor } = this;
+    return [
+      TableHandlePlugin(editor, (state) => {
+        this.editor.emit("tableHandleState", state);
+      })
+    ];
+  }
+});
+
+// src/extensions/kit.ts
+var TableKit = import_react.Extension.create({
+  name: "tableKit",
+  addExtensions() {
+    const extensions = [];
+    if (this.options.table !== false) {
+      extensions.push(TableHandleExtension);
+      extensions.push(Table.configure(this.options.table));
+    }
+    if (this.options.tableCell !== false) {
+      extensions.push(TableCell.configure(this.options.tableCell));
+    }
+    if (this.options.tableHeader !== false) {
+      extensions.push(import_extension_table2.TableHeader.configure(this.options.tableHeader));
+    }
+    if (this.options.tableRow !== false) {
+      extensions.push(import_extension_table2.TableRow.configure(this.options.tableRow));
+    }
+    return extensions;
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TableKit
+});