@ctzhian/tiptap 1.6.2 → 1.6.3

package/dist/component/Toolbar/EditorInsert/index.js

@@ -1,197 +1,433 @@
-var _excluded = ["className"];
-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); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-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 { getShortcutKeyText } from "../../../util";
-import { Box, MenuItem, Select, Stack, Tooltip } from "@mui/material";
-import React, { useEffect, useState } from "react";
-import { ArrowDownSLineIcon, AttachmentLineIcon, ImageLineIcon, MovieLineIcon, Music2LineIcon, UploadIcon } from "../../Icons";
+import { Typography } from '@mui/material';
+import React from 'react';
+import { AddCircleFillIcon, ArrowDownSLineIcon, AttachmentLineIcon, CheckboxCircleFillIcon, CloseCircleFillIcon, CodeBoxLineIcon, CodeLineIcon, CodeSSlashLineIcon, DoubleQuotesLIcon, ErrorWarningFillIcon, Folder2LineIcon, FormulaIcon, FunctionsIcon, ImageLineIcon, Information2FillIcon, Information2LineIcon, MenuFold2FillIcon, MovieLineIcon, Music2LineIcon, SeparatorIcon, SquareRootIcon, Table2Icon, WindowFillIcon } from "../../Icons";
+import Menu from "../../Menu";
 import ToolbarItem from "../Item";
