feat: reactivity autoSave option (#266)

Co-authored-by: 三咲智子 Kevin Deng <[email protected]>

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, 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,18 +88,16 @@ onMounted(() => {
     )
   }
 
-  if (autoSave.value) {
-    editor.on('change', () => {
-      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,
+    (autoSave) => {
+      if (autoSave) {
+        editor.on('change', emitChangeEvent)
+        onWatcherCleanup(() => editor.off('change', emitChangeEvent))
       }
-    })
-  }
+    },
+    { immediate: true },
+  )
 })
 </script>
 

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 emitChangeEvent() {
+  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,18 +151,17 @@ onMounted(async () => {
     // ignore save event
   })
 
-  if (autoSave) {
-    editorInstance.onDidChangeModelContent(() => {
-      emit('change', editorInstance.getValue())
-    })
-  } else {
-    containerRef.value.addEventListener('keydown', (e: KeyboardEvent) => {
-      if (e.ctrlKey && e.key === 's') {
-        e.preventDefault()
-        emit('change', editorInstance.getValue())
+  watch(
+    autoSave,
+    (autoSave) => {
+      if (autoSave) {
+        const disposable =
+          editorInstance.onDidChangeModelContent(emitChangeEvent)
+        onWatcherCleanup(() => disposable.dispose())
       }
-    })
-  }
+    },
+    { immediate: true },
+  )
 
   // update theme
   watch(replTheme, (n) => {
@@ -173,7 +177,12 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div ref="container" class="editor" />
+  <div
+    ref="container"
+    class="editor"
+    @keydown.ctrl.s.prevent="emitChangeEvent"
+    @keydown.meta.s.prevent="emitChangeEvent"
+  />
 </template>
 
 <style>

test/main.ts

@@ -72,6 +72,7 @@ const App = {
             // wordWrap: 'on',
           },
         },
+        // autoSave: false,
       })
   },
 }