From 7404b9488295c1e071637053f5c0010351a36493 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=B6=E8=BF=9C=E6=96=B9?= <yangpanteng@gmail.com>
Date: Mon, 14 Aug 2023 21:11:29 +0800
Subject: [PATCH 1/5] refactor: save the code with `ctrl + s`

---
 src/codemirror/CodeMirror.vue   | 22 +++++++++++++++++++---
 src/editor/CodeMirrorEditor.vue | 11 ++++++++---
 src/editor/EditorContainer.vue  |  7 +++----
 src/editor/MonacoEditor.vue     |  6 +++---
 src/editor/types.ts             |  2 +-
 src/monaco/Monaco.vue           | 22 ++++++++++++++++++----
 test/main.ts                    |  4 ++--
 7 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/src/codemirror/CodeMirror.vue b/src/codemirror/CodeMirror.vue
index b0d6d721..3b1704fe 100644
--- a/src/codemirror/CodeMirror.vue
+++ b/src/codemirror/CodeMirror.vue
@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
   readonly: false,
 })
 
-const emit = defineEmits<(e: 'change', value: string) => void>()
+const emit = defineEmits<(e: 'save', value: string) => void>()
 
 const el = ref()
 const needAutoResize = inject('autoresize')
@@ -36,6 +36,10 @@ onMounted(() => {
         keyMap: 'sublime',
       }
 
+  function save() {
+    emit('save', editor.getValue())
+  }
+
   const editor = CodeMirror(el.value!, {
     value: '',
     mode: props.mode,
@@ -46,8 +50,20 @@ onMounted(() => {
     ...addonOptions,
   })
 
-  editor.on('change', () => {
-    emit('change', editor.getValue())
+  let changeTimer: NodeJS.Timeout
+  editor.on('change', (e) => {
+    clearTimeout(changeTimer) // clear previous timer
+
+    changeTimer = setTimeout(() => {
+      save()
+    }, 5000)
+  })
+
+  el.value.addEventListener('keydown', (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.which == 83) {
+      e.preventDefault()
+      save()
+    }
   })
 
   watchEffect(() => {
diff --git a/src/editor/CodeMirrorEditor.vue b/src/editor/CodeMirrorEditor.vue
index cb7d941f..926da175 100644
--- a/src/editor/CodeMirrorEditor.vue
+++ b/src/editor/CodeMirrorEditor.vue
@@ -10,8 +10,8 @@ defineOptions({
 const props = defineProps<EditorProps>()
 const emit = defineEmits<EditorEmits>()
 
-const onChange = (code: string) => {
-  emit('change', code)
+const onSave = (code: string) => {
+  emit('save', code)
 }
 
 const modes: Record<string, Props['mode']> = {
@@ -39,5 +39,10 @@ const activeMode = computed(() => {
 </script>
 
 <template>
-  <CodeMirror @change="onChange" :value="value" :mode="activeMode" />
+  <CodeMirror
+    ref="codeMirrorRef"
+    :value="value"
+    :mode="activeMode"
+    @save="onSave"
+  />
 </template>
diff --git a/src/editor/EditorContainer.vue b/src/editor/EditorContainer.vue
index fb06a160..c2faff1b 100644
--- a/src/editor/EditorContainer.vue
+++ b/src/editor/EditorContainer.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import FileSelector from './FileSelector.vue'
 import Message from '../Message.vue'
-import { debounce } from '../utils'
 import { inject, ref, watch } from 'vue'
 import { Store } from '../store'
 import MessageToggle from './MessageToggle.vue'
@@ -16,9 +15,9 @@ const props = defineProps<{
 const store = inject('store') as Store
 const showMessage = ref(getItem())
 
-const onChange = debounce((code: string) => {
+function onSave(code: string) {
   store.state.activeFile.code = code
-}, 250)
+}
 
 function setItem() {
   localStorage.setItem(SHOW_ERROR_KEY, showMessage.value ? 'true' : 'false')
@@ -38,7 +37,7 @@ watch(showMessage, () => {
   <FileSelector />
   <div class="editor-container">
     <props.editorComponent
-      @change="onChange"
+      @save="onSave"
       :value="store.state.activeFile.code"
       :filename="store.state.activeFile.filename"
     />
diff --git a/src/editor/MonacoEditor.vue b/src/editor/MonacoEditor.vue
index aea0d962..95eb0094 100644
--- a/src/editor/MonacoEditor.vue
+++ b/src/editor/MonacoEditor.vue
@@ -9,14 +9,14 @@ defineOptions({
   editorType: 'monaco',
 })
 
-const onChange = (code: string) => {
-  emit('change', code)
+const onSave = (code: string) => {
+  emit('save', code)
 }
 </script>
 
 <template>
   <Monaco
-    @change="onChange"
+    @save="onSave"
     :filename="filename"
     :value="value"
     :readonly="readonly"
diff --git a/src/editor/types.ts b/src/editor/types.ts
index edc8e740..4e92ff84 100644
--- a/src/editor/types.ts
+++ b/src/editor/types.ts
@@ -10,7 +10,7 @@ export interface EditorProps {
 }
 
 export interface EditorEmits {
-  (e: 'change', code: string): void
+  (e: 'save', code: string): void
 }
 
 export type EditorComponentType = FunctionalComponent<
diff --git a/src/monaco/Monaco.vue b/src/monaco/Monaco.vue
index b73b8fd1..98f9db92 100644
--- a/src/monaco/Monaco.vue
+++ b/src/monaco/Monaco.vue
@@ -30,7 +30,7 @@ const props = withDefaults(
 )
 
 const emit = defineEmits<{
-  (e: 'change', value: string): void
+  (e: 'save', value: string): void
 }>()
 
 const containerRef = ref<HTMLDivElement>()
@@ -138,12 +138,26 @@ onMounted(async () => {
 
   await loadGrammars(monaco, editorInstance)
 
+  function save() {
+    emit('save', editorInstance.getValue())
+  }
+
   editorInstance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
-    // ignore save event
+    save()
+  })
+
+  editorInstance.onDidBlurEditorWidget(() => {
+    save()
   })
 
-  editorInstance.onDidChangeModelContent(() => {
-    emit('change', editorInstance.getValue())
+  let changeTimer: NodeJS.Timeout
+
+  editorInstance.onDidChangeModelContent((e) => {
+    clearTimeout(changeTimer) // clear previous timer
+
+    changeTimer = setTimeout(() => {
+      save()
+    }, 5000)
   })
 
   // update theme
diff --git a/test/main.ts b/test/main.ts
index c9215cab..c6843768 100644
--- a/test/main.ts
+++ b/test/main.ts
@@ -1,7 +1,7 @@
 import { createApp, h, watchEffect } from 'vue'
 import { Repl, ReplStore } from '../src'
 import MonacoEditor from '../src/editor/MonacoEditor.vue'
-// import CodeMirrorEditor from '../src/editor/CodeMirrorEditor.vue'
+import CodeMirrorEditor from '../src/editor/CodeMirrorEditor.vue'
 import { EditorComponentType } from '../src/editor/types'
 ;(window as any).process = { env: {} }
 
@@ -43,7 +43,7 @@ const App = {
       h(Repl, {
         store,
         theme: 'dark',
-        editor: MonacoEditor as any as EditorComponentType,
+        editor: CodeMirrorEditor as any as EditorComponentType,
         // layout: 'vertical',
         ssr: true,
         sfcOptions: {

From 6e187287f3c6eaecccd4da3ff851b592e9ef5b0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=B6=E8=BF=9C=E6=96=B9?= <yangpanteng@gmail.com>
Date: Mon, 14 Aug 2023 21:12:38 +0800
Subject: [PATCH 2/5] chore: use `MonacoEditor`

---
 test/main.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/main.ts b/test/main.ts
index c6843768..c9215cab 100644
--- a/test/main.ts
+++ b/test/main.ts
@@ -1,7 +1,7 @@
 import { createApp, h, watchEffect } from 'vue'
 import { Repl, ReplStore } from '../src'
 import MonacoEditor from '../src/editor/MonacoEditor.vue'
-import CodeMirrorEditor from '../src/editor/CodeMirrorEditor.vue'
+// import CodeMirrorEditor from '../src/editor/CodeMirrorEditor.vue'
 import { EditorComponentType } from '../src/editor/types'
 ;(window as any).process = { env: {} }
 
@@ -43,7 +43,7 @@ const App = {
       h(Repl, {
         store,
         theme: 'dark',
-        editor: CodeMirrorEditor as any as EditorComponentType,
+        editor: MonacoEditor as any as EditorComponentType,
         // layout: 'vertical',
         ssr: true,
         sfcOptions: {

From 29470fb69e85f654bb0766031333ce16345acd06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=B6=E8=BF=9C=E6=96=B9?= <yangpanteng@gmail.com>
Date: Mon, 14 Aug 2023 21:17:45 +0800
Subject: [PATCH 3/5] feat: listen to the blur event

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

diff --git a/src/codemirror/CodeMirror.vue b/src/codemirror/CodeMirror.vue
index 3b1704fe..a1cc9bb1 100644
--- a/src/codemirror/CodeMirror.vue
+++ b/src/codemirror/CodeMirror.vue
@@ -59,6 +59,9 @@ onMounted(() => {
     }, 5000)
   })
 
+  editor.on('blur', () => {
+    save()
+  })
   el.value.addEventListener('keydown', (e) => {
     if ((e.ctrlKey || e.metaKey) && e.which == 83) {
       e.preventDefault()

From 9f1d73abb5c8822072f6c13560c8cb1688973b11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=B6=E8=BF=9C=E6=96=B9?= <yangpanteng@gmail.com>
Date: Mon, 14 Aug 2023 21:31:42 +0800
Subject: [PATCH 4/5] chore: added `KeyboardEvent` type

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

diff --git a/src/codemirror/CodeMirror.vue b/src/codemirror/CodeMirror.vue
index a1cc9bb1..0a5735fb 100644
--- a/src/codemirror/CodeMirror.vue
+++ b/src/codemirror/CodeMirror.vue
@@ -62,8 +62,8 @@ onMounted(() => {
   editor.on('blur', () => {
     save()
   })
-  el.value.addEventListener('keydown', (e) => {
-    if ((e.ctrlKey || e.metaKey) && e.which == 83) {
+  el.value.addEventListener('keydown', (e: KeyboardEvent) => {
+    if ((e.ctrlKey || e.metaKey) && e.code === 'KeyS') {
       e.preventDefault()
       save()
     }

From 15c1662b72b686e0524d720e903b77822083aebe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=B6=E8=BF=9C=E6=96=B9?= <yangpanteng@gmail.com>
Date: Fri, 27 Oct 2023 11:31:17 +0800
Subject: [PATCH 5/5] feat: add autoSave configuration

---
 src/Repl.vue                  |  3 +++
 src/codemirror/CodeMirror.vue | 16 +++++++---------
 src/monaco/Monaco.vue         | 21 ++++++++++-----------
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/Repl.vue b/src/Repl.vue
index 221070aa..f59fd003 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -9,6 +9,7 @@ import EditorContainer from './editor/EditorContainer.vue'
 export interface Props {
   theme?: 'dark' | 'light'
   editor: EditorComponentType
+  autoSave?: number
   store?: Store
   autoResize?: boolean
   showCompileOutput?: boolean
@@ -37,6 +38,7 @@ const props = withDefaults(defineProps<Props>(), {
   showTsConfig: true,
   clearConsole: true,
   ssr: false,
+  autoSave: 2000,
   previewOptions: () => ({
     headHTML: '',
     bodyHTML: '',
@@ -78,6 +80,7 @@ provide('tsconfig', toRef(props, 'showTsConfig'))
 provide('clear-console', toRef(props, 'clearConsole'))
 provide('preview-options', props.previewOptions)
 provide('theme', toRef(props, 'theme'))
+provide('autoSave', props.autoSave)
 /**
  * Reload the preview iframe
  */
diff --git a/src/codemirror/CodeMirror.vue b/src/codemirror/CodeMirror.vue
index 0a5735fb..10b4022d 100644
--- a/src/codemirror/CodeMirror.vue
+++ b/src/codemirror/CodeMirror.vue
@@ -20,7 +20,9 @@ const props = withDefaults(defineProps<Props>(), {
   readonly: false,
 })
 
-const emit = defineEmits<(e: 'save', value: string) => void>()
+const emit = defineEmits<{
+  save: [string]
+}>()
 
 const el = ref()
 const needAutoResize = inject('autoresize')
@@ -50,14 +52,10 @@ onMounted(() => {
     ...addonOptions,
   })
 
-  let changeTimer: NodeJS.Timeout
-  editor.on('change', (e) => {
-    clearTimeout(changeTimer) // clear previous timer
-
-    changeTimer = setTimeout(() => {
-      save()
-    }, 5000)
-  })
+  const autoSave = inject<number>('autoSave')
+  if (autoSave > 0) {
+    editor.on('change', debounce(save, autoSave))
+  }
 
   editor.on('blur', () => {
     save()
diff --git a/src/monaco/Monaco.vue b/src/monaco/Monaco.vue
index 98f9db92..ba663b02 100644
--- a/src/monaco/Monaco.vue
+++ b/src/monaco/Monaco.vue
@@ -11,6 +11,7 @@ import {
   type Ref,
 } from 'vue'
 import * as monaco from 'monaco-editor-core'
+import { debounce } from '../utils'
 import { initMonaco } from './env'
 import { getOrCreateModel } from './utils'
 import { loadGrammars, loadTheme } from 'monaco-volar'
@@ -30,7 +31,7 @@ const props = withDefaults(
 )
 
 const emit = defineEmits<{
-  (e: 'save', value: string): void
+  save: [string]
 }>()
 
 const containerRef = ref<HTMLDivElement>()
@@ -43,6 +44,9 @@ initMonaco(store)
 const lang = computed(() => (props.mode === 'css' ? 'css' : 'javascript'))
 
 const replTheme = inject<Ref<'dark' | 'light'>>('theme')!
+
+const autoSave = inject<number>('autoSave')
+
 onMounted(async () => {
   const theme = await loadTheme(monaco.editor)
   ready.value = true
@@ -140,6 +144,11 @@ onMounted(async () => {
 
   function save() {
     emit('save', editorInstance.getValue())
+    editorInstance.getAction('editor.action.formatDocument')?.run()
+  }
+
+  if (autoSave > 0) {
+    editorInstance.onDidChangeModelContent(debounce(save, autoSave))
   }
 
   editorInstance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
@@ -150,16 +159,6 @@ onMounted(async () => {
     save()
   })
 
-  let changeTimer: NodeJS.Timeout
-
-  editorInstance.onDidChangeModelContent((e) => {
-    clearTimeout(changeTimer) // clear previous timer
-
-    changeTimer = setTimeout(() => {
-      save()
-    }, 5000)
-  })
-
   // update theme
   watch(replTheme, (n) => {
     editorInstance.updateOptions({