@ctzhian/tiptap 1.13.9 → 2.1.0

package/dist/Editor/demo.js

@@ -6,93 +6,146 @@ 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 EDITABLE = true;
+var DEFAULT_CONTENT_TYPE = 'html';
+var DEFAULT_HTML_CONTENT = "<p></p>\n<h6 id=\"a025f782-910f-4f17-9d0b-8f31f9cde175\" data-toc-id=\"a025f782-910f-4f17-9d0b-8f31f9cde175\"><span data-name=\"page_facing_up\" data-type=\"emoji\">\uD83D\uDCC4</span> \u6587\u672C\u5904\u7406</h6>\n<p>PandaWiki \u662F\u4E00\u6B3E AI \u5927\u6A21<code>\u578B\u9A71\u52A8\u7684\u5F00\u6E90\u77E5\u8BC6\u5E93\u642D</code>\u5EFA\u7CFB\u7EDF\uFF0CF<strong>AQ \u3001 \u535A\u5BA2\u7CFB\u7EDF \uFF0C\u501F\u52A9\u5927\u6A21\u578B\u7684\u529B\u91CF\u4E3A\u4F60\u63D0\u4F9B AI </strong>\u521B\u4F5C \u3001 AI \u95EE\u7B54 \u3001 AI \u641C\u7D22 \u7B49\u80FD\u529B\u3002\u501F<span style=\"color: rgb(90, 141, 218);\">\u52A9\u5927\u6A21\u578B\u7684</span><span style=\"background-color: rgb(255, 204, 188); color: rgb(90, 141, 218);\">\u529B\u91CF\u4E3A\u4F60\u63D0</span><span style=\"color: rgb(90, 141, 218);\">\u4F9B AI \u521B</span>\u4F5C\u80FD\u529B\u3002PandaWiki \u662F<u>\u4E00\u6B3E AI \u5927\u6A21\u578B\u9A71\u52A8\u7684\u5F00\u6E90\u77E5\u8BC6\u5E93\u642D\u5EFA\u7CFB\u7EDF\uFF0C\u5E2E</u>\u52A9\u4F60\u5FEB\u901F\u6784\u5EFA\u667A\u80FD\u5316\u7684 <s><u>\u4EA7\u54C1\u6587\u6863\u3001\u6280\u672F</u></s>\u6587\u6863\u3001FAQ \u3001<s> \u535A\u5BA2\u7CFB\u7EDF \uFF0C\u501F\u52A9\u5927\u6A21\u578B\u7684</s>\u529B\u91CF\u7CFB\u7EDF \uFF0C<span style=\"background-color: rgb(172, 84, 84);\">\u501F\u52A9\u5927\u6A21\u578B\u7684\u529B\u91CF\u4E3A\u4F60\u63D0\u4F9B AI \u521B\u4F5C \u3001 AI \u95EE</span>\u7B54 \u3001 AI \u641C\u7D22 \u7B49\u80FD\u529B\u3002\u7684\u529B\u91CF\u4E3A<mark>\u4F60\u63D0\u4F9B AI \u521B\u4F5C \u3001 AI \u95EE\u7B54 \u3001</mark> AI \u641C\u7D22\u3002</p>\n<h6 id=\"1739ed5e-f03c-4c2f-b763-37505601c935\" data-toc-id=\"1739ed5e-f03c-4c2f-b763-37505601c935\"><span data-name=\"video_camera\" data-type=\"emoji\">\uD83D\uDCF9</span> \u89C6\u9891</h6>\n<video src=\"https://media.w3.org/2010/05/sintel/trailer.mp4\" controls=\"true\" width=\"400\" data-align=\"center\"></video>\n<h6 id=\"746ea233-0e30-44a6-849a-090202217299\" data-toc-id=\"746ea233-0e30-44a6-849a-090202217299\">\u26A0\uFE0F \u8B66\u544A\u5757</h6>\n<div data-id=\"alert_5ysakwbhvqv\" data-variant=\"warning\" data-type=\"icon\" data-node=\"alert\"><p>\u6B64\u65F6\u8FD9\u662F\u4E00\u4E2A\u8B66\u544A\u5757\u3002</p></div>\n<h6 id=\"ebb64062-9efb-4de8-887f-7f8b7f9e54ca\" data-toc-id=\"ebb64062-9efb-4de8-887f-7f8b7f9e54ca\"><span data-name=\"bar_chart\" data-type=\"emoji\">\uD83D\uDCCA</span> \u6D41\u7A0B\u56FE\u64CD\u4F5C</h6>\n<div data-type=\"flow\" data-code=\"mindmap\n  root((mindmap))\n    Origins\n      Long history\n      ::icon(fa fa-book)\n      Popularisation\n        British popular psychology author Tony Buzan\n    Research\n      On effectiveness&lt;br/&gt;and features\n      On Automatic creation\n        Uses\n            Creative techniques\n            Strategic planning\n            Argument mapping\n    Tools\n      Pen and paper\n      Mermaid\" data-width=\"246px\"></div>\n<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>\n<div class=\"tableWrapper\"><div class=\"table-container\"><table style=\"min-width: 661px;\"><colgroup><col style=\"width: 361px;\"><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\" colwidth=\"361\" data-background-color=\"\" data-text-align=\"center\" style=\"text-align: center;\"><p>\u94FE\u63A5</p></th><th class=\"table-header\" colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" style=\"text-align: center;\"><p>\u590D\u6742\u6587\u672C</p></th><th class=\"table-header\" colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" style=\"text-align: center;\"><p>\u56FE\u7247</p></th><th class=\"table-header\" colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" style=\"text-align: center;\"><p>\u9644\u4EF6</p></th></tr><tr class=\"table-row\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"361\" data-background-color=\"\" data-text-align=\"center\" data-vertical-align=\"middle\" style=\"text-align: center; vertical-align: middle;\"><p><a target=\"_blank\" class=\"MuiBox-root css-1ivg9gg\" type=\"icon\" rel=\"noopener noreferrer\" title=\"\u70B9\u51FB\u6B64\u5904\u8DF3\u8F6C\" href=\"http://localhost:8000/components/editor\">\u70B9\u51FB\u6B64\u5904\u8DF3\u8F6C</a></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" data-vertical-align=\"middle\" style=\"text-align: center; vertical-align: middle;\"><p><code>\u77E5</code><span style=\"background-color: rgb(255, 204, 188); color: rgb(90, 141, 218);\">\u529B</span><span style=\"color: rgb(90, 141, 218);\">\u4F9B</span><sup>\u5386</sup><sub>\u53F2</sub><u>\u52A8</u><s>\u5927</s><span style=\"background-color: rgb(172, 84, 84);\">\u501F</span><mark>\u7B54</mark></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" data-vertical-align=\"middle\" style=\"text-align: center; vertical-align: middle;\"><p><img src=\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\" width=\"100\"></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" data-vertical-align=\"middle\" style=\"text-align: center; vertical-align: middle;\"><p><span data-tag=\"attachment\" url=\"\" title=\"\" size=\"0\" data-url=\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\" data-title=\"\u8C01\u662F\u6211\u4EEC\u7684\u654C\u4EBA.txt\" data-size=\"18.27 KB\"></span></p></td></tr><tr class=\"table-row\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"361\" data-background-color=\"\" data-text-align=\"center\" style=\"text-align: center;\"><video src=\"https://media.w3.org/2010/05/sintel/trailer.mp4\" controls=\"true\" width=\"75%\"></video></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" style=\"text-align: center;\"><p></p><p></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" style=\"text-align: center;\"><p></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" style=\"text-align: center;\"><p></p></td></tr></tbody></table></div><div class=\"table-controls\"></div><div class=\"table-selection-overlay-container\"></div></div>\n<p></p>\n";
+var DEFAULT_MARKDOWN_CONTENT = "###### :page_facing_up: \u6587\u672C\u5904\u7406\n\nPandaWiki \u662F\u4E00\u6B3E AI \u5927\u6A21`\u578B\u9A71\u52A8\u7684\u5F00\u6E90\u77E5\u8BC6\u5E93\u642D`\u5EFA\u7CFB\u7EDF\uFF0CF**AQ \u3001 \u535A\u5BA2\u7CFB\u7EDF \uFF0C\u501F\u52A9\u5927\u6A21\u578B\u7684\u529B\u91CF\u4E3A\u4F60\u63D0\u4F9B AI **\u521B\u4F5C \u3001 AI \u95EE\u7B54 \u3001 AI \u641C\u7D22 \u7B49\u80FD\u529B\u3002\u501F\u52A9\u5927\u6A21\u578B\u7684\u529B\u91CF\u4E3A\u4F60\u63D0\u4F9B AI \u521B\u4F5C\u80FD\u529B\u3002PandaWiki \u662F++\u4E00\u6B3E AI \u5927\u6A21\u578B\u9A71\u52A8\u7684\u5F00\u6E90\u77E5\u8BC6\u5E93\u642D\u5EFA\u7CFB\u7EDF\uFF0C\u5E2E++\u52A9\u4F60\u5FEB\u901F\u6784\u5EFA\u667A\u80FD\u5316\u7684 ++~~\u4EA7\u54C1\u6587\u6863\u3001\u6280\u672F~~++\u6587\u6863\u3001FAQ \u3001~~ \u535A\u5BA2\u7CFB\u7EDF \uFF0C\u501F\u52A9\u5927\u6A21\u578B\u7684~~\u529B\u91CF\u7CFB\u7EDF \uFF0C\u501F\u52A9\u5927\u6A21\u578B\u7684\u529B\u91CF\u4E3A\u4F60\u63D0\u4F9B AI \u521B\u4F5C \u3001 AI \u95EE\u7B54 \u3001 AI \u641C\u7D22 \u7B49\u80FD\u529B\u3002\u7684\u529B\u91CF\u4E3A==\u4F60\u63D0\u4F9B AI \u521B\u4F5C \u3001 AI \u95EE\u7B54 \u3001== AI \u641C\u7D22\u3002\n\n###### :video_camera: \u89C6\u9891\n\n<video src=\"https://media.w3.org/2010/05/sintel/trailer.mp4\" width=\"400\" controls     ></video>\n\n###### \u26A0\uFE0F \u8B66\u544A\u5757\n\n:::alert {#alert_5ysakwbhvqv indent=\"0\" variant=\"warning\" type=\"icon\"}\n\n\u6B64\u65F6\u8FD9\u662F\u4E00\u4E2A\u8B66\u544A\u5757\u3002\n\n:::\n\n###### :bar_chart: \u6D41\u7A0B\u56FE\u64CD\u4F5C\n\n```mermaid\nmindmap\n  root((mindmap))\n    Origins\n      Long history\n      ::icon(fa fa-book)\n      Popularisation\n        British popular psychology author Tony Buzan\n    Research\n      On effectiveness<br/>and features\n      On Automatic creation\n        Uses\n            Creative techniques\n            Strategic planning\n            Argument mapping\n    Tools\n      Pen and paper\n      Mermaid\n```\n\n###### :watch: \u8868\u683C\u64CD\u4F5C\n\n\n| \u94FE\u63A5                                                                                          | \u590D\u6742\u6587\u672C                        | \u56FE\u7247                                                                           | \u9644\u4EF6                                                                                                                                       |\n| ------------------------------------------------------------------------------------------- | --------------------------- | ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |\n| [\u70B9\u51FB\u6B64\u5904\u8DF3\u8F6C](http://localhost:8000/components/editor)                                           | `\u77E5`\u529B\u4F9B^\u5386^~\u53F2~++\u52A8++~~\u5927~~\u501F==\u7B54== | ![](https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg) | <a href=\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\" target=\"_blank\" download=\"\u8C01\u662F\u6211\u4EEC\u7684\u654C\u4EBA.txt\">\u8C01\u662F\u6211\u4EEC\u7684\u654C\u4EBA.txt</a> |\n| <video src=\"https://media.w3.org/2010/05/sintel/trailer.mp4\" width=\"75%\" controls ></video> | \x1F                           |                                                                              |                                                                                                                                          |\n\n\n";
 var Reader = function Reader() {
-  var handleTocUpdate = function handleTocUpdate(toc) {
-    console.log('toc', toc);
+  // @ts-ignore
+  var isHtmlMode = DEFAULT_CONTENT_TYPE === 'html';
+  var content = isHtmlMode ? DEFAULT_HTML_CONTENT : DEFAULT_MARKDOWN_CONTENT;
+  var handleSave = function handleSave(editor) {
+    var value = isHtmlMode ? editor.getHTML() : editor.getMarkdown();
+    console.log("\u2B07\uFE0F ========= ".concat(DEFAULT_CONTENT_TYPE, " mode ========= \u2B07\uFE0F"));
+    console.log("%c".concat(JSON.stringify(value)), 'color: #42b983;');
+    console.log("\u2B06\uFE0F ========= end ========= \u2B06\uFE0F");
   };
-  var _useTiptap = useTiptap({
-      editable: true,
-      exclude: ['invisibleCharacters'],
-      contentType: 'markdown',
-      onError: function onError(error) {
-        alert(error.message);
-      },
-      onValidateUrl: function () {
-        var _onValidateUrl = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(url, type) {
-          return _regeneratorRuntime().wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                if (!url.startsWith('data:')) {
-                  _context.next = 2;
-                  break;
-                }
-                throw new Error("\u4E0D\u652F\u6301 base64 \u94FE\u63A5\uFF0C\u8BF7\u4F7F\u7528\u53EF\u8BBF\u95EE\u7684 ".concat(type, " URL"));
-              case 2:
-                _context.t0 = type;
-                _context.next = _context.t0 === 'image' ? 5 : _context.t0 === 'video' ? 7 : _context.t0 === 'audio' ? 9 : _context.t0 === 'iframe' ? 11 : 13;
-                break;
-              case 5:
-                if (!url.match(/\.(jpg|jpeg|png|gif|webp|svg)(\?.*)?$/i)) {
-                  console.warn('图片链接可能不是有效的图片格式');
-                }
-                return _context.abrupt("break", 13);
-              case 7:
-                if (!url.match(/\.(mp4|webm|ogg|mov|avi|wmv|flv|mkv)(\?.*)?$/i)) {
-                  console.warn('视频链接可能不是有效的视频格式');
-                }
-                return _context.abrupt("break", 13);
-              case 9:
-                if (!url.match(/\.(mp3|wav|ogg|m4a|flac|aac|wma)(\?.*)?$/i)) {
-                  console.warn('音频链接可能不是有效的音频格式');
-                }
-                return _context.abrupt("break", 13);
-              case 11:
-                // iframe 可以嵌入任何 URL，但可以检查是否是 HTTPS
-                if (url.startsWith('http://') && !url.includes('localhost')) {
-                  console.warn('建议使用 HTTPS 链接以确保安全性');
+  var handleError = function handleError(error) {
+    alert(error.message);
+  };
+  var handleAiWritingGetSuggestion = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
+      var prefix, suffix;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            prefix = _ref.prefix, suffix = _ref.suffix;
+            console.log('onAiWritingGetSuggestion', prefix, suffix);
+            return _context.abrupt("return", new Promise(function (resolve) {
+              resolve(['this is a default suggestion.', 'we are good.', 'what is your name?', 'how are you?', 'what is your favorite color?', 'what is your favorite food?', 'what is your favorite animal?', 'what is your favorite book?', 'what is your favorite movie?', 'what is your favorite song?', 'what is your favorite artist?', 'what is your favorite band?', 'what is your favorite city?', 'what is your favorite country?', 'what is your favorite sport?'][Math.floor(Math.random() * 10)]);
+            }));
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleAiWritingGetSuggestion(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var handleUpload = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(file, onProgress) {
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            return _context2.abrupt("return", new Promise(function (resolve) {
+              var progress = 0;
+              var interval = setInterval(function () {
+                progress += Math.random() * 20;
+                if (progress >= 100) {
+                  progress = 100;
+                  onProgress === null || onProgress === void 0 || onProgress({
+                    progress: progress / 100
+                  });
+                  clearInterval(interval);
+                  setTimeout(function () {
+                    if (file.type.startsWith('image/')) {
+                      resolve('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
+                    } else if (file.type.startsWith('video/')) {
+                      resolve('http://vjs.zencdn.net/v/oceans.mp4');
+                    } else {
+                      resolve('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
+                    }
+                  }, 200);
+                } else {
+                  onProgress === null || onProgress === void 0 || onProgress({
+                    progress: progress / 100
+                  });
                 }
-                return _context.abrupt("break", 13);
-              case 13:
-                return _context.abrupt("return", url);
-              case 14:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee);
-        }));
-        function onValidateUrl(_x, _x2) {
-          return _onValidateUrl.apply(this, arguments);
+              }, 100);
+            }));
+          case 1:
+          case "end":
+            return _context2.stop();
         }
-        return onValidateUrl;
-      }(),
-      onSave: function onSave(editor) {
-        var value = editor.getMarkdown();
-        console.log(value);
-      },
-      onAiWritingGetSuggestion: function () {
-        var _onAiWritingGetSuggestion = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref) {
-          var prefix, suffix;
-          return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-            while (1) switch (_context2.prev = _context2.next) {
-              case 0:
-                prefix = _ref.prefix, suffix = _ref.suffix;
-                console.log('onAiWritingGetSuggestion', prefix, suffix);
-                return _context2.abrupt("return", new Promise(function (resolve) {
-                  resolve(['this is a default suggestion.', 'we are good.', 'what is your name?', 'how are you?', 'what is your favorite color?', 'what is your favorite food?', 'what is your favorite animal?', 'what is your favorite book?', 'what is your favorite movie?', 'what is your favorite song?', 'what is your favorite artist?', 'what is your favorite band?', 'what is your favorite city?', 'what is your favorite country?', 'what is your favorite sport?'][Math.floor(Math.random() * 10)]);
-                }));
-              case 3:
-              case "end":
-                return _context2.stop();
+      }, _callee2);
+    }));
+    return function handleUpload(_x2, _x3) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var handleTocUpdate = function handleTocUpdate(toc) {
+    // console.log('toc', toc)
+  };
+  var handleValidateUrl = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(url, type) {
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            if (!url.startsWith('data:')) {
+              _context3.next = 2;
+              break;
+            }
+            throw new Error("\u4E0D\u652F\u6301 base64 \u94FE\u63A5\uFF0C\u8BF7\u4F7F\u7528\u53EF\u8BBF\u95EE\u7684 ".concat(type, " URL"));
+          case 2:
+            _context3.t0 = type;
+            _context3.next = _context3.t0 === 'image' ? 5 : _context3.t0 === 'video' ? 7 : _context3.t0 === 'audio' ? 9 : _context3.t0 === 'iframe' ? 11 : 13;
+            break;
+          case 5:
+            if (!url.match(/\.(jpg|jpeg|png|gif|webp|svg)(\?.*)?$/i)) {
+              console.warn('图片链接可能不是有效的图片格式');
+            }
+            return _context3.abrupt("break", 13);
+          case 7:
+            if (!url.match(/\.(mp4|webm|ogg|mov|avi|wmv|flv|mkv)(\?.*)?$/i)) {
+              console.warn('视频链接可能不是有效的视频格式');
+            }
+            return _context3.abrupt("break", 13);
+          case 9:
+            if (!url.match(/\.(mp3|wav|ogg|m4a|flac|aac|wma)(\?.*)?$/i)) {
+              console.warn('音频链接可能不是有效的音频格式');
+            }
+            return _context3.abrupt("break", 13);
+          case 11:
+            // iframe 可以嵌入任何 URL，但可以检查是否是 HTTPS
+            if (url.startsWith('http://') && !url.includes('localhost')) {
+              console.warn('建议使用 HTTPS 链接以确保安全性');
             }
-          }, _callee2);
-        }));
-        function onAiWritingGetSuggestion(_x3) {
-          return _onAiWritingGetSuggestion.apply(this, arguments);
+            return _context3.abrupt("break", 13);
+          case 13:
+            return _context3.abrupt("return", url);
+          case 14:
+          case "end":
+            return _context3.stop();
         }
