Lexical React - Headings, Lists, Toolbar

Summary

この動画のスクリプトでは、React製のリッチテキストエディターツールキットであるLexicalを使って、ヘディングやリストを追加するツールバーの作り方を解説しています。最初にヘディングプラグインを作成し、選択したテキストをヘディングに変換する方法を示しています。次に、さまざまなヘディングレベルをサポートするよう機能を拡張します。さらに、リストプラグインを追加し、順序付きリストや順序なしリストを作成する方法を説明しています。このチュートリアルを通して、Lexicalを使ったリッチテキストエディターのカスタマイズ方法を実践的に学ぶことができます。

Takeaways

• 🚀 この動画では、React の lexical エディターでツールバーを構築する方法を学びます。
• 📝 前回の動画では、ヘッディングノードを挿入するだけでしたが、今回はテキストの選択とヘッディングへの変換、リストの追加など、より実践的な機能を追加しています。
• 🔧 setBlocksType ヘルパーを使用して、選択したテキストをヘッディングに変換することができます。
• ⌨️ ツールバーにボタンを追加し、タグに基づいてヘッディングの種類 (h1、h2、h3) を切り替えることができます。
• 📖 スタイルシートを使ってヘッディングの見た目をカスタマイズできます。
• ✅ lexical-list パッケージをインストールして、ordered list と unordered list のコマンドをツールバーに追加できます。
• 🧩 プラグインを作成してツールバーの機能を構築し、ヘッディングとリストのプラグインを合成することができます。
• 🔄 インストール時に node_modules の問題が発生した場合は、キャッシュをクリアしてパッケージを再インストールする必要があります。
• 🧭 lexical のプレイグラウンドでさまざまなツールバーの実装例を確認できます。
• 🏗 ツールバーの構築方法は多様で、開発者ごとにカスタマイズできるため、自分なりのソリューションを模索することが推奨されています。

Q & A

1. Lexical Reactとは何ですか?

Lexical Reactは、Facebookが開発したリッチテキストエディタの構築を支援するライブラリです。ReactベースのコンポーネントとAPIを提供し、高度にカスタマイズ可能なテキストエディタの作成を可能にします。

2. 前回の動画では何を行いましたか?

前回の動画では、基本的なボタンを作成し、そのボタンをクリックするとヘッディングノードが挿入されるようにしました。これは、ツールバーとエディターとのUIの対話の基礎となるものでした。

3. 今回のゴールは何ですか?

今回の目標は、ツールバーをさらに拡張し、ヘッディングの使用をより実用的なものにすること、そしてリストのサポートを追加することです。つまり、UIとの対話をより深く行うことが目的です。

4. セレクトされたテキストをヘッディングに変換するにはどうすればよいですか?

setBlocksTypeヘルパー関数を使用します。これにより、選択範囲とノード作成関数を渡すことで、その選択範囲をヘッディングノードで囲むことができます。

5. 様々なヘッディングレベル(H1、H2、H3など)をどのように実装しますか?

各ヘッディングレベルに対応するボタンを作成し、そのボタンをクリックしたときに適切なヘッディングノードを作成するようにします。ボタンには独自のスタイルを適用することもできます。

6. リストのサポートを追加するにはどうすればよいですか?

lexical-reactパッケージから提供されているlistPluginを使用します。このプラグインにより、ordered listやunordered listを挿入したり削除したりするコマンドが利用可能になります。

7. リストノードをエディターに登録する必要があるのはなぜですか?

現在のLexicalの制約上、リストノードをエディターに明示的に登録する必要があります。プラグイン自体でノードを登録することはできないためです。この点は将来的に改善される可能性があります。

8. ツールバーの構造をどのように構築しますか?

ツールバーの構造は、Reactコンポーネントを構成することで作成できます。ツールバー全体をひとつのプラグインとしてラップし、その中で個々のボタンを別のコンポーネントとして作成するのが一般的なアプローチです。

9. Lexicalでツールバーを実装する方法は決まっていますか?

いいえ、ツールバーの実装方法は決まっていません。Lexicalはフレキシブルなので、Reactコンポーネントの構成方法は自由に選択できます。プレイグラウンドなどのサンプルを参考にしつつ、自分なりの実装方法を探ることが推奨されています。

10. 動画の最後に言及されている「より興味深い使用例」とは何を指していますか?

動画の最後では、今後の動画でより高度でエキサイティングな機能の実装を行うことを示唆しています。たとえば、リッチテキストフォーマッティングの追加や、カスタムノードの作成などが考えられます。