@ctzhian/tiptap 1.3.3 → 1.4.1
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.
- package/dist/Editor/demo.js +1 -1
- package/dist/EditorToolbar/index.js +14 -8
- package/dist/component/CustomDragHandle/index.js +6 -29
- package/dist/component/Toolbar/EditorAlignSelect.js +11 -0
- package/dist/component/Toolbar/EditorCode.js +11 -0
- package/dist/component/Toolbar/EditorFontSize.js +13 -1
- package/dist/component/Toolbar/EditorHeading.js +11 -0
- package/dist/component/Toolbar/EditorInsert/index.js +11 -0
- package/dist/component/Toolbar/EditorListSelect.js +11 -0
- package/dist/component/Toolbar/EditorMath.js +11 -0
- package/dist/component/Toolbar/EditorMore/index.js +11 -0
- package/dist/component/Toolbar/EditorScript.js +11 -0
- package/dist/component/Toolbar/EditorVerticalAlignSelect.js +11 -0
- package/dist/component/Toolbar/Item.d.ts +1 -0
- package/dist/component/Toolbar/Item.js +12 -7
- package/dist/component/Toolbar/TableSizePicker.d.ts +5 -0
- package/dist/component/Toolbar/TableSizePicker.js +80 -0
- package/dist/contants/slash-commands.js +14 -13
- package/dist/extension/component/SlashCommandsList/index.js +27 -13
- package/dist/extension/node/Alert.d.ts +9 -1
- package/dist/extension/node/Alert.js +12 -116
- package/dist/extension/node/FileHandler.d.ts +1 -1
- package/dist/extension/node/Table.d.ts +1 -1
- package/dist/index.css +6 -1
- package/dist/util/linewiseConvert.d.ts +0 -2
- package/dist/util/linewiseConvert.js +63 -12
- package/package.json +1 -1
- package/dist/component/ListHover/index.d.ts +0 -7
- package/dist/component/ListHover/index.js +0 -367
package/dist/Editor/demo.js
CHANGED
|
@@ -81,7 +81,7 @@ var Reader = function Reader() {
|
|
|
81
81
|
}
|
|
82
82
|
return onUpload;
|
|
83
83
|
}(),
|
|
84
|
-
content: "
|
|
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;
|
|
@@ -74,6 +75,9 @@ var EditorToolbar = function EditorToolbar(_ref) {
|
|
|
74
75
|
input: {
|
|
75
76
|
display: 'none'
|
|
76
77
|
},
|
|
78
|
+
'&:hover': {
|
|
79
|
+
bgcolor: 'background.paper2'
|
|
80
|
+
},
|
|
77
81
|
'&.tool-active': {
|
|
78
82
|
bgcolor: 'background.paper2',
|
|
79
83
|
color: 'primary.main',
|
|
@@ -279,14 +283,16 @@ var EditorToolbar = function EditorToolbar(_ref) {
|
|
|
279
283
|
fontSize: '1rem'
|
|
280
284
|
}
|
|
281
285
|
}),
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
286
|
+
className: active.table ? 'tool-active' : '',
|
|
287
|
+
customComponent: /*#__PURE__*/React.createElement(TableSizePicker, {
|
|
288
|
+
onConfirm: function onConfirm(cols, rows) {
|
|
289
|
+
editor.chain().focus().insertTable({
|
|
290
|
+
rows: rows,
|
|
291
|
+
cols: cols,
|
|
292
|
+
withHeaderRow: true
|
|
293
|
+
}).run();
|
|
294
|
+
}
|
|
295
|
+
})
|
|
290
296
|
}), /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
291
297
|
tip: 'iframe',
|
|
292
298
|
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,
|
|
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
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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: '文字大小',
|
|
@@ -129,7 +140,8 @@ var EditorFontSize = function EditorFontSize(_ref) {
|
|
|
129
140
|
}, /*#__PURE__*/React.createElement(Box, {
|
|
130
141
|
sx: {
|
|
131
142
|
textAlign: 'center',
|
|
132
|
-
fontSize: '0.875rem'
|
|
143
|
+
fontSize: '0.875rem',
|
|
144
|
+
width: '100%'
|
|
133
145
|
}
|
|
134
146
|
}, it));
|
|
135
147
|
}));
|
|
@@ -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, {
|
|
@@ -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,24 +24,28 @@ 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
|
-
|
|
27
|
+
arrow: true,
|
|
28
|
+
title: tip ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stack, _extends({
|
|
27
29
|
alignItems: "center"
|
|
28
|
-
},
|
|
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,
|
|
37
42
|
className: className,
|
|
38
43
|
disabled: disabled,
|
|
39
44
|
sx: _objectSpread({
|
|
45
|
+
minHeight: '36px',
|
|
40
46
|
minWidth: '36px',
|
|
41
47
|
p: 1,
|
|
42
48
|
color: 'text.primary',
|
|
43
|
-
borderRadius: 'var(--mui-shape-borderRadius)',
|
|
44
49
|
'&.tool-active': {
|
|
45
50
|
bgcolor: 'background.paper2',
|
|
46
51
|
color: 'primary.main'
|
|
@@ -0,0 +1,80 @@
|
|
|
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 { addOpacityToColor } from "../../util";
|
|
8
|
+
import { Box, Stack, useTheme } from "@mui/material";
|
|
9
|
+
import React, { useState } from "react";
|
|
10
|
+
var TableSizePicker = function TableSizePicker(_ref) {
|
|
11
|
+
var onConfirm = _ref.onConfirm;
|
|
12
|
+
var theme = useTheme();
|
|
13
|
+
var _useState = useState(0),
|
|
14
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
15
|
+
cols = _useState2[0],
|
|
16
|
+
setCols = _useState2[1];
|
|
17
|
+
var _useState3 = useState(0),
|
|
18
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
19
|
+
rows = _useState4[0],
|
|
20
|
+
setRows = _useState4[1];
|
|
21
|
+
var size = 10;
|
|
22
|
+
return /*#__PURE__*/React.createElement(Stack, {
|
|
23
|
+
gap: 0.5
|
|
24
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
25
|
+
sx: {
|
|
26
|
+
display: 'grid',
|
|
27
|
+
gridTemplateColumns: "repeat(".concat(size, ", 18px)"),
|
|
28
|
+
gridAutoRows: '18px',
|
|
29
|
+
gap: '2px',
|
|
30
|
+
p: 0.25
|
|
31
|
+
},
|
|
32
|
+
onMouseLeave: function onMouseLeave() {
|
|
33
|
+
setCols(0);
|
|
34
|
+
setRows(0);
|
|
35
|
+
}
|
|
36
|
+
}, Array.from({
|
|
37
|
+
length: size
|
|
38
|
+
}).map(function (_, rowIndex) {
|
|
39
|
+
return /*#__PURE__*/React.createElement(React.Fragment, {
|
|
40
|
+
key: "row-".concat(rowIndex)
|
|
41
|
+
}, Array.from({
|
|
42
|
+
length: size
|
|
43
|
+
}).map(function (__, colIndex) {
|
|
44
|
+
var r = rowIndex + 1;
|
|
45
|
+
var c = colIndex + 1;
|
|
46
|
+
var activeCell = r <= rows && c <= cols;
|
|
47
|
+
return /*#__PURE__*/React.createElement(Box, {
|
|
48
|
+
key: "cell-".concat(r, "-").concat(c),
|
|
49
|
+
onMouseEnter: function onMouseEnter() {
|
|
50
|
+
setCols(c);
|
|
51
|
+
setRows(r);
|
|
52
|
+
},
|
|
53
|
+
onClick: function onClick() {
|
|
54
|
+
return onConfirm(c, r);
|
|
55
|
+
},
|
|
56
|
+
sx: {
|
|
57
|
+
borderRadius: '3px',
|
|
58
|
+
overflow: 'hidden',
|
|
59
|
+
cursor: 'pointer',
|
|
60
|
+
bgcolor: 'background.default',
|
|
61
|
+
border: '1px solid',
|
|
62
|
+
borderColor: 'divider'
|
|
63
|
+
}
|
|
64
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
65
|
+
sx: {
|
|
66
|
+
width: '18px',
|
|
67
|
+
height: '18px',
|
|
68
|
+
transition: 'background-color 0.12s ease',
|
|
69
|
+
bgcolor: activeCell ? addOpacityToColor(theme.palette.primary.main, 0.5) : theme.palette.background.default
|
|
70
|
+
}
|
|
71
|
+
}));
|
|
72
|
+
}));
|
|
73
|
+
})), /*#__PURE__*/React.createElement(Box, {
|
|
74
|
+
sx: {
|
|
75
|
+
fontSize: 12,
|
|
76
|
+
textAlign: 'center'
|
|
77
|
+
}
|
|
78
|
+
}, cols > 0 && rows > 0 ? "".concat(cols, " \u5217 \xD7 ").concat(rows, " \u884C") : '选择表格大小'));
|
|
79
|
+
};
|
|
80
|
+
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(
|
|
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).
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
219
|
+
editor.chain().focus().deleteRange(range).setIframe({
|
|
220
|
+
src: '',
|
|
221
|
+
width: 760,
|
|
222
|
+
height: 400
|
|
223
223
|
}).run();
|
|
224
224
|
}
|
|
225
225
|
}, {
|
|
226
|
-
title: '
|
|
227
|
-
icon: /*#__PURE__*/React.createElement(
|
|
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
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
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,
|
|
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<
|
|
32
|
+
export declare const AlertExtension: Node<AlertOptions, any>;
|
|
25
33
|
export default AlertExtension;
|