feat: add autoSave toggle button (#283)

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

src/Repl.vue

@@ -17,7 +17,6 @@ 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
@@ -37,17 +36,18 @@ export interface Props {
     showRuntimeWarning?: boolean
   }
   editorOptions?: {
-    showErrorText?: string
+    showErrorText?: string | false
+    autoSaveText?: string | false
     monacoOptions?: monaco.editor.IStandaloneEditorConstructionOptions
   }
 }
 
+const autoSave = defineModel<boolean>({ default: true })
 const props = withDefaults(defineProps<Props>(), {
   theme: 'light',
   previewTheme: false,
   store: () => useStore(),
   autoResize: true,
-  autoSave: true,
   showCompileOutput: true,
   showImportMap: true,
   showTsConfig: true,
@@ -70,7 +70,10 @@ props.store.init()
 const editorSlotName = computed(() => (props.layoutReverse ? 'right' : 'left'))
 const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right'))
 
-provide(injectKeyProps, toRefs(props))
+provide(injectKeyProps, {
+  ...toRefs(props),
+  autoSave,
+})
 provide(
   injectKeyPreviewRef,
   computed(() => outputRef.value?.previewRef?.container ?? null),

src/editor/EditorContainer.vue

@@ -3,7 +3,7 @@ import FileSelector from './FileSelector.vue'
 import Message from '../Message.vue'
 import { debounce } from '../utils'
 import { inject, ref, watch } from 'vue'
-import MessageToggle from './MessageToggle.vue'
+import ToggleButton from './ToggleButton.vue'
 import { type EditorComponentType, injectKeyProps } from '../types'
 
 const SHOW_ERROR_KEY = 'repl_show_error'
@@ -12,7 +12,7 @@ const props = defineProps<{
   editorComponent: EditorComponentType
 }>()
 
-const { store } = inject(injectKeyProps)!
+const { store, autoSave, editorOptions } = inject(injectKeyProps)!
 const showMessage = ref(getItem())
 
 const onChange = debounce((code: string) => {
@@ -42,7 +42,19 @@ watch(showMessage, () => {
       @change="onChange"
     />
     <Message v-show="showMessage" :err="store.errors[0]" />
-    <MessageToggle v-model="showMessage" />
+
+    <div class="editor-floating">
+      <ToggleButton
+        v-if="editorOptions?.showErrorText !== false"
+        v-model="showMessage"
+        :text="editorOptions?.showErrorText || 'Show Error'"
+      />
+      <ToggleButton
+        v-if="editorOptions?.autoSaveText !== false"
+        v-model="autoSave"
+        :text="editorOptions?.autoSaveText || 'Auto Save'"
+      />
+    </div>
   </div>
 </template>
 
@@ -52,4 +64,18 @@ watch(showMessage, () => {
   overflow: hidden;
   position: relative;
 }
+
+.editor-floating {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  z-index: 11;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  gap: 8px;
+  background-color: var(--bg);
+  color: var(--text-light);
+  padding: 8px;
+}
 </style>

src/editor/MessageToggle.vue → src/editor/ToggleButton.vue

@@ -1,14 +1,11 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { injectKeyProps } from '../../src/types'
-
-const { editorOptions } = inject(injectKeyProps)!
-const visible = defineModel<boolean>()
+defineProps<{ text: string }>()
+const active = defineModel<boolean>()
 </script>
 
 <template>
-  <div class="wrapper" @click="visible = !visible">
-    <span>{{ editorOptions?.showErrorText || 'Show Error' }}</span>
+  <div class="wrapper" @click="active = !active">
+    <span>{{ text }}</span>
     <div class="toggle" :class="[{ active: modelValue }]">
       <div class="indicator" />
     </div>
@@ -17,19 +14,12 @@ const visible = defineModel<boolean>()
 
 <style scoped>
 .wrapper {
-  position: absolute;
-  bottom: 8px;
-  right: 15px;
-  z-index: 11;
   display: flex;
   align-items: center;
-  background-color: var(--bg);
-  color: var(--text-light);
   cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 2px;
   user-select: none;
 }
+
 .toggle {
   display: inline-block;
   margin-left: 4px;

src/types.ts

@@ -15,8 +15,9 @@ export type EditorComponentType = Component<EditorProps>
 
 export type OutputModes = 'preview' | EditorMode
 
-export const injectKeyProps: InjectionKey<ToRefs<Required<Props>>> =
-  Symbol('props')
+export const injectKeyProps: InjectionKey<
+  ToRefs<Required<Props & { autoSave: boolean }>>
+> = Symbol('props')
 export const injectKeyPreviewRef: InjectionKey<
   ComputedRef<HTMLDivElement | null>
 > = Symbol('preview-ref')

test/main.ts

@@ -68,6 +68,7 @@ const App = {
         // showCompileOutput: false,
         // showImportMap: false
         editorOptions: {
+          autoSaveText: '💾',
           monacoOptions: {
             // wordWrap: 'on',
           },