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