fix: util code editor

ux/.eslintrc.js

@@ -22,7 +22,7 @@ module.exports = {
     // Uncomment any of the lines below to choose desired strictness,
     // but leave only one uncommented!
     // See https://eslint.vuejs.org/rules/#available-rules
-    'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
+    // 'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
     'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
     // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
 

ux/package.json

@@ -11,8 +11,8 @@
     "lint": "eslint --ext .js,.vue ./"
   },
   "dependencies": {
-    "@apollo/client": "3.6.4",
-    "@codemirror/autocomplete": "0.20.1",
+    "@apollo/client": "3.6.5",
+    "@codemirror/autocomplete": "0.20.2",
     "@codemirror/basic-setup": "0.20.0",
     "@codemirror/closebrackets": "0.19.2",
     "@codemirror/commands": "0.20.0",
@@ -61,7 +61,7 @@
     "apollo-upload-client": "17.0.0",
     "browser-fs-access": "0.29.5",
     "clipboard": "2.0.11",
-    "filesize": "8.0.7",
+    "filesize": "9.0.0",
     "filesize-parser": "1.5.0",
     "graphql": "16.5.0",
     "graphql-tag": "2.12.6",
@@ -71,10 +71,10 @@
     "luxon": "2.4.0",
     "pinia": "2.0.14",
     "pug": "3.0.2",
-    "quasar": "2.7.0",
+    "quasar": "2.7.1",
     "tippy.js": "6.3.7",
     "uuid": "8.3.2",
-    "v-network-graph": "0.5.16",
+    "v-network-graph": "0.5.17",
     "vue": "3.2.31",
     "vue-codemirror": "5.0.1",
     "vue-i18n": "9.1.10",
@@ -84,7 +84,7 @@
   },
   "devDependencies": {
     "@intlify/vite-plugin-vue-i18n": "3.4.0",
-    "@quasar/app-vite": "1.0.0",
+    "@quasar/app-vite": "1.0.1",
     "@types/lodash": "4.14.182",
     "autoprefixer": "10.4.7",
     "eslint": "8.16.0",
@@ -92,7 +92,7 @@
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-n": "15.2.0",
     "eslint-plugin-promise": "6.0.0",
-    "eslint-plugin-vue": "8.7.1"
+    "eslint-plugin-vue": "9.0.1"
   },
   "engines": {
     "node": "^18 || ^16",

ux/src/components/UserEditOverlay.vue

@@ -414,9 +414,10 @@ q-layout(view='hHh lpR fFf', container)
               q-item
                 q-item-section
                   q-no-ssr(:placeholder='t(`common.loading`)')
-                    codemirror.metadata-codemirror(
+                    util-code-editor.admin-theme-cm(
                       v-model='metadata'
-                      :extensions='[json()]'
+                      language='json'
+                      :min-height='500'
                     )
 
     q-page(v-else-if='route.params.section === `operations`')
@@ -504,9 +505,7 @@ import { useAdminStore } from 'src/stores/admin'
 import { useDataStore } from 'src/stores/data'
 
 import UserChangePwdDialog from './UserChangePwdDialog.vue'
-import { Codemirror } from 'vue-codemirror'
-import { json } from '@codemirror/lang-json'
-// import { oneDark } from '@codemirror/theme-one-dark'
+import UtilCodeEditor from './UtilCodeEditor.vue'
 
 // QUASAR
 
@@ -822,8 +821,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .metadata-codemirror {
   &:deep(.cm-editor) {
-    height: 150px;
-    min-height: 100px;
+    min-height: 150px;
     border-radius: 5px;
     border: 1px solid #CCC;
   }

ux/src/components/UtilCodeEditor.vue

 <template lang="pug">
 .util-code-editor(
-  ref='editor'
+  ref='editorRef'
   )
 </template>
 
-<script>
+<script setup>
 /* eslint no-unused-vars: "off" */
 
-// import { keymap, EditorView } from '@codemirror/view'
-// import { EditorState } from '@codemirror/state'
-// import { history, historyKeymap } from '@codemirror/history'
-// import { defaultKeymap, indentWithTab } from '@codemirror/commands'
-// import { lineNumbers } from '@codemirror/gutter'
-// import { defaultHighlightStyle } from '@codemirror/highlight'
+import { keymap, EditorView, lineNumbers } from '@codemirror/view'
+import { EditorState } from '@codemirror/state'
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands'
+import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language'
+import { ref, shallowRef, onBeforeMount, onMounted, watch } from 'vue'
+import { json } from '@codemirror/lang-json'
 
-export default {
-  props: {
-    modelValue: {
-      type: String,
-      default: ''
-    },
-    language: {
-      type: String,
-      default: 'plaintext'
-    },
-    minHeight: {
-      type: Number,
-      default: 150
-    }
+// PROPS
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
   },
-  emits: ['update:modelValue'],
-  data () {
-    return {
-      editor: null
-    }
+  language: {
+    type: String,
+    default: 'plaintext'
   },
-  watch: {
-    modelValue (newVal) {
-      // Ignore loopback changes while editing
-      if (!this.editor.hasFocus) {
-        this.editor.dispatch({
-          changes: { from: 0, to: this.editor.state.length, insert: newVal }
-        })
-      }
+  minHeight: {
+    type: Number,
+    default: 150
+  }
+})
+
+// EMITS
+
+const emit = defineEmits([
+  'update:modelValue'
+])
+
+// STATE
+
+const editor = shallowRef(null)
+const editorRef = ref(null)
+
+// WATCHERS
+
+watch(() => props.modelValue, (newVal) => {
+  // Ignore loopback changes while editing
+  if (!editor.value.hasFocus) {
+    editor.value.dispatch({
+      changes: { from: 0, to: editor.value.state.length, insert: newVal }
+    })
+  }
+})
+
+// MOUNTED
+
+onMounted(async () => {
+  let langModule = null
+  switch (props.language) {
+    case 'css': {
+      langModule = (await import('@codemirror/lang-css')).css
+      break
     }
-  },
-  async mounted () {
-    let langModule = null
-    switch (this.language) {
-      case 'css': {
-        langModule = (await import('@codemirror/lang-css')).css
-        break
-      }
-      case 'html': {
-        langModule = (await import('@codemirror/lang-html')).html
-        break
-      }
-      case 'javascript': {
-        langModule = (await import('@codemirror/lang-javascript')).javascript
-        break
-      }
-      case 'json': {
-        langModule = (await import('@codemirror/lang-json')).json
-        break
-      }
-      case 'markdown': {
-        langModule = (await import('@codemirror/lang-markdown')).markdown
-        break
-      }
+    case 'html': {
+      langModule = (await import('@codemirror/lang-html')).html
+      break
     }
-    // this.editor = new EditorView({
-    //   state: EditorState.create({
-    //     doc: this.modelValue,
-    //     extensions: [
-    //       // history()
-    //       // keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab])
-    //       lineNumbers()
-    //       // EditorView.theme({
-    //       //   '.cm-content, .cm-gutter': { minHeight: `${this.minHeight}px` }
-    //       // }),
-    //       // ...langModule && [langModule()],
-    //       // defaultHighlightStyle,
-    //       // EditorView.updateListener.of(v => {
-    //       //   if (v.docChanged) {
-    //       //     this.$emit('update:modelValue', v.state.doc.toString())
-    //       //   }
-    //       // })
-    //     ]
-    //   }),
-    //   parent: this.$refs.editor
-    // })
-  },
-  beforeUnmount () {
-    if (this.editor) {
-      this.editor.destroy()
+    case 'javascript': {
+      langModule = (await import('@codemirror/lang-javascript')).javascript
+      break
+    }
+    case 'json': {
+      langModule = (await import('@codemirror/lang-json')).json
+      break
+    }
+    case 'markdown': {
+      langModule = (await import('@codemirror/lang-markdown')).markdown
+      break
     }
   }
-}
+  editor.value = new EditorView({
+    state: EditorState.create({
+      doc: props.modelValue,
+      extensions: [
+        history(),
+        keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
+        lineNumbers(),
+        EditorView.theme({
+          '.cm-content, .cm-gutter': { minHeight: `${props.minHeight}px` }
+        }),
+        ...langModule && [langModule()],
+        syntaxHighlighting(defaultHighlightStyle),
+        EditorView.updateListener.of(v => {
+          if (v.docChanged) {
+            emit('update:modelValue', v.state.doc.toString())
+          }
+        })
+      ]
+    }),
+    parent: editorRef.value
+  })
+})
+
+onBeforeMount(() => {
+  if (editor.value) {
+    editor.value.destroy()
+  }
+})
 </script>
 
 <style lang="scss">