-        return onAiWritingGetSuggestion;
-      }(),
+      }, _callee3);
+    }));
+    return function handleValidateUrl(_x4, _x5) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  var _useTiptap = useTiptap({
+      editable: EDITABLE,
+      content: content,
+      contentType: DEFAULT_CONTENT_TYPE,
+      exclude: ['invisibleCharacters'],
+      onError: handleError,
+      onValidateUrl: handleValidateUrl,
+      onSave: handleSave,
+      onAiWritingGetSuggestion: handleAiWritingGetSuggestion,
       onTocUpdate: handleTocUpdate,
+      onUpload: handleUpload
       // onMentionFilter: async ({ query }: { query: string }) => {
       //   return new Promise((resolve) => {
       //     resolve([
@@ -112,49 +165,6 @@ var Reader = function Reader() {
       //       .slice(0, 5))
       //   })
       // },
-      onUpload: function () {
-        var _onUpload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(file, onProgress) {
-          return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-            while (1) switch (_context3.prev = _context3.next) {
-              case 0:
-                return _context3.abrupt("return", new Promise(function (resolve) {
-                  var progress = 0;
-                  var interval = setInterval(function () {
-                    progress += Math.random() * 20;
-                    if (progress >= 100) {
-                      progress = 100;
-                      onProgress === null || onProgress === void 0 || onProgress({
-                        progress: progress / 100
-                      });
-                      clearInterval(interval);
-                      setTimeout(function () {
-                        if (file.type.startsWith('image/')) {
-                          resolve('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
-                        } else if (file.type.startsWith('video/')) {
-                          resolve('http://vjs.zencdn.net/v/oceans.mp4');
-                        } else {
-                          resolve('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
-                        }
-                      }, 200);
-                    } else {
-                      onProgress === null || onProgress === void 0 || onProgress({
-                        progress: progress / 100
-                      });
-                    }
-                  }, 100);
-                }));
-              case 1:
-              case "end":
-                return _context3.stop();
-            }
-          }, _callee3);
-        }));
-        function onUpload(_x4, _x5) {
-          return _onUpload.apply(this, arguments);
-        }
-        return onUpload;
-      }(),
-      content: defaultContent
     }),
     editor = _useTiptap.editor;
   return /*#__PURE__*/React.createElement(EditorThemeProvider, {

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/EditorToolbar/index.js

@@ -1,3 +1,9 @@
+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); }
 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); }