+import TableSizePicker from "../TableSizePicker";
 var EditorInsert = function EditorInsert(_ref) {
   var editor = _ref.editor;
-  var _useState = useState("none"),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedValue = _useState2[0],
-    setSelectedValue = _useState2[1];
-  var InsertOptions = [{
-    id: 'image',
-    icon: /*#__PURE__*/React.createElement(ImageLineIcon, {
-      sx: {
-        fontSize: '1rem'
-      }
+  return /*#__PURE__*/React.createElement(Menu, {
+    width: 224,
+    context: /*#__PURE__*/React.createElement(ToolbarItem, {
+      tip: '插入',
+      text: '插入',
+      icon: /*#__PURE__*/React.createElement(AddCircleFillIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      })
     }),
-    label: '图片',
-    shortcutKey: ['ctrl', '2']
-  }, {
-    id: 'video',
-    icon: /*#__PURE__*/React.createElement(MovieLineIcon, {
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'left'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'left'
+    },
+    arrowIcon: /*#__PURE__*/React.createElement(ArrowDownSLineIcon, {
       sx: {
-        fontSize: '1rem'
+        fontSize: '1rem',
+        transform: 'rotate(-90deg)'
       }
     }),
-    label: '视频',
-    shortcutKey: ['ctrl', '3']
-  }, {
-    id: 'audio',
-    icon: /*#__PURE__*/React.createElement(Music2LineIcon, {
-      sx: {
-        fontSize: '1rem'
+    list: [{
+      customLabel: /*#__PURE__*/React.createElement(Typography, {
+        sx: {
+          px: 1,
+          pt: 2,
+          fontSize: '12px',
+          color: 'text.disabled'
+        }
+      }, "\u901A\u7528"),
+      key: 'current-node'
+    }, {
+      label: '图片',
+      key: 'image',
+      icon: /*#__PURE__*/React.createElement(ImageLineIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      extra: /*#__PURE__*/React.createElement(Typography, {
+        sx: {
+          fontSize: '12px',
+          color: 'text.disabled'
+        }
+      }, getShortcutKeyText(['ctrl', '2'], '+')),
+      onClick: function onClick() {
+        return editor.commands.setImage({
+          src: '',
+          width: 760
+        });
       }
-    }),
-    label: '音频',
-    shortcutKey: ['ctrl', '4']
-  }, {
-    id: 'attachment',
-    icon: /*#__PURE__*/React.createElement(AttachmentLineIcon, {
-      sx: {
-        fontSize: '1rem'
+    }, {
+      label: '表格',
+      key: 'table',
+      icon: /*#__PURE__*/React.createElement(Table2Icon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      extra: /*#__PURE__*/React.createElement(Typography, {
+        sx: {
+          fontSize: '12px',
+          color: 'text.disabled'
+        }
+      }, getShortcutKeyText(['ctrl', '9'], '+')),
+      children: [{
+        key: 'table-size-picker',
+        customLabel: /*#__PURE__*/React.createElement(TableSizePicker, {
+          onConfirm: function onConfirm(cols, rows) {
+            editor.commands.insertTable({
+              rows: rows,
+              cols: cols,
+              withHeaderRow: true
+            });
+          }
+        })
+      }]
+    }, {
+      label: '文件',
+      key: 'file',
+      icon: /*#__PURE__*/React.createElement(Folder2LineIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      children: [{
+        label: '附件',
+        key: 'attachment',
+        extra: /*#__PURE__*/React.createElement(Typography, {
+          sx: {
+            fontSize: '12px',
+            color: 'text.disabled'
+          }
+        }, getShortcutKeyText(['ctrl', '5'], '+')),
+        icon: /*#__PURE__*/React.createElement(AttachmentLineIcon, {
+          sx: {
+            fontSize: '1rem'
+          }
+        }),
+        onClick: function onClick() {
+          return editor.commands.setInlineAttachment({
+            url: '',
+            title: '',
+            size: '0'
+          });
+        }
+      }, {
+        label: '音频',
+        key: 'audio',
+        extra: /*#__PURE__*/React.createElement(Typography, {
+          sx: {
+            fontSize: '12px',
+            color: 'text.disabled'
+          }
+        }, getShortcutKeyText(['ctrl', '4'], '+')),
+        icon: /*#__PURE__*/React.createElement(Music2LineIcon, {
+          sx: {
+            fontSize: '1rem'
+          }
+        }),
+        onClick: function onClick() {
+          return editor.commands.setAudio({
+            src: '',
+            controls: true,
+            autoplay: false
+          });
+        }
+      }, {
+        label: '视频',
+        key: 'video',
+        extra: /*#__PURE__*/React.createElement(Typography, {
+          sx: {
+            fontSize: '12px',
+            color: 'text.disabled'
+          }
+        }, getShortcutKeyText(['ctrl', '3'], '+')),
+        icon: /*#__PURE__*/React.createElement(MovieLineIcon, {
+          sx: {
+            fontSize: '1rem'
+          }
+        }),
+        onClick: function onClick() {
+          return editor.commands.setVideo({
+            src: '',
+            width: 760,
+            controls: true,
+            autoplay: false
+          });
+        }
+      }]
+    }, {
+      customLabel: /*#__PURE__*/React.createElement(Typography, {
+        sx: {
+          px: 1,
+          pt: 2,
+          fontSize: '12px',
+          color: 'text.disabled'
+        }
+      }, "\u6837\u5F0F\u5E03\u5C40"),
+      key: 'style'
+    }, {
+      label: '分割线',
+      key: 'separator',
+      icon: /*#__PURE__*/React.createElement(SeparatorIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      onClick: function onClick() {
+        return editor.commands.insertContentAt(editor.state.selection.from, {
+          type: 'horizontalRule'
+        });
       }
-    }),
-    label: '附件',
-    shortcutKey: ['ctrl', '5']
-  }];
-  var updateSelection = function updateSelection() {
-    if (editor.isActive('image')) {
-      setSelectedValue('image');
-    } else if (editor.isActive('video')) {
-      setSelectedValue('video');
-    } else if (editor.isActive('audio')) {
-      setSelectedValue('audio');
-    } else if (editor.isActive('inlineAttachment') || editor.isActive('blockAttachment')) {
-      setSelectedValue('attachment');
-    } else {
-      setSelectedValue('none');
-    }
-  };
-  var handleChange = function handleChange(e) {
-    var value = e.target.value;
-    if (value === 'image') {
-      editor.commands.setImage({
-        src: '',
-        width: 760
-      });
-    } else if (value === 'video') {
-      editor.commands.setVideo({
-        src: '',
-        width: 760,
-        controls: true,
-        autoplay: false
-      });
-    } else if (value === 'audio') {
-      editor.commands.setAudio({
-        src: '',
-        controls: true,
-        autoplay: false
-      });
-    } else if (value === 'attachment') {
-      editor.commands.setInlineAttachment({
-        url: '',
-        title: '',
-        size: '0'
-      });
-    }
-    setSelectedValue(value);
-  };
-  useEffect(function () {
-    editor.on('selectionUpdate', updateSelection);
-    editor.on('transaction', updateSelection);
-    return function () {
-      editor.off('selectionUpdate', updateSelection);
-      editor.off('transaction', updateSelection);
-    };
-  }, [editor]);
-  return /*#__PURE__*/React.createElement(Select, {
-    value: selectedValue,
-    className: ['image', 'video', 'audio', 'attachment'].includes(selectedValue) ? "tool-active" : "",
-    onChange: handleChange,
-    sx: {
-      bgcolor: 'transparent',
-      '&:hover .MuiOutlinedInput-notchedOutline': {
-        borderWidth: '0px !important',
-        borderColor: 'transparent !important'
-      },
-      '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-        borderWidth: '0px !important',
-        borderColor: 'transparent !important'
+    }, {
+      label: '引用块',
+      key: 'blockquote',
+      icon: /*#__PURE__*/React.createElement(DoubleQuotesLIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      extra: /*#__PURE__*/React.createElement(Typography, {
+        sx: {
+          fontSize: '12px',
+          color: 'text.disabled'
+        }
+      }, getShortcutKeyText(['ctrl', 'shift', 'B'], '+')),
+      onClick: function onClick() {
+        return editor.chain().focus().toggleBlockquote().run();
       }
-    },
-    renderValue: function renderValue(value) {
-      var _InsertOptions$find;
-      return /*#__PURE__*/React.createElement(ToolbarItem, {
-        tip: '插入',
-        icon: /*#__PURE__*/React.createElement(Stack, {
-          direction: 'row',
-          alignItems: 'center',
+    }, {
+      label: '折叠块',
+      key: 'details',
+      icon: /*#__PURE__*/React.createElement(MenuFold2FillIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      extra: /*#__PURE__*/React.createElement(Typography, {
+        sx: {
+          fontSize: '12px',
+          color: 'text.disabled'
+        }
+      }, getShortcutKeyText(['ctrl', '8'], '+')),
+      onClick: function onClick() {
+        return editor.chain().focus().setDetails().run();
+      }
+    }, {
+      label: '警告提示',
+      key: 'highlight',
+      icon: /*#__PURE__*/React.createElement(Information2LineIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      children: [{
+        label: '信息 Info',
+        key: 'info',
+        icon: /*#__PURE__*/React.createElement(Information2FillIcon, {
+          sx: {
+            fontSize: '1rem',
+            color: 'primary.main'
+          }
+        }),
+        onClick: function onClick() {
+          editor.commands.setAlert({
+            type: 'icon',
+            variant: 'info'
+          });
+        }
+      }, {
+        label: '警告 Warning',
+        key: 'warning',
+        icon: /*#__PURE__*/React.createElement(ErrorWarningFillIcon, {
+          sx: {
+            fontSize: '1rem',
+            color: 'warning.main'
+          }
+        }),
+        onClick: function onClick() {
+          editor.commands.setAlert({
+            type: 'icon',
+            variant: 'warning'
+          });
+        }
+      }, {
+        label: '错误 Error',
+        key: 'error',
+        icon: /*#__PURE__*/React.createElement(CloseCircleFillIcon, {
+          sx: {
+            fontSize: '1rem',
+            color: 'error.main'
+          }
+        }),
+        onClick: function onClick() {
+          editor.commands.setAlert({
+            type: 'icon',
+            variant: 'error'
+          });
+        }
+      }, {
+        label: '成功 Success',
+        key: 'success',
+        icon: /*#__PURE__*/React.createElement(CheckboxCircleFillIcon, {
           sx: {
-            mr: 0.5,
-            width: '1.5rem'
+            fontSize: '1rem',
+            color: 'success.main'
           }
-        }, ((_InsertOptions$find = InsertOptions.find(function (it) {
-          return it.id === value;
-        })) === null || _InsertOptions$find === void 0 ? void 0 : _InsertOptions$find.icon) || /*#__PURE__*/React.createElement(UploadIcon, {
+        }),
+        onClick: function onClick() {
+          editor.commands.setAlert({
+            type: 'icon',
+            variant: 'success'
+          });
+        }
+      }]
+    }, {
+      label: 'Iframe 链接',
+      key: 'iframe',
+      icon: /*#__PURE__*/React.createElement(WindowFillIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      onClick: function onClick() {
+        return editor.commands.setIframe({
+          src: '',
+          width: 760,
+          height: 400
+        });
+      }
+    }, {
+      customLabel: /*#__PURE__*/React.createElement(Typography, {
+        sx: {
+          px: 1,
+          pt: 2,
+          fontSize: '12px',
+          color: 'text.disabled'
+        }
+      }, "\u7A0B\u5E8F\u5458\u4E13\u7528"),
+      key: 'programmer'
+    }, {
+      label: '代码',
+      key: 'code',
+      icon: /*#__PURE__*/React.createElement(CodeSSlashLineIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      children: [{
+        label: '行内代码',
+        key: 'inlineCode',
+        icon: /*#__PURE__*/React.createElement(CodeLineIcon, {
           sx: {
             fontSize: '1rem'
           }
-        }))
-      });
-    },
-    IconComponent: function IconComponent(_ref2) {
-      var className = _ref2.className,
-        rest = _objectWithoutProperties(_ref2, _excluded);
-      return /*#__PURE__*/React.createElement(ArrowDownSLineIcon, _extends({
-        sx: {
-          position: 'absolute',
-          right: 2,
-          flexSelf: 'center',
-          fontSize: '1rem',
-          flexShrink: 0,
-          mr: 0,
-          color: 'text.disabled',
-          transform: className !== null && className !== void 0 && className.includes('MuiSelect-iconOpen') ? 'rotate(-180deg)' : 'none',
-          transition: 'transform 0.3s',
-          cursor: 'pointer',
-          pointerEvents: 'none'
-        }
-      }, rest));
-    }
-  }, /*#__PURE__*/React.createElement(MenuItem, {
-    key: 'none',
-    value: 'none',
-    sx: {
-      display: 'none'
-    }
-  }, /*#__PURE__*/React.createElement(UploadIcon, {
-    sx: {
-      fontSize: '1rem'
-    }
-  }), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      ml: 1
-    }
-  }, "\u65E0")), InsertOptions.map(function (it) {
-    return /*#__PURE__*/React.createElement(MenuItem, {
-      key: it.id,
-      value: it.id
-    }, /*#__PURE__*/React.createElement(Tooltip, {
-      arrow: true,
-      title: getShortcutKeyText(it.shortcutKey || []),
-      placement: "right"
-    }, /*#__PURE__*/React.createElement(Stack, {
-      direction: 'row',
-      alignItems: 'center',
-      justifyContent: "center",
-      gap: 1
-    }, it.icon, /*#__PURE__*/React.createElement(Box, {
-      sx: {
-        fontSize: '0.875rem'
+        }),
+        extra: /*#__PURE__*/React.createElement(Typography, {
+          sx: {
+            fontSize: '12px',
+            color: 'text.disabled'
+          }
+        }, getShortcutKeyText(['ctrl', 'E'], '+')),
+        onClick: function onClick() {
+          return editor.commands.toggleCode();
+        }
+      }, {
+        label: '代码块',
+        key: 'codeBlock',
+        icon: /*#__PURE__*/React.createElement(CodeBoxLineIcon, {
+          sx: {
+            fontSize: '1rem'
+          }
+        }),
+        extra: /*#__PURE__*/React.createElement(Typography, {
+          sx: {
+            fontSize: '12px',
+            color: 'text.disabled'
+          }
+        }, getShortcutKeyText(['ctrl', 'alt', 'C'], '+')),
+        onClick: function onClick() {
+          return editor.commands.toggleCodeBlock();
+        }
+      }]
+    }, {
+      label: '数学公式',
+      key: 'math',
+      icon: /*#__PURE__*/React.createElement(FormulaIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      children: [{
+        label: '行内数学公式',
+        key: 'inline-math',
+        icon: /*#__PURE__*/React.createElement(SquareRootIcon, {
+          sx: {
+            fontSize: '1rem'
+          }
+        }),
+        extra: /*#__PURE__*/React.createElement(Typography, {
+          sx: {
+            fontSize: '12px',
+            color: 'text.disabled'
+          }
+        }, getShortcutKeyText(['ctrl', '6'], '+')),
+        onClick: function onClick() {
+          editor.commands.setInlineMath({
+            latex: ''
+          });
+        }
+      }, {
+        label: '块级数学公式',
+        key: 'block-math',
+        icon: /*#__PURE__*/React.createElement(FunctionsIcon, {
+          sx: {
+            fontSize: '1rem'
+          }
+        }),
+        extra: /*#__PURE__*/React.createElement(Typography, {
+          sx: {
+            fontSize: '12px',
+            color: 'text.disabled'
+          }
+        }, getShortcutKeyText(['ctrl', '7'], '+')),
+        onClick: function onClick() {
+          editor.commands.setBlockMath({
+            latex: ''
+          });
+        }
+      }]
+    }, {
+      customLabel: /*#__PURE__*/React.createElement(Typography, {
+        sx: {
+          px: 1,
+          pt: 2,
+          fontSize: '12px',
+          color: 'text.disabled'
+        }
+      }, "\u5176\u4ED6"),
+      key: 'other'
+    }, {
+      label: 'Iframe 链接',
+      key: 'iframe',
+      icon: /*#__PURE__*/React.createElement(WindowFillIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      onClick: function onClick() {
+        return editor.commands.setIframe({
+          src: '',
+          width: 760,
+          height: 400
+        });
       }
-    }, it.label))));
-  }));
+    }]
+  });
 };
 export default EditorInsert;

package/dist/component/Toolbar/Item.d.ts

@@ -4,7 +4,7 @@ import React from 'react';
 interface ToolbarItemProps {
     tip?: string;
     customComponent?: React.ReactNode;
-    text?: string;
+    text?: React.ReactNode;
     shortcutKey?: string[];
     sx?: SxProps<Theme>;
     icon?: React.ReactNode;

package/dist/extension/index.js

@@ -138,7 +138,7 @@ export var getExtensions = function getExtensions(_ref) {
     if (!(exclude !== null && exclude !== void 0 && exclude.includes('slashCommands'))) {
       defaultExtensions.push(SlashCommands);
     }
-    if (!(exclude !== null && exclude !== void 0 && exclude.includes('aiWriting'))) {
+    if (!(exclude !== null && exclude !== void 0 && exclude.includes('aiWriting')) && onAiWritingGetSuggestion) {
       defaultExtensions.push(AiWritingExtension({
         onAiWritingGetSuggestion: onAiWritingGetSuggestion
       }));

package/dist/extension/node/FileHandler.d.ts

@@ -1,4 +1,4 @@
 import { UploadFunction } from "../../type";
 export declare const FileHandlerExtension: (props: {
     onUpload?: UploadFunction;
-}) => import("@tiptap/core").Extension<Omit<import("@tiptap/extension-file-handler").FileHandlePluginOptions, "key" | "editor">, any>;
+}) => import("@tiptap/core").Extension<Omit<import("@tiptap/extension-file-handler").FileHandlePluginOptions, "editor" | "key">, any>;

package/dist/type/index.d.ts

@@ -13,12 +13,14 @@ export interface MenuItem {
     children?: MenuItem[];
     textSx?: SxProps<Theme>;
     key: number | string;
+    width?: number;
     minWidth?: number;
     maxHeight?: number;
     onClick?: () => void;
 }
 export interface MenuProps {
     id?: string;
+    width?: number;
     arrowIcon?: React.ReactNode;
     list: MenuItem[];
     header?: React.ReactNode;

package/dist/util/shortcutKey.d.ts

@@ -1,2 +1,2 @@
 export declare const isMac: () => boolean;
-export declare const getShortcutKeyText: (shortcutKey: string[]) => string;
+export declare const getShortcutKeyText: (shortcutKey: string[], separator?: string) => string;

package/dist/util/shortcutKey.js

@@ -3,7 +3,8 @@ export var isMac = function isMac() {
   return typeof navigator !== "undefined" && navigator.platform.toLowerCase().includes("mac");
 };
 export var getShortcutKeyText = function getShortcutKeyText(shortcutKey) {
+  var separator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ' + ';
   return shortcutKey === null || shortcutKey === void 0 ? void 0 : shortcutKey.map(function (it) {
     return isMac() ? MAC_SYMBOLS[it] || it : it;
-  }).join(' + ');
+  }).join(separator);
 };