feat: support auto close tag / auto .value

Author: johnsoncodehk

src/monaco/Monaco.vue

@@ -52,8 +52,6 @@ onMounted(async () => {
     throw new Error("Cannot find containerRef");
   }
 
-  const ls = await setupLs(documentModelMap)
-
   const editorInstance = monaco.editor.create(containerRef.value, {
     theme,
     model: currentModel.value,
@@ -69,6 +67,8 @@ onMounted(async () => {
   });
   editor.value = editorInstance
 
+  const ls = await setupLs(editorInstance, documentModelMap)
+
   await loadGrammars(editorInstance);
 
   editorInstance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {

src/monaco/ls.ts

@@ -43,7 +43,7 @@ onBeforeUnmount(() => {
     });
 });
 
-export async function setupLs(modelsMap: Ref<Map<string, monaco.editor.ITextModel>>): Promise<LanguageService> {
+export async function setupLs(editor: monaco.editor.IStandaloneCodeEditor, modelsMap: Ref<Map<string, monaco.editor.ITextModel>>): Promise<LanguageService> {
     const libEs5Url = monaco.Uri.parse('file:///lib.es5.d.ts');
     const libDomUrl = monaco.Uri.parse('file:///lib.dom.d.ts');
     const libDtsUrl = monaco.Uri.parse('file:///lib.d.ts');
@@ -215,6 +215,49 @@ export async function setupLs(modelsMap: Ref<Map<string, monaco.editor.ITextMode
     const documents = new WeakMap<monaco.editor.ITextModel, vscode.TextDocument>();
 
     disposables.value.push(
+        editor.onDidChangeModelContent(async e => {
+            const model = editor.getModel();
+            const monacoSelection = editor.getSelection();
+            if (model && monacoSelection && e.changes.length === 1) {
+                const document = documents.get(model);
+                if (document) {
+                    const range = monaco2code.asRange(monacoSelection);
+                    const change = e.changes[0];
+                    // auto-close-tag
+                    let edit = await ds.doAutoInsert(document, range.start, {
+                        lastChange: {
+                            range: monaco2code.asRange(change.range),
+                            rangeOffset: change.rangeOffset,
+                            rangeLength: change.rangeLength,
+                            text: change.text,
+                        },
+                    });
+                    if (!edit) {
+                        // auto .value
+                        edit = await ls.doAutoInsert(document.uri, range.start, {
+                            lastChange: {
+                                range: monaco2code.asRange(change.range),
+                                rangeOffset: change.rangeOffset,
+                                rangeLength: change.rangeLength,
+                                text: change.text,
+                            },
+                        });
+                    }
+                    if (edit) {
+                        if (typeof edit == 'string') {
+                            model.applyEdits([{
+                                range: monacoSelection,
+                                text: edit,
+                            }]);
+                        }
+                        else {
+                            model.applyEdits([code2monaco.asTextEdit(edit)]);
+                        }
+                    }
+                }
+            }
+        }),
+
         // TODO: registerTokensProviderFactory
         // TODO: setTokensProvider
         // TODO: setMonarchTokensProvider

src/monaco/monaco2code.ts

@@ -7,7 +7,7 @@ export function asPosition(position: monaco.Position): vscode.Position {
     );
 }
 
-export function asRange(range: monaco.Range): vscode.Range {
+export function asRange(range: monaco.IRange): vscode.Range {
     return vscode.Range.create(
         range.startLineNumber - 1,
         range.startColumn - 1,