目次機能実装から理解するLexical Editor

2025.03.19（水） Wantedly Tech Night #9 発表資料

Wantedly Tech Night 〜フロントエンドチームにおける開発文化やツールについて〜
https://wantedly.connpass.com/event/346578

Transcript

1. © 2025 Wantedly, Inc. 目次機能実装から理解するLexical Editor Wantedly Tech Night #9 2025-03-19 Kyuhwan Lee
2. © 2025 Wantedly, Inc. 自己紹介 李 圭煥 (Kyuhwan Lee) @wtdlee Wantedly, Inc. (2023/10～) Visit User Growth フロントエンドエンジニア
3. © 2025 Wantedly, Inc. 目次 • Lexicalについて • Lexicalの基本概念 ◦ Editor ◦ EditorState ◦ Lexical Nodes ◦ Commands ◦ Editor Plugins • 実際の実装：目次
4. © 2025 Wantedly, Inc. Lexicalについて
5. © 2025 Wantedly, Inc. Lexicalについて • 安定性、アクセシビリティ、性能にフォーカスした拡張可能な JavaScript Webテキスト編集フレームワーク ◦ WYSIWYG(What You See Is What You Get) エディターフレームワーク イメージ：https://lexical.dev/
6. © 2025 Wantedly, Inc. Lexicalについて • 安定性 ◦ 必要な機能をプラグインとして追加 ◦ カスタムレンダリングエンジン • アクセシビリティ ◦ Screen Reader ◦ ARIA属性管理 • 性能 ◦ カスタムレンダリングエンジン ◦ JSON基盤の状態管理
7. © 2025 Wantedly, Inc. Lexicalの基本概念
8. © 2025 Wantedly, Inc. Lexicalの設計 • Editor ◦ Lexicalのエンジン ◦ Lexicalの全体的な動作の処理やイベントを管理 • EditorState ◦ Editor内部の状態（JSON）が記録されているオブジェクト ◦ editor.update()で変更可能
9. © 2025 Wantedly, Inc. Lexicalの設計 • Lexical Nodes ◦ LexicalのドキュメントはNode基盤 ◦ 基本Node ▪ TextNode ▪ ParagraphNode ▪ HeadingNode ▪ ListNode, ListItemNode ◦ カスタムNodeの追加でEditor内部の要素として利用可能
10. © 2025 Wantedly, Inc. Lexicalの設計 • Commands ◦ Editorの特定機能を実行する ◦ editor.registerCommand()で登録、editor.dispatchCommand()で実行 ◦ createCommandでカスタムコマンドも生成可能 User Action EditorState Command Registry 入力 Command実行 （Editorの状態変更） アップデート View
11. © 2025 Wantedly, Inc. Lexicalの設計 • Editor Plugins ◦ 特定機能を追加する際に利用可能 ◦ ex) ▪ RichTextPlugin：Bold, Italicなど基本的な書式 ▪ HistoryPlugin：Undo/Redo ▪ MarkdownShortcutPlugin：Markdown入力 ◦ 目次実装では「TableOfContentsPlugin」を利用
12. © 2025 Wantedly, Inc. 実際の実装：目次 - Wantedly 開発の場合
13. © 2025 Wantedly, Inc. https://playground.lexical.dev/?showTableOfContents=true Lexical Playgroundでは固定箇所に表示されている が、ウォンテッドリーストーリーでは Nodeとして好きな 箇所に挿入できるようにしたい。 また、コンテンツに含まれていて詳細画面描画にも使 えるようになる必要があった。
14. © 2025 Wantedly, Inc. 各種機能の挿入ボタン。 Inserterと呼ばれている
15. © 2025 Wantedly, Inc. Inserterをクリックすると 目次が挿入できるボタンが表示
16. © 2025 Wantedly, Inc. 目次ボタンをクリックすると Lexical Custom Nodeが追加
17. © 2025 Wantedly, Inc. まず、クリックした際のイベント（ Command）を登録 する必要がある
18. © 2025 Wantedly, Inc. Node.tsx • Command 定義 ◦ createCommandで識別できるToken（Key）を生成する ◦
19. © 2025 Wantedly, Inc. TableofcontentsPlugin.tsx • Plugin 定義 ◦ 生成したTokenがどんな挙動を起こすのかを定義する このCommandは 目次Nodeを生成して 一番近い要素に追加する
20. © 2025 Wantedly, Inc. InserterPlugin.tsx • Command 実行 ◦ 目次ボタンをクリックした際に、定義した Commandが実行されるようにする
21. © 2025 Wantedly, Inc. Node.tsx • Serialized Type 定義 ◦ NodeはClass基盤だが、EditorStateがJSON形式なので NodeもSerializeできる必要がある
22. © 2025 Wantedly, Inc. Node.tsx • Node 定義
23. © 2025 Wantedly, Inc. Editor.tsx • Pluginを挿入