Lexical PlayGroundから仕組みを調べてみた

 root
  ├ (122) heading  
  | └ (120) text  "Welcome to the playground"
  ├ (127) quote  
  | └ (125) text  "In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of the editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting."

{
    "editorState": {
        "root": {
            "children": [
                {
                    "children": [
                        {
                            "detail": 0,
                            "format": 0,
                            "mode": "normal",
                            "style": "",
                            "text": "Welcome to the playground",
                            "type": "text",
                            "version": 1
                        }
                    ],
                    "direction": "ltr",
                    "format": "",
                    "indent": 0,
                    "type": "heading",
                    "version": 1,
                    "tag": "h1"
                },
                {
                    "children": [
                        {
                            "detail": 0,
                            "format": 0,
                            "mode": "normal",
                            "style": "",
                            "text": "In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of the editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting.",
                            "type": "text",
                            "version": 1
                        }
                    ],
                    "direction": "ltr",
                    "format": "",
                    "indent": 0,
                    "type": "quote",
                    "version": 1
                }
            ],
            "direction": "ltr",
            "format": "",
            "indent": 0,
            "type": "root",
            "version": 1
        }
    },
    "lastSaved": 1689304794624,
    "source": "Playground",
    "version": "0.11.2"
}

const initialEditorState = await loadContent();
const editorStateRef = useRef();

<LexicalComposer initialConfig={{
  editorState: initialEditorState
}}>
  <LexicalRichTextPlugin />
  <LexicalOnChangePlugin onChange={editorState => editorStateRef.current = editorState} />
</LexicalComposer>

export const INSERT_ORIGINAL_COMMAND: LexicalCommand<string> = createCommand();

export default function OriginalPlugin(): JSX.Element | null {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    if (!editor.hasNodes([OriginalNode])) {
      throw new Error('OriginalNode: OriginalNode not registered on editor ');
    }

    return editor.registerCommand<string>( // nodeの追加が指示されたことを感知
      INSERT_ORIG_COMMAND,
      (payload) => {
        const originalNode = $createOriginalNode(payload);　// nodeの作成
        $insertNodeToNearestRoot(originalNode); // EditorStateにnodeを追加

        return true;
      },
      COMMAND_PRIORITY_EDITOR,
    );
  }, [editor]);

  return null;
}

export class EmojiNode extends TextNode {
  createDOM(config: EditorConfig): HTMLElement {
  }

  updateDOM(
    prevNode: TextNode,
    dom: HTMLElement,
    config: EditorConfig,
  ): boolean {
  }

  static importJSON(serializedNode: SerializedEmojiNode): EmojiNode {
    const node = $createEmojiNode(
      serializedNode.className,
      serializedNode.text,
    );
    return node;
  }

  exportJSON(): SerializedEmojiNode {
    return {
      //
    };
  }
}

export function $createEmojiNode(
  className: string,
  emojiText: string,
): EmojiNode {
  const node = new EmojiNode(className, emojiText).setMode('token');
  return $applyNodeReplacement(node);
}