[Breaking Change][lexical] Feature: Add updateFromJSON and move more textFormat/textStyle to ElementNode (facebook#6970)

Author: etrepum

packages/lexical-code/src/CodeHighlightNode.ts

@@ -10,6 +10,7 @@ import type {
   EditorConfig,
   EditorThemeClasses,
   LexicalNode,
+  LexicalUpdateJSON,
   LineBreakNode,
   NodeKey,
   SerializedTextNode,
@@ -97,7 +98,7 @@ export class CodeHighlightNode extends TextNode {
   __highlightType: string | null | undefined;
 
   constructor(
-    text: string,
+    text: string = '',
     highlightType?: string | null | undefined,
     key?: NodeKey,
   ) {
@@ -122,6 +123,12 @@ export class CodeHighlightNode extends TextNode {
     return self.__highlightType;
   }
 
+  setHighlightType(highlightType?: string | null | undefined): this {
+    const self = this.getWritable();
+    self.__highlightType = highlightType || undefined;
+    return self;
+  }
+
   canHaveFormat(): boolean {
     return false;
   }
@@ -160,15 +167,15 @@ export class CodeHighlightNode extends TextNode {
   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;
+    return $createCodeHighlightNode().updateFromJSON(serializedNode);
+  }
+
+  updateFromJSON(
+    serializedNode: LexicalUpdateJSON<SerializedCodeHighlightNode>,
+  ): this {
+    return super
+      .updateFromJSON(serializedNode)
+      .setHighlightType(serializedNode.highlightType);
   }
 
   exportJSON(): SerializedCodeHighlightNode {
@@ -205,7 +212,7 @@ function getHighlightThemeClass(
 }
 
 export function $createCodeHighlightNode(
-  text: string,
+  text: string = '',
   highlightType?: string | null | undefined,
 ): CodeHighlightNode {
   return $applyNodeReplacement(new CodeHighlightNode(text, highlightType));

packages/lexical-code/src/CodeNode.ts

@@ -14,6 +14,7 @@ import type {
   EditorConfig,
   LexicalEditor,
   LexicalNode,
+  LexicalUpdateJSON,
   NodeKey,
   ParagraphNode,
   RangeSelection,
@@ -88,7 +89,7 @@ export class CodeNode extends ElementNode {
 
   constructor(language?: string | null | undefined, key?: NodeKey) {
     super(key);
-    this.__language = language;
+    this.__language = language || undefined;
     this.__isSyntaxHighlightSupported = isLanguageSupportedByPrism(language);
   }
 
@@ -212,11 +213,13 @@ 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;
+    return $createCodeNode().updateFromJSON(serializedNode);
+  }
+
+  updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedCodeNode>): this {
+    return super
+      .updateFromJSON(serializedNode)
+      .setLanguage(serializedNode.language);
   }
 
   exportJSON(): SerializedCodeNode {
@@ -317,11 +320,12 @@ export class CodeNode extends ElementNode {
     return true;
   }
 
-  setLanguage(language: string): void {
+  setLanguage(language: string | null | undefined): this {
     const writable = this.getWritable();
-    writable.__language = language;
+    writable.__language = language || undefined;
     writable.__isSyntaxHighlightSupported =
       isLanguageSupportedByPrism(language);
+    return writable;
   }
 
   getLanguage(): string | null | undefined {

packages/lexical-hashtag/src/LexicalHashtagNode.ts

@@ -6,12 +6,7 @@
  *
  */
 
-import type {
-  EditorConfig,
-  LexicalNode,
-  NodeKey,
-  SerializedTextNode,
-} from 'lexical';
+import type {EditorConfig, LexicalNode, SerializedTextNode} from 'lexical';
 
 import {addClassNamesToElement} from '@lexical/utils';
 import {$applyNodeReplacement, TextNode} from 'lexical';
@@ -26,23 +21,14 @@ export class HashtagNode extends TextNode {
     return new HashtagNode(node.__text, node.__key);
   }
 
-  constructor(text: string, key?: NodeKey) {
-    super(text, key);
-  }
-
   createDOM(config: EditorConfig): HTMLElement {
     const element = super.createDOM(config);
     addClassNamesToElement(element, config.theme.hashtag);
     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;
+    return $createHashtagNode().updateFromJSON(serializedNode);
   }
 
   canInsertTextBefore(): boolean {

packages/lexical-link/src/index.ts

@@ -13,6 +13,7 @@ import type {
   EditorConfig,
   LexicalCommand,
   LexicalNode,
+  LexicalUpdateJSON,
   NodeKey,
   Point,
   RangeSelection,
@@ -87,7 +88,11 @@ export class LinkNode extends ElementNode {
     );
   }
 
-  constructor(url: string, attributes: LinkAttributes = {}, key?: NodeKey) {
+  constructor(
+    url: string = '',
+    attributes: LinkAttributes = {},
+    key?: NodeKey,
+  ) {
     super(key);
     const {target = null, rel = null, title = null} = attributes;
     this.__url = url;
@@ -162,18 +167,17 @@ export class LinkNode extends ElementNode {
     };
   }
 
-  static importJSON(
-    serializedNode: SerializedLinkNode | SerializedAutoLinkNode,
-  ): LinkNode {
-    const node = $createLinkNode(serializedNode.url, {
-      rel: serializedNode.rel,
-      target: serializedNode.target,
-      title: serializedNode.title,
-    });
-    node.setFormat(serializedNode.format);
-    node.setIndent(serializedNode.indent);
-    node.setDirection(serializedNode.direction);
-    return node;
+  static importJSON(serializedNode: SerializedLinkNode): LinkNode {
+    return $createLinkNode().updateFromJSON(serializedNode);
+  }
+
+  updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedLinkNode>): this {
+    return super
+      .updateFromJSON(serializedNode)
+      .setURL(serializedNode.url)
+      .setRel(serializedNode.rel || null)
+      .setTarget(serializedNode.target || null)
+      .setTitle(serializedNode.title || null);
   }
 
   sanitizeUrl(url: string): string {
@@ -203,36 +207,40 @@ export class LinkNode extends ElementNode {
     return this.getLatest().__url;
   }
 
-  setURL(url: string): void {
+  setURL(url: string): this {
     const writable = this.getWritable();
     writable.__url = url;
+    return writable;
   }
 
   getTarget(): null | string {
     return this.getLatest().__target;
   }
 
-  setTarget(target: null | string): void {
+  setTarget(target: null | string): this {
     const writable = this.getWritable();
     writable.__target = target;
+    return writable;
   }
 
   getRel(): null | string {
     return this.getLatest().__rel;
   }
 
-  setRel(rel: null | string): void {
+  setRel(rel: null | string): this {
     const writable = this.getWritable();
     writable.__rel = rel;
+    return writable;
   }
 
   getTitle(): null | string {
     return this.getLatest().__title;
   }
 
-  setTitle(title: null | string): void {
+  setTitle(title: null | string): this {
     const writable = this.getWritable();
     writable.__title = title;
+    return writable;
   }
 
   insertNewAfter(
@@ -316,7 +324,7 @@ function $convertAnchorElement(domNode: Node): DOMConversionOutput {
  * @returns The LinkNode.
  */
 export function $createLinkNode(
-  url: string,
+  url: string = '',
   attributes?: LinkAttributes,
 ): LinkNode {
   return $applyNodeReplacement(new LinkNode(url, attributes));
@@ -347,7 +355,11 @@ export class AutoLinkNode extends LinkNode {
   /** Indicates whether the autolink was ever unlinked. **/
   __isUnlinked: boolean;
 
-  constructor(url: string, attributes: AutoLinkAttributes = {}, key?: NodeKey) {
+  constructor(
+    url: string = '',
+    attributes: AutoLinkAttributes = {},
+    key?: NodeKey,
+  ) {
     super(url, attributes, key);
     this.__isUnlinked =
       attributes.isUnlinked !== undefined && attributes.isUnlinked !== null
@@ -376,7 +388,7 @@ export class AutoLinkNode extends LinkNode {
     return this.__isUnlinked;
   }
 
-  setIsUnlinked(value: boolean) {
+  setIsUnlinked(value: boolean): this {
     const self = this.getWritable();
     self.__isUnlinked = value;
     return self;
@@ -402,16 +414,15 @@ export class AutoLinkNode extends LinkNode {
   }
 
   static importJSON(serializedNode: SerializedAutoLinkNode): AutoLinkNode {
-    const node = $createAutoLinkNode(serializedNode.url, {
-      isUnlinked: serializedNode.isUnlinked,
-      rel: serializedNode.rel,
-      target: serializedNode.target,
-      title: serializedNode.title,
-    });
-    node.setFormat(serializedNode.format);
-    node.setIndent(serializedNode.indent);
-    node.setDirection(serializedNode.direction);
-    return node;
+    return $createAutoLinkNode().updateFromJSON(serializedNode);
+  }
+
+  updateFromJSON(
+    serializedNode: LexicalUpdateJSON<SerializedAutoLinkNode>,
+  ): this {
+    return super
+      .updateFromJSON(serializedNode)
+      .setIsUnlinked(serializedNode.isUnlinked || false);
   }
 
   static importDOM(): null {
@@ -456,7 +467,7 @@ export class AutoLinkNode extends LinkNode {
  * @returns The LinkNode.
  */
 export function $createAutoLinkNode(
-  url: string,
+  url: string = '',
   attributes?: AutoLinkAttributes,
 ): AutoLinkNode {
   return $applyNodeReplacement(new AutoLinkNode(url, attributes));

packages/lexical-list/src/LexicalListItemNode.ts

@@ -15,6 +15,7 @@ import type {
   EditorConfig,
   EditorThemeClasses,
   LexicalNode,
+  LexicalUpdateJSON,
   NodeKey,
   ParagraphNode,
   RangeSelection,
@@ -123,12 +124,16 @@ export class ListItemNode extends ElementNode {
   }
 
   static importJSON(serializedNode: SerializedListItemNode): ListItemNode {
-    const node = $createListItemNode();
-    node.setChecked(serializedNode.checked);
-    node.setValue(serializedNode.value);
-    node.setFormat(serializedNode.format);
-    node.setDirection(serializedNode.direction);
-    return node;
+    return $createListItemNode().updateFromJSON(serializedNode);
+  }
+
+  updateFromJSON(
+    serializedNode: LexicalUpdateJSON<SerializedListItemNode>,
+  ): this {
+    return super
+      .updateFromJSON(serializedNode)
+      .setValue(serializedNode.value)
+      .setChecked(serializedNode.checked);
   }
 
   exportDOM(editor: LexicalEditor): DOMExportOutput {
@@ -257,9 +262,10 @@ export class ListItemNode extends ElementNode {
     _: RangeSelection,
     restoreSelection = true,
   ): ListItemNode | ParagraphNode {
-    const newElement = $createListItemNode(
-      this.__checked == null ? undefined : false,
-    );
+    const newElement = $createListItemNode()
+      .updateFromJSON(this.exportJSON())
+      .setChecked(this.getChecked() ? false : undefined);
+
     this.insertAfter(newElement, restoreSelection);
 
     return newElement;
@@ -310,9 +316,10 @@ export class ListItemNode extends ElementNode {
     return self.__value;
   }
 
-  setValue(value: number): void {
+  setValue(value: number): this {
     const self = this.getWritable();
     self.__value = value;
+    return self;
   }
 
   getChecked(): boolean | undefined {
@@ -328,13 +335,15 @@ export class ListItemNode extends ElementNode {
     return listType === 'check' ? Boolean(self.__checked) : undefined;
   }
 
-  setChecked(checked?: boolean): void {
+  setChecked(checked?: boolean): this {
     const self = this.getWritable();
     self.__checked = checked;
+    return self;
   }
 
-  toggleChecked(): void {
-    this.setChecked(!this.__checked);
+  toggleChecked(): this {
+    const self = this.getWritable();
+    return self.setChecked(!self.__checked);
   }
 
   getIndent(): number {