概要
monaco-editor で html のタグを閉じた際に、閉じタグの補完する。
monaco の標準の機能では実現できなかったので(2021年3月13日時点)、独自に実装する。
手順
-
keyUpのイベントを講読 -
>か否か - 補完前のコードを取得
- 補完するタグを取得
- 閉じタグを補完
- 補完後にタグの中央へ位置を戻す
editor.onKeyUp((event) => {
// 1. `>` か否か
const keyCode = event.keyCode as number;
if (keyCode !== 84) return;
const model = editor.getModel();
if (!model) return;
const position = editor.getPosition();
if (!position) return;
// 2. 補完前のコードを取得
const codePre = model.getValueInRange({
startLineNumber: position.lineNumber,
startColumn: 1,
endLineNumber: position.lineNumber,
endColumn: position.column,
});
// 3. 補完するタグを取得
const tag = codePre.match(/.*<(\w+)>$/)?.[1];
if (!tag) return;
// 4. 閉じタグを補完
editor.trigger('bra', 'type', {
text: `</${tag}>`,
});
// 5. 補完後にタグの中央へ位置を戻す
editor.setPosition(position);
});