From a2475150d639228180ff1709954cf49f6cdc7201 Mon Sep 17 00:00:00 2001
From: Ivaylo Pavlov <ivailo90@gmail.com>
Date: Sat, 24 Aug 2024 15:45:12 +0300
Subject: [PATCH 1/6] Almost done

---
 .../plugins/TableActionMenuPlugin/index.tsx   | 25 +++++++--
 .../src/themes/PlaygroundEditorTheme.css      |  3 ++
 .../src/themes/PlaygroundEditorTheme.ts       |  1 +
 .../lexical-table/src/LexicalTableNode.ts     | 51 +++++++++++++++----
 .../__tests__/unit/LexicalTableNode.test.tsx  |  1 +
 5 files changed, 69 insertions(+), 12 deletions(-)

diff --git a/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx b/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx
index eb72fd9d7dc..0796241e5e1 100644
--- a/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx
@@ -282,9 +282,9 @@ function TableActionMenu({
           throw new Error('Expected to find tableElement in DOM');
         }
 
-        const tableSelection = getTableObserverFromTableElement(tableElement);
-        if (tableSelection !== null) {
-          tableSelection.clearHighlight();
+        const tableObserver = getTableObserverFromTableElement(tableElement);
+        if (tableObserver !== null) {
+          tableObserver.clearHighlight();
         }
 
         tableNode.markDirty();
@@ -457,7 +457,19 @@ function TableActionMenu({
 
         tableCell.toggleHeaderStyle(TableCellHeaderStates.COLUMN);
       }
+      clearTableSelection();
+      onClose();
+    });
+  }, [editor, tableCellNode, clearTableSelection, onClose]);
 
