FrontEnd.ro logo
Lexical / part 2

import { addClassNamesToElement } from '@lexical/utils';
import { EditorConfig, ElementNode, SerializedElementNode, Spread } from "lexical";

export type SerializedQuoteNode = Spread<
  {
    type: 'quote';
    version: 1;
  },
  SerializedElementNode
>;

export class QuoteNode extends ElementNode {
  static getType(): string {
    return 'quote';
  }

  static clone(node: QuoteNode): QuoteNode {
    return new QuoteNode(node.__key);
  }

  createDOM(config: EditorConfig): HTMLElement {
    const element = document.createElement('blockquote');
    addClassNamesToElement(element, config.theme.quote);
    return element;
  }

  updateDOM(prevNode: QuoteNode, dom: HTMLElement): boolean {
    return false;
  }

  static importJSON(serializedNode: SerializedQuoteNode): QuoteNode {
    const node = new QuoteNode();
    node.setFormat(serializedNode.format);
    node.setIndent(serializedNode.indent);
    node.setDirection(serializedNode.direction);
    return node;
  }

  exportJSON(): SerializedElementNode {
    return {
      ...super.exportJSON(),
      type: 'quote',
    };
  }
}