こんにちは。sawaです。
皆さんはリッチテキストエディタやWYSIWYGエディタを実装する際、どのライブラリを使っていますか？
選択肢が複数あり、選定の際に迷ってしまいますよね。
本記事では人気のライブラリ6つの簡単な紹介と、比較的最近リリースされた「Lexical」を紹介したいと思います。
リッチテキストエディタライブラリ6つの特徴
今回はオープンソースとして公開されていてJSON形式でデータが保存されるライブラリを6つピックアップしました。
どれも基本的な要件は満たすため、特筆すべき点をそれぞれ簡単に記載しています。
ざっとドキュメントなどを読んでいったので、取りこぼしや間違いがあれば教えていただけますと幸いです。
Quill
GitHub：GitHub - slab/quill: Quill is a modern WYSIWYG editor built for compatibility and extensibility
リリース年：2014年
データモデル：デルタ形式
シンプルかつ軽量
- 他３点と比較してブロック形式ではなく、文章全体が１つのテキストドキュメントとして扱われる
Draft.js
GitHub：https://github.com/facebookarchive/draft-js
- リリース年：2016年
- データモデル：ブロックベース
- Reactでの利用が前提
- 現在はアーカイブ化されている。後述のLexicalに移行。
Slate
GitHub：https://github.com/ianstormtaylor/slate
- リリース年：現在ベータ版
- データモデル：ノードベース
- 全てにおいてカスタマイズが可能
Editor.js
GitHub：https://github.com/editor-js/awesome-editorjs
- リリース年：2018年
- データモデル：ブロックベース
- 履歴管理は非対応
Tiptap
GitHub：https://github.com/ueberdosis/tiptap
- リリース年：2019年
- データモデル：ノードベース
- Vue.jsに強い
- デフォルトで入力時にMarkdownが使える
Lexical
GitHub：https://github.com/facebook/lexical
- リリース年：2022年
- データモデル：ノードベース
- 複雑な構造を持つコンテンツに強い
- デフォルトで入力時にMarkdownが使える
Lexicalとは
中でも今回は「Lexical」を簡単に紹介させていただきます。
こちらはMeta社（旧Facebook）が開発したリッチテキストエディタです。Draft.jsの後継となるライブラリで、2022年にリリースされました。
機能の豊富さは下記のデモページでを触っていただくと手っ取り早く実感していただけるかと思います。
公式で音声認識まで対応できるのはなかなかに便利ですね。 playground.lexical.dev
個人的に良いと思った点は、ネストが複雑化しているリッチテキストを扱い易いところです。
また他と比べて改行やリンク判定が厳密なあたり使い勝手も良く好印象です。
下記が公式から提供されているReact環境のサンドボックスです。
前身にあたるDraft.jsと比べてもシンプルですね。
選定について
紹介したもののどれもこまめなバージョンアップがなされており、一強のものがないため選定の際は悩みますね。
身も蓋もないことを言うと、どれも既存のライブラリで対応すると複雑化するのををカバーするために新しくライブラリを作っているので、特に条件がなければ新しいものを選べば良いと思います。
と言うのも、リッチテキストエディタの特性上、使用する際に相応の学習コストがかかります。
それを見越して、選定に時間をかけるよりもドキュメントの読み込みを優先した方が効率が良いと感じました。
またどれも拡張性が高いため、カスタマイズすれば大体の求められる要件は叶えられます。
例外として、時間がなくてデフォルトの機能だけをとりあえず使いたい場合や、PJにすでに知見がある場合は条件に合致するライブラリを検討した方が良いかと思います。
では！
