@lexical/react 0.14.4 → 0.15.0

package/LexicalTableOfContents.dev.js

@@ -3,11 +3,14 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 'use strict';
 
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var richText = require('@lexical/rich-text');
+var utils = require('@lexical/utils');
 var lexical = require('lexical');
 var react = require('react');
 
@@ -18,6 +21,7 @@ var react = require('react');
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 function toEntry(heading) {
   return [heading.getKey(), heading.getTextContent(), heading.getTag()];
 }
@@ -28,12 +32,20 @@ function $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTable
   const newEntry = toEntry(newHeading);
   let newTableOfContents = [];
   if (prevHeading === null) {
+    // check if key already exists
+    if (currentTableOfContents.length > 0 && currentTableOfContents[0][0] === newHeading.__key) {
+      return currentTableOfContents;
+    }
     newTableOfContents = [newEntry, ...currentTableOfContents];
   } else {
     for (let i = 0; i < currentTableOfContents.length; i++) {
       const key = currentTableOfContents[i][0];
       newTableOfContents.push(currentTableOfContents[i]);
       if (key === prevHeading.getKey() && key !== newHeading.getKey()) {
+        // check if key already exists
+        if (i + 1 < currentTableOfContents.length && currentTableOfContents[i + 1][0] === newHeading.__key) {
+          return currentTableOfContents;
+        }
         newTableOfContents.push(newEntry);
       }
     }
@@ -82,6 +94,13 @@ function $updateHeadingPosition(prevHeading, heading, currentTableOfContents) {
   }
   return newTableOfContents;
 }
+function $getPreviousHeading(node) {
+  let prevHeading = utils.$getNextRightPreorderNode(node);
+  while (prevHeading !== null && !richText.$isHeadingNode(prevHeading)) {
+    prevHeading = utils.$getNextRightPreorderNode(prevHeading);
+  }
+  return prevHeading;
+}
 function LexicalTableOfContentsPlugin({
   children
 }) {
@@ -100,6 +119,31 @@ function LexicalTableOfContentsPlugin({
       }
       setTableOfContents(currentTableOfContents);
     });
