feat: allows users to set code editor as default editor for all files

Author: omarmir

components/Common/Editor.vue

@@ -30,7 +30,7 @@
         </div>
       </div>
       <CommonDangerAlert v-if="error" class="mb-4">{{ error }}</CommonDangerAlert>
-      <MilkdownProvider v-if="isMD === true && !error">
+      <MilkdownProvider v-if="isMD && settingsStore.settings.isCodeViewAllFiles !== true && !error">
         <MilkdownEditor
           v-model="md"
           :note
@@ -40,7 +40,7 @@
           :is-focus />
       </MilkdownProvider>
       <NuxtCodeMirror
-        v-else-if="isMD === false && !error"
+        v-else-if="(!isMD || settingsStore.settings.isCodeViewAllFiles) && !error"
         :key="isDark.toString()"
         ref="codemirror"
         v-model="md"
@@ -68,6 +68,7 @@ import { useRouter } from 'vue-router'
 import type { EditorState } from '@codemirror/state'
 
 const router = useRouter()
+const settingsStore = useSettingsStore()
 
 const queryParams = router.currentRoute.value.query
 

components/Settings/BasicSettings.vue

@@ -37,6 +37,17 @@
               <span class="hidden">Space paragraphs</span>
             </CommonToggleBox>
           </div>
+          <!--Setting-->
+          <div class="flex flex-row items-center gap-2">
+            Use code view for all files?
+            <CommonTooltip>Use a plain text editor view for all files including markdown files?</CommonTooltip>
+          </div>
+          <div class="flex place-content-end">
+            <CommonToggleBox v-model="store.settings.isCodeViewAllFiles">
+              <span class="hidden">Use code view</span>
+            </CommonToggleBox>
+          </div>
+          <!-- /settings -->
         </div>
       </div>
     </CommonBaseCard>

stores/settings.ts

@@ -11,7 +11,8 @@ export const useSettingsStore = defineStore('settings', () => {
     isParagraphSpaced: $settings.data.get('isParagraphSpaced')
       ? $settings.data.get('isParagraphSpaced') === 'true'
       : true,
-    isISODate: $settings.data.get('isISODate') === 'true'
+    isISODate: $settings.data.get('isISODate') === 'true',
+    isCodeViewAllFiles: $settings.data.get('isCodeViewAllFiles') === 'true'
   })
 
   const setSetting = async (insertSetting: InsertSetting): Promise<Result<null>> => {
@@ -53,6 +54,11 @@ export const useSettingsStore = defineStore('settings', () => {
     () => setSettingValue('isISODate', settings.isISODate.toString())
   )
 
+  watch(
+    () => settings.isCodeViewAllFiles,
+    () => setSettingValue('isCodeViewAllFiles', settings.isCodeViewAllFiles.toString())
+  )
+
   return {
     toggleDenseMode,
     settings,