@@ -9,7 +15,7 @@ import { useEditorState } from '@tiptap/react';
 import React from 'react';
 import { AiGenerate2Icon, ArrowGoBackLineIcon, ArrowGoForwardLineIcon, BoldIcon, CodeBoxLineIcon, CollapseHorizontalLine, EraserLineIcon, ExpandHorizontalLineIcon, ItalicIcon, LinkIcon, MarkPenLineIcon, StrikethroughIcon, SubscriptIcon, SuperscriptIcon, UnderlineIcon } from "../component/Icons";
 import { EditorAlignSelect, EditorFontBgColor, EditorFontColor, EditorFontSize, EditorHeading, EditorInsert, EditorListSelect, EditorMore, EditorVerticalAlignSelect, ToolbarItem } from "../component/Toolbar";
-import { hasMarksInSelection } from "../util";
+import { getLinkAttributesWithSelectedText, hasMarksInSelection } from "../util";
 var EditorToolbar = function EditorToolbar(_ref) {
   var editor = _ref.editor,
     menuInToolbarMore = _ref.menuInToolbarMore,
@@ -299,14 +305,10 @@ var EditorToolbar = function EditorToolbar(_ref) {
       }
     }),
     onClick: function onClick() {
-      var selection = editor.state.selection;
-      var start = selection.from;
-      var end = selection.to;
-      var text = editor.state.doc.textBetween(start, end, '');
-      editor.chain().focus().setInlineLink({
-        href: '',
-        title: text
-      }).run();
+      var linkAttributes = getLinkAttributesWithSelectedText(editor);
+      editor.chain().focus().setInlineLink(_objectSpread({
+        href: ''
+      }, linkAttributes)).run();
     },
     className: isLink ? 'tool-active' : ''
   }), !isSimpleMode && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorAlignSelect, {

package/dist/asset/css/index.css

@@ -80,11 +80,6 @@
   border-color: var(--mui-palette-text-disabled);
 }
 
