@ctzhian/tiptap 1.3.3 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -81,7 +81,7 @@ var Reader = function Reader() {
81
81
  }
82
82
  return onUpload;
83
83
  }(),
84
- content: "<iframe class=\"iframe-wrapper\" width=\"760\" height=\"400\" src=\"https://bbs.chaitin.cn/user/signin?ref=%2F\" frameborder=\"0\" allowfullscreen=\"true\"></iframe><p></p>"
84
+ content: ""
85
85
  }),
86
86
  editor = _useTiptap.editor;
87
87
  return /*#__PURE__*/React.createElement(EditorThemeProvider, {
@@ -8,6 +8,7 @@ import { Box, Divider, Stack } from '@mui/material';
8
8
  import React, { useEffect, useState } from 'react';
9
9
  import { ArrowGoBackLineIcon, ArrowGoForwardLineIcon, BoldIcon, DoubleQuotesLIcon, Information2LineIcon, ItalicIcon, LinkIcon, MenuFold2FillIcon, StrikethroughIcon, Table2Icon, UnderlineIcon, WindowFillIcon } from "../component/Icons";
10
10
  import { EditorAlignSelect, EditorCode, EditorFontBgColor, EditorFontColor, EditorFontSize, EditorHeading, EditorInsert, EditorListSelect, EditorMath, EditorMore, EditorScript, EditorVerticalAlignSelect, ToolbarItem } from "../component/Toolbar";
11
+ import TableSizePicker from "../component/Toolbar/TableSizePicker";
11
12
  var EditorToolbar = function EditorToolbar(_ref) {
12
13
  var editor = _ref.editor,
13
14
  menuInToolbarMore = _ref.menuInToolbarMore;
@@ -279,14 +280,16 @@ var EditorToolbar = function EditorToolbar(_ref) {
279
280
  fontSize: '1rem'
280
281
  }
281
282
  }),
282
- onClick: function onClick() {
283
- return editor.commands.insertTable({
284
- rows: 3,
285
- cols: 4,
286
- withHeaderRow: true
287
- });
288
- },
289
- className: active.table ? 'tool-active' : ''
283
+ className: active.table ? 'tool-active' : '',
284
+ customComponent: /*#__PURE__*/React.createElement(TableSizePicker, {
285
+ onConfirm: function onConfirm(cols, rows) {
286
+ editor.chain().focus().insertTable({
287
+ rows: rows,
288
+ cols: cols,
289
+ withHeaderRow: true
290
+ }).run();
291
+ }
292
+ })
290
293
  }), /*#__PURE__*/React.createElement(ToolbarItem, {
291
294
  tip: 'iframe',
292
295
  icon: /*#__PURE__*/React.createElement(WindowFillIcon, {
@@ -12,7 +12,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
12
12
  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; }
13
13
  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; } }
14
14
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
15
- import { AlignBottomIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AlignTopIcon, ArrowDownSLineIcon, AttachmentLineIcon, BrushLineIcon, CodeBoxLineIcon, DeleteLineIcon, DownloadLineIcon, DraggableIcon, FontSizeIcon, FormatClearIcon, H1Icon, H2Icon, H3Icon, ImageLineIcon, Information2LineIcon, ListCheck3Icon, ListOrdered2Icon, ListUnorderedIcon, MovieLineIcon, Music2LineIcon, QuoteTextIcon, Repeat2LineIcon, ScissorsCutLineIcon, SeparatorIcon, TextIcon, TextWrapIcon } from "../Icons";
15
+ import { AlignBottomIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AlignTopIcon, ArrowDownSLineIcon, AttachmentLineIcon, BrushLineIcon, DeleteLineIcon, DownloadLineIcon, DraggableIcon, FontSizeIcon, FormatClearIcon, H1Icon, H2Icon, H3Icon, ImageLineIcon, Information2LineIcon, ListCheck3Icon, ListOrdered2Icon, ListUnorderedIcon, MovieLineIcon, Music2LineIcon, QuoteTextIcon, Repeat2LineIcon, ScissorsCutLineIcon, SeparatorIcon, TextIcon, TextWrapIcon } from "../Icons";
16
16
  import { NODE_TYPE_LABEL, NodeTypeEnum } from "../../contants/enums";
17
17
  import { Box, Divider, Stack, Typography, useTheme } from '@mui/material';
18
18
  import DragHandle from '@tiptap/extension-drag-handle-react';
@@ -57,7 +57,7 @@ var DragIcon = function DragIcon(_ref) {
57
57
  }));
