refactor: improve syntax highlighting and change theme in editor (#1200)

Co-authored-by: truckershitch <truckershitch@hambone.e4ward.com>
Co-authored-by: Stefan Dej <meteyou@gmail.com>

.gitignore

@@ -14,6 +14,7 @@ temp
 package-lock.json
 *.local
 .env
+.vscode
 
 cypress/screenshots/
 cypress/videos/

package.json

@@ -36,6 +36,7 @@
         "@sindarius/gcodeviewer": "^3.2.2",
         "@types/node": "^18.0.0",
         "@types/overlayscrollbars": "^1.12.1",
+        "@uiw/codemirror-theme-vscode": "^4.19.11",
         "axios": "^0.27.0",
         "codemirror": "^6.0.1",
         "core-js": "^3.16.0",

src/components/inputs/Codemirror.vue

@@ -12,7 +12,7 @@ import BaseMixin from '../mixins/base'
 import { basicSetup } from 'codemirror'
 import { EditorView, keymap } from '@codemirror/view'
 import { EditorState } from '@codemirror/state'
-import { mainsailTheme } from '@/plugins/codemirrorTheme'
+import { vscodeDark } from '@uiw/codemirror-theme-vscode'
 import { StreamLanguage } from '@codemirror/language'
 import { klipper_config } from '@/plugins/StreamParserKlipperConfig'
 import { gcode } from '@/plugins/StreamParserGcode'
@@ -82,9 +82,10 @@ export default class Codemirror extends Mixins(BaseMixin) {
 
     get cmExtensions() {
         const extensions = [
+            EditorView.theme({}, { dark: true }),
             basicSetup,
-            mainsailTheme,
-            indentUnit.of(' '.repeat(this.getTabSize())),
+            vscodeDark,
+            indentUnit.of(' '.repeat(this.tabSize)),
             keymap.of([indentWithTab]),
             EditorView.updateListener.of((update) => {
                 this.content = update.state?.doc.toString()
@@ -106,7 +107,7 @@ export default class Codemirror extends Mixins(BaseMixin) {
         if (isVisible) this.cminstance?.focus()
     }
 
-    getTabSize() {
+    get tabSize() {
         return this.$store.state.gui.editor.tabSize || 2
     }
 }

src/plugins/StreamParserGcode.ts

@@ -9,11 +9,19 @@ export const gcode = {
         /* Klipper macro attributes */
         if (stream.pos > zeroPos && state.klipperMacro) {
             stream.eatSpace()
-            if (stream.match(/^(".+"|true|false)/i)) {
+            if (stream.match(/^{/)) {
+                return 'tag'
+            }
+            // else if (stream.match(/^'|"/)) {
+            else if (stream.match(/^"[^{]+"/) || stream.match(/^'[^{]+'/)) {
                 return 'string'
-            } else if (stream.match(/^\d+/)) return 'number'
-            else if (stream.match(/^[A-Za-z\d_]+/)) return 'propertyName'
-            else if (zeroPos === 0 && stream.match(/^{[^%]+}/)) return 'variable'
+            } else if (stream.match(/^[-+]?[0-9]*\.?[0-9]+/)) {
+                return 'number'
+            } else if (stream.match(/^[A-Za-z\d_]+/)) {
+                return 'propertyName'
+            } else if (zeroPos === 0 && stream.match(/^{[^%]+}/)) {
+                return 'variable'
+            }
         }
 
         /* comments */
@@ -29,7 +37,7 @@ export const gcode = {
             return 'namespace'
         }
 
-        if (stream.string.substr(zeroPos).toLowerCase().startsWith('m117')) {
+        if (stream.string.substring(zeroPos).toLowerCase().startsWith('m117')) {
             stream.skipToEnd()
             return 'string'
         }