@ctzhian/tiptap 0.4.0

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

@@ -0,0 +1,228 @@
+import { Box, Divider, MenuItem, MenuList, Stack } from '@mui/material';
+import { ToolbarItem } from "../../../component/Toolbar";
+import React from 'react';
+import { BoldIcon, DeleteColumnIcon, DeleteLineIcon, DeleteRowIcon, InsertColumnLeftIcon, InsertColumnRightIcon, InsertRowBottomIcon, InsertRowTopIcon, ItalicIcon, LayoutLeft2LineIcon, LayoutTop2LineIcon, MergeCellsHorizontalIcon, SplitCellsHorizontalIcon, StrikethroughIcon, UnderlineIcon } from "../../../component/Icons";
+var TableContextMenu = function TableContextMenu(_ref) {
+  var editor = _ref.editor,
+    onClose = _ref.onClose,
+    hasMultipleSelection = _ref.hasMultipleSelection,
+    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: true
+  }, {
+    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(Stack, {
+    direction: 'row',
+    alignItems: 'center',
+    sx: {
+      p: 0.5
+    }
+  }, /*#__PURE__*/React.createElement(ToolbarItem, {
+    onClick: function onClick() {
+      return editor.chain().focus().toggleBold().run();
+    },
+    icon: /*#__PURE__*/React.createElement(BoldIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    })
+  }), /*#__PURE__*/React.createElement(ToolbarItem, {
+    onClick: function onClick() {
+      return editor.chain().focus().toggleItalic().run();
+    },
+    icon: /*#__PURE__*/React.createElement(ItalicIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    })
+  }), /*#__PURE__*/React.createElement(ToolbarItem, {
+    onClick: function onClick() {
+      return editor.chain().focus().toggleUnderline().run();
+    },
+    icon: /*#__PURE__*/React.createElement(UnderlineIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    })
+  }), /*#__PURE__*/React.createElement(ToolbarItem, {
+    onClick: function onClick() {
+      return editor.chain().focus().toggleStrike().run();
+    },
+    icon: /*#__PURE__*/React.createElement(StrikethroughIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    })
+  })), /*#__PURE__*/React.createElement(Divider, 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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,272 @@
+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;
+  if (selection.constructor.name === 'CellSelection') {
+    var cellSelection = selection;
+    if (cellSelection.ranges && cellSelection.ranges.length > 1) {
+      return true;
+    }
+    if (cellSelection.$anchorCell && cellSelection.$headCell) {
+      return cellSelection.$anchorCell.pos !== cellSelection.$headCell.pos;
+    }
+  }
+  var selectionAny = selection;
+  if (selectionAny.isColSelection || selectionAny.isRowSelection) {
+    return true;
+  }
+  if (selection.from !== selection.to) {
+    var resolvedFrom = editor.state.doc.resolve(selection.from);
+    var resolvedTo = editor.state.doc.resolve(selection.to);
+    if (resolvedFrom.nodeAfter && resolvedTo.nodeBefore) {
+      var fromCell = resolvedFrom.node();
+      var toCell = resolvedTo.node();
+      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;
+  if (selection.constructor.name !== '_CellSelection') {
+    return false;
+  }
+  try {
+    var editorView = editor.view;
+    var domPosition = null;
+    if (clickedElement.tagName === 'TD' || clickedElement.tagName === 'TH') {
+      domPosition = editorView.posAtDOM(clickedElement, 0);
+    } else {
+      var parentCell = clickedElement.closest('td, th');
+      if (parentCell) {
+        domPosition = editorView.posAtDOM(parentCell, 0);
+      }
+    }
+    if (domPosition === null || domPosition === undefined || domPosition < 0) {
+      return false;
+    }
+    var cellSelection = selection;
+    // 使用范围判断不精确，直接使用ranges判断
+    var ranges = cellSelection.ranges.map(function (it) {
+      return it.$from.pos;
+    });
+    return ranges.includes(domPosition);
+    // if (cellSelection.$anchorCell && cellSelection.$headCell) {
+    //   const anchorPos = cellSelection.$anchorCell.pos;
+    //   const headPos = cellSelection.$headCell.pos;
+    //   const minPos = Math.min(anchorPos, headPos);
+    //   const maxPos = Math.max(anchorPos, headPos);
+    //   return domPosition >= minPos && domPosition <= maxPos;
+    // }
+    // return domPosition >= selection.from && domPosition <= selection.to;
+  } catch (error) {
+    console.warn('Error checking if clicked cell is in selection:', error);
+    return false;
+  }
+};
+var saveCurrentSelection = function saveCurrentSelection(editor) {
+  return {
+    selection: editor.state.selection,
+    doc: editor.state.doc
+  };
+};
+var restoreSelection = function restoreSelection(editor, 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');
+  if (!cell) return false;
+  var editorElement = cell.closest('.tiptap');
+  return !!editorElement;
+};
+var getTableCell = function getTableCell(element) {
+  var cell = element.closest('td, th');
+  if (!cell) return null;
+  var editorElement = cell.closest('.tiptap');
+  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() {
+    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() {
+    if (root) {
+      root.unmount();
+      root = null;
+    }
+    if (menuContainer) {
+      document.body.removeChild(menuContainer);
+      menuContainer = null;
+    }
+  };
+  var hideContextMenu = function hideContextMenu() {
+    if (root) {
+      root.render(null);
+    }
+    if (savedSelection && !commandExecuted && !preventSelectionLoss) {
+      restoreSelection(editor, savedSelection);
+    }
+    savedSelection = null;
+    commandExecuted = false;
+    preventSelectionLoss = false;
+  };
+  var showContextMenu = function showContextMenu(anchorEl, 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,
+      onClose: handleClose,
+      onCommandExecute: handleCommandExecute
+    })));
+  };
+  return new Plugin({
+    key: TableContextMenuPluginKey,
+    state: {
+      init: function init() {
+        return {
+          show: false,
+          anchorEl: null,
+          hasMultipleSelection: false
+        };
+      },
+      apply: function apply(tr, oldState) {
+        return oldState;
+      }
+    },
+    props: {
+      handleDOMEvents: {
+        contextmenu: function contextmenu(view, event) {
+          var target = event.target;
+          if (!isInTableCell(target)) {
+            hideContextMenu();
+            preventSelectionLoss = false;
+            return false;
+          }
+          event.preventDefault();
+          event.stopPropagation();
+          var cellElement = getTableCell(target);
+          if (!cellElement) {
+            preventSelectionLoss = false;
+            return false;
+          }
+          if (preventSelectionLoss && savedSelection) {
+            restoreSelection(editor, savedSelection);
+            setTimeout(function () {
+              var selectedCells = document.querySelectorAll('.tiptap .selectedCell');
+              console.log('✅ Selected cells after restore:', selectedCells.length);
+            }, 50);
+          }
+          var hasMultipleSelection = savedSelection ? true : hasMultipleCellSelection(editor);
+          showContextMenu(cellElement, hasMultipleSelection);
+          preventSelectionLoss = false;
+          return true;
+        },
+        mousedown: function mousedown(view, event) {
+          var target = event.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.log('❌ 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) {
+          if (event.button === 2 && preventSelectionLoss) {
+            setTimeout(function () {
+              if (preventSelectionLoss) {
+                preventSelectionLoss = false;
+                if (savedSelection && !commandExecuted) {
+                  restoreSelection(editor, savedSelection);
+                  savedSelection = null;
+                }
+              }
+            }, 10);
+          }
+          return false;
+        },
+        keydown: function keydown(view, event) {
+          if (event.key === 'Escape') {
+            hideContextMenu();
+            return true;
+          }
+          return false;
+        }
+      }
+    },
+    view: function view() {
+      return {
+        destroy: function destroy() {
+          destroyMenuContainer();
+        }
+      };
+    }
+  });
+};

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { NodeViewProps } from '@tiptap/react';
+import React from 'react';
+export interface UploadProgressAttributes {
+    fileName: string;
+    fileType: 'image' | 'video' | 'other';
+    progress: number;
+    tempId: string;
+}
+declare const UploadProgressView: React.FC<NodeViewProps>;
+export default UploadProgressView;

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

