lexical

# react -> list,link,code,overflow,history,markdown,mark,hashtag,selection,dragon,utils,table,clipboard,rich-text,plain-text
npm add lexical @lexical/react

npm add @lexical/file

npm add y-websocket yjs @lexical/yjs

interface Node {
  static getType();
  static clone(node: typeof this);

  // ElementNode 没有 EditorConfig
  // TextNode 有 EditorConfig

  createDOM(config: EditorConfig): HTMLElement;
  // true - replace with createDOM
  updateDOM(prevNode: CustomParagraph, dom: HTMLElement, config: EditorConfig): boolean;

  // for DecoratorNode<React$Node>
  decorate(): React$Node;
}

editor.registerNodeTransform(TextNode, (textNode) => {
  //
});

// payload
const HELLO_WORLD_COMMAND: LexicalCommand<string> = createCommand();

editor.dispatchCommand(HELLO_WORLD_COMMAND, 'Hello World!');

editor.registerCommand(
  HELLO_WORLD_COMMAND,
  (payload: string) => {
    console.log(payload); // Hello World!
    return false;
  },
  LowPriority,
);

const removeUpdateListener = editor.registerUpdateListener(({ editorState }) => {
  editorState.read(() => {
    // 通过 $ 前缀函数 访问上下文状态
  });
  editor.update(() => {
    // transaction
  });
});

removeUpdateListener();

// 监听内容变化
editor.registerTextContentListener((textContent) => {
  console.log(textContent);
});

// 监听节点修改
editor.registerMutationListener(MyCustomNode, (mutatedNodes) => {
  // mutation: created, destroyed, updated
  for (let [nodeKey, mutation] of mutatedNodes) {
    console.log(nodeKey, mutation);
  }
});
// 只读状态变化
editor.registerReadOnlyListener((readOnly) => {
  console.log(readOnly);
});
//
editor.registerDecoratorListener((decorators) => {
  console.log(decorators);
});