feat(monaco): support to keep selection and cursor position (#99)

Author: zqran

src/monaco/Monaco.vue

@@ -105,26 +105,26 @@ onMounted(async () => {
   editor.value = editorInstance
 
   // Support for semantic highlighting
-  const t = (editorInstance as any)._themeService._theme;
+  const t = (editorInstance as any)._themeService._theme
   t.getTokenStyleMetadata = (
     type: string,
     modifiers: string[],
     _language: string
   ) => {
-    const _readonly = modifiers.includes('readonly');
+    const _readonly = modifiers.includes('readonly')
     switch (type) {
       case 'function':
       case 'method':
-        return { foreground: 12 };
+        return { foreground: 12 }
       case 'class':
-        return { foreground: 11 };
+        return { foreground: 11 }
       case 'variable':
       case 'property':
-        return { foreground: _readonly ? 21 : 9 };
+        return { foreground: _readonly ? 21 : 9 }
       default:
-        return { foreground: 0 };
+        return { foreground: 0 }
     }
-  };
+  }
 
   if (props.readonly) {
     watch(
@@ -147,6 +147,11 @@ onMounted(async () => {
           file.code
         )
         editorInstance.setModel(model)
+
+        if (file.selection) {
+          editorInstance.setSelection(file.selection)
+          editorInstance.focus()
+        }
       },
       { immediate: true }
     )
@@ -161,6 +166,14 @@ onMounted(async () => {
   editorInstance.onDidChangeModelContent(() => {
     emits('change', editorInstance.getValue())
   })
+
+  editorInstance.onDidChangeCursorSelection(e => {
+    const selection = e.selection
+    const file = store.state.files[props.filename]
+    if (file) {
+      file.selection = selection
+    }
+  })
 })
 
 onBeforeUnmount(() => {

src/store.ts

@@ -8,6 +8,7 @@ import {
   SFCTemplateCompileOptions
 } from 'vue/compiler-sfc'
 import { OutputModes } from './output/types'
+import { Selection } from 'monaco-editor-core'
 
 const defaultMainFile = 'App.vue'
 
@@ -35,6 +36,7 @@ export class File {
     css: '',
     ssr: ''
   }
+  selection: Selection | null = null
 
   constructor(filename: string, code = '', hidden = false) {
     this.filename = filename