@ctzhian/tiptap 1.13.9 → 2.0.0

package/dist/Editor/demo.js

@@ -6,7 +6,7 @@ import { Editor, EditorThemeProvider, EditorToolbar, useTiptap } from "./..";
 import { Box } from '@mui/material';
 import React from 'react';
 import "../index.css";
-var defaultContent = "#### tiptap \n[tiptap notion patch](https://tiptap.dev/docs/ui-components/templates/notion-like-editor)";
+var defaultContent = "<h6 id=\"4b8d8c4e-29dc-4674-928b-b9ded0e363ae\" data-toc-id=\"4b8d8c4e-29dc-4674-928b-b9ded0e363ae\"><span data-name=\"watch\" data-type=\"emoji\">\u231A</span> \u8868\u683C\u64CD\u4F5C</h6><div class=\"tableWrapper\"><table style=\"min-width: 400px;\"><colgroup><col style=\"min-width: 100px;\"><col style=\"min-width: 100px;\"><col style=\"min-width: 100px;\"><col style=\"min-width: 100px;\"></colgroup><tbody><tr class=\"table-row\"><th class=\"table-header\" colspan=\"1\" rowspan=\"1\"><p>1</p></th><th class=\"table-header\" colspan=\"1\" rowspan=\"1\"><p>2</p></th><th class=\"table-header\" colspan=\"1\" rowspan=\"1\"><p>3</p></th><th class=\"table-header\" colspan=\"1\" rowspan=\"1\"><p>4</p></th></tr><tr class=\"table-row\"><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p>5</p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p>6</p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p>7</p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p>8</p></td></tr><tr class=\"table-row\"><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p>9</p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p>10</p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p>11</p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p>12</p></td></tr></tbody></table></div><p></p>";
 var Reader = function Reader() {
   var handleTocUpdate = function handleTocUpdate(toc) {
     console.log('toc', toc);

package/dist/Editor/index.js

@@ -4,6 +4,10 @@ import React from 'react';
 import { PhotoProvider } from 'react-photo-view';
 import CustomBubbleMenu from "../component/CustomBubbleMenu";
 import CustomDragHandle from "../component/CustomDragHandle";
+import { TableCellHandleMenu } from "../extension/component/TableCellHandleMenu";
+import { TableExtendRowColumnButtons } from "../extension/component/TableExtendButton";
+import { TableHandle } from "../extension/component/TableHandle";
+import { TableSelectionOverlay } from "../extension/component/TableSelectionOverlay";
 
 // fix: https://github.com/ueberdosis/tiptap/issues/6785
 
@@ -63,6 +67,19 @@ var Editor = function Editor(_ref) {
     onTip: onTip
   }), /*#__PURE__*/React.createElement(EditorContent, {
     editor: editor
+  }), /*#__PURE__*/React.createElement(TableHandle, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(TableExtendRowColumnButtons, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(TableSelectionOverlay, {
+    editor: editor,
+    showResizeHandles: true,
+    cellMenu: function cellMenu(props) {
+      return /*#__PURE__*/React.createElement(TableCellHandleMenu, {
+        editor: props.editor,
+        onResizeStart: props.onResizeStart
+      });
+    }
   }));
 };
 export default Editor;

package/dist/component/CustomBubbleMenu/index.js

@@ -84,7 +84,7 @@ var CustomBubbleMenu = function CustomBubbleMenu(_ref) {
       //     return cellSelection.$anchorCell.pos !== cellSelection.$headCell.pos;
       //   }
       // }
-      if (editor.state.selection.empty || editor.isActive('image') || editor.isActive('video') || editor.isActive('audio') || editor.isActive('emoji') || editor.isActive('codeBlock') || editor.isActive('blockMath') || editor.isActive('inlineMath') || editor.isActive('blockLink') || editor.isActive('inlineLink') || editor.isActive('blockAttachment') || editor.isActive('inlineAttachment') || editor.isActive('horizontalRule') || editor.isActive('iframe') || editor.isActive('yamlFormat') || editor.isActive('flow')) {
+      if (editor.state.selection.empty || editor.isActive('image') || editor.isActive('video') || editor.isActive('audio') || editor.isActive('emoji') || editor.isActive('codeBlock') || editor.isActive('blockMath') || editor.isActive('inlineMath') || editor.isActive('blockLink') || editor.isActive('inlineLink') || editor.isActive('blockAttachment') || editor.isActive('inlineAttachment') || editor.isActive('horizontalRule') || editor.isActive('iframe') || editor.isActive('yamlFormat') || editor.isActive('flow') || editor.isActive('table')) {
         return false;
       }
       return true;

package/dist/component/CustomDragHandle/index.js

@@ -18,7 +18,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { AddLineIcon, AlignBottomIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AlignTopIcon, ArrowDownSLineIcon, AttachmentLineIcon, BrushLineIcon, DeleteLineIcon, DownloadLineIcon, DraggableIcon, EraserLineIcon, FileCopyLineIcon, FontSizeIcon, H1Icon, H2Icon, H3Icon, ImageLineIcon, IndentDecreaseIcon, IndentIncreaseIcon, Information2LineIcon, ListCheck3Icon, ListOrdered2Icon, ListUnorderedIcon, MovieLineIcon, Music2LineIcon, QuoteTextIcon, Repeat2LineIcon, ScissorsCutLineIcon, TextIcon, TextWrapIcon } from "../Icons";
-import { NODE_TYPE_LABEL, NodeTypeEnum } from "../../contants/enums";
+import { getThemeTextBgColor, getThemeTextColor, NODE_TYPE_LABEL, NodeTypeEnum } from "../../contants/enums";
 import { Box, Divider, Stack, Typography, useTheme } from '@mui/material';
 import DragHandle from '@tiptap/extension-drag-handle-react';
 import { Fragment, Slice } from '@tiptap/pm/model';
@@ -122,62 +122,6 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
     _useState8 = _slicedToArray(_useState7, 2),
     hasMarks = _useState8[0],
     setHasMarks = _useState8[1];
-  var THEME_TEXT_COLOR = [{
-    label: '默认色',
-    value: theme.palette.text.primary
-  }, {
-    label: '主题色',
-    value: theme.palette.primary.main
-  }, {
-    label: '成功色',
-    value: theme.palette.success.main
-  }, {
-    label: '警告色',
-    value: theme.palette.warning.main
-  }, {
-    label: '错误色',
-    value: theme.palette.error.main
-  }, {
-    label: '黑色',
-    value: theme.palette.common.black
-  }, {
-    label: '灰色',
-    value: theme.palette.text.disabled
-  }, {
-    label: '白色',
-    value: theme.palette.common.white
-  }];
-  var THEME_TEXT_BG_COLOR = [{
-    label: '默认背景',
-    value: theme.palette.background.paper
-  }, {
-    label: '灰色背景',
-    value: '#f8f8f7'
-  }, {
-    label: '棕色背景',
-    value: '#f4eeee'
-  }, {
-    label: '橙色背景',
-    value: '#fbecdd'
-  }, {
-    label: '黄色背景',
-    value: '#fef9c3'
-  }, {
-    label: '绿色背景',
-    value: '#dcfce7'
-  }, {
-    label: '蓝色背景',
-    value: '#e0f2fe'
-  }, {
-    label: '紫色背景',
-    value: '#f3e8ff'
-  }, {
-    label: '粉色背景',
-    value: '#fcf1f6'
-  }, {
-    label: '红色背景',
-    value: '#ffe4e6'
-  }];
   var cancelNodeType = function cancelNodeType() {
     var _current$node;
     var type = (_current$node = current.node) === null || _current$node === void 0 ? void 0 : _current$node.type.name;
@@ -557,7 +501,7 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
           }
         }, "\u6587\u5B57\u989C\u8272"),
         key: 'text-color'
-      }].concat(_toConsumableArray(THEME_TEXT_COLOR.map(function (it) {
+      }].concat(_toConsumableArray(getThemeTextColor(theme).map(function (it) {
         return {
           label: it.label,
           key: it.value,
@@ -593,7 +537,7 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
           }
         }, "\u6587\u5B57\u80CC\u666F\u989C\u8272"),
         key: 'background-color'
-      }], _toConsumableArray(THEME_TEXT_BG_COLOR.map(function (it) {
+      }], _toConsumableArray(getThemeTextBgColor(theme).map(function (it) {
         return {
           label: it.label,
           key: it.value,

package/dist/component/Icons/delete-back-2-line-icon.d.ts

@@ -0,0 +1,6 @@
+import { SvgIconProps } from "@mui/material";
+import * as React from "react";
+export declare const DeleteBack2LineIcon: {
+    (props: SvgIconProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/component/Icons/delete-back-2-line-icon.js

@@ -0,0 +1,13 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import { SvgIcon } from "@mui/material";
+import * as React from "react";
+export var DeleteBack2LineIcon = function DeleteBack2LineIcon(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, _extends({
+    viewBox: "0 0 24 24",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M6.53451 3H20.9993C21.5516 3 21.9993 3.44772 21.9993 4V20C21.9993 20.5523 21.5516 21 20.9993 21H6.53451C6.20015 21 5.88792 20.8329 5.70246 20.5547L0.369122 12.5547C0.145189 12.2188 0.145189 11.7812 0.369122 11.4453L5.70246 3.4453C5.88792 3.1671 6.20015 3 6.53451 3ZM7.06969 5L2.40302 12L7.06969 19H19.9993V5H7.06969ZM12.9993 10.5858L15.8277 7.75736L17.242 9.17157L14.4135 12L17.242 14.8284L15.8277 16.2426L12.9993 13.4142L10.1709 16.2426L8.75668 14.8284L11.5851 12L8.75668 9.17157L10.1709 7.75736L12.9993 10.5858Z"
+  }));
+};
+DeleteBack2LineIcon.displayName = 'icon-delete-back-2-line';

package/dist/component/Menu/index.js

@@ -38,7 +38,9 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         horizontal: 'left'
       }
     } : _ref$childrenProps,
-    zIndex = _ref.zIndex;
+    zIndex = _ref.zIndex,
+    onOpen = _ref.onOpen,
+    onClose = _ref.onClose;
   var _React$useState = React.useState(null),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     anchorEl = _React$useState2[0],
@@ -49,9 +51,11 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       context.props.onClick(event);
     }
     setAnchorEl(event.currentTarget);
+    onOpen === null || onOpen === void 0 || onOpen();
   };
   var handleClose = function handleClose() {
     setAnchorEl(null);
+    onClose === null || onClose === void 0 || onClose();
   };
   React.useImperativeHandle(ref, function () {
     return {

package/dist/contants/enums.d.ts

@@ -1,3 +1,4 @@
+import { Theme } from "@mui/material";
 export declare enum NodeTypeEnum {
     Alert = "alert",
     BlockAttachment = "blockAttachment",
@@ -30,3 +31,11 @@ export declare const NODE_TYPE_LABEL: Record<NodeTypeEnum, {
     download?: boolean;
     [key: string]: any;
 }>;
+export declare const getThemeTextColor: (theme: Theme) => {
+    label: string;
+    value: string;
+}[];
+export declare const getThemeTextBgColor: (theme: Theme) => {
+    label: string;
+    value: string;
+}[];

package/dist/contants/enums.js

@@ -105,4 +105,64 @@ export var NODE_TYPE_LABEL = (_NODE_TYPE_LABEL = {}, _defineProperty(_defineProp
   label: '附件'
 }), _defineProperty(_NODE_TYPE_LABEL, NodeTypeEnum.HorizontalRule, {
   label: '分割线'
-}));
+}));
+export var getThemeTextColor = function getThemeTextColor(theme) {
+  return [{
+    label: '默认色',
+    value: theme.palette.text.primary
+  }, {
+    label: '主题色',
+    value: theme.palette.primary.main
+  }, {
+    label: '成功色',
+    value: theme.palette.success.main
+  }, {
+    label: '警告色',
+    value: theme.palette.warning.main
+  }, {
+    label: '错误色',
+    value: theme.palette.error.main
+  }, {
+    label: '黑色',
+    value: theme.palette.common.black
+  }, {
+    label: '灰色',
+    value: theme.palette.text.disabled
+  }, {
+    label: '白色',
+    value: theme.palette.common.white
+  }];
+};
+export var getThemeTextBgColor = function getThemeTextBgColor(theme) {
+  return [{
+    label: '默认背景',
+    value: theme.palette.background.paper
+  }, {
+    label: '灰色背景',
+    value: '#f8f8f7'
+  }, {
+    label: '棕色背景',
+    value: '#f4eeee'
+  }, {
+    label: '橙色背景',
+    value: '#fbecdd'
+  }, {
+    label: '黄色背景',
+    value: '#fef9c3'
+  }, {
+    label: '绿色背景',
+    value: '#dcfce7'
+  }, {
+    label: '蓝色背景',
+    value: '#e0f2fe'
+  }, {
+    label: '紫色背景',
+    value: '#f3e8ff'
+  }, {
+    label: '粉色背景',
+    value: '#fcf1f6'
+  }, {
+    label: '红色背景',
+    value: '#ffe4e6'
+  }];
+};

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

@@ -0,0 +1,9 @@
+import type { Editor } from '@tiptap/react';
+import React from 'react';
+interface TableCellHandleMenuProps extends React.ComponentPropsWithoutRef<'button'> {
+    editor?: Editor | null;
+    onOpenChange?: (isOpen: boolean) => void;
+    onResizeStart?: (handle: 'br') => (event: React.MouseEvent) => void;
+}
+export declare const TableCellHandleMenu: React.ForwardRefExoticComponent<TableCellHandleMenuProps & React.RefAttributes<HTMLButtonElement>>;
+export {};