@@ -0,0 +1,103 @@
+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 _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 { Box, CircularProgress, Stack } from '@mui/material';
+import { NodeViewWrapper } from '@tiptap/react';
+import { AttachmentLineIcon, ImageLineIcon, MovieLineIcon } from "../../../component/Icons";
+import React from 'react';
+var UploadProgressView = function UploadProgressView(_ref) {
+  var node = _ref.node;
+  var attrs = node.attrs;
+  var getFileIcon = function getFileIcon(fileType) {
+    switch (fileType) {
+      case 'image':
+        return /*#__PURE__*/React.createElement(ImageLineIcon, {
+          sx: {
+            fontSize: '1rem'
+          }
+        });
+      case 'video':
+        return /*#__PURE__*/React.createElement(MovieLineIcon, {
+          sx: {
+            fontSize: '1rem'
+          }
+        });
+      default:
+        return /*#__PURE__*/React.createElement(AttachmentLineIcon, {
+          sx: {
+            fontSize: '1rem'
+          }
+        });
+    }
+  };
+  var getFileTypeText = function getFileTypeText(fileType) {
+    switch (fileType) {
+      case 'image':
+        return '图片';
+      case 'video':
+        return '视频';
+      default:
+        return '文件';
+    }
+  };
+  return /*#__PURE__*/React.createElement(NodeViewWrapper, {
+    className: "upload-progress-wrapper"
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: _objectSpread({
+      position: 'relative',
+      border: '1px dashed',
+      borderColor: 'divider',
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      p: 2
+    }, !attrs.progress ? {
+      cursor: 'pointer',
+      '&:hover': {
+        bgcolor: 'action.hover'
+      },
+      '&:active': {
+        bgcolor: 'action.selected'
+      }
+    } : {
+      "&::before": {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        height: '100%',
+        width: "".concat(attrs.progress * 100, "%"),
+        bgcolor: 'primary.main',
+        opacity: 0.1,
+        transition: 'width 0.3s ease'
+      }
+    }),
+    "data-temp-id": attrs.tempId
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    gap: 2
+  }, getFileIcon(attrs.fileType), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      fontSize: '0.875rem',
+      color: 'text.primary'
+    }
+  }, "\u6B63\u5728\u4E0A\u4F20", getFileTypeText(attrs.fileType), "\uFF1A", attrs.fileName)), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    gap: 1
+  }, attrs.progress < 1 && /*#__PURE__*/React.createElement(CircularProgress, {
+    size: 14
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      fontSize: '0.75rem',
+      color: 'text.secondary'
+    }
+  }, Math.round(attrs.progress * 100), "%")))));
+};
+export default UploadProgressView;

package/dist/extension/component/Video/Insert.d.ts

@@ -0,0 +1,10 @@
+import { EditorFnProps } from "../../../type";
+import React from "react";
+import { VideoAttributes } from ".";
+type InsertVideoProps = {
+    selected: boolean;
+    attrs: VideoAttributes;
+    updateAttributes: (attrs: VideoAttributes) => void;
+} & EditorFnProps;
+declare const InsertVideo: ({ selected, attrs, updateAttributes, onUpload, onError }: InsertVideoProps) => React.JSX.Element;
+export default InsertVideo;