@ctzhian/tiptap 1.12.8 → 1.12.10

package/dist/Editor/demo.js

@@ -152,7 +152,7 @@ var Reader = function Reader() {
         }
         return onUpload;
       }(),
-      content: ''
+      content: "<ol class=\"ordered-list\" data-type=\"orderedList\"><li><p>jfdlsaf</p></li><li><p>sadfsa</p><ol class=\"ordered-list\" data-type=\"orderedList\"><li><p>fjasldkfj</p><ol class=\"ordered-list\" data-type=\"orderedList\"><li><p>fasd</p><ol class=\"ordered-list\" data-type=\"orderedList\"><li><p>fasdjklf</p></li></ol></li><li><p>fjdslkf</p></li><li><p>sjfsadlf</p></li></ol></li></ol></li></ol><ul class=\"bullet-list\" data-type=\"bulletList\"><li><p>fsldjakfjlksd</p></li><li><p>fsadfasd</p><ul class=\"bullet-list\" data-type=\"bulletList\"><li><p>fajsdlkfj</p></li><li><p>fasdjklf</p><ul class=\"bullet-list\" data-type=\"bulletList\"><li><p>fjasldfsa</p><ul class=\"bullet-list\" data-type=\"bulletList\"><li><p>fsadlkj</p></li></ul></li></ul></li></ul></li></ul><p></p>"
     }),
     editor = _useTiptap.editor;
   return /*#__PURE__*/React.createElement(EditorThemeProvider, {

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/contants/placeholder.d.ts

@@ -8,9 +8,6 @@ export declare const PLACEHOLDER: {
         6: string;
     };
     detailsSummary: string;
-    orderedList: string;
-    bulletList: string;
-    taskList: string;
     paragraph: string;
     default: string;
 };

package/dist/contants/placeholder.js

@@ -8,9 +8,6 @@ export var PLACEHOLDER = {
     6: '六级标题'
   },
   detailsSummary: '输入面板标题',
-  orderedList: '列表',
-  bulletList: '列表',
-  taskList: '列表',
   paragraph: '输入 "/" 插入内容',
   default: '写点什么吧，输入 "/" 插入内容'
 };

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/dist/extension/component/Link/Markdown.js

@@ -1,8 +1,10 @@
+import { ChromeIcon } from "../../../component/Icons";
+import { Avatar, Box } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { MarkViewContent } from "@tiptap/react";
 import React, { useCallback } from "react";
 var LinkViewWrapper = function LinkViewWrapper(_ref) {
-  var _mark$attrs2, _mark$attrs3, _mark$attrs4;
+  var _mark$attrs2, _mark$attrs3, _mark$attrs4, _mark$attrs6;
   var editor = _ref.editor,
     mark = _ref.mark;
   var theme = useTheme();
@@ -24,6 +26,11 @@ var LinkViewWrapper = function LinkViewWrapper(_ref) {
   var href = (mark === null || mark === void 0 || (_mark$attrs2 = mark.attrs) === null || _mark$attrs2 === void 0 ? void 0 : _mark$attrs2.href) || '';
   var target = (mark === null || mark === void 0 || (_mark$attrs3 = mark.attrs) === null || _mark$attrs3 === void 0 ? void 0 : _mark$attrs3.target) || '_blank';
   var download = mark === null || mark === void 0 || (_mark$attrs4 = mark.attrs) === null || _mark$attrs4 === void 0 ? void 0 : _mark$attrs4.download;
+  var favicon = '';
+  try {
+    var _mark$attrs5;
+    favicon = mark !== null && mark !== void 0 && (_mark$attrs5 = mark.attrs) !== null && _mark$attrs5 !== void 0 && _mark$attrs5.href ? new URL(mark.attrs.href).origin + '/favicon.ico' : '';
+  } catch (err) {}
   return /*#__PURE__*/React.createElement(MarkViewContent, {
     as: "a",
     href: href,
@@ -33,8 +40,29 @@ var LinkViewWrapper = function LinkViewWrapper(_ref) {
     style: {
       color: theme.palette.primary.main,
       textDecoration: 'underline',
-      cursor: 'pointer'
+      cursor: 'pointer',
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '2px'
     }
-  });
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    sx: {
+      width: '1rem',
+      height: '1rem',
+      alignSelf: 'center',
+      bgcolor: '#FFFFFF'
+    },
+    src: favicon
+  }, /*#__PURE__*/React.createElement(ChromeIcon, {
+    sx: {
+      fontSize: '1rem',
+      cursor: 'grab',
+      color: 'primary.main',
+      alignSelf: 'center',
+      ':active': {
+        cursor: 'grabbing'
+      }
+    }
+  })), /*#__PURE__*/React.createElement(Box, null, mark === null || mark === void 0 || (_mark$attrs6 = mark.attrs) === null || _mark$attrs6 === void 0 ? void 0 : _mark$attrs6.title));
 };
 export default LinkViewWrapper;

