@ctzhian/tiptap 1.12.8 → 1.12.9

package/dist/EditorMarkdown/Toolbar.js

@@ -10,11 +10,10 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 import { Box, Divider, Stack, Typography } from "@mui/material";
 import React from "react";
-import { AddCircleFillIcon, ArrowDownSLineIcon, AttachmentLineIcon, BoldIcon, CheckboxCircleFillIcon, CloseCircleFillIcon, CodeBoxLineIcon, CodeLineIcon, DoubleQuotesLIcon, ErrorWarningFillIcon, Folder2LineIcon, FunctionsIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, H6Icon, ImageLineIcon, Information2FillIcon, Information2LineIcon, ItalicIcon, LinkIcon, ListCheck3Icon, ListOrdered2Icon, ListUnorderedIcon, MarkPenLineIcon, MenuFold2FillIcon, MovieLineIcon, Music2LineIcon, SeparatorIcon, SquareRootIcon, StrikethroughIcon, SubscriptIcon, SuperscriptIcon, Table2Icon, UnderlineIcon, UserSmileFillIcon } from "../component/Icons";
+import { AddCircleFillIcon, ArrowDownSLineIcon, AttachmentLineIcon, BoldIcon, CheckboxCircleFillIcon, CloseCircleFillIcon, CodeBoxLineIcon, CodeLineIcon, CodeSSlashLineIcon, DoubleQuotesLIcon, ErrorWarningFillIcon, Folder2LineIcon, FormulaIcon, FunctionsIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, H6Icon, ImageLineIcon, Information2FillIcon, Information2LineIcon, ItalicIcon, LinkIcon, ListCheck3Icon, ListOrdered2Icon, ListUnorderedIcon, MarkPenLineIcon, MenuFold2FillIcon, MovieLineIcon, Music2LineIcon, SeparatorIcon, SquareRootIcon, StrikethroughIcon, SubscriptIcon, SuperscriptIcon, Table2Icon, UnderlineIcon, UserSmileFillIcon } from "../component/Icons";
 import Menu from "../component/Menu";
 import { ToolbarItem } from "../component/Toolbar";
 import TableSizePicker from "../component/Toolbar/TableSizePicker";
-import { getFileType } from "../util/fileHandler";
 var EditorMarkdownToolbar = function EditorMarkdownToolbar(_ref) {
   var aceEditorRef = _ref.aceEditorRef,
     isExpend = _ref.isExpend,
@@ -25,7 +24,7 @@ var EditorMarkdownToolbar = function EditorMarkdownToolbar(_ref) {
   var attachmentInputRef = React.useRef(null);
   var handleFileUpload = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(file, expectedType) {
-      var url, fileType, content;
+      var url, content;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -37,43 +36,34 @@ var EditorMarkdownToolbar = function EditorMarkdownToolbar(_ref) {
           case 2:
             _context.prev = 2;
             _context.next = 5;
-            return onUpload(file, function (_ref3) {
-              var progress = _ref3.progress;
-              // 可以在这里显示上传进度
-              console.log('Upload progress:', progress);
-            });
+            return onUpload(file);
           case 5:
             url = _context.sent;
-            fileType = getFileType(file);
-            content = ''; // 根据文件类型插入对应的内容
+            content = '';
             if (expectedType === 'image') {
-              // 图片：插入 [file.name](url)
               content = "![".concat(file.name, "](").concat(url, ")");
             } else if (expectedType === 'video') {
-              // 视频：插入 <video src="url"></video>
               content = "<p>\n<video src=\"".concat(url, "\" controls=\"true\"></video>\n</p>");
             } else if (expectedType === 'audio') {
-              // 音频：插入 <audio src="url"></audio>
               content = "<p>\n<audio src=\"".concat(url, "\" controls=\"true\"></audio>\n</p>");
             } else {
-              // 附件：插入 <a href="url" download="file.name">file.name</a>
               content = "<p>\n<a href=\"".concat(url, "\" download=\"").concat(file.name, "\">").concat(file.name, "</a>\n</p>");
             }
             insertTextAndFocusPositionRow({
               text: content,
               block: true
             });
-            _context.next = 15;
+            _context.next = 14;
             break;
-          case 12:
-            _context.prev = 12;
+          case 11:
+            _context.prev = 11;
             _context.t0 = _context["catch"](2);
             console.error('文件上传失败:', _context.t0);
-          case 15:
+          case 14:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[2, 12]]);
+      }, _callee, null, [[2, 11]]);
     }));
     return function handleFileUpload(_x, _x2) {
       return _ref2.apply(this, arguments);
@@ -350,8 +340,68 @@ var EditorMarkdownToolbar = function EditorMarkdownToolbar(_ref) {
         block: true
       });
     }
