CodeMirrorについては先日、こちらの記事を投稿しました。
CodeMirrorでは、自分の好きなようにエディタを拡張することができ、独自の機能も追加することが可能です。
この役割を担っているのが、Extensionです。
CodeMirrorにおいて重要なExtensionですが、色々な種類のExtensionがあるので、調べてまとめてみました。
この記事はSystem GuideやReference Manualを元にまとめたものになります。
正しい情報はドキュメントをご確認ください。
Extensionとは
Extensionとはエディタを拡張するもので、イメージしやすいのは、何らかのDOMイベントをフックに、エディタのstateを変化させるものです。
System Guideに載っている図を用いると、DOM eventからtransactionを作成、dispatchしてstateを更新する機能です。
それ以外に、タブサイズなどの設定値を保持したり、keymapや、エディタのテーマを設定したりできます。
いくつか説明していきます。
domEventHandlers
domEventHandlersはドラッグイベントなどのDOMのイベントにハンドラを設定することができます。
Commandについて
domEventHandlersではCommandを使います。keymapなどでも使うのですが、副作用を発生させる処理です。
イベントやキー入力をフックに、実行するかを判断し、transactionをdispatchします。
@codemirror/commandsに様々なコマンドが存在しています。例えばカーソルを操作したり、選択範囲を操作したり、文字を挿入、削除したりと、これを見ればどんなことができるのかイメージがつかみやすいと思います。
keymap
任意のキーマップのハンドラーを設定できます。これを使って、特定のcommandを実行することができます。
もともと用意されているものとしてemacsStyleKeymapなどがあり、簡単に拡張することができます。
Facet
Facetは設定の値などを保存するために使います。静的な値や、関数などを保持することが多いようで、他のExtensionなどから呼び出して使用することができます。
使用例として挙げられているのは、タブサイズ、エディター属性、アップデートリスナーです。
その他
その他にも、themeでエディタのスタイルやテーマを管理したり、historyなどでstateの追加情報を管理するStateFieldや、エディタのサイズなどといったその場のviewportに依存する状態を管理するView Pluginなどがあります。
言語ごとにシンタックスハイライトなども用意されているものもあります。
もっと詳しく知りたい方は、Examplesを見ると色々な拡張が用意されているのでご覧ください！
自分でExtensionを実装するときにこれらを参考にできそうです。