added error highlighting in script editor

package.json

@@ -36,10 +36,9 @@
     "@babel/preset-env": "^7.15.8",
     "@codemirror/autocomplete": "^6.18.4",
     "@codemirror/commands": "^6.7.1",
-    "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/language": "^6.10.8",
+    "@codemirror/lint": "^6.8.4",
     "@codemirror/state": "^6.5.0",
-    "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.36.1",
     "@electron-forge/cli": "^6.0.1",
     "@electron-forge/maker-deb": "^6.0.1",
@@ -71,6 +70,7 @@
     "sanitize-html": "^2.10.0",
     "shortid": "^2.2.16",
     "style-loader": "^3.3.1",
+    "thememirror": "^2.0.1",
     "tiptap": "^1.22.3",
     "tiptap-extensions": "^1.22.3",
     "vue": "^2.6.10",

src/ui/components/SchemeEditor.vue

@@ -385,7 +385,7 @@
                         <ScriptsTab v-if="currentLeftTab === 'Scripts'"
                             :key="`${editorId}-${schemeContainer.scheme.id}`"
                             :editorId="editorId"
-                            :scheme-container="schemeContainer"
+                            :schemeContainer="schemeContainer"
                             />
                     </div>
                 </div>

src/ui/components/editor/ScriptEditor.vue

@@ -14,11 +14,27 @@ import {EditorState, Compartment} from "@codemirror/state";
 import {EditorView, keymap} from "@codemirror/view";
 import {SchemioScript } from "codemirror-lang-schemioscript";
 import {defaultKeymap, indentWithTab} from "@codemirror/commands";
-import { oneDark } from '@codemirror/theme-one-dark';
+import {dracula, clouds} from 'thememirror';
 import {autocompletion} from "@codemirror/autocomplete";
 import {syntaxTree, indentUnit} from "@codemirror/language";
+import { linter } from "@codemirror/lint";
 
 
+function basicLinter(view) {
+    let diagnostics = [];
+    syntaxTree(view.state).cursor().iterate(node => {
+        if (node.type.isError) {
+            diagnostics.push({
+                from: node.from,
+                to: node.to,
+                severity: "error",
+                message: null
+            });
+        }
+    })
+    return diagnostics;
+}
+
 const keywords = `
     local for while if else func struct
 `.split(/\s+/).filter(name => name).map(name => {return {
@@ -185,7 +201,7 @@ export default {
     created() {
         const editorTheme = new Compartment();
         let themeId = document.body.getAttribute('data-theme');
-        let theme = themeId === 'dark' ? oneDark : [];
+        let theme = themeId === 'dark' ? dracula : clouds;
         this.editorState = EditorState.create({
             doc: this.script,
             extensions: [
@@ -195,6 +211,7 @@ export default {
                 keymap.of(indentWithTab),
                 basicSetup,
                 SchemioScript(),
+                linter(basicLinter),
                 editorTheme.of(theme),
                 EditorView.updateListener.of((v)=> {
                     if(v.docChanged) {
@@ -212,7 +229,7 @@ export default {
 
         this.themeObserver = new MutationObserver(() => {
             const newThemeId = document.body.getAttribute('data-theme');
-            const theme = newThemeId === 'dark' ? oneDark : [];
+            const theme = newThemeId === 'dark' ? dracula : clouds;
             if (this.editor) {
                 this.editor.dispatch({
                     effects: editorTheme.reconfigure(theme)

src/ui/components/editor/ScriptsTab.vue

@@ -175,6 +175,7 @@
                     <ScriptFunctionEditor
                         :editorId="editorId"
                         :args="funcModal.props"
+                        :schemeContainer="schemeContainer"
                         @argument-changed="onScriptFunctionEditorPropChange"/>
                 </div>
             </Panel>