@lexical/table 0.12.2 → 0.12.3

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.
@@ -16,6 +16,7 @@ var utils = require('@lexical/utils');
16
16
  * LICENSE file in the root directory of this source tree.
17
17
  *
18
18
  */
19
+
19
20
  const PIXEL_VALUE_REG_EXP = /^(\d+(?:\.\d+)?)px$/;
20
21
 
21
22
  /**
@@ -31,7 +32,6 @@ const TableCellHeaderStates = {
31
32
  NO_STATUS: 0,
32
33
  ROW: 1
33
34
  };
34
-
35
35
  /** @noInheritDoc */
36
36
  class TableCellNode extends lexical.DEPRECATED_GridCellNode {
37
37
  /** @internal */
@@ -39,17 +39,16 @@ class TableCellNode extends lexical.DEPRECATED_GridCellNode {
39
39
  /** @internal */
40
40
 
41
41
  /** @internal */
42
+
42
43
  static getType() {
43
44
  return 'tablecell';
44
45
  }
45
-
46
46
  static clone(node) {
47
47
  const cellNode = new TableCellNode(node.__headerState, node.__colSpan, node.__width, node.__key);
48
48
  cellNode.__rowSpan = node.__rowSpan;
49
49
  cellNode.__backgroundColor = node.__backgroundColor;
50
50
  return cellNode;
51
51
  }
52
-
53
52
  static importDOM() {
54
53
  return {
55
54
  td: node => ({
@@ -62,7 +61,6 @@ class TableCellNode extends lexical.DEPRECATED_GridCellNode {
62
61
  })
63
62
  };
64
63
  }
65
-
66
64
  static importJSON(serializedNode) {
67
65
  const colSpan = serializedNode.colSpan || 1;
68
66
  const rowSpan = serializedNode.rowSpan || 1;
@@ -71,185 +69,146 @@ class TableCellNode extends lexical.DEPRECATED_GridCellNode {
71
69
  cellNode.__backgroundColor = serializedNode.backgroundColor || null;
72
70
  return cellNode;
73
71
  }
74
-
75
72
  constructor(headerState = TableCellHeaderStates.NO_STATUS, colSpan = 1, width, key) {
76
73
  super(colSpan, key);
77
74
  this.__headerState = headerState;
78
75
  this.__width = width;
79
76
  this.__backgroundColor = null;
80
77
  }
81
-
82
78
  createDOM(config) {
83
79
  const element = document.createElement(this.getTag());
84
-
85
80
  if (this.__width) {
86
81
  element.style.width = `${this.__width}px`;
87
82
  }
88
-
89
83
  if (this.__colSpan > 1) {
90
84
  element.colSpan = this.__colSpan;
91
85
  }
92
-
93
86
  if (this.__rowSpan > 1) {
94
87
  element.rowSpan = this.__rowSpan;
95
88
  }
96
-
97
89
  if (this.__backgroundColor !== null) {
98
90
  element.style.backgroundColor = this.__backgroundColor;
99
91
  }
100
-
101
92
  utils.addClassNamesToElement(element, config.theme.tableCell, this.hasHeader() && config.theme.tableCellHeader);
102
93
  return element;
103
94
  }
104
-
105
95
  exportDOM(editor) {
106
96
  const {
107
97
  element
108
98
  } = super.exportDOM(editor);
109
-
110
99
  if (element) {
111
100
  const element_ = element;
112
101
  const maxWidth = 700;
113
102
  const colCount = this.getParentOrThrow().getChildrenSize();
114
103
  element_.style.border = '1px solid black';
115
-
116
104
  if (this.__colSpan > 1) {
117
105
  element_.colSpan = this.__colSpan;
118
106
  }
119
-
120
107
  if (this.__rowSpan > 1) {
121
108
  element_.rowSpan = this.__rowSpan;
122
109
  }
123
-
124
110
  element_.style.width = `${this.getWidth() || Math.max(90, maxWidth / colCount)}px`;
125
111
  element_.style.verticalAlign = 'top';
126
112
  element_.style.textAlign = 'start';
127
113
  const backgroundColor = this.getBackgroundColor();
128
-
129
114
  if (backgroundColor !== null) {
130
115
  element_.style.backgroundColor = backgroundColor;
131
116
  } else if (this.hasHeader()) {
132
117
  element_.style.backgroundColor = '#f2f3f5';
133
118
  }
134
119
  }
135
-
136
120
  return {
137
121
  element
138
122
  };
139
123
  }
140
-
141
124
  exportJSON() {
142
- return { ...super.exportJSON(),
125
+ return {
126
+ ...super.exportJSON(),
143
127
  backgroundColor: this.getBackgroundColor(),
144
128
  headerState: this.__headerState,
145
129
  type: 'tablecell',
146
130
  width: this.getWidth()
147
131
  };
148
132
  }
149
-
150
133
  getTag() {
151
134
  return this.hasHeader() ? 'th' : 'td';
152
135
  }
153
-
154
136
  setHeaderStyles(headerState) {
155
137
  const self = this.getWritable();
156
138
  self.__headerState = headerState;
157
139
  return this.__headerState;
158
140
  }
159
-
160
141
  getHeaderStyles() {
161
142
  return this.getLatest().__headerState;
162
143
  }
163
-
164
144
  setWidth(width) {
165
145
  const self = this.getWritable();
166
146
  self.__width = width;
167
147
  return this.__width;
168
148
  }
169
-
170
149
  getWidth() {
171
150
  return this.getLatest().__width;
172
151
  }
173
-
174
152
  getBackgroundColor() {
175
153
  return this.getLatest().__backgroundColor;
176
154
  }
177
-
178
155
  setBackgroundColor(newBackgroundColor) {
179
156
  this.getWritable().__backgroundColor = newBackgroundColor;
180
157
  }
181
-
182
158
  toggleHeaderStyle(headerStateToToggle) {
183
159
  const self = this.getWritable();
184
-
185
160
  if ((self.__headerState & headerStateToToggle) === headerStateToToggle) {
186
161
  self.__headerState -= headerStateToToggle;
187
162
  } else {
188
163
  self.__headerState += headerStateToToggle;
189
164
  }
190
-
191
165
  return self;
192
166
  }
193
-
194
167
  hasHeaderState(headerState) {
195
168
  return (this.getHeaderStyles() & headerState) === headerState;
196
169
  }
197
-
198
170
  hasHeader() {
199
171
  return this.getLatest().__headerState !== TableCellHeaderStates.NO_STATUS;
200
172
  }
201
-
202
173
  updateDOM(prevNode) {
203
174
  return prevNode.__headerState !== this.__headerState || prevNode.__width !== this.__width || prevNode.__colSpan !== this.__colSpan || prevNode.__rowSpan !== this.__rowSpan || prevNode.__backgroundColor !== this.__backgroundColor;
204
175
  }
205
-
206
176
  isShadowRoot() {
207
177
  return true;
208
178
  }
209
-
210
179
  collapseAtStart() {
211
180
  return true;
212
181
  }
213
-
214
182
  canBeEmpty() {
215
183
  return false;
216
184
  }
217
-
218
185
  canIndent() {
219
186
  return false;
220
187
  }
221
-
222
188
  }
223
189
  function convertTableCellNodeElement(domNode) {
224
190
  const domNode_ = domNode;
225
191
  const nodeName = domNode.nodeName.toLowerCase();
226
192
  let width = undefined;
227
-
228
193
  if (PIXEL_VALUE_REG_EXP.test(domNode_.style.width)) {
229
194
  width = parseFloat(domNode_.style.width);
230
195
  }
231
-
232
196
  const tableCellNode = $createTableCellNode(nodeName === 'th' ? TableCellHeaderStates.ROW : TableCellHeaderStates.NO_STATUS, domNode_.colSpan, width);
233
197
  tableCellNode.__rowSpan = domNode_.rowSpan;
234
198
  const backgroundColor = domNode_.style.backgroundColor;
235
-
236
199
  if (backgroundColor !== '') {
237
200
  tableCellNode.__backgroundColor = backgroundColor;
238
201
  }
239
-
240
202
  return {
241
203
  forChild: (lexicalNode, parentLexicalNode) => {
242
204
  if ($isTableCellNode(parentLexicalNode) && !lexical.$isElementNode(lexicalNode)) {
243
205
  const paragraphNode = lexical.$createParagraphNode();
244
-
245
206
  if (lexical.$isLineBreakNode(lexicalNode) && lexicalNode.getTextContent() === '\n') {
246
207
  return null;
247
208
  }
248
-
249
209
  paragraphNode.append(lexicalNode);
250
210
  return paragraphNode;
251
211
  }
252
-
253
212
  return lexicalNode;
254
213
  },
255
214
  node: tableCellNode
@@ -269,18 +228,16 @@ function $isTableCellNode(node) {
269
228
  * LICENSE file in the root directory of this source tree.
270
229
  *
271
230
  */
272
-
273
231
  /** @noInheritDoc */
274
232
  class TableRowNode extends lexical.DEPRECATED_GridRowNode {
275
233
  /** @internal */
234
+
276
235
  static getType() {
277
236
  return 'tablerow';
278
237
  }
279
-
280
238
  static clone(node) {
281
239
  return new TableRowNode(node.__height, node.__key);
282
240
  }
283
-
284
241
  static importDOM() {
285
242
  return {
286
243
  tr: node => ({
@@ -289,69 +246,55 @@ class TableRowNode extends lexical.DEPRECATED_GridRowNode {
289
246
  })
290
247
  };
291
248
  }
292
-
293
249
  static importJSON(serializedNode) {
294
250
  return $createTableRowNode(serializedNode.height);
295
251
  }
296
-
297
252
  constructor(height, key) {
298
253
  super(key);
299
254
  this.__height = height;
300
255
  }
301
-
302
256
  exportJSON() {
303
- return { ...super.exportJSON(),
257
+ return {
258
+ ...super.exportJSON(),
304
259
  type: 'tablerow',
305
260
  version: 1
306
261
  };
307
262
  }
308
-
309
263
  createDOM(config) {
310
264
  const element = document.createElement('tr');
311
-
312
265
  if (this.__height) {
313
266
  element.style.height = `${this.__height}px`;
314
267
  }
315
-
316
268
  utils.addClassNamesToElement(element, config.theme.tableRow);
317
269
  return element;
318
270
  }
319
-
320
271
  isShadowRoot() {
321
272
  return true;
322
273
  }
323
-
324
274
  setHeight(height) {
325
275
  const self = this.getWritable();
326
276
  self.__height = height;
327
277
  return this.__height;
328
278
  }
329
-
330
279
  getHeight() {
331
280
  return this.getLatest().__height;
332
281
  }
333
-
334
282
  updateDOM(prevNode) {
335
283
  return prevNode.__height !== this.__height;
336
284
  }
337
-
338
285
  canBeEmpty() {
339
286
  return false;
340
287
  }
341
-
342
288
  canIndent() {
343
289
  return false;
344
290
  }
345
-
346
291
  }
347
292
  function convertTableRowElement(domNode) {
348
293
  const domNode_ = domNode;
349
294
  let height = undefined;
350
-
351
295
  if (PIXEL_VALUE_REG_EXP.test(domNode_.style.height)) {
352
296
  height = parseFloat(domNode_.style.height);
353
297
  }
354
-
355
298
  return {
356
299
  node: $createTableRowNode(height)
357
300
  };
@@ -370,6 +313,7 @@ function $isTableRowNode(node) {
370
313
  * LICENSE file in the root directory of this source tree.
371
314
  *
372
315
  */
316
+
373
317
  const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
374
318
 
375
319
  /**
@@ -379,9 +323,7 @@ const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !==
379
323
  * LICENSE file in the root directory of this source tree.
380
324
  *
381
325
  */
382
-
383
326
  const getDOMSelection = targetWindow => CAN_USE_DOM ? (targetWindow || window).getSelection() : null;
384
-
385
327
  class TableSelection {
386
328
  constructor(editor, tableNodeKey) {
387
329
  this.isHighlightingCells = false;
@@ -405,51 +347,40 @@ class TableSelection {
405
347
  this.hasHijackedSelectionStyles = false;
406
348
  this.trackTableGrid();
407
349
  }
408
-
409
350
  getGrid() {
410
351
  return this.grid;
411
352
  }
412
-
413
353
  removeListeners() {
414
354
  Array.from(this.listenersToRemove).forEach(removeListener => removeListener());
415
355
  }
416
-
417
356
  trackTableGrid() {
418
357
  const observer = new MutationObserver(records => {
419
358
  this.editor.update(() => {
420
359
  let gridNeedsRedraw = false;
421
-
422
360
  for (let i = 0; i < records.length; i++) {
423
361
  const record = records[i];
424
362
  const target = record.target;
425
363
  const nodeName = target.nodeName;
426
-
427
364
  if (nodeName === 'TABLE' || nodeName === 'TR') {
428
365
  gridNeedsRedraw = true;
429
366
  break;
430
367
  }
431
368
  }
432
-
433
369
  if (!gridNeedsRedraw) {
434
370
  return;
435
371
  }
436
-
437
372
  const tableElement = this.editor.getElementByKey(this.tableNodeKey);
438
-
439
373
  if (!tableElement) {
440
374
  throw new Error('Expected to find TableElement in DOM');
441
375
  }
442
-
443
376
  this.grid = getTableGrid(tableElement);
444
377
  });
445
378
  });
446
379
  this.editor.update(() => {
447
380
  const tableElement = this.editor.getElementByKey(this.tableNodeKey);
448
-
449
381
  if (!tableElement) {
450
382
  throw new Error('Expected to find TableElement in DOM');
451
383
  }
452
-
453
384
  this.grid = getTableGrid(tableElement);
454
385
  observer.observe(tableElement, {
455
386
  childList: true,
@@ -457,7 +388,6 @@ class TableSelection {
457
388
  });
458
389
  });
459
390
  }
460
-
461
391
  clearHighlight() {
462
392
  const editor = this.editor;
463
393
  this.isHighlightingCells = false;
@@ -474,53 +404,42 @@ class TableSelection {
474
404
  this.enableHighlightStyle();
475
405
  editor.update(() => {
476
406
  const tableNode = lexical.$getNodeByKey(this.tableNodeKey);
477
-
478
407
  if (!$isTableNode(tableNode)) {
479
408
  throw new Error('Expected TableNode.');
480
409
  }
481
-
482
410
  const tableElement = editor.getElementByKey(this.tableNodeKey);
483
-
484
411
  if (!tableElement) {
485
412
  throw new Error('Expected to find TableElement in DOM');
486
413
  }
487
-
488
414
  const grid = getTableGrid(tableElement);
489
415
  $updateDOMForSelection(editor, grid, null);
490
416
  lexical.$setSelection(null);
491
417
  editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
492
418
  });
493
419
  }
494
-
495
420
  enableHighlightStyle() {
496
421
  const editor = this.editor;
497
422
  editor.update(() => {
498
423
  const tableElement = editor.getElementByKey(this.tableNodeKey);
499
-
500
424
  if (!tableElement) {
501
425
  throw new Error('Expected to find TableElement in DOM');
502
426
  }
503
-
504
427
  utils.removeClassNamesFromElement(tableElement, editor._config.theme.tableSelection);
505
428
  tableElement.classList.remove('disable-selection');
506
429
  this.hasHijackedSelectionStyles = false;
507
430
  });
508
431
  }
509
-
510
432
  disableHighlightStyle() {
511
433
  const editor = this.editor;
512
434
  editor.update(() => {
513
435
  const tableElement = editor.getElementByKey(this.tableNodeKey);
514
-
515
436
  if (!tableElement) {
516
437
  throw new Error('Expected to find TableElement in DOM');
517
438
  }
518
-
519
439
  utils.addClassNamesToElement(tableElement, editor._config.theme.tableSelection);
520
440
  this.hasHijackedSelectionStyles = true;
521
441
  });
522
442
  }
523
-
524
443
  updateTableGridSelection(selection) {
525
444
  if (selection != null && selection.gridKey === this.tableNodeKey) {
526
445
  const editor = this.editor;
@@ -530,49 +449,42 @@ class TableSelection {
530
449
  $updateDOMForSelection(editor, this.grid, this.gridSelection);
531
450
  } else if (selection == null) {
532
451
  this.clearHighlight();
452
+ } else {
453
+ this.tableNodeKey = selection.gridKey;
454
+ this.updateTableGridSelection(selection);
533
455
  }
534
456
  }
535
-
536
457
  setFocusCellForSelection(cell, ignoreStart = false) {
537
458
  const editor = this.editor;
538
459
  editor.update(() => {
539
460
  const tableNode = lexical.$getNodeByKey(this.tableNodeKey);
540
-
541
461
  if (!$isTableNode(tableNode)) {
542
462
  throw new Error('Expected TableNode.');
543
463
  }
544
-
545
464
  const tableElement = editor.getElementByKey(this.tableNodeKey);
546
-
547
465
  if (!tableElement) {
548
466
  throw new Error('Expected to find TableElement in DOM');
549
467
  }
550
-
551
468
  const cellX = cell.x;
552
469
  const cellY = cell.y;
553
470
  this.focusCell = cell;
554
-
555
471
  if (this.anchorCell !== null) {
556
- const domSelection = getDOMSelection(editor._window); // Collapse the selection
557
-
472
+ const domSelection = getDOMSelection(editor._window);
473
+ // Collapse the selection
558
474
  if (domSelection) {
559
475
  domSelection.setBaseAndExtent(this.anchorCell.elem, 0, this.focusCell.elem, 0);
560
476
  }
561
477
  }
562
-
563
478
  if (!this.isHighlightingCells && (this.anchorX !== cellX || this.anchorY !== cellY || ignoreStart)) {
564
479
  this.isHighlightingCells = true;
565
480
  this.disableHighlightStyle();
566
481
  } else if (cellX === this.focusX && cellY === this.focusY) {
567
482
  return;
568
483
  }
569
-
570
484
  this.focusX = cellX;
571
485
  this.focusY = cellY;
572
-
573
486
  if (this.isHighlightingCells) {
574
487
  const focusTableCellNode = lexical.$getNearestNodeFromDOMNode(cell.elem);
575
-
576
488
  if (this.gridSelection != null && this.anchorCellNodeKey != null && $isTableCellNode(focusTableCellNode)) {
577
489
  const focusNodeKey = focusTableCellNode.getKey();
578
490
  this.gridSelection = this.gridSelection.clone() || lexical.DEPRECATED_$createGridSelection();
@@ -585,7 +497,6 @@ class TableSelection {
585
497
  }
586
498
  });
587
499
  }
588
-
589
500
  setAnchorCellForSelection(cell) {
590
501
  this.isHighlightingCells = false;
591
502
  this.anchorCell = cell;
@@ -593,25 +504,21 @@ class TableSelection {
593
504
  this.anchorY = cell.y;
594
505
  this.editor.update(() => {
595
506
  const anchorTableCellNode = lexical.$getNearestNodeFromDOMNode(cell.elem);
596
-
597
507
  if ($isTableCellNode(anchorTableCellNode)) {
598
508
  const anchorNodeKey = anchorTableCellNode.getKey();
599
- this.gridSelection = lexical.DEPRECATED_$createGridSelection();
509
+ this.gridSelection = this.gridSelection != null ? this.gridSelection.clone() : lexical.DEPRECATED_$createGridSelection();
600
510
  this.anchorCellNodeKey = anchorNodeKey;
601
511
  }
602
512
  });
603
513
  }
604
-
605
514
  formatCells(type) {
606
515
  this.editor.update(() => {
607
516
  const selection = lexical.$getSelection();
608
-
609
517
  if (!lexical.DEPRECATED_$isGridSelection(selection)) {
610
518
  {
611
519
  throw Error(`Expected grid selection`);
612
520
  }
613
521
  }
614
-
615
522
  const formatSelection = lexical.$createRangeSelection();
616
523
  const anchor = formatSelection.anchor;
617
524
  const focus = formatSelection.focus;
@@ -626,35 +533,28 @@ class TableSelection {
626
533
  this.editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
627
534
  });
628
535
  }
629
-
630
536
  clearText() {
631
537
  const editor = this.editor;
632
538
  editor.update(() => {
633
539
  const tableNode = lexical.$getNodeByKey(this.tableNodeKey);
634
-
635
540
  if (!$isTableNode(tableNode)) {
636
541
  throw new Error('Expected TableNode.');
637
542
  }
638
-
639
543
  const selection = lexical.$getSelection();
640
-
641
544
  if (!lexical.DEPRECATED_$isGridSelection(selection)) {
642
545
  {
643
546
  throw Error(`Expected grid selection`);
644
547
  }
645
548
  }
646
-
647
549
  const selectedNodes = selection.getNodes().filter($isTableCellNode);
648
-
649
550
  if (selectedNodes.length === this.grid.columns * this.grid.rows) {
650
- tableNode.selectPrevious(); // Delete entire table
651
-
551
+ tableNode.selectPrevious();
552
+ // Delete entire table
652
553
  tableNode.remove();
653
554
  const rootNode = lexical.$getRoot();
654
555
  rootNode.selectStart();
655
556
  return;
656
557
  }
657
-
658
558
  selectedNodes.forEach(cellNode => {
659
559
  if (lexical.$isElementNode(cellNode)) {
660
560
  const paragraphNode = lexical.$createParagraphNode();
@@ -673,7 +573,6 @@ class TableSelection {
673
573
  editor.dispatchCommand(lexical.SELECTION_CHANGE_COMMAND, undefined);
674
574
  });
675
575
  }
676
-
677
576
  }
678
577
 
679
578
  /**
@@ -686,11 +585,9 @@ class TableSelection {
686
585
  const LEXICAL_ELEMENT_KEY = '__lexicalTableSelection';
687
586
  function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
688
587
  const rootElement = editor.getRootElement();
689
-
690
588
  if (rootElement === null) {
691
589
  throw new Error('No root element.');
692
590
  }
693
-
694
591
  const tableSelection = new TableSelection(editor, tableNode.getKey());
695
592
  const editorWindow = editor._window || window;
696
593
  attachTableSelectionToTableElement(tableElement, tableSelection);
@@ -699,52 +596,43 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
699
596
  if (event.button !== 0) {
700
597
  return;
701
598
  }
702
-
703
599
  if (!editorWindow) {
704
600
  return;
705
601
  }
706
-
707
602
  const anchorCell = getCellFromTarget(event.target);
708
-
709
603
  if (anchorCell !== null) {
710
604
  stopEvent(event);
711
605
  tableSelection.setAnchorCellForSelection(anchorCell);
712
606
  }
713
-
714
607
  const onMouseUp = () => {
715
608
  editorWindow.removeEventListener('mouseup', onMouseUp);
716
609
  editorWindow.removeEventListener('mousemove', onMouseMove);
717
610
  };
718
-
719
611
  const onMouseMove = moveEvent => {
720
612
  const focusCell = getCellFromTarget(moveEvent.target);
721
-
722
613
  if (focusCell !== null && (tableSelection.anchorX !== focusCell.x || tableSelection.anchorY !== focusCell.y)) {
723
614
  moveEvent.preventDefault();
724
615
  tableSelection.setFocusCellForSelection(focusCell);
725
616
  }
726
617
  };
727
-
728
618
  editorWindow.addEventListener('mouseup', onMouseUp);
729
619
  editorWindow.addEventListener('mousemove', onMouseMove);
730
620
  }, 0);
731
- }); // Clear selection when clicking outside of dom.
621
+ });
732
622
 
623
+ // Clear selection when clicking outside of dom.
733
624
  const mouseDownCallback = event => {
734
625
  if (event.button !== 0) {
735
626
  return;
736
627
  }
737
-
738
628
  editor.update(() => {
739
629
  const selection = lexical.$getSelection();
740
630
  const target = event.target;
741
-
742
631
  if (lexical.DEPRECATED_$isGridSelection(selection) && selection.gridKey === tableSelection.tableNodeKey && rootElement.contains(target)) {
743
632
  tableSelection.clearHighlight();
744
633
  }
745
634
  });
746
635
  };
747
-
748
636
  editorWindow.addEventListener('mousedown', mouseDownCallback);
749
637
  tableSelection.listenersToRemove.add(() => editorWindow.removeEventListener('mousedown', mouseDownCallback));
750
638
  tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_ARROW_DOWN_COMMAND, event => $handleArrowKey(editor, event, 'down', tableNode, tableSelection), lexical.COMMAND_PRIORITY_HIGH));
@@ -753,60 +641,47 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
753
641
  tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_ARROW_RIGHT_COMMAND, event => $handleArrowKey(editor, event, 'forward', tableNode, tableSelection), lexical.COMMAND_PRIORITY_HIGH));
754
642
  tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_ESCAPE_COMMAND, event => {
755
643
  const selection = lexical.$getSelection();
756
-
757
644
  if (lexical.DEPRECATED_$isGridSelection(selection)) {
758
645
  const focusCellNode = utils.$findMatchingParent(selection.focus.getNode(), $isTableCellNode);
759
-
760
646
  if ($isTableCellNode(focusCellNode)) {
761
647
  stopEvent(event);
762
648
  focusCellNode.selectEnd();
763
649
  return true;
764
650
  }
765
651
  }
766
-
767
652
  return false;
768
653
  }, lexical.COMMAND_PRIORITY_HIGH));
769
-
770
654
  const deleteTextHandler = command => () => {
771
655
  const selection = lexical.$getSelection();
772
-
773
656
  if (!$isSelectionInTable(selection, tableNode)) {
774
657
  return false;
775
658
  }
776
-
777
659
  if (lexical.DEPRECATED_$isGridSelection(selection)) {
778
660
  tableSelection.clearText();
779
661
  return true;
780
662
  } else if (lexical.$isRangeSelection(selection)) {
781
663
  const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
782
-
783
664
  if (!$isTableCellNode(tableCellNode)) {
784
665
  return false;
785
666
  }
786
-
787
667
  const anchorNode = selection.anchor.getNode();
788
668
  const focusNode = selection.focus.getNode();
789
669
  const isAnchorInside = tableNode.isParentOf(anchorNode);
790
670
  const isFocusInside = tableNode.isParentOf(focusNode);
791
671
  const selectionContainsPartialTable = isAnchorInside && !isFocusInside || isFocusInside && !isAnchorInside;
792
-
793
672
  if (selectionContainsPartialTable) {
794
673
  tableSelection.clearText();
795
674
  return true;
796
675
  }
797
-
798
676
  const nearestElementNode = utils.$findMatchingParent(selection.anchor.getNode(), n => lexical.$isElementNode(n));
799
677
  const topLevelCellElementNode = nearestElementNode && utils.$findMatchingParent(nearestElementNode, n => lexical.$isElementNode(n) && $isTableCellNode(n.getParent()));
800
-
801
678
  if (!lexical.$isElementNode(topLevelCellElementNode) || !lexical.$isElementNode(nearestElementNode)) {
802
679
  return false;
803
680
  }
804
-
805
681
  if (command === lexical.DELETE_LINE_COMMAND && topLevelCellElementNode.getPreviousSibling() === null) {
806
682
  // TODO: Fix Delete Line in Table Cells.
807
683
  return true;
808
684
  }
809
-
810
685
  if (command === lexical.DELETE_CHARACTER_COMMAND || command === lexical.DELETE_WORD_COMMAND) {
811
686
  if (selection.isCollapsed() && selection.anchor.offset === 0) {
812
687
  if (nearestElementNode !== topLevelCellElementNode) {
@@ -820,21 +695,16 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
820
695
  }
821
696
  }
822
697
  }
823
-
824
698
  return false;
825
699
  };
826
-
827
700
  [lexical.DELETE_WORD_COMMAND, lexical.DELETE_LINE_COMMAND, lexical.DELETE_CHARACTER_COMMAND].forEach(command => {
828
701
  tableSelection.listenersToRemove.add(editor.registerCommand(command, deleteTextHandler(command), lexical.COMMAND_PRIORITY_CRITICAL));
829
702
  });
830
-
831
703
  const deleteCellHandler = event => {
832
704
  const selection = lexical.$getSelection();
833
-
834
705
  if (!$isSelectionInTable(selection, tableNode)) {
835
706
  return false;
836
707
  }
837
-
838
708
  if (lexical.DEPRECATED_$isGridSelection(selection)) {
839
709
  event.preventDefault();
840
710
  event.stopPropagation();
@@ -842,101 +712,81 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
842
712
  return true;
843
713
  } else if (lexical.$isRangeSelection(selection)) {
844
714
  const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
845
-
846
715
  if (!$isTableCellNode(tableCellNode)) {
847
716
  return false;
848
717
  }
849
718
  }
850
-
851
719
  return false;
852
720
  };
853
-
854
721
  tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_BACKSPACE_COMMAND, deleteCellHandler, lexical.COMMAND_PRIORITY_CRITICAL));
855
722
  tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_DELETE_COMMAND, deleteCellHandler, lexical.COMMAND_PRIORITY_CRITICAL));
856
723
  tableSelection.listenersToRemove.add(editor.registerCommand(lexical.FORMAT_TEXT_COMMAND, payload => {
857
724
  const selection = lexical.$getSelection();
858
-
859
725
  if (!$isSelectionInTable(selection, tableNode)) {
860
726
  return false;
861
727
  }
862
-
863
728
  if (lexical.DEPRECATED_$isGridSelection(selection)) {
864
729
  tableSelection.formatCells(payload);
865
730
  return true;
866
731
  } else if (lexical.$isRangeSelection(selection)) {
867
732
  const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
868
-
869
733
  if (!$isTableCellNode(tableCellNode)) {
870
734
  return false;
871
735
  }
872
736
  }
873
-
874
737
  return false;
875
738
  }, lexical.COMMAND_PRIORITY_CRITICAL));
876
739
  tableSelection.listenersToRemove.add(editor.registerCommand(lexical.CONTROLLED_TEXT_INSERTION_COMMAND, payload => {
877
740
  const selection = lexical.$getSelection();
878
-
879
741
  if (!$isSelectionInTable(selection, tableNode)) {
880
742
  return false;
881
743
  }
882
-
883
744
  if (lexical.DEPRECATED_$isGridSelection(selection)) {
884
745
  tableSelection.clearHighlight();
885
746
  return false;
886
747
  } else if (lexical.$isRangeSelection(selection)) {
887
748
  const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
888
-
889
749
  if (!$isTableCellNode(tableCellNode)) {
890
750
  return false;
891
751
  }
892
752
  }
893
-
894
753
  return false;
895
754
  }, lexical.COMMAND_PRIORITY_CRITICAL));
896
-
897
755
  if (hasTabHandler) {
898
756
  tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_TAB_COMMAND, event => {
899
757
  const selection = lexical.$getSelection();
900
-
901
758
  if (!lexical.$isRangeSelection(selection) || !selection.isCollapsed() || !$isSelectionInTable(selection, tableNode)) {
902
759
  return false;
903
760
  }
904
-
905
761
  const tableCellNode = $findCellNode(selection.anchor.getNode());
906
-
907
762
  if (tableCellNode === null) {
908
763
  return false;
909
764
  }
910
-
911
765
  stopEvent(event);
912
766
  const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
913
767
  selectGridNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, !event.shiftKey ? 'forward' : 'backward');
914
768
  return true;
915
769
  }, lexical.COMMAND_PRIORITY_CRITICAL));
916
770
  }
917
-
918
771
  tableSelection.listenersToRemove.add(editor.registerCommand(lexical.FOCUS_COMMAND, payload => {
919
772
  return tableNode.isSelected();
920
773
  }, lexical.COMMAND_PRIORITY_HIGH));
921
-
922
774
  function getCellFromCellNode(tableCellNode) {
923
775
  const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
924
776
  return tableNode.getCellFromCordsOrThrow(currentCords.x, currentCords.y, tableSelection.grid);
925
777
  }
926
-
927
778
  tableSelection.listenersToRemove.add(editor.registerCommand(lexical.SELECTION_CHANGE_COMMAND, () => {
928
779
  const selection = lexical.$getSelection();
929
780
  const prevSelection = lexical.$getPreviousSelection();
930
-
931
781
  if (lexical.$isRangeSelection(selection)) {
932
782
  const {
933
783
  anchor,
934
784
  focus
935
785
  } = selection;
936
786
  const anchorNode = anchor.getNode();
937
- const focusNode = focus.getNode(); // Using explicit comparison with table node to ensure it's not a nested table
787
+ const focusNode = focus.getNode();
788
+ // Using explicit comparison with table node to ensure it's not a nested table
938
789
  // as in that case we'll leave selection resolving to that table
939
-
940
790
  const anchorCellNode = $findCellNode(anchorNode);
941
791
  const focusCellNode = $findCellNode(focusNode);
942
792
  const isAnchorInside = anchorCellNode && tableNode.is($findTableNode(anchorCellNode));
@@ -944,7 +794,6 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
944
794
  const isPartialyWithinTable = isAnchorInside !== isFocusInside;
945
795
  const isWithinTable = isAnchorInside && isFocusInside;
946
796
  const isBackward = selection.isBackward();
947
-
948
797
  if (isPartialyWithinTable) {
949
798
  const newSelection = selection.clone();
950
799
  newSelection.focus.set(tableNode.getKey(), isBackward ? 0 : tableNode.getChildrenSize(), 'element');
@@ -959,23 +808,19 @@ function applyTableHandlers(tableNode, tableElement, editor, hasTabHandler) {
959
808
  }
960
809
  }
961
810
  }
962
-
963
811
  if (selection && !selection.is(prevSelection) && (lexical.DEPRECATED_$isGridSelection(selection) || lexical.DEPRECATED_$isGridSelection(prevSelection)) && tableSelection.gridSelection && !tableSelection.gridSelection.is(prevSelection)) {
964
812
  if (lexical.DEPRECATED_$isGridSelection(selection) && selection.gridKey === tableSelection.tableNodeKey) {
965
813
  tableSelection.updateTableGridSelection(selection);
966
814
  } else if (!lexical.DEPRECATED_$isGridSelection(selection) && lexical.DEPRECATED_$isGridSelection(prevSelection) && prevSelection.gridKey === tableSelection.tableNodeKey) {
967
815
  tableSelection.updateTableGridSelection(null);
968
816
  }
969
-
970
817
  return false;
971
818
  }
972
-
973
819
  if (tableSelection.hasHijackedSelectionStyles && !tableNode.isSelected()) {
974
820
  $removeHighlightStyleToTable(editor, tableSelection);
975
821
  } else if (!tableSelection.hasHijackedSelectionStyles && tableNode.isSelected()) {
976
822
  $addHighlightStyleToTable(editor, tableSelection);
977
823
  }
978
-
979
824
  return false;
980
825
  }, lexical.COMMAND_PRIORITY_CRITICAL));
981
826
  return tableSelection;
@@ -988,24 +833,18 @@ function getTableSelectionFromTableElement(tableElement) {
988
833
  }
989
834
  function getCellFromTarget(node) {
990
835
  let currentNode = node;
991
-
992
836
  while (currentNode != null) {
993
837
  const nodeName = currentNode.nodeName;
994
-
995
838
  if (nodeName === 'TD' || nodeName === 'TH') {
996
839
  // @ts-expect-error: internal field
997
840
  const cell = currentNode._cell;
998
-
999
841
  if (cell === undefined) {
1000
842
  return null;
1001
843
  }
1002
-
1003
844
  return cell;
1004
845
  }
1005
-
1006
846
  currentNode = currentNode.parentNode;
1007
847
  }
1008
-
1009
848
  return null;
1010
849
  }
1011
850
  function getTableGrid(tableElement) {
@@ -1019,10 +858,8 @@ function getTableGrid(tableElement) {
1019
858
  let x = 0;
1020
859
  let y = 0;
1021
860
  cells.length = 0;
1022
-
1023
861
  while (currentNode != null) {
1024
862
  const nodeMame = currentNode.nodeName;
1025
-
1026
863
  if (nodeMame === 'TD' || nodeMame === 'TH') {
1027
864
  const elem = currentNode;
1028
865
  const cell = {
@@ -1031,48 +868,39 @@ function getTableGrid(tableElement) {
1031
868
  highlighted: false,
1032
869
  x,
1033
870
  y
1034
- }; // @ts-expect-error: internal field
871
+ };
1035
872
 
873
+ // @ts-expect-error: internal field
1036
874
  currentNode._cell = cell;
1037
875
  let row = cells[y];
1038
-
1039
876
  if (row === undefined) {
1040
877
  row = cells[y] = [];
1041
878
  }
1042
-
1043
879
  row[x] = cell;
1044
880
  } else {
1045
881
  const child = currentNode.firstChild;
1046
-
1047
882
  if (child != null) {
1048
883
  currentNode = child;
1049
884
  continue;
1050
885
  }
1051
886
  }
1052
-
1053
887
  const sibling = currentNode.nextSibling;
1054
-
1055
888
  if (sibling != null) {
1056
889
  x++;
1057
890
  currentNode = sibling;
1058
891
  continue;
1059
892
  }
1060
-
1061
893
  const parent = currentNode.parentNode;
1062
-
1063
894
  if (parent != null) {
1064
895
  const parentSibling = parent.nextSibling;
1065
-
1066
896
  if (parentSibling == null) {
1067
897
  break;
1068
898
  }
1069
-
1070
899
  y++;
1071
900
  x = 0;
1072
901
  currentNode = parentSibling;
1073
902
  }
1074
903
  }
1075
-
1076
904
  grid.columns = x + 1;
1077
905
  grid.rows = y + 1;
1078
906
  return grid;
@@ -1081,14 +909,12 @@ function $updateDOMForSelection(editor, grid, selection) {
1081
909
  const selectedCellNodes = new Set(selection ? selection.getNodes() : []);
1082
910
  $forEachGridCell(grid, (cell, lexicalNode) => {
1083
911
  const elem = cell.elem;
1084
-
1085
912
  if (selectedCellNodes.has(lexicalNode)) {
1086
913
  cell.highlighted = true;
1087
914
  $addHighlightToDOM(editor, cell);
1088
915
  } else {
1089
916
  cell.highlighted = false;
1090
917
  $removeHighlightFromDOM(editor, cell);
1091
-
1092
918
  if (!elem.getAttribute('style')) {
1093
919
  elem.removeAttribute('style');
1094
920
  }
@@ -1099,23 +925,17 @@ function $forEachGridCell(grid, cb) {
1099
925
  const {
1100
926
  cells
1101
927
  } = grid;
1102
-
1103
928
  for (let y = 0; y < cells.length; y++) {
1104
929
  const row = cells[y];
1105
-
1106
930
  if (!row) {
1107
931
  continue;
1108
932
  }
1109
-
1110
933
  for (let x = 0; x < row.length; x++) {
1111
934
  const cell = row[x];
1112
-
1113
935
  if (!cell) {
1114
936
  continue;
1115
937
  }
1116
-
1117
938
  const lexicalNode = lexical.$getNearestNodeFromDOMNode(cell.elem);
1118
-
1119
939
  if (lexicalNode !== null) {
1120
940
  cb(cell, lexicalNode, {
1121
941
  x,
@@ -1138,16 +958,13 @@ function $removeHighlightStyleToTable(editor, tableSelection) {
1138
958
  const elem = cell.elem;
1139
959
  cell.highlighted = false;
1140
960
  $removeHighlightFromDOM(editor, cell);
1141
-
1142
961
  if (!elem.getAttribute('style')) {
1143
962
  elem.removeAttribute('style');
1144
963
  }
1145
964
  });
1146
965
  }
1147
-
1148
966
  const selectGridNodeInDirection = (tableSelection, tableNode, x, y, direction) => {
1149
967
  const isForward = direction === 'forward';
1150
-
1151
968
  switch (direction) {
1152
969
  case 'backward':
1153
970
  case 'forward':
@@ -1162,44 +979,34 @@ const selectGridNodeInDirection = (tableSelection, tableNode, x, y, direction) =
1162
979
  tableNode.selectNext();
1163
980
  }
1164
981
  }
1165
-
1166
982
  return true;
1167
-
1168
983
  case 'up':
1169
984
  if (y !== 0) {
1170
985
  selectTableCellNode(tableNode.getCellNodeFromCordsOrThrow(x, y - 1, tableSelection.grid), false);
1171
986
  } else {
1172
987
  tableNode.selectPrevious();
1173
988
  }
1174
-
1175
989
  return true;
1176
-
1177
990
  case 'down':
1178
991
  if (y !== tableSelection.grid.rows - 1) {
1179
992
  selectTableCellNode(tableNode.getCellNodeFromCordsOrThrow(x, y + 1, tableSelection.grid), true);
1180
993
  } else {
1181
994
  tableNode.selectNext();
1182
995
  }
1183
-
1184
996
  return true;
1185
-
1186
997
  default:
1187
998
  return false;
1188
999
  }
1189
1000
  };
1190
-
1191
1001
  const adjustFocusNodeInDirection = (tableSelection, tableNode, x, y, direction) => {
1192
1002
  const isForward = direction === 'forward';
1193
-
1194
1003
  switch (direction) {
1195
1004
  case 'backward':
1196
1005
  case 'forward':
1197
1006
  if (x !== (isForward ? tableSelection.grid.columns - 1 : 0)) {
1198
1007
  tableSelection.setFocusCellForSelection(tableNode.getCellFromCordsOrThrow(x + (isForward ? 1 : -1), y, tableSelection.grid));
1199
1008
  }
1200
-
1201
1009
  return true;
1202
-
1203
1010
  case 'up':
1204
1011
  if (y !== 0) {
1205
1012
  tableSelection.setFocusCellForSelection(tableNode.getCellFromCordsOrThrow(x, y - 1, tableSelection.grid));
@@ -1207,7 +1014,6 @@ const adjustFocusNodeInDirection = (tableSelection, tableNode, x, y, direction)
1207
1014
  } else {
1208
1015
  return false;
1209
1016
  }
1210
-
1211
1017
  case 'down':
1212
1018
  if (y !== tableSelection.grid.rows - 1) {
1213
1019
  tableSelection.setFocusCellForSelection(tableNode.getCellFromCordsOrThrow(x, y + 1, tableSelection.grid));
@@ -1215,22 +1021,18 @@ const adjustFocusNodeInDirection = (tableSelection, tableNode, x, y, direction)
1215
1021
  } else {
1216
1022
  return false;
1217
1023
  }
1218
-
1219
1024
  default:
1220
1025
  return false;
1221
1026
  }
1222
1027
  };
1223
-
1224
1028
  function $isSelectionInTable(selection, tableNode) {
1225
1029
  if (lexical.$isRangeSelection(selection) || lexical.DEPRECATED_$isGridSelection(selection)) {
1226
1030
  const isAnchorInside = tableNode.isParentOf(selection.anchor.getNode());
1227
1031
  const isFocusInside = tableNode.isParentOf(selection.focus.getNode());
1228
1032
  return isAnchorInside && isFocusInside;
1229
1033
  }
1230
-
1231
1034
  return false;
1232
1035
  }
1233
-
1234
1036
  function selectTableCellNode(tableCell, fromStart) {
1235
1037
  if (fromStart) {
1236
1038
  tableCell.selectStart();
@@ -1238,122 +1040,99 @@ function selectTableCellNode(tableCell, fromStart) {
1238
1040
  tableCell.selectEnd();
1239
1041
  }
1240
1042
  }
1241
-
1242
1043
  const BROWSER_BLUE_RGB = '172,206,247';
1243
-
1244
1044
  function $addHighlightToDOM(editor, cell) {
1245
1045
  const element = cell.elem;
1246
1046
  const node = lexical.$getNearestNodeFromDOMNode(element);
1247
-
1248
1047
  if (!$isTableCellNode(node)) {
1249
1048
  throw Error(`Expected to find LexicalNode from Table Cell DOMNode`);
1250
1049
  }
1251
-
1252
1050
  const backgroundColor = node.getBackgroundColor();
1253
-
1254
1051
  if (backgroundColor === null) {
1255
1052
  element.style.setProperty('background-color', `rgb(${BROWSER_BLUE_RGB})`);
1256
1053
  } else {
1257
1054
  element.style.setProperty('background-image', `linear-gradient(to right, rgba(${BROWSER_BLUE_RGB},0.85), rgba(${BROWSER_BLUE_RGB},0.85))`);
1258
1055
  }
1259
-
1260
1056
  element.style.setProperty('caret-color', 'transparent');
1261
1057
  }
1262
-
1263
1058
  function $removeHighlightFromDOM(editor, cell) {
1264
1059
  const element = cell.elem;
1265
1060
  const node = lexical.$getNearestNodeFromDOMNode(element);
1266
-
1267
1061
  if (!$isTableCellNode(node)) {
1268
1062
  throw Error(`Expected to find LexicalNode from Table Cell DOMNode`);
1269
1063
  }
1270
-
1271
1064
  const backgroundColor = node.getBackgroundColor();
1272
-
1273
1065
  if (backgroundColor === null) {
1274
1066
  element.style.removeProperty('background-color');
1275
1067
  }
1276
-
1277
1068
  element.style.removeProperty('background-image');
1278
1069
  element.style.removeProperty('caret-color');
1279
1070
  }
1280
-
1281
1071
  function $findCellNode(node) {
1282
1072
  const cellNode = utils.$findMatchingParent(node, $isTableCellNode);
1283
1073
  return $isTableCellNode(cellNode) ? cellNode : null;
1284
1074
  }
1285
-
1286
1075
  function $findTableNode(node) {
1287
1076
  const tableNode = utils.$findMatchingParent(node, $isTableNode);
1288
1077
  return $isTableNode(tableNode) ? tableNode : null;
1289
1078
  }
1290
-
1291
1079
  function $handleArrowKey(editor, event, direction, tableNode, tableSelection) {
1292
1080
  const selection = lexical.$getSelection();
1293
-
1294
1081
  if (!$isSelectionInTable(selection, tableNode)) {
1295
1082
  return false;
1296
1083
  }
1297
-
1298
1084
  if (lexical.$isRangeSelection(selection) && selection.isCollapsed()) {
1299
1085
  // Horizontal move between cels seem to work well without interruption
1300
1086
  // so just exit early, and handle vertical moves
1301
1087
  if (direction === 'backward' || direction === 'forward') {
1302
1088
  return false;
1303
1089
  }
1304
-
1305
1090
  const {
1306
1091
  anchor,
1307
1092
  focus
1308
1093
  } = selection;
1309
1094
  const anchorCellNode = utils.$findMatchingParent(anchor.getNode(), $isTableCellNode);
1310
1095
  const focusCellNode = utils.$findMatchingParent(focus.getNode(), $isTableCellNode);
1311
-
1312
1096
  if (!$isTableCellNode(anchorCellNode) || !anchorCellNode.is(focusCellNode)) {
1313
1097
  return false;
1314
1098
  }
1315
-
1099
+ const anchorCellTable = $findTableNode(anchorCellNode);
1100
+ if (anchorCellTable !== tableNode && anchorCellTable != null) {
1101
+ const anchorCellTableElement = editor.getElementByKey(anchorCellTable.getKey());
1102
+ if (anchorCellTableElement != null) {
1103
+ tableSelection.grid = getTableGrid(anchorCellTableElement);
1104
+ return $handleArrowKey(editor, event, direction, anchorCellTable, tableSelection);
1105
+ }
1106
+ }
1316
1107
  const anchorCellDom = editor.getElementByKey(anchorCellNode.__key);
1317
1108
  const anchorDOM = editor.getElementByKey(anchor.key);
1318
-
1319
1109
  if (anchorDOM == null || anchorCellDom == null) {
1320
1110
  return false;
1321
1111
  }
1322
-
1323
1112
  let edgeSelectionRect;
1324
-
1325
1113
  if (anchor.type === 'element') {
1326
1114
  edgeSelectionRect = anchorDOM.getBoundingClientRect();
1327
1115
  } else {
1328
1116
  const domSelection = window.getSelection();
1329
-
1330
1117
  if (domSelection === null || domSelection.rangeCount === 0) {
1331
1118
  return false;
1332
1119
  }
1333
-
1334
1120
  const range = domSelection.getRangeAt(0);
1335
1121
  edgeSelectionRect = range.getBoundingClientRect();
1336
1122
  }
1337
-
1338
1123
  const edgeChild = direction === 'up' ? anchorCellNode.getFirstChild() : anchorCellNode.getLastChild();
1339
-
1340
1124
  if (edgeChild == null) {
1341
1125
  return false;
1342
1126
  }
1343
-
1344
1127
  const edgeChildDOM = editor.getElementByKey(edgeChild.__key);
1345
-
1346
1128
  if (edgeChildDOM == null) {
1347
1129
  return false;
1348
1130
  }
1349
-
1350
1131
  const edgeRect = edgeChildDOM.getBoundingClientRect();
1351
1132
  const isExiting = direction === 'up' ? edgeRect.top > edgeSelectionRect.top - edgeSelectionRect.height : edgeSelectionRect.bottom + edgeSelectionRect.height > edgeRect.bottom;
1352
-
1353
1133
  if (isExiting) {
1354
1134
  stopEvent(event);
1355
1135
  const cords = tableNode.getCordsFromCellNode(anchorCellNode, tableSelection.grid);
1356
-
1357
1136
  if (event.shiftKey) {
1358
1137
  const cell = tableNode.getCellFromCordsOrThrow(cords.x, cords.y, tableSelection.grid);
1359
1138
  tableSelection.setAnchorCellForSelection(cell);
@@ -1361,7 +1140,6 @@ function $handleArrowKey(editor, event, direction, tableNode, tableSelection) {
1361
1140
  } else {
1362
1141
  return selectGridNodeInDirection(tableSelection, tableNode, cords.x, cords.y, direction);
1363
1142
  }
1364
-
1365
1143
  return true;
1366
1144
  }
1367
1145
  } else if (lexical.DEPRECATED_$isGridSelection(selection)) {
@@ -1371,26 +1149,27 @@ function $handleArrowKey(editor, event, direction, tableNode, tableSelection) {
1371
1149
  } = selection;
1372
1150
  const anchorCellNode = utils.$findMatchingParent(anchor.getNode(), $isTableCellNode);
1373
1151
  const focusCellNode = utils.$findMatchingParent(focus.getNode(), $isTableCellNode);
1374
-
1375
- if (!$isTableCellNode(anchorCellNode) || !$isTableCellNode(focusCellNode)) {
1152
+ const [tableNodeFromSelection] = selection.getNodes();
1153
+ const tableElement = editor.getElementByKey(tableNodeFromSelection.getKey());
1154
+ if (!$isTableCellNode(anchorCellNode) || !$isTableCellNode(focusCellNode) || !$isTableNode(tableNodeFromSelection) || tableElement == null) {
1376
1155
  return false;
1377
1156
  }
1378
-
1157
+ tableSelection.updateTableGridSelection(selection);
1158
+ const grid = getTableGrid(tableElement);
1159
+ const cordsAnchor = tableNode.getCordsFromCellNode(anchorCellNode, grid);
1160
+ const anchorCell = tableNode.getCellFromCordsOrThrow(cordsAnchor.x, cordsAnchor.y, grid);
1161
+ tableSelection.setAnchorCellForSelection(anchorCell);
1379
1162
  stopEvent(event);
1380
-
1381
1163
  if (event.shiftKey) {
1382
- const cords = tableNode.getCordsFromCellNode(focusCellNode, tableSelection.grid);
1383
- return adjustFocusNodeInDirection(tableSelection, tableNode, cords.x, cords.y, direction);
1164
+ const cords = tableNode.getCordsFromCellNode(focusCellNode, grid);
1165
+ return adjustFocusNodeInDirection(tableSelection, tableNodeFromSelection, cords.x, cords.y, direction);
1384
1166
  } else {
1385
1167
  focusCellNode.selectEnd();
1386
1168
  }
1387
-
1388
1169
  return true;
1389
1170
  }
1390
-
1391
1171
  return false;
1392
1172
  }
1393
-
1394
1173
  function stopEvent(event) {
1395
1174
  event.preventDefault();
1396
1175
  event.stopImmediatePropagation();
@@ -1404,18 +1183,16 @@ function stopEvent(event) {
1404
1183
  * LICENSE file in the root directory of this source tree.
1405
1184
  *
1406
1185
  */
1407
-
1408
1186
  /** @noInheritDoc */
1409
1187
  class TableNode extends lexical.DEPRECATED_GridNode {
1410
1188
  /** @internal */
1189
+
1411
1190
  static getType() {
1412
1191
  return 'table';
1413
1192
  }
1414
-
1415
1193
  static clone(node) {
1416
1194
  return new TableNode(node.__key);
1417
1195
  }
1418
-
1419
1196
  static importDOM() {
1420
1197
  return {
1421
1198
  table: _node => ({
@@ -1424,90 +1201,74 @@ class TableNode extends lexical.DEPRECATED_GridNode {
1424
1201
  })
1425
1202
  };
1426
1203
  }
1427
-
1428
1204
  static importJSON(_serializedNode) {
1429
1205
  return $createTableNode();
1430
1206
  }
1431
-
1432
1207
  constructor(key) {
1433
1208
  super(key);
1434
1209
  }
1435
-
1436
1210
  exportJSON() {
1437
- return { ...super.exportJSON(),
1211
+ return {
1212
+ ...super.exportJSON(),
1438
1213
  type: 'table',
1439
1214
  version: 1
1440
1215
  };
1441
1216
  }
1442
-
1443
1217
  createDOM(config, editor) {
1444
1218
  const tableElement = document.createElement('table');
1445
1219
  utils.addClassNamesToElement(tableElement, config.theme.table);
1446
1220
  return tableElement;
1447
1221
  }
1448
-
1449
1222
  updateDOM() {
1450
1223
  return false;
1451
1224
  }
1452
-
1453
1225
  exportDOM(editor) {
1454
- return { ...super.exportDOM(editor),
1226
+ return {
1227
+ ...super.exportDOM(editor),
1455
1228
  after: tableElement => {
1456
1229
  if (tableElement) {
1457
1230
  const newElement = tableElement.cloneNode();
1458
1231
  const colGroup = document.createElement('colgroup');
1459
1232
  const tBody = document.createElement('tbody');
1460
-
1461
1233
  if (utils.isHTMLElement(tableElement)) {
1462
1234
  tBody.append(...tableElement.children);
1463
1235
  }
1464
-
1465
1236
  const firstRow = this.getFirstChildOrThrow();
1466
-
1467
1237
  if (!$isTableRowNode(firstRow)) {
1468
1238
  throw new Error('Expected to find row node.');
1469
1239
  }
1470
-
1471
1240
  const colCount = firstRow.getChildrenSize();
1472
-
1473
1241
  for (let i = 0; i < colCount; i++) {
1474
1242
  const col = document.createElement('col');
1475
1243
  colGroup.append(col);
1476
1244
  }
1477
-
1478
1245
  newElement.replaceChildren(colGroup, tBody);
1479
1246
  return newElement;
1480
1247
  }
1481
1248
  }
1482
1249
  };
1483
- } // TODO 0.10 deprecate
1484
-
1250
+ }
1485
1251
 
1252
+ // TODO 0.10 deprecate
1486
1253
  canExtractContents() {
1487
1254
  return false;
1488
1255
  }
1489
-
1490
1256
  canBeEmpty() {
1491
1257
  return false;
1492
1258
  }
1493
-
1494
1259
  isShadowRoot() {
1495
1260
  return true;
1496
1261
  }
1497
-
1498
1262
  getCordsFromCellNode(tableCellNode, grid) {
1499
1263
  const {
1500
1264
  rows,
1501
1265
  cells
1502
1266
  } = grid;
1503
-
1504
1267
  for (let y = 0; y < rows; y++) {
1505
1268
  const row = cells[y];
1506
-
1507
1269
  if (row == null) {
1508
1270
  continue;
1509
1271
  }
1510
-
1511
1272
  const x = row.findIndex(cell => {
1512
1273
  if (!cell) return;
1513
1274
  const {
@@ -1516,7 +1277,6 @@ class TableNode extends lexical.DEPRECATED_GridNode {
1516
1277
  const cellNode = lexical.$getNearestNodeFromDOMNode(elem);
1517
1278
  return cellNode === tableCellNode;
1518
1279
  });
1519
-
1520
1280
  if (x !== -1) {
1521
1281
  return {
1522
1282
  x,
@@ -1524,81 +1284,59 @@ class TableNode extends lexical.DEPRECATED_GridNode {
1524
1284
  };
1525
1285
  }
1526
1286
  }
1527
-
1528
1287
  throw new Error('Cell not found in table.');
1529
1288
  }
1530
-
1531
1289
  getCellFromCords(x, y, grid) {
1532
1290
  const {
1533
1291
  cells
1534
1292
  } = grid;
1535
1293
  const row = cells[y];
1536
-
1537
1294
  if (row == null) {
1538
1295
  return null;
1539
1296
  }
1540
-
1541
1297
  const cell = row[x];
1542
-
1543
1298
  if (cell == null) {
1544
1299
  return null;
1545
1300
  }
1546
-
1547
1301
  return cell;
1548
1302
  }
1549
-
1550
1303
  getCellFromCordsOrThrow(x, y, grid) {
1551
1304
  const cell = this.getCellFromCords(x, y, grid);
1552
-
1553
1305
  if (!cell) {
1554
1306
  throw new Error('Cell not found at cords.');
1555
1307
  }
1556
-
1557
1308
  return cell;
1558
1309
  }
1559
-
1560
1310
  getCellNodeFromCords(x, y, grid) {
1561
1311
  const cell = this.getCellFromCords(x, y, grid);
1562
-
1563
1312
  if (cell == null) {
1564
1313
  return null;
1565
1314
  }
1566
-
1567
1315
  const node = lexical.$getNearestNodeFromDOMNode(cell.elem);
1568
-
1569
1316
  if ($isTableCellNode(node)) {
1570
1317
  return node;
1571
1318
  }
1572
-
1573
1319
  return null;
1574
1320
  }
1575
-
1576
1321
  getCellNodeFromCordsOrThrow(x, y, grid) {
1577
1322
  const node = this.getCellNodeFromCords(x, y, grid);
1578
-
1579
1323
  if (!node) {
1580
1324
  throw new Error('Node at cords not TableCellNode.');
1581
1325
  }
1582
-
1583
1326
  return node;
1584
1327
  }
1585
-
1586
1328
  canSelectBefore() {
1587
1329
  return true;
1588
1330
  }
1589
-
1590
1331
  canIndent() {
1591
1332
  return false;
1592
1333
  }
1593
-
1594
1334
  }
1595
1335
  function $getElementGridForTableNode(editor, tableNode) {
1596
1336
  const tableElement = editor.getElementByKey(tableNode.getKey());
1597
-
1598
1337
  if (tableElement == null) {
1599
1338
  throw new Error('Table Element Not Found');
1600
1339
  }
1601
-
1602
1340
  return getTableGrid(tableElement);
1603
1341
  }
1604
1342
  function convertTableElement(_domNode) {
@@ -1622,13 +1360,10 @@ function $isTableNode(node) {
1622
1360
  */
1623
1361
  function $createTableNodeWithDimensions(rowCount, columnCount, includeHeaders = true) {
1624
1362
  const tableNode = $createTableNode();
1625
-
1626
1363
  for (let iRow = 0; iRow < rowCount; iRow++) {
1627
1364
  const tableRowNode = $createTableRowNode();
1628
-
1629
1365
  for (let iColumn = 0; iColumn < columnCount; iColumn++) {
1630
1366
  let headerState = TableCellHeaderStates.NO_STATUS;
1631
-
1632
1367
  if (typeof includeHeaders === 'object') {
1633
1368
  if (iRow === 0 && includeHeaders.rows) headerState |= TableCellHeaderStates.ROW;
1634
1369
  if (iColumn === 0 && includeHeaders.columns) headerState |= TableCellHeaderStates.COLUMN;
@@ -1636,44 +1371,35 @@ function $createTableNodeWithDimensions(rowCount, columnCount, includeHeaders =
1636
1371
  if (iRow === 0) headerState |= TableCellHeaderStates.ROW;
1637
1372
  if (iColumn === 0) headerState |= TableCellHeaderStates.COLUMN;
1638
1373
  }
1639
-
1640
1374
  const tableCellNode = $createTableCellNode(headerState);
1641
1375
  const paragraphNode = lexical.$createParagraphNode();
1642
1376
  paragraphNode.append(lexical.$createTextNode());
1643
1377
  tableCellNode.append(paragraphNode);
1644
1378
  tableRowNode.append(tableCellNode);
1645
1379
  }
1646
-
1647
1380
  tableNode.append(tableRowNode);
1648
1381
  }
1649
-
1650
1382
  return tableNode;
1651
1383
  }
1652
1384
  function $getTableCellNodeFromLexicalNode(startingNode) {
1653
1385
  const node = utils.$findMatchingParent(startingNode, n => $isTableCellNode(n));
1654
-
1655
1386
  if ($isTableCellNode(node)) {
1656
1387
  return node;
1657
1388
  }
1658
-
1659
1389
  return null;
1660
1390
  }
1661
1391
  function $getTableRowNodeFromTableCellNodeOrThrow(startingNode) {
1662
1392
  const node = utils.$findMatchingParent(startingNode, n => $isTableRowNode(n));
1663
-
1664
1393
  if ($isTableRowNode(node)) {
1665
1394
  return node;
1666
1395
  }
1667
-
1668
1396
  throw new Error('Expected table cell to be inside of table row.');
1669
1397
  }
1670
1398
  function $getTableNodeFromLexicalNodeOrThrow(startingNode) {
1671
1399
  const node = utils.$findMatchingParent(startingNode, n => $isTableNode(n));
1672
-
1673
1400
  if ($isTableNode(node)) {
1674
1401
  return node;
1675
1402
  }
1676
-
1677
1403
  throw new Error('Expected table cell to be inside of table.');
1678
1404
  }
1679
1405
  function $getTableRowIndexFromTableCellNode(tableCellNode) {
@@ -1700,53 +1426,42 @@ function $getTableCellSiblingsFromTableCellNode(tableCellNode, grid) {
1700
1426
  }
1701
1427
  function $removeTableRowAtIndex(tableNode, indexToDelete) {
1702
1428
  const tableRows = tableNode.getChildren();
1703
-
1704
1429
  if (indexToDelete >= tableRows.length || indexToDelete < 0) {
1705
1430
  throw new Error('Expected table cell to be inside of table row.');
1706
1431
  }
1707
-
1708
1432
  const targetRowNode = tableRows[indexToDelete];
1709
1433
  targetRowNode.remove();
1710
1434
  return tableNode;
1711
1435
  }
1712
1436
  function $insertTableRow(tableNode, targetIndex, shouldInsertAfter = true, rowCount, grid) {
1713
1437
  const tableRows = tableNode.getChildren();
1714
-
1715
1438
  if (targetIndex >= tableRows.length || targetIndex < 0) {
1716
1439
  throw new Error('Table row target index out of range');
1717
1440
  }
1718
-
1719
1441
  const targetRowNode = tableRows[targetIndex];
1720
-
1721
1442
  if ($isTableRowNode(targetRowNode)) {
1722
1443
  for (let r = 0; r < rowCount; r++) {
1723
1444
  const tableRowCells = targetRowNode.getChildren();
1724
1445
  const tableColumnCount = tableRowCells.length;
1725
1446
  const newTableRowNode = $createTableRowNode();
1726
-
1727
1447
  for (let c = 0; c < tableColumnCount; c++) {
1728
1448
  const tableCellFromTargetRow = tableRowCells[c];
1729
-
1730
1449
  if (!$isTableCellNode(tableCellFromTargetRow)) {
1731
1450
  throw Error(`Expected table cell`);
1732
1451
  }
1733
-
1734
1452
  const {
1735
1453
  above,
1736
1454
  below
1737
1455
  } = $getTableCellSiblingsFromTableCellNode(tableCellFromTargetRow, grid);
1738
1456
  let headerState = TableCellHeaderStates.NO_STATUS;
1739
1457
  const width = above && above.getWidth() || below && below.getWidth() || undefined;
1740
-
1741
1458
  if (above && above.hasHeaderState(TableCellHeaderStates.COLUMN) || below && below.hasHeaderState(TableCellHeaderStates.COLUMN)) {
1742
1459
  headerState |= TableCellHeaderStates.COLUMN;
1743
1460
  }
1744
-
1745
1461
  const tableCellNode = $createTableCellNode(headerState, 1, width);
1746
1462
  tableCellNode.append(lexical.$createParagraphNode());
1747
1463
  newTableRowNode.append(tableCellNode);
1748
1464
  }
1749
-
1750
1465
  if (shouldInsertAfter) {
1751
1466
  targetRowNode.insertAfter(newTableRowNode);
1752
1467
  } else {
@@ -1756,16 +1471,13 @@ function $insertTableRow(tableNode, targetIndex, shouldInsertAfter = true, rowCo
1756
1471
  } else {
1757
1472
  throw new Error('Row before insertion index does not exist.');
1758
1473
  }
1759
-
1760
1474
  return tableNode;
1761
1475
  }
1762
1476
  function $insertTableRow__EXPERIMENTAL(insertAfter = true) {
1763
1477
  const selection = lexical.$getSelection();
1764
-
1765
1478
  if (!(lexical.$isRangeSelection(selection) || lexical.DEPRECATED_$isGridSelection(selection))) {
1766
1479
  throw Error(`Expected a RangeSelection or GridSelection`);
1767
1480
  }
1768
-
1769
1481
  const focus = selection.focus.getNode();
1770
1482
  const [focusCell,, grid] = lexical.DEPRECATED_$getNodeTriplet(focus);
1771
1483
  const [gridMap, focusCellMap] = lexical.DEPRECATED_$computeGridMap(grid, focusCell, focusCell);
@@ -1773,109 +1485,96 @@ function $insertTableRow__EXPERIMENTAL(insertAfter = true) {
1773
1485
  const {
1774
1486
  startRow: focusStartRow
1775
1487
  } = focusCellMap;
1776
-
1777
1488
  if (insertAfter) {
1778
1489
  const focusEndRow = focusStartRow + focusCell.__rowSpan - 1;
1779
1490
  const focusEndRowMap = gridMap[focusEndRow];
1780
1491
  const newRow = $createTableRowNode();
1781
-
1782
1492
  for (let i = 0; i < columnCount; i++) {
1783
1493
  const {
1784
1494
  cell,
1785
1495
  startRow
1786
1496
  } = focusEndRowMap[i];
1787
-
1788
1497
  if (startRow + cell.__rowSpan - 1 <= focusEndRow) {
1789
1498
  newRow.append($createTableCellNode(TableCellHeaderStates.NO_STATUS));
1790
1499
  } else {
1791
1500
  cell.setRowSpan(cell.__rowSpan + 1);
1792
1501
  }
1793
1502
  }
1794
-
1795
1503
  const focusEndRowNode = grid.getChildAtIndex(focusEndRow);
1796
-
1797
1504
  if (!lexical.DEPRECATED_$isGridRowNode(focusEndRowNode)) {
1798
1505
  throw Error(`focusEndRow is not a GridRowNode`);
1799
1506
  }
1800
-
1801
1507
  focusEndRowNode.insertAfter(newRow);
1802
1508
  } else {
1803
1509
  const focusStartRowMap = gridMap[focusStartRow];
1804
1510
  const newRow = $createTableRowNode();
1805
-
1806
1511
  for (let i = 0; i < columnCount; i++) {
1807
1512
  const {
1808
1513
  cell,
1809
1514
  startRow
1810
1515
  } = focusStartRowMap[i];
1811
-
1812
1516
  if (startRow === focusStartRow) {
1813
1517
  newRow.append($createTableCellNode(TableCellHeaderStates.NO_STATUS));
1814
1518
  } else {
1815
1519
  cell.setRowSpan(cell.__rowSpan + 1);
1816
1520
  }
1817
1521
  }
1818
-
1819
1522
  const focusStartRowNode = grid.getChildAtIndex(focusStartRow);
1820
-
1821
1523
  if (!lexical.DEPRECATED_$isGridRowNode(focusStartRowNode)) {
1822
1524
  throw Error(`focusEndRow is not a GridRowNode`);
1823
1525
  }
1824
-
1825
1526
  focusStartRowNode.insertBefore(newRow);
1826
1527
  }
1827
1528
  }
1828
1529
  function $insertTableColumn(tableNode, targetIndex, shouldInsertAfter = true, columnCount, grid) {
1829
1530
  const tableRows = tableNode.getChildren();
1830
-
1531
+ const tableCellsToBeInserted = [];
1831
1532
  for (let r = 0; r < tableRows.length; r++) {
1832
1533
  const currentTableRowNode = tableRows[r];
1833
-
1834
1534
  if ($isTableRowNode(currentTableRowNode)) {
1835
1535
  for (let c = 0; c < columnCount; c++) {
1836
1536
  const tableRowChildren = currentTableRowNode.getChildren();
1837
-
1838
1537
  if (targetIndex >= tableRowChildren.length || targetIndex < 0) {
1839
1538
  throw new Error('Table column target index out of range');
1840
1539
  }
1841
-
1842
1540
  const targetCell = tableRowChildren[targetIndex];
1843
-
1844
1541
  if (!$isTableCellNode(targetCell)) {
1845
1542
  throw Error(`Expected table cell`);
1846
1543
  }
1847
-
1848
1544
  const {
1849
1545
  left,
1850
1546
  right
1851
1547
  } = $getTableCellSiblingsFromTableCellNode(targetCell, grid);
1852
1548
  let headerState = TableCellHeaderStates.NO_STATUS;
1853
-
1854
1549
  if (left && left.hasHeaderState(TableCellHeaderStates.ROW) || right && right.hasHeaderState(TableCellHeaderStates.ROW)) {
1855
1550
  headerState |= TableCellHeaderStates.ROW;
1856
1551
  }
1857
-
1858
1552
  const newTableCell = $createTableCellNode(headerState);
1859
1553
  newTableCell.append(lexical.$createParagraphNode());
1860
-
1861
- if (shouldInsertAfter) {
1862
- targetCell.insertAfter(newTableCell);
1863
- } else {
1864
- targetCell.insertBefore(newTableCell);
1865
- }
1554
+ tableCellsToBeInserted.push({
1555
+ newTableCell,
1556
+ targetCell
1557
+ });
1866
1558
  }
1867
1559
  }
1868
1560
  }
1869
-
1561
+ tableCellsToBeInserted.forEach(({
1562
+ newTableCell,
1563
+ targetCell
1564
+ }) => {
1565
+ if (shouldInsertAfter) {
1566
+ targetCell.insertAfter(newTableCell);
1567
+ } else {
1568
+ targetCell.insertBefore(newTableCell);
1569
+ }
1570
+ });
1870
1571
  return tableNode;
1871
1572
  }
1872
1573
  function $insertTableColumn__EXPERIMENTAL(insertAfter = true) {
1873
1574
  const selection = lexical.$getSelection();
1874
-
1875
1575
  if (!(lexical.$isRangeSelection(selection) || lexical.DEPRECATED_$isGridSelection(selection))) {
1876
1576
  throw Error(`Expected a RangeSelection or GridSelection`);
1877
1577
  }
1878
-
1879
1578
  const anchor = selection.anchor.getNode();
1880
1579
  const focus = selection.focus.getNode();
1881
1580
  const [anchorCell] = lexical.DEPRECATED_$getNodeTriplet(anchor);
@@ -1885,57 +1584,42 @@ function $insertTableColumn__EXPERIMENTAL(insertAfter = true) {
1885
1584
  const startColumn = insertAfter ? Math.max(focusCellMap.startColumn, anchorCellMap.startColumn) : Math.min(focusCellMap.startColumn, anchorCellMap.startColumn);
1886
1585
  const insertAfterColumn = insertAfter ? startColumn + focusCell.__colSpan - 1 : startColumn - 1;
1887
1586
  const gridFirstChild = grid.getFirstChild();
1888
-
1889
1587
  if (!lexical.DEPRECATED_$isGridRowNode(gridFirstChild)) {
1890
1588
  throw Error(`Expected firstTable child to be a row`);
1891
1589
  }
1892
-
1893
1590
  let firstInsertedCell = null;
1894
-
1895
1591
  function $createTableCellNodeForInsertTableColumn() {
1896
1592
  const cell = $createTableCellNode(TableCellHeaderStates.NO_STATUS).append(lexical.$createParagraphNode());
1897
-
1898
1593
  if (firstInsertedCell === null) {
1899
1594
  firstInsertedCell = cell;
1900
1595
  }
1901
-
1902
1596
  return cell;
1903
1597
  }
1904
-
1905
1598
  let loopRow = gridFirstChild;
1906
-
1907
1599
  rowLoop: for (let i = 0; i < rowCount; i++) {
1908
1600
  if (i !== 0) {
1909
1601
  const currentRow = loopRow.getNextSibling();
1910
-
1911
1602
  if (!lexical.DEPRECATED_$isGridRowNode(currentRow)) {
1912
1603
  throw Error(`Expected row nextSibling to be a row`);
1913
1604
  }
1914
-
1915
1605
  loopRow = currentRow;
1916
1606
  }
1917
-
1918
1607
  const rowMap = gridMap[i];
1919
-
1920
1608
  if (insertAfterColumn < 0) {
1921
1609
  $insertFirst(loopRow, $createTableCellNodeForInsertTableColumn());
1922
1610
  continue;
1923
1611
  }
1924
-
1925
1612
  const {
1926
1613
  cell: currentCell,
1927
1614
  startColumn: currentStartColumn,
1928
1615
  startRow: currentStartRow
1929
1616
  } = rowMap[insertAfterColumn];
1930
-
1931
1617
  if (currentStartColumn + currentCell.__colSpan - 1 <= insertAfterColumn) {
1932
1618
  let insertAfterCell = currentCell;
1933
1619
  let insertAfterCellRowStart = currentStartRow;
1934
1620
  let prevCellIndex = insertAfterColumn;
1935
-
1936
1621
  while (insertAfterCellRowStart !== i && insertAfterCell.__rowSpan > 1) {
1937
1622
  prevCellIndex -= currentCell.__colSpan;
1938
-
1939
1623
  if (prevCellIndex >= 0) {
1940
1624
  const {
1941
1625
  cell: cell_,
@@ -1948,43 +1632,34 @@ function $insertTableColumn__EXPERIMENTAL(insertAfter = true) {
1948
1632
  continue rowLoop;
1949
1633
  }
1950
1634
  }
1951
-
1952
1635
  insertAfterCell.insertAfter($createTableCellNodeForInsertTableColumn());
1953
1636
  } else {
1954
1637
  currentCell.setColSpan(currentCell.__colSpan + 1);
1955
1638
  }
1956
1639
  }
1957
-
1958
1640
  if (firstInsertedCell !== null) {
1959
1641
  $moveSelectionToCell(firstInsertedCell);
1960
1642
  }
1961
1643
  }
1962
1644
  function $deleteTableColumn(tableNode, targetIndex) {
1963
1645
  const tableRows = tableNode.getChildren();
1964
-
1965
1646
  for (let i = 0; i < tableRows.length; i++) {
1966
1647
  const currentTableRowNode = tableRows[i];
1967
-
1968
1648
  if ($isTableRowNode(currentTableRowNode)) {
1969
1649
  const tableRowChildren = currentTableRowNode.getChildren();
1970
-
1971
1650
  if (targetIndex >= tableRowChildren.length || targetIndex < 0) {
1972
1651
  throw new Error('Table column target index out of range');
1973
1652
  }
1974
-
1975
1653
  tableRowChildren[targetIndex].remove();
1976
1654
  }
1977
1655
  }
1978
-
1979
1656
  return tableNode;
1980
1657
  }
1981
1658
  function $deleteTableRow__EXPERIMENTAL() {
1982
1659
  const selection = lexical.$getSelection();
1983
-
1984
1660
  if (!(lexical.$isRangeSelection(selection) || lexical.DEPRECATED_$isGridSelection(selection))) {
1985
1661
  throw Error(`Expected a RangeSelection or GridSelection`);
1986
1662
  }
1987
-
1988
1663
  const anchor = selection.anchor.getNode();
1989
1664
  const focus = selection.focus.getNode();
1990
1665
  const [anchorCell,, grid] = lexical.DEPRECATED_$getNodeTriplet(anchor);
@@ -1997,17 +1672,14 @@ function $deleteTableRow__EXPERIMENTAL() {
1997
1672
  startRow: focusStartRow
1998
1673
  } = focusCellMap;
1999
1674
  const focusEndRow = focusStartRow + focusCell.__rowSpan - 1;
2000
-
2001
1675
  if (gridMap.length === focusEndRow - anchorStartRow + 1) {
2002
1676
  // Empty grid
2003
1677
  grid.remove();
2004
1678
  return;
2005
1679
  }
2006
-
2007
1680
  const columnCount = gridMap[0].length;
2008
1681
  const nextRow = gridMap[focusEndRow + 1];
2009
1682
  const nextRowNode = grid.getChildAtIndex(focusEndRow + 1);
2010
-
2011
1683
  for (let row = focusEndRow; row >= anchorStartRow; row--) {
2012
1684
  for (let column = columnCount - 1; column >= 0; column--) {
2013
1685
  const {
@@ -2015,25 +1687,20 @@ function $deleteTableRow__EXPERIMENTAL() {
2015
1687
  startRow: cellStartRow,
2016
1688
  startColumn: cellStartColumn
2017
1689
  } = gridMap[row][column];
2018
-
2019
1690
  if (cellStartColumn !== column) {
2020
1691
  // Don't repeat work for the same Cell
2021
1692
  continue;
2022
- } // Rows overflowing top have to be trimmed
2023
-
2024
-
1693
+ }
1694
+ // Rows overflowing top have to be trimmed
2025
1695
  if (row === anchorStartRow && cellStartRow < anchorStartRow) {
2026
1696
  cell.setRowSpan(cell.__rowSpan - (cellStartRow - anchorStartRow));
2027
- } // Rows overflowing bottom have to be trimmed and moved to the next row
2028
-
2029
-
1697
+ }
1698
+ // Rows overflowing bottom have to be trimmed and moved to the next row
2030
1699
  if (cellStartRow >= anchorStartRow && cellStartRow + cell.__rowSpan - 1 > focusEndRow) {
2031
1700
  cell.setRowSpan(cell.__rowSpan - (focusEndRow - cellStartRow + 1));
2032
-
2033
1701
  if (!(nextRowNode !== null)) {
2034
1702
  throw Error(`Expected nextRowNode not to be null`);
2035
1703
  }
2036
-
2037
1704
  if (column === 0) {
2038
1705
  $insertFirst(nextRowNode, cell);
2039
1706
  } else {
@@ -2044,16 +1711,12 @@ function $deleteTableRow__EXPERIMENTAL() {
2044
1711
  }
2045
1712
  }
2046
1713
  }
2047
-
2048
1714
  const rowNode = grid.getChildAtIndex(row);
2049
-
2050
1715
  if (!lexical.DEPRECATED_$isGridRowNode(rowNode)) {
2051
1716
  throw Error(`Expected GridNode childAtIndex(${String(row)}) to be RowNode`);
2052
1717
  }
2053
-
2054
1718
  rowNode.remove();
2055
1719
  }
2056
-
2057
1720
  if (nextRow !== undefined) {
2058
1721
  const {
2059
1722
  cell
@@ -2069,11 +1732,9 @@ function $deleteTableRow__EXPERIMENTAL() {
2069
1732
  }
2070
1733
  function $deleteTableColumn__EXPERIMENTAL() {
2071
1734
  const selection = lexical.$getSelection();
2072
-
2073
1735
  if (!(lexical.$isRangeSelection(selection) || lexical.DEPRECATED_$isGridSelection(selection))) {
2074
1736
  throw Error(`Expected a RangeSelection or GridSelection`);
2075
1737
  }
2076
-
2077
1738
  const anchor = selection.anchor.getNode();
2078
1739
  const focus = selection.focus.getNode();
2079
1740
  const [anchorCell,, grid] = lexical.DEPRECATED_$getNodeTriplet(anchor);
@@ -2090,28 +1751,25 @@ function $deleteTableColumn__EXPERIMENTAL() {
2090
1751
  const endColumn = Math.max(anchorStartColumn + anchorCell.__colSpan - 1, focusStartColumn + focusCell.__colSpan - 1);
2091
1752
  const selectedColumnCount = endColumn - startColumn + 1;
2092
1753
  const columnCount = gridMap[0].length;
2093
-
2094
1754
  if (columnCount === endColumn - startColumn + 1) {
2095
1755
  // Empty grid
2096
1756
  grid.selectPrevious();
2097
1757
  grid.remove();
2098
1758
  return;
2099
1759
  }
2100
-
2101
1760
  const rowCount = gridMap.length;
2102
-
2103
1761
  for (let row = 0; row < rowCount; row++) {
2104
1762
  for (let column = startColumn; column <= endColumn; column++) {
2105
1763
  const {
2106
1764
  cell,
2107
1765
  startColumn: cellStartColumn
2108
1766
  } = gridMap[row][column];
2109
-
2110
1767
  if (cellStartColumn < startColumn) {
2111
1768
  if (column === startColumn) {
2112
- const overflowLeft = startColumn - cellStartColumn; // Overflowing left
2113
-
2114
- cell.setColSpan(cell.__colSpan - // Possible overflow right too
1769
+ const overflowLeft = startColumn - cellStartColumn;
1770
+ // Overflowing left
1771
+ cell.setColSpan(cell.__colSpan -
1772
+ // Possible overflow right too
2115
1773
  Math.min(selectedColumnCount, cell.__colSpan - overflowLeft));
2116
1774
  }
2117
1775
  } else if (cellStartColumn + cell.__colSpan - 1 > endColumn) {
@@ -2125,10 +1783,8 @@ function $deleteTableColumn__EXPERIMENTAL() {
2125
1783
  }
2126
1784
  }
2127
1785
  }
2128
-
2129
1786
  const focusRowMap = gridMap[focusStartRow];
2130
1787
  const nextColumn = focusRowMap[focusStartColumn + focusCell.__colSpan];
2131
-
2132
1788
  if (nextColumn !== undefined) {
2133
1789
  const {
2134
1790
  cell
@@ -2142,47 +1798,37 @@ function $deleteTableColumn__EXPERIMENTAL() {
2142
1798
  $moveSelectionToCell(cell);
2143
1799
  }
2144
1800
  }
2145
-
2146
1801
  function $moveSelectionToCell(cell) {
2147
1802
  const firstDescendant = cell.getFirstDescendant();
2148
-
2149
- if (!(firstDescendant !== null)) {
2150
- throw Error(`Unexpected empty cell`);
1803
+ if (firstDescendant == null) {
1804
+ cell.selectStart();
1805
+ } else {
1806
+ firstDescendant.getParentOrThrow().selectStart();
2151
1807
  }
2152
-
2153
- firstDescendant.getParentOrThrow().selectStart();
2154
1808
  }
2155
-
2156
1809
  function $insertFirst(parent, node) {
2157
1810
  const firstChild = parent.getFirstChild();
2158
-
2159
1811
  if (firstChild !== null) {
2160
1812
  firstChild.insertBefore(node);
2161
1813
  } else {
2162
1814
  parent.append(node);
2163
1815
  }
2164
1816
  }
2165
-
2166
1817
  function $unmergeCell() {
2167
1818
  const selection = lexical.$getSelection();
2168
-
2169
1819
  if (!(lexical.$isRangeSelection(selection) || lexical.DEPRECATED_$isGridSelection(selection))) {
2170
1820
  throw Error(`Expected a RangeSelection or GridSelection`);
2171
1821
  }
2172
-
2173
1822
  const anchor = selection.anchor.getNode();
2174
1823
  const [cell, row, grid] = lexical.DEPRECATED_$getNodeTriplet(anchor);
2175
1824
  const colSpan = cell.__colSpan;
2176
1825
  const rowSpan = cell.__rowSpan;
2177
-
2178
1826
  if (colSpan > 1) {
2179
1827
  for (let i = 1; i < colSpan; i++) {
2180
1828
  cell.insertAfter($createTableCellNode(TableCellHeaderStates.NO_STATUS));
2181
1829
  }
2182
-
2183
1830
  cell.setColSpan(1);
2184
1831
  }
2185
-
2186
1832
  if (rowSpan > 1) {
2187
1833
  const [map, cellMap] = lexical.DEPRECATED_$computeGridMap(grid, cell, cell);
2188
1834
  const {
@@ -2190,31 +1836,24 @@ function $unmergeCell() {
2190
1836
  startRow
2191
1837
  } = cellMap;
2192
1838
  let currentRowNode;
2193
-
2194
1839
  for (let i = 1; i < rowSpan; i++) {
2195
1840
  const currentRow = startRow + i;
2196
1841
  const currentRowMap = map[currentRow];
2197
1842
  currentRowNode = (currentRowNode || row).getNextSibling();
2198
-
2199
1843
  if (!lexical.DEPRECATED_$isGridRowNode(currentRowNode)) {
2200
1844
  throw Error(`Expected row next sibling to be a row`);
2201
1845
  }
2202
-
2203
1846
  let insertAfterCell = null;
2204
-
2205
1847
  for (let column = 0; column < startColumn; column++) {
2206
1848
  const currentCellMap = currentRowMap[column];
2207
1849
  const currentCell = currentCellMap.cell;
2208
-
2209
1850
  if (currentCellMap.startRow === currentRow) {
2210
1851
  insertAfterCell = currentCell;
2211
1852
  }
2212
-
2213
1853
  if (currentCell.__colSpan > 1) {
2214
1854
  column += currentCell.__colSpan - 1;
2215
1855
  }
2216
1856
  }
2217
-
2218
1857
  if (insertAfterCell === null) {
2219
1858
  for (let j = 0; j < colSpan; j++) {
2220
1859
  $insertFirst(currentRowNode, $createTableCellNode(TableCellHeaderStates.NO_STATUS));
@@ -2225,7 +1864,6 @@ function $unmergeCell() {
2225
1864
  }
2226
1865
  }
2227
1866
  }
2228
-
2229
1867
  cell.setRowSpan(1);
2230
1868
  }
2231
1869
  }