@lexical/table 0.1.9 → 0.1.12

package/LexicalTable.dev.js

@@ -32,17 +32,17 @@ function addClassNamesToElement(element, ...classNames) {
  *
  * 
  */
-class TableCellNode extends lexical.ElementNode {
+class TableCellNode extends lexical.GridCellNode {
   static getType() {
-    return 'table-cell';
+    return 'tablecell';
   }
 
   static clone(node) {
-    return new TableCellNode(false, node.__key);
+    return new TableCellNode(false, node.__colSpan, node.__key);
   }
 
-  constructor(isHeader = false, key) {
-    super(key);
+  constructor(isHeader = false, colSpan = 1, key) {
+    super(colSpan, key);
     this.__isHeader = isHeader;
   }
 
@@ -110,7 +110,6 @@ const LowPriority = 1;
 const CriticalPriority = 4;
 const removeHighlightStyle = document.createElement('style');
 removeHighlightStyle.appendChild(document.createTextNode('::selection{background-color: transparent}'));
-
 function getCellFromTarget(node) {
   let currentNode = node;
 
@@ -133,7 +132,6 @@ function getCellFromTarget(node) {
 
   return null;
 }
-
 function trackTableGrid(tableNode, tableElement, editor) {
   const cells = [];
   const grid = {
@@ -141,95 +139,99 @@ function trackTableGrid(tableNode, tableElement, editor) {
     columns: 0,
     rows: 0
   };
-  const observer = new MutationObserver(records => {
-    editor.update(() => {
-      let currentNode = tableElement.firstChild;
-      let x = 0;
-      let y = 0;
-      let gridNeedsRedraw = false;
 
-      for (let i = 0; i < records.length; i++) {
-        const record = records[i];
-        const target = record.target;
-        const nodeName = target.nodeName;
+  const calcSize = () => {
+    let currentNode = tableElement.firstChild;
+    let x = 0;
+    let y = 0;
+    cells.length = 0;
+
+    while (currentNode != null) {
+      const nodeMame = currentNode.nodeName;
+
+      if (nodeMame === 'TD' || nodeMame === 'TH') {
+        // $FlowFixMe: TD is always an HTMLElement
+        const elem = currentNode;
+        const cell = {
+          elem,
+          highlighted: false,
+          x,
+          y
+        }; // $FlowFixMe: internal field
 
-        if (nodeName === 'TABLE' || nodeName === 'TR') {
-          gridNeedsRedraw = true;
-          break;
-        }
-      }
+        currentNode._cell = cell;
 
-      if (!gridNeedsRedraw) {
-        return;
-      }
+        if (cells[y] === undefined) {
+          cells[y] = [];
+        }
 
-      cells.length = 0;
+        cells[y][x] = cell;
+      } else {
+        const child = currentNode.firstChild;
 
-      while (currentNode != null) {
-        const nodeMame = currentNode.nodeName;
+        if (child != null) {
+          currentNode = child;
+          continue;
+        }
+      }
 
-        if (nodeMame === 'TD' || nodeMame === 'TH') {
-          // $FlowFixMe: TD is always an HTMLElement
-          const elem = currentNode;
-          const cell = {
-            elem,
-            highlighted: false,
-            x,
-            y
-          }; // $FlowFixMe: internal field
+      const sibling = currentNode.nextSibling;
 
-          currentNode._cell = cell;
+      if (sibling != null) {
+        x++;
+        currentNode = sibling;
+        continue;
+      }
 
-          if (cells[y] === undefined) {
-            cells[y] = [];
-          }
+      const parent = currentNode.parentNode;
 
-          cells[y][x] = cell;
-        } else {
-          const child = currentNode.firstChild;
+      if (parent != null) {
+        const parentSibling = parent.nextSibling;
 
-          if (child != null) {
-            currentNode = child;
-            continue;
-          }
+        if (parentSibling == null) {
+          break;
         }
 
-        const sibling = currentNode.nextSibling;
-
-        if (sibling != null) {
-          x++;
-          currentNode = sibling;
-          continue;
-        }
+        y++;
+        x = 0;
+        currentNode = parentSibling;
+      }
+    }
 
-        const parent = currentNode.parentNode;
+    grid.columns = x + 1;
+    grid.rows = y + 1;
+    tableNode.setGrid(grid);
+  };
 
-        if (parent != null) {
-          const parentSibling = parent.nextSibling;
+  const observer = new MutationObserver(records => {
+    editor.update(() => {
+      let gridNeedsRedraw = false;
 
-          if (parentSibling == null) {
-            break;
-          }
+      for (let i = 0; i < records.length; i++) {
+        const record = records[i];
+        const target = record.target;
+        const nodeName = target.nodeName;
 
-          y++;
-          x = 0;
-          currentNode = parentSibling;
+        if (nodeName === 'TABLE' || nodeName === 'TR') {
+          gridNeedsRedraw = true;
+          break;
         }
       }
 
-      grid.columns = x + 1;
-      grid.rows = y + 1;
-      tableNode.setGrid(grid);
+      if (!gridNeedsRedraw) {
+        return;
+      }
+
+      calcSize();
     });
   });
   observer.observe(tableElement, {
     childList: true,
     subtree: true
   });
-  tableNode.setGrid(grid);
+  calcSize();
   return grid;
 }
-
 function updateCells(fromX, toX, fromY, toY, cells) {
   const highlighted = [];
 
@@ -252,18 +254,21 @@ function updateCells(fromX, toX, fromY, toY, cells) {
         cell.highlighted = false;
         elemStyle.removeProperty('background-color');
         elemStyle.removeProperty('caret-color');
+
+        if (!cell.elem.getAttribute('style')) {
+          cell.elem.removeAttribute('style');
+        }
       }
     }
   }
 
   return highlighted;
 }
-
-function applyCustomTableHandlers(tableNode, tableElement, editor) {
+function $applyCustomTableHandlers(tableNode, tableElement, editor) {
   const rootElement = editor.getRootElement();
 
   if (rootElement === null) {
-    return;
+    throw new Error('No root element.');
   }
 
   trackTableGrid(tableNode, tableElement, editor);
@@ -275,6 +280,8 @@ function applyCustomTableHandlers(tableNode, tableElement, editor) {
   let currentX = -1;
   let currentY = -1;
   let highlightedCells = [];
+  const editorListeners = new Set();
+  let deleteCharacterListener = null;
 
   if (grid == null) {
     throw new Error('Table grid not found.');
@@ -317,11 +324,15 @@ function applyCustomTableHandlers(tableNode, tableElement, editor) {
                   const cellNode = lexical.$getNearestNodeFromDOMNode(elem);
 
                   if (lexical.$isElementNode(cellNode)) {
-                    cellNode.clear();
                     const paragraphNode = lexical.$createParagraphNode();
                     const textNode = lexical.$createTextNode();
                     paragraphNode.append(textNode);
                     cellNode.append(paragraphNode);
+                    cellNode.getChildren().forEach(child => {
+                      if (child !== paragraphNode) {
+                        child.remove();
+                      }
+                    });
                   }
                 });
                 tableNode.setSelectionState(null);
@@ -337,6 +348,7 @@ function applyCustomTableHandlers(tableNode, tableElement, editor) {
 
               return false;
             }, LowPriority);
+            editorListeners.add(deleteCharacterListener);
           }
         } else if (cellX === currentX && cellY === currentY) {
           return;
@@ -379,6 +391,7 @@ function applyCustomTableHandlers(tableNode, tableElement, editor) {
       if (deleteCharacterListener !== null) {
         deleteCharacterListener();
         deleteCharacterListener = null;
+        editorListeners.delete(deleteCharacterListener);
       }
 
       const parent = removeHighlightStyle.parentNode;
@@ -398,7 +411,7 @@ function applyCustomTableHandlers(tableNode, tableElement, editor) {
   const formatCells = type => {
     let selection = lexical.$getSelection();
 
-    if (selection === null) {
+    if (!lexical.$isRangeSelection(selection)) {
       selection = lexical.$createRangeSelection();
     } // This is to make Flow play ball.
 
@@ -409,7 +422,7 @@ function applyCustomTableHandlers(tableNode, tableElement, editor) {
     highlightedCells.forEach(highlightedCell => {
       const cellNode = lexical.$getNearestNodeFromDOMNode(highlightedCell.elem);
 
-      if (lexical.$isElementNode(cellNode)) {
+      if (lexical.$isElementNode(cellNode) && cellNode.getTextContentSize() !== 0) {
         anchor.set(cellNode.getKey(), 0, 'element');
         focus.set(cellNode.getKey(), cellNode.getChildrenSize(), 'element');
         formatSelection.formatText(type);
@@ -421,7 +434,6 @@ function applyCustomTableHandlers(tableNode, tableElement, editor) {
     lexical.$setSelection(selection);
   };
 
-  let deleteCharacterListener = null;
   tableElement.addEventListener('mousedown', event => {
     if (isSelected) {
       if (isHighlightingCells) {
@@ -453,7 +465,7 @@ function applyCustomTableHandlers(tableNode, tableElement, editor) {
     }, 0);
   });
   window.addEventListener('click', e => {
-    if (highlightedCells.length > 0 && !tableElement.contains(e.target)) {
+    if (highlightedCells.length > 0 && !tableElement.contains(e.target) && rootElement.contains(e.target)) {
       editor.update(() => {
         tableNode.setSelectionState(null);
       });
@@ -467,11 +479,11 @@ function applyCustomTableHandlers(tableNode, tableElement, editor) {
         {
           const isForward = direction === 'forward';
 
-          if (y !== (isForward ? grid.columns - 1 : 0)) {
-            tableNode.getCellNodeFromCords(x, y + (isForward ? 1 : -1)).select();
+          if (x !== (isForward ? grid.columns - 1 : 0)) {
+            tableNode.getCellNodeFromCords(x + (isForward ? 1 : -1), y).select();
           } else {
-            if (x !== (isForward ? grid.rows - 1 : 0)) {
-              tableNode.getCellNodeFromCords(x + (isForward ? 1 : -1), isForward ? 0 : grid.columns - 1).select();
+            if (y !== (isForward ? grid.rows - 1 : 0)) {
+              tableNode.getCellNodeFromCords(isForward ? 0 : grid.columns - 1, y + (isForward ? 1 : -1)).select();
             } else if (!isForward) {
               tableNode.selectPrevious();
             } else {
@@ -484,8 +496,8 @@ function applyCustomTableHandlers(tableNode, tableElement, editor) {
 
       case 'up':
         {
-          if (x !== 0) {
-            tableNode.getCellNodeFromCords(x - 1, y).select();
+          if (y !== 0) {
+            tableNode.getCellNodeFromCords(x, y - 1).select();
           } else {
             tableNode.selectPrevious();
           }
@@ -495,8 +507,8 @@ function applyCustomTableHandlers(tableNode, tableElement, editor) {
 
       case 'down':
         {
-          if (x !== grid.rows - 1) {
-            tableNode.getCellNodeFromCords(x + 1, y).select();
+          if (y !== grid.rows - 1) {
+            tableNode.getCellNodeFromCords(x, y + 1).select();
           } else {
             tableNode.selectNext();
           }
@@ -508,10 +520,10 @@ function applyCustomTableHandlers(tableNode, tableElement, editor) {
     return false;
   };
 
-  editor.addListener('command', (type, payload) => {
+  const genericCommandListener = editor.addListener('command', (type, payload) => {
     const selection = lexical.$getSelection();
 
-    if (selection == null) {
+    if (!lexical.$isRangeSelection(selection)) {
       return false;
     }
 
@@ -522,15 +534,18 @@ function applyCustomTableHandlers(tableNode, tableElement, editor) {
     }
 
     if (type === 'deleteCharacter') {
-      if (highlightedCells.length === 0 && selection.isCollapsed() && selection.anchor.offset === 0) {
+      if (highlightedCells.length === 0 && selection.isCollapsed() && selection.anchor.offset === 0 && selection.anchor.getNode().getPreviousSiblings().length === 0) {
         return true;
       }
     }
 
-    if (type === 'indentContent' || type === 'outdentContent') {
+    if (type === 'keyTab') {
+      const event = payload;
+
       if (selection.isCollapsed() && highlightedCells.length === 0) {
         const currentCords = tableNode.getCordsFromCellNode(tableCellNode);
-        selectGridNodeInDirection(currentCords.x, currentCords.y, type === 'indentContent' ? 'forward' : 'backward');
+        event.preventDefault();
+        selectGridNodeInDirection(currentCords.x, currentCords.y, !event.shiftKey && type === 'keyTab' ? 'forward' : 'backward');
         return true;
       }
     }
@@ -553,14 +568,26 @@ function applyCustomTableHandlers(tableNode, tableElement, editor) {
 
     return false;
   }, CriticalPriority);
+  editorListeners.add(genericCommandListener);
+  return () => Array.from(editorListeners).forEach(removeListener => removeListener ? removeListener() : null);
 }
 
-class TableNode extends lexical.ElementNode {
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+class TableNode extends lexical.GridNode {
   static getType() {
     return 'table';
   }
 
   static clone(node, selectionShape, grid) {
+    // TODO: selectionShape and grid aren't being deeply cloned?
+    // They shouldn't really be on the table node IMO.
     return new TableNode(node.__key, node.__selectionShape, node.__grid);
   }
 
@@ -573,7 +600,6 @@ class TableNode extends lexical.ElementNode {
   createDOM(config, editor) {
     const element = document.createElement('table');
     addClassNamesToElement(element, config.theme.table);
-    applyCustomTableHandlers(this, element, editor);
     return element;
   }
 
@@ -592,44 +618,47 @@ class TableNode extends lexical.ElementNode {
   setSelectionState(selectionShape) {
     const self = this.getWritable();
     self.__selectionShape = selectionShape;
-    if (this.__grid == null) return [];
+    const grid = this.getGrid();
+    if (grid == null) return [];
 
     if (!selectionShape) {
-      return updateCells(-1, -1, -1, -1, this.__grid.cells);
+      return updateCells(-1, -1, -1, -1, grid.cells);
     }
 
-    return updateCells(selectionShape.fromX, selectionShape.toX, selectionShape.fromY, selectionShape.toY, this.__grid.cells);
+    return updateCells(selectionShape.fromX, selectionShape.toX, selectionShape.fromY, selectionShape.toY, grid.cells);
   }
 
   getSelectionState() {
-    return this.__selectionShape;
+    return this.getLatest().__selectionShape;
   }
 
   getCordsFromCellNode(tableCellNode) {
-    if (!this.__grid) {
+    const grid = this.getGrid();
+
+    if (!grid) {
       throw Error(`Grid not found.`);
     }
 
     const {
       rows,
       cells
-    } = this.__grid;
+    } = grid;
 
-    for (let x = 0; x < rows; x++) {
-      const row = cells[x];
+    for (let y = 0; y < rows; y++) {
+      const row = cells[y];
 
       if (row == null) {
-        throw new Error(`Row not found at x:${x}`);
+        throw new Error(`Row not found at y:${y}`);
       }
 
-      const y = row.findIndex(({
+      const x = row.findIndex(({
         elem
       }) => {
         const cellNode = lexical.$getNearestNodeFromDOMNode(elem);
         return cellNode === tableCellNode;
       });
 
-      if (y !== -1) {
+      if (x !== -1) {
         return {
           x,
           y
@@ -641,23 +670,25 @@ class TableNode extends lexical.ElementNode {
   }
 
   getCellNodeFromCords(x, y) {
-    if (!this.__grid) {
+    const grid = this.getGrid();
+
+    if (!grid) {
       throw Error(`Grid not found.`);
     }
 
     const {
       cells
-    } = this.__grid;
-    const row = cells[x];
+    } = grid;
+    const row = cells[y];
 
     if (row == null) {
-      throw new Error(`Table row x:"${x}" not found.`);
+      throw new Error(`Table row x:"${y}" not found.`);
     }
 
-    const cell = row[y];
+    const cell = row[x];
 
     if (cell == null) {
-      throw new Error(`Table cell y:"${y}" in row x:"${x}" not found.`);
+      throw new Error(`Table cell y:"${x}" in row x:"${y}" not found.`);
     }
 
     const node = lexical.$getNearestNodeFromDOMNode(cell.elem);
@@ -672,10 +703,11 @@ class TableNode extends lexical.ElementNode {
   setGrid(grid) {
     const self = this.getWritable();
     self.__grid = grid;
+    return self;
   }
 
   getGrid() {
-    return this.__grid;
+    return this.getLatest().__grid;
   }
 
   canSelectBefore() {
@@ -698,9 +730,9 @@ function $isTableNode(node) {
  *
  * 
  */
-class TableRowNode extends lexical.ElementNode {
+class TableRowNode extends lexical.GridRowNode {
   static getType() {
-    return 'table-row';
+    return 'tablerow';
   }
 
   static clone(node) {
@@ -823,7 +855,7 @@ function $insertTableRow(tableNode, targetIndex, shouldInsertAfter = true, rowCo
 
       for (let j = 0; j < tableColumnCount; j++) {
         const tableCellNode = $createTableCellNode(false);
-        tableCellNode.append(lexical.$createTextNode());
+        tableCellNode.append(lexical.$createParagraphNode());
         newTableRowNode.append(tableCellNode);
       }
 
@@ -848,7 +880,7 @@ function $insertTableColumn(tableNode, targetIndex, shouldInsertAfter = true, co
     if ($isTableRowNode(currentTableRowNode)) {
       for (let j = 0; j < columnCount; j++) {
         const newTableCell = $createTableCellNode(i === 0);
-        newTableCell.append(lexical.$createTextNode());
+        newTableCell.append(lexical.$createParagraphNode());
         const tableRowChildren = currentTableRowNode.getChildren();
 
         if (targetIndex >= tableRowChildren.length || targetIndex < 0) {
@@ -888,6 +920,7 @@ function $deleteTableColumn(tableNode, targetIndex) {
   return tableNode;
 }
 
+exports.$applyCustomTableHandlers = $applyCustomTableHandlers;
 exports.$createTableCellNode = $createTableCellNode;
 exports.$createTableNode = $createTableNode;
 exports.$createTableNodeWithDimensions = $createTableNodeWithDimensions;

package/LexicalTable.prod.js

@@ -4,26 +4,27 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var q=require("lexical");function x(a,...b){b.forEach(c=>{null!=c&&"string"===typeof c&&a.classList.add(...c.split(" "))})}
-class y extends q.ElementNode{static getType(){return"table-cell"}static clone(a){return new y(!1,a.__key)}constructor(a=!1,b){super(b);this.__isHeader=a}getTag(){return this.__isHeader?"th":"td"}createDOM(a){const b=document.createElement(this.getTag());x(b,a.theme.tableCell,!0===this.__isHeader&&a.theme.tableCellHeader);return b}updateDOM(){return!1}collapseAtStart(){return!0}canBeEmpty(){return!1}}function z(a){return new y(a)}function B(a){return a instanceof y}
-function C(a){throw Error(`Minified Lexical error #${a}; see codes.json for the full message or `+"use the non-minified dev environment for full errors and additional helpful warnings.");}function D(a,b){for(;a!==q.$getRoot()&&null!=a;){if(b(a))return a;a=a.getParent()}return null}const F=document.createElement("style");F.appendChild(document.createTextNode("::selection{background-color: transparent}"));
-function G(a){for(;null!=a;){const b=a.nodeName;if("TD"===b||"TH"===b){a=a._cell;if(void 0===a)break;return a}a=a.parentNode}return null}
-function H(a,b,c){const g=[],d={cells:g,columns:0,rows:0};(new MutationObserver(n=>{c.update(()=>{var e=b.firstChild;let p=0,m=0;var h=!1;for(let r=0;r<n.length;r++){const w=n[r].target.nodeName;if("TABLE"===w||"TR"===w){h=!0;break}}if(h){for(g.length=0;null!=e;){h=e.nodeName;if("TD"===h||"TH"===h)h={elem:e,highlighted:!1,x:p,y:m},e._cell=h,void 0===g[m]&&(g[m]=[]),g[m][p]=h;else if(h=e.firstChild,null!=h){e=h;continue}h=e.nextSibling;if(null!=h)p++,e=h;else if(h=e.parentNode,null!=h){e=h.nextSibling;
-if(null==e)break;m++;p=0}}d.columns=p+1;d.rows=m+1;a.setGrid(d)}})})).observe(b,{childList:!0,subtree:!0});a.setGrid(d);return d}
-function I(a,b,c,g,d){const n=[];for(let e=0;e<d.length;e++){const p=d[e];for(let m=0;m<p.length;m++){const h=p[m],r=h.elem.style;m>=a&&m<=b&&e>=c&&e<=g?(h.highlighted||(h.highlighted=!0,r.setProperty("background-color","rgb(163, 187, 255)"),r.setProperty("caret-color","transparent")),n.push(h)):h.highlighted&&(h.highlighted=!1,r.removeProperty("background-color"),r.removeProperty("caret-color"))}}return n}
-function J(a,b,c){if(null!==c.getRootElement()){H(a,b,c);var g=a.getGrid(),d=!1,n=!1,e=-1,p=-1,m=-1,h=-1,r=[];if(null==g)throw Error("Table grid not found.");b.addEventListener("mousemove",k=>{if(d){var f=G(k.target);if(null!==f){const l=f.x;f=f.y;if(!n&&(e!==l||p!==f))k.preventDefault(),k=window.getSelection(),k.setBaseAndExtent(k.anchorNode,0,k.anchorNode,0),n=!0,document.body&&document.body.appendChild(F),null===A&&(A=c.addListener("command",(u,v)=>{if("deleteCharacter"===u){if(r.length===g.columns*
-g.rows)return a.selectPrevious(),a.remove(),w(),!0;r.forEach(({elem:t})=>{t=q.$getNearestNodeFromDOMNode(t);if(q.$isElementNode(t)){t.clear();const E=q.$createParagraphNode(),T=q.$createTextNode();E.append(T);t.append(E)}});a.setSelectionState(null);q.$setSelection(null);return!0}if("formatText"===u)return U(v),!0;"insertText"===u&&w();return!1},1));else if(l===m&&f===h)return;m=l;h=f;if(n){const u=Math.min(e,m),v=Math.max(e,m),t=Math.min(p,h),E=Math.max(p,h);c.update(()=>{r=a.setSelectionState({fromX:u,
-fromY:t,toX:v,toY:E})})}}}});var w=()=>{c.update(()=>{d=n=!1;h=m=p=e=-1;c.update(()=>{a.setSelectionState(null)});r=[];null!==A&&(A(),A=null);const k=F.parentNode;null!=k&&k.removeChild(F)})};b.addEventListener("mouseleave",()=>{});var U=k=>{let f=q.$getSelection();null===f&&(f=q.$createRangeSelection());const l=f,u=l.anchor,v=l.focus;r.forEach(t=>{t=q.$getNearestNodeFromDOMNode(t.elem);q.$isElementNode(t)&&(u.set(t.getKey(),0,"element"),v.set(t.getKey(),t.getChildrenSize(),"element"),l.formatText(k))});
-f.anchor.set(f.anchor.key,f.anchor.offset,f.anchor.type);f.focus.set(f.anchor.key,f.anchor.offset,f.anchor.type);q.$setSelection(f)},A=null;b.addEventListener("mousedown",k=>{d?n&&w():setTimeout(()=>{n&&w();const f=G(k.target);null!==f&&(d=!0,e=f.x,p=f.y,document.addEventListener("mouseup",()=>{d=!1},{capture:!0,once:!0}))},0)});window.addEventListener("click",k=>{0<r.length&&!b.contains(k.target)&&c.update(()=>{a.setSelectionState(null)})});var O=(k,f,l)=>{switch(l){case "backward":case "forward":return l=
-"forward"===l,f!==(l?g.columns-1:0)?a.getCellNodeFromCords(k,f+(l?1:-1)).select():k!==(l?g.rows-1:0)?a.getCellNodeFromCords(k+(l?1:-1),l?0:g.columns-1).select():l?a.selectNext():a.selectPrevious(),!0;case "up":return 0!==k?a.getCellNodeFromCords(k-1,f).select():a.selectPrevious(),!0;case "down":return k!==g.rows-1?a.getCellNodeFromCords(k+1,f).select():a.selectNext(),!0}return!1};c.addListener("command",(k,f)=>{var l=q.$getSelection();if(null==l)return!1;const u=D(l.anchor.getNode(),v=>B(v));if(!B(u))return!1;
-if("deleteCharacter"===k&&0===r.length&&l.isCollapsed()&&0===l.anchor.offset)return!0;if(("indentContent"===k||"outdentContent"===k)&&l.isCollapsed()&&0===r.length)return f=a.getCordsFromCellNode(u),O(f.x,f.y,"indentContent"===k?"forward":"backward"),!0;if(("keyArrowDown"===k||"keyArrowUp"===k)&&l.isCollapsed()&&0===r.length){const v=a.getCordsFromCellNode(u);l=D(l.anchor.getNode(),t=>q.$isElementNode(t));if("keyArrowUp"===k&&l===u.getFirstChild()||"keyArrowDown"===k&&l===u.getLastChild())return f.preventDefault(),
-f.stopImmediatePropagation(),O(v.x,v.y,"keyArrowUp"===k?"up":"down"),!0}return!1},4)}}
-class K extends q.ElementNode{static getType(){return"table"}static clone(a){return new K(a.__key,a.__selectionShape,a.__grid)}constructor(a,b,c){super(a);this.__selectionShape=b;this.__grid=c}createDOM(a,b){const c=document.createElement("table");x(c,a.theme.table);J(this,c,b);return c}updateDOM(){return!1}canExtractContents(){return!1}canBeEmpty(){return!1}setSelectionState(a){this.getWritable().__selectionShape=a;return null==this.__grid?[]:a?I(a.fromX,a.toX,a.fromY,a.toY,this.__grid.cells):I(-1,
--1,-1,-1,this.__grid.cells)}getSelectionState(){return this.__selectionShape}getCordsFromCellNode(a){this.__grid||C(55);const {rows:b,cells:c}=this.__grid;for(let d=0;d<b;d++){var g=c[d];if(null==g)throw Error(`Row not found at x:${d}`);g=g.findIndex(({elem:n})=>q.$getNearestNodeFromDOMNode(n)===a);if(-1!==g)return{x:d,y:g}}throw Error("Cell not found in table.");}getCellNodeFromCords(a,b){this.__grid||C(55);var {cells:c}=this.__grid;c=c[a];if(null==c)throw Error(`Table row x:"${a}" not found.`);
-c=c[b];if(null==c)throw Error(`Table cell y:"${b}" in row x:"${a}" not found.`);a=q.$getNearestNodeFromDOMNode(c.elem);if(B(a))return a;throw Error("Node at cords not TableCellNode.");}setGrid(a){this.getWritable().__grid=a}getGrid(){return this.__grid}canSelectBefore(){return!0}}function L(){return new K}function M(a){return a instanceof K}
-class N extends q.ElementNode{static getType(){return"table-row"}static clone(a){return new N(a.__key)}constructor(a){super(a)}createDOM(a){const b=document.createElement("tr");x(b,a.theme.tableRow);return b}updateDOM(){return!1}canBeEmpty(){return!1}}function P(){return new N}function Q(a){return a instanceof N}function R(a){a=D(a,b=>Q(b));if(Q(a))return a;throw Error("Expected table cell to be inside of table row.");}
-function S(a){a=D(a,b=>M(b));if(M(a))return a;throw Error("Expected table cell to be inside of table.");}exports.$createTableCellNode=z;exports.$createTableNode=L;exports.$createTableNodeWithDimensions=function(a,b,c=!0){const g=L();for(let d=0;d<a;d++){const n=P();for(let e=0;e<b;e++){const p=z(0===d&&c),m=q.$createParagraphNode();m.append(q.$createTextNode());p.append(m);n.append(p)}g.append(n)}return g};exports.$createTableRowNode=P;
-exports.$deleteTableColumn=function(a,b){const c=a.getChildren();for(let d=0;d<c.length;d++){var g=c[d];if(Q(g)){g=g.getChildren();if(b>=g.length||0>b)throw Error("Table column target index out of range");g[b].remove()}}return a};exports.$getTableCellNodeFromLexicalNode=function(a){a=D(a,b=>B(b));return B(a)?a:null};exports.$getTableColumnIndexFromTableCellNode=function(a){return R(a).getChildren().findIndex(b=>b.is(a))};exports.$getTableNodeFromLexicalNodeOrThrow=S;
-exports.$getTableRowIndexFromTableCellNode=function(a){const b=R(a);return S(b).getChildren().findIndex(c=>c.is(b))};exports.$getTableRowNodeFromTableCellNodeOrThrow=R;exports.$insertTableColumn=function(a,b,c=!0,g){const d=a.getChildren();for(let e=0;e<d.length;e++){const p=d[e];if(Q(p))for(let m=0;m<g;m++){const h=z(0===e);h.append(q.$createTextNode());var n=p.getChildren();if(b>=n.length||0>b)throw Error("Table column target index out of range");n=n[b];c?n.insertAfter(h):n.insertBefore(h)}}return a};
-exports.$insertTableRow=function(a,b,c=!0,g){var d=a.getChildren();if(b>=d.length||0>b)throw Error("Table row target index out of range");b=d[b];if(Q(b))for(d=0;d<g;d++){const n=b.getChildren().length,e=P();for(let p=0;p<n;p++){const m=z(!1);m.append(q.$createTextNode());e.append(m)}c?b.insertAfter(e):b.insertBefore(e)}else throw Error("Row before insertion index does not exist.");return a};exports.$isTableCellNode=B;exports.$isTableNode=M;exports.$isTableRowNode=Q;
-exports.$removeTableRowAtIndex=function(a,b){const c=a.getChildren();if(b>=c.length||0>b)throw Error("Expected table cell to be inside of table row.");c[b].remove();return a};exports.TableCellNode=y;exports.TableNode=K;exports.TableRowNode=N;
+var p=require("lexical");function y(a,...b){b.forEach(c=>{null!=c&&"string"===typeof c&&a.classList.add(...c.split(" "))})}
+class z extends p.GridCellNode{static getType(){return"tablecell"}static clone(a){return new z(!1,a.__colSpan,a.__key)}constructor(a=!1,b=1,c){super(b,c);this.__isHeader=a}getTag(){return this.__isHeader?"th":"td"}createDOM(a){const b=document.createElement(this.getTag());y(b,a.theme.tableCell,!0===this.__isHeader&&a.theme.tableCellHeader);return b}updateDOM(){return!1}collapseAtStart(){return!0}canBeEmpty(){return!1}}function A(a){return new z(a)}function C(a){return a instanceof z}
+function D(a,b){for(;a!==p.$getRoot()&&null!=a;){if(b(a))return a;a=a.getParent()}return null}const E=document.createElement("style");E.appendChild(document.createTextNode("::selection{background-color: transparent}"));function F(a){for(;null!=a;){const b=a.nodeName;if("TD"===b||"TH"===b){a=a._cell;if(void 0===a)break;return a}a=a.parentNode}return null}
+function G(a,b,c){const n=[],e={cells:n,columns:0,rows:0},q=()=>{var d=b.firstChild;let m=0,k=0;for(n.length=0;null!=d;){var g=d.nodeName;if("TD"===g||"TH"===g)g={elem:d,highlighted:!1,x:m,y:k},d._cell=g,void 0===n[k]&&(n[k]=[]),n[k][m]=g;else if(g=d.firstChild,null!=g){d=g;continue}g=d.nextSibling;if(null!=g)m++,d=g;else if(g=d.parentNode,null!=g){d=g.nextSibling;if(null==d)break;k++;m=0}}e.columns=m+1;e.rows=k+1;a.setGrid(e)};(new MutationObserver(d=>{c.update(()=>{let m=!1;for(let k=0;k<d.length;k++){const g=
+d[k].target.nodeName;if("TABLE"===g||"TR"===g){m=!0;break}}m&&q()})})).observe(b,{childList:!0,subtree:!0});q();return e}
+function J(a,b,c,n,e){const q=[];for(let d=0;d<e.length;d++){const m=e[d];for(let k=0;k<m.length;k++){const g=m[k],u=g.elem.style;k>=a&&k<=b&&d>=c&&d<=n?(g.highlighted||(g.highlighted=!0,u.setProperty("background-color","rgb(163, 187, 255)"),u.setProperty("caret-color","transparent")),q.push(g)):g.highlighted&&(g.highlighted=!1,u.removeProperty("background-color"),u.removeProperty("caret-color"),g.elem.getAttribute("style")||g.elem.removeAttribute("style"))}}return q}
+function K(a){throw Error(`Minified Lexical error #${a}; see codes.json for the full message or `+"use the non-minified dev environment for full errors and additional helpful warnings.");}
+class L extends p.GridNode{static getType(){return"table"}static clone(a){return new L(a.__key,a.__selectionShape,a.__grid)}constructor(a,b,c){super(a);this.__selectionShape=b;this.__grid=c}createDOM(a){const b=document.createElement("table");y(b,a.theme.table);return b}updateDOM(){return!1}canExtractContents(){return!1}canBeEmpty(){return!1}setSelectionState(a){this.getWritable().__selectionShape=a;const b=this.getGrid();return null==b?[]:a?J(a.fromX,a.toX,a.fromY,a.toY,b.cells):J(-1,-1,-1,-1,b.cells)}getSelectionState(){return this.getLatest().__selectionShape}getCordsFromCellNode(a){var b=
+this.getGrid();b||K(55);const {rows:c,cells:n}=b;for(b=0;b<c;b++){var e=n[b];if(null==e)throw Error(`Row not found at y:${b}`);e=e.findIndex(({elem:q})=>p.$getNearestNodeFromDOMNode(q)===a);if(-1!==e)return{x:e,y:b}}throw Error("Cell not found in table.");}getCellNodeFromCords(a,b){var c=this.getGrid();c||K(55);({cells:c}=c);c=c[b];if(null==c)throw Error(`Table row x:"${b}" not found.`);c=c[a];if(null==c)throw Error(`Table cell y:"${a}" in row x:"${b}" not found.`);a=p.$getNearestNodeFromDOMNode(c.elem);
+if(C(a))return a;throw Error("Node at cords not TableCellNode.");}setGrid(a){const b=this.getWritable();b.__grid=a;return b}getGrid(){return this.getLatest().__grid}canSelectBefore(){return!0}}function M(){return new L}function N(a){return a instanceof L}
+class O extends p.GridRowNode{static getType(){return"tablerow"}static clone(a){return new O(a.__key)}constructor(a){super(a)}createDOM(a){const b=document.createElement("tr");y(b,a.theme.tableRow);return b}updateDOM(){return!1}canBeEmpty(){return!1}}function P(){return new O}function Q(a){return a instanceof O}function R(a){a=D(a,b=>Q(b));if(Q(a))return a;throw Error("Expected table cell to be inside of table row.");}
+function U(a){a=D(a,b=>N(b));if(N(a))return a;throw Error("Expected table cell to be inside of table.");}
+exports.$applyCustomTableHandlers=function(a,b,c){const n=c.getRootElement();if(null===n)throw Error("No root element.");G(a,b,c);const e=a.getGrid();let q=!1,d=!1,m=-1,k=-1,g=-1,u=-1,w=[];const H=new Set;let x=null;if(null==e)throw Error("Table grid not found.");b.addEventListener("mousemove",h=>{if(q){var f=F(h.target);if(null!==f){const l=f.x;f=f.y;if(!d&&(m!==l||k!==f))h.preventDefault(),h=window.getSelection(),h.setBaseAndExtent(h.anchorNode,0,h.anchorNode,0),d=!0,document.body&&document.body.appendChild(E),
+null===x&&(x=c.addListener("command",(t,v)=>{if("deleteCharacter"===t){if(w.length===e.columns*e.rows)return a.selectPrevious(),a.remove(),I(),!0;w.forEach(({elem:r})=>{r=p.$getNearestNodeFromDOMNode(r);if(p.$isElementNode(r)){const B=p.$createParagraphNode(),V=p.$createTextNode();B.append(V);r.append(B);r.getChildren().forEach(S=>{S!==B&&S.remove()})}});a.setSelectionState(null);p.$setSelection(null);return!0}if("formatText"===t)return W(v),!0;"insertText"===t&&I();return!1},1),H.add(x));else if(l===
+g&&f===u)return;g=l;u=f;if(d){const t=Math.min(m,g),v=Math.max(m,g),r=Math.min(k,u),B=Math.max(k,u);c.update(()=>{w=a.setSelectionState({fromX:t,fromY:r,toX:v,toY:B})})}}}});const I=()=>{c.update(()=>{q=d=!1;u=g=k=m=-1;c.update(()=>{a.setSelectionState(null)});w=[];null!==x&&(x(),x=null,H.delete(x));const h=E.parentNode;null!=h&&h.removeChild(E)})};b.addEventListener("mouseleave",()=>{});const W=h=>{let f=p.$getSelection();p.$isRangeSelection(f)||(f=p.$createRangeSelection());const l=f,t=l.anchor,
+v=l.focus;w.forEach(r=>{r=p.$getNearestNodeFromDOMNode(r.elem);p.$isElementNode(r)&&0!==r.getTextContentSize()&&(t.set(r.getKey(),0,"element"),v.set(r.getKey(),r.getChildrenSize(),"element"),l.formatText(h))});f.anchor.set(f.anchor.key,f.anchor.offset,f.anchor.type);f.focus.set(f.anchor.key,f.anchor.offset,f.anchor.type);p.$setSelection(f)};b.addEventListener("mousedown",h=>{q?d&&I():setTimeout(()=>{d&&I();const f=F(h.target);null!==f&&(q=!0,m=f.x,k=f.y,document.addEventListener("mouseup",()=>{q=
+!1},{capture:!0,once:!0}))},0)});window.addEventListener("click",h=>{0<w.length&&!b.contains(h.target)&&n.contains(h.target)&&c.update(()=>{a.setSelectionState(null)})});const T=(h,f,l)=>{switch(l){case "backward":case "forward":return l="forward"===l,h!==(l?e.columns-1:0)?a.getCellNodeFromCords(h+(l?1:-1),f).select():f!==(l?e.rows-1:0)?a.getCellNodeFromCords(l?0:e.columns-1,f+(l?1:-1)).select():l?a.selectNext():a.selectPrevious(),!0;case "up":return 0!==f?a.getCellNodeFromCords(h,f-1).select():a.selectPrevious(),
+!0;case "down":return f!==e.rows-1?a.getCellNodeFromCords(h,f+1).select():a.selectNext(),!0}return!1},X=c.addListener("command",(h,f)=>{var l=p.$getSelection();if(!p.$isRangeSelection(l))return!1;var t=D(l.anchor.getNode(),v=>C(v));if(!C(t))return!1;if("deleteCharacter"===h&&0===w.length&&l.isCollapsed()&&0===l.anchor.offset&&0===l.anchor.getNode().getPreviousSiblings().length)return!0;if("keyTab"===h&&l.isCollapsed()&&0===w.length)return t=a.getCordsFromCellNode(t),f.preventDefault(),T(t.x,t.y,f.shiftKey||
+"keyTab"!==h?"backward":"forward"),!0;if(("keyArrowDown"===h||"keyArrowUp"===h)&&l.isCollapsed()&&0===w.length){const v=a.getCordsFromCellNode(t);l=D(l.anchor.getNode(),r=>p.$isElementNode(r));if("keyArrowUp"===h&&l===t.getFirstChild()||"keyArrowDown"===h&&l===t.getLastChild())return f.preventDefault(),f.stopImmediatePropagation(),T(v.x,v.y,"keyArrowUp"===h?"up":"down"),!0}return!1},4);H.add(X);return()=>Array.from(H).forEach(h=>h?h():null)};exports.$createTableCellNode=A;
+exports.$createTableNode=M;exports.$createTableNodeWithDimensions=function(a,b,c=!0){const n=M();for(let e=0;e<a;e++){const q=P();for(let d=0;d<b;d++){const m=A(0===e&&c),k=p.$createParagraphNode();k.append(p.$createTextNode());m.append(k);q.append(m)}n.append(q)}return n};exports.$createTableRowNode=P;
+exports.$deleteTableColumn=function(a,b){const c=a.getChildren();for(let e=0;e<c.length;e++){var n=c[e];if(Q(n)){n=n.getChildren();if(b>=n.length||0>b)throw Error("Table column target index out of range");n[b].remove()}}return a};exports.$getTableCellNodeFromLexicalNode=function(a){a=D(a,b=>C(b));return C(a)?a:null};exports.$getTableColumnIndexFromTableCellNode=function(a){return R(a).getChildren().findIndex(b=>b.is(a))};exports.$getTableNodeFromLexicalNodeOrThrow=U;
+exports.$getTableRowIndexFromTableCellNode=function(a){const b=R(a);return U(b).getChildren().findIndex(c=>c.is(b))};exports.$getTableRowNodeFromTableCellNodeOrThrow=R;exports.$insertTableColumn=function(a,b,c=!0,n){const e=a.getChildren();for(let d=0;d<e.length;d++){const m=e[d];if(Q(m))for(let k=0;k<n;k++){const g=A(0===d);g.append(p.$createParagraphNode());var q=m.getChildren();if(b>=q.length||0>b)throw Error("Table column target index out of range");q=q[b];c?q.insertAfter(g):q.insertBefore(g)}}return a};
+exports.$insertTableRow=function(a,b,c=!0,n){var e=a.getChildren();if(b>=e.length||0>b)throw Error("Table row target index out of range");b=e[b];if(Q(b))for(e=0;e<n;e++){const q=b.getChildren().length,d=P();for(let m=0;m<q;m++){const k=A(!1);k.append(p.$createParagraphNode());d.append(k)}c?b.insertAfter(d):b.insertBefore(d)}else throw Error("Row before insertion index does not exist.");return a};exports.$isTableCellNode=C;exports.$isTableNode=N;exports.$isTableRowNode=Q;
+exports.$removeTableRowAtIndex=function(a,b){const c=a.getChildren();if(b>=c.length||0>b)throw Error("Expected table cell to be inside of table row.");c[b].remove();return a};exports.TableCellNode=z;exports.TableNode=L;exports.TableRowNode=O;

package/package.json

@@ -12,10 +12,10 @@
     "table"
   ],
   "license": "MIT",
-  "version": "0.1.9",
+  "version": "0.1.12",
   "main": "LexicalTable.js",
   "peerDependencies": {
-    "lexical": "0.1.9"
+    "lexical": "0.1.12"
   },
   "repository": {
     "type": "git",