From e98187cf76dc45c1acae7989885dabf514eae4f1 Mon Sep 17 00:00:00 2001
From: Hongkun Peng <penghongkun422@gmail.com>
Date: Tue, 23 Jul 2024 22:08:40 +0800
Subject: [PATCH 1/7] feat: autoSave option supports dynamic switching

---
 src/Repl.vue                  |  2 +-
 src/codemirror/CodeMirror.vue | 37 +++++++++++++++++++++++------------
 src/monaco/Monaco.vue         | 32 ++++++++++++++++++++----------
 3 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/src/Repl.vue b/src/Repl.vue
index 30e0bc20..ed2b581b 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -68,7 +68,7 @@ const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right'))
 
 provide(injectKeyStore, props.store)
 provide('autoresize', props.autoResize)
-provide('autosave', props.autoSave)
+provide('autosave', toRef(props, 'autoSave'))
 provide('import-map', toRef(props, 'showImportMap'))
 provide('tsconfig', toRef(props, 'showTsConfig'))
 provide('clear-console', toRef(props, 'clearConsole'))
diff --git a/src/codemirror/CodeMirror.vue b/src/codemirror/CodeMirror.vue
index 6dae3df7..9d8d0995 100644
--- a/src/codemirror/CodeMirror.vue
+++ b/src/codemirror/CodeMirror.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import type { ModeSpec, ModeSpecOptions } from 'codemirror'
-import { inject, onMounted, ref, watchEffect } from 'vue'
+import { inject, onMounted, ref, watch, watchEffect } from 'vue'
 import { debounce } from '../utils'
 import CodeMirror from './codemirror'
 
@@ -22,9 +22,9 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<(e: 'change', value: string) => void>()
 
-const el = ref()
+const el = ref<HTMLDivElement>()
 const needAutoResize = inject('autoresize')
