技書博では東京ラビットハウスというサークルで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コマンドを実行しています。