feat: add readonly mode (#6)

* feat: add readonly prop to Repl

* chore: add watcher for readonly to update editor options

* refactor: merge multiple watchers into one watchEffect

Author: oumoussa98

src/Repl.vue

@@ -19,6 +19,7 @@ export interface Props {
   sfcOptions?: SFCOptions
   layout?: 'horizontal' | 'vertical'
   ssr?: boolean
+  readonly?: boolean
   previewOptions?: {
     headHTML?: string
     bodyHTML?: string
@@ -38,6 +39,7 @@ const props = withDefaults(defineProps<Props>(), {
   showTsConfig: true,
   clearConsole: true,
   ssr: false,
+  readonly: false,
   previewOptions: () => ({
     headHTML: '',
     bodyHTML: '',
@@ -79,6 +81,7 @@ provide('tsconfig', toRef(props, 'showTsConfig'))
 provide('clear-console', toRef(props, 'clearConsole'))
 provide('preview-options', props.previewOptions)
 provide('theme', toRef(props, 'theme'))
+provide('readonly', toRef(props, 'readonly'))
 /**
  * Reload the preview iframe
  */
@@ -128,9 +131,8 @@ defineExpose({ reload })
   margin: 0;
   overflow: hidden;
   font-size: 13px;
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   background-color: var(--bg-soft);
 }
 </style>

src/editor/EditorContainer.vue

@@ -16,10 +16,12 @@ const props = defineProps<{
 }>()
 
 const store = inject('store') as Store
+const readonly = inject('readonly', ref(false))
 const showMessage = ref((getItem(SHOW_ERROR_KEY) ?? 'true') === 'true')
 store.state.wordWrap = (getItem(TOGGLE_WRAP_KEY) ?? 'false') === 'true'
 
 const onChange = debounce((code: string, filename: string) => {
+  if (readonly.value) return
   store.state.files[filename].code = code
 }, 250)
 
@@ -50,6 +52,7 @@ watch(
       @change="onChange($event, store.state.activeFile.filename)"
       :value="store.state.activeFile.code"
       :filename="store.state.activeFile.filename"
+      :readonly="readonly"
     />
     <Message v-show="showMessage" :err="store.state.errors[0]" />
     <MessageToggle v-model="showMessage" />

src/editor/FileExplorer.vue

@@ -12,6 +12,7 @@
 
       <template v-slot:append>
         <v-btn
+          v-if="!readonly"
           variant="text"
           size="small"
           :append-icon="`svg:${mdiFilePlusOutline}`"
@@ -50,6 +51,7 @@
 
         <template v-slot:append>
           <v-icon-btn
+            v-if="!readonly"
             icon="$close"
             size="26"
             icon-size="14"
@@ -60,7 +62,7 @@
       </v-list-item>
 
       <v-text-field
-        v-if="pending"
+        v-if="pending && !readonly"
         v-model="pendingFilename"
         density="compact"
         hide-details
@@ -117,7 +119,7 @@
 
 <script setup lang="ts">
 import type { Store } from 'src/store'
-import { inject } from 'vue'
+import { inject, ref } from 'vue'
 import { useFileSelector } from '../composables/useFileSelector'
 import { VIconBtn } from 'vuetify/labs/components'
 import {
@@ -129,6 +131,7 @@ import {
 } from '@mdi/js'
 
 const store = inject('store') as Store
+const readonly = inject('readonly', ref(false))
 
 const {
   activeFile,

src/editor/FileSelector.vue

@@ -33,7 +33,7 @@
         </template>
         <span>{{ stripSrcPrefix(file) }}</span>
         <v-icon-btn
-          v-if="recentFiles.length > 1"
+          v-if="recentFiles.length > 1 && !readonly"
           icon="$close"
           size="20px"
           icon-size="15px"
@@ -57,6 +57,7 @@ import { useDisplay } from 'vuetify'
 const MAX_RECENT_FILES = 10
 
 const store = inject('store') as Store
+const readonly = inject('readonly', ref(false))
 const { mdAndDown } = useDisplay()
 const { activeFile, stripSrcPrefix, getFileIcon, getFileIconColor } =
   useFileSelector()

src/monaco/Monaco.vue

@@ -9,6 +9,7 @@ import {
   watch,
   computed,
   type Ref,
+  watchEffect,
 } from 'vue'
 import * as monaco from 'monaco-editor-core'
 import { initMonaco } from './env'
@@ -44,7 +45,6 @@ const store = inject<Store>('store')!
 
 initMonaco(store)
 
-const lang = computed(() => (props.mode === 'css' ? 'css' : 'javascript'))
 const extension = computed(() => props.filename.split('.').at(-1))
 
 const replTheme = inject<Ref<'dark' | 'light'>>('theme')!
@@ -58,9 +58,6 @@ onMounted(async () => {
   }
 
   const editorInstance = monaco.editor.create(containerRef.value, {
-    ...(props.readonly
-      ? { value: props.value, language: lang.value }
-      : { model: null }),
     fontSize: 13,
     theme: replTheme.value === 'light' ? theme.light : theme.dark,
     readOnly: props.readonly,
@@ -100,55 +97,42 @@ onMounted(async () => {
     }
   }
 
-  watch(
-    () => props.value,
-    (value) => {
-      if (editorInstance.getValue() === value) return
-      editorInstance.setValue(value || '')
-    },
-    { immediate: true }
-  )
+  watchEffect(() => {
+    if (editorInstance.getValue() !== props.value)
+      editorInstance.setValue(props.value || '')
 
-  watch(lang, (lang) =>
-    monaco.editor.setModelLanguage(editorInstance.getModel()!, lang)
-  )
-
-  if (!props.readonly) {
-    watch(
-      () => props.filename,
-      (_, oldFilename) => {
-        if (!editorInstance) return
-        const file = store.state.files[props.filename]
-        if (!file) return null
-        const model = getOrCreateModel(
-          monaco.Uri.parse(`file:///${props.filename}`),
-          file.language,
-          file.code
-        )
-
-        const oldFile = oldFilename ? store.state.files[oldFilename] : null
-        if (oldFile) {
-          oldFile.editorViewState = editorInstance.saveViewState()
-        }
-
-        editorInstance.setModel(model)
-
-        if (file.editorViewState) {
-          editorInstance.restoreViewState(file.editorViewState)
-          editorInstance.focus()
-        }
-      },
-      { immediate: true }
-    )
-  }
+    editorInstance.updateOptions({
+      readOnly: props.readonly,
+      wordWrap: store.state.wordWrap ? 'on' : 'off',
+      theme: replTheme.value === 'light' ? theme.light : theme.dark,
+    })
+  })
 
   watch(
-    () => store.state.wordWrap,
-    () => {
-      editorInstance.updateOptions({
-        wordWrap: store.state.wordWrap ? 'on' : 'off',
-      })
-    }
+    () => props.filename,
+    (_, oldFilename) => {
+      if (!editorInstance) return
+      const file = store.state.files[props.filename]
+      if (!file) return null
+      const model = getOrCreateModel(
+        monaco.Uri.parse(`file:///${props.filename}`),
+        file.language,
+        file.code
+      )
+
+      const oldFile = oldFilename ? store.state.files[oldFilename] : null
+      if (oldFile) {
+        oldFile.editorViewState = editorInstance.saveViewState()
+      }
+
+      editorInstance.setModel(model)
+
+      if (file.editorViewState) {
+        editorInstance.restoreViewState(file.editorViewState)
+        editorInstance.focus()
+      }
+    },
+    { immediate: true }
   )
 
   await loadGrammars(monaco, editorInstance)
@@ -197,13 +181,6 @@ onMounted(async () => {
       emit('change', code)
     }
   })
-
-  // update theme
-  watch(replTheme, (n) => {
-    editorInstance.updateOptions({
-      theme: n === 'light' ? theme.light : theme.dark,
-    })
-  })
 })
 
 onBeforeUnmount(() => {