Merge pull request #12 from JunHaoShih/monaco-editor

feat: add monaco editor component

Author: JunHaoShih

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 CompileError
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package-lock.json

@@ -21,6 +21,7 @@
     "firebase": "^10.1.0",
     "highlight.js": "^11.8.0",
     "markdown-it": "^13.0.1",
+    "monaco-editor": "^0.41.0",
     "pinia": "^2.0.11",
     "quasar": "^2.6.0",
     "uuid": "^9.0.0",

package.json

@@ -0,0 +1,79 @@
+<template>
+  <div ref="divDom"></div>
+</template>
+
+<script setup lang="ts">
+import * as monaco from 'monaco-editor';
+import {
+  computed, onMounted, ref, watch,
+} from 'vue';
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+
+const divDom = ref<HTMLElement>();
+
+let editor: monaco.editor.IStandaloneCodeEditor;
+
+const props = defineProps<{
+  modelValue: string,
+}>();
+
+type Emit = {
+  (e: 'update:modelValue', value: string): void
+}
+const emit = defineEmits<Emit>();
+
+const text = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+});
+
+onMounted(() => {
+  // eslint-disable-next-line no-restricted-globals
+  self.MonacoEnvironment = {
+    getWorker(_, label) {
+      if (label === 'json') {
+        return new JsonWorker();
+      }
+      if (label === 'css' || label === 'scss' || label === 'less') {
+        return new CssWorker();
+      }
+      if (label === 'html' || label === 'handlebars' || label === 'razor') {
+        return new HtmlWorker();
+      }
+      if (label === 'typescript' || label === 'javascript') {
+        return new TsWorker();
+      }
+      return new EditorWorker();
+    },
+  };
+  if (divDom.value) {
+    editor = monaco.editor.create(divDom.value, {
+      value: text.value,
+      language: 'markdown',
+      automaticLayout: true,
+      minimap: {
+        enabled: false,
+      },
+      scrollbar: {
+        verticalScrollbarSize: 10,
+        horizontalSliderSize: 10,
+      },
+    });
+
+    editor.onDidChangeModelContent(() => {
+      text.value = editor.getValue();
+    });
+  }
+});
+
+watch(text, (newValue) => {
+  const currentValue = editor.getValue();
+  if (currentValue !== newValue) {
+    editor.setValue(newValue);
+  }
+});
+</script>

src/components/MonacoEditor.vue

@@ -6,14 +6,10 @@
       :limits="limits"
     >
       <template v-slot:before>
-        <q-input
-          ref="inputRef"
+        <MonacoEditor
           v-model="mdText"
-          type="textarea"
-          autogrow
-          :label="$t('markdownPage.editHere')"
-          v-on:keydown.tab.prevent="onTabPressed"
-        />
+          class="main-panel q-pt-xs q-pr-sm"
+        ></MonacoEditor>
       </template>
       <template v-slot:after>
         <markdown-viewer
@@ -26,18 +22,17 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import { QInput, QSplitter } from 'quasar';
+import {
+  computed, ref, watch,
+} from 'vue';
+import { QSplitter } from 'quasar';
+import MonacoEditor from 'src/components/MonacoEditor.vue';
 import MarkdownViewer from './MarkdownViewer.vue';
 
 export type EditorType = 'edit' | 'view' | 'split';
 
-const inputRef = ref<QInput>();
-
 const splitterModel = ref(50);
 
-const indentSize = ref(4);
-
 const limits = ref<QSplitter['limits']>([0, Infinity]);
 
 const props = withDefaults(defineProps<{
@@ -55,14 +50,6 @@ const mdText = computed({
   set: (value) => emit('update:modelValue', value),
 });
 
-function onTabPressed() {
-  const nativeInput = inputRef.value?.getNativeElement();
-  if (nativeInput) {
-    const indent = ' '.repeat(indentSize.value);
-    document.execCommand('insertText', false, indent);
-  }
-}
-
 watch(() => props.type, (newValue) => {
   if (newValue === 'edit') {
     splitterModel.value = 100;

src/modules/markdown/components/MarkdownEditor.vue

@@ -51,11 +51,14 @@
         @click="editorType = 'view'"
       ></q-btn>
     </div>
-    <MarkdownEditor
-      v-model="mdEdit"
-      :type="editorType"
-    >
-    </MarkdownEditor>
+    <div v-for="repo in markdownsStore.repos" :key="repo.id">
+      <MarkdownEditor
+        :style="repo.id === id ? '' : 'display: none'"
+        v-model="repo.edit"
+        :type="editorType"
+      >
+      </MarkdownEditor>
+    </div>
   </div>
 </template>