feat: add autoSave option (#247)

src/Repl.vue

@@ -12,6 +12,7 @@ export interface Props {
   editor: EditorComponentType
   store?: Store
   autoResize?: boolean
+  autoSave?: boolean // auto save and compile, default to true, if false, user need to press ctrl + s to save and compile
   showCompileOutput?: boolean
   showImportMap?: boolean
   showTsConfig?: boolean
@@ -35,6 +36,7 @@ const props = withDefaults(defineProps<Props>(), {
   previewTheme: false,
   store: () => useStore(),
   autoResize: true,
+  autoSave: true,
   showCompileOutput: true,
   showImportMap: true,
   showTsConfig: true,
@@ -66,6 +68,7 @@ const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right'))
 
 provide(injectKeyStore, props.store)
 provide('autoresize', props.autoResize)
+provide('autosave', props.autoSave)
 provide('import-map', toRef(props, 'showImportMap'))
 provide('tsconfig', toRef(props, 'showTsConfig'))
 provide('clear-console', toRef(props, 'clearConsole'))

src/monaco/Monaco.vue

@@ -37,6 +37,7 @@ const containerRef = ref<HTMLDivElement>()
 const ready = ref(false)
 const editor = shallowRef<monaco.editor.IStandaloneCodeEditor>()
 const store = inject(injectKeyStore)!
+const autoSave = inject('autosave')!
 
 initMonaco(store)
 
@@ -140,9 +141,18 @@ onMounted(async () => {
     // ignore save event
   })
 
-  editorInstance.onDidChangeModelContent(() => {
-    emit('change', editorInstance.getValue())
-  })
+  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())
+      }
+    })
+  }
 
   // update theme
   watch(replTheme, (n) => {