package/dist/index.css

@@ -87,50 +87,83 @@
 /* list */
 .tiptap.ProseMirror ol,
 .tiptap.ProseMirror ul {
-  padding: 0 32px;
+  padding: 0 32px 0 24px;
   margin: 8px 0;
   list-style: none;
+  position: relative;
+  counter-reset: list-counter;
 }
 
 .tiptap.ProseMirror li {
+  display: flex;
   margin: 8px 0;
+  flex-direction: column;
+  position: relative;
 }
 
-.tiptap.ProseMirror ol ol ol ol {
-  list-style: decimal;
+.tiptap.ProseMirror ol li {
+  counter-increment: list-counter;
 }
 
-.tiptap.ProseMirror ol ol ol {
-  list-style: lower-roman;
+.tiptap.ProseMirror ol li::before {
+  position: absolute;
+  top: 0;
+  left: -24px;
+  content: counter(list-counter) '.' !important;
+  font-size: 16px;
+  line-height: 26px;
+  color: var(--mui-palette-primary-main);
 }
 
 .tiptap.ProseMirror ol ol {
-  list-style: lower-alpha;
+  counter-reset: list-counter;
+  margin: 0;
+}
+
+.tiptap.ProseMirror ol ol li::before {
+  content: counter(list-counter, lower-alpha) '.' !important;
+}
+
+.tiptap.ProseMirror ol ol ol {
+  counter-reset: list-counter;
 }
 
-.tiptap.ProseMirror ol {
-  list-style: decimal;
+.tiptap.ProseMirror ol ol ol li::before {
+  content: counter(list-counter, lower-roman) '.' !important;
 }
 
-.tiptap.ProseMirror ul:not([data-type='taskList']) {
-  list-style: disc;
+.tiptap.ProseMirror ol ol ol ol {
+  counter-reset: list-counter;
+}
+
+.tiptap.ProseMirror ol ol ol ol li::before {
+  content: counter(list-counter) '.' !important;
+}
+
+.tiptap.ProseMirror ul:not([data-type='taskList']) li::before {
+  content: '•' !important;
+  position: absolute;
+  top: 0;
+  left: -24px;
+  font-size: 16px;
+  line-height: 26px;
+  color: var(--mui-palette-primary-main);
 }
 
 .tiptap.ProseMirror ul:not([data-type='taskList']) ul {
-  list-style: circle;
+  margin: 0;
 }
 
-.tiptap.ProseMirror ul:not([data-type='taskList']) ul ul {
-  list-style: square;
+.tiptap.ProseMirror ul:not([data-type='taskList']) ul li::before {
+  content: '◦' !important;
 }
 
-.tiptap.ProseMirror ul:not([data-type='taskList']) ul ul ul {
-  list-style: disc;
+.tiptap.ProseMirror ul:not([data-type='taskList']) ul ul li::before {
+  content: '▪' !important;
 }
 
-.tiptap.ProseMirror ul:not([data-type='taskList']) li {
-  position: relative;
-  padding-left: 0;
+.tiptap.ProseMirror ul:not([data-type='taskList']) ul ul ul li::before {
+  content: '•' !important;
 }
 
 .tiptap.ProseMirror ul[data-type='taskList'] {
@@ -176,12 +209,6 @@
   margin: 0;
 }
 
-.tiptap.ProseMirror li::marker {
-  font-size: 16px;
-  line-height: 26px;
-  color: var(--mui-palette-primary-main);
-}
-
 /* code */
 .tiptap.ProseMirror .codeblock-wrapper {
   margin: 20px 0;

package/package.json

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