+  const toggleRowStriping = useCallback(() => {
+    editor.update(() => {
+      if (tableCellNode.isAttached()) {
+        const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+        if (tableNode) {
+          tableNode.setRowStriping(!tableNode.getRowStriping());
+        }
+      }
       clearTableSelection();
       onClose();
     });
@@ -537,6 +549,13 @@ function TableActionMenu({
         data-test-id="table-background-color">
         <span className="text">Background color</span>
       </button>
+      <button
+        type="button"
+        className="item"
+        onClick={() => toggleRowStriping()}
+        data-test-id="table-row-striping">
+        <span className="text">Toggle Row Striping</span>
+      </button>
       <hr />
       <button
         type="button"
diff --git a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
index 8ce73790114..f79fb7d3a86 100644
--- a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
+++ b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
@@ -125,6 +125,9 @@
   width: max-content;
   margin: 0px 25px 30px 0px;
 }
+.PlaygroundEditorTheme__tableRowStriping tr:nth-child(even) {
+  background-color: #f2f5fb;
+}
 .PlaygroundEditorTheme__tableSelection *::selection {
   background-color: transparent;
 }
diff --git a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.ts b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.ts
index e5bed6c2c9d..c29d9d1434d 100644
--- a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.ts
+++ b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.ts
@@ -102,6 +102,7 @@ const theme: EditorThemeClasses = {
   tableCellSelected: 'PlaygroundEditorTheme__tableCellSelected',
   tableCellSortedIndicator: 'PlaygroundEditorTheme__tableCellSortedIndicator',
   tableResizeRuler: 'PlaygroundEditorTheme__tableCellResizeRuler',
+  tableRowStriping: 'PlaygroundEditorTheme__tableRowStriping',
   tableSelected: 'PlaygroundEditorTheme__tableSelected',
   tableSelection: 'PlaygroundEditorTheme__tableSelection',
   text: {
diff --git a/packages/lexical-table/src/LexicalTableNode.ts b/packages/lexical-table/src/LexicalTableNode.ts
index 3e695eaa475..233b59f78be 100644
--- a/packages/lexical-table/src/LexicalTableNode.ts
+++ b/packages/lexical-table/src/LexicalTableNode.ts
@@ -16,6 +16,7 @@ import type {
   LexicalNode,
   NodeKey,
   SerializedElementNode,
+  Spread,
 } from 'lexical';
 
 import {addClassNamesToElement, isHTMLElement} from '@lexical/utils';
@@ -30,16 +31,26 @@ import {TableDOMCell, TableDOMTable} from './LexicalTableObserver';
 import {$isTableRowNode, TableRowNode} from './LexicalTableRowNode';
 import {getTable} from './LexicalTableSelectionHelpers';
 
-export type SerializedTableNode = SerializedElementNode;
+export type SerializedTableNode = Spread<
+  {
+    rowStriping?: boolean;
+  },
+  SerializedElementNode
+>;
 
 /** @noInheritDoc */
 export class TableNode extends ElementNode {
+  /** @internal */
+  __rowStriping: boolean;
+
   static getType(): string {
     return 'table';
   }
 
   static clone(node: TableNode): TableNode {
-    return new TableNode(node.__key);
+    const tableNode = new TableNode(node.__key);
+    tableNode.__rowStriping = node.__rowStriping;
+    return tableNode;
   }
 
   static importDOM(): DOMConversionMap | null {
@@ -51,17 +62,21 @@ export class TableNode extends ElementNode {
     };
   }
 
-  static importJSON(_serializedNode: SerializedTableNode): TableNode {
-    return $createTableNode();
+  static importJSON(serializedNode: SerializedTableNode): TableNode {
+    const tableNode = $createTableNode();
+    tableNode.__rowStriping = serializedNode.rowStriping || false;
+    return tableNode;
   }
 
   constructor(key?: NodeKey) {
     super(key);
+    this.__rowStriping = false;
   }
 
-  exportJSON(): SerializedElementNode {
+  exportJSON(): SerializedTableNode {
     return {
       ...super.exportJSON(),
+      rowStriping: this.__rowStriping,
       type: 'table',
       version: 1,
     };
@@ -70,13 +85,17 @@ export class TableNode extends ElementNode {
   createDOM(config: EditorConfig, editor?: LexicalEditor): HTMLElement {
     const tableElement = document.createElement('table');
 
+    if (this.__rowStriping) {
+      addClassNamesToElement(tableElement, config.theme.tableRowStriping);
+      tableElement.setAttribute('data-lexical-row-striping', 'true');
+    }
     addClassNamesToElement(tableElement, config.theme.table);
 
     return tableElement;
   }
 
-  updateDOM(): boolean {
-    return false;
+  updateDOM(prevNode: TableNode): boolean {
+    return prevNode.__rowStriping !== this.__rowStriping;
   }
 
   exportDOM(editor: LexicalEditor): DOMExportOutput {
@@ -221,6 +240,14 @@ export class TableNode extends ElementNode {
     return node;
   }
 
+  getRowStriping(): boolean {
+    return this.getLatest().__rowStriping;
+  }
+
+  setRowStriping(newRowStriping: boolean): void {
+    this.getWritable().__rowStriping = newRowStriping;
+  }
+
   canSelectBefore(): true {
     return true;
   }
@@ -243,8 +270,14 @@ export function $getElementForTableNode(
   return getTable(tableElement);
 }
 
-export function $convertTableElement(_domNode: Node): DOMConversionOutput {
-  return {node: $createTableNode()};
+export function $convertTableElement(
+  domNode: HTMLElement,
+): DOMConversionOutput {
+  const tableNode = $createTableNode();
+  if (domNode.hasAttribute('data-lexical-row-striping')) {
+    tableNode.setRowStriping(true);
+  }
+  return {node: tableNode};
 }
 
 export function $createTableNode(): TableNode {
diff --git a/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx b/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx
index b11b99490b6..74fc3eb3191 100644
--- a/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx
+++ b/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx
@@ -66,6 +66,7 @@ const editorConfig = Object.freeze({
   namespace: '',
   theme: {
     table: 'test-table-class',
+    tableRowStriping: 'test-table-row-striping-class',
   },
 });
 

From 4c455717c492021f94b579c0b09fbf0278ee4693 Mon Sep 17 00:00:00 2001
From: Ivaylo Pavlov <ivailo90@gmail.com>
Date: Sat, 24 Aug 2024 17:05:39 +0300
Subject: [PATCH 2/6] Almost done

---
 packages/lexical-table/src/LexicalTableNode.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/lexical-table/src/LexicalTableNode.ts b/packages/lexical-table/src/LexicalTableNode.ts
index 233b59f78be..4dacb193db0 100644
--- a/packages/lexical-table/src/LexicalTableNode.ts
+++ b/packages/lexical-table/src/LexicalTableNode.ts
@@ -41,7 +41,7 @@ export type SerializedTableNode = Spread<
 /** @noInheritDoc */
 export class TableNode extends ElementNode {
   /** @internal */
-  __rowStriping: boolean;
+  __rowStriping?: boolean;
 
   static getType(): string {
     return 'table';
@@ -85,11 +85,11 @@ export class TableNode extends ElementNode {
   createDOM(config: EditorConfig, editor?: LexicalEditor): HTMLElement {
     const tableElement = document.createElement('table');
 
+    addClassNamesToElement(tableElement, config.theme.table);
     if (this.__rowStriping) {
       addClassNamesToElement(tableElement, config.theme.tableRowStriping);
       tableElement.setAttribute('data-lexical-row-striping', 'true');
     }
-    addClassNamesToElement(tableElement, config.theme.table);
 
     return tableElement;
   }
@@ -241,7 +241,7 @@ export class TableNode extends ElementNode {
   }
 
   getRowStriping(): boolean {
-    return this.getLatest().__rowStriping;
+    return Boolean(this.getLatest().__rowStriping);
   }
 
   setRowStriping(newRowStriping: boolean): void {

From c52f3d25c285ce636ea8b8ac3247e4906a89bd39 Mon Sep 17 00:00:00 2001
From: Bob Ippolito <bob@redivi.com>
Date: Sun, 25 Aug 2024 10:34:30 -0700
Subject: [PATCH 3/6] Make sure that TableObserver references and events are
 cleaned up

---
 .../lexical-table/src/LexicalTableObserver.ts |  6 +++
 .../src/LexicalTableSelectionHelpers.ts       | 54 ++++++++++++++-----
 2 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/packages/lexical-table/src/LexicalTableObserver.ts b/packages/lexical-table/src/LexicalTableObserver.ts
index 4b917e090a0..a1114107d43 100644
--- a/packages/lexical-table/src/LexicalTableObserver.ts
+++ b/packages/lexical-table/src/LexicalTableObserver.ts
@@ -73,6 +73,8 @@ export class TableObserver {
   tableSelection: TableSelection | null;
   hasHijackedSelectionStyles: boolean;
   isSelecting: boolean;
+  abortController: AbortController;
+  listenerOptions: {signal: AbortSignal};
 
   constructor(editor: LexicalEditor, tableNodeKey: string) {
     this.isHighlightingCells = false;
@@ -96,6 +98,8 @@ export class TableObserver {
     this.hasHijackedSelectionStyles = false;
     this.trackTable();
     this.isSelecting = false;
+    this.abortController = new AbortController();
+    this.listenerOptions = {signal: this.abortController.signal};
   }
 
   getTable(): TableDOMTable {
@@ -103,9 +107,11 @@ export class TableObserver {
   }
 
   removeListeners() {
+    this.abortController.abort('removeListeners');
     Array.from(this.listenersToRemove).forEach((removeListener) =>
       removeListener(),
     );
+    this.listenersToRemove.clear();
   }
 
   trackTable() {
diff --git a/packages/lexical-table/src/LexicalTableSelectionHelpers.ts b/packages/lexical-table/src/LexicalTableSelectionHelpers.ts
index e4672f3b235..a543979644c 100644
--- a/packages/lexical-table/src/LexicalTableSelectionHelpers.ts
+++ b/packages/lexical-table/src/LexicalTableSelectionHelpers.ts
@@ -101,6 +101,9 @@ export function applyTableHandlers(
   const editorWindow = editor._window || window;
 
   attachTableObserverToTableElement(tableElement, tableObserver);
+  tableObserver.listenersToRemove.add(() =>
+    deatatchTableObserverFromTableElement(tableElement, tableObserver),
+  );
 
   const createMouseHandlers = () => {
     const onMouseUp = () => {
@@ -129,10 +132,10 @@ export function applyTableHandlers(
         }
       }, 0);
     };
-    return {onMouseMove: onMouseMove, onMouseUp: onMouseUp};
+    return {onMouseMove, onMouseUp};
   };
 
-  tableElement.addEventListener('mousedown', (event: MouseEvent) => {
+  const onMouseDown = (event: MouseEvent) => {
     setTimeout(() => {
       if (event.button !== 0) {
         return;
@@ -150,10 +153,23 @@ export function applyTableHandlers(
 
       const {onMouseUp, onMouseMove} = createMouseHandlers();
       tableObserver.isSelecting = true;
-      editorWindow.addEventListener('mouseup', onMouseUp);
-      editorWindow.addEventListener('mousemove', onMouseMove);
+      editorWindow.addEventListener(
+        'mouseup',
+        onMouseUp,
+        tableObserver.listenerOptions,
+      );
+      editorWindow.addEventListener(
+        'mousemove',
+        onMouseMove,
+        tableObserver.listenerOptions,
+      );
     }, 0);
-  });
+  };
+  tableElement.addEventListener(
+    'mousedown',
+    onMouseDown,
+    tableObserver.listenerOptions,
+  );
 
   // Clear selection when clicking outside of dom.
   const mouseDownCallback = (event: MouseEvent) => {
@@ -174,10 +190,10 @@ export function applyTableHandlers(
     });
   };
 
-  editorWindow.addEventListener('mousedown', mouseDownCallback);
-
-  tableObserver.listenersToRemove.add(() =>
-    editorWindow.removeEventListener('mousedown', mouseDownCallback),
+  editorWindow.addEventListener(
+    'mousedown',
+    mouseDownCallback,
+    tableObserver.listenerOptions,
   );
 
   tableObserver.listenersToRemove.add(
@@ -905,20 +921,34 @@ export function applyTableHandlers(
   return tableObserver;
 }
 
-export type HTMLTableElementWithWithTableSelectionState = HTMLTableElement &
-  Record<typeof LEXICAL_ELEMENT_KEY, TableObserver>;
+export type HTMLTableElementWithWithTableSelectionState = HTMLTableElement & {
+  [LEXICAL_ELEMENT_KEY]?: TableObserver | undefined;
+};
+
+export function deatatchTableObserverFromTableElement(
+  tableElement: HTMLTableElementWithWithTableSelectionState,
+  tableObserver: TableObserver,
+) {
+  if (getTableObserverFromTableElement(tableElement) === tableObserver) {
+    delete tableElement[LEXICAL_ELEMENT_KEY];
+  }
+}
 
 export function attachTableObserverToTableElement(
   tableElement: HTMLTableElementWithWithTableSelectionState,
   tableObserver: TableObserver,
 ) {
+  invariant(
+    getTableObserverFromTableElement(tableElement) === null,
+    'tableElement already has an attached TableObserver',
+  );
   tableElement[LEXICAL_ELEMENT_KEY] = tableObserver;
 }
 
 export function getTableObserverFromTableElement(
   tableElement: HTMLTableElementWithWithTableSelectionState,
 ): TableObserver | null {
-  return tableElement[LEXICAL_ELEMENT_KEY];
+  return tableElement[LEXICAL_ELEMENT_KEY] || null;
 }
 
 export function getDOMCellFromTarget(node: Node): TableDOMCell | null {

From 7fae5d31c3f82233b97094311f49714182df5a1d Mon Sep 17 00:00:00 2001
From: Bob Ippolito <bob@redivi.com>
Date: Mon, 26 Aug 2024 19:31:45 -0700
Subject: [PATCH 4/6] In-place DOM update for TableNode and make TableObserver
 management robust to updateDOM returning true

---
 .../src/plugins/TableCellResizer/index.tsx    |  7 +--
 .../lexical-react/src/LexicalTablePlugin.ts   | 61 +++++++++++--------
 .../lexical-table/src/LexicalTableNode.ts     | 48 +++++++++++----
 3 files changed, 77 insertions(+), 39 deletions(-)

diff --git a/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx b/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx
index 494a2c5e85a..0eb04da82ae 100644
--- a/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx
+++ b/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx
@@ -136,13 +136,12 @@ function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {
 
     const removeRootListener = editor.registerRootListener(
       (rootElement, prevRootElement) => {
-        rootElement?.addEventListener('mousemove', onMouseMove);
-        rootElement?.addEventListener('mousedown', onMouseDown);
-        rootElement?.addEventListener('mouseup', onMouseUp);
-
         prevRootElement?.removeEventListener('mousemove', onMouseMove);
         prevRootElement?.removeEventListener('mousedown', onMouseDown);
         prevRootElement?.removeEventListener('mouseup', onMouseUp);
+        rootElement?.addEventListener('mousemove', onMouseMove);
+        rootElement?.addEventListener('mousedown', onMouseDown);
+        rootElement?.addEventListener('mouseup', onMouseUp);
       },
     );
 
diff --git a/packages/lexical-react/src/LexicalTablePlugin.ts b/packages/lexical-react/src/LexicalTablePlugin.ts
index 2ae1dfd94f7..f3a59d680f4 100644
--- a/packages/lexical-react/src/LexicalTablePlugin.ts
+++ b/packages/lexical-react/src/LexicalTablePlugin.ts
@@ -110,40 +110,53 @@ export function TablePlugin({
   }, [editor]);
 
   useEffect(() => {
-    const tableSelections = new Map<NodeKey, TableObserver>();
+    const tableSelections = new Map<
+      NodeKey,
+      [TableObserver, HTMLTableElementWithWithTableSelectionState]
+    >();
 
-    const initializeTableNode = (tableNode: TableNode) => {
-      const nodeKey = tableNode.getKey();
-      const tableElement = editor.getElementByKey(
-        nodeKey,
-      ) as HTMLTableElementWithWithTableSelectionState;
-      if (tableElement && !tableSelections.has(nodeKey)) {
-        const tableSelection = applyTableHandlers(
-          tableNode,
-          tableElement,
-          editor,
-          hasTabHandler,
-        );
-        tableSelections.set(nodeKey, tableSelection);
-      }
+    const initializeTableNode = (
+      tableNode: TableNode,
+      nodeKey: NodeKey,
+      dom: HTMLElement,
+    ) => {
+      const tableElement = dom as HTMLTableElementWithWithTableSelectionState;
+      const tableSelection = applyTableHandlers(
+        tableNode,
+        tableElement,
+        editor,
+        hasTabHandler,
+      );
+      tableSelections.set(nodeKey, [tableSelection, tableElement]);
     };
 
     const unregisterMutationListener = editor.registerMutationListener(
       TableNode,
       (nodeMutations) => {
         for (const [nodeKey, mutation] of nodeMutations) {
-          if (mutation === 'created') {
-            editor.getEditorState().read(() => {
-              const tableNode = $getNodeByKey<TableNode>(nodeKey);
-              if ($isTableNode(tableNode)) {
-                initializeTableNode(tableNode);
+          if (mutation === 'created' || mutation === 'updated') {
+            const tableSelection = tableSelections.get(nodeKey);
+            const dom = editor.getElementByKey(nodeKey);
+            if (!(tableSelection && dom === tableSelection[1])) {
+              // The update created a new DOM node, destroy the existing TableObserver
+              if (tableSelection) {
+                tableSelection[0].removeListeners();
+                tableSelections.delete(nodeKey);
               }
-            });
+              if (dom !== null) {
+                // Create a new TableObserver
+                editor.getEditorState().read(() => {
+                  const tableNode = $getNodeByKey<TableNode>(nodeKey);
+                  if ($isTableNode(tableNode)) {
+                    initializeTableNode(tableNode, nodeKey, dom);
+                  }
+                });
+              }
+            }
           } else if (mutation === 'destroyed') {
             const tableSelection = tableSelections.get(nodeKey);
-
             if (tableSelection !== undefined) {
-              tableSelection.removeListeners();
+              tableSelection[0].removeListeners();
               tableSelections.delete(nodeKey);
             }
           }
@@ -156,7 +169,7 @@ export function TablePlugin({
       unregisterMutationListener();
       // Hook might be called multiple times so cleaning up tables listeners as well,
       // as it'll be reinitialized during recurring call
-      for (const [, tableSelection] of tableSelections) {
+      for (const [, [tableSelection]] of tableSelections) {
         tableSelection.removeListeners();
       }
     };
diff --git a/packages/lexical-table/src/LexicalTableNode.ts b/packages/lexical-table/src/LexicalTableNode.ts
index 4dacb193db0..ffa407359de 100644
--- a/packages/lexical-table/src/LexicalTableNode.ts
+++ b/packages/lexical-table/src/LexicalTableNode.ts
@@ -6,7 +6,6 @@
  *
  */
 
-import type {TableCellNode} from './LexicalTableCellNode';
 import type {
   DOMConversionMap,
   DOMConversionOutput,
@@ -19,14 +18,18 @@ import type {
   Spread,
 } from 'lexical';
 
-import {addClassNamesToElement, isHTMLElement} from '@lexical/utils';
+import {
+  addClassNamesToElement,
+  isHTMLElement,
+  removeClassNamesFromElement,
+} from '@lexical/utils';
 import {
   $applyNodeReplacement,
   $getNearestNodeFromDOMNode,
   ElementNode,
 } from 'lexical';
 
-import {$isTableCellNode} from './LexicalTableCellNode';
+import {$isTableCellNode, TableCellNode} from './LexicalTableCellNode';
 import {TableDOMCell, TableDOMTable} from './LexicalTableObserver';
 import {$isTableRowNode, TableRowNode} from './LexicalTableRowNode';
 import {getTable} from './LexicalTableSelectionHelpers';
@@ -38,19 +41,36 @@ export type SerializedTableNode = Spread<
   SerializedElementNode
 >;
 
+function setRowStriping(
+  dom: HTMLElement,
+  config: EditorConfig,
+  rowStriping: boolean,
+) {
+  if (rowStriping) {
+    addClassNamesToElement(dom, config.theme.tableRowStriping);
+    dom.setAttribute('data-lexical-row-striping', 'true');
+  } else {
+    removeClassNamesFromElement(dom, config.theme.tableRowStriping);
+    dom.removeAttribute('data-lexical-row-striping');
+  }
+}
+
 /** @noInheritDoc */
 export class TableNode extends ElementNode {
   /** @internal */
-  __rowStriping?: boolean;
+  __rowStriping: boolean;
 
   static getType(): string {
     return 'table';
   }
 
   static clone(node: TableNode): TableNode {
-    const tableNode = new TableNode(node.__key);
-    tableNode.__rowStriping = node.__rowStriping;
-    return tableNode;
+    return new TableNode(node.__key);
+  }
+
+  afterCloneFrom(prevNode: this) {
+    super.afterCloneFrom(prevNode);
+    this.__rowStriping = prevNode.__rowStriping;
   }
 
   static importDOM(): DOMConversionMap | null {
@@ -87,15 +107,21 @@ export class TableNode extends ElementNode {
 
     addClassNamesToElement(tableElement, config.theme.table);
     if (this.__rowStriping) {
-      addClassNamesToElement(tableElement, config.theme.tableRowStriping);
-      tableElement.setAttribute('data-lexical-row-striping', 'true');
+      setRowStriping(tableElement, config, true);
     }
 
     return tableElement;
   }
 
-  updateDOM(prevNode: TableNode): boolean {
-    return prevNode.__rowStriping !== this.__rowStriping;
+  updateDOM(
+    prevNode: TableNode,
+    dom: HTMLElement,
+    config: EditorConfig,
+  ): boolean {
+    if (prevNode.__rowStriping !== this.__rowStriping) {
+      setRowStriping(dom, config, this.__rowStriping);
+    }
+    return false;
   }
 
   exportDOM(editor: LexicalEditor): DOMExportOutput {

From 5cb449e468e2139a7e5c135c111a756567b5782a Mon Sep 17 00:00:00 2001
From: Ivaylo Pavlov <ivailo90@gmail.com>
Date: Tue, 27 Aug 2024 11:52:39 +0300
Subject: [PATCH 5/6] add back row striping test

---
 .../__tests__/unit/LexicalTableNode.test.tsx  | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx b/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx
index 74fc3eb3191..161def23622 100644
--- a/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx
+++ b/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx
@@ -345,6 +345,47 @@ describe('LexicalTableNode tests', () => {
           }
         });
       });
+
+      test('Toggle row striping ON/OFF', async () => {
+        const {editor} = testEnv;
+
+        await editor.update(() => {
+          const root = $getRoot();
+          const table = $createTableNodeWithDimensions(4, 4, true);
+          root.append(table);
+        });
+        await editor.update(() => {
+          const root = $getRoot();
+          const table = root.getLastChild<TableNode>();
+          if (table) {
+            table.setRowStriping(true);
+          }
+        });
+
+        await editor.update(() => {
+          const root = $getRoot();
+          const table = root.getLastChild<TableNode>();
+          expect(table!.createDOM(editorConfig).outerHTML).toBe(
+            `<table class="${editorConfig.theme.table} ${editorConfig.theme.tableRowStriping}" data-lexical-row-striping="true"></table>`,
+          );
+        });
+
+        await editor.update(() => {
+          const root = $getRoot();
+          const table = root.getLastChild<TableNode>();
+          if (table) {
+            table.setRowStriping(false);
+          }
+        });
+
+        await editor.update(() => {
+          const root = $getRoot();
+          const table = root.getLastChild<TableNode>();
+          expect(table!.createDOM(editorConfig).outerHTML).toBe(
+            `<table class="${editorConfig.theme.table}"></table>`,
+          );
+        });
+      });
     },
     undefined,
     <TablePlugin />,

From f9a08a78fc448c0a07e00705034e011d2ac08f79 Mon Sep 17 00:00:00 2001
From: Ivaylo Pavlov <ivailo90@gmail.com>
Date: Tue, 27 Aug 2024 12:16:37 +0300
Subject: [PATCH 6/6] exportJSON only if true

---
 packages/lexical-table/src/LexicalTableNode.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/lexical-table/src/LexicalTableNode.ts b/packages/lexical-table/src/LexicalTableNode.ts
index ffa407359de..938d8c61c63 100644
--- a/packages/lexical-table/src/LexicalTableNode.ts
+++ b/packages/lexical-table/src/LexicalTableNode.ts
@@ -96,7 +96,7 @@ export class TableNode extends ElementNode {
   exportJSON(): SerializedTableNode {
     return {
       ...super.exportJSON(),
-      rowStriping: this.__rowStriping,
+      rowStriping: this.__rowStriping ? this.__rowStriping : undefined,
       type: 'table',
       version: 1,
     };