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