@ctzhian/tiptap 1.13.8 → 2.0.0

package/dist/extension/node/TableHandler/plugin.js

@@ -0,0 +1,1030 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Plugin, PluginKey, TextSelection } from '@tiptap/pm/state';
+import { CellSelection, moveTableColumn, moveTableRow, TableMap } from '@tiptap/pm/tables';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+import { clamp, domCellAround, getCellIndicesFromDOM, getColumnCells, getIndexCoordinates, getRowCells, getTableFromDOM, isHTMLElement, isTableNode, safeClosest, selectCellsByCoords } from "../../../util/table-utils";
+import { createTableDragImage } from "./create-image";
+function hideElements(selector, rootEl) {
+  rootEl.querySelectorAll(selector).forEach(function (el) {
+    el.style.visibility = 'hidden';
+  });
+}
+export var tableHandlePluginKey = new PluginKey('tableHandlePlugin');
+var TableHandleView = /*#__PURE__*/function () {
+  function TableHandleView(editor, editorView, emitUpdate) {
+    var _this = this;
+    _classCallCheck(this, TableHandleView);
+    _defineProperty(this, "editor", void 0);
+    _defineProperty(this, "editorView", void 0);
+    _defineProperty(this, "state", undefined);
+    _defineProperty(this, "menuFrozen", false);
+    _defineProperty(this, "mouseState", 'up');
+    _defineProperty(this, "tableId", void 0);
+    _defineProperty(this, "tablePos", void 0);
+    _defineProperty(this, "tableElement", void 0);
+    _defineProperty(this, "emitUpdate", void 0);
+    _defineProperty(this, "viewMousedownHandler", function (event) {
+      _this.mouseState = 'down';
+      var _this$editor = _this.editor,
+        state = _this$editor.state,
+        view = _this$editor.view;
+      if (!(state.selection instanceof CellSelection) || _this.editor.isFocused) return;
+      var posInfo = view.posAtCoords({
+        left: event.clientX,
+        top: event.clientY
+      });
+      if (!posInfo) return;
+      var $pos = state.doc.resolve(posInfo.pos);
+      var nodes = state.schema.nodes;
+      var paraDepth = -1;
+      var inTableCell = false;
+      for (var d = $pos.depth; d >= 0; d--) {
+        var 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;
+      var from = $pos.start(paraDepth);
+      var to = $pos.end(paraDepth);
+      var nextSel = TextSelection.create(state.doc, from, to);
+      if (state.selection.eq(nextSel)) return;
+      view.dispatch(state.tr.setSelection(nextSel));
+      view.focus();
+    });
+    _defineProperty(this, "mouseUpHandler", function (event) {
+      _this.mouseState = 'up';
+      _this.mouseMoveHandler(event);
+    });
+    _defineProperty(this, "mouseMoveHandler", function (event) {
+      if (_this.menuFrozen || _this.mouseState === 'selecting') return;
+      var target = event.target;
+      // If target is not in editor, don't process - this prevents state from being cleared
+      // when dragging outside the editor, which is the key to preventing errors
+      if (!isHTMLElement(target) || !_this.editorView.dom.contains(target)) return;
+
+      // Check if mouse is over a table handle or extend button
+      var isOverHandle = target.closest('.tiptap-table-handle-menu') !== null;
+      var isOverExtendButton = target.closest('.tiptap-table-extend-row-column-button') !== null;
+
+      // If mouse is over handle/button, keep showing them (don't hide)
+      if (isOverHandle || isOverExtendButton) {
+        return;
+      }
+
+      // Check if mouse is near handle/button elements (within reasonable distance)
+      var handleElements = Array.from(_this.editorView.root.querySelectorAll('.tiptap-table-handle-menu, .tiptap-table-extend-row-column-button'));
+      var isNearHandle = false;
+      for (var _i = 0, _handleElements = handleElements; _i < _handleElements.length; _i++) {
+        var handleEl = _handleElements[_i];
+        if (!isHTMLElement(handleEl)) continue;
+        var rect = handleEl.getBoundingClientRect();
+        // Expand the rect by 10px on all sides for easier mouse movement
+        var expandedRect = new DOMRect(rect.left - 10, rect.top - 10, rect.width + 20, rect.height + 20);
+        if (event.clientX >= expandedRect.left && event.clientX <= expandedRect.right && event.clientY >= expandedRect.top && event.clientY <= expandedRect.bottom) {
+          isNearHandle = true;
+          break;
+        }
+      }
+
+      // If near handle, don't process further to avoid flickering
+      if (isNearHandle) {
+        return;
+      }
+      _this._handleMouseMoveNow(event);
+    });
+    _defineProperty(this, "dragOverHandler", function (event) {
+      var _this$state;
+      if (((_this$state = _this.state) === null || _this$state === void 0 ? void 0 : _this$state.draggingState) === undefined) {
+        return;
+      }
+      event.preventDefault();
+      event.dataTransfer.dropEffect = 'move';
+      hideElements('.prosemirror-dropcursor-block, .prosemirror-dropcursor-inline', _this.editorView.root);
+
+      // The mouse cursor coordinates, bounded to the table's bounding box.
+      var _this$state$reference = _this.state.referencePosTable,
+        tableLeft = _this$state$reference.left,
+        tableRight = _this$state$reference.right,
+        tableTop = _this$state$reference.top,
+        tableBottom = _this$state$reference.bottom;
+      var boundedMouseCoords = {
+        left: clamp(event.clientX, tableLeft + 1, tableRight - 1),
+        top: clamp(event.clientY, tableTop + 1, tableBottom - 1)
+      };
+
+      // Gets the table cell element
+      var tableCellElements = _this.editorView.root.elementsFromPoint(boundedMouseCoords.left, boundedMouseCoords.top).filter(function (element) {
+        return element.tagName === 'TD' || element.tagName === 'TH';
+      });
+      if (tableCellElements.length === 0) {
+        return;
+      }
+      var tableCellElement = tableCellElements[0];
+      if (!isHTMLElement(tableCellElement)) {
+        return;
+      }
+      var cellPosition = getCellIndicesFromDOM(tableCellElement, _this.state.block, _this.editor);
+      if (!cellPosition) return;
+      var rowIndex = cellPosition.rowIndex,
+        colIndex = cellPosition.colIndex;
+
+      // Check what changed
+      var oldIndex = _this.state.draggingState.draggedCellOrientation === 'row' ? _this.state.rowIndex : _this.state.colIndex;
+      var newIndex = _this.state.draggingState.draggedCellOrientation === 'row' ? rowIndex : colIndex;
+      var dispatchDecorationsTransaction = newIndex !== oldIndex;
+      var mousePos = _this.state.draggingState.draggedCellOrientation === 'row' ? boundedMouseCoords.top : boundedMouseCoords.left;
+
+      // Check if anything needs updating
+      var cellChanged = _this.state.rowIndex !== rowIndex || _this.state.colIndex !== colIndex;
+      var mousePosChanged = _this.state.draggingState.mousePos !== mousePos;
+      if (cellChanged || mousePosChanged) {
+        var _this$state$draggingS;
+        var newCellRect = tableCellElement.getBoundingClientRect();
+        // Preserve original cell size during drag to prevent handle height changes
+        var preservedCellRect = (_this$state$draggingS = _this.state.draggingState) !== null && _this$state$draggingS !== void 0 && _this$state$draggingS.originalCellSize ? new DOMRect(newCellRect.x, newCellRect.y, _this.state.draggingState.originalCellSize.width, _this.state.draggingState.originalCellSize.height) : newCellRect;
+        _this.state = _objectSpread(_objectSpread({}, _this.state), {}, {
+          rowIndex: rowIndex,
+          colIndex: colIndex,
+          referencePosCell: preservedCellRect,
+          draggingState: _objectSpread(_objectSpread({}, _this.state.draggingState), {}, {
+            mousePos: mousePos
+          })
+        });
+        _this.emitUpdate();
+      }
+
+      // Dispatch decorations transaction if needed
+      if (dispatchDecorationsTransaction) {
+        _this.editor.view.dispatch(_this.editor.state.tr.setMeta(tableHandlePluginKey, true));
+      }
+    });
+    _defineProperty(this, "dropHandler", function () {
+      _this.mouseState = 'up';
+      var st = _this.state;
+      if (!(st !== null && st !== void 0 && st.draggingState)) return false;
+      var draggingState = st.draggingState,
+        rowIndex = st.rowIndex,
+        colIndex = st.colIndex,
+        blockPos = st.blockPos;
+      if (typeof blockPos !== 'number' || blockPos < 0) return false;
+      if (draggingState.draggedCellOrientation === 'row' && rowIndex === undefined || draggingState.draggedCellOrientation === 'col' && colIndex === undefined) {
+        throw new Error('Attempted to drop table row or column, but no table block was hovered prior.');
+      }
+      var isRow = draggingState.draggedCellOrientation === 'row';
+      var orientation = isRow ? 'row' : 'column';
+      var destIndex = isRow ? rowIndex : colIndex;
+      var cellCoords = getIndexCoordinates({
+        editor: _this.editor,
+        index: draggingState.originalIndex,
+        orientation: orientation,
+        tablePos: blockPos
+      });
+      if (!cellCoords) return false;
+      var stateWithCellSel = selectCellsByCoords(_this.editor, blockPos, cellCoords, {
+        mode: 'state'
+      });
+      if (!stateWithCellSel) return false;
+
+      // When mode is 'state', selectCellsByCoords returns EditorState
+      // Type assertion is safe here because we explicitly requested 'state' mode
+      var editorState = stateWithCellSel;
+      var dispatch = function dispatch(tr) {
+        return _this.editor.view.dispatch(tr);
+      };
+      if (isRow) {
+        moveTableRow({
+          from: draggingState.originalIndex,
+          to: destIndex,
+          select: true,
+          pos: blockPos + 1
+        })(editorState, dispatch);
+      } else {
+        moveTableColumn({
+          from: draggingState.originalIndex,
+          to: destIndex,
+          select: true,
+          pos: blockPos + 1
+        })(editorState, dispatch);
+      }
+      _this.state = _objectSpread(_objectSpread({}, st), {}, {
+        draggingState: undefined
+      });
+      _this.emitUpdate();
+      _this.editor.view.dispatch(_this.editor.state.tr.setMeta(tableHandlePluginKey, null));
+      return true;
+    });
+    _defineProperty(this, "scrollHandler", function () {
+      var _this$state2, _this$tableElement;
+      // When scrolling, update positions if handles are visible
+      if ((_this$state2 = _this.state) !== null && _this$state2 !== void 0 && _this$state2.show && (_this$tableElement = _this.tableElement) !== null && _this$tableElement !== void 0 && _this$tableElement.isConnected) {
+        // Force update by recalculating positions
+        _this.updatePositions();
+      }
+    });
+    this.editor = editor;
+    this.editorView = editorView;
+    this.emitUpdate = function () {
+      return _this.state && emitUpdate(_this.state);
+    };
+    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);
+
+    // Listen to scroll events to update handle positions when scrolling
+    window.addEventListener('scroll', this.scrollHandler, true);
+    // Also listen to resize events
+    window.addEventListener('resize', this.scrollHandler);
+  }
+  _createClass(TableHandleView, [{
+    key: "hideHandles",
+    value: function hideHandles() {
+      var _this$state3;
+      if (!((_this$state3 = this.state) !== null && _this$state3 !== void 0 && _this$state3.show)) return;
+
+      // Don't hide handles during drag operations - preserve dragging state
+      if (this.state.draggingState) return;
+      this.state = _objectSpread(_objectSpread({}, this.state), {}, {
+        show: false,
+        showAddOrRemoveRowsButton: false,
+        showAddOrRemoveColumnsButton: false,
+        colIndex: undefined,
+        rowIndex: undefined,
+        referencePosCell: undefined,
+        referencePosLastRow: undefined,
+        referencePosLastCol: undefined
+      });
+      this.emitUpdate();
+    }
+  }, {
+    key: "_handleMouseMoveNow",
+    value: function _handleMouseMoveNow(event) {
+      var _this$state4;
+      var around = domCellAround(event.target);
+
+      // Hide handles while selecting inside a cell
+      if ((around === null || around === void 0 ? void 0 : around.type) === 'cell' && this.mouseState === 'down' && !((_this$state4 = this.state) !== null && _this$state4 !== void 0 && _this$state4.draggingState)) {
+        this.mouseState = 'selecting';
+        this.hideHandles();
+        return;
+      }
+      if (!around || !this.editor.isEditable) {
+        this.hideHandles();
+        return;
+      }
+      var tbody = around.tbodyNode;
+      if (!tbody) return;
+      var tableRect = tbody.getBoundingClientRect();
+      var coords = this.editor.view.posAtCoords({
+        left: event.clientX,
+        top: event.clientY
+      });
+      if (!coords) return;
+
+      // Find the table node at this position
+      var $pos = this.editor.view.state.doc.resolve(coords.pos);
+      var blockInfo;
+      for (var d = $pos.depth; d >= 0; d--) {
+        var node = $pos.node(d);
+        if (isTableNode(node)) {
+          blockInfo = {
+            node: 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;
+      var wrapper = safeClosest(around.domNode, '.tableWrapper');
+      var widgetContainer = wrapper === null || wrapper === void 0 ? void 0 : wrapper.querySelector('.table-controls');
+
+      // Hovering around the table (outside cells)
+      if (around.type === 'wrapper') {
+        var _this$state5, _this$state6, _this$state7;
+        var below = event.clientY >= tableRect.bottom - 1 && event.clientY < tableRect.bottom + 20;
+        var right = event.clientX >= tableRect.right - 1 && event.clientX < tableRect.right + 20;
+        var cursorBeyondRightOrBottom = event.clientX > tableRect.right || event.clientY > tableRect.bottom;
+
+        // Calculate positions for extend buttons when hovering at edges
+        var referencePosLastRow;
+        var referencePosLastCol;
+        if (below || right) {
+          var _this$tableElement2;
+          var _tbody = (_this$tableElement2 = this.tableElement) === null || _this$tableElement2 === void 0 ? void 0 : _this$tableElement2.querySelector('tbody');
+          if (_tbody) {
+            var _blockInfo$node$conte, _blockInfo$node$conte2;
+            var lastRowIndex = blockInfo.node.content.childCount - 1;
+            var lastColIndex = ((_blockInfo$node$conte = (_blockInfo$node$conte2 = blockInfo.node.content.firstChild) === null || _blockInfo$node$conte2 === void 0 ? void 0 : _blockInfo$node$conte2.content.childCount) !== null && _blockInfo$node$conte !== void 0 ? _blockInfo$node$conte : 0) - 1;
+            if (below) {
+              var lastRow = _tbody.children[lastRowIndex];
+              if (lastRow) {
+                referencePosLastRow = lastRow.getBoundingClientRect();
+              }
+            }
+            if (right) {
+              var maxRight = 0;
+              var lastColRect = null;
+              for (var i = 0; i < _tbody.children.length; i++) {
+                var row = _tbody.children[i];
+                if (row && row.children[lastColIndex]) {
+                  var cell = row.children[lastColIndex];
+                  var cellRect = cell.getBoundingClientRect();
+                  if (cellRect.right > maxRight) {
+                    maxRight = cellRect.right;
+                    lastColRect = cellRect;
+                  }
+                }
+              }
+              if (lastColRect) {
+                var firstRow = _tbody.children[0];
+                var _lastRow = _tbody.children[lastRowIndex];
+                if (firstRow && _lastRow) {
+                  var firstCell = firstRow.children[lastColIndex];
+                  if (firstCell) {
+                    var firstRect = firstCell.getBoundingClientRect();
+                    referencePosLastCol = new DOMRect(lastColRect.right, firstRect.top, 0, _lastRow.getBoundingClientRect().bottom - firstRect.top);
+                  }
+                }
+              }
+            }
+          }
+        }
+        this.state = _objectSpread(_objectSpread({}, this.state), {}, {
+          show: true,
+          showAddOrRemoveRowsButton: below,
+          showAddOrRemoveColumnsButton: right,
+          referencePosTable: tableRect,
+          referencePosLastRow: referencePosLastRow,
+          referencePosLastCol: referencePosLastCol,
+          block: blockInfo.node,
+          blockPos: blockInfo.pos,
+          widgetContainer: widgetContainer,
+          colIndex: cursorBeyondRightOrBottom ? undefined : (_this$state5 = this.state) === null || _this$state5 === void 0 ? void 0 : _this$state5.colIndex,
+          rowIndex: cursorBeyondRightOrBottom ? undefined : (_this$state6 = this.state) === null || _this$state6 === void 0 ? void 0 : _this$state6.rowIndex,
+          referencePosCell: cursorBeyondRightOrBottom ? undefined : (_this$state7 = this.state) === null || _this$state7 === void 0 ? void 0 : _this$state7.referencePosCell
+        });
+      } else {
+        var _blockInfo$node$conte3, _blockInfo$node$conte4, _this$state8;
+        // Hovering over a cell
+        var cellPosition = getCellIndicesFromDOM(around.domNode, blockInfo.node, this.editor);
+        if (!cellPosition) return;
+        var rowIndex = cellPosition.rowIndex,
+          colIndex = cellPosition.colIndex;
+        var _cellRect = around.domNode.getBoundingClientRect();
+        var _lastRowIndex = blockInfo.node.content.childCount - 1;
+        var _lastColIndex = ((_blockInfo$node$conte3 = (_blockInfo$node$conte4 = blockInfo.node.content.firstChild) === null || _blockInfo$node$conte4 === void 0 ? void 0 : _blockInfo$node$conte4.content.childCount) !== null && _blockInfo$node$conte3 !== void 0 ? _blockInfo$node$conte3 : 0) - 1;
+
+        // Skip update if same cell
+        if ((_this$state8 = this.state) !== null && _this$state8 !== void 0 && _this$state8.show && this.tableId === blockInfo.node.attrs.id && this.state.rowIndex === rowIndex && this.state.colIndex === colIndex) {
+          return;
+        }
+
+        // Calculate positions for extend buttons
+        var _referencePosLastRow;
+        var _referencePosLastCol;
+        if (rowIndex === _lastRowIndex || colIndex === _lastColIndex) {
+          var _this$tableElement3;
+          var _tbody2 = (_this$tableElement3 = this.tableElement) === null || _this$tableElement3 === void 0 ? void 0 : _this$tableElement3.querySelector('tbody');
+          if (_tbody2) {
+            // Get last row position
+            if (rowIndex === _lastRowIndex) {
+              var _lastRow2 = _tbody2.children[_lastRowIndex];
+              if (_lastRow2) {
+                _referencePosLastRow = _lastRow2.getBoundingClientRect();
+              }
+            }
+            // Get last column position
+            if (colIndex === _lastColIndex) {
+              // Find the rightmost column by checking all rows
+              var _maxRight = 0;
+              var _lastColRect = null;
+              for (var _i2 = 0; _i2 < _tbody2.children.length; _i2++) {
+                var _row = _tbody2.children[_i2];
+                if (_row && _row.children[_lastColIndex]) {
+                  var _cell = _row.children[_lastColIndex];
+                  var _cellRect2 = _cell.getBoundingClientRect();
+                  if (_cellRect2.right > _maxRight) {
+                    _maxRight = _cellRect2.right;
+                    _lastColRect = _cellRect2;
+                  }
+                }
+              }
+              if (_lastColRect) {
+                // Create a rect representing the entire last column
+                var _firstRow = _tbody2.children[0];
+                var _lastRow3 = _tbody2.children[_lastRowIndex];
+                if (_firstRow && _lastRow3) {
+                  var _firstCell = _firstRow.children[_lastColIndex];
+                  if (_firstCell) {
+                    var _firstRect = _firstCell.getBoundingClientRect();
+                    _referencePosLastCol = new DOMRect(_lastColRect.right, _firstRect.top, 0, _lastRow3.getBoundingClientRect().bottom - _firstRect.top);
+                  }
+                }
+              }
+            }
+          }
+        }
+        this.state = {
+          show: true,
+          showAddOrRemoveColumnsButton: colIndex === _lastColIndex,
+          showAddOrRemoveRowsButton: rowIndex === _lastRowIndex,
+          referencePosTable: tableRect,
+          referencePosLastRow: _referencePosLastRow,
+          referencePosLastCol: _referencePosLastCol,
+          block: blockInfo.node,
+          blockPos: blockInfo.pos,
+          draggingState: undefined,
+          referencePosCell: _cellRect,
+          colIndex: colIndex,
+          rowIndex: rowIndex,
+          widgetContainer: widgetContainer
+        };
+      }
+      this.emitUpdate();
+      return false;
+    }
+  }, {
+    key: "update",
+    value: function update(view) {
+      var _this$state9, _this$tableElement4, _this$tableElement5;
+      var pluginState = tableHandlePluginKey.getState(view.state);
+      if (pluginState !== undefined && pluginState !== this.menuFrozen) {
+        this.menuFrozen = pluginState;
+      }
+      if (!((_this$state9 = this.state) !== null && _this$state9 !== void 0 && _this$state9.show)) return;
+      if (!((_this$tableElement4 = this.tableElement) !== null && _this$tableElement4 !== void 0 && _this$tableElement4.isConnected)) {
+        this.hideHandles();
+        return;
+      }
+      var tableInfo = getTableFromDOM(this.tableElement, this.editor);
+      if (!tableInfo) {
+        this.hideHandles();
+        return;
+      }
+
+      // Check if table changed
+      var blockChanged = this.state.block !== tableInfo.node || this.state.blockPos !== tableInfo.pos;
+      if (!tableInfo.node || tableInfo.node.type.name !== 'table' || !((_this$tableElement5 = this.tableElement) !== null && _this$tableElement5 !== void 0 && _this$tableElement5.isConnected)) {
+        this.hideHandles();
+        return;
+      }
+      var _TableMap$get = TableMap.get(tableInfo.node),
+        rowCount = _TableMap$get.height,
+        colCount = _TableMap$get.width;
+
+      // Calculate new indices
+      var newRowIndex = this.state.rowIndex;
+      var newColIndex = this.state.colIndex;
+
+      // Clamp indices if rows/columns were deleted
+      if (newRowIndex !== undefined && newRowIndex >= rowCount) {
+        newRowIndex = rowCount ? rowCount - 1 : undefined;
+      }
+      if (newColIndex !== undefined && newColIndex >= colCount) {
+        newColIndex = colCount ? colCount - 1 : undefined;
+      }
+      var tableBody = this.tableElement.querySelector('tbody');
+      if (!tableBody) {
+        throw new Error("Table block does not contain a 'tbody' HTML element. This should never happen.");
+      }
+
+      // Calculate new reference positions
+      var newReferencePosCell = this.state.referencePosCell;
+      if (newRowIndex !== undefined && newColIndex !== undefined) {
+        var rowEl = tableBody.children[newRowIndex];
+        var cellEl = rowEl === null || rowEl === void 0 ? void 0 : rowEl.children[newColIndex];
+        if (cellEl) {
+          var _this$state$draggingS2;
+          var newCellRect = cellEl.getBoundingClientRect();
+          // Preserve original cell size during drag to prevent handle height changes
+          if ((_this$state$draggingS2 = this.state.draggingState) !== null && _this$state$draggingS2 !== void 0 && _this$state$draggingS2.originalCellSize) {
+            newReferencePosCell = new DOMRect(newCellRect.x, newCellRect.y, this.state.draggingState.originalCellSize.width, this.state.draggingState.originalCellSize.height);
+          } else {
+            newReferencePosCell = newCellRect;
+          }
+        } else {
+          newRowIndex = undefined;
+          newColIndex = undefined;
+          newReferencePosCell = undefined;
+        }
+      }
+      var newReferencePosTable = tableBody.getBoundingClientRect();
+
+      // Update last row/col positions if needed
+      var newReferencePosLastRow = this.state.referencePosLastRow;
+      var newReferencePosLastCol = this.state.referencePosLastCol;
+      if (this.state.showAddOrRemoveRowsButton || this.state.showAddOrRemoveColumnsButton) {
+        var _tableInfo$node$conte, _tableInfo$node$conte2;
+        var lastRowIndex = tableInfo.node.content.childCount - 1;
+        var lastColIndex = ((_tableInfo$node$conte = (_tableInfo$node$conte2 = tableInfo.node.content.firstChild) === null || _tableInfo$node$conte2 === void 0 ? void 0 : _tableInfo$node$conte2.content.childCount) !== null && _tableInfo$node$conte !== void 0 ? _tableInfo$node$conte : 0) - 1;
+        if (this.state.showAddOrRemoveRowsButton) {
+          var lastRow = tableBody.children[lastRowIndex];
+          if (lastRow) {
+            newReferencePosLastRow = lastRow.getBoundingClientRect();
+          }
+        }
+        if (this.state.showAddOrRemoveColumnsButton) {
+          var maxRight = 0;
+          var lastColRect = null;
+          for (var i = 0; i < tableBody.children.length; i++) {
+            var row = tableBody.children[i];
+            if (row && row.children[lastColIndex]) {
+              var cell = row.children[lastColIndex];
+              var cellRect = cell.getBoundingClientRect();
+              if (cellRect.right > maxRight) {
+                maxRight = cellRect.right;
+                lastColRect = cellRect;
+              }
+            }
+          }
+          if (lastColRect) {
+            var firstRow = tableBody.children[0];
+            var _lastRow4 = tableBody.children[lastRowIndex];
+            if (firstRow && _lastRow4) {
+              var firstCell = firstRow.children[lastColIndex];
+              if (firstCell) {
+                var firstRect = firstCell.getBoundingClientRect();
+                newReferencePosLastCol = new DOMRect(lastColRect.right, firstRect.top, 0, _lastRow4.getBoundingClientRect().bottom - firstRect.top);
+              }
+            }
+          }
+        }
+      }
+
+      // Check if anything changed
+      var indicesChanged = newRowIndex !== this.state.rowIndex || newColIndex !== this.state.colIndex;
+      var refPosChanged = newReferencePosCell !== this.state.referencePosCell || newReferencePosTable !== this.state.referencePosTable || newReferencePosLastRow !== this.state.referencePosLastRow || newReferencePosLastCol !== this.state.referencePosLastCol;
+      if (blockChanged || indicesChanged || refPosChanged) {
+        this.state = _objectSpread(_objectSpread({}, this.state), {}, {
+          block: tableInfo.node,
+          blockPos: tableInfo.pos,
+          rowIndex: newRowIndex,
+          colIndex: newColIndex,
+          referencePosCell: newReferencePosCell,
+          referencePosTable: newReferencePosTable,
+          referencePosLastRow: newReferencePosLastRow,
+          referencePosLastCol: newReferencePosLastCol
+        });
+        this.emitUpdate();
+      }
+    }
+  }, {
+    key: "updatePositions",
+    value: function updatePositions() {
+      var _this$state10, _this$tableElement6;
+      if (!((_this$state10 = this.state) !== null && _this$state10 !== void 0 && _this$state10.show) || !((_this$tableElement6 = this.tableElement) !== null && _this$tableElement6 !== void 0 && _this$tableElement6.isConnected)) return;
+      var tableInfo = getTableFromDOM(this.tableElement, this.editor);
+      if (!tableInfo || tableInfo.node.type.name !== 'table') return;
+      var tableBody = this.tableElement.querySelector('tbody');
+      if (!tableBody) return;
+      var newReferencePosTable = tableBody.getBoundingClientRect();
+
+      // Update cell position if we have row/col indices
+      var newReferencePosCell = this.state.referencePosCell;
+      if (this.state.rowIndex !== undefined && this.state.colIndex !== undefined) {
+        var rowEl = tableBody.children[this.state.rowIndex];
+        var cellEl = rowEl === null || rowEl === void 0 ? void 0 : rowEl.children[this.state.colIndex];
+        if (cellEl) {
+          var _this$state$draggingS3;
+          var newCellRect = cellEl.getBoundingClientRect();
+          // Preserve original cell size during drag
+          if ((_this$state$draggingS3 = this.state.draggingState) !== null && _this$state$draggingS3 !== void 0 && _this$state$draggingS3.originalCellSize) {
+            newReferencePosCell = new DOMRect(newCellRect.x, newCellRect.y, this.state.draggingState.originalCellSize.width, this.state.draggingState.originalCellSize.height);
+          } else {
+            newReferencePosCell = newCellRect;
+          }
+        }
+      }
+
+      // Update last row/col positions if needed
+      var newReferencePosLastRow = this.state.referencePosLastRow;
+      var newReferencePosLastCol = this.state.referencePosLastCol;
+      if (this.state.showAddOrRemoveRowsButton || this.state.showAddOrRemoveColumnsButton) {
+        var _tableInfo$node$conte3, _tableInfo$node$conte4;
+        var lastRowIndex = tableInfo.node.content.childCount - 1;
+        var lastColIndex = ((_tableInfo$node$conte3 = (_tableInfo$node$conte4 = tableInfo.node.content.firstChild) === null || _tableInfo$node$conte4 === void 0 ? void 0 : _tableInfo$node$conte4.content.childCount) !== null && _tableInfo$node$conte3 !== void 0 ? _tableInfo$node$conte3 : 0) - 1;
+        if (this.state.showAddOrRemoveRowsButton) {
+          var lastRow = tableBody.children[lastRowIndex];
+          if (lastRow) {
+            newReferencePosLastRow = lastRow.getBoundingClientRect();
+          }
+        }
+        if (this.state.showAddOrRemoveColumnsButton) {
+          var maxRight = 0;
+          var lastColRect = null;
+          for (var i = 0; i < tableBody.children.length; i++) {
+            var row = tableBody.children[i];
+            if (row && row.children[lastColIndex]) {
+              var cell = row.children[lastColIndex];
+              var cellRect = cell.getBoundingClientRect();
+              if (cellRect.right > maxRight) {
+                maxRight = cellRect.right;
+                lastColRect = cellRect;
+              }
+            }
+          }
+          if (lastColRect) {
+            var firstRow = tableBody.children[0];
+            var _lastRow5 = tableBody.children[lastRowIndex];
+            if (firstRow && _lastRow5) {
+              var firstCell = firstRow.children[lastColIndex];
+              if (firstCell) {
+                var firstRect = firstCell.getBoundingClientRect();
+                newReferencePosLastCol = new DOMRect(lastColRect.right, firstRect.top, 0, _lastRow5.getBoundingClientRect().bottom - firstRect.top);
+              }
+            }
+          }
+        }
+      }
+
+      // Check if positions actually changed (compare individual properties)
+      var refPosChanged = !newReferencePosCell || !this.state.referencePosCell || newReferencePosCell.x !== this.state.referencePosCell.x || newReferencePosCell.y !== this.state.referencePosCell.y || newReferencePosTable.x !== this.state.referencePosTable.x || newReferencePosTable.y !== this.state.referencePosTable.y || newReferencePosLastRow && this.state.referencePosLastRow && (newReferencePosLastRow.x !== this.state.referencePosLastRow.x || newReferencePosLastRow.y !== this.state.referencePosLastRow.y) || newReferencePosLastCol && this.state.referencePosLastCol && (newReferencePosLastCol.x !== this.state.referencePosLastCol.x || newReferencePosLastCol.y !== this.state.referencePosLastCol.y);
+      if (refPosChanged) {
+        this.state = _objectSpread(_objectSpread({}, this.state), {}, {
+          referencePosCell: newReferencePosCell,
+          referencePosTable: newReferencePosTable,
+          referencePosLastRow: newReferencePosLastRow,
+          referencePosLastCol: newReferencePosLastCol
+        });
+        this.emitUpdate();
+      }
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      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);
+      window.removeEventListener('scroll', this.scrollHandler, true);
+      window.removeEventListener('resize', this.scrollHandler);
+    }
+  }]);
+  return TableHandleView;
+}();
+var tableHandleView = null;
+export function TableHandlePlugin(editor, emitUpdate) {
+  return new Plugin({
+    key: tableHandlePluginKey,
+    state: {
+      init: function init() {
+        return false;
+      },
+      apply: function apply(tr, frozen) {
+        var meta = tr.getMeta(tableHandlePluginKey);
+        return meta !== undefined ? meta : frozen;
+      }
+    },
+    view: function view(editorView) {
+      tableHandleView = new TableHandleView(editor, editorView, emitUpdate);
+      return tableHandleView;
+    },
+    props: {
+      decorations: function decorations(state) {
+        if (!tableHandleView) return null;
+        if (tableHandleView === undefined || tableHandleView.state === undefined || tableHandleView.state.draggingState === undefined || tableHandleView.tablePos === undefined) {
+          return;
+        }
+        var newIndex = tableHandleView.state.draggingState.draggedCellOrientation === 'row' ? tableHandleView.state.rowIndex : tableHandleView.state.colIndex;
+        if (newIndex === undefined) {
+          return;
+        }
+        var decorations = [];
+        var draggingState = tableHandleView.state.draggingState;
+        var originalIndex = draggingState.originalIndex;
+        if (tableHandleView.state.draggingState.draggedCellOrientation === 'row') {
+          var originalCells = getRowCells(editor, originalIndex, tableHandleView.state.blockPos);
+          originalCells.cells.forEach(function (cell) {
+            if (cell.node) {
+              decorations.push(Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
+                class: 'table-cell-dragging-source'
+              }));
+            }
+          });
+        } else {
+          var _originalCells = getColumnCells(editor, originalIndex, tableHandleView.state.blockPos);
+          _originalCells.cells.forEach(function (cell) {
+            if (cell.node) {
+              decorations.push(Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
+                class: 'table-cell-dragging-source'
+              }));
+            }
+          });
+        }
+
+        // Return empty decorations if:
+        // - original index is same as new index (no change)
+        // - editor is not defined for some reason
+        if (newIndex === originalIndex || !editor) {
+          return DecorationSet.create(state.doc, decorations);
+        }
+        if (tableHandleView.state.draggingState.draggedCellOrientation === 'row') {
+          var cellsInRow = getRowCells(editor, newIndex, tableHandleView.state.blockPos);
+          cellsInRow.cells.forEach(function (cell) {
+            var cellNode = cell.node;
+            if (!cellNode) {
+              return;
+            }
+
+            // Creates a decoration at the start or end of each cell,
+            // depending on whether the new index is before or after the
+            // original index.
+            var decorationPos = cell.pos + (newIndex > originalIndex ? cellNode.nodeSize - 2 : 2);
+            decorations.push(Decoration.widget(decorationPos, function () {
+              var widget = document.createElement('div');
+              widget.className = 'tiptap-table-dropcursor';
+              widget.style.position = 'absolute';
+              widget.style.left = '0';
+              widget.style.right = '0';
+              widget.style.zIndex = '20';
+              widget.style.pointerEvents = 'none';
+              // This is only necessary because the drop indicator's height
+              // is an even number of pixels, whereas the border between
+              // table cells is an odd number of pixels. So this makes the
+              // positioning slightly more consistent regardless of where
+              // the row is being dropped.
+              if (newIndex > originalIndex) {
+                widget.style.bottom = '-1px';
+              } else {
+                widget.style.top = '-1px';
+              }
+              widget.style.height = '3px';
+              widget.style.backgroundColor = 'var(--mui-palette-primary-main, #1976d2)';
+              return widget;
+            }));
+          });
+        } else {
+          var cellsInColumn = getColumnCells(editor, newIndex, tableHandleView.state.blockPos);
+          cellsInColumn.cells.forEach(function (cell) {
+            var cellNode = cell.node;
+            if (!cellNode) {
+              return;
+            }
+            // Creates a decoration at the start or end of each cell,
+            // depending on whether the new index is before or after the
+            // original index.
+            var decorationPos = cell.pos + (newIndex > originalIndex ? cellNode.nodeSize - 2 : 2);
+            decorations.push(Decoration.widget(decorationPos, function () {
+              var widget = document.createElement('div');
+              widget.className = 'tiptap-table-dropcursor';
+              widget.style.position = 'absolute';
+              widget.style.top = '0';
+              widget.style.bottom = '0';
+              widget.style.zIndex = '20';
+              widget.style.pointerEvents = 'none';
+              // This is only necessary because the drop indicator's width
+              // is an even number of pixels, whereas the border between
+              // table cells is an odd number of pixels. So this makes the
+              // positioning slightly more consistent regardless of where
+              // the column is being dropped.
+              if (newIndex > originalIndex) {
+                widget.style.right = '-1px';
+              } else {
+                widget.style.left = '-1px';
+              }
+              widget.style.width = '3px';
+              widget.style.backgroundColor = 'var(--mui-palette-primary-main, #1976d2)';
+              return widget;
+            }));
+          });
+        }
+        return DecorationSet.create(state.doc, decorations);
+      }
+    }
+  });
+}
+
+/**
+ * Shared drag start handler for table rows and columns
+ */
+var tableDragStart = function tableDragStart(orientation, event) {
+  var _tableHandleView;
+  // If state doesn't exist, try to recover from DOM or data attributes
+  if (!((_tableHandleView = tableHandleView) !== null && _tableHandleView !== void 0 && _tableHandleView.state)) {
+    var _tableHandleView2, _tableHandleView3;
+    var handleElement = event.currentTarget;
+
+    // Try to recover from data attributes first (set by React component)
+    var dataIndex = handleElement.dataset.tableIndex;
+    var dataTablePos = handleElement.dataset.tablePos;
+    var dataTableId = handleElement.dataset.tableId;
+    if (dataIndex && dataTablePos && tableHandleView) {
+      var _index = parseInt(dataIndex, 10);
+      var _blockPos = parseInt(dataTablePos, 10);
+      if (!isNaN(_index) && !isNaN(_blockPos)) {
+        // Try to find the table node
+        var tableNode = tableHandleView.editor.state.doc.nodeAt(_blockPos);
+        if (tableNode && isTableNode(tableNode)) {
+          var tableWrapper = safeClosest(handleElement, '.tableWrapper');
+          var tbody = tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.querySelector('tbody');
+          if (tbody) {
+            var tableRect = tbody.getBoundingClientRect();
+
+            // Create minimal state for drag operation
+            var recoveredState = {
+              show: true,
+              showAddOrRemoveRowsButton: false,
+              showAddOrRemoveColumnsButton: false,
+              referencePosTable: tableRect,
+              block: tableNode,
+              blockPos: _blockPos,
+              colIndex: orientation === 'col' ? _index : undefined,
+              rowIndex: orientation === 'row' ? _index : undefined,
+              referencePosCell: undefined,
+              widgetContainer: undefined
+            };
+            tableHandleView.state = recoveredState;
+          }
+        }
+      }
+    }
+
+    // If still no state, try to recover from DOM
+    if (!((_tableHandleView2 = tableHandleView) !== null && _tableHandleView2 !== void 0 && _tableHandleView2.state)) {
+      var _tableWrapper = safeClosest(handleElement, '.tableWrapper');
+      if (!_tableWrapper || !tableHandleView) {
+        // Can't recover - cancel drag silently
+        if (event.dataTransfer) {
+          event.dataTransfer.effectAllowed = 'none';
+        }
+        return;
+      }
+
+      // Try to recover table info from DOM
+      var tableInfo = getTableFromDOM(_tableWrapper, tableHandleView.editor);
+      if (!tableInfo) {
+        if (event.dataTransfer) {
+          event.dataTransfer.effectAllowed = 'none';
+        }
+        return;
+      }
+
+      // Recover basic state from DOM
+      var _tbody3 = _tableWrapper.querySelector('tbody');
+      if (!_tbody3) {
+        if (event.dataTransfer) {
+          event.dataTransfer.effectAllowed = 'none';
+        }
+        return;
+      }
+
+      // Try to determine index from handle position
+      // This is a fallback - ideally state should exist
+      var _tableRect = _tbody3.getBoundingClientRect();
+      var handleRect = handleElement.getBoundingClientRect();
+
+      // Approximate index based on handle position
+      // This is not perfect but better than throwing an error
+      var approximateIndex = 0;
+      if (orientation === 'row') {
+        var rowHeight = _tableRect.height / tableInfo.node.content.childCount;
+        approximateIndex = Math.floor((handleRect.top - _tableRect.top) / rowHeight);
+      } else {
+        var _tableInfo$node$conte5, _tableInfo$node$conte6;
+        var colWidth = _tableRect.width / ((_tableInfo$node$conte5 = (_tableInfo$node$conte6 = tableInfo.node.content.firstChild) === null || _tableInfo$node$conte6 === void 0 ? void 0 : _tableInfo$node$conte6.content.childCount) !== null && _tableInfo$node$conte5 !== void 0 ? _tableInfo$node$conte5 : 1);
+        approximateIndex = Math.floor((handleRect.left - _tableRect.left) / colWidth);
+      }
+
+      // Create minimal state for drag operation
+      var _recoveredState = {
+        show: true,
+        showAddOrRemoveRowsButton: false,
+        showAddOrRemoveColumnsButton: false,
+        referencePosTable: _tableRect,
+        block: tableInfo.node,
+        blockPos: tableInfo.pos,
+        colIndex: orientation === 'col' ? approximateIndex : undefined,
+        rowIndex: orientation === 'row' ? approximateIndex : undefined,
+        referencePosCell: undefined,
+        widgetContainer: undefined
+      };
+      tableHandleView.state = _recoveredState;
+    }
+
+    // Final check - if still no state, cancel drag
+    if (!((_tableHandleView3 = tableHandleView) !== null && _tableHandleView3 !== void 0 && _tableHandleView3.state)) {
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = 'none';
+      }
+      return;
+    }
+  }
+  var _tableHandleView4 = tableHandleView,
+    state = _tableHandleView4.state,
+    editor = _tableHandleView4.editor;
+  var index = orientation === 'col' ? state.colIndex : state.rowIndex;
+  if (index === undefined) {
+    // Can't determine index - cancel drag silently
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'none';
+    }
+    return;
+  }
+  var blockPos = state.blockPos,
+    referencePosCell = state.referencePosCell;
+  var mousePos = orientation === 'col' ? event.clientX : event.clientY;
+
+  // Clear cell selection to prevent table reference collapse
+  if (editor.state.selection instanceof CellSelection) {
+    var safeSel = TextSelection.near(editor.state.doc.resolve(blockPos), 1);
+    editor.view.dispatch(editor.state.tr.setSelection(safeSel));
+  }
+  var dragImage = createTableDragImage(editor, orientation, index, blockPos);
+
+  // Configure drag image
+  if (event.dataTransfer) {
+    var _handleRect = event.currentTarget.getBoundingClientRect();
+    var offset = orientation === 'col' ? {
+      x: _handleRect.width / 2,
+      y: 0
+    } : {
+      x: 0,
+      y: _handleRect.height / 2
+    };
+    event.dataTransfer.effectAllowed = orientation === 'col' ? 'move' : 'copyMove';
+    event.dataTransfer.setDragImage(dragImage, offset.x, offset.y);
+  }
+
+  // Cleanup drag image
+  var cleanup = function cleanup() {
+    var _dragImage$parentNode;
+    return (_dragImage$parentNode = dragImage.parentNode) === null || _dragImage$parentNode === void 0 ? void 0 : _dragImage$parentNode.removeChild(dragImage);
+  };
+  document.addEventListener('drop', cleanup, {
+    once: true
+  });
+  document.addEventListener('dragend', cleanup, {
+    once: true
+  });
+  var initialOffset = referencePosCell ? (orientation === 'col' ? referencePosCell.left : referencePosCell.top) - mousePos : 0;
+
+  // Save original cell size to preserve it during drag
+  var originalCellSize = referencePosCell ? {
+    width: referencePosCell.width,
+    height: referencePosCell.height
+  } : undefined;
+
+  // Update dragging state
+  tableHandleView.state = _objectSpread(_objectSpread({}, state), {}, {
+    draggingState: {
+      draggedCellOrientation: orientation,
+      originalIndex: index,
+      mousePos: mousePos,
+      initialOffset: initialOffset,
+      originalCellSize: originalCellSize
+    }
+  });
+  tableHandleView.emitUpdate();
+  editor.view.dispatch(editor.state.tr.setMeta(tableHandlePluginKey, true));
+};
+
+/**
+ * Callback for column drag handle
+ */
+export var colDragStart = function colDragStart(event) {
+  return tableDragStart('col', _objectSpread(_objectSpread({}, event), {}, {
+    clientY: 0
+  }));
+};
+
+/**
+ * Callback for row drag handle
+ */
+export var rowDragStart = function rowDragStart(event) {
+  return tableDragStart('row', _objectSpread(_objectSpread({}, event), {}, {
+    clientX: 0
+  }));
+};
+
+/**
+ * Drag end cleanup
+ */
+export var dragEnd = function dragEnd() {
+  if (!tableHandleView || tableHandleView.state === undefined) {
+    return;
+  }
+  tableHandleView.state = _objectSpread(_objectSpread({}, tableHandleView.state), {}, {
+    draggingState: undefined
+  });
+  tableHandleView.emitUpdate();
+  var editor = tableHandleView.editor;
+  editor.view.dispatch(editor.state.tr.setMeta(tableHandlePluginKey, null));
+};