@ctzhian/tiptap 1.6.29 → 1.7.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.
|
@@ -5,13 +5,13 @@ import { FloatingPopover } from "../../../component/FloatingPopover";
|
|
|
5
5
|
import TableContextMenu from "./ContextMenu";
|
|
6
6
|
var hasMultipleCellSelection = function hasMultipleCellSelection(editor) {
|
|
7
7
|
var selection = editor.state.selection;
|
|
8
|
-
console.log('1️⃣ selection', selection)
|
|
8
|
+
// console.log('1️⃣ selection', selection)
|
|
9
|
+
// console.log('2️⃣ cellSelection.constructor.name', selection.constructor.name)
|
|
10
|
+
// console.log('2️⃣ cellSelection.ranges', selection.ranges)
|
|
9
11
|
if (selection.constructor.name === '_CellSelection') {
|
|
10
12
|
var cellSelection = selection;
|
|
11
|
-
console.log('2️⃣ cellSelection
|
|
12
|
-
console.log('2️⃣ cellSelection
|
|
13
|
-
console.log('2️⃣ cellSelection.$anchorCell', cellSelection.$anchorCell);
|
|
14
|
-
console.log('2️⃣ cellSelection.$headCell', cellSelection.$headCell);
|
|
13
|
+
// console.log('2️⃣ cellSelection.$anchorCell', cellSelection.$anchorCell)
|
|
14
|
+
// console.log('2️⃣ cellSelection.$headCell', cellSelection.$headCell)
|
|
15
15
|
if (cellSelection.ranges && cellSelection.ranges.length > 1) {
|
|
16
16
|
return true;
|
|
17
17
|
}
|
|
@@ -20,23 +20,25 @@ var hasMultipleCellSelection = function hasMultipleCellSelection(editor) {
|
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
var selectionAny = selection;
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
var isColSelection = selectionAny.isColSelection();
|
|
24
|
+
var isRowSelection = selectionAny.isRowSelection();
|
|
25
|
+
// console.log('3️⃣ selectionAny.isColSelection', isColSelection)
|
|
26
|
+
// console.log('3️⃣ selectionAny.isRowSelection', isRowSelection)
|
|
27
|
+
if (isColSelection || isRowSelection) {
|
|
26
28
|
return true;
|
|
27
29
|
}
|
|
28
|
-
console.log('3️⃣ selection.from', selection.from)
|
|
29
|
-
console.log('3️⃣ selection.to', selection.to)
|
|
30
|
+
// console.log('3️⃣ selection.from', selection.from)
|
|
31
|
+
// console.log('3️⃣ selection.to', selection.to)
|
|
30
32
|
if (selection.from !== selection.to) {
|
|
31
33
|
var resolvedFrom = editor.state.doc.resolve(selection.from);
|
|
32
34
|
var resolvedTo = editor.state.doc.resolve(selection.to);
|
|
33
|
-
console.log('4️⃣ resolvedFrom.nodeAfter', resolvedFrom.nodeAfter)
|
|
34
|
-
console.log('4️⃣ resolvedTo.nodeBefore', resolvedTo.nodeBefore)
|
|
35
|
+
// console.log('4️⃣ resolvedFrom.nodeAfter', resolvedFrom.nodeAfter)
|
|
36
|
+
// console.log('4️⃣ resolvedTo.nodeBefore', resolvedTo.nodeBefore)
|
|
35
37
|
if (resolvedFrom.nodeAfter && resolvedTo.nodeBefore) {
|
|
36
38
|
var fromCell = resolvedFrom.node();
|
|
37
39
|
var toCell = resolvedTo.node();
|
|
38
|
-
console.log('5️⃣ fromCell', fromCell)
|
|
39
|
-
console.log('5️⃣ toCell', toCell)
|
|
40
|
+
// console.log('5️⃣ fromCell', fromCell)
|
|
41
|
+
// console.log('5️⃣ toCell', toCell)
|
|
40
42
|
if (fromCell !== toCell && (fromCell.type.name === 'tableCell' || fromCell.type.name === 'tableHeader')) {
|
|
41
43
|
return true;
|
|
42
44
|
}
|
|
@@ -46,35 +48,35 @@ var hasMultipleCellSelection = function hasMultipleCellSelection(editor) {
|
|
|
46
48
|
};
|
|
47
49
|
var isClickedCellInSelection = function isClickedCellInSelection(editor, clickedElement) {
|
|
48
50
|
var selection = editor.state.selection;
|
|
49
|
-
console.log('6️⃣ selection', selection)
|
|
50
|
-
console.log('6️⃣ selection.constructor.name', selection.constructor.name)
|
|
51
|
+
// console.log('6️⃣ selection', selection)
|
|
52
|
+
// console.log('6️⃣ selection.constructor.name', selection.constructor.name)
|
|
51
53
|
if (selection.constructor.name !== '_CellSelection') {
|
|
52
54
|
return false;
|
|
53
55
|
}
|
|
54
56
|
try {
|
|
55
57
|
var editorView = editor.view;
|
|
56
58
|
var domPosition = null;
|
|
57
|
-
console.log('7️⃣ clickedElement', clickedElement)
|
|
59
|
+
// console.log('7️⃣ clickedElement', clickedElement)
|
|
58
60
|
if (clickedElement.tagName === 'TD' || clickedElement.tagName === 'TH') {
|
|
59
61
|
domPosition = editorView.posAtDOM(clickedElement, 0);
|
|
60
|
-
console.log('7️⃣ domPosition - 1', domPosition)
|
|
62
|
+
// console.log('7️⃣ domPosition - 1', domPosition)
|
|
61
63
|
} else {
|
|
62
64
|
var parentCell = clickedElement.closest('td, th');
|
|
63
|
-
console.log('7️⃣ parentCell', parentCell)
|
|
65
|
+
// console.log('7️⃣ parentCell', parentCell)
|
|
64
66
|
if (parentCell) {
|
|
65
67
|
domPosition = editorView.posAtDOM(parentCell, 0);
|
|
66
|
-
console.log('7️⃣ domPosition - 2', domPosition)
|
|
68
|
+
// console.log('7️⃣ domPosition - 2', domPosition)
|
|
67
69
|
}
|
|
68
70
|
}
|
|
69
71
|
if (domPosition === null || domPosition === undefined || domPosition < 0) {
|
|
70
72
|
return false;
|
|
71
73
|
}
|
|
72
74
|
var cellSelection = selection;
|
|
73
|
-
console.log('8️⃣ cellSelection.ranges', cellSelection.ranges)
|
|
75
|
+
// console.log('8️⃣ cellSelection.ranges', cellSelection.ranges)
|
|
74
76
|
var ranges = cellSelection.ranges.map(function (it) {
|
|
75
77
|
return it.$from.pos;
|
|
76
78
|
});
|
|
77
|
-
console.log('8️⃣ ranges', ranges)
|
|
79
|
+
// console.log('8️⃣ ranges', ranges)
|
|
78
80
|
return ranges.includes(domPosition);
|
|
79
81
|
} catch (error) {
|
|
80
82
|
console.warn('Error checking if clicked cell is in selection:', error);
|
|
@@ -82,14 +84,14 @@ var isClickedCellInSelection = function isClickedCellInSelection(editor, clicked
|
|
|
82
84
|
}
|
|
83
85
|
};
|
|
84
86
|
var saveCurrentSelection = function saveCurrentSelection(editor) {
|
|
85
|
-
console.log('9️⃣ selection', editor.state.selection, 'doc', editor.state.doc)
|
|
87
|
+
// console.log('9️⃣ selection', editor.state.selection, 'doc', editor.state.doc)
|
|
86
88
|
return {
|
|
87
89
|
selection: editor.state.selection,
|
|
88
90
|
doc: editor.state.doc
|
|
89
91
|
};
|
|
90
92
|
};
|
|
91
93
|
var restoreSelection = function restoreSelection(editor, savedState) {
|
|
92
|
-
console.log('0️⃣ savedState', savedState)
|
|
94
|
+
// console.log('0️⃣ savedState', savedState)
|
|
93
95
|
if (savedState && savedState.selection) {
|
|
94
96
|
try {
|
|
95
97
|
var tr = editor.state.tr.setSelection(savedState.selection);
|
|
@@ -107,18 +109,18 @@ var restoreSelection = function restoreSelection(editor, savedState) {
|
|
|
107
109
|
};
|
|
108
110
|
var isInTableCell = function isInTableCell(element) {
|
|
109
111
|
var cell = element.closest('td, th');
|
|
110
|
-
console.log('🍎 isInTableCell cell', cell)
|
|
112
|
+
// console.log('🍎 isInTableCell cell', cell)
|
|
111
113
|
if (!cell) return false;
|
|
112
114
|
var editorElement = cell.closest('.tiptap');
|
|
113
|
-
console.log('🍎 isInTableCell editorElement', editorElement)
|
|
115
|
+
// console.log('🍎 isInTableCell editorElement', editorElement)
|
|
114
116
|
return !!editorElement;
|
|
115
117
|
};
|
|
116
118
|
var getTableCell = function getTableCell(element) {
|
|
117
119
|
var cell = element.closest('td, th');
|
|
118
|
-
console.log('🍎 getTableCell cell', cell)
|
|
120
|
+
// console.log('🍎 getTableCell cell', cell)
|
|
119
121
|
if (!cell) return null;
|
|
120
122
|
var editorElement = cell.closest('.tiptap');
|
|
121
|
-
console.log('🍎 getTableCell editorElement', editorElement)
|
|
123
|
+
// console.log('🍎 getTableCell editorElement', editorElement)
|
|
122
124
|
return editorElement ? cell : null;
|
|
123
125
|
};
|
|
124
126
|
export var TableContextMenuPluginKey = new PluginKey('tableContextMenu');
|
|
@@ -129,7 +131,7 @@ export var createTableContextMenuPlugin = function createTableContextMenuPlugin(
|
|
|
129
131
|
var commandExecuted = false;
|
|
130
132
|
var preventSelectionLoss = false;
|
|
131
133
|
var createMenuContainer = function createMenuContainer() {
|
|
132
|
-
console.log('🍊 createMenuContainer')
|
|
134
|
+
// console.log('🍊 createMenuContainer')
|
|
133
135
|
if (!menuContainer) {
|
|
134
136
|
menuContainer = document.createElement('div');
|
|
135
137
|
menuContainer.style.position = 'fixed';
|
|
@@ -144,7 +146,7 @@ export var createTableContextMenuPlugin = function createTableContextMenuPlugin(
|
|
|
144
146
|
};
|
|
145
147
|
};
|
|
146
148
|
var destroyMenuContainer = function destroyMenuContainer() {
|
|
147
|
-
console.log('🍊 destroyMenuContainer', root, 'menuContainer', menuContainer)
|
|
149
|
+
// console.log('🍊 destroyMenuContainer', root, 'menuContainer', menuContainer)
|
|
148
150
|
if (root) {
|
|
149
151
|
// 保存当前的 root 引用，避免异步执行时访问 null
|
|
150
152
|
var currentRoot = root;
|
|
@@ -166,7 +168,7 @@ export var createTableContextMenuPlugin = function createTableContextMenuPlugin(
|
|
|
166
168
|
}
|
|
167
169
|
};
|
|
168
170
|
var hideContextMenu = function hideContextMenu() {
|
|
169
|
-
console.log('🍊 hideContextMenu', root, 'savedSelection', savedSelection, 'commandExecuted', commandExecuted, 'preventSelectionLoss', preventSelectionLoss)
|
|
171
|
+
// console.log('🍊 hideContextMenu', root, 'savedSelection', savedSelection, 'commandExecuted', commandExecuted, 'preventSelectionLoss', preventSelectionLoss)
|
|
170
172
|
if (root) {
|
|
171
173
|
root.render(null);
|
|
172
174
|
}
|
|
@@ -178,7 +180,7 @@ export var createTableContextMenuPlugin = function createTableContextMenuPlugin(
|
|
|
178
180
|
preventSelectionLoss = false;
|
|
179
181
|
};
|
|
180
182
|
var showContextMenu = function showContextMenu(anchorEl, hasMultipleSelection) {
|
|
181
|
-
console.log('🍊 showContextMenu', anchorEl, 'hasMultipleSelection', hasMultipleSelection)
|
|
183
|
+
// console.log('🍊 showContextMenu', anchorEl, 'hasMultipleSelection', hasMultipleSelection)
|
|
182
184
|
var _createMenuContainer = createMenuContainer(),
|
|
183
185
|
root = _createMenuContainer.root;
|
|
184
186
|
commandExecuted = false;
|
|
@@ -205,7 +207,7 @@ export var createTableContextMenuPlugin = function createTableContextMenuPlugin(
|
|
|
205
207
|
key: TableContextMenuPluginKey,
|
|
206
208
|
state: {
|
|
207
209
|
init: function init() {
|
|
208
|
-
console.log('🍊 init')
|
|
210
|
+
// console.log('🍊 init')
|
|
209
211
|
return {
|
|
210
212
|
show: false,
|
|
211
213
|
anchorEl: null,
|
|
@@ -213,7 +215,7 @@ export var createTableContextMenuPlugin = function createTableContextMenuPlugin(
|
|
|
213
215
|
};
|
|
214
216
|
},
|
|
215
217
|
apply: function apply(tr, oldState) {
|
|
216
|
-
console.log('🍊 apply', oldState)
|
|
218
|
+
// console.log('🍊 apply', oldState)
|
|
217
219
|
return oldState;
|
|
218
220
|
}
|
|
219
221
|
},
|
|
@@ -221,9 +223,9 @@ export var createTableContextMenuPlugin = function createTableContextMenuPlugin(
|
|
|
221
223
|
handleDOMEvents: {
|
|
222
224
|
contextmenu: function contextmenu(view, event) {
|
|
223
225
|
var target = event.target;
|
|
224
|
-
console.log('🍊 contextmenu', target)
|
|
226
|
+
// console.log('🍊 contextmenu', target)
|
|
225
227
|
if (!isInTableCell(target)) {
|
|
226
|
-
console.log('🍊 contextmenu not in table cell')
|
|
228
|
+
// console.log('🍊 contextmenu not in table cell')
|
|
227
229
|
hideContextMenu();
|
|
228
230
|
preventSelectionLoss = false;
|
|
229
231
|
return false;
|
|
@@ -236,7 +238,7 @@ export var createTableContextMenuPlugin = function createTableContextMenuPlugin(
|
|
|
236
238
|
return false;
|
|
237
239
|
}
|
|
238
240
|
if (preventSelectionLoss && savedSelection) {
|
|
239
|
-
console.log('🍊 contextmenu preventSelectionLoss and savedSelection', preventSelectionLoss, savedSelection)
|
|
241
|
+
// console.log('🍊 contextmenu preventSelectionLoss and savedSelection', preventSelectionLoss, savedSelection)
|
|
240
242
|
restoreSelection(editor, savedSelection);
|
|
241
243
|
setTimeout(function () {
|
|
242
244
|
var selectedCells = document.querySelectorAll('.tiptap .selectedCell');
|
|
@@ -244,15 +246,15 @@ export var createTableContextMenuPlugin = function createTableContextMenuPlugin(
|
|
|
244
246
|
}, 50);
|
|
245
247
|
}
|
|
246
248
|
var hasMultipleSelection = savedSelection ? true : hasMultipleCellSelection(editor);
|
|
247
|
-
console.log('🍊 contextmenu hasMultipleSelection', hasMultipleSelection)
|
|
249
|
+
// console.log('🍊 contextmenu hasMultipleSelection', hasMultipleSelection)
|
|
248
250
|
showContextMenu(cellElement, hasMultipleSelection);
|
|
249
251
|
preventSelectionLoss = false;
|
|
250
252
|
return true;
|
|
251
253
|
},
|
|
252
254
|
mousedown: function mousedown(view, event) {
|
|
253
|
-
console.log('🍊 mousedown')
|
|
255
|
+
// console.log('🍊 mousedown')
|
|
254
256
|
var target = event.target;
|
|
255
|
-
console.log('🍊 mousedown target', target)
|
|
257
|
+
// console.log('🍊 mousedown target', target)
|
|
256
258
|
if (event.button === 2) {
|
|
257
259
|
if (isInTableCell(target)) {
|
|
258
260
|
var cellElement = getTableCell(target);
|
|
@@ -280,22 +282,22 @@ export var createTableContextMenuPlugin = function createTableContextMenuPlugin(
|
|
|
280
282
|
return false;
|
|
281
283
|
},
|
|
282
284
|
mouseup: function mouseup(view, event) {
|
|
283
|
-
console.log('🍊 mouseup')
|
|
285
|
+
// console.log('🍊 mouseup')
|
|
284
286
|
var target = event.target;
|
|
285
287
|
if (isInTableCell(target)) {
|
|
286
288
|
var cellElement = getTableCell(target);
|
|
287
289
|
if (cellElement) {
|
|
288
290
|
var currentHasMultipleSelection = hasMultipleCellSelection(editor);
|
|
289
291
|
if (currentHasMultipleSelection) {
|
|
290
|
-
var _window$getSelection
|
|
291
|
-
console.log('🍊🍊 mouseup current selection',
|
|
292
|
-
(_window$
|
|
293
|
-
console.log('🍊🍊 mouseup current selection',
|
|
292
|
+
var _window$getSelection;
|
|
293
|
+
// console.log('🍊🍊 mouseup current selection', window.getSelection()?.toString().length, window.getSelection()?.toString())
|
|
294
|
+
(_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 || _window$getSelection.removeAllRanges();
|
|
295
|
+
// console.log('🍊🍊 mouseup current selection', window.getSelection()?.toString().length, window.getSelection()?.toString())
|
|
294
296
|
}
|
|
295
297
|
}
|
|
296
298
|
}
|
|
297
299
|
if (event.button === 2 && preventSelectionLoss) {
|
|
298
|
-
console.log('🍊 mouseup preventSelectionLoss', preventSelectionLoss)
|
|
300
|
+
// console.log('🍊 mouseup preventSelectionLoss', preventSelectionLoss)
|
|
299
301
|
setTimeout(function () {
|
|
300
302
|
if (preventSelectionLoss) {
|
|
301
303
|
preventSelectionLoss = false;
|
|
@@ -309,7 +311,7 @@ export var createTableContextMenuPlugin = function createTableContextMenuPlugin(
|
|
|
309
311
|
return false;
|
|
310
312
|
},
|
|
311
313
|
keydown: function keydown(view, event) {
|
|
312
|
-
console.log('🍊 keydown')
|
|
314
|
+
// console.log('🍊 keydown')
|
|
313
315
|
if (event.key === 'Escape') {
|
|
314
316
|
hideContextMenu();
|
|
315
317
|
return true;
|
|
@@ -321,7 +323,7 @@ export var createTableContextMenuPlugin = function createTableContextMenuPlugin(
|
|
|
321
323
|
view: function view() {
|
|
322
324
|
return {
|
|
323
325
|
destroy: function destroy() {
|
|
324
|
-
console.log('🍊 destroy')
|
|
326
|
+
// console.log('🍊 destroy')
|
|
325
327
|
destroyMenuContainer();
|
|
326
328
|
}
|
|
327
329
|
};
|