@ctzhian/tiptap 1.13.9 → 2.0.0

package/dist/extension/component/Table/ContextMenu.js

@@ -1,186 +0,0 @@
-import { Box, MenuItem, MenuList, Stack } from '@mui/material';
-import React from 'react';
-import { DeleteColumnIcon, DeleteLineIcon, DeleteRowIcon, InsertColumnLeftIcon, InsertColumnRightIcon, InsertRowBottomIcon, InsertRowTopIcon, LayoutLeft2LineIcon, LayoutTop2LineIcon, MergeCellsHorizontalIcon, SplitCellsHorizontalIcon } from "../../../component/Icons";
-var TableContextMenu = function TableContextMenu(_ref) {
-  var editor = _ref.editor,
-    onClose = _ref.onClose,
-    hasMultipleSelection = _ref.hasMultipleSelection,
-    hasMultipleCellElements = _ref.hasMultipleCellElements,
-    onCommandExecute = _ref.onCommandExecute;
-  var handleCommand = function handleCommand(command) {
-    command();
-    onCommandExecute === null || onCommandExecute === void 0 || onCommandExecute();
-    onClose();
-  };
-  var menuItems = [{
-    label: '在左侧插入列',
-    icon: /*#__PURE__*/React.createElement(InsertColumnLeftIcon, {
-      sx: {
-        fontSize: '1rem'
-      }
-    }),
-    action: function action() {
-      return handleCommand(function () {
-        return editor.chain().focus().addColumnBefore().run();
-      });
-    },
-    show: true
-  }, {
-    label: '在右侧插入列',
-    icon: /*#__PURE__*/React.createElement(InsertColumnRightIcon, {
-      sx: {
-        fontSize: '1rem'
-      }
-    }),
-    action: function action() {
-      return handleCommand(function () {
-        return editor.chain().focus().addColumnAfter().run();
-      });
-    },
-    show: true
-  }, {
-    label: '在上方插入行',
-    icon: /*#__PURE__*/React.createElement(InsertRowTopIcon, {
-      sx: {
-        fontSize: '1rem'
-      }
-    }),
-    action: function action() {
-      return handleCommand(function () {
-        return editor.chain().focus().addRowBefore().run();
-      });
-    },
-    show: true
-  }, {
-    label: '在下方插入行',
-    icon: /*#__PURE__*/React.createElement(InsertRowBottomIcon, {
-      sx: {
-        fontSize: '1rem'
-      }
-    }),
-    action: function action() {
-      return handleCommand(function () {
-        return editor.chain().focus().addRowAfter().run();
-      });
-    },
-    show: true
-  }, {
-    label: '合并单元格',
-    icon: /*#__PURE__*/React.createElement(MergeCellsHorizontalIcon, {
-      sx: {
-        fontSize: '1rem'
-      }
-    }),
-    action: function action() {
-      return handleCommand(function () {
-        return editor.chain().focus().mergeCells().run();
-      });
-    },
-    show: hasMultipleSelection
-  }, {
-    label: '拆分单元格',
-    icon: /*#__PURE__*/React.createElement(SplitCellsHorizontalIcon, {
-      sx: {
-        fontSize: '1rem'
-      }
-    }),
-    action: function action() {
-      return handleCommand(function () {
-        return editor.chain().focus().splitCell().run();
-      });
-    },
-    show: !hasMultipleSelection && hasMultipleCellElements
-  }, {
-    label: '切换表头行',
-    icon: /*#__PURE__*/React.createElement(LayoutTop2LineIcon, {
-      sx: {
-        fontSize: '1rem'
-      }
-    }),
-    action: function action() {
-      return handleCommand(function () {
-        return editor.chain().focus().toggleHeaderRow().run();
-      });
-    },
-    show: true
-  }, {
-    label: '切换表头列',
-    icon: /*#__PURE__*/React.createElement(LayoutLeft2LineIcon, {
-      sx: {
-        fontSize: '1rem'
-      }
-    }),
-    action: function action() {
-      return handleCommand(function () {
-        return editor.chain().focus().toggleHeaderColumn().run();
-      });
-    },
-    show: true
-  }, {
-    label: '删除当前列',
-    icon: /*#__PURE__*/React.createElement(DeleteColumnIcon, {
-      sx: {
-        fontSize: '1rem',
-        color: 'error.main'
-      }
-    }),
-    action: function action() {
-      return handleCommand(function () {
-        return editor.chain().focus().deleteColumn().run();
-      });
-    },
-    show: true
-  }, {
-    label: '删除当前行',
-    icon: /*#__PURE__*/React.createElement(DeleteRowIcon, {
-      sx: {
-        fontSize: '1rem',
-        color: 'error.main'
-      }
-    }),
-    action: function action() {
-      return handleCommand(function () {
-        return editor.chain().focus().deleteRow().run();
-      });
-    },
-    show: true
-  }, {
-    label: '删除表格',
-    icon: /*#__PURE__*/React.createElement(DeleteLineIcon, {
-      sx: {
-        fontSize: '1rem',
-        color: 'error.main'
-      }
-    }),
-    action: function action() {
-      return handleCommand(function () {
-        return editor.chain().focus().deleteTable().run();
-      });
-    },
-    show: true
-  }];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuList, {
-    sx: {
-      p: 0.5
-    }
-  }, menuItems.map(function (item, index) {
-    return item.show ? /*#__PURE__*/React.createElement(MenuItem, {
-      key: index,
-      onClick: item.action,
-      sx: {
-        py: 1,
-        px: 2,
-        fontSize: '0.875rem',
-        borderRadius: 'var(--mui-shape-borderRadius)',
-        '&:hover': {
-          backgroundColor: 'action.hover'
-        }
-      }
-    }, /*#__PURE__*/React.createElement(Stack, {
-      direction: "row",
-      alignItems: "center",
-      gap: 1.5
-    }, item.icon, /*#__PURE__*/React.createElement(Box, null, item.label))) : null;
-  })));
-};
-export default TableContextMenu;

