@ctzhian/tiptap 1.12.7 → 1.12.9
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
CHANGED
|
@@ -152,7 +152,7 @@ var Reader = function Reader() {
|
|
|
152
152
|
}
|
|
153
153
|
return onUpload;
|
|
154
154
|
}(),
|
|
155
|
-
content:
|
|
155
|
+
content: ''
|
|
156
156
|
}),
|
|
157
157
|
editor = _useTiptap.editor;
|
|
158
158
|
return /*#__PURE__*/React.createElement(EditorThemeProvider, {
|
|
@@ -10,11 +10,10 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
|
|
|
10
10
|
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
11
11
|
import { Box, Divider, Stack, Typography } from "@mui/material";
|
|
12
12
|
import React from "react";
|
|
13
|
-
import { AddCircleFillIcon, ArrowDownSLineIcon, AttachmentLineIcon, BoldIcon, CheckboxCircleFillIcon, CloseCircleFillIcon, CodeBoxLineIcon, CodeLineIcon, DoubleQuotesLIcon, ErrorWarningFillIcon, Folder2LineIcon, FunctionsIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, H6Icon, ImageLineIcon, Information2FillIcon, Information2LineIcon, ItalicIcon, LinkIcon, ListCheck3Icon, ListOrdered2Icon, ListUnorderedIcon, MarkPenLineIcon, MenuFold2FillIcon, MovieLineIcon, Music2LineIcon, SeparatorIcon, SquareRootIcon, StrikethroughIcon, SubscriptIcon, SuperscriptIcon, Table2Icon, UnderlineIcon, UserSmileFillIcon } from "../component/Icons";
|
|
13
|
+
import { AddCircleFillIcon, ArrowDownSLineIcon, AttachmentLineIcon, BoldIcon, CheckboxCircleFillIcon, CloseCircleFillIcon, CodeBoxLineIcon, CodeLineIcon, CodeSSlashLineIcon, DoubleQuotesLIcon, ErrorWarningFillIcon, Folder2LineIcon, FormulaIcon, FunctionsIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, H6Icon, ImageLineIcon, Information2FillIcon, Information2LineIcon, ItalicIcon, LinkIcon, ListCheck3Icon, ListOrdered2Icon, ListUnorderedIcon, MarkPenLineIcon, MenuFold2FillIcon, MovieLineIcon, Music2LineIcon, SeparatorIcon, SquareRootIcon, StrikethroughIcon, SubscriptIcon, SuperscriptIcon, Table2Icon, UnderlineIcon, UserSmileFillIcon } from "../component/Icons";
|
|
14
14
|
import Menu from "../component/Menu";
|
|
15
15
|
import { ToolbarItem } from "../component/Toolbar";
|
|
16
16
|
import TableSizePicker from "../component/Toolbar/TableSizePicker";
|
|
17
|
-
import { getFileType } from "../util/fileHandler";
|
|
18
17
|
var EditorMarkdownToolbar = function EditorMarkdownToolbar(_ref) {
|
|
19
18
|
var aceEditorRef = _ref.aceEditorRef,
|
|
20
19
|
isExpend = _ref.isExpend,
|
|
@@ -25,7 +24,7 @@ var EditorMarkdownToolbar = function EditorMarkdownToolbar(_ref) {
|
|
|
25
24
|
var attachmentInputRef = React.useRef(null);
|
|
26
25
|
var handleFileUpload = /*#__PURE__*/function () {
|
|
27
26
|
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(file, expectedType) {
|
|
28
|
-
var url,
|
|
27
|
+
var url, content;
|
|
29
28
|
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
30
29
|
while (1) switch (_context.prev = _context.next) {
|
|
31
30
|
case 0:
|
|
@@ -37,43 +36,34 @@ var EditorMarkdownToolbar = function EditorMarkdownToolbar(_ref) {
|
|
|
37
36
|
case 2:
|
|
38
37
|
_context.prev = 2;
|
|
39
38
|
_context.next = 5;
|
|
40
|
-
return onUpload(file
|
|
41
|
-
var progress = _ref3.progress;
|
|
42
|
-
// 可以在这里显示上传进度
|
|
43
|
-
console.log('Upload progress:', progress);
|
|
44
|
-
});
|
|
39
|
+
return onUpload(file);
|
|
45
40
|
case 5:
|
|
46
41
|
url = _context.sent;
|
|
47
|
-
|
|
48
|
-
content = ''; // 根据文件类型插入对应的内容
|
|
42
|
+
content = '';
|
|
49
43
|
if (expectedType === 'image') {
|
|
50
|
-
// 图片：插入 [file.name](url)
|
|
51
44
|
content = "![".concat(file.name, "](").concat(url, ")");
|
|
52
45
|
} else if (expectedType === 'video') {
|
|
53
|
-
// 视频：插入 <video src="url"></video>
|
|
54
46
|
content = "<p>\n<video src=\"".concat(url, "\" controls=\"true\"></video>\n</p>");
|
|
55
47
|
} else if (expectedType === 'audio') {
|
|
56
|
-
// 音频：插入 <audio src="url"></audio>
|
|
57
48
|
content = "<p>\n<audio src=\"".concat(url, "\" controls=\"true\"></audio>\n</p>");
|
|
58
49
|
} else {
|
|
59
|
-
// 附件：插入 <a href="url" download="file.name">file.name</a>
|
|
60
50
|
content = "<p>\n<a href=\"".concat(url, "\" download=\"").concat(file.name, "\">").concat(file.name, "</a>\n</p>");
|
|
61
51
|
}
|
|
62
52
|
insertTextAndFocusPositionRow({
|
|
63
53
|
text: content,
|
|
64
54
|
block: true
|
|
65
55
|
});
|
|
66
|
-
_context.next =
|
|
56
|
+
_context.next = 14;
|
|
67
57
|
break;
|
|
68
|
-
case
|
|
69
|
-
_context.prev =
|
|
58
|
+
case 11:
|
|
59
|
+
_context.prev = 11;
|
|
70
60
|
_context.t0 = _context["catch"](2);
|
|
71
61
|
console.error('文件上传失败:', _context.t0);
|
|
72
|
-
case
|
|
62
|
+
case 14:
|
|
73
63
|
case "end":
|
|
74
64
|
return _context.stop();
|
|
75
65
|
}
|
|
76
|
-
}, _callee, null, [[2,
|
|
66
|
+
}, _callee, null, [[2, 11]]);
|
|
77
67
|
}));
|
|
78
68
|
return function handleFileUpload(_x, _x2) {
|
|
79
69
|
return _ref2.apply(this, arguments);
|
|
@@ -350,8 +340,68 @@ var EditorMarkdownToolbar = function EditorMarkdownToolbar(_ref) {
|
|
|
350
340
|
block: true
|
|
351
341
|
});
|
|
352
342
|
}
|
|
353
|
-
}
|
|
343
|
+
}].concat(_toConsumableArray(isExpend ? [{
|
|
354
344
|
id: 'divider-2'
|
|
345
|
+
}, {
|
|
346
|
+
id: 'separator',
|
|
347
|
+
icon: /*#__PURE__*/React.createElement(SeparatorIcon, {
|
|
348
|
+
sx: {
|
|
349
|
+
fontSize: '1rem'
|
|
350
|
+
}
|
|
351
|
+
}),
|
|
352
|
+
label: '分割线',
|
|
353
|
+
onClick: function onClick() {
|
|
354
|
+
insertTextAndFocusPositionRow({
|
|
355
|
+
text: '---',
|
|
356
|
+
position: 3,
|
|
357
|
+
block: true
|
|
358
|
+
});
|
|
359
|
+
}
|
|
360
|
+
}, {
|
|
361
|
+
id: 'blockquote',
|
|
362
|
+
icon: /*#__PURE__*/React.createElement(DoubleQuotesLIcon, {
|
|
363
|
+
sx: {
|
|
364
|
+
fontSize: '1rem'
|
|
365
|
+
}
|
|
366
|
+
}),
|
|
367
|
+
label: '引用',
|
|
368
|
+
onClick: function onClick() {
|
|
369
|
+
insertTextAndFocusPositionRow({
|
|
370
|
+
text: '> ',
|
|
371
|
+
position: 2,
|
|
372
|
+
block: true
|
|
373
|
+
});
|
|
374
|
+
}
|
|
375
|
+
}, {
|
|
376
|
+
id: 'details',
|
|
377
|
+
icon: /*#__PURE__*/React.createElement(MenuFold2FillIcon, {
|
|
378
|
+
sx: {
|
|
379
|
+
fontSize: '1rem'
|
|
380
|
+
}
|
|
381
|
+
}),
|
|
382
|
+
label: '折叠面板',
|
|
383
|
+
onClick: function onClick() {
|
|
384
|
+
insertTextAndFocusPositionRow({
|
|
385
|
+
text: ':::details\n\n:::detailsSummary\n\n:::\n\n:::detailsContent\n\n:::\n\n:::\n',
|
|
386
|
+
row: 1,
|
|
387
|
+
block: true
|
|
388
|
+
});
|
|
389
|
+
}
|
|
390
|
+
}, {
|
|
391
|
+
id: 'alert',
|
|
392
|
+
icon: /*#__PURE__*/React.createElement(Information2LineIcon, {
|
|
393
|
+
sx: {
|
|
394
|
+
fontSize: '1rem'
|
|
395
|
+
}
|
|
396
|
+
}),
|
|
397
|
+
label: '警告块',
|
|
398
|
+
onClick: function onClick() {
|
|
399
|
+
insertTextAndFocusPositionRow({
|
|
400
|
+
text: ':::alert {variant="info"}\n\n:::',
|
|
401
|
+
row: -1,
|
|
402
|
+
block: true
|
|
403
|
+
});
|
|
404
|
+
}
|
|
355
405
|
}, {
|
|
356
406
|
id: 'inline-math',
|
|
357
407
|
icon: /*#__PURE__*/React.createElement(SquareRootIcon, {
|
|
@@ -410,7 +460,7 @@ var EditorMarkdownToolbar = function EditorMarkdownToolbar(_ref) {
|
|
|
410
460
|
block: true
|
|
411
461
|
});
|
|
412
462
|
}
|
|
413
|
-
}, {
|
|
463
|
+
}] : []), [{
|
|
414
464
|
id: 'divider-3'
|
|
415
465
|
}, {
|
|
416
466
|
id: 'link',
|
|
@@ -440,7 +490,7 @@ var EditorMarkdownToolbar = function EditorMarkdownToolbar(_ref) {
|
|
|
440
490
|
position: 7
|
|
441
491
|
});
|
|
442
492
|
}
|
|
443
|
-
}];
|
|
493
|
+
}]);
|
|
444
494
|
return /*#__PURE__*/React.createElement(Stack, {
|
|
445
495
|
direction: 'row',
|
|
446
496
|
alignItems: 'center'
|
|
@@ -719,6 +769,92 @@ var EditorMarkdownToolbar = function EditorMarkdownToolbar(_ref) {
|
|
|
719
769
|
});
|
|
720
770
|
}
|
|
721
771
|
}]
|
|
772
|
+
}, {
|
|
773
|
+
customLabel: /*#__PURE__*/React.createElement(Typography, {
|
|
774
|
+
sx: {
|
|
775
|
+
px: 1,
|
|
776
|
+
pt: 2,
|
|
777
|
+
fontSize: '12px',
|
|
778
|
+
color: 'text.disabled'
|
|
779
|
+
}
|
|
780
|
+
}, "\u7A0B\u5E8F\u5458\u4E13\u7528"),
|
|
781
|
+
key: 'programmer'
|
|
782
|
+
}, {
|
|
783
|
+
label: '代码',
|
|
784
|
+
key: 'code',
|
|
785
|
+
icon: /*#__PURE__*/React.createElement(CodeSSlashLineIcon, {
|
|
786
|
+
sx: {
|
|
787
|
+
fontSize: '1rem'
|
|
788
|
+
}
|
|
789
|
+
}),
|
|
790
|
+
children: [{
|
|
791
|
+
label: '行内代码',
|
|
792
|
+
key: 'inlineCode',
|
|
793
|
+
icon: /*#__PURE__*/React.createElement(CodeLineIcon, {
|
|
794
|
+
sx: {
|
|
795
|
+
fontSize: '1rem'
|
|
796
|
+
}
|
|
797
|
+
}),
|
|
798
|
+
onClick: function onClick() {
|
|
799
|
+
return insertTextAndFocusPositionRow({
|
|
800
|
+
text: '`',
|
|
801
|
+
position: 1
|
|
802
|
+
});
|
|
803
|
+
}
|
|
804
|
+
}, {
|
|
805
|
+
label: '代码块',
|
|
806
|
+
key: 'codeBlock',
|
|
807
|
+
icon: /*#__PURE__*/React.createElement(CodeBoxLineIcon, {
|
|
808
|
+
sx: {
|
|
809
|
+
fontSize: '1rem'
|
|
810
|
+
}
|
|
811
|
+
}),
|
|
812
|
+
onClick: function onClick() {
|
|
813
|
+
return insertTextAndFocusPositionRow({
|
|
814
|
+
text: '```\n\n```',
|
|
815
|
+
row: 1,
|
|
816
|
+
block: true
|
|
817
|
+
});
|
|
818
|
+
}
|
|
819
|
+
}]
|
|
820
|
+
}, {
|
|
821
|
+
label: '数学公式',
|
|
822
|
+
key: 'math',
|
|
823
|
+
icon: /*#__PURE__*/React.createElement(FormulaIcon, {
|
|
824
|
+
sx: {
|
|
825
|
+
fontSize: '1rem'
|
|
826
|
+
}
|
|
827
|
+
}),
|
|
828
|
+
children: [{
|
|
829
|
+
label: '行内数学公式',
|
|
830
|
+
key: 'inline-math',
|
|
831
|
+
icon: /*#__PURE__*/React.createElement(SquareRootIcon, {
|
|
832
|
+
sx: {
|
|
833
|
+
fontSize: '1rem'
|
|
834
|
+
}
|
|
835
|
+
}),
|
|
836
|
+
onClick: function onClick() {
|
|
837
|
+
insertTextAndFocusPositionRow({
|
|
838
|
+
text: '$$',
|
|
839
|
+
position: 1
|
|
840
|
+
});
|
|
841
|
+
}
|
|
842
|
+
}, {
|
|
843
|
+
label: '块级数学公式',
|
|
844
|
+
key: 'block-math',
|
|
845
|
+
icon: /*#__PURE__*/React.createElement(FunctionsIcon, {
|
|
846
|
+
sx: {
|
|
847
|
+
fontSize: '1rem'
|
|
848
|
+
}
|
|
849
|
+
}),
|
|
850
|
+
onClick: function onClick() {
|
|
851
|
+
insertTextAndFocusPositionRow({
|
|
852
|
+
text: '$$\n\n$$',
|
|
853
|
+
row: 1,
|
|
854
|
+
block: true
|
|
855
|
+
});
|
|
856
|
+
}
|
|
857
|
+
}]
|
|
722
858
|
}]
|
|
723
859
|
}), /*#__PURE__*/React.createElement(Divider, {
|
|
724
860
|
sx: {
|
|
@@ -796,6 +932,62 @@ var EditorMarkdownToolbar = function EditorMarkdownToolbar(_ref) {
|
|
|
796
932
|
icon: it.icon,
|
|
797
933
|
onClick: it === null || it === void 0 ? void 0 : it.onClick
|
|
798
934
|
});
|
|
935
|
+
}), isExpend && /*#__PURE__*/React.createElement(Menu, {
|
|
936
|
+
context: /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
937
|
+
tip: '表格',
|
|
938
|
+
icon: /*#__PURE__*/React.createElement(Table2Icon, {
|
|
939
|
+
sx: {
|
|
940
|
+
fontSize: '1rem'
|
|
941
|
+
}
|
|
942
|
+
})
|
|
943
|
+
}),
|
|
944
|
+
anchorOrigin: {
|
|
945
|
+
vertical: 'bottom',
|
|
946
|
+
horizontal: 'left'
|
|
947
|
+
},
|
|
948
|
+
transformOrigin: {
|
|
949
|
+
vertical: 'top',
|
|
950
|
+
horizontal: 'left'
|
|
951
|
+
},
|
|
952
|
+
arrowIcon: /*#__PURE__*/React.createElement(ArrowDownSLineIcon, {
|
|
953
|
+
sx: {
|
|
954
|
+
fontSize: '1rem',
|
|
955
|
+
transform: 'rotate(-90deg)'
|
|
956
|
+
}
|
|
957
|
+
}),
|
|
958
|
+
zIndex: isExpend ? 2100 : undefined,
|
|
959
|
+
list: [{
|
|
960
|
+
key: 'table-size-picker',
|
|
961
|
+
customLabel: /*#__PURE__*/React.createElement(TableSizePicker, {
|
|
962
|
+
onConfirm: function onConfirm(cols, rows) {
|
|
963
|
+
var headerRow = "| ".concat(Array.from({
|
|
964
|
+
length: cols
|
|
965
|
+
}).map(function () {
|
|
966
|
+
return '';
|
|
967
|
+
}).join(' | '), " |\n");
|
|
968
|
+
var separatorRow = "| ".concat(Array.from({
|
|
969
|
+
length: cols
|
|
970
|
+
}).map(function () {
|
|
971
|
+
return '---';
|
|
972
|
+
}).join(' | '), " |\n");
|
|
973
|
+
var dataRows = Array.from({
|
|
974
|
+
length: rows
|
|
975
|
+
}).map(function () {
|
|
976
|
+
return "| ".concat(Array.from({
|
|
977
|
+
length: cols
|
|
978
|
+
}).map(function () {
|
|
979
|
+
return '';
|
|
980
|
+
}).join(' | '), " |\n");
|
|
981
|
+
}).join('');
|
|
982
|
+
var tableMarkdown = "".concat(headerRow).concat(separatorRow).concat(dataRows);
|
|
983
|
+
insertTextAndFocusPositionRow({
|
|
984
|
+
text: tableMarkdown,
|
|
985
|
+
position: 1,
|
|
986
|
+
block: true
|
|
987
|
+
});
|
|
988
|
+
}
|
|
989
|
+
})
|
|
990
|
+
}]
|
|
799
991
|
}), /*#__PURE__*/React.createElement("input", {
|
|
800
992
|
ref: imageInputRef,
|
|
801
993
|
type: "file",
|
|
@@ -1,9 +1,15 @@
|
|
|
1
|
-
|
|
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 { FloatingPopover } from "../../../component";
|
|
2
8
|
import { CheckboxCircleFillIcon, CloseCircleFillIcon, ErrorWarningFillIcon, Information2FillIcon, ScrollToBottomLineIcon, TextIcon, UserSmileFillIcon } from "../../../component/Icons";
|
|
3
9
|
import { ToolbarItem } from "../../../component/Toolbar";
|
|
4
10
|
import { Box, Divider, Stack } from '@mui/material';
|
|
5
11
|
import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
|
|
6
|
-
import React, { useMemo, useRef } from 'react';
|
|
12
|
+
import React, { useMemo, useRef, useState } from 'react';
|
|
7
13
|
var VARIANT_DATA = {
|
|
8
14
|
info: {
|
|
9
15
|
icon: /*#__PURE__*/React.createElement(Information2FillIcon, {
|
|
@@ -54,11 +60,65 @@ var AlertView = function AlertView(_ref) {
|
|
|
54
60
|
selected = _ref.selected;
|
|
55
61
|
var attrs = node.attrs;
|
|
56
62
|
var containerRef = useRef(null);
|
|
63
|
+
var _useState = useState(null),
|
|
64
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
65
|
+
anchorEl = _useState2[0],
|
|
66
|
+
setAnchorEl = _useState2[1];
|
|
57
67
|
var showIcon = attrs.type !== 'text';
|
|
58
68
|
var variantData = useMemo(function () {
|
|
59
|
-
|
|
69
|
+
if (attrs.variant && VARIANT_DATA[attrs.variant]) {
|
|
70
|
+
return VARIANT_DATA[attrs.variant];
|
|
71
|
+
}
|
|
72
|
+
return VARIANT_DATA['default'];
|
|
60
73
|
}, [attrs.variant]);
|
|
61
|
-
var
|
|
74
|
+
var handleShowOperationPopover = function handleShowOperationPopover(event) {
|
|
75
|
+
return setAnchorEl(event.currentTarget);
|
|
76
|
+
};
|
|
77
|
+
var handleCloseOperationPopover = function handleCloseOperationPopover() {
|
|
78
|
+
return setAnchorEl(null);
|
|
79
|
+
};
|
|
80
|
+
return /*#__PURE__*/React.createElement(NodeViewWrapper, {
|
|
81
|
+
ref: containerRef,
|
|
82
|
+
className: "alert-wrapper ".concat(selected ? 'ProseMirror-selectednode' : ''),
|
|
83
|
+
"data-drag-handle": true,
|
|
84
|
+
as: 'div',
|
|
85
|
+
style: {
|
|
86
|
+
marginLeft: (_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.indent ? node.attrs.indent * 32 : undefined,
|
|
87
|
+
border: '1px solid',
|
|
88
|
+
borderColor: variantData.color,
|
|
89
|
+
// color: attrs.variant === 'default' ? 'var(--mui-palette-text-primary)' : variantData.color,
|
|
90
|
+
borderRadius: '10px',
|
|
91
|
+
padding: '12px 16px',
|
|
92
|
+
lineHeight: 1.625,
|
|
93
|
+
display: 'flex',
|
|
94
|
+
alignItems: 'flex-start',
|
|
95
|
+
gap: '16px',
|
|
96
|
+
background: attrs.variant === 'default' ? 'var(--mui-palette-background-paper3)' : "color-mix(in srgb, ".concat(variantData.color, " 10%, transparent)")
|
|
97
|
+
},
|
|
98
|
+
onClick: handleShowOperationPopover
|
|
99
|
+
}, showIcon && /*#__PURE__*/React.createElement(Box, {
|
|
100
|
+
sx: {
|
|
101
|
+
pt: '2px',
|
|
102
|
+
lineHeight: 1,
|
|
103
|
+
color: attrs.variant === 'default' ? 'text.disabled' : variantData.color
|
|
104
|
+
}
|
|
105
|
+
}, variantData.icon), /*#__PURE__*/React.createElement(Box, {
|
|
106
|
+
sx: {
|
|
107
|
+
flex: 1,
|
|
108
|
+
width: 0,
|
|
109
|
+
'code': {
|
|
110
|
+
borderColor: attrs.variant === 'default' ? '' : "color-mix(in srgb, ".concat(variantData.color, " 30%, transparent) !important"),
|
|
111
|
+
bgcolor: attrs.variant === 'default' ? '' : "color-mix(in srgb, ".concat(variantData.color, " 10%, transparent) !important")
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}, /*#__PURE__*/React.createElement(NodeViewContent, {
|
|
115
|
+
as: 'div'
|
|
116
|
+
})), editor.isEditable && /*#__PURE__*/React.createElement(FloatingPopover, {
|
|
117
|
+
open: Boolean(anchorEl),
|
|
118
|
+
anchorEl: anchorEl,
|
|
119
|
+
onClose: handleCloseOperationPopover,
|
|
120
|
+
placement: "top"
|
|
121
|
+
}, /*#__PURE__*/React.createElement(Stack, {
|
|
62
122
|
direction: 'row',
|
|
63
123
|
alignItems: 'center',
|
|
64
124
|
sx: {
|
|
@@ -143,78 +203,33 @@ var AlertView = function AlertView(_ref) {
|
|
|
143
203
|
alignSelf: 'center',
|
|
144
204
|
borderColor: 'divider'
|
|
145
205
|
}
|
|
146
|
-
}), /*#__PURE__*/React.createElement(
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
icon: /*#__PURE__*/React.createElement(TextIcon, {
|
|
151
|
-
sx: {
|
|
152
|
-
fontSize: '1rem'
|
|
153
|
-
}
|
|
154
|
-
}),
|
|
155
|
-
onClick: function onClick() {
|
|
156
|
-
return updateAttributes({
|
|
157
|
-
type: 'text'
|
|
158
|
-
});
|
|
159
|
-
}
|
|
160
|
-
}, {
|
|
161
|
-
key: 'icon',
|
|
162
|
-
label: '图标文字',
|
|
163
|
-
icon: /*#__PURE__*/React.createElement(ScrollToBottomLineIcon, {
|
|
164
|
-
sx: {
|
|
165
|
-
transform: 'rotate(90deg)',
|
|
166
|
-
fontSize: '1rem'
|
|
167
|
-
}
|
|
168
|
-
}),
|
|
169
|
-
onClick: function onClick() {
|
|
170
|
-
return updateAttributes({
|
|
171
|
-
type: 'icon'
|
|
172
|
-
});
|
|
206
|
+
}), /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
207
|
+
icon: /*#__PURE__*/React.createElement(TextIcon, {
|
|
208
|
+
sx: {
|
|
209
|
+
fontSize: '1rem'
|
|
173
210
|
}
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
"data-drag-handle": true,
|
|
188
|
-
as: 'div',
|
|
189
|
-
style: {
|
|
190
|
-
marginLeft: (_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.indent ? node.attrs.indent * 32 : undefined,
|
|
191
|
-
border: '1px solid',
|
|
192
|
-
borderColor: "color-mix(in srgb, ".concat(variantData.color, " 50%, transparent)"),
|
|
193
|
-
borderRadius: '10px',
|
|
194
|
-
padding: '16px',
|
|
195
|
-
lineHeight: 1.625,
|
|
196
|
-
display: 'flex',
|
|
197
|
-
alignItems: 'flex-start',
|
|
198
|
-
gap: '16px',
|
|
199
|
-
background: attrs.variant === 'default' ? 'var(--mui-palette-background-paper3)' : "color-mix(in srgb, ".concat(variantData.color, " 10%, transparent)")
|
|
200
|
-
}
|
|
201
|
-
}, showIcon && /*#__PURE__*/React.createElement(Box, {
|
|
202
|
-
sx: {
|
|
203
|
-
pt: '2px',
|
|
204
|
-
lineHeight: 1,
|
|
205
|
-
color: attrs.variant === 'default' ? 'text.disabled' : variantData.color
|
|
206
|
-
}
|
|
207
|
-
}, variantData.icon), /*#__PURE__*/React.createElement(Box, {
|
|
208
|
-
sx: {
|
|
209
|
-
flex: 1,
|
|
210
|
-
width: 0,
|
|
211
|
-
'code': {
|
|
212
|
-
borderColor: attrs.variant === 'default' ? '' : "color-mix(in srgb, ".concat(variantData.color, " 30%, transparent) !important"),
|
|
213
|
-
bgcolor: attrs.variant === 'default' ? '' : "color-mix(in srgb, ".concat(variantData.color, " 10%, transparent) !important")
|
|
211
|
+
}),
|
|
212
|
+
tip: "\u7EAF\u6587\u5B57",
|
|
213
|
+
onClick: function onClick() {
|
|
214
|
+
return updateAttributes({
|
|
215
|
+
type: 'text'
|
|
216
|
+
});
|
|
217
|
+
},
|
|
218
|
+
className: attrs.type === 'text' ? 'tool-active' : ''
|
|
219
|
+
}), /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
220
|
+
icon: /*#__PURE__*/React.createElement(ScrollToBottomLineIcon, {
|
|
221
|
+
sx: {
|
|
222
|
+
transform: 'rotate(90deg)',
|
|
223
|
+
fontSize: '1rem'
|
|
214
224
|
}
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
|
|
225
|
+
}),
|
|
226
|
+
tip: "\u56FE\u6807\u6587\u5B57",
|
|
227
|
+
onClick: function onClick() {
|
|
228
|
+
return updateAttributes({
|
|
229
|
+
type: 'icon'
|
|
230
|
+
});
|
|
231
|
+
},
|
|
232
|
+
className: attrs.type === 'icon' ? 'tool-active' : ''
|
|
218
233
|
}))));
|
|
219
234
|
};
|
|
220
235
|
export default AlertView;
|