リッチテキストエディター Quill 2.0 がリリースされ、機能、信頼性、開発者エクスペリエンスが大幅に向上しました。

Quill バージョン 2.0 がリリースされました。

公式の TypeScript ステートメント

Quill のソースコードは TypeScript に完全に移行されており、早期エラー検出、保守性の向上、ツールサポートの向上という利点があります。

以前は、開発者は@types/quillTypeScript 定義を取得するには、これを別のパッケージとしてインストールする必要がありました。 Quill 2.0 では、型宣言をソースから直接取得できます。

複数のレジストリ

ブログプロジェクトでは Quill を使用して、タイトル、画像、コードブロックを含む投稿自体のフル機能の編集インターフェイスを提供することができます。また、同じページ上で Quill は太字と斜体のコメント入力、およびサポートされているリンク形式もサポートしています。 Quill 2.0 の新registry機能はこのユースケースをサポートしており、独自のスタイル設定を持つ複数のエディターが競合することなく同じページ上に共存できるようになります。

ローリングコンテナの自動検出

以前は、開発者は Quill インスタンスを作成するときにエディターのスクロールコンテナーを指定して、必要に応じてユーザーのカーソルまたは選択内容がビューにスクロールできるようにする必要がありました。ただし、この構成は見落とされたり混乱したりすることが多く、ローリングコンテナーが誤って指定されているか、まったく指定されていません。さらに、大規模なアプリやコードベースでは、さまざまなコンテキストで表示される可能性のある再利用可能なエディターコンポーネントに適したスクロールコンテナーを見つけるのは必ずしも簡単ではありません。 2.0 では、Quill は正しいスクロールコンテナを自動的に見つけます。これにより、長い形式のテキストで Quill を簡単に使用できるようになり、自由にネストされたスクロールコンテナや水平スクロールなど、より複雑なインタラクションがサポートされます。

入力イベントの使用

Quill の主な強みの 1 つは、信頼できる唯一の情報源として DOM に依存しない、内部管理されたドキュメントモデルです。これにより、開発者のメンタルモデルに近いリッチテキスト状態のマッピングが提供され、より単純なテキスト編集 API がサポートされます。

Quill は、DOM の変更をリッスンし、それらを正規化して内部ドキュメントモデルに戻すことでこれを行います。ただし、ブラウザーはユーザーのアクションを一貫性がないか、不正確に処理する可能性があり、その結果、不正確な DOM 変更が生成されることがあります。たとえば、ユーザーが赤いテキストを選択し、入力して置き換えると、エディターが色を表すために要素を使用している場合でも、ブラウザーはその要素をその属性fontに赤を持つ要素に置き換えることがあります。stylespan

Quill 2.0 では、最新の一般的なブラウザ機能を使用して、InputEvents をトリガーします。現在は、ユーザーのアクションがまずキャプチャされて内部ドキュメントモデルが更新され、その後、結果として生じる変更が DOM に同期されます。このアプローチにより、特に複雑なコンテンツや形式に対して、より一貫性と信頼性の高い編集エクスペリエンスが提供されます。この機能は現在、テキスト置換インタラクションの最も問題のあるソースに焦点を当てており、将来的にはより広範囲に使用される予定です。

以下は 2.0 の主な更新情報のリストです。

主な改良点

Quill は、エコシステム (パッケージャーなど) とツリーシェーキング機能をより適切にサポートする有効な ESM パッケージになりました。
ネストされた Quill #3590をサポート
入力方法 (IME) とスペル修正ツールのサポートを改善#3807
TEXT_CHANGE イベント#3778のセマンティッククリーンアップ
履歴: 履歴モジュール#3823の選択内容のログ記録
スクロールコンテナを自動的に検出#3840
クリップボード: Google ドキュメントおよび Microsoft Word からの貼り付けのサポートが改善されました。

パフォーマンスの向上

Quill 2.0 には多数のパフォーマンスの最適化が含まれており、その中で最も重要なのは、大量のコンテンツのレンダリング速度の向上です。
挿入パフォーマンスの向上#3815
可能であれば選択セットの取得を避ける#3538
コンテナが空の場合は setContents を行う必要はありません#3539

コードの最新化

TypeScript への移行
公式の TypeScript 宣言が提供されています
単体テストのために Vitest に移行する
Playwright に移行してエンドツーエンドのテストを行う
Web サイトを Gatsby に移行する

詳細については、公式発表と 2.0 移行ガイドを確認してください。