-.tiptap.ProseMirror .react-renderer {
-  margin-bottom: 1rem;
-  line-height: 1;
-}
-
 .tiptap.ProseMirror .react-renderer.node-image,
 .tiptap.ProseMirror .react-renderer.node-inlineLink,
 .tiptap.ProseMirror .react-renderer.node-inlineAttachment,
@@ -117,10 +112,13 @@
 
 .tiptap.ProseMirror .video-wrapper,
 .tiptap.ProseMirror .image-wrapper {
-  display: inline-block;
   box-sizing: border-box;
-  text-align: center;
   line-height: 1;
+
+}
+
+.tiptap.ProseMirror .image-wrapper {
+  display: inline-block;
 }
 
 .tiptap.ProseMirror .image-wrapper img {

package/dist/component/ActionDropdown/index.d.ts

@@ -20,6 +20,11 @@ export interface ActionDropdownProps {
     anchorOrigin?: PopoverOrigin;
     /** Popover 变换位置 */
     transformOrigin?: PopoverOrigin;
+    /** 当没有选中值时的默认显示内容 */
+    defaultDisplay?: {
+        icon?: React.ReactNode;
+        label?: string;
+    };
 }
 declare const ActionDropdown: React.FC<ActionDropdownProps>;
 export default ActionDropdown;

package/dist/component/ActionDropdown/index.js

@@ -33,7 +33,8 @@ var ActionDropdown = function ActionDropdown(_ref) {
     transformOrigin = _ref$transformOrigin === void 0 ? {
       vertical: 'top',
       horizontal: 'left'
-    } : _ref$transformOrigin;
+    } : _ref$transformOrigin,
+    defaultDisplay = _ref.defaultDisplay;
   var _React$useState = React.useState(null),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     anchorEl = _React$useState2[0],
@@ -45,6 +46,10 @@ var ActionDropdown = function ActionDropdown(_ref) {
       return item.key === selected;
     });
   }, [list, selected]);
