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