refactor: save editor view state in store (#130)

Author: Sight-wcg

src/monaco/Monaco.vue

@@ -105,7 +105,7 @@ onMounted(async () => {
   } else {
     watch(
       () => props.filename,
-      () => {
+      (_, oldFilename) => {
         if (!editorInstance) return
         const file = store.state.files[props.filename]
         if (!file) return null
@@ -114,10 +114,16 @@ onMounted(async () => {
           file.language,
           file.code
         )
+
+        const oldFile = oldFilename ? store.state.files[oldFilename] : null
+        if (oldFile) {
+          oldFile.editorViewState = editorInstance.saveViewState()
+        }
+
         editorInstance.setModel(model)
 
-        if (file.selection) {
-          editorInstance.setSelection(file.selection)
+        if (file.editorViewState) {
+          editorInstance.restoreViewState(file.editorViewState)
           editorInstance.focus()
         }
       },
@@ -135,14 +141,6 @@ onMounted(async () => {
     emit('change', editorInstance.getValue())
   })
 
-  editorInstance.onDidChangeCursorSelection((e) => {
-    const selection = e.selection
-    const file = store.state.files[props.filename]
-    if (file) {
-      file.selection = selection
-    }
-  })
-
   // update theme
   watch(replTheme, (n) => {
     editorInstance.updateOptions({

src/store.ts

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