@ctzhian/tiptap 1.6.23 → 1.6.25
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/component/CustomBubbleMenu/SelectionText.js +2 -3
- package/dist/component/CustomDragHandle/index.js +47 -66
- package/dist/extension/component/Alert/index.js +3 -2
- package/dist/extension/component/Table/ContextMenu.js +4 -4
- package/dist/extension/component/Table/TableContextMenuPlugin.js +0 -9
- package/dist/extension/node/Table.d.ts +1 -1
- package/dist/extension/node/Table.js +0 -31
- package/dist/index.css +15 -5
- package/package.json +1 -1
package/dist/Editor/demo.js
CHANGED
|
@@ -54,14 +54,13 @@ var SelectionText = function SelectionText(_ref) {
|
|
|
54
54
|
return /*#__PURE__*/React.createElement(BubbleMenu, {
|
|
55
55
|
editor: editor,
|
|
56
56
|
pluginKey: 'bubble-menu',
|
|
57
|
+
updateDelay: 750,
|
|
57
58
|
options: {
|
|
58
59
|
placement: 'bottom',
|
|
59
60
|
offset: 8
|
|
60
61
|
},
|
|
61
62
|
shouldShow: function shouldShow(_ref2) {
|
|
62
|
-
var editorProps = _ref2.editor
|
|
63
|
-
from = _ref2.from,
|
|
64
|
-
to = _ref2.to;
|
|
63
|
+
var editorProps = _ref2.editor;
|
|
65
64
|
if (editorProps.state.selection.empty || editorProps.isActive('image') || editorProps.isActive('video') || editorProps.isActive('audio') || editorProps.isActive('emoji') || editorProps.isActive('codeBlock') || editorProps.isActive('blockMath') || editorProps.isActive('inlineMath') || editorProps.isActive('blockLink') || editorProps.isActive('inlineLink') || editorProps.isActive('blockAttachment') || editorProps.isActive('inlineAttachment') || editorProps.isActive('horizontalRule') || editorProps.isActive('iframe')) {
|
|
66
65
|
return false;
|
|
67
66
|
}
|
|
@@ -240,21 +240,6 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
|
|
|
240
240
|
var attrs = current.editor.getAttributes(node.type.name);
|
|
241
241
|
return Number(attrs.indent) || 0;
|
|
242
242
|
};
|
|
243
|
-
var shouldShowButton = function shouldShowButton(_ref4) {
|
|
244
|
-
var editor = _ref4.editor,
|
|
245
|
-
data = _ref4.data;
|
|
246
|
-
if (!editor || !editor.isEditable) return false;
|
|
247
|
-
var currentNode = data.node;
|
|
248
|
-
var empty = (currentNode === null || currentNode === void 0 ? void 0 : currentNode.textContent) === '';
|
|
249
|
-
if (empty) return false;
|
|
250
|
-
var content = currentNode === null || currentNode === void 0 ? void 0 : currentNode.content.content;
|
|
251
|
-
if (content && content.length > 0) {
|
|
252
|
-
return content.some(function (item) {
|
|
253
|
-
return hasMarksDeep(item);
|
|
254
|
-
});
|
|
255
|
-
}
|
|
256
|
-
return false;
|
|
257
|
-
};
|
|
258
243
|
var updateNodeChange = useCallback(function (data) {
|
|
259
244
|
var _data$node, _current$node2;
|
|
260
245
|
if ((data.pos !== current.pos || ((_data$node = data.node) === null || _data$node === void 0 ? void 0 : _data$node.type.name) !== ((_current$node2 = current.node) === null || _current$node2 === void 0 ? void 0 : _current$node2.type.name)) && data.pos !== -1 || data.node === null && data.pos >= 0) {
|
|
@@ -286,20 +271,57 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
|
|
|
286
271
|
mr: 1,
|
|
287
272
|
height: '1.625rem'
|
|
288
273
|
}
|
|
289
|
-
}, /*#__PURE__*/React.createElement(
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
274
|
+
}, /*#__PURE__*/React.createElement(Menu, {
|
|
275
|
+
context: /*#__PURE__*/React.createElement(AddIcon, null),
|
|
276
|
+
anchorOrigin: {
|
|
277
|
+
vertical: 'bottom',
|
|
278
|
+
horizontal: 'left'
|
|
279
|
+
},
|
|
280
|
+
transformOrigin: {
|
|
281
|
+
vertical: 'top',
|
|
282
|
+
horizontal: 'left'
|
|
283
|
+
},
|
|
284
|
+
arrowIcon: /*#__PURE__*/React.createElement(ArrowDownSLineIcon, {
|
|
285
|
+
sx: {
|
|
286
|
+
fontSize: '1rem',
|
|
287
|
+
transform: 'rotate(-90deg)'
|
|
288
|
+
}
|
|
289
|
+
}),
|
|
290
|
+
list: [{
|
|
291
|
+
label: '上方插入行',
|
|
292
|
+
key: 'insert-line-break-top',
|
|
293
|
+
icon: /*#__PURE__*/React.createElement(TextWrapIcon, {
|
|
294
|
+
sx: {
|
|
295
|
+
fontSize: '1rem',
|
|
296
|
+
transform: 'rotate(180deg)'
|
|
297
|
+
}
|
|
298
|
+
}),
|
|
299
|
+
onClick: function onClick() {
|
|
300
|
+
if (current.node && current.pos !== undefined) {
|
|
301
|
+
var afterPos = current.pos;
|
|
302
|
+
current.editor.chain().focus().insertContentAt(afterPos, {
|
|
295
303
|
type: 'paragraph',
|
|
296
304
|
content: [{
|
|
297
305
|
type: 'text',
|
|
298
306
|
text: '/'
|
|
299
307
|
}]
|
|
308
|
+
}, {
|
|
309
|
+
updateSelection: true
|
|
300
310
|
}).run();
|
|
301
|
-
}
|
|
302
|
-
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
}, {
|
|
314
|
+
label: '下方插入行',
|
|
315
|
+
key: 'insert-line-break',
|
|
316
|
+
icon: /*#__PURE__*/React.createElement(TextWrapIcon, {
|
|
317
|
+
sx: {
|
|
318
|
+
fontSize: '1rem'
|
|
319
|
+
}
|
|
320
|
+
}),
|
|
321
|
+
onClick: function onClick() {
|
|
322
|
+
if (current.node && current.pos !== undefined) {
|
|
323
|
+
var afterPos = current.pos + current.node.nodeSize;
|
|
324
|
+
current.editor.chain().focus().insertContentAt(afterPos, {
|
|
303
325
|
type: 'paragraph',
|
|
304
326
|
content: [{
|
|
305
327
|
type: 'text',
|
|
@@ -308,9 +330,9 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
|
|
|
308
330
|
}).run();
|
|
309
331
|
}
|
|
310
332
|
}
|
|
311
|
-
}
|
|
333
|
+
}]
|
|
312
334
|
}), currentNode ? /*#__PURE__*/React.createElement(Menu, {
|
|
313
|
-
width:
|
|
335
|
+
width: 216,
|
|
314
336
|
context: /*#__PURE__*/React.createElement(DragIcon, null),
|
|
315
337
|
anchorOrigin: {
|
|
316
338
|
vertical: 'bottom',
|
|
@@ -503,47 +525,6 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
|
|
|
503
525
|
}
|
|
504
526
|
}),
|
|
505
527
|
tip: "\u5220\u9664".concat(currentNode === null || currentNode === void 0 ? void 0 : currentNode.label)
|
|
506
|
-
})), /*#__PURE__*/React.createElement(Stack, {
|
|
507
|
-
direction: 'row',
|
|
508
|
-
flexWrap: 'wrap',
|
|
509
|
-
sx: {
|
|
510
|
-
fontSize: 14
|
|
511
|
-
}
|
|
512
|
-
}, /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
513
|
-
key: 'insert-line-break-top',
|
|
514
|
-
onClick: function onClick() {
|
|
515
|
-
if (current.node && current.pos !== undefined) {
|
|
516
|
-
var afterPos = current.pos;
|
|
517
|
-
current.editor.chain().focus().insertContentAt(afterPos, {
|
|
518
|
-
type: 'paragraph'
|
|
519
|
-
}, {
|
|
520
|
-
updateSelection: true
|
|
521
|
-
}).run();
|
|
522
|
-
}
|
|
523
|
-
},
|
|
524
|
-
icon: /*#__PURE__*/React.createElement(TextWrapIcon, {
|
|
525
|
-
sx: {
|
|
526
|
-
fontSize: '1rem',
|
|
527
|
-
transform: 'rotate(180deg)'
|
|
528
|
-
}
|
|
529
|
-
}),
|
|
530
|
-
text: '上方插入行'
|
|
531
|
-
}), /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
532
|
-
key: 'insert-line-break',
|
|
533
|
-
onClick: function onClick() {
|
|
534
|
-
if (current.node && current.pos !== undefined) {
|
|
535
|
-
var afterPos = current.pos + current.node.nodeSize;
|
|
536
|
-
current.editor.chain().focus().insertContentAt(afterPos, {
|
|
537
|
-
type: 'paragraph'
|
|
538
|
-
}).run();
|
|
539
|
-
}
|
|
540
|
-
},
|
|
541
|
-
icon: /*#__PURE__*/React.createElement(TextWrapIcon, {
|
|
542
|
-
sx: {
|
|
543
|
-
fontSize: '1rem'
|
|
544
|
-
}
|
|
545
|
-
}),
|
|
546
|
-
text: '下方插入行'
|
|
547
528
|
})), /*#__PURE__*/React.createElement(Divider, {
|
|
548
529
|
sx: {
|
|
549
530
|
my: 0.5
|
|
@@ -83,7 +83,7 @@ var AlertView = function AlertView(_ref) {
|
|
|
83
83
|
marginLeft: (_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.indent ? node.attrs.indent * 32 : undefined,
|
|
84
84
|
border: '1px solid',
|
|
85
85
|
borderColor: variantData.color,
|
|
86
|
-
color: attrs.variant === 'default' ? 'var(--mui-palette-text-primary)' : variantData.color,
|
|
86
|
+
// color: attrs.variant === 'default' ? 'var(--mui-palette-text-primary)' : variantData.color,
|
|
87
87
|
borderRadius: '10px',
|
|
88
88
|
padding: '12px 16px',
|
|
89
89
|
lineHeight: 1.625,
|
|
@@ -103,7 +103,8 @@ var AlertView = function AlertView(_ref) {
|
|
|
103
103
|
sx: {
|
|
104
104
|
flex: 1,
|
|
105
105
|
'code': {
|
|
106
|
-
|
|
106
|
+
borderColor: attrs.variant === 'default' ? '' : "color-mix(in srgb, ".concat(variantData.color, " 30%, transparent) !important"),
|
|
107
|
+
bgcolor: attrs.variant === 'default' ? '' : "color-mix(in srgb, ".concat(variantData.color, " 10%, transparent) !important")
|
|
107
108
|
}
|
|
108
109
|
}
|
|
109
110
|
}, /*#__PURE__*/React.createElement(NodeViewContent, {
|
|
@@ -185,18 +185,18 @@ var TableContextMenu = function TableContextMenu(_ref) {
|
|
|
185
185
|
})
|
|
186
186
|
}), /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
187
187
|
onClick: function onClick() {
|
|
188
|
-
return editor.chain().focus().
|
|
188
|
+
return editor.chain().focus().toggleStrike().run();
|
|
189
189
|
},
|
|
190
|
-
icon: /*#__PURE__*/React.createElement(
|
|
190
|
+
icon: /*#__PURE__*/React.createElement(StrikethroughIcon, {
|
|
191
191
|
sx: {
|
|
192
192
|
fontSize: '1rem'
|
|
193
193
|
}
|
|
194
194
|
})
|
|
195
195
|
}), /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
196
196
|
onClick: function onClick() {
|
|
197
|
-
return editor.chain().focus().
|
|
197
|
+
return editor.chain().focus().toggleUnderline().run();
|
|
198
198
|
},
|
|
199
|
-
icon: /*#__PURE__*/React.createElement(
|
|
199
|
+
icon: /*#__PURE__*/React.createElement(UnderlineIcon, {
|
|
200
200
|
sx: {
|
|
201
201
|
fontSize: '1rem'
|
|
202
202
|
}
|
|
@@ -51,19 +51,10 @@ var isClickedCellInSelection = function isClickedCellInSelection(editor, clicked
|
|
|
51
51
|
return false;
|
|
52
52
|
}
|
|
53
53
|
var cellSelection = selection;
|
|
54
|
-
// 使用范围判断不精确,直接使用ranges判断
|
|
55
54
|
var ranges = cellSelection.ranges.map(function (it) {
|
|
56
55
|
return it.$from.pos;
|
|
57
56
|
});
|
|
58
57
|
return ranges.includes(domPosition);
|
|
59
|
-
// if (cellSelection.$anchorCell && cellSelection.$headCell) {
|
|
60
|
-
// const anchorPos = cellSelection.$anchorCell.pos;
|
|
61
|
-
// const headPos = cellSelection.$headCell.pos;
|
|
62
|
-
// const minPos = Math.min(anchorPos, headPos);
|
|
63
|
-
// const maxPos = Math.max(anchorPos, headPos);
|
|
64
|
-
// return domPosition >= minPos && domPosition <= maxPos;
|
|
65
|
-
// }
|
|
66
|
-
// return domPosition >= selection.from && domPosition <= selection.to;
|
|
67
58
|
} catch (error) {
|
|
68
59
|
console.warn('Error checking if clicked cell is in selection:', error);
|
|
69
60
|
return false;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Extension } from '@tiptap/core';
|
|
2
2
|
export declare const TableExtension: ({ editable }: {
|
|
3
3
|
editable: boolean;
|
|
4
|
-
}) => (
|
|
4
|
+
}) => (import("@tiptap/core").Node<import("@tiptap/extension-table").TableOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-table").TableHeaderOptions, any> | Extension<any, any>)[];
|
|
5
5
|
export default TableExtension;
|
|
@@ -12,7 +12,6 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
|
12
12
|
import { Extension } from '@tiptap/core';
|
|
13
13
|
import { Table, TableCell, TableHeader, TableRow } from '@tiptap/extension-table';
|
|
14
14
|
import { Plugin, TextSelection } from '@tiptap/pm/state';
|
|
15
|
-
import { Decoration, DecorationSet } from '@tiptap/pm/view';
|
|
16
15
|
import { createTableContextMenuPlugin } from "../component/Table";
|
|
17
16
|
export var TableExtension = function TableExtension(_ref) {
|
|
18
17
|
var editable = _ref.editable;
|
|
@@ -174,36 +173,6 @@ export var TableExtension = function TableExtension(_ref) {
|
|
|
174
173
|
return editable ? [createTableContextMenuPlugin(this.editor)] : [];
|
|
175
174
|
}
|
|
176
175
|
}),
|
|
177
|
-
// 选中表格时为 table 添加聚焦样式类名
|
|
178
|
-
Extension.create({
|
|
179
|
-
name: 'tableActiveClass',
|
|
180
|
-
addProseMirrorPlugins: function addProseMirrorPlugins() {
|
|
181
|
-
if (!editable) return [];
|
|
182
|
-
return [new Plugin({
|
|
183
|
-
props: {
|
|
184
|
-
decorations: function decorations(state) {
|
|
185
|
-
var selection = state.selection,
|
|
186
|
-
doc = state.doc;
|
|
187
|
-
var $from = selection.$from;
|
|
188
|
-
// 如果当前不在表格内,移除装饰
|
|
189
|
-
// 通过向上寻找最近的 table 节点
|
|
190
|
-
for (var depth = $from.depth; depth > 0; depth--) {
|
|
191
|
-
var node = $from.node(depth);
|
|
192
|
-
if (node.type.name === 'table') {
|
|
193
|
-
var from = $from.before(depth);
|
|
194
|
-
var to = $from.after(depth);
|
|
195
|
-
var deco = Decoration.node(from, to, {
|
|
196
|
-
class: 'table-focus'
|
|
197
|
-
});
|
|
198
|
-
return DecorationSet.create(doc, [deco]);
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
return null;
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
})];
|
|
205
|
-
}
|
|
206
|
-
}),
|
|
207
176
|
// Safari 中文输入 deleteCompositionText 修复
|
|
208
177
|
Extension.create({
|
|
209
178
|
name: 'safariCompositionDeleteFix',
|
package/dist/index.css
CHANGED
|
@@ -72,11 +72,19 @@
|
|
|
72
72
|
position: relative;
|
|
73
73
|
padding: 8px 16px;
|
|
74
74
|
margin: 0 0 20px;
|
|
75
|
-
border-radius: 10px;
|
|
76
|
-
border: 1px solid var(--mui-palette-divider);
|
|
77
75
|
background-color: var(--mui-palette-background-paper3);
|
|
78
76
|
}
|
|
79
77
|
|
|
78
|
+
.tiptap.ProseMirror blockquote::before {
|
|
79
|
+
content: '';
|
|
80
|
+
position: absolute;
|
|
81
|
+
top: 0;
|
|
82
|
+
left: 0;
|
|
83
|
+
width: 4px;
|
|
84
|
+
height: 100%;
|
|
85
|
+
background-color: var(--mui-palette-action-selected);
|
|
86
|
+
}
|
|
87
|
+
|
|
80
88
|
/* list */
|
|
81
89
|
.tiptap.ProseMirror ol,
|
|
82
90
|
.tiptap.ProseMirror ul {
|
|
@@ -188,8 +196,10 @@
|
|
|
188
196
|
line-height: 1.625;
|
|
189
197
|
font-size: inherit;
|
|
190
198
|
word-break: break-all;
|
|
191
|
-
font-weight: 500;
|
|
192
|
-
|
|
199
|
+
/* font-weight: 500; */
|
|
200
|
+
border: 1px solid;
|
|
201
|
+
border-color: var(--mui-palette-divider);
|
|
202
|
+
background-color: var(--mui-palette-background-paper3);
|
|
193
203
|
border-radius: 6px;
|
|
194
204
|
}
|
|
195
205
|
|
|
@@ -412,7 +422,7 @@
|
|
|
412
422
|
border-right-color: transparent;
|
|
413
423
|
}
|
|
414
424
|
|
|
415
|
-
.tiptap.ProseMirror[contenteditable="true"] table .selectedCell {
|
|
425
|
+
.tiptap.ProseMirror[contenteditable="true"] table .selectedCell * {
|
|
416
426
|
pointer-events: none;
|
|
417
427
|
}
|
|
418
428
|
|