@ctzhian/tiptap 1.12.7 → 1.12.8
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, {
|
|
@@ -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,62 @@ 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
|
return VARIANT_DATA[attrs.variant || 'info'];
|
|
60
70
|
}, [attrs.variant]);
|
|
61
|
-
var
|
|
71
|
+
var handleShowOperationPopover = function handleShowOperationPopover(event) {
|
|
72
|
+
return setAnchorEl(event.currentTarget);
|
|
73
|
+
};
|
|
74
|
+
var handleCloseOperationPopover = function handleCloseOperationPopover() {
|
|
75
|
+
return setAnchorEl(null);
|
|
76
|
+
};
|
|
77
|
+
return /*#__PURE__*/React.createElement(NodeViewWrapper, {
|
|
78
|
+
ref: containerRef,
|
|
79
|
+
className: "alert-wrapper ".concat(selected ? 'ProseMirror-selectednode' : ''),
|
|
80
|
+
"data-drag-handle": true,
|
|
81
|
+
as: 'div',
|
|
82
|
+
style: {
|
|
83
|
+
marginLeft: (_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.indent ? node.attrs.indent * 32 : undefined,
|
|
84
|
+
border: '1px solid',
|
|
85
|
+
borderColor: variantData.color,
|
|
86
|
+
// color: attrs.variant === 'default' ? 'var(--mui-palette-text-primary)' : variantData.color,
|
|
87
|
+
borderRadius: '10px',
|
|
88
|
+
padding: '12px 16px',
|
|
89
|
+
lineHeight: 1.625,
|
|
90
|
+
display: 'flex',
|
|
91
|
+
alignItems: 'flex-start',
|
|
92
|
+
gap: '16px',
|
|
93
|
+
background: attrs.variant === 'default' ? 'var(--mui-palette-background-paper3)' : "color-mix(in srgb, ".concat(variantData.color, " 10%, transparent)")
|
|
94
|
+
},
|
|
95
|
+
onClick: handleShowOperationPopover
|
|
96
|
+
}, showIcon && /*#__PURE__*/React.createElement(Box, {
|
|
97
|
+
sx: {
|
|
98
|
+
pt: '2px',
|
|
99
|
+
lineHeight: 1,
|
|
100
|
+
color: attrs.variant === 'default' ? 'text.disabled' : variantData.color
|
|
101
|
+
}
|
|
102
|
+
}, variantData.icon), /*#__PURE__*/React.createElement(Box, {
|
|
103
|
+
sx: {
|
|
104
|
+
flex: 1,
|
|
105
|
+
width: 0,
|
|
106
|
+
'code': {
|
|
107
|
+
borderColor: attrs.variant === 'default' ? '' : "color-mix(in srgb, ".concat(variantData.color, " 30%, transparent) !important"),
|
|
108
|
+
bgcolor: attrs.variant === 'default' ? '' : "color-mix(in srgb, ".concat(variantData.color, " 10%, transparent) !important")
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}, /*#__PURE__*/React.createElement(NodeViewContent, {
|
|
112
|
+
as: 'div'
|
|
113
|
+
})), editor.isEditable && /*#__PURE__*/React.createElement(FloatingPopover, {
|
|
114
|
+
open: Boolean(anchorEl),
|
|
115
|
+
anchorEl: anchorEl,
|
|
116
|
+
onClose: handleCloseOperationPopover,
|
|
117
|
+
placement: "top"
|
|
118
|
+
}, /*#__PURE__*/React.createElement(Stack, {
|
|
62
119
|
direction: 'row',
|
|
63
120
|
alignItems: 'center',
|
|
64
121
|
sx: {
|
|
@@ -143,78 +200,33 @@ var AlertView = function AlertView(_ref) {
|
|
|
143
200
|
alignSelf: 'center',
|
|
144
201
|
borderColor: 'divider'
|
|
145
202
|
}
|
|
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
|
-
});
|
|
203
|
+
}), /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
204
|
+
icon: /*#__PURE__*/React.createElement(TextIcon, {
|
|
205
|
+
sx: {
|
|
206
|
+
fontSize: '1rem'
|
|
173
207
|
}
|
|
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")
|
|
208
|
+
}),
|
|
209
|
+
tip: "\u7EAF\u6587\u5B57",
|
|
210
|
+
onClick: function onClick() {
|
|
211
|
+
return updateAttributes({
|
|
212
|
+
type: 'text'
|
|
213
|
+
});
|
|
214
|
+
},
|
|
215
|
+
className: attrs.type === 'text' ? 'tool-active' : ''
|
|
216
|
+
}), /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
217
|
+
icon: /*#__PURE__*/React.createElement(ScrollToBottomLineIcon, {
|
|
218
|
+
sx: {
|
|
219
|
+
transform: 'rotate(90deg)',
|
|
220
|
+
fontSize: '1rem'
|
|
214
221
|
}
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
|
|
222
|
+
}),
|
|
223
|
+
tip: "\u56FE\u6807\u6587\u5B57",
|
|
224
|
+
onClick: function onClick() {
|
|
225
|
+
return updateAttributes({
|
|
226
|
+
type: 'icon'
|
|
227
|
+
});
|
|
228
|
+
},
|
|
229
|
+
className: attrs.type === 'icon' ? 'tool-active' : ''
|
|
218
230
|
}))));
|
|
219
231
|
};
|
|
220
232
|
export default AlertView;
|