@ctzhian/tiptap 2.1.11 → 2.1.13

package/dist/contants/slash-commands.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AttachmentLineIcon, CodeBoxLineIcon, CodeLineIcon, DoubleQuotesLIcon, EmotionLineIcon, FlowChartIcon, FunctionsIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, H6Icon, ImageLineIcon, Information2LineIcon, LinkIcon, ListCheck2Icon, ListOrdered2Icon, ListUnorderedIcon, MenuFold2FillIcon, MovieLineIcon, Music2LineIcon, SeparatorIcon, SquareRootIcon, Table2Icon, WindowFillIcon } from "../component/Icons";
+import { AttachmentLineIcon, BilibiliLineIcon, CodeBoxLineIcon, CodeLineIcon, DoubleQuotesLIcon, EmotionLineIcon, FlowChartIcon, FunctionsIcon, H1Icon, H2Icon, H3Icon, ImageLineIcon, Information2LineIcon, LinkIcon, ListCheck2Icon, ListOrdered2Icon, ListUnorderedIcon, MenuFold2FillIcon, MovieLineIcon, Music2LineIcon, SeparatorIcon, SquareRootIcon, Table2Icon, WindowFillIcon } from "../component/Icons";
 export var slashCommands = [{
   title: '标题1',
   shortcutKey: ['ctrl', 'alt', '1'],
@@ -45,10 +45,35 @@ export var slashCommands = [{
       level: 3
     }).run();
   }
-}, {
-  title: '标题4',
-  shortcutKey: ['ctrl', 'alt', '4'],
-  icon: /*#__PURE__*/React.createElement(H4Icon, {
+},
+// {
+//   title: '标题4',
+//   shortcutKey: ['ctrl', 'alt', '4'],
+//   icon: <H4Icon sx={{ fontSize: '1rem' }} />,
+//   command: ({ editor, range }: { editor: Editor; range: { from: number; to: number } }) => {
+//     editor.chain().focus().deleteRange(range).setNode('heading', { level: 4 }).run()
+//   }
+// },
+// {
+//   title: '标题5',
+//   shortcutKey: ['ctrl', 'alt', '5'],
+//   icon: <H5Icon sx={{ fontSize: '1rem' }} />,
+//   command: ({ editor, range }: { editor: Editor; range: { from: number; to: number } }) => {
+//     editor.chain().focus().deleteRange(range).setNode('heading', { level: 5 }).run()
+//   }
+// },
+// {
+//   title: '标题6',
+//   shortcutKey: ['ctrl', 'alt', '6'],
+//   icon: <H6Icon sx={{ fontSize: '1rem' }} />,
+//   command: ({ editor, range }: { editor: Editor; range: { from: number; to: number } }) => {
+//     editor.chain().focus().deleteRange(range).setNode('heading', { level: 6 }).run()
+//   }
+// },
+{
+  title: '有序列表',
+  shortcutKey: ['ctrl', 'shift', '7'],
+  icon: /*#__PURE__*/React.createElement(ListOrdered2Icon, {
     sx: {
       fontSize: '1rem'
     }
@@ -56,14 +81,12 @@ export var slashCommands = [{
   command: function command(_ref4) {
     var editor = _ref4.editor,
       range = _ref4.range;
-    editor.chain().focus().deleteRange(range).setNode('heading', {
-      level: 4
-    }).run();
+    editor.chain().focus().deleteRange(range).toggleOrderedList().run();
   }
 }, {
-  title: '标题5',
-  shortcutKey: ['ctrl', 'alt', '5'],
-  icon: /*#__PURE__*/React.createElement(H5Icon, {
+  title: '无序列表',
+  shortcutKey: ['ctrl', 'shift', '8'],
+  icon: /*#__PURE__*/React.createElement(ListUnorderedIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -71,14 +94,12 @@ export var slashCommands = [{
   command: function command(_ref5) {
     var editor = _ref5.editor,
       range = _ref5.range;
-    editor.chain().focus().deleteRange(range).setNode('heading', {
-      level: 5
-    }).run();
+    editor.chain().focus().deleteRange(range).toggleBulletList().run();
   }
 }, {
-  title: '标题6',
-  shortcutKey: ['ctrl', 'alt', '6'],
-  icon: /*#__PURE__*/React.createElement(H6Icon, {
+  title: '任务列表',
+  shortcutKey: ['ctrl', 'shift', '9'],
+  icon: /*#__PURE__*/React.createElement(ListCheck2Icon, {
     sx: {
       fontSize: '1rem'
     }
@@ -86,14 +107,12 @@ export var slashCommands = [{
   command: function command(_ref6) {
     var editor = _ref6.editor,
       range = _ref6.range;
-    editor.chain().focus().deleteRange(range).setNode('heading', {
-      level: 6
-    }).run();
+    editor.chain().focus().deleteRange(range).toggleTaskList().run();
   }
 }, {
-  title: '有序列表',
-  shortcutKey: ['ctrl', 'shift', '7'],
-  icon: /*#__PURE__*/React.createElement(ListOrdered2Icon, {
+  title: '链接',
+  shortcutKey: ['ctrl', '1'],
+  icon: /*#__PURE__*/React.createElement(LinkIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -101,12 +120,14 @@ export var slashCommands = [{
   command: function command(_ref7) {
     var editor = _ref7.editor,
       range = _ref7.range;
-    editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+    editor.chain().focus().deleteRange(range).setInlineLink({
+      href: ''
+    }).run();
   }
 }, {
-  title: '无序列表',
-  shortcutKey: ['ctrl', 'shift', '8'],
-  icon: /*#__PURE__*/React.createElement(ListUnorderedIcon, {
+  title: '行内代码',
+  shortcutKey: ['ctrl', 'E'],
+  icon: /*#__PURE__*/React.createElement(CodeLineIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -114,12 +135,12 @@ export var slashCommands = [{
   command: function command(_ref8) {
     var editor = _ref8.editor,
       range = _ref8.range;
-    editor.chain().focus().deleteRange(range).toggleBulletList().run();
+    editor.chain().focus().deleteRange(range).setMark('code').run();
   }
 }, {
-  title: '任务列表',
-  shortcutKey: ['ctrl', 'shift', '9'],
-  icon: /*#__PURE__*/React.createElement(ListCheck2Icon, {
+  title: '代码块',
+  shortcutKey: ['ctrl', 'alt', 'C'],
+  icon: /*#__PURE__*/React.createElement(CodeBoxLineIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -127,11 +148,12 @@ export var slashCommands = [{
   command: function command(_ref9) {
     var editor = _ref9.editor,
       range = _ref9.range;
-    editor.chain().focus().deleteRange(range).toggleTaskList().run();
+    editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
   }
 }, {
-  title: '表情',
-  icon: /*#__PURE__*/React.createElement(EmotionLineIcon, {
+  title: '折叠面板',
+  shortcutKey: ['ctrl', '8'],
+  icon: /*#__PURE__*/React.createElement(MenuFold2FillIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -139,11 +161,12 @@ export var slashCommands = [{
   command: function command(_ref10) {
     var editor = _ref10.editor,
       range = _ref10.range;
-    editor.chain().deleteRange(range).insertContentAt(range.from, ' : ').focus(range.from + 2).run();
+    editor.chain().focus().deleteRange(range).setDetails().run();
   }
 }, {
-  title: '分割线',
-  icon: /*#__PURE__*/React.createElement(SeparatorIcon, {
+  title: '引用',
+  shortcutKey: ['ctrl', 'shift', 'B'],
+  icon: /*#__PURE__*/React.createElement(DoubleQuotesLIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -151,12 +174,11 @@ export var slashCommands = [{
   command: function command(_ref11) {
     var editor = _ref11.editor,
       range = _ref11.range;
-    editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+    editor.chain().focus().deleteRange(range).toggleBlockquote().run();
   }
 }, {
-  title: '引用',
-  shortcutKey: ['ctrl', 'shift', 'B'],
-  icon: /*#__PURE__*/React.createElement(DoubleQuotesLIcon, {
+  title: '流程图',
+  icon: /*#__PURE__*/React.createElement(FlowChartIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -164,12 +186,14 @@ export var slashCommands = [{
   command: function command(_ref12) {
     var editor = _ref12.editor,
       range = _ref12.range;
-    editor.chain().focus().deleteRange(range).toggleBlockquote().run();
+    editor.chain().focus().deleteRange(range).setFlow({
+      code: '',
+      width: '100%'
+    }).run();
   }
 }, {
-  title: '行内代码',
-  shortcutKey: ['ctrl', 'E'],
-  icon: /*#__PURE__*/React.createElement(CodeLineIcon, {
+  title: '表情',
+  icon: /*#__PURE__*/React.createElement(EmotionLineIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -177,12 +201,11 @@ export var slashCommands = [{
   command: function command(_ref13) {
     var editor = _ref13.editor,
       range = _ref13.range;
-    editor.chain().focus().deleteRange(range).setMark('code').run();
+    editor.chain().deleteRange(range).insertContentAt(range.from, ' : ').focus(range.from + 2).run();
   }
 }, {
-  title: '代码块',
-  shortcutKey: ['ctrl', 'alt', 'C'],
-  icon: /*#__PURE__*/React.createElement(CodeBoxLineIcon, {
+  title: '分割线',
+  icon: /*#__PURE__*/React.createElement(SeparatorIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -190,12 +213,11 @@ export var slashCommands = [{
   command: function command(_ref14) {
     var editor = _ref14.editor,
       range = _ref14.range;
-    editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
+    editor.chain().focus().deleteRange(range).setHorizontalRule().run();
   }
 }, {
-  title: '链接',
-  shortcutKey: ['ctrl', '1'],
-  icon: /*#__PURE__*/React.createElement(LinkIcon, {
+  title: 'Bilibili 视频',
+  icon: /*#__PURE__*/React.createElement(BilibiliLineIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -203,14 +225,16 @@ export var slashCommands = [{
   command: function command(_ref15) {
     var editor = _ref15.editor,
       range = _ref15.range;
-    editor.chain().focus().deleteRange(range).setInlineLink({
-      href: ''
+    editor.chain().focus().deleteRange(range).setIframe({
+      src: '',
+      width: '100%',
+      height: 400,
+      type: 'bilibili'
     }).run();
   }
 }, {
-  title: '折叠面板',
-  shortcutKey: ['ctrl', '8'],
-  icon: /*#__PURE__*/React.createElement(MenuFold2FillIcon, {
+  title: 'Iframe',
+  icon: /*#__PURE__*/React.createElement(WindowFillIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -218,37 +242,11 @@ export var slashCommands = [{
   command: function command(_ref16) {
     var editor = _ref16.editor,
       range = _ref16.range;
-    editor.chain().focus().deleteRange(range).setDetails().run();
-  }
-}, {
-  title: '流程图',
-  icon: /*#__PURE__*/React.createElement(FlowChartIcon, {
-    sx: {
-      fontSize: '1rem'
-    }
-  }),
-  command: function command(_ref17) {
-    var editor = _ref17.editor,
-      range = _ref17.range;
-    editor.chain().focus().deleteRange(range).setFlow({
-      code: '',
-      width: '100%'
-    }).run();
-  }
-}, {
-  title: 'iframe',
-  icon: /*#__PURE__*/React.createElement(WindowFillIcon, {
-    sx: {
-      fontSize: '1rem'
-    }
-  }),
-  command: function command(_ref18) {
-    var editor = _ref18.editor,
-      range = _ref18.range;
     editor.chain().focus().deleteRange(range).setIframe({
       src: '',
-      width: 760,
-      height: 400
+      width: '100%',
+      height: 400,
+      type: 'iframe'
     }).run();
   }
 }, {
@@ -259,10 +257,10 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref19) {
-    var editor = _ref19.editor,
-      range = _ref19.range,
-      attrs = _ref19.attrs;
+  command: function command(_ref17) {
+    var editor = _ref17.editor,
+      range = _ref17.range,
+      attrs = _ref17.attrs;
     editor.chain().focus().deleteRange(range).insertTable({
       rows: attrs.rows || 3,
       cols: attrs.cols || 4,
@@ -276,10 +274,10 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref20) {
-    var editor = _ref20.editor,
-      range = _ref20.range,
-      attrs = _ref20.attrs;
+  command: function command(_ref18) {
+    var editor = _ref18.editor,
+      range = _ref18.range,
+      attrs = _ref18.attrs;
     editor.chain().focus().deleteRange(range).toggleAlert({
       type: (attrs === null || attrs === void 0 ? void 0 : attrs.type) || 'icon',
       variant: (attrs === null || attrs === void 0 ? void 0 : attrs.variant) || 'info'
@@ -292,9 +290,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref21) {
-    var editor = _ref21.editor,
-      range = _ref21.range;
+  command: function command(_ref19) {
+    var editor = _ref19.editor,
+      range = _ref19.range;
     editor.chain().focus().deleteRange(range).setDetails().run();
   }
 }, {
@@ -304,9 +302,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref22) {
-    var editor = _ref22.editor,
-      range = _ref22.range;
+  command: function command(_ref20) {
+    var editor = _ref20.editor,
+      range = _ref20.range;
     editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
   }
 }, {
@@ -316,9 +314,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref23) {
-    var editor = _ref23.editor,
-      range = _ref23.range;
+  command: function command(_ref21) {
+    var editor = _ref21.editor,
+      range = _ref21.range;
     editor.chain().focus().deleteRange(range).setInlineMath({
       latex: ''
     }).run();
@@ -330,9 +328,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref24) {
-    var editor = _ref24.editor,
-      range = _ref24.range;
+  command: function command(_ref22) {
+    var editor = _ref22.editor,
+      range = _ref22.range;
     editor.chain().focus().deleteRange(range).setBlockMath({
       latex: ''
     }).run();
@@ -344,9 +342,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref25) {
-    var editor = _ref25.editor,
-      range = _ref25.range;
+  command: function command(_ref23) {
+    var editor = _ref23.editor,
+      range = _ref23.range;
     editor.chain().focus().deleteRange(range).setImage({
       src: '',
       width: 760
@@ -359,9 +357,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref26) {
-    var editor = _ref26.editor,
-      range = _ref26.range;
+  command: function command(_ref24) {
+    var editor = _ref24.editor,
+      range = _ref24.range;
     editor.chain().focus().deleteRange(range).setVideo({
       src: '',
       width: 760
@@ -374,9 +372,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref27) {
-    var editor = _ref27.editor,
-      range = _ref27.range;
+  command: function command(_ref25) {
+    var editor = _ref25.editor,
+      range = _ref25.range;
     editor.chain().focus().deleteRange(range).setAudio({
       src: ''
     }).run();
@@ -388,9 +386,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref28) {
-    var editor = _ref28.editor,
-      range = _ref28.range;
+  command: function command(_ref26) {
+    var editor = _ref26.editor,
+      range = _ref26.range;
     editor.chain().focus().deleteRange(range).setInlineAttachment({
       url: '',
       title: '',

package/dist/extension/component/Iframe/Insert.d.ts

@@ -2,13 +2,15 @@ import { EditorFnProps } from "../../../type";
 import React from "react";
 export type IframeAttributes = {
     src: string;
-    width: number;
+    width: number | string;
     height: number;
+    align: 'left' | 'center' | 'right' | null;
+    type: 'iframe' | 'bilibili';
 };
 type InsertIframeProps = {
     selected: boolean;
     attrs: IframeAttributes;
     updateAttributes: (attrs: IframeAttributes) => void;
 } & EditorFnProps;
-declare const InsertIframe: ({ selected, attrs, updateAttributes, onValidateUrl }: InsertIframeProps) => React.JSX.Element;
+declare const InsertIframe: ({ attrs, updateAttributes, onValidateUrl }: InsertIframeProps) => React.JSX.Element;
 export default InsertIframe;

package/dist/extension/component/Iframe/Insert.js

@@ -9,13 +9,13 @@ 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 { FloatingPopover } from "../../../component/FloatingPopover";
-import { WindowFillIcon } from "../../../component/Icons";
+import { IframeTypeEnums } from "../../../contants/enums";
+import { extractSrcFromIframe } from "../../../util";
 import { Box, Button, Stack, TextField } from "@mui/material";
 import { NodeViewWrapper } from "@tiptap/react";
 import React, { useState } from "react";
 var InsertIframe = function InsertIframe(_ref) {
-  var selected = _ref.selected,
-    attrs = _ref.attrs,
+  var attrs = _ref.attrs,
     updateAttributes = _ref.updateAttributes,
     onValidateUrl = _ref.onValidateUrl;
   var _useState = useState(attrs.src || ''),
@@ -45,7 +45,7 @@ var InsertIframe = function InsertIframe(_ref) {
             return _context.abrupt("return");
           case 2:
             _context.prev = 2;
-            validatedUrl = editUrl.trim();
+            validatedUrl = extractSrcFromIframe(editUrl);
             if (!onValidateUrl) {
               _context.next = 8;
               break;
@@ -58,7 +58,9 @@ var InsertIframe = function InsertIframe(_ref) {
             updateAttributes({
               src: validatedUrl,
               width: attrs.width,
-              height: attrs.height
+              height: attrs.height,
+              align: attrs.align,
+              type: attrs.type
             });
             handleClosePopover();
             _context.next = 14;
@@ -104,20 +106,14 @@ var InsertIframe = function InsertIframe(_ref) {
         bgcolor: 'action.selected'
       }
     }
-  }, /*#__PURE__*/React.createElement(WindowFillIcon, {
-    sx: {
-      fontSize: '1rem',
-      position: 'relative',
-      flexShrink: 0
-    }
-  }), /*#__PURE__*/React.createElement(Box, {
+  }, IframeTypeEnums[attrs.type].icon, /*#__PURE__*/React.createElement(Box, {
     sx: {
       fontSize: '0.875rem',
       position: 'relative',
       flexGrow: 1,
       textAlign: 'left'
     }
-  }, "\u70B9\u51FB\u6B64\u5904\u5D4C\u5165 iframe")), /*#__PURE__*/React.createElement(FloatingPopover, {
+  }, "\u70B9\u51FB\u6B64\u5904\u5D4C\u5165 ", IframeTypeEnums[attrs.type].label)), /*#__PURE__*/React.createElement(FloatingPopover, {
     open: Boolean(anchorEl),
     anchorEl: anchorEl,
     onClose: handleClosePopover,
@@ -130,12 +126,14 @@ var InsertIframe = function InsertIframe(_ref) {
     }
   }, /*#__PURE__*/React.createElement(TextField, {
     fullWidth: true,
+    multiline: true,
+    rows: 5,
     size: "small",
     value: editUrl,
     onChange: function onChange(e) {
       return setEditUrl(e.target.value);
     },
-    placeholder: "\u8F93\u5165\u8981\u5D4C\u5165\u7684 URL"
+    placeholder: "\u8F93\u5165/\u7C98\u8D34\u8981\u5D4C\u5165\u7684 URL"
   }), /*#__PURE__*/React.createElement(Stack, {
     direction: 'row',
     gap: 1

package/dist/extension/component/Iframe/Readonly.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 export type IframeAttributes = {
     src: string;
-    width: number;
+    width: number | string;
     height: number;
+    align: 'left' | 'center' | 'right' | null;
 };
 declare const ReadonlyIframe: ({ attrs }: {
     attrs: IframeAttributes;

package/dist/extension/component/Iframe/Readonly.js

@@ -1,14 +1,23 @@
+import { Box } from '@mui/material';
 import React from 'react';
 var ReadonlyIframe = function ReadonlyIframe(_ref) {
   var attrs = _ref.attrs;
-  return /*#__PURE__*/React.createElement("iframe", {
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      textAlign: attrs.align || undefined
+    }
+  }, /*#__PURE__*/React.createElement("iframe", {
     src: attrs.src,
-    width: attrs.width,
+    width: typeof attrs.width === 'number' ? attrs.width : undefined,
     height: attrs.height,
     style: {
       display: 'block',
-      border: 0
-    }
-  });
+      border: 0,
+      width: typeof attrs.width === 'string' && attrs.width.endsWith('%') ? attrs.width : undefined,
+      maxWidth: '100%'
+    },
+    frameBorder: "0",
+    allowFullScreen: true
+  }));
 };
 export default ReadonlyIframe;