+    const removeRootUpdateListener = editor.registerUpdateListener(({
+      editorState,
+      dirtyElements
+    }) => {
+      editorState.read(() => {
+        const updateChildHeadings = node => {
+          for (const child of node.getChildren()) {
+            if (richText.$isHeadingNode(child)) {
+              const prevHeading = $getPreviousHeading(child);
+              currentTableOfContents = $updateHeadingPosition(prevHeading, child, currentTableOfContents);
+              setTableOfContents(currentTableOfContents);
+            } else if (lexical.$isElementNode(child)) {
+              updateChildHeadings(child);
+            }
+          }
+        };
+
+        // If a node is changes, all child heading positions need to be updated
+        lexical.$getRoot().getChildren().forEach(node => {
+          if (lexical.$isElementNode(node) && dirtyElements.get(node.__key)) {
+            updateChildHeadings(node);
+          }
+        });
+      });
+    });
 
     // Listen to updates to heading mutations and update state
     const removeHeaderMutationListener = editor.registerMutationListener(richText.HeadingNode, mutatedNodes => {
@@ -108,10 +152,7 @@ function LexicalTableOfContentsPlugin({
           if (mutation === 'created') {
             const newHeading = lexical.$getNodeByKey(nodeKey);
             if (newHeading !== null) {
-              let prevHeading = newHeading.getPreviousSibling();
-              while (prevHeading !== null && !richText.$isHeadingNode(prevHeading)) {
-                prevHeading = prevHeading.getPreviousSibling();
-              }
+              const prevHeading = $getPreviousHeading(newHeading);
               currentTableOfContents = $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTableOfContents);
             }
           } else if (mutation === 'destroyed') {
@@ -119,10 +160,7 @@ function LexicalTableOfContentsPlugin({
           } else if (mutation === 'updated') {
             const newHeading = lexical.$getNodeByKey(nodeKey);
             if (newHeading !== null) {
-              let prevHeading = newHeading.getPreviousSibling();
-              while (prevHeading !== null && !richText.$isHeadingNode(prevHeading)) {
-                prevHeading = prevHeading.getPreviousSibling();
-              }
+              const prevHeading = $getPreviousHeading(newHeading);
               currentTableOfContents = $updateHeadingPosition(prevHeading, newHeading, currentTableOfContents);
             }
           }
@@ -151,6 +189,7 @@ function LexicalTableOfContentsPlugin({
     return () => {
       removeHeaderMutationListener();
       removeTextNodeMutationListener();
+      removeRootUpdateListener();
     };
   }, [editor]);
   return children(tableOfContents, editor);

package/LexicalTableOfContents.dev.mjs

@@ -3,10 +3,13 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $isHeadingNode, HeadingNode } from '@lexical/rich-text';
-import { $getRoot, $getNodeByKey, TextNode } from 'lexical';
+import { $getNextRightPreorderNode } from '@lexical/utils';
+import { $getRoot, $isElementNode, $getNodeByKey, TextNode } from 'lexical';
 import { useState, useEffect } from 'react';
 
 /**
@@ -16,6 +19,7 @@ import { useState, useEffect } from 'react';
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 function toEntry(heading) {
   return [heading.getKey(), heading.getTextContent(), heading.getTag()];
 }
@@ -26,12 +30,20 @@ function $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTable
   const newEntry = toEntry(newHeading);
   let newTableOfContents = [];
   if (prevHeading === null) {
+    // check if key already exists
+    if (currentTableOfContents.length > 0 && currentTableOfContents[0][0] === newHeading.__key) {
+      return currentTableOfContents;
+    }
     newTableOfContents = [newEntry, ...currentTableOfContents];
   } else {
     for (let i = 0; i < currentTableOfContents.length; i++) {
       const key = currentTableOfContents[i][0];
       newTableOfContents.push(currentTableOfContents[i]);
       if (key === prevHeading.getKey() && key !== newHeading.getKey()) {
+        // check if key already exists
+        if (i + 1 < currentTableOfContents.length && currentTableOfContents[i + 1][0] === newHeading.__key) {
+          return currentTableOfContents;
+        }
         newTableOfContents.push(newEntry);
       }
     }
@@ -80,6 +92,13 @@ function $updateHeadingPosition(prevHeading, heading, currentTableOfContents) {
   }
   return newTableOfContents;
 }
+function $getPreviousHeading(node) {
+  let prevHeading = $getNextRightPreorderNode(node);
+  while (prevHeading !== null && !$isHeadingNode(prevHeading)) {
+    prevHeading = $getNextRightPreorderNode(prevHeading);
+  }
+  return prevHeading;
+}
 function LexicalTableOfContentsPlugin({
   children
 }) {
@@ -98,6 +117,31 @@ function LexicalTableOfContentsPlugin({
       }
       setTableOfContents(currentTableOfContents);
     });
+    const removeRootUpdateListener = editor.registerUpdateListener(({
+      editorState,
+      dirtyElements
+    }) => {
+      editorState.read(() => {
+        const updateChildHeadings = node => {
+          for (const child of node.getChildren()) {
+            if ($isHeadingNode(child)) {
+              const prevHeading = $getPreviousHeading(child);
+              currentTableOfContents = $updateHeadingPosition(prevHeading, child, currentTableOfContents);
+              setTableOfContents(currentTableOfContents);
+            } else if ($isElementNode(child)) {
+              updateChildHeadings(child);
+            }
+          }
+        };
+
+        // If a node is changes, all child heading positions need to be updated
+        $getRoot().getChildren().forEach(node => {
+          if ($isElementNode(node) && dirtyElements.get(node.__key)) {
+            updateChildHeadings(node);
+          }
+        });
+      });
+    });
 
     // Listen to updates to heading mutations and update state
     const removeHeaderMutationListener = editor.registerMutationListener(HeadingNode, mutatedNodes => {
@@ -106,10 +150,7 @@ function LexicalTableOfContentsPlugin({
           if (mutation === 'created') {
             const newHeading = $getNodeByKey(nodeKey);
             if (newHeading !== null) {
-              let prevHeading = newHeading.getPreviousSibling();
-              while (prevHeading !== null && !$isHeadingNode(prevHeading)) {
-                prevHeading = prevHeading.getPreviousSibling();
-              }
+              const prevHeading = $getPreviousHeading(newHeading);
               currentTableOfContents = $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTableOfContents);
             }
           } else if (mutation === 'destroyed') {
@@ -117,10 +158,7 @@ function LexicalTableOfContentsPlugin({
           } else if (mutation === 'updated') {
             const newHeading = $getNodeByKey(nodeKey);
             if (newHeading !== null) {
-              let prevHeading = newHeading.getPreviousSibling();
-              while (prevHeading !== null && !$isHeadingNode(prevHeading)) {
-                prevHeading = prevHeading.getPreviousSibling();
-              }
+              const prevHeading = $getPreviousHeading(newHeading);
               currentTableOfContents = $updateHeadingPosition(prevHeading, newHeading, currentTableOfContents);
             }
           }
@@ -149,6 +187,7 @@ function LexicalTableOfContentsPlugin({
     return () => {
       removeHeaderMutationListener();
       removeTextNodeMutationListener();
+      removeRootUpdateListener();
     };
   }, [editor]);
   return children(tableOfContents, editor);

package/LexicalTableOfContents.js

@@ -3,7 +3,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 'use strict'
 const LexicalTableOfContents = process.env.NODE_ENV === 'development' ? require('./LexicalTableOfContents.dev.js') : require('./LexicalTableOfContents.prod.js');
 module.exports = LexicalTableOfContents;

package/LexicalTableOfContents.mjs

@@ -3,7 +3,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 import * as modDev from './LexicalTableOfContents.dev.mjs';
 import * as modProd from './LexicalTableOfContents.prod.mjs';
 const mod = process.env.NODE_ENV === 'development' ? modDev : modProd;

package/LexicalTableOfContents.node.mjs

@@ -3,6 +3,8 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 const mod = await (process.env.NODE_ENV === 'development' ? import('./LexicalTableOfContents.dev.mjs') : import('./LexicalTableOfContents.prod.mjs'));
 export default mod.default;

package/LexicalTableOfContents.prod.js

@@ -3,8 +3,10 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
-'use strict';var l=require("@lexical/react/LexicalComposerContext"),m=require("@lexical/rich-text"),q=require("lexical"),u=require("react");function w(n){return[n.getKey(),n.getTextContent(),n.getTag()]}
-module.exports=function({children:n}){let [x,r]=u.useState([]),[h]=l.useLexicalComposerContext();u.useEffect(()=>{let c=[];h.getEditorState().read(()=>{let p=q.$getRoot().getChildren();for(let a of p)m.$isHeadingNode(a)&&c.push([a.getKey(),a.getTextContent(),a.getTag()]);r(c)});let y=h.registerMutationListener(m.HeadingNode,p=>{h.getEditorState().read(()=>{for(const [k,t]of p)if("created"===t){var a=q.$getNodeByKey(k);if(null!==a){for(var b=a.getPreviousSibling();null!==b&&!m.$isHeadingNode(b);)b=
-b.getPreviousSibling();var d=c;if(null===a)c=d;else{var g=w(a),e=[];if(null===b)e=[g,...d];else for(let f=0;f<d.length;f++){let v=d[f][0];e.push(d[f]);v===b.getKey()&&v!==a.getKey()&&e.push(g)}c=e}}}else if("destroyed"===t){b=k;a=c;d=[];for(let f of a)f[0]!==b&&d.push(f);c=d}else if("updated"===t&&(a=q.$getNodeByKey(k),null!==a)){for(b=a.getPreviousSibling();null!==b&&!m.$isHeadingNode(b);)b=b.getPreviousSibling();d=c;g=[];e=w(a);b||g.push(e);for(let f of d)f[0]!==a.getKey()&&(g.push(f),b&&f[0]===
-b.getKey()&&g.push(e));c=g}r(c)})}),z=h.registerMutationListener(q.TextNode,p=>{h.getEditorState().read(()=>{for(const [d,g]of p)if("updated"===g){var a=q.$getNodeByKey(d);if(null!==a&&(a=a.getParentOrThrow(),m.$isHeadingNode(a))){var b=c;let e=[];for(let k of b)k[0]===a.getKey()?e.push(w(a)):e.push(k);c=e;r(c)}}})});return()=>{y();z()}},[h]);return n(x,h)}
+
+'use strict';var h=require("@lexical/react/LexicalComposerContext"),q=require("@lexical/rich-text"),v=require("@lexical/utils"),w=require("lexical"),x=require("react");function y(d){return[d.getKey(),d.getTextContent(),d.getTag()]}function z(d,t,n){let e=[],c=y(t);d||e.push(c);for(let r of n)r[0]!==t.getKey()&&(e.push(r),d&&r[0]===d.getKey()&&e.push(c));return e}function B(d){for(d=v.$getNextRightPreorderNode(d);null!==d&&!q.$isHeadingNode(d);)d=v.$getNextRightPreorderNode(d);return d}
+module.exports=function({children:d}){let [t,n]=x.useState([]),[e]=h.useLexicalComposerContext();x.useEffect(()=>{let c=[];e.getEditorState().read(()=>{let l=w.$getRoot().getChildren();for(let a of l)q.$isHeadingNode(a)&&c.push([a.getKey(),a.getTextContent(),a.getTag()]);n(c)});let r=e.registerUpdateListener(({editorState:l,dirtyElements:a})=>{l.read(()=>{const f=b=>{for(const g of b.getChildren())q.$isHeadingNode(g)?(b=B(g),c=z(b,g,c),n(c)):w.$isElementNode(g)&&f(g)};w.$getRoot().getChildren().forEach(b=>
+{w.$isElementNode(b)&&a.get(b.__key)&&f(b)})})}),C=e.registerMutationListener(q.HeadingNode,l=>{e.getEditorState().read(()=>{for(const [g,m]of l)if("created"===m){var a=w.$getNodeByKey(g);if(null!==a)a:{var f=B(a),b=c;if(null===a){c=b;break a}let k=y(a),u=[];if(null===f){if(0<b.length&&b[0][0]===a.__key){c=b;break a}u=[k,...b]}else for(let p=0;p<b.length;p++){let A=b[p][0];u.push(b[p]);if(A===f.getKey()&&A!==a.getKey()){if(p+1<b.length&&b[p+1][0]===a.__key){c=b;break a}u.push(k)}}c=u}}else if("destroyed"===
+m){f=g;a=c;b=[];for(let k of a)k[0]!==f&&b.push(k);c=b}else"updated"===m&&(f=w.$getNodeByKey(g),null!==f&&(a=B(f),c=z(a,f,c)));n(c)})}),D=e.registerMutationListener(w.TextNode,l=>{e.getEditorState().read(()=>{for(const [b,g]of l)if("updated"===g){var a=w.$getNodeByKey(b);if(null!==a&&(a=a.getParentOrThrow(),q.$isHeadingNode(a))){var f=c;let m=[];for(let k of f)k[0]===a.getKey()?m.push(y(a)):m.push(k);c=m;n(c)}}})});return()=>{C();D();r()}},[e]);return d(t,e)}

package/LexicalTableOfContents.prod.mjs

@@ -3,5 +3,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
-import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{$isHeadingNode as e,HeadingNode as o}from"@lexical/rich-text";import{$getRoot as n,$getNodeByKey as r,TextNode as i}from"lexical";import{useState as s,useEffect as u}from"react";function l(t){return[t.getKey(),t.getTextContent(),t.getTag()]}function f(t,e,o){if(null===e)return o;const n=l(e);let r=[];if(null===t)r=[n,...o];else for(let i=0;i<o.length;i++){const s=o[i][0];r.push(o[i]),s===t.getKey()&&s!==e.getKey()&&r.push(n)}return r}function c(t,e){const o=[];for(const n of e)n[0]!==t&&o.push(n);return o}function g(t,e){const o=[];for(const n of e)n[0]===t.getKey()?o.push(l(t)):o.push(n);return o}function a(t,e,o){const n=[],r=l(e);t||n.push(r);for(const i of o)i[0]!==e.getKey()&&(n.push(i),t&&i[0]===t.getKey()&&n.push(r));return n}function p({children:l}){const[p,d]=s([]),[h]=t();return u((()=>{let t=[];h.getEditorState().read((()=>{const o=n().getChildren();for(const n of o)e(n)&&t.push([n.getKey(),n.getTextContent(),n.getTag()]);d(t)}));const s=h.registerMutationListener(o,(o=>{h.getEditorState().read((()=>{for(const[n,i]of o)if("created"===i){const o=r(n);if(null!==o){let n=o.getPreviousSibling();for(;null!==n&&!e(n);)n=n.getPreviousSibling();t=f(n,o,t)}}else if("destroyed"===i)t=c(n,t);else if("updated"===i){const o=r(n);if(null!==o){let n=o.getPreviousSibling();for(;null!==n&&!e(n);)n=n.getPreviousSibling();t=a(n,o,t)}}d(t)}))})),u=h.registerMutationListener(i,(o=>{h.getEditorState().read((()=>{for(const[n,i]of o)if("updated"===i){const o=r(n);if(null!==o){const n=o.getParentOrThrow();e(n)&&(t=g(n,t),d(t))}}}))}));return()=>{s(),u()}}),[h]),l(p,h)}export{p as default};
+
+import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{$isHeadingNode as e,HeadingNode as r}from"@lexical/rich-text";import{$getNextRightPreorderNode as n}from"@lexical/utils";import{$getRoot as o,$isElementNode as i,$getNodeByKey as s,TextNode as f}from"lexical";import{useState as c,useEffect as l}from"react";function u(t){return[t.getKey(),t.getTextContent(),t.getTag()]}function a(t,e,r){if(null===e)return r;const n=u(e);let o=[];if(null===t){if(r.length>0&&r[0][0]===e.__key)return r;o=[n,...r]}else for(let i=0;i<r.length;i++){const s=r[i][0];if(o.push(r[i]),s===t.getKey()&&s!==e.getKey()){if(i+1<r.length&&r[i+1][0]===e.__key)return r;o.push(n)}}return o}function g(t,e){const r=[];for(const n of e)n[0]!==t&&r.push(n);return r}function d(t,e){const r=[];for(const n of e)n[0]===t.getKey()?r.push(u(t)):r.push(n);return r}function h(t,e,r){const n=[],o=u(e);t||n.push(o);for(const i of r)i[0]!==e.getKey()&&(n.push(i),t&&i[0]===t.getKey()&&n.push(o));return n}function p(t){let r=n(t);for(;null!==r&&!e(r);)r=n(r);return r}function m({children:n}){const[u,m]=c([]),[y]=t();return l((()=>{let t=[];y.getEditorState().read((()=>{const r=o().getChildren();for(const n of r)e(n)&&t.push([n.getKey(),n.getTextContent(),n.getTag()]);m(t)}));const n=y.registerUpdateListener((({editorState:r,dirtyElements:n})=>{r.read((()=>{const r=n=>{for(const o of n.getChildren())if(e(o)){const e=p(o);t=h(e,o,t),m(t)}else i(o)&&r(o)};o().getChildren().forEach((t=>{i(t)&&n.get(t.__key)&&r(t)}))}))})),c=y.registerMutationListener(r,(e=>{y.getEditorState().read((()=>{for(const[r,n]of e)if("created"===n){const e=s(r);if(null!==e){const r=p(e);t=a(r,e,t)}}else if("destroyed"===n)t=g(r,t);else if("updated"===n){const e=s(r);if(null!==e){const r=p(e);t=h(r,e,t)}}m(t)}))})),l=y.registerMutationListener(f,(r=>{y.getEditorState().read((()=>{for(const[n,o]of r)if("updated"===o){const r=s(n);if(null!==r){const n=r.getParentOrThrow();e(n)&&(t=d(n,t),m(t))}}}))}));return()=>{c(),l(),n()}}),[y]),n(u,y)}export{m as default};

package/LexicalTablePlugin.dev.js

@@ -3,7 +3,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 'use strict';
 
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
@@ -19,6 +21,7 @@ var react = require('react');
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 function TablePlugin({
   hasCellMerge = true,
   hasCellBackgroundColor = true,
@@ -31,7 +34,7 @@ function TablePlugin({
         throw Error(`TablePlugin: TableNode, TableCellNode or TableRowNode not registered on editor`);
       }
     }
-    return editor.registerCommand(table.INSERT_TABLE_COMMAND, ({
+    return utils.mergeRegister(editor.registerCommand(table.INSERT_TABLE_COMMAND, ({
       columns,
       rows,
       includeHeaders
@@ -43,7 +46,30 @@ function TablePlugin({
         firstDescendant.select();
       }
       return true;
-    }, lexical.COMMAND_PRIORITY_EDITOR);
+    }, lexical.COMMAND_PRIORITY_EDITOR), editor.registerNodeTransform(table.TableNode, node => {
+      const [gridMap] = table.$computeTableMapSkipCellCheck(node, null, null);
+      const maxRowLength = gridMap.reduce((curLength, row) => {
+        return Math.max(curLength, row.length);
+      }, 0);
+      for (let i = 0; i < gridMap.length; ++i) {
+        const rowLength = gridMap[i].length;
+        if (rowLength === maxRowLength) {
+          continue;
+        }
+        const lastCellMap = gridMap[i][rowLength - 1];
+        const lastRowCell = lastCellMap.cell;
+        for (let j = rowLength; j < maxRowLength; ++j) {
+          // TODO: inherit header state from another header or body
+          const newCell = table.$createTableCellNode(0);
+          newCell.append(lexical.$createParagraphNode());
+          if (lastRowCell !== null) {
+            lastRowCell.insertAfter(newCell);
+          } else {
+            utils.$insertFirst(lastRowCell, newCell);
+          }
+        }
+      }
+    }));
   }, [editor]);
   react.useEffect(() => {
     const tableSelections = new Map();

package/LexicalTablePlugin.dev.mjs

@@ -3,11 +3,13 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { TableNode, TableCellNode, TableRowNode, INSERT_TABLE_COMMAND, $createTableNodeWithDimensions, $isTableNode, $getNodeTriplet, $computeTableMap, $isTableRowNode, $isTableCellNode, $createTableCellNode, applyTableHandlers } from '@lexical/table';
-import { $insertNodeToNearestRoot, $insertFirst } from '@lexical/utils';
-import { $isTextNode, COMMAND_PRIORITY_EDITOR, $nodesOfType, $getNodeByKey } from 'lexical';
+import { TableNode, TableCellNode, TableRowNode, INSERT_TABLE_COMMAND, $createTableNodeWithDimensions, $computeTableMapSkipCellCheck, $createTableCellNode, $isTableNode, $getNodeTriplet, $computeTableMap, $isTableRowNode, $isTableCellNode, applyTableHandlers } from '@lexical/table';
+import { mergeRegister, $insertNodeToNearestRoot, $insertFirst } from '@lexical/utils';
+import { $isTextNode, COMMAND_PRIORITY_EDITOR, $createParagraphNode, $nodesOfType, $getNodeByKey } from 'lexical';
 import { useEffect } from 'react';
 
 /**
@@ -17,6 +19,7 @@ import { useEffect } from 'react';
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 function TablePlugin({
   hasCellMerge = true,
   hasCellBackgroundColor = true,
@@ -29,7 +32,7 @@ function TablePlugin({
         throw Error(`TablePlugin: TableNode, TableCellNode or TableRowNode not registered on editor`);
       }
     }
-    return editor.registerCommand(INSERT_TABLE_COMMAND, ({
+    return mergeRegister(editor.registerCommand(INSERT_TABLE_COMMAND, ({
       columns,
       rows,
       includeHeaders
@@ -41,7 +44,30 @@ function TablePlugin({
         firstDescendant.select();
       }
       return true;
-    }, COMMAND_PRIORITY_EDITOR);
+    }, COMMAND_PRIORITY_EDITOR), editor.registerNodeTransform(TableNode, node => {
+      const [gridMap] = $computeTableMapSkipCellCheck(node, null, null);
+      const maxRowLength = gridMap.reduce((curLength, row) => {
+        return Math.max(curLength, row.length);
+      }, 0);
+      for (let i = 0; i < gridMap.length; ++i) {
+        const rowLength = gridMap[i].length;
+        if (rowLength === maxRowLength) {
+          continue;
+        }
+        const lastCellMap = gridMap[i][rowLength - 1];
+        const lastRowCell = lastCellMap.cell;
+        for (let j = rowLength; j < maxRowLength; ++j) {
+          // TODO: inherit header state from another header or body
+          const newCell = $createTableCellNode(0);
+          newCell.append($createParagraphNode());
+          if (lastRowCell !== null) {
+            lastRowCell.insertAfter(newCell);
+          } else {
+            $insertFirst(lastRowCell, newCell);
+          }
+        }
+      }
+    }));
   }, [editor]);
   useEffect(() => {
     const tableSelections = new Map();

package/LexicalTablePlugin.js

@@ -3,7 +3,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 'use strict'
 const LexicalTablePlugin = process.env.NODE_ENV === 'development' ? require('./LexicalTablePlugin.dev.js') : require('./LexicalTablePlugin.prod.js');
 module.exports = LexicalTablePlugin;

package/LexicalTablePlugin.mjs

@@ -3,7 +3,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 import * as modDev from './LexicalTablePlugin.dev.mjs';
 import * as modProd from './LexicalTablePlugin.prod.mjs';
 const mod = process.env.NODE_ENV === 'development' ? modDev : modProd;

package/LexicalTablePlugin.node.mjs

@@ -3,6 +3,8 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 const mod = await (process.env.NODE_ENV === 'development' ? import('./LexicalTablePlugin.dev.mjs') : import('./LexicalTablePlugin.prod.mjs'));
 export const TablePlugin = mod.TablePlugin;

package/LexicalTablePlugin.prod.js

@@ -3,9 +3,13 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
-'use strict';var b=require("@lexical/react/LexicalComposerContext"),q=require("@lexical/table"),r=require("@lexical/utils"),v=require("lexical"),w=require("react");function x(l){let m=new URLSearchParams;m.append("code",l);for(let n=1;n<arguments.length;n++)m.append("v",arguments[n]);throw Error(`Minified Lexical error #${l}; visit https://lexical.dev/docs/error?${m} for the full message or `+"use the non-minified dev environment for full errors and additional helpful warnings.");}
-exports.TablePlugin=function({hasCellMerge:l=!0,hasCellBackgroundColor:m=!0,hasTabHandler:n=!0}){let [d]=b.useLexicalComposerContext();w.useEffect(()=>{d.hasNodes([q.TableNode,q.TableCellNode,q.TableRowNode])||x(10);return d.registerCommand(q.INSERT_TABLE_COMMAND,({columns:a,rows:e,includeHeaders:h})=>{a=q.$createTableNodeWithDimensions(Number(e),Number(a),h);r.$insertNodeToNearestRoot(a);a=a.getFirstDescendant();v.$isTextNode(a)&&a.select();return!0},v.COMMAND_PRIORITY_EDITOR)},[d]);w.useEffect(()=>
-{let a=new Map,e=c=>{const f=c.getKey(),k=d.getElementByKey(f);k&&!a.has(f)&&(c=q.applyTableHandlers(c,k,d,n),a.set(f,c))};d.getEditorState().read(()=>{let c=v.$nodesOfType(q.TableNode);for(let f of c)q.$isTableNode(f)&&e(f)});let h=d.registerMutationListener(q.TableNode,c=>{for(const [f,k]of c)"created"===k?d.getEditorState().read(()=>{const g=v.$getNodeByKey(f);q.$isTableNode(g)&&e(g)}):"destroyed"===k&&(c=a.get(f),void 0!==c&&(c.removeListeners(),a.delete(f)))});return()=>{h();for(let [,c]of a)c.removeListeners()}},
-[d,n]);w.useEffect(()=>{if(!l)return d.registerNodeTransform(q.TableCellNode,a=>{if(1<a.getColSpan()||1<a.getRowSpan()){var [,,e]=q.$getNodeTriplet(a);[a]=q.$computeTableMap(e,a,a);let c=a.length,f=a[0].length;e=e.getFirstChild();if(!q.$isTableRowNode(e))throw Error("Expected TableNode first child to be a RowNode");let k=[];for(let g=0;g<c;g++){if(0!==g&&(e=e.getNextSibling(),!q.$isTableRowNode(e)))throw Error("Expected TableNode first child to be a RowNode");let u=null;for(let t=0;t<f;t++){var h=
-a[g][t];let p=h.cell;if(h.startRow===g&&h.startColumn===t)u=p,k.push(p);else if(1<p.getColSpan()||1<p.getRowSpan()){if(!q.$isTableCellNode(p))throw Error("Expected TableNode cell to be a TableCellNode");h=q.$createTableCellNode(p.__headerState);null!==u?u.insertAfter(h):r.$insertFirst(e,h)}}}for(let g of k)g.setColSpan(1),g.setRowSpan(1)}})},[d,l]);w.useEffect(()=>{if(!m)return d.registerNodeTransform(q.TableCellNode,a=>{null!==a.getBackgroundColor()&&a.setBackgroundColor(null)})},[d,m,l]);return null}
+
+'use strict';var c=require("@lexical/react/LexicalComposerContext"),q=require("@lexical/table"),r=require("@lexical/utils"),t=require("lexical"),u=require("react"),v;function y(l){let m=new URLSearchParams;m.append("code",l);for(let n=1;n<arguments.length;n++)m.append("v",arguments[n]);throw Error(`Minified Lexical error #${l}; visit https://lexical.dev/docs/error?${m} for the full message or `+"use the non-minified dev environment for full errors and additional helpful warnings.");}
+v=y&&y.__esModule&&Object.prototype.hasOwnProperty.call(y,"default")?y["default"]:y;
+exports.TablePlugin=function({hasCellMerge:l=!0,hasCellBackgroundColor:m=!0,hasTabHandler:n=!0}){let [g]=c.useLexicalComposerContext();u.useEffect(()=>{g.hasNodes([q.TableNode,q.TableCellNode,q.TableRowNode])||v(10);return r.mergeRegister(g.registerCommand(q.INSERT_TABLE_COMMAND,({columns:a,rows:e,includeHeaders:f})=>{a=q.$createTableNodeWithDimensions(Number(e),Number(a),f);r.$insertNodeToNearestRoot(a);a=a.getFirstDescendant();t.$isTextNode(a)&&a.select();return!0},t.COMMAND_PRIORITY_EDITOR),g.registerNodeTransform(q.TableNode,
+a=>{[a]=q.$computeTableMapSkipCellCheck(a,null,null);let e=a.reduce((b,d)=>Math.max(b,d.length),0);for(let b=0;b<a.length;++b){var f=a[b].length;if(f===e)continue;let d=a[b][f-1].cell;for(;f<e;++f){let h=q.$createTableCellNode(0);h.append(t.$createParagraphNode());null!==d?d.insertAfter(h):r.$insertFirst(d,h)}}}))},[g]);u.useEffect(()=>{let a=new Map,e=b=>{const d=b.getKey(),h=g.getElementByKey(d);h&&!a.has(d)&&(b=q.applyTableHandlers(b,h,g,n),a.set(d,b))};g.getEditorState().read(()=>{let b=t.$nodesOfType(q.TableNode);
+for(let d of b)q.$isTableNode(d)&&e(d)});let f=g.registerMutationListener(q.TableNode,b=>{for(const [d,h]of b)"created"===h?g.getEditorState().read(()=>{const k=t.$getNodeByKey(d);q.$isTableNode(k)&&e(k)}):"destroyed"===h&&(b=a.get(d),void 0!==b&&(b.removeListeners(),a.delete(d)))});return()=>{f();for(let [,b]of a)b.removeListeners()}},[g,n]);u.useEffect(()=>{if(!l)return g.registerNodeTransform(q.TableCellNode,a=>{if(1<a.getColSpan()||1<a.getRowSpan()){var [,,e]=q.$getNodeTriplet(a);[a]=q.$computeTableMap(e,
+a,a);let b=a.length,d=a[0].length;e=e.getFirstChild();q.$isTableRowNode(e)||v(175);let h=[];for(let k=0;k<b;k++){0!==k&&(e=e.getNextSibling(),q.$isTableRowNode(e)||v(175));let x=null;for(let w=0;w<d;w++){var f=a[k][w];let p=f.cell;if(f.startRow===k&&f.startColumn===w)x=p,h.push(p);else if(1<p.getColSpan()||1<p.getRowSpan())q.$isTableCellNode(p)||v(176),f=q.$createTableCellNode(p.__headerState),null!==x?x.insertAfter(f):r.$insertFirst(e,f)}}for(let k of h)k.setColSpan(1),k.setRowSpan(1)}})},[g,l]);
+u.useEffect(()=>{if(!m)return g.registerNodeTransform(q.TableCellNode,a=>{null!==a.getBackgroundColor()&&a.setBackgroundColor(null)})},[g,m,l]);return null}

package/LexicalTablePlugin.prod.mjs

@@ -3,5 +3,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
-import{useLexicalComposerContext as e}from"@lexical/react/LexicalComposerContext";import{TableNode as t,TableCellNode as o,TableRowNode as r,INSERT_TABLE_COMMAND as n,$createTableNodeWithDimensions as l,$isTableNode as s,$getNodeTriplet as a,$computeTableMap as i,$isTableRowNode as c,$isTableCellNode as d,$createTableCellNode as f,applyTableHandlers as g}from"@lexical/table";import{$insertNodeToNearestRoot as u,$insertFirst as m}from"@lexical/utils";import{$isTextNode as p,COMMAND_PRIORITY_EDITOR as h,$nodesOfType as w,$getNodeByKey as C}from"lexical";import{useEffect as x}from"react";var b=function(e){const t=new URLSearchParams;t.append("code",e);for(let e=1;e<arguments.length;e++)t.append("v",arguments[e]);throw Error(`Minified Lexical error #${e}; visit https://lexical.dev/docs/error?${t} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)};function N({hasCellMerge:N=!0,hasCellBackgroundColor:S=!0,hasTabHandler:E=!0}){const[v]=e();return x((()=>(v.hasNodes([t,o,r])||b(10),v.registerCommand(n,(({columns:e,rows:t,includeHeaders:o})=>{const r=l(Number(t),Number(e),o);u(r);const n=r.getFirstDescendant();return p(n)&&n.select(),!0}),h))),[v]),x((()=>{const e=new Map,o=t=>{const o=t.getKey(),r=v.getElementByKey(o);if(r&&!e.has(o)){const n=g(t,r,v,E);e.set(o,n)}};v.getEditorState().read((()=>{const e=w(t);for(const t of e)s(t)&&o(t)}));const r=v.registerMutationListener(t,(t=>{for(const[r,n]of t)if("created"===n)v.getEditorState().read((()=>{const e=C(r);s(e)&&o(e)}));else if("destroyed"===n){const t=e.get(r);void 0!==t&&(t.removeListeners(),e.delete(r))}}));return()=>{r();for(const[,t]of e)t.removeListeners()}}),[v,E]),x((()=>{if(!N)return v.registerNodeTransform(o,(e=>{if(e.getColSpan()>1||e.getRowSpan()>1){const[,,t]=a(e),[o]=i(t,e,e),r=o.length,n=o[0].length;let l=t.getFirstChild();if(!c(l))throw Error("Expected TableNode first child to be a RowNode");const s=[];for(let e=0;e<r;e++){if(0!==e&&(l=l.getNextSibling(),!c(l)))throw Error("Expected TableNode first child to be a RowNode");let t=null;for(let r=0;r<n;r++){const n=o[e][r],a=n.cell;if(n.startRow===e&&n.startColumn===r)t=a,s.push(a);else if(a.getColSpan()>1||a.getRowSpan()>1){if(!d(a))throw Error("Expected TableNode cell to be a TableCellNode");const e=f(a.__headerState);null!==t?t.insertAfter(e):m(l,e)}}}for(const e of s)e.setColSpan(1),e.setRowSpan(1)}}))}),[v,N]),x((()=>{if(!S)return v.registerNodeTransform(o,(e=>{null!==e.getBackgroundColor()&&e.setBackgroundColor(null)}))}),[v,S,N]),null}export{N as TablePlugin};
+
+import{useLexicalComposerContext as e}from"@lexical/react/LexicalComposerContext";import{TableNode as t,TableCellNode as r,TableRowNode as o,INSERT_TABLE_COMMAND as n,$createTableNodeWithDimensions as l,$computeTableMapSkipCellCheck as s,$createTableCellNode as a,$isTableNode as i,$getNodeTriplet as c,$computeTableMap as f,$isTableRowNode as d,$isTableCellNode as u,applyTableHandlers as g}from"@lexical/table";import{mergeRegister as m,$insertNodeToNearestRoot as p,$insertFirst as h}from"@lexical/utils";import{$isTextNode as C,COMMAND_PRIORITY_EDITOR as x,$createParagraphNode as S,$nodesOfType as w,$getNodeByKey as v}from"lexical";import{useEffect as N}from"react";function b(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var y=b((function(e){const t=new URLSearchParams;t.append("code",e);for(let e=1;e<arguments.length;e++)t.append("v",arguments[e]);throw Error(`Minified Lexical error #${e}; visit https://lexical.dev/docs/error?${t} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)}));function L({hasCellMerge:b=!0,hasCellBackgroundColor:L=!0,hasTabHandler:M=!0}){const[R]=e();return N((()=>(R.hasNodes([t,r,o])||y(10),m(R.registerCommand(n,(({columns:e,rows:t,includeHeaders:r})=>{const o=l(Number(t),Number(e),r);p(o);const n=o.getFirstDescendant();return C(n)&&n.select(),!0}),x),R.registerNodeTransform(t,(e=>{const[t]=s(e,null,null),r=t.reduce(((e,t)=>Math.max(e,t.length)),0);for(let e=0;e<t.length;++e){const o=t[e].length;if(o===r)continue;const n=t[e][o-1].cell;for(let e=o;e<r;++e){const e=a(0);e.append(S()),null!==n?n.insertAfter(e):h(n,e)}}}))))),[R]),N((()=>{const e=new Map,r=t=>{const r=t.getKey(),o=R.getElementByKey(r);if(o&&!e.has(r)){const n=g(t,o,R,M);e.set(r,n)}};R.getEditorState().read((()=>{const e=w(t);for(const t of e)i(t)&&r(t)}));const o=R.registerMutationListener(t,(t=>{for(const[o,n]of t)if("created"===n)R.getEditorState().read((()=>{const e=v(o);i(e)&&r(e)}));else if("destroyed"===n){const t=e.get(o);void 0!==t&&(t.removeListeners(),e.delete(o))}}));return()=>{o();for(const[,t]of e)t.removeListeners()}}),[R,M]),N((()=>{if(!b)return R.registerNodeTransform(r,(e=>{if(e.getColSpan()>1||e.getRowSpan()>1){const[,,t]=c(e),[r]=f(t,e,e),o=r.length,n=r[0].length;let l=t.getFirstChild();d(l)||y(175);const s=[];for(let e=0;e<o;e++){0!==e&&(l=l.getNextSibling(),d(l)||y(175));let t=null;for(let o=0;o<n;o++){const n=r[e][o],i=n.cell;if(n.startRow===e&&n.startColumn===o)t=i,s.push(i);else if(i.getColSpan()>1||i.getRowSpan()>1){u(i)||y(176);const e=a(i.__headerState);null!==t?t.insertAfter(e):h(l,e)}}}for(const e of s)e.setColSpan(1),e.setRowSpan(1)}}))}),[R,b]),N((()=>{if(!L)return R.registerNodeTransform(r,(e=>{null!==e.getBackgroundColor()&&e.setBackgroundColor(null)}))}),[R,L,b]),null}export{L as TablePlugin};

package/LexicalTreeView.dev.js

@@ -3,13 +3,28 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 'use strict';
 
 var devtoolsCore = require('@lexical/devtools-core');
 var utils = require('@lexical/utils');
 var React = require('react');
 
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    for (var k in e) {
+      n[k] = e[k];
+    }
+  }
+  n.default = e;
+  return n;
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -17,6 +32,7 @@ var React = require('react');
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 function TreeView({
   treeTypeButtonClassName,
   timeTravelButtonClassName,
@@ -26,7 +42,7 @@ function TreeView({
   timeTravelPanelClassName,
   editor
 }) {
-  const treeElementRef = /*#__PURE__*/React.createRef();
+  const treeElementRef = /*#__PURE__*/React__namespace.createRef();
   const [editorCurrentState, setEditorCurrentState] = React.useState(editor.getEditorState());
   const commandsLog = devtoolsCore.useLexicalCommandsLog(editor);
   React.useEffect(() => {
@@ -56,7 +72,7 @@ function TreeView({
     }
     rootElement.contentEditable = isReadonly ? 'false' : 'true';
   };
-  return /*#__PURE__*/React.createElement(devtoolsCore.TreeView, {
+  return /*#__PURE__*/React__namespace.createElement(devtoolsCore.TreeView, {
     treeTypeButtonClassName: treeTypeButtonClassName,
     timeTravelButtonClassName: timeTravelButtonClassName,
     timeTravelPanelSliderClassName: timeTravelPanelSliderClassName,

package/LexicalTreeView.dev.mjs

@@ -3,7 +3,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 import { useLexicalCommandsLog, TreeView as TreeView$1, generateContent } from '@lexical/devtools-core';
 import { mergeRegister } from '@lexical/utils';
 import * as React from 'react';
@@ -16,6 +18,7 @@ import { useState, useEffect } from 'react';
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 function TreeView({
   treeTypeButtonClassName,
   timeTravelButtonClassName,

package/LexicalTreeView.js

@@ -3,7 +3,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 'use strict'
 const LexicalTreeView = process.env.NODE_ENV === 'development' ? require('./LexicalTreeView.dev.js') : require('./LexicalTreeView.prod.js');
 module.exports = LexicalTreeView;

package/LexicalTreeView.mjs

@@ -3,7 +3,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 import * as modDev from './LexicalTreeView.dev.mjs';
 import * as modProd from './LexicalTreeView.prod.mjs';
 const mod = process.env.NODE_ENV === 'development' ? modDev : modProd;

package/LexicalTreeView.node.mjs

@@ -3,6 +3,8 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
+
 const mod = await (process.env.NODE_ENV === 'development' ? import('./LexicalTreeView.dev.mjs') : import('./LexicalTreeView.prod.mjs'));
 export const TreeView = mod.TreeView;

package/LexicalTreeView.prod.js

@@ -3,7 +3,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  */
-'use strict';var c=require("@lexical/devtools-core"),d=require("@lexical/utils"),h=require("react");
-exports.TreeView=function({treeTypeButtonClassName:k,timeTravelButtonClassName:l,timeTravelPanelSliderClassName:m,timeTravelPanelButtonClassName:n,viewClassName:p,timeTravelPanelClassName:q,editor:a}){let e=h.createRef(),[r,f]=h.useState(a.getEditorState()),t=c.useLexicalCommandsLog(a);h.useEffect(()=>d.mergeRegister(a.registerUpdateListener(({editorState:b})=>{f(b)}),a.registerEditableListener(()=>{f(a.getEditorState())})),[a]);h.useEffect(()=>{let b=e.current;if(null!==b)return b.__lexicalEditor=
-a,()=>{b.__lexicalEditor=null}},[a,e]);return h.createElement(c.TreeView,{treeTypeButtonClassName:k,timeTravelButtonClassName:l,timeTravelPanelSliderClassName:m,timeTravelPanelButtonClassName:n,viewClassName:p,timeTravelPanelClassName:q,setEditorReadOnly:b=>{const g=a.getRootElement();null!=g&&(g.contentEditable=b?"false":"true")},editorState:r,setEditorState:b=>a.setEditorState(b),generateContent:async function(b){return c.generateContent(a,t,b)},ref:e})}
+
+'use strict';var c=require("@lexical/devtools-core"),d=require("@lexical/utils"),e=require("react"),g=Object.create(null);if(e)for(var l in e)g[l]=e[l];g.default=e;
+exports.TreeView=function({treeTypeButtonClassName:m,timeTravelButtonClassName:n,timeTravelPanelSliderClassName:p,timeTravelPanelButtonClassName:q,viewClassName:r,timeTravelPanelClassName:t,editor:a}){let f=g.createRef(),[u,h]=e.useState(a.getEditorState()),v=c.useLexicalCommandsLog(a);e.useEffect(()=>d.mergeRegister(a.registerUpdateListener(({editorState:b})=>{h(b)}),a.registerEditableListener(()=>{h(a.getEditorState())})),[a]);e.useEffect(()=>{let b=f.current;if(null!==b)return b.__lexicalEditor=
+a,()=>{b.__lexicalEditor=null}},[a,f]);return g.createElement(c.TreeView,{treeTypeButtonClassName:m,timeTravelButtonClassName:n,timeTravelPanelSliderClassName:p,timeTravelPanelButtonClassName:q,viewClassName:r,timeTravelPanelClassName:t,setEditorReadOnly:b=>{const k=a.getRootElement();null!=k&&(k.contentEditable=b?"false":"true")},editorState:u,setEditorState:b=>a.setEditorState(b),generateContent:async function(b){return c.generateContent(a,v,b)},ref:f})}