WIP: Generic ImportJSON/ExportJSON

packages/lexical-clipboard/src/clipboard.ts

@@ -39,7 +39,7 @@ import {
   NodeSelection,
   RangeSelection,
   SELECTION_CHANGE_COMMAND,
-  SerializedTextNode,
+  SerializedNode,
 } from 'lexical';
 import invariant from 'shared/invariant';
 
@@ -341,46 +341,11 @@ function $mergeGridNodesStrategy(
   }
 }
 
-export interface BaseSerializedNode {
-  children?: Array<BaseSerializedNode>;
-  type: string;
-  version: number;
-}
-
-function exportNodeToJSON<T extends LexicalNode>(node: T): BaseSerializedNode {
-  const serializedNode = node.exportJSON();
-  const nodeClass = node.constructor;
-
-  // @ts-expect-error TODO Replace Class utility type with InstanceType
-  if (serializedNode.type !== nodeClass.getType()) {
-    invariant(
-      false,
-      'LexicalNode: Node %s does not implement .exportJSON().',
-      nodeClass.name,
-    );
-  }
-
-  // @ts-expect-error TODO Replace Class utility type with InstanceType
-  const serializedChildren = serializedNode.children;
-
-  if ($isElementNode(node)) {
-    if (!Array.isArray(serializedChildren)) {
-      invariant(
-        false,
-        'LexicalNode: Node %s is an element but .exportJSON() does not have a children array.',
-        nodeClass.name,
-      );
-    }
-  }
-
-  return serializedNode;
-}
-
 function $appendNodesToJSON(
   editor: LexicalEditor,
   selection: RangeSelection | NodeSelection | GridSelection | null,
   currentNode: LexicalNode,
-  targetArray: Array<BaseSerializedNode> = [],
+  targetArray: Array<SerializedNode> = [],
 ): boolean {
   let shouldInclude =
     selection != null ? currentNode.isSelected(selection) : true;
@@ -398,7 +363,7 @@ function $appendNodesToJSON(
   }
   const children = $isElementNode(target) ? target.getChildren() : [];
 
-  const serializedNode = exportNodeToJSON(target);
+  const serializedNode = target.exportJSON();
 
   // TODO: TextNode calls getTextContent() (NOT node.__text) within it's exportJSON method
   // which uses getLatest() to get the text from the original node with the same key.
@@ -412,7 +377,7 @@ function $appendNodesToJSON(
     // TextNodes, such as code tokens, we will get a 'blank' TextNode here, i.e., one
     // with text of length 0. We don't want this, it makes a confusing mess. Reset!
     if (text.length > 0) {
-      (serializedNode as SerializedTextNode).text = text;
+      serializedNode.text = text;
     } else {
       shouldInclude = false;
     }
@@ -450,9 +415,7 @@ function $appendNodesToJSON(
 }
 
 // TODO why $ function with Editor instance?
-export function $generateJSONFromSelectedNodes<
-  SerializedNode extends BaseSerializedNode,
->(
+export function $generateJSONFromSelectedNodes(
   editor: LexicalEditor,
   selection: RangeSelection | NodeSelection | GridSelection | null,
 ): {
@@ -473,7 +436,7 @@ export function $generateJSONFromSelectedNodes<
 }
 
 export function $generateNodesFromSerializedNodes(
-  serializedNodes: Array<BaseSerializedNode>,
+  serializedNodes: Array<SerializedNode>,
 ): Array<LexicalNode> {
   const nodes = [];
   for (let i = 0; i < serializedNodes.length; i++) {

packages/lexical-code/src/CodeHighlightNode.ts

@@ -14,8 +14,6 @@ import {
   type EditorThemeClasses,
   type LexicalNode,
   type NodeKey,
-  type SerializedTextNode,
-  type Spread,
   TextNode,
   ElementNode,
 } from 'lexical';
@@ -45,15 +43,6 @@ import {$createCodeNode} from './CodeNode';
 
 export const DEFAULT_CODE_LANGUAGE = 'javascript';
 
-type SerializedCodeHighlightNode = Spread<
-  {
-    highlightType: string | null | undefined;
-    type: 'code-highlight';
-    version: 1;
-  },
-  SerializedTextNode
->;
-
 export const CODE_LANGUAGE_FRIENDLY_NAME_MAP: Record<string, string> = {
   c: 'C',
   clike: 'C-like',
@@ -116,6 +105,7 @@ export class CodeHighlightNode extends TextNode {
   ) {
     super(text, key);
     this.__highlightType = highlightType;
+    return $applyNodeReplacement(this);
   }
 
   static getType(): string {
@@ -170,29 +160,6 @@ export class CodeHighlightNode extends TextNode {
     return update;
   }
 
-  static importJSON(
-    serializedNode: SerializedCodeHighlightNode,
-  ): CodeHighlightNode {
-    const node = $createCodeHighlightNode(
-      serializedNode.text,
-      serializedNode.highlightType,
-    );
-    node.setFormat(serializedNode.format);
-    node.setDetail(serializedNode.detail);
-    node.setMode(serializedNode.mode);
-    node.setStyle(serializedNode.style);
-    return node;
-  }
-
-  exportJSON(): SerializedCodeHighlightNode {
-    return {
-      ...super.exportJSON(),
-      highlightType: this.getHighlightType(),
-      type: 'code-highlight',
-      version: 1,
-    };
-  }
-
   // Prevent formatting (bold, underline, etc)
   setFormat(format: number): this {
     return this;
@@ -223,7 +190,7 @@ export function $createCodeHighlightNode(
   text: string,
   highlightType?: string | null | undefined,
 ): CodeHighlightNode {
-  return $applyNodeReplacement(new CodeHighlightNode(text, highlightType));
+  return new CodeHighlightNode(text, highlightType);
 }
 
 export function $isCodeHighlightNode(

packages/lexical-code/src/CodeNode.ts

@@ -15,8 +15,6 @@ import type {
   NodeKey,
   ParagraphNode,
   RangeSelection,
-  SerializedElementNode,
-  Spread,
 } from 'lexical';
 import type {CodeHighlightNode} from '@lexical/code';
 
@@ -50,15 +48,6 @@ import {
 } from './CodeHighlightNode';
 import * as Prism from 'prismjs';
 
-export type SerializedCodeNode = Spread<
-  {
-    language: string | null | undefined;
-    type: 'code';
-    version: 1;
-  },
-  SerializedElementNode
->;
-
 const mapToPrismLanguage = (
   language: string | null | undefined,
 ): string | null | undefined => {
@@ -96,6 +85,7 @@ export class CodeNode extends ElementNode {
   constructor(language?: string | null | undefined, key?: NodeKey) {
     super(key);
     this.__language = mapToPrismLanguage(language);
+    return $applyNodeReplacement(this);
   }
 
   // View
@@ -200,23 +190,6 @@ export class CodeNode extends ElementNode {
     };
   }
 
-  static importJSON(serializedNode: SerializedCodeNode): CodeNode {
-    const node = $createCodeNode(serializedNode.language);
-    node.setFormat(serializedNode.format);
-    node.setIndent(serializedNode.indent);
-    node.setDirection(serializedNode.direction);
-    return node;
-  }
-
-  exportJSON(): SerializedCodeNode {
-    return {
-      ...super.exportJSON(),
-      language: this.getLanguage(),
-      type: 'code',
-      version: 1,
-    };
-  }
-
   // Mutation
   insertNewAfter(
     selection: RangeSelection,
@@ -300,7 +273,7 @@ export class CodeNode extends ElementNode {
 export function $createCodeNode(
   language?: string | null | undefined,
 ): CodeNode {
-  return $applyNodeReplacement(new CodeNode(language));
+  return new CodeNode(language);
 }
 
 export function $isCodeNode(

packages/lexical-code/src/__tests__/unit/LexicalCodeNode.test.ts

@@ -80,8 +80,7 @@ describe('LexicalCodeNode tests', () => {
         const node = $createCodeNode('javascript');
         // If you broke this test, you changed the public interface of a
         // serialized Lexical Core Node. Please ensure the correct adapter
-        // logic is in place in the corresponding importJSON  method
-        // to accomodate these changes.
+        // logic is in place to accomodate these changes.
         expect(node.exportJSON()).toStrictEqual({
           children: [],
           direction: null,

packages/lexical-code/src/index.ts

@@ -28,5 +28,4 @@ export {
   getLastCodeHighlightNodeOfLine,
   normalizeCodeLang,
 } from './CodeHighlightNode';
-export type {SerializedCodeNode} from './CodeNode';
 export {$createCodeNode, $isCodeNode, CodeNode} from './CodeNode';

packages/lexical-hashtag/flow/LexicalHashtag.js.flow

@@ -7,25 +7,18 @@
  * @flow strict
  */
 
-import type {
-  EditorConfig,
-  LexicalNode,
-  NodeKey,
-  SerializedTextNode,
-} from 'lexical';
+import type {EditorConfig, LexicalNode, NodeKey} from 'lexical';
 
 import {TextNode} from 'lexical';
 
 declare export class HashtagNode extends TextNode {
   static getType(): string;
   // $FlowFixMe
   static clone(node: HashtagNode): HashtagNode;
-  static importJSON(serializedNode: SerializedTextNode): HashtagNode;
   constructor(text: string, key?: NodeKey): void;
   createDOM(config: EditorConfig): HTMLElement;
   canInsertTextBefore(): boolean;
   isTextEntity(): true;
-  exportJSON(): SerializedTextNode;
 }
 declare export function $createHashtagNode(text?: string): HashtagNode;
 declare export function $isHashtagNode(

packages/lexical-hashtag/src/LexicalHashtagNode.ts

@@ -6,12 +6,7 @@
  *
  */
 
-import type {
-  EditorConfig,
-  LexicalNode,
-  NodeKey,
-  SerializedTextNode,
-} from 'lexical';
+import type {EditorConfig, LexicalNode, NodeKey} from 'lexical';
 
 import {addClassNamesToElement} from '@lexical/utils';
 import {$applyNodeReplacement, TextNode} from 'lexical';
@@ -28,6 +23,7 @@ export class HashtagNode extends TextNode {
 
   constructor(text: string, key?: NodeKey) {
     super(text, key);
+    return $applyNodeReplacement(this);
   }
 
   createDOM(config: EditorConfig): HTMLElement {
@@ -36,22 +32,6 @@ export class HashtagNode extends TextNode {
     return element;
   }
 
-  static importJSON(serializedNode: SerializedTextNode): HashtagNode {
-    const node = $createHashtagNode(serializedNode.text);
-    node.setFormat(serializedNode.format);
-    node.setDetail(serializedNode.detail);
-    node.setMode(serializedNode.mode);
-    node.setStyle(serializedNode.style);
-    return node;
-  }
-
-  exportJSON(): SerializedTextNode {
-    return {
-      ...super.exportJSON(),
-      type: 'hashtag',
-    };
-  }
-
   canInsertTextBefore(): boolean {
     return false;
   }
@@ -62,7 +42,7 @@ export class HashtagNode extends TextNode {
 }
 
 export function $createHashtagNode(text = ''): HashtagNode {
-  return $applyNodeReplacement(new HashtagNode(text));
+  return new HashtagNode(text);
 }
 
 export function $isHashtagNode(

packages/lexical-hashtag/src/__tests__/unit/LexicalHashtagNode.test.ts

@@ -17,8 +17,7 @@ describe('LexicalHashtagNode tests', () => {
         const node = $createHashtagNode('therickestrickofall');
         // If you broke this test, you changed the public interface of a
         // serialized Lexical Core Node. Please ensure the correct adapter
-        // logic is in place in the corresponding importJSON  method
-        // to accomodate these changes.
+        // logic is in place to accomodate these changes.
         expect(node.exportJSON()).toStrictEqual({
           detail: 0,
           format: 0,

packages/lexical-history/src/__tests__/unit/LexicalHistory.test.tsx

@@ -21,8 +21,6 @@ import {
   COMMAND_PRIORITY_CRITICAL,
   LexicalEditor,
   REDO_COMMAND,
-  SerializedElementNode,
-  SerializedTextNode,
   UNDO_COMMAND,
 } from 'lexical/src';
 import {TestComposer} from 'lexical/src/__tests__/utils';
@@ -154,21 +152,15 @@ describe('LexicalHistory tests', () => {
     expect(afterQuoteInsertionJSONState.root.children.length).toBe(2);
     expect(afterQuoteInsertionJSONState.root.children[0].type).toBe('quote');
 
-    expect(
-      (afterQuoteInsertionJSONState.root.children as SerializedElementNode[])[0]
-        .children.length,
-    ).toBe(1);
-    expect(
-      (afterQuoteInsertionJSONState.root.children as SerializedElementNode[])[0]
-        .children[0].type,
-    ).toBe('text');
-    expect(
-      (
-        (
-          afterQuoteInsertionJSONState.root.children as SerializedElementNode[]
-        )[0].children[0] as SerializedTextNode
-      ).text,
-    ).toBe('AAA');
+    expect(afterQuoteInsertionJSONState.root.children[0].children.length).toBe(
+      1,
+    );
+    expect(afterQuoteInsertionJSONState.root.children[0].children[0].type).toBe(
+      'text',
+    );
+    expect(afterQuoteInsertionJSONState.root.children[0].children[0].text).toBe(
+      'AAA',
+    );
 
     await ReactTestUtils.act(async () => {
       await editor.update(() => {