refactor: rename text-editor > monaco-editor

Author: zzhenryquezz

apps/ui/src/layouts/LayoutDefault.vue

@@ -13,7 +13,7 @@ const drawer = useLocalStorage('drawer', true)
             :class="drawer ? 'w-72 border-r' : 'w-0'"
         />
 
-        <div class="flex-1 min-h-full">
+        <div class="flex-1 h-dvh">
             <slot />
         </div>
     </is-app>

apps/ui/src/modules/text-editor/TextEditor.vue renamed to apps/ui/src/modules/monaco/MonacoEditorAppPage.vue

@@ -1,11 +1,18 @@
 <script lang="ts" setup>
 
+import MonacoEditor from './components/MonacoEditor.vue'
+
 // general
 const path = defineProp<string>('path', {
     type: String,
     required: true
 })
 
+const language = defineProp<string>('language', {
+    type: String,
+    default: 'plaintext'
+})
+
 const { drive, encode, decode } = useDrive()
 
 // load
@@ -30,8 +37,9 @@ async function save(){
 
 <template>
     <div class="h-dvh">
-        <is-monaco-editor
+        <monaco-editor
             v-model="text"
+            :language="language"
             @keydown.ctrl.s.prevent="save"
         />
     </div>

apps/ui/src/modules/monaco/components/MonacoEditor.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { useVModel } from 'vue-wind/composables/v-model'
+import { loadLibs, type MonacoLibs } from '@/composables/useMonaco'
+
+import { editor as monacoEditor } from 'monaco-editor'
+
+// Props & Emits
+interface LeftLineOptions {
+    show: 'on' | 'off' | 'relative' | 'interval'
+    decorationsWidth?: number | string
+    numbersMinChars?: number
+}
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: '',
+    },
+    language: {
+        type: String,
+        default: 'text',
+    },
+    minimap: {
+        type: Boolean,
+        default: false,
+    },
+    readonly: {
+        type: Boolean,
+        default: false,
+    },
+    glyphMargin: {
+        type: Boolean,
+        default: false,
+    },
+    folding: {
+        type: Boolean,
+        default: false,
+    },
+    padding: {
+        type: Object as () => monacoEditor.IEditorOptions['padding'],
+        default: undefined,
+    },
+    renderLineHighlight: {
+        type: String as () => monacoEditor.IEditorOptions['renderLineHighlight'],
+        default: undefined,
+    },
+    trimAutoWhitespace: {
+        type: Boolean,
+        default: false,
+    },
+    scrollbar: {
+        type: Object as () => monacoEditor.IEditorScrollbarOptions,
+        default: () => ({
+            verticalScrollbarSize: 10,
+            horizontalScrollbarSize: 10,
+            useShadows: false,
+            horizontal: 'visible',
+            vertical: 'visible',
+        }),
+    },
+    lineOptions: {
+        type: Object as () => LeftLineOptions,
+        default: () => ({
+            show: 'on',
+        }),
+    },
+    libs: {
+        type: Array as () => MonacoLibs[],
+        default: () => [],
+    },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const dispose = ref(() => true)
+
+// load libs
+onMounted(() => {
+    dispose.value = loadLibs(props.libs)
+})
+
+onUnmounted(() => {
+    dispose.value()
+})
+
+// mount editor
+const root = ref<HTMLElement>()
+
+let editor: ReturnType<typeof useMonaco>
+
+const model = useVModel(props, 'modelValue', emit)
+
+onMounted(() => {
+    if (!root.value) return
+
+    editor = useMonaco(root.value!, {
+        value: model.value,
+        language: props.language,
+        readOnly: props.readonly,
+        minimap: { enabled: props.minimap },
+        padding: props.padding,
+        overviewRulerBorder: false,
+        lineNumbers: props.lineOptions.show,
+        lineDecorationsWidth: props.lineOptions.decorationsWidth,
+        lineNumbersMinChars: props.lineOptions.numbersMinChars,
+        glyphMargin: props.glyphMargin,
+        folding: props.folding,
+        wordWrap: 'on',
+        scrollbar: props.scrollbar,
+        renderLineHighlight: props.renderLineHighlight,
+        trimAutoWhitespace: props.trimAutoWhitespace,
+    })
+
+    editor.getModel()?.onDidChangeContent(() => (model.value = editor.getValue()))
+})
+
+onUnmounted(() => {
+    editor.getModel()?.dispose()
+})
+
+watch(
+    () => props.modelValue,
+    (value) => {
+        if (!editor) return
+
+        if (value !== editor.getValue()) {
+            editor.setValue(value)
+        }
+    }
+)
+</script>
+<template>
+    <div
+        ref="root"
+        class="w-full h-full"
+    />
+</template>

