Monaco Editor で CMD/CTRL + S をセーブっぽい挙動にする #JavaScript

技書博では東京ラビットハウスというサークルでEffective React Hooksという本を出そうと執筆中のerukitiです。今回はその執筆過程ででてきたものを記事にしています。

Monaco Editor使ってますか？VSCodeのエディタ部分を切り離して公開されているOSSのエディタです。（というか、元々はMonacoが先に公開されていたような記憶）

Aceとか、ウェブアプリケーションに組み込めるテキストエディタモジュールは色々とありますが、Monacoは頑張ればIntelliSenseを組み込んだりもできます。

Monacoの使い方自体は他の記事なりなんなりをご覧ください。

CMD/CTRL+Sにコマンドを登録する

さて、ウェブアプリにエディタを組み込んだときに問題となるのが、「ついついクセでCMD/CTRL+Sを押してしまう」という現象です。CyberDojoとかでもついついCMD+Sを押して、ウェブページの保存をしてしまいそうになることありませんか？僕はあります。

editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, () => {
  editor.getAction('editor.action.formatDocument').run()
  console.log('saved')
})

editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Key_S, コールバック関数)で、色々なアプリケーションでセーブに割り当てられているショートカットキーを押したときに実行するコマンドを登録できます。

この事例では、エディタのテキストを整形する editor.action.formatDocumentコマンドを実行しています。