Monaco Editorで便利な機能「アクション」を使う

はじめに

　久々にMonaco Editorについて書く今回は、Monaco Editorの便利な機能の一つである、IEditorAction（わかりやすさのためここではアクションと呼ぶ）を紹介してみる。
　これはVisual Studio Codeでいうところのコマンドパレットにあたる機能で、Monaco Editorの定義ではIEditorActionとドキュメントに書かれるものだ。
　これはMonaco Editorを利用したウェブアプリ上（つまりUI上）で利用者が使えるのはもちろんだが、これの便利なところはプログラミングの最中でも各アクションを呼び出してウェブアプリ中の様々な機能の実現に活用することができる。

アプリ上(UI上)で使う

　もっともかんたんな作成方法でMonaco Editorを自分のアプリ上で作っても、デフォルトでアクションはコマンドパレットとして使うことができる。

※適当にエディタを作成した例

　どんなに適当に作ってもVisual Studio Codeと同等レベルのコマンドを利用することができるのでありがたい。

コマンドパレットにアクションを追加する

　ではコマンドパレットに新たなアクションを追加する方法を紹介したい。

　これには addAction メソッドを使う。

test.js

var myeditor = monaco.editor.create(this.element,{...});
var cmd1 = {
    id : "wordwrapAction001",
    label : "wordwrap off",

    keybindings : [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_V],
    contextMenuGroupId: 'clipboadAction',
    contextMenuOrder: 5,

    run : function (editor) {
        editor.updateOptions({
            wordWrap : "off"
        });
        return null;
    }
};
myeditor.addAction(cmd1);

プロパティは他にもあるが、基本の使い方でこれだけ使っておけばよいというものを抜粋して紹介する。

変数 cmd1 で示すものはIActionDescriptorと称される型だ。Javascriptでは普通にJSON形式で生成して問題ない。

id は、エディタ（ICodeEditor）上で判別される値だ。一意のものでこれを使ってアクションを後で取得できたりする。

label は、UI上で表示する名称だ。翻訳等をうまく実装してここを適切にセットしておきたいところだ。

keybindings はショートカットキーを定義するのに使う。
主要なキーコードは monaco.KeyCode に存在する。
Ctrlなどの特殊なキーは monaco.KeyMod にあるものを使う。ちなみにmonaco.KeyCode.Ctrlなども存在するので間違えないよう注意。そしてこれらを | で定義する。
複数のショートカットキーを定義したい場合は配列で定義しているため、, でつなげていけばよい。

contextMenuGroupId は右クリックで出てくるコンテキストメニューに配置する場合のグループIDを定義する。
デフォルトでは次のものがある。

・1_modification ・・・ Visual Studio Codeでいうところの「ドキュメントのフォーマット」「すべての出現箇所を変更」が表示されているアクションのグループのこと。
・9_cutcopypaste ・・・ 「コピー」「切り取り」があるグループのこと。

これらを指定すると新たなコマンドはそれらのグループの中に表示されるようになる。
もちろんまったく新しいグループIDを指定すれば新たなグルーピングとして表示される。

contextMenuOrder はそれらのグループの中の表示位置を指定する。

run が実行する処理内容である。これが一番のキモだろう。
このメソッドは引数にICodeEditorを受け渡してくる。また、追加で可変の引数も指定できる。

ICodeEditorの型で受け渡されるため、ITextModel（AceでいうところのEditSession）などもすべて呼び出せる。つまり、あらゆる機能を実現可能だ。

これら必要な項目を定義したらいざ addAction に受け渡せば、このように利用できるようになる。（例：ほげほげ貼り付け）

コーディング中に使う

　定義したアクションはコーディング時に使うこともできる。自分で定義したアクション以外にデフォルトで用意されているアクションも利用可能だ。

test.js

var actions = editor.getActions();
actions[49].run();     //---49番目のアクションを実行

var act2 = editor.getAction("actions.find");
act2.run();    //---検索アクションを呼び出す．

getActions メソッドは定義されているすべてのアクションを取得する。何があるのかわからないという場合にはこれを使ってメモしておこう。

getAction メソッドは各アクションで定義されている id を指定して特定のアクションを取得する。よく呼び出したいアクションは別途このIDを退避しておけばどのコード中でも手軽に呼び出せる。

終わりに

　Monaco Editorは単にプログラミング言語のソースに直接便利なだけではなく、うまく利用すれば単なるソースコードのエディタを超える機能を実現できるだろう。
　アクション（IEditorAction）もそんな可能性を秘めた機能の一つだ。みなさんうまく使いこなそう。