+
+  // 获取显示的图标和标签
+  var displayIcon = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) || (defaultDisplay === null || defaultDisplay === void 0 ? void 0 : defaultDisplay.icon);
+  var displayLabel = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) || (defaultDisplay === null || defaultDisplay === void 0 ? void 0 : defaultDisplay.label) || '';
   var handleClick = function handleClick(event) {
     event.stopPropagation();
     setAnchorEl(event.currentTarget);
@@ -67,14 +72,14 @@ var ActionDropdown = function ActionDropdown(_ref) {
   var open = Boolean(anchorEl);
   var curId = open ? id : undefined;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolbarItem, {
-    icon: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon,
+    icon: displayIcon,
     text: /*#__PURE__*/React.createElement(Stack, {
       direction: "row",
       alignItems: "center",
       gap: 0.5
     }, /*#__PURE__*/React.createElement(Box, {
       component: "span"
-    }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label), /*#__PURE__*/React.createElement(ArrowDownSLineIcon, {
+    }, displayLabel), /*#__PURE__*/React.createElement(ArrowDownSLineIcon, {
       sx: {
         fontSize: 16,
         transition: 'transform 0.2s ease-in-out',

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/FloatingPopover/index.d.ts

@@ -1,4 +1,4 @@
-import { Strategy, VirtualElement } from '@floating-ui/dom';
+import { Placement, Strategy, VirtualElement } from '@floating-ui/dom';
 import React from 'react';
 export interface FloatingPopoverProps {
     open: boolean;
@@ -6,7 +6,7 @@ export interface FloatingPopoverProps {
     onClose: () => void;
     children: React.ReactNode;
     strategy?: Strategy;
-    placement?: 'top' | 'bottom' | 'left' | 'right';
+    placement?: Placement;
     offset?: number;
     className?: string;
     style?: React.CSSProperties;

package/dist/component/HoverPopover/index.d.ts

@@ -18,6 +18,8 @@ export interface HoverPopoverProps {
     className?: string;
     /** 样式对象 */
     style?: React.CSSProperties;
+    /** 是否保持打开状态（用于点击 action 按钮触发弹框时保持打开） */
+    keepOpen?: boolean;
 }
 /**
  * HoverPopover 组件

package/dist/component/HoverPopover/index.js

@@ -26,7 +26,9 @@ export var HoverPopover = function HoverPopover(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     className = _ref.className,
-    style = _ref.style;
+    style = _ref.style,
+    _ref$keepOpen = _ref.keepOpen,
+    keepOpen = _ref$keepOpen === void 0 ? false : _ref$keepOpen;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     anchorEl = _useState2[0],
@@ -35,6 +37,13 @@ export var HoverPopover = function HoverPopover(_ref) {
   var closeTimerRef = useRef(null);
   var childRef = useRef(null);
 
+  // 当 keepOpen 为 true 时，确保 anchorEl 不为 null
+  useEffect(function () {
+    if (keepOpen && !anchorEl && childRef.current) {
+      setAnchorEl(childRef.current);
+    }
+  }, [keepOpen, anchorEl]);
+
   // 清理定时器
   useEffect(function () {
     return function () {
@@ -71,7 +80,7 @@ export var HoverPopover = function HoverPopover(_ref) {
     hoverTimerRef.current = timer;
   };
   var handleMouseLeave = function handleMouseLeave() {
-    if (disabled) {
+    if (disabled || keepOpen) {
       return;
     }
 
@@ -109,10 +118,20 @@ export var HoverPopover = function HoverPopover(_ref) {
   var handlePopoverMouseLeave = function handlePopoverMouseLeave(event) {
     event.stopPropagation();
 
+    // 如果 keepOpen 为 true，不关闭
+    if (keepOpen) {
+      return;
+    }
+
     // 鼠标离开 popover，延迟关闭
     handleMouseLeave();
   };
   var handleForceClose = function handleForceClose() {
+    // 如果 keepOpen 为 true，不关闭
+    if (keepOpen) {
+      return;
+    }
+
     // 强制关闭，清除所有定时器
     if (hoverTimerRef.current) {
       clearTimeout(hoverTimerRef.current);
@@ -128,7 +147,7 @@ export var HoverPopover = function HoverPopover(_ref) {
     ref: childRef,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
-    className: className,
+    className: "hover-popover-child ".concat(className || ''),
     style: style
   }, children), /*#__PURE__*/React.createElement(FloatingPopover, {
     open: Boolean(anchorEl),