refactor: save the code with ctrl + s

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

src/codemirror/CodeMirror.vue

@@ -20,7 +20,9 @@ const props = withDefaults(defineProps<Props>(), {
  readonly: false,
 })
 
-const emit = defineEmits<(e: 'change', value: string) => void>()
+const emit = defineEmits<{
+ save: [string]
+}>()
 
 const el = ref()
 const needAutoResize = inject('autoresize')
@@ -36,6 +38,10 @@ onMounted(() => {
  keyMap: 'sublime',
  }
 
+ function save() {
+ emit('save', editor.getValue())
+ }
+
  const editor = CodeMirror(el.value!, {
  value: '',
  mode: props.mode,
@@ -46,8 +52,19 @@ onMounted(() => {
  ...addonOptions,
  })
 
- editor.on('change', () => {
- emit('change', editor.getValue())
+ const autoSave = inject<number>('autoSave')
+ if (autoSave > 0) {
+ editor.on('change', debounce(save, autoSave))
+ }
+
+ 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

@@ -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: 'change', 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
@@ -138,12 +142,21 @@ onMounted(async () => {
 
  await loadGrammars(monaco, editorInstance)
 
+ 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, () => {
- // ignore save event
+ save()
  })
 
- editorInstance.onDidChangeModelContent(() => {
- emit('change', editorInstance.getValue())
+ editorInstance.onDidBlurEditorWidget(() => {
+ save()
  })
 
  // update theme