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