@lexical/table 0.7.7 → 0.7.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.
@@ -22,20 +22,18 @@ const TableCellHeaderStates = {
22
22
  NO_STATUS: 0,
23
23
  ROW: 1
24
24
  };
25
-
26
25
  /** @noInheritDoc */
27
26
  class TableCellNode extends lexical.DEPRECATED_GridCellNode {
28
27
  /** @internal */
29
28
 
30
29
  /** @internal */
30
+
31
31
  static getType() {
32
32
  return 'tablecell';
33
33
  }
34
-
35
34
  static clone(node) {
36
35
  return new TableCellNode(node.__headerState, node.__colSpan, node.__width, node.__key);
37
36
  }
38
-
39
37
  static importDOM() {
40
38
  return {
41
39
  td: node => ({
@@ -48,33 +46,26 @@ class TableCellNode extends lexical.DEPRECATED_GridCellNode {
48
46
  })
49
47
  };
50
48
  }
51
-
52
49
  static importJSON(serializedNode) {
53
50
  return $createTableCellNode(serializedNode.headerState, serializedNode.colSpan, serializedNode.width || undefined);
54
51
  }
55
-
56
52
  constructor(headerState = TableCellHeaderStates.NO_STATUS, colSpan = 1, width, key) {
57
53
  super(colSpan, key);
58
54
  this.__headerState = headerState;
59
55
  this.__width = width;
60
56
  }
61
-
62
57
  createDOM(config) {
63
58
  const element = document.createElement(this.getTag());
64
-
65
59
  if (this.__width) {
66
60
  element.style.width = `${this.__width}px`;
67
61
  }
68
-
69
62
  utils.addClassNamesToElement(element, config.theme.tableCell, this.hasHeader() && config.theme.tableCellHeader);
70
63
  return element;
71
64
  }
72
-
73
65
  exportDOM(editor) {
74
66
  const {
75
67
  element
76
68
  } = super.exportDOM(editor);
77
-
78
69
  if (element) {
79
70
  const maxWidth = 700;
80
71
  const colCount = this.getParentOrThrow().getChildrenSize();
@@ -82,90 +73,72 @@ class TableCellNode extends lexical.DEPRECATED_GridCellNode {
82
73
  element.style.width = `${this.getWidth() || Math.max(90, maxWidth / colCount)}px`;
83
74
  element.style.verticalAlign = 'top';
84
75
  element.style.textAlign = 'start';
85
-
86
76
  if (this.hasHeader()) {
87
77
  element.style.backgroundColor = '#f2f3f5';
88
78
  }
89
79
  }
90
-
91
80
  return {
92
81
  element
93
82
  };
94
83
  }
95
-
96
84
  exportJSON() {
97
- return { ...super.exportJSON(),
85
+ return {
86
+ ...super.exportJSON(),
98
87
  colSpan: super.__colSpan,
99
88
  headerState: this.__headerState,
100
89
  type: 'tablecell',
101
90
  width: this.getWidth()
102
91
  };
103
92
  }
104
-
105
93
  getTag() {
106
94
  return this.hasHeader() ? 'th' : 'td';
107
95
  }
108
-
109
96
  setHeaderStyles(headerState) {
110
97
  const self = this.getWritable();
111
98
  self.__headerState = headerState;
112
99
  return this.__headerState;
113
100
  }
114
-
115
101
  getHeaderStyles() {
116
102
  return this.getLatest().__headerState;
117
103
  }
118
-
119
104
  setWidth(width) {
120
105
  const self = this.getWritable();
121
106
  self.__width = width;
122
107
  return this.__width;
123
108
  }
124
-
125
109
  getWidth() {
126
110
  return this.getLatest().__width;
127
111
  }
128
-
129
112
  toggleHeaderStyle(headerStateToToggle) {
130
113
  const self = this.getWritable();
131
-
132
114
  if ((self.__headerState & headerStateToToggle) === headerStateToToggle) {
133
115
  self.__headerState -= headerStateToToggle;
134
116
  } else {
135
117
  self.__headerState += headerStateToToggle;
136
118
  }
137
-
138
119
  return self;
139
120
  }
140
-
141
121
  hasHeaderState(headerState) {
142
122
  return (this.getHeaderStyles() & headerState) === headerState;
143
123
  }
144
-
145
124
  hasHeader() {
146
125
  return this.getLatest().__headerState !== TableCellHeaderStates.NO_STATUS;
147
126
  }
148
-
149
127
  updateDOM(prevNode) {
150
128
  return prevNode.__headerState !== this.__headerState || prevNode.__width !== this.__width;
151
129
  }
152
-
153
130
  isShadowRoot() {
154
131
  return true;
155
132
  }
156
-
157
133
  collapseAtStart() {
158
134
  return true;
159
135
  }
160
-
161
136
  canBeEmpty() {
162
137
  return false;
163
138
  }
164
-
165
139
  canIndent() {
166
140
  return false;
167
141
  }
168
-
169
142
  }
170
143
  function convertTableCellNodeElement(domNode) {
171
144
  const nodeName = domNode.nodeName.toLowerCase();
@@ -174,15 +147,12 @@ function convertTableCellNodeElement(domNode) {
174
147
  forChild: (lexicalNode, parentLexicalNode) => {
175
148
  if ($isTableCellNode(parentLexicalNode) && !lexical.$isElementNode(lexicalNode)) {
176
149
  const paragraphNode = lexical.$createParagraphNode();
177
-
178
150
  if (lexical.$isLineBreakNode(lexicalNode) && lexicalNode.getTextContent() === '\n') {
179
151
  return null;
180
152
  }
181
-
182
153
  paragraphNode.append(lexicalNode);
183
154
  return paragraphNode;
184
155
  }
185
-
186
156
  return lexicalNode;
187
157
  },
188
158
  node: tableCellNode
@@ -202,18 +172,16 @@ function $isTableCellNode(node) {
202
172
  * LICENSE file in the root directory of this source tree.
203
173
  *
204
174
  */
205
-
206
175
  /** @noInheritDoc */
207
176
  class TableRowNode extends lexical.DEPRECATED_GridRowNode {
208
177
  /** @internal */
178
+
209
179
  static getType() {
210
180
  return 'tablerow';
211
181
  }
212
-
213
182
  static clone(node) {
214
183
  return new TableRowNode(node.__height, node.__key);
215
184
  }
216
-
217
185
  static importDOM() {
218
186
  return {
219
187
  tr: node => ({
@@ -222,60 +190,48 @@ class TableRowNode extends lexical.DEPRECATED_GridRowNode {
222
190
  })
223
191
  };
224
192
  }
225
-
226
193
  static importJSON(serializedNode) {
227
194
  return $createTableRowNode(serializedNode.height);
228
195
  }
229
-
230
196
  constructor(height, key) {
231
197
  super(key);
232
198
  this.__height = height;
233
199
  }
234
-
235
200
  exportJSON() {
236
- return { ...super.exportJSON(),
201
+ return {
202
+ ...super.exportJSON(),
237
203
  type: 'tablerow',
238
204
  version: 1
239
205
  };
240
206
  }
241
-
242
207
  createDOM(config) {
243
208
  const element = document.createElement('tr');
244
-
245
209
  if (this.__height) {
246
210
  element.style.height = `${this.__height}px`;
247
211
  }
248
-
249
212
  utils.addClassNamesToElement(element, config.theme.tableRow);
250
213
  return element;
251
214
  }
252
-
253
215
  isShadowRoot() {
254
216
  return true;
255
217
  }
256
-
257
218
  setHeight(height) {
258
219
  const self = this.getWritable();
259
220
  self.__height = height;
260
221
  return this.__height;
261
222
  }
262
-
263
223
  getHeight() {
264
224
  return this.getLatest().__height;
265
225
  }
266
-
267
226
  updateDOM(prevNode) {
268
227
  return prevNode.__height !== this.__height;
269
228
  }
270
-
271
229
  canBeEmpty() {
272
230
  return false;
273
231
  }
274
-
275
232
  canIndent() {
276
233
  return false;
277
234
  }
278
-
279
235
  }
280
236
  function convertTableRowElement(domNode) {
281
237
  return {
@@ -296,6 +252,7 @@ function $isTableRowNode(node) {
296
252
  * LICENSE file in the root directory of this source tree.
297
253
  *
298
254
  */
255
+
299
256
  const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
300
257
 
301
258
  /**
@@ -305,9 +262,7 @@ const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !==
305
262
  * LICENSE file in the root directory of this source tree.
306
263
  *
307
264
  */
308
-
309
265
  const getDOMSelection = targetWindow => CAN_USE_DOM ? (targetWindow || window).getSelection() : null;
310
-
311
266
  class TableSelection {
312
267
  constructor(editor, tableNodeKey) {
313
268
  this.isHighlightingCells = false;
@@ -331,51 +286,40 @@ class TableSelection {
331
286
  this.hasHijackedSelectionStyles = false;
332
287
  this.trackTableGrid();
333
288
  }
334
-
335
289
  getGrid() {
336
290
  return this.grid;
337
291
  }
338
-
339
292
  removeListeners() {
340
293
  Array.from(this.listenersToRemove).forEach(removeListener => removeListener());
341
294
  }
342
-
343
295
  trackTableGrid() {
344
296
  const observer = new MutationObserver(records => {
345
297
  this.editor.update(() => {
346
298
  let gridNeedsRedraw = false;
347
-
348
299
  for (let i = 0; i < records.length; i++) {
349
300
  const record = records[i];
350
301
  const target = record.target;
351
302
  const nodeName = target.nodeName;
352
-
353
303
  if (nodeName === 'TABLE' || nodeName === 'TR') {
354
304
  gridNeedsRedraw = true;
355
305
  break;
356
306
  }
357
307
  }
358
-
359
308
  if (!gridNeedsRedraw) {
360
309
  return;
361
310
  }
362
-
363
311
  const tableElement = this.editor.getElementByKey(this.tableNodeKey);
364
-
365
312
  if (!tableElement) {
366
313
  throw new Error('Expected to find TableElement in DOM');
367
314
  }
368
-
369
315
  this.grid = getTableGrid(tableElement);
370
316
  });
371
317
  });
372
318
  this.editor.update(() => {
373
319
  const tableElement = this.editor.getElementByKey(this.tableNodeKey);
374
-
375
320
  if (!tableElement) {
376
321
  throw new Error('Expected to find TableElement in DOM');
377
322
  }
378
-
379
323
  this.grid = getTableGrid(tableElement);
380
324
  observer.observe(tableElement, {
381
325
  childList: true,
@@ -383,7 +327,6 @@ class TableSelection {
383
327
  });
384
328
  });
385
329
  }
386
-
387
330
  clearHighlight() {
388
331
  this.isHighlightingCells = false;
389
332
  this.anchorX = -1;
@@ -399,50 +342,39 @@ class TableSelection {
399
342
  this.enableHighlightStyle();
400
343
  this.editor.update(() => {
401
344
  const tableNode = lexical.$getNodeByKey(this.tableNodeKey);
402
-
403
345
  if (!$isTableNode(tableNode)) {
404
346
  throw new Error('Expected TableNode.');
405
347
  }
406
-
407
348
  const tableElement = this.editor.getElementByKey(this.tableNodeKey);
408
-
409
349
  if (!tableElement) {
410
350
  throw new Error('Expected to find TableElement in DOM');
411
351
  }
412
-
413
352
  const grid = getTableGrid(tableElement);
414
353
  $updateDOMForSelection(grid, null);
415
354
  lexical.$setSelection(null);
416
355
  this.editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
417
356
  });
418
357
  }
419
-
420
358
  enableHighlightStyle() {
421
359
  this.editor.update(() => {
422
360
  const tableElement = this.editor.getElementByKey(this.tableNodeKey);
423
-
424
361
  if (!tableElement) {
425
362
  throw new Error('Expected to find TableElement in DOM');
426
363
  }
427
-
428
364
  tableElement.classList.remove('disable-selection');
429
365
  this.hasHijackedSelectionStyles = false;
430
366
  });
431
367
  }
432
-
433
368
  disableHighlightStyle() {
434
369
  this.editor.update(() => {
435
370
  const tableElement = this.editor.getElementByKey(this.tableNodeKey);
436
-
437
371
  if (!tableElement) {
438
372
  throw new Error('Expected to find TableElement in DOM');
439
373
  }
440
-
441
374
  tableElement.classList.add('disable-selection');
442
375
  this.hasHijackedSelectionStyles = true;
443
376
  });
444
377
  }
445
-
446
378
  updateTableGridSelection(selection) {
447
379
  if (selection != null && selection.gridKey === this.tableNodeKey) {
448
380
  this.gridSelection = selection;
@@ -453,46 +385,36 @@ class TableSelection {
453
385
  this.clearHighlight();
454
386
  }
455
387
  }
456
-
457
388
  setFocusCellForSelection(cell, ignoreStart = false) {
458
389
  this.editor.update(() => {
459
390
  const tableNode = lexical.$getNodeByKey(this.tableNodeKey);
460
-
461
391
  if (!$isTableNode(tableNode)) {
462
392
  throw new Error('Expected TableNode.');
463
393
  }
464
-
465
394
  const tableElement = this.editor.getElementByKey(this.tableNodeKey);
466
-
467
395
  if (!tableElement) {
468
396
  throw new Error('Expected to find TableElement in DOM');
469
397
  }
470
-
471
398
  const cellX = cell.x;
472
399
  const cellY = cell.y;
473
400
  this.focusCell = cell;
474
-
475
401
  if (this.anchorCell !== null) {
476
- const domSelection = getDOMSelection(this.editor._window); // Collapse the selection
477
-
402
+ const domSelection = getDOMSelection(this.editor._window);
403
+ // Collapse the selection
478
404
  if (domSelection) {
479
405
  domSelection.setBaseAndExtent(this.anchorCell.elem, 0, this.focusCell.elem, 0);
480
406
  }
481
407
  }
482
-
483
408
  if (!this.isHighlightingCells && (this.anchorX !== cellX || this.anchorY !== cellY || ignoreStart)) {
484
409
  this.isHighlightingCells = true;
485
410
  this.disableHighlightStyle();
486
411
  } else if (cellX === this.focusX && cellY === this.focusY) {
487
412
  return;
488
413
  }
489
-
490
414
  this.focusX = cellX;
491
415
  this.focusY = cellY;
492
-
493
416
  if (this.isHighlightingCells) {
494
417
  const focusTableCellNode = lexical.$getNearestNodeFromDOMNode(cell.elem);
495
-
496
418
  if (this.gridSelection != null && this.anchorCellNodeKey != null && $isTableCellNode(focusTableCellNode)) {
497
419
  const focusNodeKey = focusTableCellNode.getKey();
498
420
  this.gridSelection = this.gridSelection.clone() || lexical.DEPRECATED_$createGridSelection();
@@ -505,7 +427,6 @@ class TableSelection {
505
427
  }
506
428
  });
507
429
  }
508
-
509
430
  setAnchorCellForSelection(cell) {
510
431
  this.isHighlightingCells = false;
511
432
  this.anchorCell = cell;
@@ -513,7 +434,6 @@ class TableSelection {
513
434
  this.anchorY = cell.y;
514
435
  this.editor.update(() => {
515
436
  const anchorTableCellNode = lexical.$getNearestNodeFromDOMNode(cell.elem);
516
-
517
437
  if ($isTableCellNode(anchorTableCellNode)) {
518
438
  const anchorNodeKey = anchorTableCellNode.getKey();
519
439
  this.gridSelection = lexical.DEPRECATED_$createGridSelection();
@@ -521,17 +441,14 @@ class TableSelection {
521
441
  }
522
442
  });
523
443
  }
524
-
525
444
  formatCells(type) {
526
445
  this.editor.update(() => {
527
446
  const selection = lexical.$getSelection();
528
-
529
447
  if (!lexical.DEPRECATED_$isGridSelection(selection)) {
530
448
  {
531
449
  throw Error(`Expected grid selection`);
532
450
  }
533
451
  }
534
-
535
452
  const formatSelection = lexical.$createRangeSelection();
536
453
  const anchor = formatSelection.anchor;
537
454
  const focus = formatSelection.focus;
@@ -546,34 +463,27 @@ class TableSelection {
546
463
  this.editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
547
464
  });
548
465
  }
549
-
550
466
  clearText() {
551
467
  this.editor.update(() => {
552
468
  const tableNode = lexical.$getNodeByKey(this.tableNodeKey);
553
-
554
469
  if (!$isTableNode(tableNode)) {
555
470
  throw new Error('Expected TableNode.');
556
471
  }
557
-
558
472
  const selection = lexical.$getSelection();
559
-
560
473
  if (!lexical.DEPRECATED_$isGridSelection(selection)) {
561
474
  {
562
475
  throw Error(`Expected grid selection`);
563
476
  }
564
477
  }
565
-
566
478
  const selectedNodes = selection.getNodes().filter($isTableCellNode);
567
-
568
479
  if (selectedNodes.length === this.grid.columns * this.grid.rows) {
569
- tableNode.selectPrevious(); // Delete entire table
570
-
480
+ tableNode.selectPrevious();
481
+ // Delete entire table
571
482
  tableNode.remove();
572
483
  const rootNode = lexical.$getRoot();
573
484
  rootNode.selectStart();
574
485
  return;
575
486
  }
576
-
577
487
  selectedNodes.forEach(cellNode => {
578
488
  if (lexical.$isElementNode(cellNode)) {
579
489
  const paragraphNode = lexical.$createParagraphNode();
@@ -592,7 +502,6 @@ class TableSelection {
592
502
  this.editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
593
503
  });
594
504
  }
595
-
596
505
  }
597
506
 
598
507
  /**
@@ -605,18 +514,15 @@ class TableSelection {
605
514
  const LEXICAL_ELEMENT_KEY = '__lexicalTableSelection';
606
515
  function applyTableHandlers(tableNode, tableElement, editor) {
607
516
  const rootElement = editor.getRootElement();
608
-
609
517
  if (rootElement === null) {
610
518
  throw new Error('No root element.');
611
519
  }
612
-
613
520
  const tableSelection = new TableSelection(editor, tableNode.getKey());
614
521
  attachTableSelectionToTableElement(tableElement, tableSelection);
615
522
  let isMouseDown = false;
616
523
  let isRangeSelectionHijacked = false;
617
524
  tableElement.addEventListener('dblclick', event => {
618
525
  const cell = getCellFromTarget(event.target);
619
-
620
526
  if (cell !== null) {
621
527
  event.preventDefault();
622
528
  event.stopImmediatePropagation();
@@ -625,16 +531,15 @@ function applyTableHandlers(tableNode, tableElement, editor) {
625
531
  tableSelection.setFocusCellForSelection(cell, true);
626
532
  isMouseDown = false;
627
533
  }
628
- }); // This is the anchor of the selection.
534
+ });
629
535
 
536
+ // This is the anchor of the selection.
630
537
  tableElement.addEventListener('mousedown', event => {
631
538
  setTimeout(() => {
632
539
  if (event.button !== 0) {
633
540
  return;
634
541
  }
635
-
636
542
  const cell = getCellFromTarget(event.target);
637
-
638
543
  if (cell !== null) {
639
544
  event.preventDefault();
640
545
  event.stopPropagation();
@@ -642,327 +547,268 @@ function applyTableHandlers(tableNode, tableElement, editor) {
642
547
  tableSelection.setAnchorCellForSelection(cell);
643
548
  }
644
549
  }, 0);
645
- }); // This is adjusting the focus of the selection.
550
+ });
646
551
 
552
+ // This is adjusting the focus of the selection.
647
553
  tableElement.addEventListener('mousemove', event => {
648
554
  if (isRangeSelectionHijacked) {
649
555
  event.preventDefault();
650
556
  event.stopPropagation();
651
557
  event.stopImmediatePropagation();
652
558
  }
653
-
654
559
  if (isMouseDown) {
655
560
  const cell = getCellFromTarget(event.target);
656
-
657
561
  if (cell !== null) {
658
562
  const cellX = cell.x;
659
563
  const cellY = cell.y;
660
-
661
564
  if (isMouseDown && (tableSelection.anchorX !== cellX || tableSelection.anchorY !== cellY || tableSelection.isHighlightingCells)) {
662
565
  event.preventDefault();
663
566
  tableSelection.setFocusCellForSelection(cell);
664
567
  }
665
568
  }
666
569
  }
667
- }); // Select entire table at this point, when grid selection is ready.
570
+ });
668
571
 
572
+ // Select entire table at this point, when grid selection is ready.
669
573
  tableElement.addEventListener('mouseleave', () => {
670
574
  if (isMouseDown) {
671
575
  return;
672
576
  }
673
- }); // Clear selection when clicking outside of dom.
577
+ });
674
578
 
579
+ // Clear selection when clicking outside of dom.
675
580
  const mouseDownCallback = event => {
676
581
  isMouseDown = true;
677
-
678
582
  if (event.button !== 0) {
679
583
  return;
680
584
  }
681
-
682
585
  editor.update(() => {
683
586
  const selection = lexical.$getSelection();
684
-
685
587
  if (lexical.DEPRECATED_$isGridSelection(selection) && selection.gridKey === tableSelection.tableNodeKey && rootElement.contains(event.target)) {
686
588
  return tableSelection.clearHighlight();
687
589
  }
688
590
  });
689
591
  };
690
-
691
592
  window.addEventListener('mousedown', mouseDownCallback);
692
593
  tableSelection.listenersToRemove.add(() => window.removeEventListener('mousedown', mouseDownCallback));
693
-
694
594
  const mouseUpCallback = event => {
695
595
  if (isMouseDown) {
696
596
  event.preventDefault();
697
597
  event.stopPropagation();
698
598
  }
699
-
700
599
  isMouseDown = false;
701
600
  };
702
-
703
601
  window.addEventListener('mouseup', mouseUpCallback);
704
602
  tableSelection.listenersToRemove.add(() => window.removeEventListener('mouseup', mouseUpCallback));
705
603
  tableSelection.listenersToRemove.add(() => tableElement.addEventListener('mouseup', mouseUpCallback));
706
604
  tableSelection.listenersToRemove.add(() => tableElement.removeEventListener('mouseup', mouseUpCallback));
707
605
  tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_ARROW_DOWN_COMMAND, event => {
708
606
  const selection = lexical.$getSelection();
709
-
710
607
  if (!$isSelectionInTable(selection, tableNode)) {
711
608
  return false;
712
609
  }
713
-
714
610
  const direction = 'down';
715
-
716
611
  if (lexical.$isRangeSelection(selection)) {
717
612
  if (selection.isCollapsed()) {
718
613
  const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
719
-
720
614
  if (!$isTableCellNode(tableCellNode)) {
721
615
  return false;
722
616
  }
723
-
724
617
  const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
725
618
  const elementParentNode = utils.$findMatchingParent(selection.anchor.getNode(), n => lexical.$isElementNode(n));
726
-
727
619
  if (elementParentNode == null) {
728
620
  throw new Error('Expected BlockNode Parent');
729
621
  }
730
-
731
622
  const lastChild = tableCellNode.getLastChild();
732
623
  const isSelectionInLastBlock = lastChild && elementParentNode.isParentOf(lastChild) || elementParentNode === lastChild;
733
-
734
624
  if (isSelectionInLastBlock || event.shiftKey) {
735
625
  event.preventDefault();
736
626
  event.stopImmediatePropagation();
737
- event.stopPropagation(); // Start Selection
627
+ event.stopPropagation();
738
628
 
629
+ // Start Selection
739
630
  if (event.shiftKey) {
740
631
  tableSelection.setAnchorCellForSelection(tableNode.getCellFromCordsOrThrow(currentCords.x, currentCords.y, tableSelection.grid));
741
632
  return adjustFocusNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
742
633
  }
743
-
744
634
  return selectGridNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
745
635
  }
746
636
  }
747
637
  } else if (lexical.DEPRECATED_$isGridSelection(selection) && event.shiftKey) {
748
638
  const tableCellNode = selection.focus.getNode();
749
-
750
639
  if (!$isTableCellNode(tableCellNode)) {
751
640
  return false;
752
641
  }
753
-
754
642
  const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
755
643
  event.preventDefault();
756
644
  event.stopImmediatePropagation();
757
645
  event.stopPropagation();
758
646
  return adjustFocusNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
759
647
  }
760
-
761
648
  return false;
762
649
  }, lexical.COMMAND_PRIORITY_HIGH));
763
650
  tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_ARROW_UP_COMMAND, event => {
764
651
  const selection = lexical.$getSelection();
765
-
766
652
  if (!$isSelectionInTable(selection, tableNode)) {
767
653
  return false;
768
654
  }
769
-
770
655
  const direction = 'up';
771
-
772
656
  if (lexical.$isRangeSelection(selection)) {
773
657
  if (selection.isCollapsed()) {
774
658
  const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
775
-
776
659
  if (!$isTableCellNode(tableCellNode)) {
777
660
  return false;
778
661
  }
779
-
780
662
  const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
781
663
  const elementParentNode = utils.$findMatchingParent(selection.anchor.getNode(), n => lexical.$isElementNode(n));
782
-
783
664
  if (elementParentNode == null) {
784
665
  throw new Error('Expected BlockNode Parent');
785
666
  }
786
-
787
667
  const lastChild = tableCellNode.getLastChild();
788
668
  const isSelectionInLastBlock = lastChild && elementParentNode.isParentOf(lastChild) || elementParentNode === lastChild;
789
-
790
669
  if (isSelectionInLastBlock || event.shiftKey) {
791
670
  event.preventDefault();
792
671
  event.stopImmediatePropagation();
793
- event.stopPropagation(); // Start Selection
672
+ event.stopPropagation();
794
673
 
674
+ // Start Selection
795
675
  if (event.shiftKey) {
796
676
  tableSelection.setAnchorCellForSelection(tableNode.getCellFromCordsOrThrow(currentCords.x, currentCords.y, tableSelection.grid));
797
677
  return adjustFocusNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
798
678
  }
799
-
800
679
  return selectGridNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
801
680
  }
802
681
  }
803
682
  } else if (lexical.DEPRECATED_$isGridSelection(selection) && event.shiftKey) {
804
683
  const tableCellNode = selection.focus.getNode();
805
-
806
684
  if (!$isTableCellNode(tableCellNode)) {
807
685
  return false;
808
686
  }
809
-
810
687
  const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
811
688
  event.preventDefault();
812
689
  event.stopImmediatePropagation();
813
690
  event.stopPropagation();
814
691
  return adjustFocusNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
815
692
  }
816
-
817
693
  return false;
818
694
  }, lexical.COMMAND_PRIORITY_HIGH));
819
695
  tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_ARROW_LEFT_COMMAND, event => {
820
696
  const selection = lexical.$getSelection();
821
-
822
697
  if (!$isSelectionInTable(selection, tableNode)) {
823
698
  return false;
824
699
  }
825
-
826
700
  const direction = 'backward';
827
-
828
701
  if (lexical.$isRangeSelection(selection)) {
829
702
  if (selection.isCollapsed()) {
830
703
  const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
831
-
832
704
  if (!$isTableCellNode(tableCellNode)) {
833
705
  return false;
834
706
  }
835
-
836
707
  const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
837
708
  const elementParentNode = utils.$findMatchingParent(selection.anchor.getNode(), n => lexical.$isElementNode(n));
838
-
839
709
  if (elementParentNode == null) {
840
710
  throw new Error('Expected BlockNode Parent');
841
711
  }
842
-
843
712
  if (selection.anchor.offset === 0 || event.shiftKey) {
844
713
  event.preventDefault();
845
714
  event.stopImmediatePropagation();
846
- event.stopPropagation(); // Start Selection
715
+ event.stopPropagation();
847
716
 
717
+ // Start Selection
848
718
  if (event.shiftKey) {
849
719
  tableSelection.setAnchorCellForSelection(tableNode.getCellFromCordsOrThrow(currentCords.x, currentCords.y, tableSelection.grid));
850
720
  return adjustFocusNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
851
721
  }
852
-
853
722
  return selectGridNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
854
723
  }
855
724
  }
856
725
  } else if (lexical.DEPRECATED_$isGridSelection(selection) && event.shiftKey) {
857
726
  const tableCellNode = selection.focus.getNode();
858
-
859
727
  if (!$isTableCellNode(tableCellNode)) {
860
728
  return false;
861
729
  }
862
-
863
730
  const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
864
731
  event.preventDefault();
865
732
  event.stopImmediatePropagation();
866
733
  event.stopPropagation();
867
734
  return adjustFocusNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
868
735
  }
869
-
870
736
  return false;
871
737
  }, lexical.COMMAND_PRIORITY_HIGH));
872
738
  tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_ARROW_RIGHT_COMMAND, event => {
873
739
  const selection = lexical.$getSelection();
874
-
875
740
  if (!$isSelectionInTable(selection, tableNode)) {
876
741
  return false;
877
742
  }
878
-
879
743
  const direction = 'forward';
880
-
881
744
  if (lexical.$isRangeSelection(selection)) {
882
745
  if (selection.isCollapsed()) {
883
746
  const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
884
-
885
747
  if (!$isTableCellNode(tableCellNode)) {
886
748
  return false;
887
749
  }
888
-
889
750
  const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
890
751
  const elementParentNode = utils.$findMatchingParent(selection.anchor.getNode(), n => lexical.$isElementNode(n));
891
-
892
752
  if (elementParentNode == null) {
893
753
  throw new Error('Expected BlockNode Parent');
894
754
  }
895
-
896
755
  if (selection.anchor.offset === selection.anchor.getNode().getTextContentSize() || event.shiftKey) {
897
756
  event.preventDefault();
898
757
  event.stopImmediatePropagation();
899
- event.stopPropagation(); // Start Selection
758
+ event.stopPropagation();
900
759
 
760
+ // Start Selection
901
761
  if (event.shiftKey) {
902
762
  tableSelection.setAnchorCellForSelection(tableNode.getCellFromCordsOrThrow(currentCords.x, currentCords.y, tableSelection.grid));
903
763
  return adjustFocusNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
904
764
  }
905
-
906
765
  return selectGridNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
907
766
  }
908
767
  }
909
768
  } else if (lexical.DEPRECATED_$isGridSelection(selection) && event.shiftKey) {
910
769
  const tableCellNode = selection.focus.getNode();
911
-
912
770
  if (!$isTableCellNode(tableCellNode)) {
913
771
  return false;
914
772
  }
915
-
916
773
  const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
917
774
  event.preventDefault();
918
775
  event.stopImmediatePropagation();
919
776
  event.stopPropagation();
920
777
  return adjustFocusNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
921
778
  }
922
-
923
779
  return false;
924
780
  }, lexical.COMMAND_PRIORITY_HIGH));
925
-
926
781
  const deleteTextHandler = command => () => {
927
782
  const selection = lexical.$getSelection();
928
-
929
783
  if (!$isSelectionInTable(selection, tableNode)) {
930
784
  return false;
931
785
  }
932
-
933
786
  if (lexical.DEPRECATED_$isGridSelection(selection)) {
934
787
  tableSelection.clearText();
935
788
  return true;
936
789
  } else if (lexical.$isRangeSelection(selection)) {
937
790
  const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
938
-
939
791
  if (!$isTableCellNode(tableCellNode)) {
940
792
  return false;
941
793
  }
942
-
943
794
  const anchorNode = selection.anchor.getNode();
944
795
  const focusNode = selection.focus.getNode();
945
796
  const isAnchorInside = tableNode.isParentOf(anchorNode);
946
797
  const isFocusInside = tableNode.isParentOf(focusNode);
947
798
  const selectionContainsPartialTable = isAnchorInside && !isFocusInside || isFocusInside && !isAnchorInside;
948
-
949
799
  if (selectionContainsPartialTable) {
950
800
  tableSelection.clearText();
951
801
  return true;
952
802
  }
953
-
954
803
  const nearestElementNode = utils.$findMatchingParent(selection.anchor.getNode(), n => lexical.$isElementNode(n));
955
804
  const topLevelCellElementNode = nearestElementNode && utils.$findMatchingParent(nearestElementNode, n => lexical.$isElementNode(n) && $isTableCellNode(n.getParent()));
956
-
957
805
  if (!lexical.$isElementNode(topLevelCellElementNode) || !lexical.$isElementNode(nearestElementNode)) {
958
806
  return false;
959
807
  }
960
-
961
808
  if (command === lexical.DELETE_LINE_COMMAND && topLevelCellElementNode.getPreviousSibling() === null) {
962
809
  // TODO: Fix Delete Line in Table Cells.
963
810
  return true;
964
811
  }
965
-
966
812
  if (command === lexical.DELETE_CHARACTER_COMMAND || command === lexical.DELETE_WORD_COMMAND) {
967
813
  if (selection.isCollapsed() && selection.anchor.offset === 0) {
968
814
  if (nearestElementNode !== topLevelCellElementNode) {
@@ -976,21 +822,16 @@ function applyTableHandlers(tableNode, tableElement, editor) {
976
822
  }
977
823
  }
978
824
  }
979
-
980
825
  return false;
981
826
  };
982
-
983
827
  [lexical.DELETE_WORD_COMMAND, lexical.DELETE_LINE_COMMAND, lexical.DELETE_CHARACTER_COMMAND].forEach(command => {
984
828
  tableSelection.listenersToRemove.add(editor.registerCommand(command, deleteTextHandler(command), lexical.COMMAND_PRIORITY_CRITICAL));
985
829
  });
986
-
987
830
  const deleteCellHandler = event => {
988
831
  const selection = lexical.$getSelection();
989
-
990
832
  if (!$isSelectionInTable(selection, tableNode)) {
991
833
  return false;
992
834
  }
993
-
994
835
  if (lexical.DEPRECATED_$isGridSelection(selection)) {
995
836
  event.preventDefault();
996
837
  event.stopPropagation();
@@ -998,71 +839,56 @@ function applyTableHandlers(tableNode, tableElement, editor) {
998
839
  return true;
999
840
  } else if (lexical.$isRangeSelection(selection)) {
1000
841
  const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
1001
-
1002
842
  if (!$isTableCellNode(tableCellNode)) {
1003
843
  return false;
1004
844
  }
1005
845
  }
1006
-
1007
846
  return false;
1008
847
  };
1009
-
1010
848
  tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_BACKSPACE_COMMAND, deleteCellHandler, lexical.COMMAND_PRIORITY_CRITICAL));
1011
849
  tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_DELETE_COMMAND, deleteCellHandler, lexical.COMMAND_PRIORITY_CRITICAL));
1012
850
  tableSelection.listenersToRemove.add(editor.registerCommand(lexical.FORMAT_TEXT_COMMAND, payload => {
1013
851
  const selection = lexical.$getSelection();
1014
-
1015
852
  if (!$isSelectionInTable(selection, tableNode)) {
1016
853
  return false;
1017
854
  }
1018
-
1019
855
  if (lexical.DEPRECATED_$isGridSelection(selection)) {
1020
856
  tableSelection.formatCells(payload);
1021
857
  return true;
1022
858
  } else if (lexical.$isRangeSelection(selection)) {
1023
859
  const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
1024
-
1025
860
  if (!$isTableCellNode(tableCellNode)) {
1026
861
  return false;
1027
862
  }
1028
863
  }
1029
-
1030
864
  return false;
1031
865
  }, lexical.COMMAND_PRIORITY_CRITICAL));
1032
866
  tableSelection.listenersToRemove.add(editor.registerCommand(lexical.CONTROLLED_TEXT_INSERTION_COMMAND, payload => {
1033
867
  const selection = lexical.$getSelection();
1034
-
1035
868
  if (!$isSelectionInTable(selection, tableNode)) {
1036
869
  return false;
1037
870
  }
1038
-
1039
871
  if (lexical.DEPRECATED_$isGridSelection(selection)) {
1040
872
  tableSelection.clearHighlight();
1041
873
  return false;
1042
874
  } else if (lexical.$isRangeSelection(selection)) {
1043
875
  const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
1044
-
1045
876
  if (!$isTableCellNode(tableCellNode)) {
1046
877
  return false;
1047
878
  }
1048
879
  }
1049
-
1050
880
  return false;
1051
881
  }, lexical.COMMAND_PRIORITY_CRITICAL));
1052
882
  tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_TAB_COMMAND, event => {
1053
883
  const selection = lexical.$getSelection();
1054
-
1055
884
  if (!$isSelectionInTable(selection, tableNode)) {
1056
885
  return false;
1057
886
  }
1058
-
1059
887
  if (lexical.$isRangeSelection(selection)) {
1060
888
  const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
1061
-
1062
889
  if (!$isTableCellNode(tableCellNode)) {
1063
890
  return false;
1064
891
  }
1065
-
1066
892
  if (selection.isCollapsed()) {
1067
893
  const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
1068
894
  event.preventDefault();
@@ -1070,7 +896,6 @@ function applyTableHandlers(tableNode, tableElement, editor) {
1070
896
  return true;
1071
897
  }
1072
898
  }
1073
-
1074
899
  return false;
1075
900
  }, lexical.COMMAND_PRIORITY_HIGH));
1076
901
  tableSelection.listenersToRemove.add(editor.registerCommand(lexical.FOCUS_COMMAND, payload => {
@@ -1079,7 +904,6 @@ function applyTableHandlers(tableNode, tableElement, editor) {
1079
904
  tableSelection.listenersToRemove.add(editor.registerCommand(lexical.SELECTION_CHANGE_COMMAND, payload => {
1080
905
  const selection = lexical.$getSelection();
1081
906
  const prevSelection = lexical.$getPreviousSelection();
1082
-
1083
907
  if (selection && lexical.$isRangeSelection(selection) && !selection.isCollapsed()) {
1084
908
  const anchorNode = selection.anchor.getNode();
1085
909
  const focusNode = selection.focus.getNode();
@@ -1087,7 +911,6 @@ function applyTableHandlers(tableNode, tableElement, editor) {
1087
911
  const isFocusInside = tableNode.isParentOf(focusNode);
1088
912
  const selectionContainsPartialTable = isAnchorInside && !isFocusInside || isFocusInside && !isAnchorInside;
1089
913
  const selectionIsInsideTable = isAnchorInside && isFocusInside && !tableNode.isSelected();
1090
-
1091
914
  if (selectionContainsPartialTable) {
1092
915
  const isBackward = selection.isBackward();
1093
916
  const modifiedSelection = lexical.$createRangeSelection();
@@ -1102,13 +925,11 @@ function applyTableHandlers(tableNode, tableElement, editor) {
1102
925
  const {
1103
926
  grid
1104
927
  } = tableSelection;
1105
-
1106
928
  if (selection.getNodes().filter($isTableCellNode).length === grid.rows * grid.columns) {
1107
929
  const gridSelection = lexical.DEPRECATED_$createGridSelection();
1108
930
  const tableKey = tableNode.getKey();
1109
931
  const firstCell = tableNode.getFirstChildOrThrow().getFirstChild();
1110
932
  const lastCell = tableNode.getLastChildOrThrow().getLastChild();
1111
-
1112
933
  if (firstCell != null && lastCell != null) {
1113
934
  gridSelection.set(tableKey, firstCell.getKey(), lastCell.getKey());
1114
935
  lexical.$setSelection(gridSelection);
@@ -1118,24 +939,20 @@ function applyTableHandlers(tableNode, tableElement, editor) {
1118
939
  }
1119
940
  }
1120
941
  }
1121
-
1122
942
  if (selection && !selection.is(prevSelection) && (lexical.DEPRECATED_$isGridSelection(selection) || lexical.DEPRECATED_$isGridSelection(prevSelection)) && tableSelection.gridSelection && !tableSelection.gridSelection.is(prevSelection)) {
1123
943
  if (lexical.DEPRECATED_$isGridSelection(selection) && selection.gridKey === tableSelection.tableNodeKey) {
1124
944
  tableSelection.updateTableGridSelection(selection);
1125
945
  } else if (!lexical.DEPRECATED_$isGridSelection(selection) && lexical.DEPRECATED_$isGridSelection(prevSelection) && prevSelection.gridKey === tableSelection.tableNodeKey) {
1126
946
  tableSelection.updateTableGridSelection(null);
1127
947
  }
1128
-
1129
948
  return false;
1130
949
  }
1131
-
1132
950
  if (tableSelection.hasHijackedSelectionStyles && !tableNode.isSelected()) {
1133
951
  $removeHighlightStyleToTable(tableSelection);
1134
952
  isRangeSelectionHijacked = false;
1135
953
  } else if (!tableSelection.hasHijackedSelectionStyles && tableNode.isSelected()) {
1136
954
  $addHighlightStyleToTable(tableSelection);
1137
955
  }
1138
-
1139
956
  return false;
1140
957
  }, lexical.COMMAND_PRIORITY_CRITICAL));
1141
958
  return tableSelection;
@@ -1148,24 +965,18 @@ function getTableSelectionFromTableElement(tableElement) {
1148
965
  }
1149
966
  function getCellFromTarget(node) {
1150
967
  let currentNode = node;
1151
-
1152
968
  while (currentNode != null) {
1153
969
  const nodeName = currentNode.nodeName;
1154
-
1155
970
  if (nodeName === 'TD' || nodeName === 'TH') {
1156
971
  // @ts-expect-error: internal field
1157
972
  const cell = currentNode._cell;
1158
-
1159
973
  if (cell === undefined) {
1160
974
  return null;
1161
975
  }
1162
-
1163
976
  return cell;
1164
977
  }
1165
-
1166
978
  currentNode = currentNode.parentNode;
1167
979
  }
1168
-
1169
980
  return null;
1170
981
  }
1171
982
  function getTableGrid(tableElement) {
@@ -1179,10 +990,8 @@ function getTableGrid(tableElement) {
1179
990
  let x = 0;
1180
991
  let y = 0;
1181
992
  cells.length = 0;
1182
-
1183
993
  while (currentNode != null) {
1184
994
  const nodeMame = currentNode.nodeName;
1185
-
1186
995
  if (nodeMame === 'TD' || nodeMame === 'TH') {
1187
996
  const elem = currentNode;
1188
997
  const cell = {
@@ -1190,47 +999,38 @@ function getTableGrid(tableElement) {
1190
999
  highlighted: false,
1191
1000
  x,
1192
1001
  y
1193
- }; // @ts-expect-error: internal field
1002
+ };
1194
1003
 
1004
+ // @ts-expect-error: internal field
1195
1005
  currentNode._cell = cell;
1196
-
1197
1006
  if (cells[y] === undefined) {
1198
1007
  cells[y] = [];
1199
1008
  }
1200
-
1201
1009
  cells[y][x] = cell;
1202
1010
  } else {
1203
1011
  const child = currentNode.firstChild;
1204
-
1205
1012
  if (child != null) {
1206
1013
  currentNode = child;
1207
1014
  continue;
1208
1015
  }
1209
1016
  }
1210
-
1211
1017
  const sibling = currentNode.nextSibling;
1212
-
1213
1018
  if (sibling != null) {
1214
1019
  x++;
1215
1020
  currentNode = sibling;
1216
1021
  continue;
1217
1022
  }
1218
-
1219
1023
  const parent = currentNode.parentNode;
1220
-
1221
1024
  if (parent != null) {
1222
1025
  const parentSibling = parent.nextSibling;
1223
-
1224
1026
  if (parentSibling == null) {
1225
1027
  break;
1226
1028
  }
1227
-
1228
1029
  y++;
1229
1030
  x = 0;
1230
1031
  currentNode = parentSibling;
1231
1032
  }
1232
1033
  }
1233
-
1234
1034
  grid.columns = x + 1;
1235
1035
  grid.rows = y + 1;
1236
1036
  return grid;
@@ -1240,7 +1040,6 @@ function $updateDOMForSelection(grid, selection) {
1240
1040
  const selectedCellNodes = new Set(selection ? selection.getNodes() : []);
1241
1041
  $forEachGridCell(grid, (cell, lexicalNode) => {
1242
1042
  const elem = cell.elem;
1243
-
1244
1043
  if (selectedCellNodes.has(lexicalNode)) {
1245
1044
  cell.highlighted = true;
1246
1045
  elem.style.setProperty('background-color', 'rgb(172, 206, 247)');
@@ -1250,7 +1049,6 @@ function $updateDOMForSelection(grid, selection) {
1250
1049
  cell.highlighted = false;
1251
1050
  elem.style.removeProperty('background-color');
1252
1051
  elem.style.removeProperty('caret-color');
1253
-
1254
1052
  if (!elem.getAttribute('style')) {
1255
1053
  elem.removeAttribute('style');
1256
1054
  }
@@ -1262,14 +1060,11 @@ function $forEachGridCell(grid, cb) {
1262
1060
  const {
1263
1061
  cells
1264
1062
  } = grid;
1265
-
1266
1063
  for (let y = 0; y < cells.length; y++) {
1267
1064
  const row = cells[y];
1268
-
1269
1065
  for (let x = 0; x < row.length; x++) {
1270
1066
  const cell = row[x];
1271
1067
  const lexicalNode = lexical.$getNearestNodeFromDOMNode(cell.elem);
1272
-
1273
1068
  if (lexicalNode !== null) {
1274
1069
  cb(cell, lexicalNode, {
1275
1070
  x,
@@ -1295,16 +1090,13 @@ function $removeHighlightStyleToTable(tableSelection) {
1295
1090
  cell.highlighted = false;
1296
1091
  elem.style.removeProperty('background-color');
1297
1092
  elem.style.removeProperty('caret-color');
1298
-
1299
1093
  if (!elem.getAttribute('style')) {
1300
1094
  elem.removeAttribute('style');
1301
1095
  }
1302
1096
  });
1303
1097
  }
1304
-
1305
1098
  const selectGridNodeInDirection = (tableSelection, tableNode, x, y, direction) => {
1306
1099
  const isForward = direction === 'forward';
1307
-
1308
1100
  switch (direction) {
1309
1101
  case 'backward':
1310
1102
  case 'forward':
@@ -1319,44 +1111,34 @@ const selectGridNodeInDirection = (tableSelection, tableNode, x, y, direction) =
1319
1111
  tableNode.selectNext();
1320
1112
  }
1321
1113
  }
1322
-
1323
1114
  return true;
1324
-
1325
1115
  case 'up':
1326
1116
  if (y !== 0) {
1327
1117
  selectTableCellNode(tableNode.getCellNodeFromCordsOrThrow(x, y - 1, tableSelection.grid));
1328
1118
  } else {
1329
1119
  tableNode.selectPrevious();
1330
1120
  }
1331
-
1332
1121
  return true;
1333
-
1334
1122
  case 'down':
1335
1123
  if (y !== tableSelection.grid.rows - 1) {
1336
1124
  selectTableCellNode(tableNode.getCellNodeFromCordsOrThrow(x, y + 1, tableSelection.grid));
1337
1125
  } else {
1338
1126
  tableNode.selectNext();
1339
1127
  }
1340
-
1341
1128
  return true;
1342
-
1343
1129
  default:
1344
1130
  return false;
1345
1131
  }
1346
1132
  };
1347
-
1348
1133
  const adjustFocusNodeInDirection = (tableSelection, tableNode, x, y, direction) => {
1349
1134
  const isForward = direction === 'forward';
1350
-
1351
1135
  switch (direction) {
1352
1136
  case 'backward':
1353
1137
  case 'forward':
1354
1138
  if (x !== (isForward ? tableSelection.grid.columns - 1 : 0)) {
1355
1139
  tableSelection.setFocusCellForSelection(tableNode.getCellFromCordsOrThrow(x + (isForward ? 1 : -1), y, tableSelection.grid));
1356
1140
  }
1357
-
1358
1141
  return true;
1359
-
1360
1142
  case 'up':
1361
1143
  if (y !== 0) {
1362
1144
  tableSelection.setFocusCellForSelection(tableNode.getCellFromCordsOrThrow(x, y - 1, tableSelection.grid));
@@ -1364,7 +1146,6 @@ const adjustFocusNodeInDirection = (tableSelection, tableNode, x, y, direction)
1364
1146
  } else {
1365
1147
  return false;
1366
1148
  }
1367
-
1368
1149
  case 'down':
1369
1150
  if (y !== tableSelection.grid.rows - 1) {
1370
1151
  tableSelection.setFocusCellForSelection(tableNode.getCellFromCordsOrThrow(x, y + 1, tableSelection.grid));
@@ -1372,25 +1153,20 @@ const adjustFocusNodeInDirection = (tableSelection, tableNode, x, y, direction)
1372
1153
  } else {
1373
1154
  return false;
1374
1155
  }
1375
-
1376
1156
  default:
1377
1157
  return false;
1378
1158
  }
1379
1159
  };
1380
-
1381
1160
  function $isSelectionInTable(selection, tableNode) {
1382
1161
  if (lexical.$isRangeSelection(selection) || lexical.DEPRECATED_$isGridSelection(selection)) {
1383
1162
  const isAnchorInside = tableNode.isParentOf(selection.anchor.getNode());
1384
1163
  const isFocusInside = tableNode.isParentOf(selection.focus.getNode());
1385
1164
  return isAnchorInside && isFocusInside;
1386
1165
  }
1387
-
1388
1166
  return false;
1389
1167
  }
1390
-
1391
1168
  function selectTableCellNode(tableCell) {
1392
1169
  const possibleParagraph = tableCell.getChildren().find(n => lexical.$isParagraphNode(n));
1393
-
1394
1170
  if (lexical.$isParagraphNode(possibleParagraph)) {
1395
1171
  possibleParagraph.selectEnd();
1396
1172
  } else {
@@ -1405,18 +1181,16 @@ function selectTableCellNode(tableCell) {
1405
1181
  * LICENSE file in the root directory of this source tree.
1406
1182
  *
1407
1183
  */
1408
-
1409
1184
  /** @noInheritDoc */
1410
1185
  class TableNode extends lexical.DEPRECATED_GridNode {
1411
1186
  /** @internal */
1187
+
1412
1188
  static getType() {
1413
1189
  return 'table';
1414
1190
  }
1415
-
1416
1191
  static clone(node) {
1417
1192
  return new TableNode(node.__key);
1418
1193
  }
1419
-
1420
1194
  static importDOM() {
1421
1195
  return {
1422
1196
  table: _node => ({
@@ -1425,34 +1199,30 @@ class TableNode extends lexical.DEPRECATED_GridNode {
1425
1199
  })
1426
1200
  };
1427
1201
  }
1428
-
1429
1202
  static importJSON(_serializedNode) {
1430
1203
  return $createTableNode();
1431
1204
  }
1432
-
1433
1205
  constructor(key) {
1434
1206
  super(key);
1435
1207
  }
1436
-
1437
1208
  exportJSON() {
1438
- return { ...super.exportJSON(),
1209
+ return {
1210
+ ...super.exportJSON(),
1439
1211
  type: 'table',
1440
1212
  version: 1
1441
1213
  };
1442
1214
  }
1443
-
1444
1215
  createDOM(config, editor) {
1445
1216
  const tableElement = document.createElement('table');
1446
1217
  utils.addClassNamesToElement(tableElement, config.theme.table);
1447
1218
  return tableElement;
1448
1219
  }
1449
-
1450
1220
  updateDOM() {
1451
1221
  return false;
1452
1222
  }
1453
-
1454
1223
  exportDOM(editor) {
1455
- return { ...super.exportDOM(editor),
1224
+ return {
1225
+ ...super.exportDOM(editor),
1456
1226
  after: tableElement => {
1457
1227
  if (tableElement) {
1458
1228
  const newElement = tableElement.cloneNode();
@@ -1460,57 +1230,45 @@ class TableNode extends lexical.DEPRECATED_GridNode {
1460
1230
  const tBody = document.createElement('tbody');
1461
1231
  tBody.append(...tableElement.children);
1462
1232
  const firstRow = this.getFirstChildOrThrow();
1463
-
1464
1233
  if (!$isTableRowNode(firstRow)) {
1465
1234
  throw new Error('Expected to find row node.');
1466
1235
  }
1467
-
1468
1236
  const colCount = firstRow.getChildrenSize();
1469
-
1470
1237
  for (let i = 0; i < colCount; i++) {
1471
1238
  const col = document.createElement('col');
1472
1239
  colGroup.append(col);
1473
1240
  }
1474
-
1475
1241
  newElement.replaceChildren(colGroup, tBody);
1476
1242
  return newElement;
1477
1243
  }
1478
1244
  }
1479
1245
  };
1480
1246
  }
1481
-
1482
1247
  canExtractContents() {
1483
1248
  return false;
1484
1249
  }
1485
-
1486
1250
  canBeEmpty() {
1487
1251
  return false;
1488
1252
  }
1489
-
1490
1253
  isShadowRoot() {
1491
1254
  return true;
1492
1255
  }
1493
-
1494
1256
  getCordsFromCellNode(tableCellNode, grid) {
1495
1257
  const {
1496
1258
  rows,
1497
1259
  cells
1498
1260
  } = grid;
1499
-
1500
1261
  for (let y = 0; y < rows; y++) {
1501
1262
  const row = cells[y];
1502
-
1503
1263
  if (row == null) {
1504
1264
  throw new Error(`Row not found at y:${y}`);
1505
1265
  }
1506
-
1507
1266
  const x = row.findIndex(({
1508
1267
  elem
1509
1268
  }) => {
1510
1269
  const cellNode = lexical.$getNearestNodeFromDOMNode(elem);
1511
1270
  return cellNode === tableCellNode;
1512
1271
  });
1513
-
1514
1272
  if (x !== -1) {
1515
1273
  return {
1516
1274
  x,
@@ -1518,81 +1276,59 @@ class TableNode extends lexical.DEPRECATED_GridNode {
1518
1276
  };
1519
1277
  }
1520
1278
  }
1521
-
1522
1279
  throw new Error('Cell not found in table.');
1523
1280
  }
1524
-
1525
1281
  getCellFromCords(x, y, grid) {
1526
1282
  const {
1527
1283
  cells
1528
1284
  } = grid;
1529
1285
  const row = cells[y];
1530
-
1531
1286
  if (row == null) {
1532
1287
  return null;
1533
1288
  }
1534
-
1535
1289
  const cell = row[x];
1536
-
1537
1290
  if (cell == null) {
1538
1291
  return null;
1539
1292
  }
1540
-
1541
1293
  return cell;
1542
1294
  }
1543
-
1544
1295
  getCellFromCordsOrThrow(x, y, grid) {
1545
1296
  const cell = this.getCellFromCords(x, y, grid);
1546
-
1547
1297
  if (!cell) {
1548
1298
  throw new Error('Cell not found at cords.');
1549
1299
  }
1550
-
1551
1300
  return cell;
1552
1301
  }
1553
-
1554
1302
  getCellNodeFromCords(x, y, grid) {
1555
1303
  const cell = this.getCellFromCords(x, y, grid);
1556
-
1557
1304
  if (cell == null) {
1558
1305
  return null;
1559
1306
  }
1560
-
1561
1307
  const node = lexical.$getNearestNodeFromDOMNode(cell.elem);
1562
-
1563
1308
  if ($isTableCellNode(node)) {
1564
1309
  return node;
1565
1310
  }
1566
-
1567
1311
  return null;
1568
1312
  }
1569
-
1570
1313
  getCellNodeFromCordsOrThrow(x, y, grid) {
1571
1314
  const node = this.getCellNodeFromCords(x, y, grid);
1572
-
1573
1315
  if (!node) {
1574
1316
  throw new Error('Node at cords not TableCellNode.');
1575
1317
  }
1576
-
1577
1318
  return node;
1578
1319
  }
1579
-
1580
1320
  canSelectBefore() {
1581
1321
  return true;
1582
1322
  }
1583
-
1584
1323
  canIndent() {
1585
1324
  return false;
1586
1325
  }
1587
-
1588
1326
  }
1589
1327
  function $getElementGridForTableNode(editor, tableNode) {
1590
1328
  const tableElement = editor.getElementByKey(tableNode.getKey());
1591
-
1592
1329
  if (tableElement == null) {
1593
1330
  throw new Error('Table Element Not Found');
1594
1331
  }
1595
-
1596
1332
  return getTableGrid(tableElement);
1597
1333
  }
1598
1334
  function convertTableElement(_domNode) {
@@ -1616,55 +1352,46 @@ function $isTableNode(node) {
1616
1352
  */
1617
1353
  function $createTableNodeWithDimensions(rowCount, columnCount, includeHeaders = true) {
1618
1354
  const tableNode = $createTableNode();
1619
-
1620
1355
  for (let iRow = 0; iRow < rowCount; iRow++) {
1621
1356
  const tableRowNode = $createTableRowNode();
1622
-
1623
1357
  for (let iColumn = 0; iColumn < columnCount; iColumn++) {
1624
1358
  let headerState = TableCellHeaderStates.NO_STATUS;
1625
-
1626
- if (includeHeaders) {
1359
+ if (typeof includeHeaders === 'object') {
1360
+ if (iRow === 0 && includeHeaders.rows) headerState |= TableCellHeaderStates.ROW;
1361
+ if (iColumn === 0 && includeHeaders.columns) headerState |= TableCellHeaderStates.COLUMN;
1362
+ } else if (includeHeaders) {
1627
1363
  if (iRow === 0) headerState |= TableCellHeaderStates.ROW;
1628
1364
  if (iColumn === 0) headerState |= TableCellHeaderStates.COLUMN;
1629
1365
  }
1630
-
1631
1366
  const tableCellNode = $createTableCellNode(headerState);
1632
1367
  const paragraphNode = lexical.$createParagraphNode();
1633
1368
  paragraphNode.append(lexical.$createTextNode());
1634
1369
  tableCellNode.append(paragraphNode);
1635
1370
  tableRowNode.append(tableCellNode);
1636
1371
  }
1637
-
1638
1372
  tableNode.append(tableRowNode);
1639
1373
  }
1640
-
1641
1374
  return tableNode;
1642
1375
  }
1643
1376
  function $getTableCellNodeFromLexicalNode(startingNode) {
1644
1377
  const node = utils.$findMatchingParent(startingNode, n => $isTableCellNode(n));
1645
-
1646
1378
  if ($isTableCellNode(node)) {
1647
1379
  return node;
1648
1380
  }
1649
-
1650
1381
  return null;
1651
1382
  }
1652
1383
  function $getTableRowNodeFromTableCellNodeOrThrow(startingNode) {
1653
1384
  const node = utils.$findMatchingParent(startingNode, n => $isTableRowNode(n));
1654
-
1655
1385
  if ($isTableRowNode(node)) {
1656
1386
  return node;
1657
1387
  }
1658
-
1659
1388
  throw new Error('Expected table cell to be inside of table row.');
1660
1389
  }
1661
1390
  function $getTableNodeFromLexicalNodeOrThrow(startingNode) {
1662
1391
  const node = utils.$findMatchingParent(startingNode, n => $isTableNode(n));
1663
-
1664
1392
  if ($isTableNode(node)) {
1665
1393
  return node;
1666
1394
  }
1667
-
1668
1395
  throw new Error('Expected table cell to be inside of table.');
1669
1396
  }
1670
1397
  function $getTableRowIndexFromTableCellNode(tableCellNode) {
@@ -1691,53 +1418,42 @@ function $getTableCellSiblingsFromTableCellNode(tableCellNode, grid) {
1691
1418
  }
1692
1419
  function $removeTableRowAtIndex(tableNode, indexToDelete) {
1693
1420
  const tableRows = tableNode.getChildren();
1694
-
1695
1421
  if (indexToDelete >= tableRows.length || indexToDelete < 0) {
1696
1422
  throw new Error('Expected table cell to be inside of table row.');
1697
1423
  }
1698
-
1699
1424
  const targetRowNode = tableRows[indexToDelete];
1700
1425
  targetRowNode.remove();
1701
1426
  return tableNode;
1702
1427
  }
1703
1428
  function $insertTableRow(tableNode, targetIndex, shouldInsertAfter = true, rowCount, grid) {
1704
1429
  const tableRows = tableNode.getChildren();
1705
-
1706
1430
  if (targetIndex >= tableRows.length || targetIndex < 0) {
1707
1431
  throw new Error('Table row target index out of range');
1708
1432
  }
1709
-
1710
1433
  const targetRowNode = tableRows[targetIndex];
1711
-
1712
1434
  if ($isTableRowNode(targetRowNode)) {
1713
1435
  for (let r = 0; r < rowCount; r++) {
1714
1436
  const tableRowCells = targetRowNode.getChildren();
1715
1437
  const tableColumnCount = tableRowCells.length;
1716
1438
  const newTableRowNode = $createTableRowNode();
1717
-
1718
1439
  for (let c = 0; c < tableColumnCount; c++) {
1719
1440
  const tableCellFromTargetRow = tableRowCells[c];
1720
-
1721
1441
  if (!$isTableCellNode(tableCellFromTargetRow)) {
1722
1442
  throw Error(`Expected table cell`);
1723
1443
  }
1724
-
1725
1444
  const {
1726
1445
  above,
1727
1446
  below
1728
1447
  } = $getTableCellSiblingsFromTableCellNode(tableCellFromTargetRow, grid);
1729
1448
  let headerState = TableCellHeaderStates.NO_STATUS;
1730
1449
  const width = above && above.getWidth() || below && below.getWidth() || undefined;
1731
-
1732
1450
  if (above && above.hasHeaderState(TableCellHeaderStates.COLUMN) || below && below.hasHeaderState(TableCellHeaderStates.COLUMN)) {
1733
1451
  headerState |= TableCellHeaderStates.COLUMN;
1734
1452
  }
1735
-
1736
1453
  const tableCellNode = $createTableCellNode(headerState, 1, width);
1737
1454
  tableCellNode.append(lexical.$createParagraphNode());
1738
1455
  newTableRowNode.append(tableCellNode);
1739
1456
  }
1740
-
1741
1457
  if (shouldInsertAfter) {
1742
1458
  targetRowNode.insertAfter(newTableRowNode);
1743
1459
  } else {
@@ -1747,42 +1463,32 @@ function $insertTableRow(tableNode, targetIndex, shouldInsertAfter = true, rowCo
1747
1463
  } else {
1748
1464
  throw new Error('Row before insertion index does not exist.');
1749
1465
  }
1750
-
1751
1466
  return tableNode;
1752
1467
  }
1753
1468
  function $insertTableColumn(tableNode, targetIndex, shouldInsertAfter = true, columnCount, grid) {
1754
1469
  const tableRows = tableNode.getChildren();
1755
-
1756
1470
  for (let r = 0; r < tableRows.length; r++) {
1757
1471
  const currentTableRowNode = tableRows[r];
1758
-
1759
1472
  if ($isTableRowNode(currentTableRowNode)) {
1760
1473
  for (let c = 0; c < columnCount; c++) {
1761
1474
  const tableRowChildren = currentTableRowNode.getChildren();
1762
-
1763
1475
  if (targetIndex >= tableRowChildren.length || targetIndex < 0) {
1764
1476
  throw new Error('Table column target index out of range');
1765
1477
  }
1766
-
1767
1478
  const targetCell = tableRowChildren[targetIndex];
1768
-
1769
1479
  if (!$isTableCellNode(targetCell)) {
1770
1480
  throw Error(`Expected table cell`);
1771
1481
  }
1772
-
1773
1482
  const {
1774
1483
  left,
1775
1484
  right
1776
1485
  } = $getTableCellSiblingsFromTableCellNode(targetCell, grid);
1777
1486
  let headerState = TableCellHeaderStates.NO_STATUS;
1778
-
1779
1487
  if (left && left.hasHeaderState(TableCellHeaderStates.ROW) || right && right.hasHeaderState(TableCellHeaderStates.ROW)) {
1780
1488
  headerState |= TableCellHeaderStates.ROW;
1781
1489
  }
1782
-
1783
1490
  const newTableCell = $createTableCellNode(headerState);
1784
1491
  newTableCell.append(lexical.$createParagraphNode());
1785
-
1786
1492
  if (shouldInsertAfter) {
1787
1493
  targetCell.insertAfter(newTableCell);
1788
1494
  } else {
@@ -1791,26 +1497,20 @@ function $insertTableColumn(tableNode, targetIndex, shouldInsertAfter = true, co
1791
1497
  }
1792
1498
  }
1793
1499
  }
1794
-
1795
1500
  return tableNode;
1796
1501
  }
1797
1502
  function $deleteTableColumn(tableNode, targetIndex) {
1798
1503
  const tableRows = tableNode.getChildren();
1799
-
1800
1504
  for (let i = 0; i < tableRows.length; i++) {
1801
1505
  const currentTableRowNode = tableRows[i];
1802
-
1803
1506
  if ($isTableRowNode(currentTableRowNode)) {
1804
1507
  const tableRowChildren = currentTableRowNode.getChildren();
1805
-
1806
1508
  if (targetIndex >= tableRowChildren.length || targetIndex < 0) {
1807
1509
  throw new Error('Table column target index out of range');
1808
1510
  }
1809
-
1810
1511
  tableRowChildren[targetIndex].remove();
1811
1512
  }
1812
1513
  }
1813
-
1814
1514
  return tableNode;
1815
1515
  }
1816
1516