Unable to override importJSON in CustomParagraphNode

[TheSwilliam]

I am getting a TS error on my CustomParagraphNode class that says:

Class static side 'typeof CustomParagraphNode' incorrectly extends base class static side 'typeof ParagraphNode'.
Types of property 'importJSON' are incompatible.
Type '(serializedNode: SerializedCustomParagraphNode) => CustomParagraphNode' is not assignable to type '(serializedNode: SerializedParagraphNode) => ParagraphNode'.
Types of parameters 'serializedNode' and 'serializedNode' are incompatible.
Type 'SerializedParagraphNode' is not assignable to type 'SerializedCustomParagraphNode'.
Property 'backgroundColor' is missing in type 'SerializedParagraphNode' but required in type '{ type: "custom_paragraph";
backgroundColor: string | undefined; }'.ts(2417)
CustomParagraphNode.tsx(18, 5): 'backgroundColor' is declared here.

Here is the code:

import {
  DOMConversionMap,
  DOMConversionOutput,
  LexicalNode,
  ParagraphNode,
  SerializedParagraphNode,
  Spread,
} from "lexical";
import { EditorConfig, NodeKey } from "lexical";

export type SerializedCustomParagraphNode = Spread<
  {
    type: "custom_paragraph";
    backgroundColor: string | undefined;
  },
  SerializedParagraphNode
>;

export class CustomParagraphNode extends ParagraphNode {
  __backgroundColor?: string;

  constructor(backgroundColor?: string, key?: NodeKey) {
    super(key);
    this.__backgroundColor = backgroundColor;
  }

  static clone(node: CustomParagraphNode): CustomParagraphNode {
    return new CustomParagraphNode(node.__backgroundColor, node.__key);
  }

  static getType(): "custom_paragraph" {
    return "custom_paragraph";
  }

  setBackgroundColor(color?: string): this {
    const self = this.getWritable();
    self.__backgroundColor = color;
    return self;
  }

  getBackgroundColor(): string | undefined {
    const self = this.getLatest();
    return self?.__backgroundColor;
  }

  static override importJSON(serializedNode: SerializedCustomParagraphNode): CustomParagraphNode {
    console.log("importing json...");
    const node = $createCustomParagraphNode();
    node.setFormat(serializedNode.format);
    node.setIndent(serializedNode.indent);
    node.setDirection(serializedNode.direction);
    node.setBackgroundColor(serializedNode.backgroundColor);
    return node;
  }

  override exportJSON(): SerializedCustomParagraphNode {
    return {
      ...super.exportJSON(),
      type: "custom_paragraph",
      backgroundColor: this.getBackgroundColor(),
      version: 1,
    };
  }
  createDOM(config: EditorConfig): HTMLElement {
    const p = super.createDOM(config);
    if (this.__backgroundColor) p.style.cssText = `background-color: ${this.__backgroundColor}`;

    return p;
  }

  updateDOM(prevNode: CustomParagraphNode, dom: HTMLElement, config: EditorConfig): boolean {
    super.updateDOM(prevNode, dom, config);
    const prevStyle = prevNode.__backgroundColor;
    const nextStyle = this.__backgroundColor;
    if (prevStyle !== nextStyle && nextStyle) {
      dom.style.cssText = `background-color: ${nextStyle}`;
    }
    return false;
  }

  static importDOM(): DOMConversionMap | null {
    return {
      p: (node: Node) => ({
        conversion: convertCustomParagraphElement,
        priority: 0,
      }),
    };
  }
}

function convertCustomParagraphElement(): DOMConversionOutput {
  return { node: $createCustomParagraphNode() };
}
export function $isCustomParagraphNode(node: LexicalNode | null | undefined): node is CustomParagraphNode {
  return node instanceof CustomParagraphNode;
}
export function $createCustomParagraphNode(backgroundColor?: string): CustomParagraphNode {
  return new CustomParagraphNode(backgroundColor);
}

Any ideas on how to fix this would be greatly appreciated! Thanks

[moy2010]

This is the type declaration for ParagraphNode:

export declare class ParagraphNode extends ElementNode {
    static getType(): string;
    static clone(node: ParagraphNode): ParagraphNode;
    createDOM(config: EditorConfig): HTMLElement;
    updateDOM(prevNode: ParagraphNode, dom: HTMLElement): boolean;
    static importDOM(): DOMConversionMap | null;
    exportDOM(editor: LexicalEditor): DOMExportOutput;
    static importJSON(serializedNode: SerializedParagraphNode): ParagraphNode;
    exportJSON(): SerializedParagraphNode;
    insertNewAfter(): ParagraphNode;
    collapseAtStart(): boolean;
}

As you can see, exportJSON must return a SerializedParagraphNode. If you want to be able to override this, you need to create a PR to change it.

[TheSwilliam]

That's what I assumed but wanted to double check. Thanks!