Lexical Editor: DecoratorNode in vanilla js

45 views Asked by At

How do you handle decorator node output in vanilla js? It looks like the decorate method of thevDecoratorNode Class is for rendering React components. Is the decorate() method required to extend the DecoratorNode in vanilla js. The exact reason for the DecoratorNode is not very clear.

Example - How would you implement the below in vanilla js?

class HorizontalRuleNode extends lexical.DecoratorNode {
  static getType() {
    return 'horizontalrule';
  }
  static clone(node) {
    return new HorizontalRuleNode(node.__key);
  }
  static importJSON(serializedNode) {
    return $createHorizontalRuleNode();
  }
  static importDOM() {
    return {
      hr: () => ({
        conversion: convertHorizontalRuleElement,
        priority: 0
      })
    };
  }
  exportJSON() {
    return {
      type: 'horizontalrule',
      version: 1
    };
  }
  exportDOM() {
    return {
      element: document.createElement('hr')
    };
  }
  createDOM() {
    return document.createElement('hr');
  }
  getTextContent() {
    return '\n';
  }
  isInline() {
    return false;
  }
  updateDOM() {
    return false;
  }
  decorate() {
    return /*#__PURE__*/React.createElement(HorizontalRuleComponent, {
      nodeKey: this.__key
    });
  }
}type here
0

There are 0 answers