[lexical] Fix TabNode deserialization regression (#7031)

facebook · Jan 9, 2025 · 6add515 · 6add515
1 parent 33e3677
commit 6add515
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/packages/lexical/src/nodes/LexicalTabNode.ts b/packages/lexical/src/nodes/LexicalTabNode.ts
@@ -71,7 +71,7 @@ export class TabNode extends TextNode {
   }
 
   setMode(type: TextModeType): this {
-    invariant(type !== 'normal', 'TabNode does not support setMode');
+    invariant(type === 'normal', 'TabNode does not support setMode');
     return this;
   }
 

diff --git a/packages/lexical/src/nodes/__tests__/unit/LexicalTabNode.test.tsx b/packages/lexical/src/nodes/__tests__/unit/LexicalTabNode.test.tsx
@@ -23,6 +23,7 @@ import {
   $insertNodes,
   $isElementNode,
   $isRangeSelection,
+  $isTabNode,
   $isTextNode,
   $setSelection,
   KEY_TAB_COMMAND,
@@ -253,5 +254,30 @@ describe('LexicalTabNode tests', () => {
         '<p dir="ltr"><span data-lexical-text="true">\t</span><span data-lexical-text="true">f</span><span data-lexical-text="true">\t</span></p>',
       );
     });
+
+    test('can be serialized and deserialized', async () => {
+      const {editor} = testEnv;
+      await editor.update(() => {
+        $getRoot()
+          .clear()
+          .append($createParagraphNode().append($createTabNode()));
+        const textNodes = $getRoot().getAllTextNodes();
+        expect(textNodes).toHaveLength(1);
+        expect($isTabNode(textNodes[0])).toBe(true);
+      });
+      const json = editor.getEditorState().toJSON();
+      await editor.update(() => {
+        $getRoot().clear().append($createParagraphNode());
+      });
+      editor.read(() => {
+        expect($getRoot().getAllTextNodes()).toHaveLength(0);
+      });
+      await editor.setEditorState(editor.parseEditorState(json));
+      editor.read(() => {
+        const textNodes = $getRoot().getAllTextNodes();
+        expect(textNodes).toHaveLength(1);
+        expect($isTabNode(textNodes[0])).toBe(true);
+      });
+    });
   });
 });