lexical 0.1.8 → 0.1.9
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.
- package/Lexical.dev.js +383 -226
- package/Lexical.prod.js +144 -142
- package/LexicalAutoLinkNode.prod.js +1 -1
- package/LexicalCodeHighlightNode.prod.js +1 -1
- package/LexicalCodeNode.prod.js +1 -1
- package/LexicalExtendedNodes.dev.js +2 -4
- package/LexicalExtendedNodes.prod.js +2 -2
- package/LexicalHashtagNode.prod.js +1 -1
- package/LexicalHeadingNode.prod.js +1 -1
- package/LexicalLinkNode.prod.js +1 -1
- package/LexicalOverflowNode.prod.js +1 -1
- package/LexicalQuoteNode.prod.js +1 -1
- package/package.json +1 -1
- package/LexicalTableCellNode.dev.js +0 -81
- package/LexicalTableCellNode.prod.js +0 -9
- package/LexicalTableNode.dev.js +0 -638
- package/LexicalTableNode.prod.js +0 -21
- package/LexicalTableRowNode.dev.js +0 -76
- package/LexicalTableRowNode.prod.js +0 -8
- package/TableCellNode.js +0 -9
- package/TableNode.js +0 -9
- package/TableRowNode.js +0 -9
package/LexicalTableNode.dev.js
DELETED
|
@@ -1,638 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the MIT license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*/
|
|
7
|
-
'use strict';
|
|
8
|
-
|
|
9
|
-
var lexical = require('lexical');
|
|
10
|
-
var TableCellNode = require('lexical/TableCellNode');
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
14
|
-
*
|
|
15
|
-
* This source code is licensed under the MIT license found in the
|
|
16
|
-
* LICENSE file in the root directory of this source tree.
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*/
|
|
20
|
-
function addClassNamesToElement(element, ...classNames) {
|
|
21
|
-
classNames.forEach(className => {
|
|
22
|
-
if (className != null && typeof className === 'string') {
|
|
23
|
-
element.classList.add(...className.split(' '));
|
|
24
|
-
}
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
30
|
-
*
|
|
31
|
-
* This source code is licensed under the MIT license found in the
|
|
32
|
-
* LICENSE file in the root directory of this source tree.
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
*/
|
|
36
|
-
function $findMatchingParent(startingNode, findFn) {
|
|
37
|
-
let curr = startingNode;
|
|
38
|
-
|
|
39
|
-
while (curr !== lexical.$getRoot() && curr != null) {
|
|
40
|
-
if (findFn(curr)) {
|
|
41
|
-
return curr;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
curr = curr.getParent();
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
return null;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
/**
|
|
51
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
52
|
-
*
|
|
53
|
-
* This source code is licensed under the MIT license found in the
|
|
54
|
-
* LICENSE file in the root directory of this source tree.
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
*/
|
|
58
|
-
const LowPriority = 1;
|
|
59
|
-
const CriticalPriority = 4;
|
|
60
|
-
const removeHighlightStyle = document.createElement('style');
|
|
61
|
-
removeHighlightStyle.appendChild(document.createTextNode('::selection{background-color: transparent}'));
|
|
62
|
-
|
|
63
|
-
function getCellFromTarget(node) {
|
|
64
|
-
let currentNode = node;
|
|
65
|
-
|
|
66
|
-
while (currentNode != null) {
|
|
67
|
-
const nodeName = currentNode.nodeName;
|
|
68
|
-
|
|
69
|
-
if (nodeName === 'TD' || nodeName === 'TH') {
|
|
70
|
-
// $FlowFixMe: internal field
|
|
71
|
-
const cell = currentNode._cell;
|
|
72
|
-
|
|
73
|
-
if (cell === undefined) {
|
|
74
|
-
return null;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
return cell;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
currentNode = currentNode.parentNode;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
return null;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
function trackTableGrid(tableNode, tableElement, editor) {
|
|
87
|
-
const cells = [];
|
|
88
|
-
const grid = {
|
|
89
|
-
cells,
|
|
90
|
-
columns: 0,
|
|
91
|
-
rows: 0
|
|
92
|
-
};
|
|
93
|
-
const observer = new MutationObserver(records => {
|
|
94
|
-
editor.update(() => {
|
|
95
|
-
let currentNode = tableElement.firstChild;
|
|
96
|
-
let x = 0;
|
|
97
|
-
let y = 0;
|
|
98
|
-
let gridNeedsRedraw = false;
|
|
99
|
-
|
|
100
|
-
for (let i = 0; i < records.length; i++) {
|
|
101
|
-
const record = records[i];
|
|
102
|
-
const target = record.target;
|
|
103
|
-
const nodeName = target.nodeName;
|
|
104
|
-
|
|
105
|
-
if (nodeName === 'TABLE' || nodeName === 'TR') {
|
|
106
|
-
gridNeedsRedraw = true;
|
|
107
|
-
break;
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
if (!gridNeedsRedraw) {
|
|
112
|
-
return;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
cells.length = 0;
|
|
116
|
-
|
|
117
|
-
while (currentNode != null) {
|
|
118
|
-
const nodeMame = currentNode.nodeName;
|
|
119
|
-
|
|
120
|
-
if (nodeMame === 'TD' || nodeMame === 'TH') {
|
|
121
|
-
// $FlowFixMe: TD is always an HTMLElement
|
|
122
|
-
const elem = currentNode;
|
|
123
|
-
const cell = {
|
|
124
|
-
elem,
|
|
125
|
-
highlighted: false,
|
|
126
|
-
x,
|
|
127
|
-
y
|
|
128
|
-
}; // $FlowFixMe: internal field
|
|
129
|
-
|
|
130
|
-
currentNode._cell = cell;
|
|
131
|
-
|
|
132
|
-
if (cells[y] === undefined) {
|
|
133
|
-
cells[y] = [];
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
cells[y][x] = cell;
|
|
137
|
-
} else {
|
|
138
|
-
const child = currentNode.firstChild;
|
|
139
|
-
|
|
140
|
-
if (child != null) {
|
|
141
|
-
currentNode = child;
|
|
142
|
-
continue;
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
const sibling = currentNode.nextSibling;
|
|
147
|
-
|
|
148
|
-
if (sibling != null) {
|
|
149
|
-
x++;
|
|
150
|
-
currentNode = sibling;
|
|
151
|
-
continue;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
const parent = currentNode.parentNode;
|
|
155
|
-
|
|
156
|
-
if (parent != null) {
|
|
157
|
-
const parentSibling = parent.nextSibling;
|
|
158
|
-
|
|
159
|
-
if (parentSibling == null) {
|
|
160
|
-
break;
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
y++;
|
|
164
|
-
x = 0;
|
|
165
|
-
currentNode = parentSibling;
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
grid.columns = x + 1;
|
|
170
|
-
grid.rows = y + 1;
|
|
171
|
-
tableNode.setGrid(grid);
|
|
172
|
-
});
|
|
173
|
-
});
|
|
174
|
-
observer.observe(tableElement, {
|
|
175
|
-
childList: true,
|
|
176
|
-
subtree: true
|
|
177
|
-
});
|
|
178
|
-
tableNode.setGrid(grid);
|
|
179
|
-
return grid;
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
function updateCells(fromX, toX, fromY, toY, cells) {
|
|
183
|
-
const highlighted = [];
|
|
184
|
-
|
|
185
|
-
for (let y = 0; y < cells.length; y++) {
|
|
186
|
-
const row = cells[y];
|
|
187
|
-
|
|
188
|
-
for (let x = 0; x < row.length; x++) {
|
|
189
|
-
const cell = row[x];
|
|
190
|
-
const elemStyle = cell.elem.style;
|
|
191
|
-
|
|
192
|
-
if (x >= fromX && x <= toX && y >= fromY && y <= toY) {
|
|
193
|
-
if (!cell.highlighted) {
|
|
194
|
-
cell.highlighted = true;
|
|
195
|
-
elemStyle.setProperty('background-color', 'rgb(163, 187, 255)');
|
|
196
|
-
elemStyle.setProperty('caret-color', 'transparent');
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
highlighted.push(cell);
|
|
200
|
-
} else if (cell.highlighted) {
|
|
201
|
-
cell.highlighted = false;
|
|
202
|
-
elemStyle.removeProperty('background-color');
|
|
203
|
-
elemStyle.removeProperty('caret-color');
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
return highlighted;
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
function applyCustomTableHandlers(tableNode, tableElement, editor) {
|
|
212
|
-
const rootElement = editor.getRootElement();
|
|
213
|
-
|
|
214
|
-
if (rootElement === null) {
|
|
215
|
-
return;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
trackTableGrid(tableNode, tableElement, editor);
|
|
219
|
-
const grid = tableNode.getGrid();
|
|
220
|
-
let isSelected = false;
|
|
221
|
-
let isHighlightingCells = false;
|
|
222
|
-
let startX = -1;
|
|
223
|
-
let startY = -1;
|
|
224
|
-
let currentX = -1;
|
|
225
|
-
let currentY = -1;
|
|
226
|
-
let highlightedCells = [];
|
|
227
|
-
|
|
228
|
-
if (grid == null) {
|
|
229
|
-
throw new Error('Table grid not found.');
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
tableElement.addEventListener('mousemove', event => {
|
|
233
|
-
if (isSelected) {
|
|
234
|
-
// $FlowFixMe: event.target is always a Node on the DOM
|
|
235
|
-
const cell = getCellFromTarget(event.target);
|
|
236
|
-
|
|
237
|
-
if (cell !== null) {
|
|
238
|
-
const cellX = cell.x;
|
|
239
|
-
const cellY = cell.y;
|
|
240
|
-
|
|
241
|
-
if (!isHighlightingCells && (startX !== cellX || startY !== cellY)) {
|
|
242
|
-
event.preventDefault();
|
|
243
|
-
const windowSelection = window.getSelection(); // Collapse the selection
|
|
244
|
-
|
|
245
|
-
windowSelection.setBaseAndExtent(windowSelection.anchorNode, 0, windowSelection.anchorNode, 0);
|
|
246
|
-
isHighlightingCells = true;
|
|
247
|
-
|
|
248
|
-
if (document.body) {
|
|
249
|
-
document.body.appendChild(removeHighlightStyle);
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
if (deleteCharacterListener === null) {
|
|
253
|
-
deleteCharacterListener = editor.addListener('command', (type, payload) => {
|
|
254
|
-
if (type === 'deleteCharacter') {
|
|
255
|
-
if (highlightedCells.length === grid.columns * grid.rows) {
|
|
256
|
-
tableNode.selectPrevious(); // Delete entire table
|
|
257
|
-
|
|
258
|
-
tableNode.remove();
|
|
259
|
-
clearHighlight();
|
|
260
|
-
return true;
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
highlightedCells.forEach(({
|
|
264
|
-
elem
|
|
265
|
-
}) => {
|
|
266
|
-
const cellNode = lexical.$getNearestNodeFromDOMNode(elem);
|
|
267
|
-
|
|
268
|
-
if (lexical.$isElementNode(cellNode)) {
|
|
269
|
-
cellNode.clear();
|
|
270
|
-
const paragraphNode = lexical.$createParagraphNode();
|
|
271
|
-
const textNode = lexical.$createTextNode();
|
|
272
|
-
paragraphNode.append(textNode);
|
|
273
|
-
cellNode.append(paragraphNode);
|
|
274
|
-
}
|
|
275
|
-
});
|
|
276
|
-
tableNode.setSelectionState(null);
|
|
277
|
-
lexical.$setSelection(null);
|
|
278
|
-
return true;
|
|
279
|
-
} else if (type === 'formatText') {
|
|
280
|
-
formatCells(payload);
|
|
281
|
-
return true;
|
|
282
|
-
} else if (type === 'insertText') {
|
|
283
|
-
clearHighlight();
|
|
284
|
-
return false;
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
return false;
|
|
288
|
-
}, LowPriority);
|
|
289
|
-
}
|
|
290
|
-
} else if (cellX === currentX && cellY === currentY) {
|
|
291
|
-
return;
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
currentX = cellX;
|
|
295
|
-
currentY = cellY;
|
|
296
|
-
|
|
297
|
-
if (isHighlightingCells) {
|
|
298
|
-
const fromX = Math.min(startX, currentX);
|
|
299
|
-
const toX = Math.max(startX, currentX);
|
|
300
|
-
const fromY = Math.min(startY, currentY);
|
|
301
|
-
const toY = Math.max(startY, currentY);
|
|
302
|
-
editor.update(() => {
|
|
303
|
-
highlightedCells = tableNode.setSelectionState({
|
|
304
|
-
fromX,
|
|
305
|
-
fromY,
|
|
306
|
-
toX,
|
|
307
|
-
toY
|
|
308
|
-
});
|
|
309
|
-
});
|
|
310
|
-
}
|
|
311
|
-
}
|
|
312
|
-
}
|
|
313
|
-
});
|
|
314
|
-
|
|
315
|
-
const clearHighlight = () => {
|
|
316
|
-
editor.update(() => {
|
|
317
|
-
isHighlightingCells = false;
|
|
318
|
-
isSelected = false;
|
|
319
|
-
startX = -1;
|
|
320
|
-
startY = -1;
|
|
321
|
-
currentX = -1;
|
|
322
|
-
currentY = -1;
|
|
323
|
-
editor.update(() => {
|
|
324
|
-
tableNode.setSelectionState(null);
|
|
325
|
-
});
|
|
326
|
-
highlightedCells = [];
|
|
327
|
-
|
|
328
|
-
if (deleteCharacterListener !== null) {
|
|
329
|
-
deleteCharacterListener();
|
|
330
|
-
deleteCharacterListener = null;
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
const parent = removeHighlightStyle.parentNode;
|
|
334
|
-
|
|
335
|
-
if (parent != null) {
|
|
336
|
-
parent.removeChild(removeHighlightStyle);
|
|
337
|
-
}
|
|
338
|
-
});
|
|
339
|
-
};
|
|
340
|
-
|
|
341
|
-
tableElement.addEventListener('mouseleave', event => {
|
|
342
|
-
if (isSelected) {
|
|
343
|
-
return;
|
|
344
|
-
}
|
|
345
|
-
});
|
|
346
|
-
|
|
347
|
-
const formatCells = type => {
|
|
348
|
-
let selection = lexical.$getSelection();
|
|
349
|
-
|
|
350
|
-
if (selection === null) {
|
|
351
|
-
selection = lexical.$createRangeSelection();
|
|
352
|
-
} // This is to make Flow play ball.
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
const formatSelection = selection;
|
|
356
|
-
const anchor = formatSelection.anchor;
|
|
357
|
-
const focus = formatSelection.focus;
|
|
358
|
-
highlightedCells.forEach(highlightedCell => {
|
|
359
|
-
const cellNode = lexical.$getNearestNodeFromDOMNode(highlightedCell.elem);
|
|
360
|
-
|
|
361
|
-
if (lexical.$isElementNode(cellNode)) {
|
|
362
|
-
anchor.set(cellNode.getKey(), 0, 'element');
|
|
363
|
-
focus.set(cellNode.getKey(), cellNode.getChildrenSize(), 'element');
|
|
364
|
-
formatSelection.formatText(type);
|
|
365
|
-
}
|
|
366
|
-
}); // Collapse selection
|
|
367
|
-
|
|
368
|
-
selection.anchor.set(selection.anchor.key, selection.anchor.offset, selection.anchor.type);
|
|
369
|
-
selection.focus.set(selection.anchor.key, selection.anchor.offset, selection.anchor.type);
|
|
370
|
-
lexical.$setSelection(selection);
|
|
371
|
-
};
|
|
372
|
-
|
|
373
|
-
let deleteCharacterListener = null;
|
|
374
|
-
tableElement.addEventListener('mousedown', event => {
|
|
375
|
-
if (isSelected) {
|
|
376
|
-
if (isHighlightingCells) {
|
|
377
|
-
clearHighlight();
|
|
378
|
-
}
|
|
379
|
-
|
|
380
|
-
return;
|
|
381
|
-
}
|
|
382
|
-
|
|
383
|
-
setTimeout(() => {
|
|
384
|
-
if (isHighlightingCells) {
|
|
385
|
-
clearHighlight();
|
|
386
|
-
} // $FlowFixMe: event.target is always a Node on the DOM
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
const cell = getCellFromTarget(event.target);
|
|
390
|
-
|
|
391
|
-
if (cell !== null) {
|
|
392
|
-
isSelected = true;
|
|
393
|
-
startX = cell.x;
|
|
394
|
-
startY = cell.y;
|
|
395
|
-
document.addEventListener('mouseup', () => {
|
|
396
|
-
isSelected = false;
|
|
397
|
-
}, {
|
|
398
|
-
capture: true,
|
|
399
|
-
once: true
|
|
400
|
-
});
|
|
401
|
-
}
|
|
402
|
-
}, 0);
|
|
403
|
-
});
|
|
404
|
-
window.addEventListener('click', e => {
|
|
405
|
-
if (highlightedCells.length > 0 && !tableElement.contains(e.target)) {
|
|
406
|
-
editor.update(() => {
|
|
407
|
-
tableNode.setSelectionState(null);
|
|
408
|
-
});
|
|
409
|
-
}
|
|
410
|
-
});
|
|
411
|
-
|
|
412
|
-
const selectGridNodeInDirection = (x, y, direction) => {
|
|
413
|
-
let nodeToSelect;
|
|
414
|
-
|
|
415
|
-
switch (direction) {
|
|
416
|
-
case 'backward':
|
|
417
|
-
case 'forward':
|
|
418
|
-
{
|
|
419
|
-
const isForward = direction === 'forward';
|
|
420
|
-
|
|
421
|
-
if (y !== (isForward ? grid.columns - 1 : 0)) {
|
|
422
|
-
nodeToSelect = tableNode.getCellNodeFromCords(x, y + (isForward ? 1 : -1));
|
|
423
|
-
} else {
|
|
424
|
-
if (x !== (isForward ? grid.rows - 1 : 0)) {
|
|
425
|
-
nodeToSelect = tableNode.getCellNodeFromCords(x + (isForward ? 1 : -1), isForward ? 0 : grid.columns - 1);
|
|
426
|
-
} else if (!isForward) {
|
|
427
|
-
nodeToSelect = tableNode.getPreviousSibling();
|
|
428
|
-
} else {
|
|
429
|
-
nodeToSelect = tableNode.getNextSibling();
|
|
430
|
-
}
|
|
431
|
-
}
|
|
432
|
-
|
|
433
|
-
break;
|
|
434
|
-
}
|
|
435
|
-
|
|
436
|
-
case 'up':
|
|
437
|
-
{
|
|
438
|
-
nodeToSelect = x !== 0 ? tableNode.getCellNodeFromCords(x - 1, y) : tableNode.getPreviousSibling();
|
|
439
|
-
break;
|
|
440
|
-
}
|
|
441
|
-
|
|
442
|
-
case 'down':
|
|
443
|
-
{
|
|
444
|
-
nodeToSelect = x !== grid.rows - 1 ? tableNode.getCellNodeFromCords(x + 1, y) : tableNode.getNextSibling();
|
|
445
|
-
break;
|
|
446
|
-
}
|
|
447
|
-
}
|
|
448
|
-
|
|
449
|
-
if (lexical.$isElementNode(nodeToSelect) || lexical.$isTextNode(nodeToSelect)) {
|
|
450
|
-
nodeToSelect.select();
|
|
451
|
-
return true;
|
|
452
|
-
}
|
|
453
|
-
|
|
454
|
-
return false;
|
|
455
|
-
};
|
|
456
|
-
|
|
457
|
-
editor.addListener('command', (type, payload) => {
|
|
458
|
-
const selection = lexical.$getSelection();
|
|
459
|
-
|
|
460
|
-
if (selection == null) {
|
|
461
|
-
return false;
|
|
462
|
-
}
|
|
463
|
-
|
|
464
|
-
const tableCellNode = $findMatchingParent(selection.anchor.getNode(), n => TableCellNode.$isTableCellNode(n));
|
|
465
|
-
|
|
466
|
-
if (!TableCellNode.$isTableCellNode(tableCellNode)) {
|
|
467
|
-
return false;
|
|
468
|
-
}
|
|
469
|
-
|
|
470
|
-
if (type === 'deleteCharacter') {
|
|
471
|
-
if (highlightedCells.length === 0 && selection.isCollapsed() && selection.anchor.offset === 0) {
|
|
472
|
-
return true;
|
|
473
|
-
}
|
|
474
|
-
}
|
|
475
|
-
|
|
476
|
-
if (type === 'indentContent' || type === 'outdentContent') {
|
|
477
|
-
if (selection.isCollapsed() && highlightedCells.length === 0) {
|
|
478
|
-
const currentCords = tableNode.getCordsFromCellNode(tableCellNode);
|
|
479
|
-
selectGridNodeInDirection(currentCords.x, currentCords.y, type === 'indentContent' ? 'forward' : 'backward');
|
|
480
|
-
return true;
|
|
481
|
-
}
|
|
482
|
-
}
|
|
483
|
-
|
|
484
|
-
if (type === 'keyArrowDown' || type === 'keyArrowUp') {
|
|
485
|
-
const event = payload;
|
|
486
|
-
|
|
487
|
-
if (selection.isCollapsed() && highlightedCells.length === 0) {
|
|
488
|
-
const currentCords = tableNode.getCordsFromCellNode(tableCellNode);
|
|
489
|
-
const elementParentNode = $findMatchingParent(selection.anchor.getNode(), n => lexical.$isElementNode(n));
|
|
490
|
-
|
|
491
|
-
if (type === 'keyArrowUp' && elementParentNode === tableCellNode.getFirstChild() || type === 'keyArrowDown' && elementParentNode === tableCellNode.getLastChild()) {
|
|
492
|
-
event.preventDefault();
|
|
493
|
-
event.stopImmediatePropagation();
|
|
494
|
-
selectGridNodeInDirection(currentCords.x, currentCords.y, type === 'keyArrowUp' ? 'up' : 'down');
|
|
495
|
-
return true;
|
|
496
|
-
}
|
|
497
|
-
}
|
|
498
|
-
}
|
|
499
|
-
|
|
500
|
-
return false;
|
|
501
|
-
}, CriticalPriority);
|
|
502
|
-
}
|
|
503
|
-
|
|
504
|
-
class TableNode extends lexical.ElementNode {
|
|
505
|
-
static getType() {
|
|
506
|
-
return 'table';
|
|
507
|
-
}
|
|
508
|
-
|
|
509
|
-
static clone(node, selectionShape, grid) {
|
|
510
|
-
return new TableNode(node.__key, node.__selectionShape, node.__grid);
|
|
511
|
-
}
|
|
512
|
-
|
|
513
|
-
constructor(key, selectionShape, grid) {
|
|
514
|
-
super(key);
|
|
515
|
-
this.__selectionShape = selectionShape;
|
|
516
|
-
this.__grid = grid;
|
|
517
|
-
}
|
|
518
|
-
|
|
519
|
-
createDOM(config, editor) {
|
|
520
|
-
const element = document.createElement('table');
|
|
521
|
-
addClassNamesToElement(element, config.theme.table);
|
|
522
|
-
applyCustomTableHandlers(this, element, editor);
|
|
523
|
-
return element;
|
|
524
|
-
}
|
|
525
|
-
|
|
526
|
-
updateDOM() {
|
|
527
|
-
return false;
|
|
528
|
-
}
|
|
529
|
-
|
|
530
|
-
canExtractContents() {
|
|
531
|
-
return false;
|
|
532
|
-
}
|
|
533
|
-
|
|
534
|
-
canBeEmpty() {
|
|
535
|
-
return false;
|
|
536
|
-
}
|
|
537
|
-
|
|
538
|
-
setSelectionState(selectionShape) {
|
|
539
|
-
const self = this.getWritable();
|
|
540
|
-
self.__selectionShape = selectionShape;
|
|
541
|
-
if (this.__grid == null) return [];
|
|
542
|
-
|
|
543
|
-
if (!selectionShape) {
|
|
544
|
-
return updateCells(-1, -1, -1, -1, this.__grid.cells);
|
|
545
|
-
}
|
|
546
|
-
|
|
547
|
-
return updateCells(selectionShape.fromX, selectionShape.toX, selectionShape.fromY, selectionShape.toY, this.__grid.cells);
|
|
548
|
-
}
|
|
549
|
-
|
|
550
|
-
getSelectionState() {
|
|
551
|
-
return this.__selectionShape;
|
|
552
|
-
}
|
|
553
|
-
|
|
554
|
-
getCordsFromCellNode(tableCellNode) {
|
|
555
|
-
if (!this.__grid) {
|
|
556
|
-
throw Error(`Grid not found.`);
|
|
557
|
-
}
|
|
558
|
-
|
|
559
|
-
const {
|
|
560
|
-
rows,
|
|
561
|
-
cells
|
|
562
|
-
} = this.__grid;
|
|
563
|
-
|
|
564
|
-
for (let x = 0; x < rows; x++) {
|
|
565
|
-
const row = cells[x];
|
|
566
|
-
|
|
567
|
-
if (row == null) {
|
|
568
|
-
throw new Error(`Row not found at x:${x}`);
|
|
569
|
-
}
|
|
570
|
-
|
|
571
|
-
const y = row.findIndex(({
|
|
572
|
-
elem
|
|
573
|
-
}) => {
|
|
574
|
-
const cellNode = lexical.$getNearestNodeFromDOMNode(elem);
|
|
575
|
-
return cellNode === tableCellNode;
|
|
576
|
-
});
|
|
577
|
-
|
|
578
|
-
if (y !== -1) {
|
|
579
|
-
return {
|
|
580
|
-
x,
|
|
581
|
-
y
|
|
582
|
-
};
|
|
583
|
-
}
|
|
584
|
-
}
|
|
585
|
-
|
|
586
|
-
throw new Error('Cell not found in table.');
|
|
587
|
-
}
|
|
588
|
-
|
|
589
|
-
getCellNodeFromCords(x, y) {
|
|
590
|
-
if (!this.__grid) {
|
|
591
|
-
throw Error(`Grid not found.`);
|
|
592
|
-
}
|
|
593
|
-
|
|
594
|
-
const {
|
|
595
|
-
cells
|
|
596
|
-
} = this.__grid;
|
|
597
|
-
const row = cells[x];
|
|
598
|
-
|
|
599
|
-
if (row == null) {
|
|
600
|
-
throw new Error(`Table row x:"${x}" not found.`);
|
|
601
|
-
}
|
|
602
|
-
|
|
603
|
-
const cell = row[y];
|
|
604
|
-
|
|
605
|
-
if (cell == null) {
|
|
606
|
-
throw new Error(`Table cell y:"${y}" in row x:"${x}" not found.`);
|
|
607
|
-
}
|
|
608
|
-
|
|
609
|
-
const node = lexical.$getNearestNodeFromDOMNode(cell.elem);
|
|
610
|
-
|
|
611
|
-
if (TableCellNode.$isTableCellNode(node)) {
|
|
612
|
-
return node;
|
|
613
|
-
}
|
|
614
|
-
|
|
615
|
-
throw new Error('Node at cords not TableCellNode.');
|
|
616
|
-
}
|
|
617
|
-
|
|
618
|
-
setGrid(grid) {
|
|
619
|
-
const self = this.getWritable();
|
|
620
|
-
self.__grid = grid;
|
|
621
|
-
}
|
|
622
|
-
|
|
623
|
-
getGrid() {
|
|
624
|
-
return this.__grid;
|
|
625
|
-
}
|
|
626
|
-
|
|
627
|
-
}
|
|
628
|
-
function $createTableNode() {
|
|
629
|
-
return new TableNode();
|
|
630
|
-
}
|
|
631
|
-
function $isTableNode(node) {
|
|
632
|
-
return node instanceof TableNode;
|
|
633
|
-
}
|
|
634
|
-
|
|
635
|
-
exports.$createTableNode = $createTableNode;
|
|
636
|
-
exports.$isTableNode = $isTableNode;
|
|
637
|
-
exports.TableNode = TableNode;
|
|
638
|
-
exports.trackTableGrid = trackTableGrid;
|
package/LexicalTableNode.prod.js
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the MIT license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*/
|
|
7
|
-
'use strict';var n=require("lexical"),y=require("lexical/TableCellNode");function A(a,...g){g.forEach(d=>{null!=d&&"string"===typeof d&&a.classList.add(...d.split(" "))})}function B(a,g){for(;a!==n.$getRoot()&&null!=a;){if(g(a))return a;a=a.getParent()}return null}const C=document.createElement("style");C.appendChild(document.createTextNode("::selection{background-color: transparent}"));
|
|
8
|
-
function D(a){for(;null!=a;){const g=a.nodeName;if("TD"===g||"TH"===g){a=a._cell;if(void 0===a)break;return a}a=a.parentNode}return null}
|
|
9
|
-
function E(a,g,d){const k=[],l={cells:k,columns:0,rows:0};(new MutationObserver(t=>{d.update(()=>{var h=g.firstChild;let u=0,p=0;var e=!1;for(let q=0;q<t.length;q++){const w=t[q].target.nodeName;if("TABLE"===w||"TR"===w){e=!0;break}}if(e){for(k.length=0;null!=h;){e=h.nodeName;if("TD"===e||"TH"===e)e={elem:h,highlighted:!1,x:u,y:p},h._cell=e,void 0===k[p]&&(k[p]=[]),k[p][u]=e;else if(e=h.firstChild,null!=e){h=e;continue}e=h.nextSibling;if(null!=e)u++,h=e;else if(e=h.parentNode,null!=e){h=e.nextSibling;
|
|
10
|
-
if(null==h)break;p++;u=0}}l.columns=u+1;l.rows=p+1;a.setGrid(l)}})})).observe(g,{childList:!0,subtree:!0});a.setGrid(l);return l}
|
|
11
|
-
function F(a,g,d,k,l){const t=[];for(let h=0;h<l.length;h++){const u=l[h];for(let p=0;p<u.length;p++){const e=u[p],q=e.elem.style;p>=a&&p<=g&&h>=d&&h<=k?(e.highlighted||(e.highlighted=!0,q.setProperty("background-color","rgb(163, 187, 255)"),q.setProperty("caret-color","transparent")),t.push(e)):e.highlighted&&(e.highlighted=!1,q.removeProperty("background-color"),q.removeProperty("caret-color"))}}return t}
|
|
12
|
-
function H(a,g,d){if(null!==d.getRootElement()){E(a,g,d);var k=a.getGrid(),l=!1,t=!1,h=-1,u=-1,p=-1,e=-1,q=[];if(null==k)throw Error("Table grid not found.");g.addEventListener("mousemove",c=>{if(l){var b=D(c.target);if(null!==b){const f=b.x;b=b.y;if(!t&&(h!==f||u!==b))c.preventDefault(),c=window.getSelection(),c.setBaseAndExtent(c.anchorNode,0,c.anchorNode,0),t=!0,document.body&&document.body.appendChild(C),null===x&&(x=d.addListener("command",(m,v)=>{if("deleteCharacter"===m){if(q.length===k.columns*
|
|
13
|
-
k.rows)return a.selectPrevious(),a.remove(),w(),!0;q.forEach(({elem:r})=>{r=n.$getNearestNodeFromDOMNode(r);if(n.$isElementNode(r)){r.clear();const z=n.$createParagraphNode(),J=n.$createTextNode();z.append(J);r.append(z)}});a.setSelectionState(null);n.$setSelection(null);return!0}if("formatText"===m)return K(v),!0;"insertText"===m&&w();return!1},1));else if(f===p&&b===e)return;p=f;e=b;if(t){const m=Math.min(h,p),v=Math.max(h,p),r=Math.min(u,e),z=Math.max(u,e);d.update(()=>{q=a.setSelectionState({fromX:m,
|
|
14
|
-
fromY:r,toX:v,toY:z})})}}}});var w=()=>{d.update(()=>{l=t=!1;e=p=u=h=-1;d.update(()=>{a.setSelectionState(null)});q=[];null!==x&&(x(),x=null);const c=C.parentNode;null!=c&&c.removeChild(C)})};g.addEventListener("mouseleave",()=>{});var K=c=>{let b=n.$getSelection();null===b&&(b=n.$createRangeSelection());const f=b,m=f.anchor,v=f.focus;q.forEach(r=>{r=n.$getNearestNodeFromDOMNode(r.elem);n.$isElementNode(r)&&(m.set(r.getKey(),0,"element"),v.set(r.getKey(),r.getChildrenSize(),"element"),f.formatText(c))});
|
|
15
|
-
b.anchor.set(b.anchor.key,b.anchor.offset,b.anchor.type);b.focus.set(b.anchor.key,b.anchor.offset,b.anchor.type);n.$setSelection(b)},x=null;g.addEventListener("mousedown",c=>{l?t&&w():setTimeout(()=>{t&&w();const b=D(c.target);null!==b&&(l=!0,h=b.x,u=b.y,document.addEventListener("mouseup",()=>{l=!1},{capture:!0,once:!0}))},0)});window.addEventListener("click",c=>{0<q.length&&!g.contains(c.target)&&d.update(()=>{a.setSelectionState(null)})});var G=(c,b,f)=>{let m;switch(f){case "backward":case "forward":f=
|
|
16
|
-
"forward"===f;m=b!==(f?k.columns-1:0)?a.getCellNodeFromCords(c,b+(f?1:-1)):c!==(f?k.rows-1:0)?a.getCellNodeFromCords(c+(f?1:-1),f?0:k.columns-1):f?a.getNextSibling():a.getPreviousSibling();break;case "up":m=0!==c?a.getCellNodeFromCords(c-1,b):a.getPreviousSibling();break;case "down":m=c!==k.rows-1?a.getCellNodeFromCords(c+1,b):a.getNextSibling()}return n.$isElementNode(m)||n.$isTextNode(m)?(m.select(),!0):!1};d.addListener("command",(c,b)=>{var f=n.$getSelection();if(null==f)return!1;const m=B(f.anchor.getNode(),
|
|
17
|
-
v=>y.$isTableCellNode(v));if(!y.$isTableCellNode(m))return!1;if("deleteCharacter"===c&&0===q.length&&f.isCollapsed()&&0===f.anchor.offset)return!0;if(("indentContent"===c||"outdentContent"===c)&&f.isCollapsed()&&0===q.length)return b=a.getCordsFromCellNode(m),G(b.x,b.y,"indentContent"===c?"forward":"backward"),!0;if(("keyArrowDown"===c||"keyArrowUp"===c)&&f.isCollapsed()&&0===q.length){const v=a.getCordsFromCellNode(m);f=B(f.anchor.getNode(),r=>n.$isElementNode(r));if("keyArrowUp"===c&&f===m.getFirstChild()||
|
|
18
|
-
"keyArrowDown"===c&&f===m.getLastChild())return b.preventDefault(),b.stopImmediatePropagation(),G(v.x,v.y,"keyArrowUp"===c?"up":"down"),!0}return!1},4)}}
|
|
19
|
-
class I extends n.ElementNode{static getType(){return"table"}static clone(a){return new I(a.__key,a.__selectionShape,a.__grid)}constructor(a,g,d){super(a);this.__selectionShape=g;this.__grid=d}createDOM(a,g){const d=document.createElement("table");A(d,a.theme.table);H(this,d,g);return d}updateDOM(){return!1}canExtractContents(){return!1}canBeEmpty(){return!1}setSelectionState(a){this.getWritable().__selectionShape=a;return null==this.__grid?[]:a?F(a.fromX,a.toX,a.fromY,a.toY,this.__grid.cells):F(-1,
|
|
20
|
-
-1,-1,-1,this.__grid.cells)}getSelectionState(){return this.__selectionShape}getCordsFromCellNode(a){if(!this.__grid)throw Error("Grid not found.");const {rows:g,cells:d}=this.__grid;for(let l=0;l<g;l++){var k=d[l];if(null==k)throw Error(`Row not found at x:${l}`);k=k.findIndex(({elem:t})=>n.$getNearestNodeFromDOMNode(t)===a);if(-1!==k)return{x:l,y:k}}throw Error("Cell not found in table.");}getCellNodeFromCords(a,g){if(!this.__grid)throw Error("Grid not found.");var {cells:d}=this.__grid;d=d[a];
|
|
21
|
-
if(null==d)throw Error(`Table row x:"${a}" not found.`);d=d[g];if(null==d)throw Error(`Table cell y:"${g}" in row x:"${a}" not found.`);a=n.$getNearestNodeFromDOMNode(d.elem);if(y.$isTableCellNode(a))return a;throw Error("Node at cords not TableCellNode.");}setGrid(a){this.getWritable().__grid=a}getGrid(){return this.__grid}}exports.$createTableNode=function(){return new I};exports.$isTableNode=function(a){return a instanceof I};exports.TableNode=I;exports.trackTableGrid=E;
|