apps/ui/src/modules/monaco/monacoEditorAppPage.ts

@@ -0,0 +1,6 @@
+import MonacoEditorAppPage from "./MonacoEditorAppPage.vue"
+
+export const monacoEditorAppPage = defineAppPage({
+    name: 'monaco-editor',
+    component: MonacoEditorAppPage,
+})

apps/ui/src/modules/monaco/monacoEditorEntryMiddleware.ts

@@ -0,0 +1,54 @@
+export const monacoEditorEntryMiddleware = defineEntryMiddleware({
+    order: 100,
+    handle: async ({ entry }) => {
+        
+        if (['txt'].some(ext => entry.path.endsWith(ext))) {
+            return {
+                page: 'monaco-editor',
+                props: {
+                    path: entry.path,
+                    language: 'plaintext',
+                }
+            }
+        }
+
+        if (entry.path.endsWith('.js')) {
+            return {
+                page: 'monaco-editor',
+                props: {
+                    path: entry.path,
+                    language: 'javascript',
+                }
+            }
+        }
+        if (entry.path.endsWith('.ts')) {
+            return {
+                page: 'monaco-editor',
+                props: {
+                    path: entry.path,
+                    language: 'typescript',
+                }
+            }
+        }
+
+        if (entry.path.endsWith('.json')) {
+            return {
+                page: 'monaco-editor',
+                props: {
+                    path: entry.path,
+                    language: 'json',
+                }
+            }
+        }
+
+        if (entry.path.endsWith('.css')) {
+            return {
+                page: 'monaco-editor',
+                props: {
+                    path: entry.path,
+                    language: 'css',
+                }
+            }
+        }
+    }
+})

apps/ui/src/modules/text-editor/textEditorAppPage.ts

@@ -2,7 +2,7 @@
 
 import type { AppPage } from '@/composables/defineAppPage'
 import { directoryAppPage } from '@/modules/directory/directoryAppPage';
-import { textEditorAppPage } from '@/modules/text-editor/textEditorAppPage';
+import { monacoEditorAppPage } from '@/modules/monaco/monacoEditorAppPage';
 
 const name = defineProp('name', {
     type: String,
@@ -16,7 +16,7 @@ const pageProps = defineProp<Record<string, any>>('pageProps', {
 
 const pages = shallowRef<AppPage[]>([
     directoryAppPage,
-    textEditorAppPage
+    monacoEditorAppPage
 ])
 
 const current = computed(() => pages.value.find(p => p.name === name.value))

apps/ui/src/modules/text-editor/textEditorEntryMiddleware.ts

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { EntryMiddleware, EntryMiddlewareResult } from '@/composables/defineEntryMiddleware'
 import { directoryEntryMiddleware } from '@/modules/directory/directoryEntryMiddleware';
-import { textEditorEntryMiddleware } from '@/modules/text-editor/textEditorEntryMiddleware';
+import { monacoEditorEntryMiddleware } from '@/modules/monaco/monacoEditorEntryMiddleware';
 import AppPageRender from '@/pages/AppPage/AppPageRender.vue'
 
 import orderBy from 'lodash/orderBy'
@@ -12,7 +12,7 @@ const { drive } = useDrive()
 // middlewares
 const middlewares = ref<EntryMiddleware[]>([
     directoryEntryMiddleware,
-    textEditorEntryMiddleware
+    monacoEditorEntryMiddleware
 ])
 
 // load
@@ -60,7 +60,7 @@ watch(path, load, { immediate: true })
 </script>
 
 <template>
-    <div class="w-full min-h-full">
+    <div class="w-full h-full">
         <div
             v-if="loading"
             class="w-full flex items-center justify-center min-h-full"
@@ -77,7 +77,7 @@ watch(path, load, { immediate: true })
 
         <div
             v-else
-            class="w-full flex items-center justify-center min-h-full"
+            class="w-full min-h-full flex items-center justify-center "
         >
             <div>Error loading entry: {{ error }}</div>