58
58
  };
59
59
  var CustomDragHandle = function CustomDragHandle(_ref2) {
60
- var _current$node3, _current$node4, _current$node5, _current$node6, _current$node7, _current$node8, _current$node9, _current$node10, _current$node11, _current$node12, _current$node13, _current$node14, _current$node15, _current$node16, _current$node17;
60
+ var _current$node3, _current$node4, _current$node5, _current$node6, _current$node7, _current$node8, _current$node9, _current$node10, _current$node11, _current$node12, _current$node13, _current$node14, _current$node15, _current$node16;
61
61
  var editor = _ref2.editor,
62
62
  more = _ref2.more,
63
63
  onTip = _ref2.onTip;
@@ -743,32 +743,9 @@ var CustomDragHandle = function CustomDragHandle(_ref2) {
743
743
  current.editor.commands.toggleBlockquote();
744
744
  }
745
745
  }
746
- }, {
747
- label: '代码块',
748
- selected: ((_current$node14 = current.node) === null || _current$node14 === void 0 ? void 0 : _current$node14.type.name) === 'codeBlock',
749
- key: 'convert-to-code-block',
750
- icon: /*#__PURE__*/React.createElement(CodeBoxLineIcon, {
751
- sx: {
752
- fontSize: '1rem'
753
- }
754
- }),
755
- onClick: function onClick() {
756
- if (!current.node) return;
757
- var type = current.node.type.name;
758
- var groupTypes = [NodeTypeEnum.BulletList, NodeTypeEnum.OrderedList, NodeTypeEnum.TaskList, NodeTypeEnum.Blockquote, NodeTypeEnum.CodeBlock, NodeTypeEnum.Alert];
759
- if (groupTypes.includes(type)) {
760
- convertNodeAt(current.editor, current.pos, current.node, {
761
- type: 'codeBlock'
762
- });
763
- } else {
764
- selectCurrentNode();
765
- cancelNodeType();
766
- current.editor.commands.toggleCodeBlock();
767
- }
768
- }
769
746
  }, {
770
747
  label: '警告提示',
771
- selected: ((_current$node15 = current.node) === null || _current$node15 === void 0 ? void 0 : _current$node15.type.name) === 'alert',
748
+ selected: ((_current$node14 = current.node) === null || _current$node14 === void 0 ? void 0 : _current$node14.type.name) === 'alert',
772
749
  key: 'convert-to-alert',
773
750
  icon: /*#__PURE__*/React.createElement(Information2LineIcon, {
774
751
  sx: {
@@ -797,7 +774,7 @@ var CustomDragHandle = function CustomDragHandle(_ref2) {
797
774
  }
798
775
  }
799
776
  }]
800
- }] : []), _toConsumableArray(currentNode !== null && currentNode !== void 0 && currentNode.download && ((_current$node16 = current.node) !== null && _current$node16 !== void 0 && _current$node16.attrs.src || (_current$node17 = current.node) !== null && _current$node17 !== void 0 && _current$node17.attrs.src) ? [{
777
+ }] : []), _toConsumableArray(currentNode !== null && currentNode !== void 0 && currentNode.download && ((_current$node15 = current.node) !== null && _current$node15 !== void 0 && _current$node15.attrs.src || (_current$node16 = current.node) !== null && _current$node16 !== void 0 && _current$node16.attrs.src) ? [{
801
778
  label: "\u4E0B\u8F7D".concat(currentNode === null || currentNode === void 0 ? void 0 : currentNode.label),
802
779
  key: 'download',
803
780
  icon: /*#__PURE__*/React.createElement(DownloadLineIcon, {
@@ -807,7 +784,7 @@ var CustomDragHandle = function CustomDragHandle(_ref2) {
807
784
  }),
808
785
  onClick: function () {
809
786
  var _onClick = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
810
- var _current$node18, node, nodeFile, nodeBlob, nodeUrl, nodeName, a;
787
+ var _current$node17, node, nodeFile, nodeBlob, nodeUrl, nodeName, a;
811
788
  return _regeneratorRuntime().wrap(function _callee$(_context) {
812
789
  while (1) switch (_context.prev = _context.next) {
813
790
  case 0:
@@ -815,7 +792,7 @@ var CustomDragHandle = function CustomDragHandle(_ref2) {
815
792
  _context.next = 16;
816
793
  break;
817
794
  }
818
- if (![NodeTypeEnum.Video, NodeTypeEnum.Audio, NodeTypeEnum.BlockAttachment].includes((_current$node18 = current.node) === null || _current$node18 === void 0 ? void 0 : _current$node18.type.name)) {
795
+ if (![NodeTypeEnum.Video, NodeTypeEnum.Audio, NodeTypeEnum.BlockAttachment].includes((_current$node17 = current.node) === null || _current$node17 === void 0 ? void 0 : _current$node17.type.name)) {
819
796
  _context.next = 16;
820
797
  break;
821
798
  }
@@ -96,6 +96,17 @@ var EditorAlignSelect = function EditorAlignSelect(_ref) {
96
96
  value: selectedValue,
97
97
  className: ['left', 'center', 'right', 'justify'].includes(selectedValue) ? "tool-active" : "",
98
98
  onChange: handleChange,
99
+ sx: {
100
+ bgcolor: 'transparent',
101
+ '&:hover .MuiOutlinedInput-notchedOutline': {
102
+ borderWidth: '0px !important',
103
+ borderColor: 'transparent !important'
104
+ },
105
+ '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
106
+ borderWidth: '0px !important',
107
+ borderColor: 'transparent !important'
108
+ }
109
+ },
99
110
  renderValue: function renderValue(value) {
100
111
  var _AlignOptions$find;
101
112
  return /*#__PURE__*/React.createElement(ToolbarItem, {
@@ -70,6 +70,17 @@ var EditorCode = function EditorCode(_ref) {
70
70
  value: selectedValue,
71
71
  className: ['code', 'codeBlock'].includes(selectedValue) ? "tool-active" : "",
72
72
  onChange: handleChange,
73
+ sx: {
74
+ bgcolor: 'transparent',
75
+ '&:hover .MuiOutlinedInput-notchedOutline': {
76
+ borderWidth: '0px !important',
77
+ borderColor: 'transparent !important'
78
+ },
79
+ '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
80
+ borderWidth: '0px !important',
81
+ borderColor: 'transparent !important'
82
+ }
83
+ },
73
84
  renderValue: function renderValue(value) {
74
85
  var _AlignOptions$find;
75
86
  return /*#__PURE__*/React.createElement(ToolbarItem, {
@@ -76,6 +76,17 @@ var EditorFontSize = function EditorFontSize(_ref) {
76
76
  return /*#__PURE__*/React.createElement(Select, {
77
77
  value: selectedValue,
78
78
  onChange: handleChange,
79
+ sx: {
80
+ bgcolor: 'transparent',
81
+ '&:hover .MuiOutlinedInput-notchedOutline': {
82
+ borderWidth: '0px !important',
83
+ borderColor: 'transparent !important'
84
+ },
85
+ '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
86
+ borderWidth: '0px !important',
87
+ borderColor: 'transparent !important'
88
+ }
89
+ },
79
90
  renderValue: function renderValue(value) {
80
91
  return /*#__PURE__*/React.createElement(ToolbarItem, {
81
92
  tip: '文字大小',
@@ -111,6 +111,17 @@ var EditorHeading = function EditorHeading(_ref) {
111
111
  value: selectedValue,
112
112
  className: ['1', '2', '3', '4', '5', '6'].includes(String(selectedValue)) ? "tool-active" : "",
113
113
  onChange: handleChange,
114
+ sx: {
115
+ bgcolor: 'transparent',
116
+ '&:hover .MuiOutlinedInput-notchedOutline': {
117
+ borderWidth: '0px !important',
118
+ borderColor: 'transparent !important'
119
+ },
120
+ '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
121
+ borderWidth: '0px !important',
122
+ borderColor: 'transparent !important'
123
+ }
124
+ },
114
125
  renderValue: function renderValue(value) {
115
126
  var _HeadingOptions$find;
116
127
  return /*#__PURE__*/React.createElement(ToolItem, {
@@ -110,6 +110,17 @@ var EditorInsert = function EditorInsert(_ref) {
110
110
  value: selectedValue,
111
111
  className: ['image', 'video', 'audio', 'attachment'].includes(selectedValue) ? "tool-active" : "",
112
112
  onChange: handleChange,
113
+ sx: {
114
+ bgcolor: 'transparent',
115
+ '&:hover .MuiOutlinedInput-notchedOutline': {
116
+ borderWidth: '0px !important',
117
+ borderColor: 'transparent !important'
118
+ },
119
+ '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
120
+ borderWidth: '0px !important',
121
+ borderColor: 'transparent !important'
122
+ }
123
+ },
113
124
  renderValue: function renderValue(value) {
114
125
  var _InsertOptions$find;
115
126
  return /*#__PURE__*/React.createElement(ToolbarItem, {
@@ -83,6 +83,17 @@ var EditorListSelect = function EditorListSelect(_ref) {
83
83
  value: selectedValue,
84
84
  className: ['orderedList', 'taskList', 'bulletList'].includes(selectedValue) ? "tool-active" : "",
85
85
  onChange: handleChange,
86
+ sx: {
87
+ bgcolor: 'transparent',
88
+ '&:hover .MuiOutlinedInput-notchedOutline': {
89
+ borderWidth: '0px !important',
90
+ borderColor: 'transparent !important'
91
+ },
92
+ '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
93
+ borderWidth: '0px !important',
94
+ borderColor: 'transparent !important'
95
+ }
96
+ },
86
97
  renderValue: function renderValue(value) {
87
98
  var _ListOptions$find;
88
99
  return /*#__PURE__*/React.createElement(ToolItem, {
@@ -72,6 +72,17 @@ var EditorMath = function EditorMath(_ref) {
72
72
  value: selectedValue,
73
73
  className: ['inline-math', 'block-math'].includes(selectedValue) ? "tool-active" : "",
74
74
  onChange: handleChange,
75
+ sx: {
76
+ bgcolor: 'transparent',
77
+ '&:hover .MuiOutlinedInput-notchedOutline': {
78
+ borderWidth: '0px !important',
79
+ borderColor: 'transparent !important'
80
+ },
81
+ '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
82
+ borderWidth: '0px !important',
83
+ borderColor: 'transparent !important'
84
+ }
85
+ },
75
86
  renderValue: function renderValue(value) {
76
87
  var _MathOptions$find;
77
88
  return /*#__PURE__*/React.createElement(ToolbarItem, {
@@ -43,6 +43,17 @@ var EditorMore = function EditorMore(_ref) {
43
43
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, {
44
44
  value: 'none',
45
45
  onChange: handleChange,
46
+ sx: {
47
+ bgcolor: 'transparent',
48
+ '&:hover .MuiOutlinedInput-notchedOutline': {
49
+ borderWidth: '0px !important',
50
+ borderColor: 'transparent !important'
51
+ },
52
+ '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
53
+ borderWidth: '0px !important',
54
+ borderColor: 'transparent !important'
55
+ }
56
+ },
46
57
  renderValue: function renderValue() {
47
58
  return /*#__PURE__*/React.createElement(ToolbarItem, {
48
59
  tip: '更多',
@@ -70,6 +70,17 @@ var EditorScript = function EditorScript(_ref) {
70
70
  value: selectedValue,
71
71
  className: ['superscript', 'subscript'].includes(selectedValue) ? "tool-active" : "",
72
72
  onChange: handleChange,
73
+ sx: {
74
+ bgcolor: 'transparent',
75
+ '&:hover .MuiOutlinedInput-notchedOutline': {
76
+ borderWidth: '0px !important',
77
+ borderColor: 'transparent !important'
78
+ },
79
+ '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
80
+ borderWidth: '0px !important',
81
+ borderColor: 'transparent !important'
82
+ }
83
+ },
73
84
  renderValue: function renderValue(value) {
74
85
  var _ScriptOptions$find;
75
86
  return /*#__PURE__*/React.createElement(ToolbarItem, {
@@ -83,6 +83,17 @@ var EditorVerticalAlignSelect = function EditorVerticalAlignSelect(_ref) {
83
83
  value: selectedValue,
84
84
  className: ['top', 'middle', 'bottom'].includes(selectedValue) ? "tool-active" : "",
85
85
  onChange: handleChange,
86
+ sx: {
87
+ bgcolor: 'transparent',
88
+ '&:hover .MuiOutlinedInput-notchedOutline': {
89
+ borderWidth: '0px !important',
90
+ borderColor: 'transparent !important'
91
+ },
92
+ '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
93
+ borderWidth: '0px !important',
94
+ borderColor: 'transparent !important'
95
+ }
96
+ },
86
97
  renderValue: function renderValue(value) {
87
98
  var _VerticalAlignOptions;
88
99
  return /*#__PURE__*/React.createElement(ToolbarItem, {
@@ -3,6 +3,7 @@ import { SxProps } from '@mui/material';
3
3
  import React from 'react';
4
4
  interface ToolbarItemProps {
5
5
  tip?: string;
6
+ customComponent?: React.ReactNode;
6
7
  text?: string;
7
8
  shortcutKey?: string[];
8
9
  sx?: SxProps<Theme>;
@@ -1,11 +1,11 @@
1
1
  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); }
2
- var _excluded = ["tip", "shortcutKey", "icon", "sx", "text", "onClick", "className", "disabled"];
3
- 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); }
2
+ var _excluded = ["tip", "customComponent", "shortcutKey", "icon", "sx", "text", "onClick", "className", "disabled"];
4
3
  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; }
5
4
  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; }
6
5
  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; }
7
6
  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
8
7
  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); }
8
+ 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); }
9
9
  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; }
10
10
  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; }
11
11
  import { getShortcutKeyText } from "../../util";
@@ -13,6 +13,7 @@ import { Box, Button, Stack, Tooltip } from '@mui/material';
13
13
  import React from 'react';
14
14
  var ToolbarItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
15
15
  var tip = _ref.tip,
16
+ customComponent = _ref.customComponent,
16
17
  shortcutKey = _ref.shortcutKey,
17
18
  icon = _ref.icon,
18
19
  sx = _ref.sx,
@@ -23,14 +24,18 @@ var ToolbarItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
23
24
  rest = _objectWithoutProperties(_ref, _excluded);
24
25
  var shortcutKeyText = getShortcutKeyText(shortcutKey || []);
25
26
  return /*#__PURE__*/React.createElement(Tooltip, {
26
- title: tip ? /*#__PURE__*/React.createElement(Stack, {
27
+ arrow: true,
28
+ title: tip ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stack, _extends({
27
29
  alignItems: "center"
28
- }, /*#__PURE__*/React.createElement(Box, null, tip), shortcutKeyText && /*#__PURE__*/React.createElement(Box, {
30
+ }, customComponent ? {
31
+ direction: 'row',
32
+ justifyContent: 'center',
33
+ gap: 1
34
+ } : {}), /*#__PURE__*/React.createElement(Box, null, tip), shortcutKeyText && /*#__PURE__*/React.createElement(Box, {
29
35
  sx: {
30
36
  fontSize: 12
31
37
  }
32
- }, shortcutKeyText)) : null,
33
- arrow: true
38
+ }, shortcutKeyText)), customComponent) : null
34
39
  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, _extends({
35
40
  ref: ref,
36
41
  onClick: onClick,
@@ -0,0 +1,5 @@
1
+ import React from "react";
2
+ declare const TableSizePicker: React.FC<{
3
+ onConfirm: (cols: number, rows: number) => void;
4
+ }>;
5
+ export default TableSizePicker;
@@ -0,0 +1,73 @@
1
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
+ 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."); }
3
+ 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); }
4
+ 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; }
5
+ 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; } }
6
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
+ import { Box, Stack } from "@mui/material";
8
+ import React, { useState } from "react";
9
+ var TableSizePicker = function TableSizePicker(_ref) {
10
+ var onConfirm = _ref.onConfirm;
11
+ var _useState = useState(0),
12
+ _useState2 = _slicedToArray(_useState, 2),
13
+ cols = _useState2[0],
14
+ setCols = _useState2[1];
15
+ var _useState3 = useState(0),
16
+ _useState4 = _slicedToArray(_useState3, 2),
17
+ rows = _useState4[0],
18
+ setRows = _useState4[1];
19
+ var size = 10;
20
+ return /*#__PURE__*/React.createElement(Stack, {
21
+ gap: 0.5
22
+ }, /*#__PURE__*/React.createElement(Box, {
23
+ sx: {
24
+ display: 'grid',
25
+ gridTemplateColumns: "repeat(".concat(size, ", 18px)"),
26
+ gridAutoRows: '18px',
27
+ gap: '2px',
28
+ p: 0.25
29
+ },
30
+ onMouseLeave: function onMouseLeave() {
31
+ setCols(0);
32
+ setRows(0);
33
+ }
34
+ }, Array.from({
35
+ length: size
36
+ }).map(function (_, rowIndex) {
37
+ return /*#__PURE__*/React.createElement(React.Fragment, {
38
+ key: "row-".concat(rowIndex)
39
+ }, Array.from({
40
+ length: size
41
+ }).map(function (__, colIndex) {
42
+ var r = rowIndex + 1;
43
+ var c = colIndex + 1;
44
+ var activeCell = r <= rows && c <= cols;
45
+ return /*#__PURE__*/React.createElement(Box, {
46
+ key: "cell-".concat(r, "-").concat(c),
47
+ onMouseEnter: function onMouseEnter() {
48
+ setCols(c);
49
+ setRows(r);
50
+ },
51
+ onClick: function onClick() {
52
+ return onConfirm(c, r);
53
+ },
54
+ sx: {
55
+ width: '18px',
56
+ height: '18px',
57
+ borderRadius: '3px',
58
+ border: '1px solid',
59
+ borderColor: 'divider',
60
+ bgcolor: activeCell ? 'primary.main' : 'background.default',
61
+ transition: 'background-color 0.12s ease',
62
+ cursor: 'pointer'
63
+ }
64
+ });
65
+ }));
66
+ })), /*#__PURE__*/React.createElement(Box, {
67
+ sx: {
68
+ fontSize: 12,
69
+ textAlign: 'center'
70
+ }
71
+ }, cols > 0 && rows > 0 ? "".concat(cols, " \u5217 \xD7 ").concat(rows, " \u884C") : '选择表格大小'));
72
+ };
73
+ export default TableSizePicker;
@@ -207,8 +207,8 @@ export var slashCommands = [{
207
207
  editor.chain().focus().deleteRange(range).setDetails().run();
208
208
  }
209
209
  }, {
210
- title: '表格',
211
- icon: /*#__PURE__*/React.createElement(Table2Icon, {
210
+ title: 'iframe',
211
+ icon: /*#__PURE__*/React.createElement(WindowFillIcon, {
212
212
  sx: {
213
213
  fontSize: '1rem'
214
214
  }
@@ -216,26 +216,27 @@ export var slashCommands = [{
216
216
  command: function command(_ref17) {
217
217
  var editor = _ref17.editor,
218
218
  range = _ref17.range;
219
- editor.chain().focus().deleteRange(range).insertTable({
220
- rows: 3,
221
- cols: 4,
222
- withHeaderRow: true
219
+ editor.chain().focus().deleteRange(range).setIframe({
220
+ src: '',
221
+ width: 760,
222
+ height: 400
223
223
  }).run();
224
224
  }
225
225
  }, {
226
- title: 'iframe',
227
- icon: /*#__PURE__*/React.createElement(WindowFillIcon, {
226
+ title: '表格',
227
+ icon: /*#__PURE__*/React.createElement(Table2Icon, {
228
228
  sx: {
229
229
  fontSize: '1rem'
230
230
  }
231
231
  }),
232
232
  command: function command(_ref18) {
233
233
  var editor = _ref18.editor,
234
- range = _ref18.range;
235
- editor.chain().focus().deleteRange(range).setIframe({
236
- src: '',
237
- width: 760,
238
- height: 400
234
+ range = _ref18.range,
235
+ attrs = _ref18.attrs;
236
+ editor.chain().focus().deleteRange(range).insertTable({
237
+ rows: attrs.rows || 3,
238
+ cols: attrs.cols || 4,
239
+ withHeaderRow: true
239
240
  }).run();
240
241
  }
241
242
  }, {
@@ -5,8 +5,9 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
5
5
  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
6
6
  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); }
7
7
  import { NestedList } from "../../../component";
8
- import { ArrowDownSLineIcon, AttachmentLineIcon, CheckboxCircleFillIcon, CloseCircleFillIcon, ErrorWarningFillIcon, FormulaIcon, FunctionsIcon, ImageLineIcon, Information2FillIcon, Information2LineIcon, MovieLineIcon, Music2LineIcon, SquareRootIcon, UploadIcon } from "../../../component/Icons";
8
+ import { ArrowDownSLineIcon, AttachmentLineIcon, CheckboxCircleFillIcon, CloseCircleFillIcon, ErrorWarningFillIcon, FormulaIcon, FunctionsIcon, ImageLineIcon, Information2FillIcon, Information2LineIcon, MovieLineIcon, Music2LineIcon, SquareRootIcon, Table2Icon, UploadIcon } from "../../../component/Icons";
9
9
  import { ToolbarItem } from "../../../component/Toolbar";
10
+ import TableSizePicker from "../../../component/Toolbar/TableSizePicker";
10
11
  import { Divider, Paper, Stack } from '@mui/material';
11
12
  import React, { forwardRef } from 'react';
12
13
  var SlashCommandsList = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -25,7 +26,7 @@ var SlashCommandsList = /*#__PURE__*/forwardRef(function (_ref, ref) {
25
26
  }, /*#__PURE__*/React.createElement(Stack, {
26
27
  direction: 'row',
27
28
  flexWrap: 'wrap'
28
- }, items.slice(0, 18).map(function (item, index) {
29
+ }, items.slice(0, 17).map(function (item, index) {
29
30
  return /*#__PURE__*/React.createElement(ToolbarItem, {
30
31
  key: index,
31
32
  onClick: function onClick() {
@@ -40,6 +41,30 @@ var SlashCommandsList = /*#__PURE__*/forwardRef(function (_ref, ref) {
40
41
  }
41
42
  }), /*#__PURE__*/React.createElement(NestedList, {
42
43
  list: [{
44
+ label: '表格',
45
+ key: 'table',
46
+ icon: /*#__PURE__*/React.createElement(Table2Icon, {
47
+ sx: {
48
+ fontSize: '1rem'
49
+ }
50
+ }),
51
+ children: [{
52
+ key: 'table-size-picker',
53
+ customLabel: /*#__PURE__*/React.createElement(TableSizePicker, {
54
+ onConfirm: function onConfirm(cols, rows) {
55
+ var node = items.find(function (it) {
56
+ return it.title === '表格';
57
+ });
58
+ if (node) command(_objectSpread(_objectSpread({}, node), {}, {
59
+ attrs: {
60
+ cols: cols,
61
+ rows: rows
62
+ }
63
+ }));
64
+ }
65
+ })
66
+ }]
67
+ }, {
43
68
  label: '警告提示',
44
69
  key: 'highlight',
45
70
  icon: /*#__PURE__*/React.createElement(Information2LineIcon, {
@@ -237,17 +262,6 @@ var SlashCommandsList = /*#__PURE__*/forwardRef(function (_ref, ref) {
237
262
  transform: 'rotate(-90deg)'
238
263
  }
239
264
  })
240
- // onItemClick={(item) => {
241
- // console.log(1, item)
242
- // if (item.attrs) {
243
- // const node = items.find(it => it.title === '警告提示')
244
- // if (node) {
245
- // command({ ...node, attrs: item.attrs })
246
- // return
247
- // }
248
- // }
249
- // if (item.onClick) item.onClick()
250
- // }}
251
265
  }));
252
266
  });
253
267
  SlashCommandsList.displayName = 'SlashCommandsList';
@@ -1,6 +1,14 @@
1
1
  import { Node } from '@tiptap/core';
2
2
  export type AlertVariant = 'info' | 'warning' | 'error' | 'success';
3
3
  export type AlertType = 'text' | 'icon';
4
+ export interface AlertOptions {
5
+ /**
6
+ * HTML attributes to add to the blockquote element
7
+ * @default {}
8
+ * @example { class: 'foo' }
9
+ */
10
+ HTMLAttributes: Record<string, any>;
11
+ }
4
12
  declare module '@tiptap/core' {
5
13
  interface Commands<ReturnType> {
6
14
  alert: {
@@ -21,5 +29,5 @@ declare module '@tiptap/core' {
21
29
  };
22
30
  }
23
31
  }
24
- export declare const AlertExtension: Node<any, any>;
32
+ export declare const AlertExtension: Node<AlertOptions, any>;
25
33
  export default AlertExtension;