-  }, {
+  }].concat(_toConsumableArray(isExpend ? [{
     id: 'divider-2'
+  }, {
+    id: 'separator',
+    icon: /*#__PURE__*/React.createElement(SeparatorIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    label: '分割线',
+    onClick: function onClick() {
+      insertTextAndFocusPositionRow({
+        text: '---',
+        position: 3,
+        block: true
+      });
+    }
+  }, {
+    id: 'blockquote',
+    icon: /*#__PURE__*/React.createElement(DoubleQuotesLIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    label: '引用',
+    onClick: function onClick() {
+      insertTextAndFocusPositionRow({
+        text: '> ',
+        position: 2,
+        block: true
+      });
+    }
+  }, {
+    id: 'details',
+    icon: /*#__PURE__*/React.createElement(MenuFold2FillIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    label: '折叠面板',
+    onClick: function onClick() {
+      insertTextAndFocusPositionRow({
+        text: ':::details\n\n:::detailsSummary\n\n:::\n\n:::detailsContent\n\n:::\n\n:::\n',
+        row: 1,
+        block: true
+      });
+    }
+  }, {
+    id: 'alert',
+    icon: /*#__PURE__*/React.createElement(Information2LineIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    label: '警告块',
+    onClick: function onClick() {
+      insertTextAndFocusPositionRow({
+        text: ':::alert {variant="info"}\n\n:::',
+        row: -1,
+        block: true
+      });
+    }
   }, {
     id: 'inline-math',
     icon: /*#__PURE__*/React.createElement(SquareRootIcon, {
@@ -410,7 +460,7 @@ var EditorMarkdownToolbar = function EditorMarkdownToolbar(_ref) {
         block: true
       });
     }
-  }, {
+  }] : []), [{
     id: 'divider-3'
   }, {
     id: 'link',
@@ -440,7 +490,7 @@ var EditorMarkdownToolbar = function EditorMarkdownToolbar(_ref) {
         position: 7
       });
     }
-  }];
+  }]);
   return /*#__PURE__*/React.createElement(Stack, {
     direction: 'row',
     alignItems: 'center'
@@ -719,6 +769,92 @@ var EditorMarkdownToolbar = function EditorMarkdownToolbar(_ref) {
           });
         }
       }]
+    }, {
+      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'
+          }
+        }),
+        onClick: function onClick() {
+          return insertTextAndFocusPositionRow({
+            text: '`',
+            position: 1
+          });
+        }
+      }, {
+        label: '代码块',
+        key: 'codeBlock',
+        icon: /*#__PURE__*/React.createElement(CodeBoxLineIcon, {
+          sx: {
+            fontSize: '1rem'
+          }
+        }),
+        onClick: function onClick() {
+          return insertTextAndFocusPositionRow({
+            text: '```\n\n```',
+            row: 1,
+            block: true
+          });
+        }
+      }]
+    }, {
+      label: '数学公式',
+      key: 'math',
+      icon: /*#__PURE__*/React.createElement(FormulaIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      children: [{
+        label: '行内数学公式',
+        key: 'inline-math',
+        icon: /*#__PURE__*/React.createElement(SquareRootIcon, {
+          sx: {
+            fontSize: '1rem'
+          }
+        }),
+        onClick: function onClick() {
+          insertTextAndFocusPositionRow({
+            text: '$$',
+            position: 1
+          });
+        }
+      }, {
+        label: '块级数学公式',
+        key: 'block-math',
+        icon: /*#__PURE__*/React.createElement(FunctionsIcon, {
+          sx: {
+            fontSize: '1rem'
+          }
+        }),
+        onClick: function onClick() {
+          insertTextAndFocusPositionRow({
+            text: '$$\n\n$$',
+            row: 1,
+            block: true
+          });
+        }
+      }]
     }]
   }), /*#__PURE__*/React.createElement(Divider, {
     sx: {
@@ -796,6 +932,62 @@ var EditorMarkdownToolbar = function EditorMarkdownToolbar(_ref) {
       icon: it.icon,
       onClick: it === null || it === void 0 ? void 0 : it.onClick
     });
+  }), isExpend && /*#__PURE__*/React.createElement(Menu, {
+    context: /*#__PURE__*/React.createElement(ToolbarItem, {
+      tip: '表格',
+      icon: /*#__PURE__*/React.createElement(Table2Icon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      })
+    }),
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'left'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'left'
+    },
+    arrowIcon: /*#__PURE__*/React.createElement(ArrowDownSLineIcon, {
+      sx: {
+        fontSize: '1rem',
+        transform: 'rotate(-90deg)'
+      }
+    }),
+    zIndex: isExpend ? 2100 : undefined,
+    list: [{
+      key: 'table-size-picker',
+      customLabel: /*#__PURE__*/React.createElement(TableSizePicker, {
+        onConfirm: function onConfirm(cols, rows) {
+          var headerRow = "| ".concat(Array.from({
+            length: cols
+          }).map(function () {
+            return '';
+          }).join(' | '), " |\n");
+          var separatorRow = "| ".concat(Array.from({
+            length: cols
+          }).map(function () {
+            return '---';
+          }).join(' | '), " |\n");
+          var dataRows = Array.from({
+            length: rows
+          }).map(function () {
+            return "| ".concat(Array.from({
+              length: cols
+            }).map(function () {
+              return '';
+            }).join(' | '), " |\n");
+          }).join('');
+          var tableMarkdown = "".concat(headerRow).concat(separatorRow).concat(dataRows);
+          insertTextAndFocusPositionRow({
+            text: tableMarkdown,
+            position: 1,
+            block: true
+          });
+        }
+      })
+    }]
   }), /*#__PURE__*/React.createElement("input", {
     ref: imageInputRef,
     type: "file",

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

@@ -66,7 +66,10 @@ var AlertView = function AlertView(_ref) {
     setAnchorEl = _useState2[1];
   var showIcon = attrs.type !== 'text';
   var variantData = useMemo(function () {
-    return VARIANT_DATA[attrs.variant || 'info'];
+    if (attrs.variant && VARIANT_DATA[attrs.variant]) {
+      return VARIANT_DATA[attrs.variant];
+    }
+    return VARIANT_DATA['default'];
   }, [attrs.variant]);
   var handleShowOperationPopover = function handleShowOperationPopover(event) {
     return setAnchorEl(event.currentTarget);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctzhian/tiptap",
-  "version": "1.12.8",
+  "version": "1.12.9",
   "description": "基于 Tiptap 二次开发的编辑器组件",
   "main": "dist/index.js",
   "module": "dist/index.js",