package/dist/extension/component/Table/TableContextMenuPlugin.d.ts

@@ -1,9 +0,0 @@
-import { Editor } from '@tiptap/core';
-import { Plugin, PluginKey } from '@tiptap/pm/state';
-export interface TableContextMenuPluginState {
-    show: boolean;
-    anchorEl: HTMLElement | null;
-    hasMultipleSelection: boolean;
-}
-export declare const TableContextMenuPluginKey: PluginKey<TableContextMenuPluginState>;
-export declare const createTableContextMenuPlugin: (editor: Editor) => Plugin<TableContextMenuPluginState>;

package/dist/extension/component/Table/TableContextMenuPlugin.js

@@ -1,336 +0,0 @@
-import { Plugin, PluginKey } from '@tiptap/pm/state';
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { FloatingPopover } from "../../../component/FloatingPopover";
-import TableContextMenu from "./ContextMenu";
-var hasMultipleCellSelection = function hasMultipleCellSelection(editor) {
-  var selection = editor.state.selection;
-  // console.log('1️⃣ selection', selection)
-  // console.log('2️⃣ cellSelection.constructor.name', selection.constructor.name)
-  // console.log('2️⃣ cellSelection.ranges', selection.ranges)
-  if (selection.constructor.name === '_CellSelection') {
-    var cellSelection = selection;
-    // console.log('2️⃣ cellSelection.$anchorCell', cellSelection.$anchorCell)
-    // console.log('2️⃣ cellSelection.$headCell', cellSelection.$headCell)
-    if (cellSelection.ranges && cellSelection.ranges.length > 1) {
-      return true;
-    }
-    if (cellSelection.$anchorCell && cellSelection.$headCell) {
-      return cellSelection.$anchorCell.pos !== cellSelection.$headCell.pos;
-    }
-  }
-  return false;
-  // const selectionAny = selection as any;
-  // const isColSelection = selectionAny.isColSelection;
-  // const isRowSelection = selectionAny.isRowSelection;
-  // // console.log('3️⃣ selectionAny.isColSelection', isColSelection)
-  // // console.log('3️⃣ selectionAny.isRowSelection', isRowSelection)
-  // if (isColSelection || isRowSelection) {
-  //   return true;
-  // }
-  // console.log('3️⃣ selection.from', selection.from)
-  // console.log('3️⃣ selection.to', selection.to)
-  // if (selection.from !== selection.to) {
-  //   const resolvedFrom = editor.state.doc.resolve(selection.from);
-  //   const resolvedTo = editor.state.doc.resolve(selection.to);
-  //   console.log('4️⃣ resolvedFrom.nodeAfter', resolvedFrom.nodeAfter)
-  //   console.log('4️⃣ resolvedTo.nodeBefore', resolvedTo.nodeBefore)
-  //   if (resolvedFrom.nodeAfter && resolvedTo.nodeBefore) {
-  //     const fromCell = resolvedFrom.node();
-  //     const toCell = resolvedTo.node();
-  //     console.log('5️⃣ fromCell', fromCell)
-  //     console.log('5️⃣ toCell', toCell)
-  //     if (fromCell !== toCell && (fromCell.type.name === 'tableCell' || fromCell.type.name === 'tableHeader')) {
-  //       return true;
-  //     }
-  //   }
-  // }
-  // return false;
-};
-var isClickedCellInSelection = function isClickedCellInSelection(editor, clickedElement) {
-  var selection = editor.state.selection;
-  // console.log('6️⃣ selection', selection)
-  // console.log('6️⃣ selection.constructor.name', selection.constructor.name)
-  if (selection.constructor.name !== '_CellSelection') {
-    return false;
-  }
-  try {
-    var editorView = editor.view;
-    var domPosition = null;
-    // console.log('7️⃣ clickedElement', clickedElement)
-    if (clickedElement.tagName === 'TD' || clickedElement.tagName === 'TH') {
-      domPosition = editorView.posAtDOM(clickedElement, 0);
-      // console.log('7️⃣ domPosition - 1', domPosition)
-    } else {
-      var parentCell = clickedElement.closest('td, th');
-      // console.log('7️⃣ parentCell', parentCell)
-      if (parentCell) {
-        domPosition = editorView.posAtDOM(parentCell, 0);
-        // console.log('7️⃣ domPosition - 2', domPosition)
-      }
-    }
-    if (domPosition === null || domPosition === undefined || domPosition < 0) {
-      return false;
-    }
-    var cellSelection = selection;
-    // console.log('8️⃣ cellSelection.ranges', cellSelection.ranges)
-    var ranges = cellSelection.ranges.map(function (it) {
-      return it.$from.pos;
-    });
-    // console.log('8️⃣ ranges', ranges)
-    return ranges.includes(domPosition);
-  } catch (error) {
-    console.warn('Error checking if clicked cell is in selection:', error);
-    return false;
-  }
-};
-var saveCurrentSelection = function saveCurrentSelection(editor) {
-  // console.log('9️⃣ selection', editor.state.selection, 'doc', editor.state.doc)
-  return {
-    selection: editor.state.selection,
-    doc: editor.state.doc
-  };
-};
-var restoreSelection = function restoreSelection(editor, savedState) {
-  // console.log('0️⃣ savedState', savedState)
-  if (savedState && savedState.selection) {
-    try {
-      var tr = editor.state.tr.setSelection(savedState.selection);
-      editor.view.dispatch(tr);
-      editor.view.updateState(editor.view.state);
-      requestAnimationFrame(function () {
-        editor.view.dom.dispatchEvent(new Event('selectionchange', {
-          bubbles: true
-        }));
-      });
-    } catch (error) {
-      console.warn('Failed to restore table cell selection:', error);
-    }
-  }
-};
-var isInTableCell = function isInTableCell(element) {
-  var cell = element.closest('td, th');
-  // console.log('🍎 isInTableCell cell', cell)
-  if (!cell) return false;
-  var editorElement = cell.closest('.tiptap');
-  // console.log('🍎 isInTableCell editorElement', editorElement)
-  return !!editorElement;
-};
-var getTableCell = function getTableCell(element) {
-  var cell = element.closest('td, th');
-  // console.log('🍎 getTableCell cell', cell)
-  if (!cell) return null;
-  var editorElement = cell.closest('.tiptap');
-  // console.log('🍎 getTableCell editorElement', editorElement)
-  return editorElement ? cell : null;
-};
-export var TableContextMenuPluginKey = new PluginKey('tableContextMenu');
-export var createTableContextMenuPlugin = function createTableContextMenuPlugin(editor) {
-  var menuContainer = null;
-  var root = null;
-  var savedSelection = null;
-  var commandExecuted = false;
-  var preventSelectionLoss = false;
-  var createMenuContainer = function createMenuContainer() {
-    // console.log('🍊 createMenuContainer')
-    if (!menuContainer) {
-      menuContainer = document.createElement('div');
-      menuContainer.style.position = 'fixed';
-      menuContainer.style.zIndex = '9999';
-      menuContainer.style.pointerEvents = 'auto';
-      document.body.appendChild(menuContainer);
-      root = createRoot(menuContainer);
-    }
-    return {
-      menuContainer: menuContainer,
-      root: root
-    };
-  };
-  var destroyMenuContainer = function destroyMenuContainer() {
-    // console.log('🍊 destroyMenuContainer', root, 'menuContainer', menuContainer)
-    if (root) {
-      // 保存当前的 root 引用，避免异步执行时访问 null
-      var currentRoot = root;
-      root = null;
-      // 异步卸载以避免在 React 渲染期间卸载根节点
-      queueMicrotask(function () {
-        currentRoot.unmount();
-      });
-    }
-    if (menuContainer) {
-      // 保存当前的 menuContainer 引用
-      var currentContainer = menuContainer;
-      menuContainer = null;
-      queueMicrotask(function () {
-        if (currentContainer && currentContainer.parentNode) {
-          document.body.removeChild(currentContainer);
-        }
-      });
-    }
-  };
-  var hideContextMenu = function hideContextMenu() {
-    // console.log('🍊 hideContextMenu', root, 'savedSelection', savedSelection, 'commandExecuted', commandExecuted, 'preventSelectionLoss', preventSelectionLoss)
-    if (root) {
-      root.render(null);
-    }
-    if (savedSelection && !commandExecuted && !preventSelectionLoss) {
-      restoreSelection(editor, savedSelection);
-    }
-    savedSelection = null;
-    commandExecuted = false;
-    preventSelectionLoss = false;
-  };
-  var showContextMenu = function showContextMenu(anchorEl, hasMultipleSelection, hasMultipleCellElements) {
-    // console.log('🍊 showContextMenu', anchorEl, 'hasMultipleSelection', hasMultipleSelection)
-    var _createMenuContainer = createMenuContainer(),
-      root = _createMenuContainer.root;
-    commandExecuted = false;
-    var handleClose = function handleClose() {
-      hideContextMenu();
-    };
-    var handleCommandExecute = function handleCommandExecute() {
-      commandExecuted = true;
-      savedSelection = null;
-    };
-    root.render( /*#__PURE__*/React.createElement(FloatingPopover, {
-      open: !!anchorEl,
-      anchorEl: anchorEl,
-      onClose: handleClose,
-      placement: "bottom"
-    }, /*#__PURE__*/React.createElement(TableContextMenu, {
-      editor: editor,
-      hasMultipleSelection: hasMultipleSelection,
-      hasMultipleCellElements: hasMultipleCellElements,
-      onClose: handleClose,
-      onCommandExecute: handleCommandExecute
-    })));
-  };
-  return new Plugin({
-    key: TableContextMenuPluginKey,
-    state: {
-      init: function init() {
-        // console.log('🍊 init')
-        return {
-          show: false,
-          anchorEl: null,
-          hasMultipleSelection: false
-        };
-      },
-      apply: function apply(tr, oldState) {
-        // console.log('🍊 apply', oldState)
-        return oldState;
-      }
-    },
-    props: {
-      handleDOMEvents: {
-        contextmenu: function contextmenu(view, event) {
-          var target = event.target;
-          // console.log('🍊 contextmenu', target)
-          if (!isInTableCell(target)) {
-            // console.log('🍊 contextmenu not in table cell')
-            hideContextMenu();
-            preventSelectionLoss = false;
-            return false;
-          }
-          event.preventDefault();
-          event.stopPropagation();
-          var cellElement = getTableCell(target);
-          console.log('🍊 cellElement', cellElement === null || cellElement === void 0 ? void 0 : cellElement.getAttribute('colspan'), cellElement === null || cellElement === void 0 ? void 0 : cellElement.getAttribute('rowspan'));
-          if (!cellElement) {
-            preventSelectionLoss = false;
-            return false;
-          }
-          if (preventSelectionLoss && savedSelection) {
-            // console.log('🍊 contextmenu preventSelectionLoss and savedSelection', preventSelectionLoss, savedSelection)
-            restoreSelection(editor, savedSelection);
-            setTimeout(function () {
-              var selectedCells = document.querySelectorAll('.tiptap .selectedCell');
-              console.info('✅ Selected cells after restore:', selectedCells.length);
-            }, 50);
-          }
-          var hasMultipleSelection = savedSelection ? true : hasMultipleCellSelection(editor);
-          var hasMultipleCellElements = (cellElement === null || cellElement === void 0 ? void 0 : cellElement.getAttribute('colspan')) && parseInt(cellElement.getAttribute('colspan') || '1') > 1 || (cellElement === null || cellElement === void 0 ? void 0 : cellElement.getAttribute('rowspan')) && parseInt(cellElement.getAttribute('rowspan') || '1') > 1 || false;
-          // console.log('🍊 contextmenu hasMultipleSelection', hasMultipleSelection)
-          showContextMenu(cellElement, hasMultipleSelection, hasMultipleCellElements);
-          preventSelectionLoss = false;
-          return true;
-        },
-        mousedown: function mousedown(view, event) {
-          // console.log('🍊 mousedown')
-          var target = event.target;
-          // console.log('🍊 mousedown target', target)
-          if (event.button === 2) {
-            if (isInTableCell(target)) {
-              var cellElement = getTableCell(target);
-              if (cellElement) {
-                var currentHasMultipleSelection = hasMultipleCellSelection(editor);
-                if (currentHasMultipleSelection) {
-                  var isInSelection = isClickedCellInSelection(editor, cellElement);
-                  if (isInSelection) {
-                    savedSelection = saveCurrentSelection(editor);
-                    preventSelectionLoss = true;
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return true;
-                  } else {
-                    console.info('❌ Right-click outside selection, allowing normal behavior');
-                  }
-                }
-              }
-            }
-          } else {
-            if (!target.closest('[role="menu"]') && !target.closest('.MuiPaper-root')) {
-              hideContextMenu();
-            }
-          }
-          return false;
-        },
-        mouseup: function mouseup(view, event) {
-          // console.log('🍊 mouseup')
-          var target = event.target;
-          if (isInTableCell(target)) {
-            var cellElement = getTableCell(target);
-            if (cellElement) {
-              var currentHasMultipleSelection = hasMultipleCellSelection(editor);
-              if (currentHasMultipleSelection) {
-                var _window$getSelection;
-                // console.log('🍊🍊 mouseup current selection', window.getSelection()?.toString().length, window.getSelection()?.toString())
-                (_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 || _window$getSelection.removeAllRanges();
-                // console.log('🍊🍊 mouseup current selection', window.getSelection()?.toString().length, window.getSelection()?.toString())
-              }
-            }
-          }
-          if (event.button === 2 && preventSelectionLoss) {
-            // console.log('🍊 mouseup preventSelectionLoss', preventSelectionLoss)
-            setTimeout(function () {
-              if (preventSelectionLoss) {
-                preventSelectionLoss = false;
-                if (savedSelection && !commandExecuted) {
-                  restoreSelection(editor, savedSelection);
-                  savedSelection = null;
-                }
-              }
-            }, 10);
-          }
-          return false;
-        },
-        keydown: function keydown(view, event) {
-          // console.log('🍊 keydown')
-          if (event.key === 'Escape') {
-            hideContextMenu();
-            return true;
-          }
-          return false;
-        }
-      }
-    },
-    view: function view() {
-      return {
-        destroy: function destroy() {
-          // console.log('🍊 destroy')
-          destroyMenuContainer();
-        }
-      };
-    }
-  });
-};

package/dist/extension/component/Table/index.d.ts

@@ -1,2 +0,0 @@
-export { default as TableContextMenu } from './ContextMenu';
-export { createTableContextMenuPlugin, TableContextMenuPluginKey, type TableContextMenuPluginState } from './TableContextMenuPlugin';

package/dist/extension/component/Table/index.js

@@ -1,2 +0,0 @@
-export { default as TableContextMenu } from "./ContextMenu";
-export { createTableContextMenuPlugin, TableContextMenuPluginKey } from "./TableContextMenuPlugin";