@lexical/table - npm Package Compare versions

Comparing version 0.8.1 to 0.9.0

LexicalTable.dev.js

@@ -25,2 +25,3 @@ /**
 };
+
 /** @noInheritDoc */
@@ -31,9 +32,10 @@ class TableCellNode extends lexical.DEPRECATED_GridCellNode {
   /** @internal */
-
   static getType() {
     return 'tablecell';
   }
+
   static clone(node) {
     return new TableCellNode(node.__headerState, node.__colSpan, node.__width, node.__key);
   }
+
   static importDOM() {
@@ -51,5 +53,7 @@ return {
   }
+
   static importJSON(serializedNode) {
     return $createTableCellNode(serializedNode.headerState, serializedNode.colSpan, serializedNode.width || undefined);
   }
+
   constructor(headerState = TableCellHeaderStates.NO_STATUS, colSpan = 1, width, key) {
@@ -60,10 +64,22 @@ super(colSpan, key);
   }
+
   createDOM(config) {
     const element = document.createElement(this.getTag());
+
     if (this.__width) {
       element.style.width = `${this.__width}px`;
     }
+
+    if (this.__colSpan !== 1) {
+      element.colSpan = this.__colSpan;
+    }
+
+    if (this.__rowSpan !== 1) {
+      element.rowSpan = this.__rowSpan;
+    }
+
     utils.addClassNamesToElement(element, config.theme.tableCell, this.hasHeader() && config.theme.tableCellHeader);
     return element;
   }
+
   exportDOM(editor) {
@@ -73,13 +89,26 @@ const {
     } = super.exportDOM(editor);
+
     if (element) {
+      const element_ = element;
       const maxWidth = 700;
       const colCount = this.getParentOrThrow().getChildrenSize();
-      element.style.border = '1px solid black';
-      element.style.width = `${this.getWidth() || Math.max(90, maxWidth / colCount)}px`;
-      element.style.verticalAlign = 'top';
-      element.style.textAlign = 'start';
+      element_.style.border = '1px solid black';
+
+      if (this.__colSpan !== 1) {
+        element_.colSpan = this.__colSpan;
+      }
+
+      if (this.__rowSpan !== 1) {
+        element_.rowSpan = this.__rowSpan;
+      }
+
+      element_.style.width = `${this.getWidth() || Math.max(90, maxWidth / colCount)}px`;
+      element_.style.verticalAlign = 'top';
+      element_.style.textAlign = 'start';
+
       if (this.hasHeader()) {
-        element.style.backgroundColor = '#f2f3f5';
+        element_.style.backgroundColor = '#f2f3f5';
       }
     }
+
     return {
@@ -89,5 +118,5 @@ element
   }
+
   exportJSON() {
-    return {
-      ...super.exportJSON(),
+    return { ...super.exportJSON(),
       colSpan: super.__colSpan,
@@ -99,5 +128,7 @@ headerState: this.__headerState,
   }
+
   getTag() {
     return this.hasHeader() ? 'th' : 'td';
   }
+
   setHeaderStyles(headerState) {
@@ -108,5 +139,7 @@ const self = this.getWritable();
   }
+
   getHeaderStyles() {
     return this.getLatest().__headerState;
   }
+
   setWidth(width) {
@@ -117,7 +150,10 @@ const self = this.getWritable();
   }
+
   getWidth() {
     return this.getLatest().__width;
   }
+
   toggleHeaderStyle(headerStateToToggle) {
     const self = this.getWritable();
+
     if ((self.__headerState & headerStateToToggle) === headerStateToToggle) {
@@ -128,25 +164,34 @@ self.__headerState -= headerStateToToggle;
     }
+
     return self;
   }
+
   hasHeaderState(headerState) {
     return (this.getHeaderStyles() & headerState) === headerState;
   }
+
   hasHeader() {
     return this.getLatest().__headerState !== TableCellHeaderStates.NO_STATUS;
   }
+
   updateDOM(prevNode) {
-    return prevNode.__headerState !== this.__headerState || prevNode.__width !== this.__width;
+    return prevNode.__headerState !== this.__headerState || prevNode.__width !== this.__width || prevNode.__colSpan !== this.__colSpan || prevNode.__rowSpan !== this.__rowSpan;
   }
+
   isShadowRoot() {
     return true;
   }
+
   collapseAtStart() {
     return true;
   }
+
   canBeEmpty() {
     return false;
   }
+
   canIndent() {
     return false;
   }
+
 }
@@ -160,8 +205,11 @@ function convertTableCellNodeElement(domNode) {
         const paragraphNode = lexical.$createParagraphNode();
+
         if (lexical.$isLineBreakNode(lexicalNode) && lexicalNode.getTextContent() === '\n') {
           return null;
         }
+
         paragraphNode.append(lexicalNode);
         return paragraphNode;
       }
+
       return lexicalNode;
@@ -186,12 +234,14 @@ },
  */
+
 /** @noInheritDoc */
 class TableRowNode extends lexical.DEPRECATED_GridRowNode {
   /** @internal */
-
   static getType() {
     return 'tablerow';
   }
+
   static clone(node) {
     return new TableRowNode(node.__height, node.__key);
   }
+
   static importDOM() {
@@ -205,5 +255,7 @@ return {
   }
+
   static importJSON(serializedNode) {
     return $createTableRowNode(serializedNode.height);
   }
+
   constructor(height, key) {
@@ -213,5 +265,5 @@ super(key);
   }
+
   exportJSON() {
-    return {
-      ...super.exportJSON(),
+    return { ...super.exportJSON(),
       type: 'tablerow',
@@ -221,13 +273,18 @@ version: 1
   }
+
   createDOM(config) {
     const element = document.createElement('tr');
+
     if (this.__height) {
       element.style.height = `${this.__height}px`;
     }
+
     utils.addClassNamesToElement(element, config.theme.tableRow);
     return element;
   }
+
   isShadowRoot() {
     return true;
   }
+
   setHeight(height) {
@@ -238,14 +295,19 @@ const self = this.getWritable();
   }
+
   getHeight() {
     return this.getLatest().__height;
   }
+
   updateDOM(prevNode) {
     return prevNode.__height !== this.__height;
   }
+
   canBeEmpty() {
     return false;
   }
+
   canIndent() {
     return false;
   }
+
 }
@@ -271,3 +333,2 @@ function convertTableRowElement(domNode) {
  */
-
 const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
@@ -282,3 +343,5 @@
  */
+
 const getDOMSelection = targetWindow => CAN_USE_DOM ? (targetWindow || window).getSelection() : null;
+
 class TableSelection {
@@ -307,8 +370,11 @@ constructor(editor, tableNodeKey) {
   }
+
   getGrid() {
     return this.grid;
   }
+
   removeListeners() {
     Array.from(this.listenersToRemove).forEach(removeListener => removeListener());
   }
+
   trackTableGrid() {
@@ -318,2 +384,3 @@ const observer = new MutationObserver(records => {
         let gridNeedsRedraw = false;
+
         for (let i = 0; i < records.length; i++) {
@@ -323,2 +390,3 @@ const record = records[i];
           const nodeName = target.nodeName;
+
           if (nodeName === 'TABLE' || nodeName === 'TR') {
@@ -329,9 +397,13 @@ gridNeedsRedraw = true;
         }
+
         if (!gridNeedsRedraw) {
           return;
         }
+
         const tableElement = this.editor.getElementByKey(this.tableNodeKey);
+
         if (!tableElement) {
           throw new Error('Expected to find TableElement in DOM');
         }
+
         this.grid = getTableGrid(tableElement);
@@ -342,5 +414,7 @@ });
       const tableElement = this.editor.getElementByKey(this.tableNodeKey);
+
       if (!tableElement) {
         throw new Error('Expected to find TableElement in DOM');
       }
+
       this.grid = getTableGrid(tableElement);
@@ -353,2 +427,3 @@ observer.observe(tableElement, {
   }
+
   clearHighlight() {
@@ -369,9 +444,13 @@ this.isHighlightingCells = false;
       const tableNode = lexical.$getNodeByKey(this.tableNodeKey);
+
       if (!$isTableNode(tableNode)) {
         throw new Error('Expected TableNode.');
       }
+
       const tableElement = this.editor.getElementByKey(this.tableNodeKey);
+
       if (!tableElement) {
         throw new Error('Expected to find TableElement in DOM');
       }
+
       const grid = getTableGrid(tableElement);
@@ -383,8 +462,11 @@ $updateDOMForSelection(grid, null);
   }
+
   enableHighlightStyle() {
     this.editor.update(() => {
       const tableElement = this.editor.getElementByKey(this.tableNodeKey);
+
       if (!tableElement) {
         throw new Error('Expected to find TableElement in DOM');
       }
+
       tableElement.classList.remove('disable-selection');
@@ -394,8 +476,11 @@ this.hasHijackedSelectionStyles = false;
   }
+
   disableHighlightStyle() {
     this.editor.update(() => {
       const tableElement = this.editor.getElementByKey(this.tableNodeKey);
+
       if (!tableElement) {
         throw new Error('Expected to find TableElement in DOM');
       }
+
       tableElement.classList.add('disable-selection');
@@ -405,2 +490,3 @@ this.hasHijackedSelectionStyles = true;
   }
+
   updateTableGridSelection(selection) {
@@ -416,18 +502,24 @@ if (selection != null && selection.gridKey === this.tableNodeKey) {
   }
+
   setFocusCellForSelection(cell, ignoreStart = false) {
     this.editor.update(() => {
       const tableNode = lexical.$getNodeByKey(this.tableNodeKey);
+
       if (!$isTableNode(tableNode)) {
         throw new Error('Expected TableNode.');
       }
+
       const tableElement = this.editor.getElementByKey(this.tableNodeKey);
+
       if (!tableElement) {
         throw new Error('Expected to find TableElement in DOM');
       }
+
       const cellX = cell.x;
       const cellY = cell.y;
       this.focusCell = cell;
+
       if (this.anchorCell !== null) {
-        const domSelection = getDOMSelection(this.editor._window);
-        // Collapse the selection
+        const domSelection = getDOMSelection(this.editor._window); // Collapse the selection
+
         if (domSelection) {
@@ -437,2 +529,3 @@ domSelection.setBaseAndExtent(this.anchorCell.elem, 0, this.focusCell.elem, 0);
       }
+
       if (!this.isHighlightingCells && (this.anchorX !== cellX || this.anchorY !== cellY || ignoreStart)) {
@@ -444,6 +537,9 @@ this.isHighlightingCells = true;
       }
+
       this.focusX = cellX;
       this.focusY = cellY;
+
       if (this.isHighlightingCells) {
         const focusTableCellNode = lexical.$getNearestNodeFromDOMNode(cell.elem);
+
         if (this.gridSelection != null && this.anchorCellNodeKey != null && $isTableCellNode(focusTableCellNode)) {
@@ -461,2 +557,3 @@ const focusNodeKey = focusTableCellNode.getKey();
   }
+
   setAnchorCellForSelection(cell) {
@@ -469,2 +566,3 @@ this.isHighlightingCells = false;
       const anchorTableCellNode = lexical.$getNearestNodeFromDOMNode(cell.elem);
+
       if ($isTableCellNode(anchorTableCellNode)) {
@@ -477,5 +575,7 @@ const anchorNodeKey = anchorTableCellNode.getKey();
   }
+
   formatCells(type) {
     this.editor.update(() => {
       const selection = lexical.$getSelection();
+
       if (!lexical.DEPRECATED_$isGridSelection(selection)) {
@@ -486,2 +586,3 @@ {
       }
+
       const formatSelection = lexical.$createRangeSelection();
@@ -501,9 +602,13 @@ const anchor = formatSelection.anchor;
   }
+
   clearText() {
     this.editor.update(() => {
       const tableNode = lexical.$getNodeByKey(this.tableNodeKey);
+
       if (!$isTableNode(tableNode)) {
         throw new Error('Expected TableNode.');
       }
+
       const selection = lexical.$getSelection();
+
       if (!lexical.DEPRECATED_$isGridSelection(selection)) {
@@ -514,6 +619,8 @@ {
       }
+
       const selectedNodes = selection.getNodes().filter($isTableCellNode);
+
       if (selectedNodes.length === this.grid.columns * this.grid.rows) {
-        tableNode.selectPrevious();
-        // Delete entire table
+        tableNode.selectPrevious(); // Delete entire table
+
         tableNode.remove();
@@ -524,2 +631,3 @@ const rootNode = lexical.$getRoot();
       }
+
       selectedNodes.forEach(cellNode => {
@@ -543,2 +651,3 @@ if (lexical.$isElementNode(cellNode)) {
   }
+
 }
@@ -556,5 +665,7 @@
   const rootElement = editor.getRootElement();
+
   if (rootElement === null) {
     throw new Error('No root element.');
   }
+
   const tableSelection = new TableSelection(editor, tableNode.getKey());
@@ -566,2 +677,3 @@ attachTableSelectionToTableElement(tableElement, tableSelection);
     const cell = getCellFromTarget(event.target);
+
     if (cell !== null) {
@@ -575,5 +687,4 @@ event.preventDefault();
     }
-  });
+  }); // This is the anchor of the selection.
 
-  // This is the anchor of the selection.
   tableElement.addEventListener('mousedown', event => {
@@ -584,3 +695,5 @@ setTimeout(() => {
       }
+
       const cell = getCellFromTarget(event.target);
+
       if (cell !== null) {
@@ -593,5 +706,4 @@ event.preventDefault();
     }, 0);
-  });
+  }); // This is adjusting the focus of the selection.
 
-  // This is adjusting the focus of the selection.
   tableElement.addEventListener('mousemove', event => {
@@ -603,7 +715,10 @@ if (isRangeSelectionHijacked) {
     }
+
     if (isMouseDown) {
       const cell = getCellFromTarget(event.target);
+
       if (cell !== null) {
         const cellX = cell.x;
         const cellY = cell.y;
+
         if (isMouseDown && (tableSelection.anchorX !== cellX || tableSelection.anchorY !== cellY || tableSelection.isHighlightingCells)) {
@@ -615,5 +730,4 @@ event.preventDefault();
     }
-  });
+  }); // Select entire table at this point, when grid selection is ready.
 
-  // Select entire table at this point, when grid selection is ready.
   tableElement.addEventListener('mouseleave', () => {
@@ -623,12 +737,14 @@ if (isMouseDown) {
     }
-  });
+  }); // Clear selection when clicking outside of dom.
 
-  // Clear selection when clicking outside of dom.
   const mouseDownCallback = event => {
     isMouseDown = true;
+
     if (event.button !== 0) {
       return;
     }
+
     editor.update(() => {
       const selection = lexical.$getSelection();
+
       if (lexical.DEPRECATED_$isGridSelection(selection) && selection.gridKey === tableSelection.tableNodeKey && rootElement.contains(event.target)) {
@@ -639,4 +755,6 @@ return tableSelection.clearHighlight();
   };
+
   window.addEventListener('mousedown', mouseDownCallback);
   tableSelection.listenersToRemove.add(() => window.removeEventListener('mousedown', mouseDownCallback));
+
   const mouseUpCallback = event => {
@@ -647,4 +765,6 @@ if (isMouseDown) {
     }
+
     isMouseDown = false;
   };
+
   window.addEventListener('mouseup', mouseUpCallback);
@@ -656,25 +776,32 @@ tableSelection.listenersToRemove.add(() => window.removeEventListener('mouseup', mouseUpCallback));
     const selection = lexical.$getSelection();
+
     if (!$isSelectionInTable(selection, tableNode)) {
       return false;
     }
+
     const direction = 'down';
+
     if (lexical.$isRangeSelection(selection)) {
       if (selection.isCollapsed()) {
         const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+
         if (!$isTableCellNode(tableCellNode)) {
           return false;
         }
+
         const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
         const elementParentNode = utils.$findMatchingParent(selection.anchor.getNode(), n => lexical.$isElementNode(n));
+
         if (elementParentNode == null) {
           throw new Error('Expected BlockNode Parent');
         }
+
         const lastChild = tableCellNode.getLastChild();
         const isSelectionInLastBlock = lastChild && elementParentNode.isParentOf(lastChild) || elementParentNode === lastChild;
+
         if (isSelectionInLastBlock || event.shiftKey) {
           event.preventDefault();
           event.stopImmediatePropagation();
-          event.stopPropagation();
+          event.stopPropagation(); // Start Selection
 
-          // Start Selection
           if (event.shiftKey) {
@@ -684,2 +811,3 @@ tableSelection.setAnchorCellForSelection(tableNode.getCellFromCordsOrThrow(currentCords.x, currentCords.y, tableSelection.grid));
           }
+
           return selectGridNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
@@ -690,5 +818,7 @@ }
       const tableCellNode = selection.focus.getNode();
+
       if (!$isTableCellNode(tableCellNode)) {
         return false;
       }
+
       const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
@@ -700,2 +830,3 @@ event.preventDefault();
     }
+
     return false;
@@ -705,25 +836,32 @@ }, lexical.COMMAND_PRIORITY_HIGH));
     const selection = lexical.$getSelection();
+
     if (!$isSelectionInTable(selection, tableNode)) {
       return false;
     }
+
     const direction = 'up';
+
     if (lexical.$isRangeSelection(selection)) {
       if (selection.isCollapsed()) {
         const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+
         if (!$isTableCellNode(tableCellNode)) {
           return false;
         }
+
         const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
         const elementParentNode = utils.$findMatchingParent(selection.anchor.getNode(), n => lexical.$isElementNode(n));
+
         if (elementParentNode == null) {
           throw new Error('Expected BlockNode Parent');
         }
+
         const lastChild = tableCellNode.getLastChild();
         const isSelectionInLastBlock = lastChild && elementParentNode.isParentOf(lastChild) || elementParentNode === lastChild;
+
         if (isSelectionInLastBlock || event.shiftKey) {
           event.preventDefault();
           event.stopImmediatePropagation();
-          event.stopPropagation();
+          event.stopPropagation(); // Start Selection
 
-          // Start Selection
           if (event.shiftKey) {
@@ -733,2 +871,3 @@ tableSelection.setAnchorCellForSelection(tableNode.getCellFromCordsOrThrow(currentCords.x, currentCords.y, tableSelection.grid));
           }
+
           return selectGridNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
@@ -739,5 +878,7 @@ }
       const tableCellNode = selection.focus.getNode();
+
       if (!$isTableCellNode(tableCellNode)) {
         return false;
       }
+
       const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
@@ -749,2 +890,3 @@ event.preventDefault();
     }
+
     return false;
@@ -754,23 +896,29 @@ }, lexical.COMMAND_PRIORITY_HIGH));
     const selection = lexical.$getSelection();
+
     if (!$isSelectionInTable(selection, tableNode)) {
       return false;
     }
+
     const direction = 'backward';
+
     if (lexical.$isRangeSelection(selection)) {
       if (selection.isCollapsed()) {
         const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+
         if (!$isTableCellNode(tableCellNode)) {
           return false;
         }
+
         const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
         const elementParentNode = utils.$findMatchingParent(selection.anchor.getNode(), n => lexical.$isElementNode(n));
+
         if (elementParentNode == null) {
           throw new Error('Expected BlockNode Parent');
         }
+
         if (selection.anchor.offset === 0 || event.shiftKey) {
           event.preventDefault();
           event.stopImmediatePropagation();
-          event.stopPropagation();
+          event.stopPropagation(); // Start Selection
 
-          // Start Selection
           if (event.shiftKey) {
@@ -780,2 +928,3 @@ tableSelection.setAnchorCellForSelection(tableNode.getCellFromCordsOrThrow(currentCords.x, currentCords.y, tableSelection.grid));
           }
+
           return selectGridNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
@@ -786,5 +935,7 @@ }
       const tableCellNode = selection.focus.getNode();
+
       if (!$isTableCellNode(tableCellNode)) {
         return false;
       }
+
       const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
@@ -796,2 +947,3 @@ event.preventDefault();
     }
+
     return false;
@@ -801,23 +953,29 @@ }, lexical.COMMAND_PRIORITY_HIGH));
     const selection = lexical.$getSelection();
+
     if (!$isSelectionInTable(selection, tableNode)) {
       return false;
     }
+
     const direction = 'forward';
+
     if (lexical.$isRangeSelection(selection)) {
       if (selection.isCollapsed()) {
         const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+
         if (!$isTableCellNode(tableCellNode)) {
           return false;
         }
+
         const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
         const elementParentNode = utils.$findMatchingParent(selection.anchor.getNode(), n => lexical.$isElementNode(n));
+
         if (elementParentNode == null) {
           throw new Error('Expected BlockNode Parent');
         }
+
         if (selection.anchor.offset === selection.anchor.getNode().getTextContentSize() || event.shiftKey) {
           event.preventDefault();
           event.stopImmediatePropagation();
-          event.stopPropagation();
+          event.stopPropagation(); // Start Selection
 
-          // Start Selection
           if (event.shiftKey) {
@@ -827,2 +985,3 @@ tableSelection.setAnchorCellForSelection(tableNode.getCellFromCordsOrThrow(currentCords.x, currentCords.y, tableSelection.grid));
           }
+
           return selectGridNodeInDirection(tableSelection, tableNode, currentCords.x, currentCords.y, direction);
@@ -833,5 +992,7 @@ }
       const tableCellNode = selection.focus.getNode();
+
       if (!$isTableCellNode(tableCellNode)) {
         return false;
       }
+
       const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
@@ -843,9 +1004,13 @@ event.preventDefault();
     }
+
     return false;
   }, lexical.COMMAND_PRIORITY_HIGH));
+
   const deleteTextHandler = command => () => {
     const selection = lexical.$getSelection();
+
     if (!$isSelectionInTable(selection, tableNode)) {
       return false;
     }
+
     if (lexical.DEPRECATED_$isGridSelection(selection)) {
@@ -856,5 +1021,7 @@ tableSelection.clearText();
       const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+
       if (!$isTableCellNode(tableCellNode)) {
         return false;
       }
+
       const anchorNode = selection.anchor.getNode();
@@ -865,2 +1032,3 @@ const focusNode = selection.focus.getNode();
       const selectionContainsPartialTable = isAnchorInside && !isFocusInside || isFocusInside && !isAnchorInside;
+
       if (selectionContainsPartialTable) {
@@ -870,7 +1038,10 @@ tableSelection.clearText();
       }
+
       const nearestElementNode = utils.$findMatchingParent(selection.anchor.getNode(), n => lexical.$isElementNode(n));
       const topLevelCellElementNode = nearestElementNode && utils.$findMatchingParent(nearestElementNode, n => lexical.$isElementNode(n) && $isTableCellNode(n.getParent()));
+
       if (!lexical.$isElementNode(topLevelCellElementNode) || !lexical.$isElementNode(nearestElementNode)) {
         return false;
       }
+
       if (command === lexical.DELETE_LINE_COMMAND && topLevelCellElementNode.getPreviousSibling() === null) {
@@ -880,2 +1051,3 @@ // TODO: Fix Delete Line in Table Cells.
       }
+
       if (command === lexical.DELETE_CHARACTER_COMMAND || command === lexical.DELETE_WORD_COMMAND) {
@@ -894,12 +1066,17 @@ if (selection.isCollapsed() && selection.anchor.offset === 0) {
     }
+
     return false;
   };
+
   [lexical.DELETE_WORD_COMMAND, lexical.DELETE_LINE_COMMAND, lexical.DELETE_CHARACTER_COMMAND].forEach(command => {
     tableSelection.listenersToRemove.add(editor.registerCommand(command, deleteTextHandler(command), lexical.COMMAND_PRIORITY_CRITICAL));
   });
+
   const deleteCellHandler = event => {
     const selection = lexical.$getSelection();
+
     if (!$isSelectionInTable(selection, tableNode)) {
       return false;
     }
+
     if (lexical.DEPRECATED_$isGridSelection(selection)) {
@@ -912,2 +1089,3 @@ event.preventDefault();
       const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+
       if (!$isTableCellNode(tableCellNode)) {
@@ -917,4 +1095,6 @@ return false;
     }
+
     return false;
   };
+
   tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_BACKSPACE_COMMAND, deleteCellHandler, lexical.COMMAND_PRIORITY_CRITICAL));
@@ -924,5 +1104,7 @@ tableSelection.listenersToRemove.add(editor.registerCommand(lexical.KEY_DELETE_COMMAND, deleteCellHandler, lexical.COMMAND_PRIORITY_CRITICAL));
     const selection = lexical.$getSelection();
+
     if (!$isSelectionInTable(selection, tableNode)) {
       return false;
     }
+
     if (lexical.DEPRECATED_$isGridSelection(selection)) {
@@ -933,2 +1115,3 @@ tableSelection.formatCells(payload);
       const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+
       if (!$isTableCellNode(tableCellNode)) {
@@ -938,2 +1121,3 @@ return false;
     }
+
     return false;
@@ -943,5 +1127,7 @@ }, lexical.COMMAND_PRIORITY_CRITICAL));
     const selection = lexical.$getSelection();
+
     if (!$isSelectionInTable(selection, tableNode)) {
       return false;
     }
+
     if (lexical.DEPRECATED_$isGridSelection(selection)) {
@@ -952,2 +1138,3 @@ tableSelection.clearHighlight();
       const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+
       if (!$isTableCellNode(tableCellNode)) {
@@ -957,2 +1144,3 @@ return false;
     }
+
     return false;
@@ -962,10 +1150,14 @@ }, lexical.COMMAND_PRIORITY_CRITICAL));
     const selection = lexical.$getSelection();
+
     if (!$isSelectionInTable(selection, tableNode)) {
       return false;
     }
+
     if (lexical.$isRangeSelection(selection)) {
       const tableCellNode = utils.$findMatchingParent(selection.anchor.getNode(), n => $isTableCellNode(n));
+
       if (!$isTableCellNode(tableCellNode)) {
         return false;
       }
+
       if (selection.isCollapsed()) {
@@ -978,2 +1170,3 @@ const currentCords = tableNode.getCordsFromCellNode(tableCellNode, tableSelection.grid);
     }
+
     return false;
@@ -987,2 +1180,3 @@ }, lexical.COMMAND_PRIORITY_HIGH));
     const prevSelection = lexical.$getPreviousSelection();
+
     if (selection && lexical.$isRangeSelection(selection) && !selection.isCollapsed()) {
@@ -995,2 +1189,3 @@ const anchorNode = selection.anchor.getNode();
       const selectionIsInsideTable = isAnchorInside && isFocusInside && !tableNode.isSelected();
+
       if (selectionContainsPartialTable) {
@@ -1010,2 +1205,3 @@ const isBackward = selection.isBackward();
         } = tableSelection;
+
         if (selection.getNodes().filter($isTableCellNode).length === grid.rows * grid.columns) {
@@ -1016,2 +1212,3 @@ const gridSelection = lexical.DEPRECATED_$createGridSelection();
           const lastCell = tableNode.getLastChildOrThrow().getLastChild();
+
           if (firstCell != null && lastCell != null) {
@@ -1026,2 +1223,3 @@ gridSelection.set(tableKey, firstCell.getKey(), lastCell.getKey());
     }
+
     if (selection && !selection.is(prevSelection) && (lexical.DEPRECATED_$isGridSelection(selection) || lexical.DEPRECATED_$isGridSelection(prevSelection)) && tableSelection.gridSelection && !tableSelection.gridSelection.is(prevSelection)) {
@@ -1033,4 +1231,6 @@ if (lexical.DEPRECATED_$isGridSelection(selection) && selection.gridKey === tableSelection.tableNodeKey) {
       }
+
       return false;
     }
+
     if (tableSelection.hasHijackedSelectionStyles && !tableNode.isSelected()) {
@@ -1042,2 +1242,3 @@ $removeHighlightStyleToTable(tableSelection);
     }
+
     return false;
@@ -1055,14 +1256,20 @@ }, lexical.COMMAND_PRIORITY_CRITICAL));
   let currentNode = node;
+
   while (currentNode != null) {
     const nodeName = currentNode.nodeName;
+
     if (nodeName === 'TD' || nodeName === 'TH') {
       // @ts-expect-error: internal field
       const cell = currentNode._cell;
+
       if (cell === undefined) {
         return null;
       }
+
       return cell;
     }
+
     currentNode = currentNode.parentNode;
   }
+
   return null;
@@ -1081,4 +1288,6 @@ }
   cells.length = 0;
+
   while (currentNode != null) {
     const nodeMame = currentNode.nodeName;
+
     if (nodeMame === 'TD' || nodeMame === 'TH') {
@@ -1091,12 +1300,14 @@ const elem = currentNode;
         y
-      };
+      }; // @ts-expect-error: internal field
 
-      // @ts-expect-error: internal field
       currentNode._cell = cell;
+
       if (cells[y] === undefined) {
         cells[y] = [];
       }
+
       cells[y][x] = cell;
     } else {
       const child = currentNode.firstChild;
+
       if (child != null) {
@@ -1107,3 +1318,5 @@ currentNode = child;
     }
+
     const sibling = currentNode.nextSibling;
+
     if (sibling != null) {
@@ -1114,8 +1327,12 @@ x++;
     }
+
     const parent = currentNode.parentNode;
+
     if (parent != null) {
       const parentSibling = parent.nextSibling;
+
       if (parentSibling == null) {
         break;
       }
+
       y++;
@@ -1126,2 +1343,3 @@ x = 0;
   }
+
   grid.columns = x + 1;
@@ -1136,2 +1354,3 @@ grid.rows = y + 1;
     const elem = cell.elem;
+
     if (selectedCellNodes.has(lexicalNode)) {
@@ -1146,2 +1365,3 @@ cell.highlighted = true;
       elem.style.removeProperty('caret-color');
+
       if (!elem.getAttribute('style')) {
@@ -1158,7 +1378,10 @@ elem.removeAttribute('style');
   } = grid;
+
   for (let y = 0; y < cells.length; y++) {
     const row = cells[y];
+
     for (let x = 0; x < row.length; x++) {
       const cell = row[x];
       const lexicalNode = lexical.$getNearestNodeFromDOMNode(cell.elem);
+
       if (lexicalNode !== null) {
@@ -1189,2 +1412,3 @@ cb(cell, lexicalNode, {
     elem.style.removeProperty('caret-color');
+
     if (!elem.getAttribute('style')) {
@@ -1195,4 +1419,6 @@ elem.removeAttribute('style');
 }
+
 const selectGridNodeInDirection = (tableSelection, tableNode, x, y, direction) => {
   const isForward = direction === 'forward';
+
   switch (direction) {
@@ -1212,3 +1438,5 @@ case 'backward':
       }
+
       return true;
+
     case 'up':
@@ -1220,3 +1448,5 @@ if (y !== 0) {
       }
+
       return true;
+
     case 'down':
@@ -1228,3 +1458,5 @@ if (y !== tableSelection.grid.rows - 1) {
       }
+
       return true;
+
     default:
@@ -1234,4 +1466,6 @@ return false;
 };
+
 const adjustFocusNodeInDirection = (tableSelection, tableNode, x, y, direction) => {
   const isForward = direction === 'forward';
+
   switch (direction) {
@@ -1243,3 +1477,5 @@ case 'backward':
       }
+
       return true;
+
     case 'up':
@@ -1252,2 +1488,3 @@ if (y !== 0) {
       }
+
     case 'down':
@@ -1260,2 +1497,3 @@ if (y !== tableSelection.grid.rows - 1) {
       }
+
     default:
@@ -1265,2 +1503,3 @@ return false;
 };
+
 function $isSelectionInTable(selection, tableNode) {
@@ -1272,6 +1511,9 @@ if (lexical.$isRangeSelection(selection) || lexical.DEPRECATED_$isGridSelection(selection)) {
   }
+
   return false;
 }
+
 function selectTableCellNode(tableCell) {
   const possibleParagraph = tableCell.getChildren().find(n => lexical.$isParagraphNode(n));
+
   if (lexical.$isParagraphNode(possibleParagraph)) {
@@ -1291,12 +1533,14 @@ possibleParagraph.selectEnd();
  */
+
 /** @noInheritDoc */
 class TableNode extends lexical.DEPRECATED_GridNode {
   /** @internal */
-
   static getType() {
     return 'table';
   }
+
   static clone(node) {
     return new TableNode(node.__key);
   }
+
   static importDOM() {
@@ -1310,11 +1554,13 @@ return {
   }
+
   static importJSON(_serializedNode) {
     return $createTableNode();
   }
+
   constructor(key) {
     super(key);
   }
+
   exportJSON() {
-    return {
-      ...super.exportJSON(),
+    return { ...super.exportJSON(),
       type: 'table',
@@ -1324,2 +1570,3 @@ version: 1
   }
+
   createDOM(config, editor) {
@@ -1330,8 +1577,9 @@ const tableElement = document.createElement('table');
   }
+
   updateDOM() {
     return false;
   }
+
   exportDOM(editor) {
-    return {
-      ...super.exportDOM(editor),
+    return { ...super.exportDOM(editor),
       after: tableElement => {
@@ -1344,6 +1592,9 @@ if (tableElement) {
           const firstRow = this.getFirstChildOrThrow();
+
           if (!$isTableRowNode(firstRow)) {
             throw new Error('Expected to find row node.');
           }
+
           const colCount = firstRow.getChildrenSize();
+
           for (let i = 0; i < colCount; i++) {
@@ -1353,2 +1604,3 @@ const col = document.createElement('col');
           }
+
           newElement.replaceChildren(colGroup, tBody);
@@ -1360,11 +1612,15 @@ return newElement;
   }
+
   canExtractContents() {
     return false;
   }
+
   canBeEmpty() {
     return false;
   }
+
   isShadowRoot() {
     return true;
   }
+
   getCordsFromCellNode(tableCellNode, grid) {
@@ -1375,7 +1631,10 @@ const {
     } = grid;
+
     for (let y = 0; y < rows; y++) {
       const row = cells[y];
+
       if (row == null) {
         throw new Error(`Row not found at y:${y}`);
       }
+
       const x = row.findIndex(({
@@ -1387,2 +1646,3 @@ elem
       });
+
       if (x !== -1) {
@@ -1395,4 +1655,6 @@ return {
     }
+
     throw new Error('Cell not found in table.');
   }
+
   getCellFromCords(x, y, grid) {
@@ -1403,48 +1665,68 @@ const {
     const row = cells[y];
+
     if (row == null) {
       return null;
     }
+
     const cell = row[x];
+
     if (cell == null) {
       return null;
     }
+
     return cell;
   }
+
   getCellFromCordsOrThrow(x, y, grid) {
     const cell = this.getCellFromCords(x, y, grid);
+
     if (!cell) {
       throw new Error('Cell not found at cords.');
     }
+
     return cell;
   }
+
   getCellNodeFromCords(x, y, grid) {
     const cell = this.getCellFromCords(x, y, grid);
+
     if (cell == null) {
       return null;
     }
+
     const node = lexical.$getNearestNodeFromDOMNode(cell.elem);
+
     if ($isTableCellNode(node)) {
       return node;
     }
+
     return null;
   }
+
   getCellNodeFromCordsOrThrow(x, y, grid) {
     const node = this.getCellNodeFromCords(x, y, grid);
+
     if (!node) {
       throw new Error('Node at cords not TableCellNode.');
     }
+
     return node;
   }
+
   canSelectBefore() {
     return true;
   }
+
   canIndent() {
     return false;
   }
+
 }
 function $getElementGridForTableNode(editor, tableNode) {
   const tableElement = editor.getElementByKey(tableNode.getKey());
+
   if (tableElement == null) {
     throw new Error('Table Element Not Found');
   }
+
   return getTableGrid(tableElement);
@@ -1473,6 +1755,9 @@ }
   const tableNode = $createTableNode();
+
   for (let iRow = 0; iRow < rowCount; iRow++) {
     const tableRowNode = $createTableRowNode();
+
     for (let iColumn = 0; iColumn < columnCount; iColumn++) {
       let headerState = TableCellHeaderStates.NO_STATUS;
+
       if (typeof includeHeaders === 'object') {
@@ -1485,2 +1770,3 @@ if (iRow === 0 && includeHeaders.rows) headerState |= TableCellHeaderStates.ROW;
       }
+
       const tableCellNode = $createTableCellNode(headerState);
@@ -1492,4 +1778,6 @@ const paragraphNode = lexical.$createParagraphNode();
     }
+
     tableNode.append(tableRowNode);
   }
+
   return tableNode;
@@ -1499,5 +1787,7 @@ }
   const node = utils.$findMatchingParent(startingNode, n => $isTableCellNode(n));
+
   if ($isTableCellNode(node)) {
     return node;
   }
+
   return null;
@@ -1507,5 +1797,7 @@ }
   const node = utils.$findMatchingParent(startingNode, n => $isTableRowNode(n));
+
   if ($isTableRowNode(node)) {
     return node;
   }
+
   throw new Error('Expected table cell to be inside of table row.');
@@ -1515,5 +1807,7 @@ }
   const node = utils.$findMatchingParent(startingNode, n => $isTableNode(n));
+
   if ($isTableNode(node)) {
     return node;
   }
+
   throw new Error('Expected table cell to be inside of table.');
@@ -1545,5 +1839,7 @@ }
   const tableRows = tableNode.getChildren();
+
   if (indexToDelete >= tableRows.length || indexToDelete < 0) {
     throw new Error('Expected table cell to be inside of table row.');
   }
+
   const targetRowNode = tableRows[indexToDelete];
@@ -1555,6 +1851,9 @@ targetRowNode.remove();
   const tableRows = tableNode.getChildren();
+
   if (targetIndex >= tableRows.length || targetIndex < 0) {
     throw new Error('Table row target index out of range');
   }
+
   const targetRowNode = tableRows[targetIndex];
+
   if ($isTableRowNode(targetRowNode)) {
@@ -1565,7 +1864,10 @@ for (let r = 0; r < rowCount; r++) {
       const newTableRowNode = $createTableRowNode();
+
       for (let c = 0; c < tableColumnCount; c++) {
         const tableCellFromTargetRow = tableRowCells[c];
+
         if (!$isTableCellNode(tableCellFromTargetRow)) {
           throw Error(`Expected table cell`);
         }
+
         const {
@@ -1577,5 +1879,7 @@ above,
         const width = above && above.getWidth() || below && below.getWidth() || undefined;
+
         if (above && above.hasHeaderState(TableCellHeaderStates.COLUMN) || below && below.hasHeaderState(TableCellHeaderStates.COLUMN)) {
           headerState |= TableCellHeaderStates.COLUMN;
         }
+
         const tableCellNode = $createTableCellNode(headerState, 1, width);
@@ -1585,2 +1889,3 @@ tableCellNode.append(lexical.$createParagraphNode());
       }
+
       if (shouldInsertAfter) {
@@ -1595,2 +1900,3 @@ targetRowNode.insertAfter(newTableRowNode);
   }
+
   return tableNode;
@@ -1600,14 +1906,20 @@ }
   const tableRows = tableNode.getChildren();
+
   for (let r = 0; r < tableRows.length; r++) {
     const currentTableRowNode = tableRows[r];
+
     if ($isTableRowNode(currentTableRowNode)) {
       for (let c = 0; c < columnCount; c++) {
         const tableRowChildren = currentTableRowNode.getChildren();
+
         if (targetIndex >= tableRowChildren.length || targetIndex < 0) {
           throw new Error('Table column target index out of range');
         }
+
         const targetCell = tableRowChildren[targetIndex];
+
         if (!$isTableCellNode(targetCell)) {
           throw Error(`Expected table cell`);
         }
+
         const {
@@ -1618,7 +1930,10 @@ left,
         let headerState = TableCellHeaderStates.NO_STATUS;
+
         if (left && left.hasHeaderState(TableCellHeaderStates.ROW) || right && right.hasHeaderState(TableCellHeaderStates.ROW)) {
           headerState |= TableCellHeaderStates.ROW;
         }
+
         const newTableCell = $createTableCellNode(headerState);
         newTableCell.append(lexical.$createParagraphNode());
+
         if (shouldInsertAfter) {
@@ -1632,2 +1947,3 @@ targetCell.insertAfter(newTableCell);
   }
+
   return tableNode;
@@ -1637,12 +1953,17 @@ }
   const tableRows = tableNode.getChildren();
+
   for (let i = 0; i < tableRows.length; i++) {
     const currentTableRowNode = tableRows[i];
+
     if ($isTableRowNode(currentTableRowNode)) {
       const tableRowChildren = currentTableRowNode.getChildren();
+
       if (targetIndex >= tableRowChildren.length || targetIndex < 0) {
         throw new Error('Table column target index out of range');
       }
+
       tableRowChildren[targetIndex].remove();
     }
   }
+
   return tableNode;
@@ -1649,0 +1970,0 @@ }

LexicalTable.prod.js

@@ -9,5 +9,5 @@ /**
 class r extends d.DEPRECATED_GridCellNode{static getType(){return"tablecell"}static clone(a){return new r(a.__headerState,a.__colSpan,a.__width,a.__key)}static importDOM(){return{td:()=>({conversion:x,priority:0}),th:()=>({conversion:x,priority:0})}}static importJSON(a){return z(a.headerState,a.colSpan,a.width||void 0)}constructor(a=q.NO_STATUS,b=1,e,h){super(b,h);this.__headerState=a;this.__width=e}createDOM(a){let b=document.createElement(this.getTag());this.__width&&(b.style.width=`${this.__width}px`);
-n.addClassNamesToElement(b,a.theme.tableCell,this.hasHeader()&&a.theme.tableCellHeader);return b}exportDOM(a){({element:a}=super.exportDOM(a));if(a){let b=this.getParentOrThrow().getChildrenSize();a.style.border="1px solid black";a.style.width=`${this.getWidth()||Math.max(90,700/b)}px`;a.style.verticalAlign="top";a.style.textAlign="start";this.hasHeader()&&(a.style.backgroundColor="#f2f3f5")}return{element:a}}exportJSON(){return{...super.exportJSON(),colSpan:super.__colSpan,headerState:this.__headerState,
-type:"tablecell",width:this.getWidth()}}getTag(){return this.hasHeader()?"th":"td"}setHeaderStyles(a){this.getWritable().__headerState=a;return this.__headerState}getHeaderStyles(){return this.getLatest().__headerState}setWidth(a){this.getWritable().__width=a;return this.__width}getWidth(){return this.getLatest().__width}toggleHeaderStyle(a){let b=this.getWritable();b.__headerState=(b.__headerState&a)===a?b.__headerState-a:b.__headerState+a;return b}hasHeaderState(a){return(this.getHeaderStyles()&
-a)===a}hasHeader(){return this.getLatest().__headerState!==q.NO_STATUS}updateDOM(a){return a.__headerState!==this.__headerState||a.__width!==this.__width}isShadowRoot(){return!0}collapseAtStart(){return!0}canBeEmpty(){return!1}canIndent(){return!1}}
+1!==this.__colSpan&&(b.colSpan=this.__colSpan);1!==this.__rowSpan&&(b.rowSpan=this.__rowSpan);n.addClassNamesToElement(b,a.theme.tableCell,this.hasHeader()&&a.theme.tableCellHeader);return b}exportDOM(a){({element:a}=super.exportDOM(a));if(a){let b=this.getParentOrThrow().getChildrenSize();a.style.border="1px solid black";1!==this.__colSpan&&(a.colSpan=this.__colSpan);1!==this.__rowSpan&&(a.rowSpan=this.__rowSpan);a.style.width=`${this.getWidth()||Math.max(90,700/b)}px`;a.style.verticalAlign="top";
+a.style.textAlign="start";this.hasHeader()&&(a.style.backgroundColor="#f2f3f5")}return{element:a}}exportJSON(){return{...super.exportJSON(),colSpan:super.__colSpan,headerState:this.__headerState,type:"tablecell",width:this.getWidth()}}getTag(){return this.hasHeader()?"th":"td"}setHeaderStyles(a){this.getWritable().__headerState=a;return this.__headerState}getHeaderStyles(){return this.getLatest().__headerState}setWidth(a){this.getWritable().__width=a;return this.__width}getWidth(){return this.getLatest().__width}toggleHeaderStyle(a){let b=
+this.getWritable();b.__headerState=(b.__headerState&a)===a?b.__headerState-a:b.__headerState+a;return b}hasHeaderState(a){return(this.getHeaderStyles()&a)===a}hasHeader(){return this.getLatest().__headerState!==q.NO_STATUS}updateDOM(a){return a.__headerState!==this.__headerState||a.__width!==this.__width||a.__colSpan!==this.__colSpan||a.__rowSpan!==this.__rowSpan}isShadowRoot(){return!0}collapseAtStart(){return!0}canBeEmpty(){return!1}canIndent(){return!1}}
 function x(a){a=a.nodeName.toLowerCase();return{forChild:(b,e)=>{if(B(e)&&!d.$isElementNode(b)){e=d.$createParagraphNode();if(d.$isLineBreakNode(b)&&"\n"===b.getTextContent())return null;e.append(b);return e}return b},node:z("th"===a?q.ROW:q.NO_STATUS)}}function z(a,b=1,e){return d.$applyNodeReplacement(new r(a,b,e))}function B(a){return a instanceof r}
@@ -14,0 +14,0 @@ class C extends d.DEPRECATED_GridRowNode{static getType(){return"tablerow"}static clone(a){return new C(a.__height,a.__key)}static importDOM(){return{tr:()=>({conversion:D,priority:0})}}static importJSON(a){return E(a.height)}constructor(a,b){super(b);this.__height=a}exportJSON(){return{...super.exportJSON(),type:"tablerow",version:1}}createDOM(a){let b=document.createElement("tr");this.__height&&(b.style.height=`${this.__height}px`);n.addClassNamesToElement(b,a.theme.tableRow);return b}isShadowRoot(){return!0}setHeight(a){this.getWritable().__height=

package.json

@@ -11,9 +11,9 @@ {
   "license": "MIT",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "main": "LexicalTable.js",
   "peerDependencies": {
-    "lexical": "0.8.1"
+    "lexical": "0.9.0"
   },
   "dependencies": {
-    "@lexical/utils": "0.8.1"
+    "@lexical/utils": "0.9.0"
   },
@@ -20,0 +20,0 @@ "repository": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

103988

increased by0.89%

Dependency changes

• + Added@lexical/list@0.9.0(transitive)

• + Added@lexical/selection@0.9.0(transitive)

• + Added@lexical/utils@0.9.0(transitive)

• + Addedlexical@0.9.0(transitive)

• - Removed@lexical/list@0.8.1(transitive)

• - Removed@lexical/selection@0.8.1(transitive)

• - Removed@lexical/utils@0.8.1(transitive)

• - Removedlexical@0.8.1(transitive)

• Updated@lexical/utils@0.9.0