chore: update codemirror to v6 (#795)

package.json

@@ -22,20 +22,20 @@
         "changelog": "git cliff v0.0.4..$(git describe --tags $(git rev-list --tags --max-count=1)) --output CHANGELOG.md"
     },
     "dependencies": {
-        "@codemirror/basic-setup": "^0.19.1",
-        "@codemirror/highlight": "^0.19.7",
-        "@codemirror/lang-css": "^0.19.3",
-        "@codemirror/lang-json": "^0.19.1",
-        "@codemirror/language": "^0.19.7",
-        "@codemirror/legacy-modes": "^0.19.0",
-        "@codemirror/state": "^0.19.6",
-        "@codemirror/search": "^0.19.6",
-        "@codemirror/stream-parser": "^0.19.5",
-        "@codemirror/view": "^0.19.42",
-        "@sindarius/gcodeviewer": "^3.1.0",
+        "@codemirror/commands": "^6.0.1",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-json": "^6.0.0",
+        "@codemirror/language": "^6.2.0",
+        "@codemirror/legacy-modes": "^6.1.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.1.0",
+        "@codemirror/view": "^6.0.3",
+        "@lezer/highlight": "^1.0.0",
+        "@sindarius/gcodeviewer": "^2.1.17",
         "@types/node": "^16.11.22",
         "@types/overlayscrollbars": "^1.12.1",
         "axios": "^0.26.0",
+        "codemirror": "^6.0.1",
         "core-js": "^3.16.0",
         "echarts": "^5.2.2",
         "echarts-gl": "^2.0.8",

src/components/inputs/Codemirror.vue

@@ -9,12 +9,13 @@
 
 import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
-import { basicSetup, EditorState } from '@codemirror/basic-setup'
+import { basicSetup } from 'codemirror'
+import { EditorView, keymap } from '@codemirror/view'
+import { EditorState } from '@codemirror/state'
 import { mainsailTheme } from '@/plugins/codemirrorTheme'
-import { StreamLanguage } from '@codemirror/stream-parser'
+import { StreamLanguage } from '@codemirror/language'
 import { klipper_config } from '@/plugins/StreamParserKlipperConfig'
 import { gcode } from '@/plugins/StreamParserGcode'
-import { EditorView, keymap } from '@codemirror/view'
 import { indentWithTab } from '@codemirror/commands'
 import { json } from '@codemirror/lang-json'
 import { css } from '@codemirror/lang-css'

src/plugins/StreamParserGcode.ts

@@ -1,4 +1,4 @@
-import { StringStream } from '@codemirror/stream-parser'
+import { StringStream } from '@codemirror/language'
 
 export const gcode = {
     token: function (stream: StringStream, state: StreamParserGcodeState, zeroPos = 0): string | null {

src/plugins/StreamParserJinja2.ts

@@ -1,5 +1,5 @@
 /*
-import {StringStream} from "@codemirror/stream-parser";
+import {StringStream} from "@codemirror/language";
 let keywords = ["and", "as", "block", "endblock", "by", "cycle", "debug", "else", "elif",
         "extends", "filter", "endfilter", "firstof", "for",
         "endfor", "if", "endif", "ifchanged", "endifchanged",

src/plugins/StreamParserKlipperConfig.ts

@@ -1,4 +1,4 @@
-import { StreamParser, StringStream } from '@codemirror/stream-parser'
+import { StreamParser, StringStream } from '@codemirror/language'
 import { gcode } from '@/plugins/StreamParserGcode'
 
 export const klipper_config: StreamParser<any> = {

src/plugins/StreamParserYaml.ts

@@ -1,4 +1,4 @@
-import { StringStream } from '@codemirror/stream-parser'
+import { StringStream } from '@codemirror/language'
 
 const cons = ['true', 'false', 'on', 'off', 'yes', 'no']
 const keywordRegex = new RegExp('\\b((' + cons.join(')|(') + '))$', 'i')

src/plugins/codemirrorTheme.ts

@@ -1,13 +1,14 @@
 import { EditorView } from '@codemirror/view'
 import { Extension } from '@codemirror/state'
-import { HighlightStyle, tags as t } from '@codemirror/highlight'
+import { tags as t } from '@lezer/highlight'
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
 
 const ui = {
     background: '#1e1e1e',
     foreground: '#d4d4d4',
 }
 
-export const mainsailEditor = EditorView.theme(
+const mainsailEditor = EditorView.theme(
     {
         '&': {
             color: '#d4d4d4',
@@ -40,7 +41,7 @@ export const mainsailEditor = EditorView.theme(
     { dark: true }
 )
 
-export const mainsailHighlightStyle = HighlightStyle.define([
+const mainsailHighlightStyle = HighlightStyle.define([
     { tag: t.number, color: '#b5cea8' },
     { tag: [t.meta], color: '#d4d4d4' },
     { tag: [t.comment], color: '#6a9955' },
@@ -51,7 +52,11 @@ export const mainsailHighlightStyle = HighlightStyle.define([
     { tag: t.name, color: '#e40', fontWeight: 'bold' },
     { tag: t.propertyName, color: '#e56735' },
 ])
+const fn0 = mainsailHighlightStyle.style
+// noinspection JSConstantReassignment
+// @ts-ignore
+mainsailHighlightStyle.style = (tags) => fn0(tags || [])
 
 /// Extension to enable the Mox theme (both the editor theme and
 /// the highlight style).
-export const mainsailTheme: Extension = [mainsailEditor, mainsailHighlightStyle]
+export const mainsailTheme: Extension = [mainsailEditor, syntaxHighlighting(mainsailHighlightStyle)]