-const autoSave = inject('autosave')
+const autoSave = inject<boolean>('autosave')
 
 onMounted(() => {
   const addonOptions = props.readonly
@@ -71,18 +71,29 @@ onMounted(() => {
     )
   }
 
-  if (autoSave) {
-    editor.on('change', () => {
+  const editorChangeEvent = () => {
+    emit('change', editor.getValue())
+  }
+  const saveKeydownEvent = (e: KeyboardEvent) => {
+    if (e.ctrlKey && e.key === 's') {
+      e.preventDefault()
       emit('change', editor.getValue())
-    })
-  } else {
-    el.value!.addEventListener('keydown', (e: KeyboardEvent) => {
-      if (e.ctrlKey && e.key === 's') {
-        e.preventDefault()
-        emit('change', editor.getValue())
-      }
-    })
+    }
   }
+
+  watch(
+    () => autoSave,
+    (newVal) => {
+      if (newVal) {
+        el.value!.removeEventListener('keydown', saveKeydownEvent)
+        editor.on('change', editorChangeEvent)
+      } else {
+        editor.off('change', editorChangeEvent)
+        el.value!.addEventListener('keydown', saveKeydownEvent)
+      }
+    },
+    { immediate: true },
+  )
 })
 </script>
 
diff --git a/src/monaco/Monaco.vue b/src/monaco/Monaco.vue
index 68229bca..ef48cbc2 100644
--- a/src/monaco/Monaco.vue
+++ b/src/monaco/Monaco.vue
@@ -142,19 +142,31 @@ onMounted(async () => {
     // ignore save event
   })
 
-  if (autoSave) {
-    editorInstance.onDidChangeModelContent(() => {
+  const editorChangeEvent = () => {
+    emit('change', editorInstance.getValue())
+  }
+  const saveKeydownEvent = (e: KeyboardEvent) => {
+    if (e.ctrlKey && e.key === 's') {
+      e.preventDefault()
       emit('change', editorInstance.getValue())
-    })
-  } else {
-    containerRef.value.addEventListener('keydown', (e: KeyboardEvent) => {
-      if (e.ctrlKey && e.key === 's') {
-        e.preventDefault()
-        emit('change', editorInstance.getValue())
-      }
-    })
+    }
   }
 
+  let disposable: monaco.IDisposable
+  watch(
+    autoSave,
+    (newVal) => {
+      if (newVal) {
+        containerRef.value!.removeEventListener('keydown', saveKeydownEvent)
+        disposable = editorInstance.onDidChangeModelContent(editorChangeEvent)
+      } else {
+        disposable && disposable.dispose()
+        containerRef.value!.addEventListener('keydown', saveKeydownEvent)
+      }
+    },
+    { immediate: true },
+  )
+
   // update theme
   watch(replTheme, (n) => {
     editorInstance.updateOptions({

From 75f5b77b008a7b2eaf6e6e2428a71cbf95c6eece Mon Sep 17 00:00:00 2001
From: Hongkun Peng <penghongkun422@gmail.com>
Date: Wed, 24 Jul 2024 09:07:32 +0800
Subject: [PATCH 2/7] feat: improve code

---
 src/codemirror/CodeMirror.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/codemirror/CodeMirror.vue b/src/codemirror/CodeMirror.vue
index 9d8d0995..d1634c52 100644
--- a/src/codemirror/CodeMirror.vue
+++ b/src/codemirror/CodeMirror.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import type { ModeSpec, ModeSpecOptions } from 'codemirror'
-import { inject, onMounted, ref, watch, watchEffect } from 'vue'
+import { type Ref, inject, onMounted, ref, watch, watchEffect } from 'vue'
 import { debounce } from '../utils'
 import CodeMirror from './codemirror'
 
@@ -24,7 +24,7 @@ const emit = defineEmits<(e: 'change', value: string) => void>()
 
 const el = ref<HTMLDivElement>()
 const needAutoResize = inject('autoresize')
-const autoSave = inject<boolean>('autosave')
+const autoSave = inject<Ref<boolean>>('autosave')!
 
 onMounted(() => {
   const addonOptions = props.readonly
@@ -82,7 +82,7 @@ onMounted(() => {
   }
 
   watch(
-    () => autoSave,
+    autoSave,
     (newVal) => {
       if (newVal) {
         el.value!.removeEventListener('keydown', saveKeydownEvent)

From ac13a0145b9cca809b3ab22c52cc77505c444813 Mon Sep 17 00:00:00 2001
From: Hongkun Peng <penghongkun422@gmail.com>
Date: Tue, 23 Jul 2024 22:08:40 +0800
Subject: [PATCH 3/7] feat: autoSave option supports dynamic switching

---
 src/Repl.vue                  |  2 +-
 src/codemirror/CodeMirror.vue | 37 +++++++++++++++++++++++------------
 src/monaco/Monaco.vue         | 32 ++++++++++++++++++++----------
 3 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/src/Repl.vue b/src/Repl.vue
index 30e0bc20..ed2b581b 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -68,7 +68,7 @@ const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right'))
 
 provide(injectKeyStore, props.store)
 provide('autoresize', props.autoResize)
-provide('autosave', props.autoSave)
+provide('autosave', toRef(props, 'autoSave'))
 provide('import-map', toRef(props, 'showImportMap'))
 provide('tsconfig', toRef(props, 'showTsConfig'))
 provide('clear-console', toRef(props, 'clearConsole'))
diff --git a/src/codemirror/CodeMirror.vue b/src/codemirror/CodeMirror.vue
index 6dae3df7..9d8d0995 100644
--- a/src/codemirror/CodeMirror.vue
+++ b/src/codemirror/CodeMirror.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import type { ModeSpec, ModeSpecOptions } from 'codemirror'
-import { inject, onMounted, ref, watchEffect } from 'vue'
+import { inject, onMounted, ref, watch, watchEffect } from 'vue'
 import { debounce } from '../utils'
 import CodeMirror from './codemirror'
 
@@ -22,9 +22,9 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<(e: 'change', value: string) => void>()
 
-const el = ref()
+const el = ref<HTMLDivElement>()
 const needAutoResize = inject('autoresize')
-const autoSave = inject('autosave')
+const autoSave = inject<boolean>('autosave')
 
 onMounted(() => {
   const addonOptions = props.readonly
@@ -71,18 +71,29 @@ onMounted(() => {
     )
   }
 
-  if (autoSave) {
-    editor.on('change', () => {
+  const editorChangeEvent = () => {
+    emit('change', editor.getValue())
+  }
+  const saveKeydownEvent = (e: KeyboardEvent) => {
+    if (e.ctrlKey && e.key === 's') {
+      e.preventDefault()
       emit('change', editor.getValue())
-    })
-  } else {
-    el.value!.addEventListener('keydown', (e: KeyboardEvent) => {
-      if (e.ctrlKey && e.key === 's') {
-        e.preventDefault()
-        emit('change', editor.getValue())
-      }
-    })
+    }
   }
+
+  watch(
+    () => autoSave,
+    (newVal) => {
+      if (newVal) {
+        el.value!.removeEventListener('keydown', saveKeydownEvent)
+        editor.on('change', editorChangeEvent)
+      } else {
+        editor.off('change', editorChangeEvent)
+        el.value!.addEventListener('keydown', saveKeydownEvent)
+      }
+    },
+    { immediate: true },
+  )
 })
 </script>
 
diff --git a/src/monaco/Monaco.vue b/src/monaco/Monaco.vue
index 68229bca..ef48cbc2 100644
--- a/src/monaco/Monaco.vue
+++ b/src/monaco/Monaco.vue
@@ -142,19 +142,31 @@ onMounted(async () => {
     // ignore save event
   })
 
-  if (autoSave) {
-    editorInstance.onDidChangeModelContent(() => {
+  const editorChangeEvent = () => {
+    emit('change', editorInstance.getValue())
+  }
+  const saveKeydownEvent = (e: KeyboardEvent) => {
+    if (e.ctrlKey && e.key === 's') {
+      e.preventDefault()
       emit('change', editorInstance.getValue())
-    })
-  } else {
-    containerRef.value.addEventListener('keydown', (e: KeyboardEvent) => {
-      if (e.ctrlKey && e.key === 's') {
-        e.preventDefault()
-        emit('change', editorInstance.getValue())
-      }
-    })
+    }
   }
 
+  let disposable: monaco.IDisposable
+  watch(
+    autoSave,
+    (newVal) => {
+      if (newVal) {
+        containerRef.value!.removeEventListener('keydown', saveKeydownEvent)
+        disposable = editorInstance.onDidChangeModelContent(editorChangeEvent)
+      } else {
+        disposable && disposable.dispose()
+        containerRef.value!.addEventListener('keydown', saveKeydownEvent)
+      }
+    },
+    { immediate: true },
+  )
+
   // update theme
   watch(replTheme, (n) => {
     editorInstance.updateOptions({

From 6af2697cd8e3625dc83aea40b77cf4b82d49e252 Mon Sep 17 00:00:00 2001
From: Hongkun Peng <penghongkun422@gmail.com>
Date: Wed, 24 Jul 2024 09:07:32 +0800
Subject: [PATCH 4/7] feat: improve code

---
 src/codemirror/CodeMirror.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/codemirror/CodeMirror.vue b/src/codemirror/CodeMirror.vue
index 9d8d0995..d1634c52 100644
--- a/src/codemirror/CodeMirror.vue
+++ b/src/codemirror/CodeMirror.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import type { ModeSpec, ModeSpecOptions } from 'codemirror'
-import { inject, onMounted, ref, watch, watchEffect } from 'vue'
+import { type Ref, inject, onMounted, ref, watch, watchEffect } from 'vue'
 import { debounce } from '../utils'
 import CodeMirror from './codemirror'
 
@@ -24,7 +24,7 @@ const emit = defineEmits<(e: 'change', value: string) => void>()
 
 const el = ref<HTMLDivElement>()
 const needAutoResize = inject('autoresize')
-const autoSave = inject<boolean>('autosave')
+const autoSave = inject<Ref<boolean>>('autosave')!
 
 onMounted(() => {
   const addonOptions = props.readonly
@@ -82,7 +82,7 @@ onMounted(() => {
   }
 
   watch(
-    () => autoSave,
+    autoSave,
     (newVal) => {
       if (newVal) {
         el.value!.removeEventListener('keydown', saveKeydownEvent)

From b6220b9b56e390096314ef05856b4c962a151167 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sun, 8 Sep 2024 07:12:35 +0800
Subject: [PATCH 5/7] refactor

---
 src/monaco/Monaco.vue | 39 ++++++++++++++++++---------------------
 test/main.ts          |  1 +
 2 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/monaco/Monaco.vue b/src/monaco/Monaco.vue
index dca6ec39..e86f9b2a 100644
--- a/src/monaco/Monaco.vue
+++ b/src/monaco/Monaco.vue
@@ -5,6 +5,7 @@ import {
   nextTick,
   onBeforeUnmount,
   onMounted,
+  onWatcherCleanup,
   ref,
   shallowRef,
   useTemplateRef,
@@ -47,6 +48,11 @@ initMonaco(store.value)
 
 const lang = computed(() => (props.mode === 'css' ? 'css' : 'javascript'))
 
+let editorInstance: monaco.editor.IStandaloneCodeEditor
+function editorChangeEvent() {
+  emit('change', editorInstance.getValue())
+}
+
 onMounted(async () => {
   const theme = await import('./highlight').then((r) => r.registerHighlighter())
   ready.value = true
@@ -55,8 +61,7 @@ onMounted(async () => {
   if (!containerRef.value) {
     throw new Error('Cannot find containerRef')
   }
-
-  const editorInstance = monaco.editor.create(containerRef.value, {
+  editorInstance = monaco.editor.create(containerRef.value, {
     ...(props.readonly
       ? { value: props.value, language: lang.value }
       : { model: null }),
@@ -146,26 +151,13 @@ onMounted(async () => {
     // ignore save event
   })
 
-  const editorChangeEvent = () => {
-    emit('change', editorInstance.getValue())
-  }
-  const saveKeydownEvent = (e: KeyboardEvent) => {
-    if (e.ctrlKey && e.key === 's') {
-      e.preventDefault()
-      emit('change', editorInstance.getValue())
-    }
-  }
-
-  let disposable: monaco.IDisposable
   watch(
     autoSave,
-    (newVal) => {
-      if (newVal) {
-        containerRef.value!.removeEventListener('keydown', saveKeydownEvent)
-        disposable = editorInstance.onDidChangeModelContent(editorChangeEvent)
-      } else {
-        disposable && disposable.dispose()
-        containerRef.value!.addEventListener('keydown', saveKeydownEvent)
+    (autoSave) => {
+      if (autoSave) {
+        const disposable =
+          editorInstance.onDidChangeModelContent(editorChangeEvent)
+        onWatcherCleanup(() => disposable.dispose())
       }
     },
     { immediate: true },
@@ -185,7 +177,12 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div ref="container" class="editor" />
+  <div
+    ref="container"
+    class="editor"
+    @keydown.ctrl.s.prevent="editorChangeEvent"
+    @keydown.meta.s.prevent="editorChangeEvent"
+  />
 </template>
 
 <style>
diff --git a/test/main.ts b/test/main.ts
index 79a7beb8..52885620 100644
--- a/test/main.ts
+++ b/test/main.ts
@@ -72,6 +72,7 @@ const App = {
             // wordWrap: 'on',
           },
         },
+        // autoSave: false,
       })
   },
 }

From d173937582a32914646519b4ef6267c737a1b8cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sun, 8 Sep 2024 07:15:33 +0800
Subject: [PATCH 6/7] refactor

---
 src/codemirror/CodeMirror.vue | 44 +++++++++++++++++++----------------
 src/monaco/Monaco.vue         |  8 +++----
 test/main.ts                  |  2 +-
 3 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/codemirror/CodeMirror.vue b/src/codemirror/CodeMirror.vue
index 5e3695dd..faf78e3c 100644
--- a/src/codemirror/CodeMirror.vue
+++ b/src/codemirror/CodeMirror.vue
@@ -1,10 +1,22 @@
 <template>
-  <div ref="container" class="editor" />
+  <div
+    ref="container"
+    class="editor"
+    @keydown.ctrl.s.prevent="emitChangeEvent"
+    @keydown.meta.s.prevent="emitChangeEvent"
+  />
 </template>
 
 <script setup lang="ts">
 import type { ModeSpec, ModeSpecOptions } from 'codemirror'
-import { inject, onMounted, useTemplateRef, watch, watchEffect } from 'vue'
+import {
+  inject,
+  onMounted,
+  onWatcherCleanup,
+  useTemplateRef,
+  watch,
+  watchEffect,
+} from 'vue'
 import { debounce } from '../utils'
 import CodeMirror from './codemirror'
 import { injectKeyProps } from '../../src/types'
@@ -25,6 +37,11 @@ const emit = defineEmits<(e: 'change', value: string) => void>()
 
 const el = useTemplateRef('container')
 const { autoResize, autoSave } = inject(injectKeyProps)!
+let editor: CodeMirror.Editor
+
+const emitChangeEvent = () => {
+  emit('change', editor.getValue())
+}
 
 onMounted(() => {
   const addonOptions = props.readonly
@@ -37,7 +54,7 @@ onMounted(() => {
         keyMap: 'sublime',
       }
 
-  const editor = CodeMirror(el.value!, {
+  editor = CodeMirror(el.value!, {
     value: '',
     mode: props.mode,
     readOnly: props.readonly,
@@ -71,25 +88,12 @@ onMounted(() => {
     )
   }
 
-  const editorChangeEvent = () => {
-    emit('change', editor.getValue())
-  }
-  const saveKeydownEvent = (e: KeyboardEvent) => {
-    if (e.ctrlKey && e.key === 's') {
-      e.preventDefault()
-      emit('change', editor.getValue())
-    }
-  }
-
   watch(
     autoSave,
-    (newVal) => {
-      if (newVal) {
-        el.value!.removeEventListener('keydown', saveKeydownEvent)
-        editor.on('change', editorChangeEvent)
-      } else {
-        editor.off('change', editorChangeEvent)
-        el.value!.addEventListener('keydown', saveKeydownEvent)
+    (autoSave) => {
+      if (autoSave) {
+        editor.on('change', emitChangeEvent)
+        onWatcherCleanup(() => editor.off('change', emitChangeEvent))
       }
     },
     { immediate: true },
diff --git a/src/monaco/Monaco.vue b/src/monaco/Monaco.vue
index e86f9b2a..7687f760 100644
--- a/src/monaco/Monaco.vue
+++ b/src/monaco/Monaco.vue
@@ -49,7 +49,7 @@ initMonaco(store.value)
 const lang = computed(() => (props.mode === 'css' ? 'css' : 'javascript'))
 
 let editorInstance: monaco.editor.IStandaloneCodeEditor
-function editorChangeEvent() {
+function emitChangeEvent() {
   emit('change', editorInstance.getValue())
 }
 
@@ -156,7 +156,7 @@ onMounted(async () => {
     (autoSave) => {
       if (autoSave) {
         const disposable =
-          editorInstance.onDidChangeModelContent(editorChangeEvent)
+          editorInstance.onDidChangeModelContent(emitChangeEvent)
         onWatcherCleanup(() => disposable.dispose())
       }
     },
@@ -180,8 +180,8 @@ onBeforeUnmount(() => {
   <div
     ref="container"
     class="editor"
-    @keydown.ctrl.s.prevent="editorChangeEvent"
-    @keydown.meta.s.prevent="editorChangeEvent"
+    @keydown.ctrl.s.prevent="emitChangeEvent"
+    @keydown.meta.s.prevent="emitChangeEvent"
   />
 </template>
 
diff --git a/test/main.ts b/test/main.ts
index 52885620..bab57d0d 100644
--- a/test/main.ts
+++ b/test/main.ts
@@ -57,7 +57,7 @@ const App = {
         store,
         theme: theme.value,
         previewTheme: previewTheme.value,
-        editor: MonacoEditor,
+        editor: CodeMirrorEditor,
         // layout: 'vertical',
         ssr: true,
         sfcOptions: {

From 4e50d3cb91740f882b8904b2903a763d850a8b88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sun, 8 Sep 2024 07:16:54 +0800
Subject: [PATCH 7/7] revert

---
 test/main.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/main.ts b/test/main.ts
index bab57d0d..52885620 100644
--- a/test/main.ts
+++ b/test/main.ts
@@ -57,7 +57,7 @@ const App = {
         store,
         theme: theme.value,
         previewTheme: previewTheme.value,
-        editor: CodeMirrorEditor,
+        editor: MonacoEditor,
         // layout: 'vertical',
         ssr: true,
         sfcOptions: {