refactor: save the code with ctrl + s

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,23 @@ 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)
+ })
+
+ editor.on('blur', () => {
+ save()
+ })
+ el.value.addEventListener('keydown', (e: KeyboardEvent) => {
+ if ((e.ctrlKey || e.metaKey) && e.code === 'KeyS') {
+ e.preventDefault()
+ save()
+ }
  })
 
  watchEffect(() => {

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>

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"
  />

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"

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<

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