Revert "feat: Lua syntax highlighting in Settings → Scripts editor"

This reverts commit faf9cac.

Author: adubovikov

src/app/components/controls/codejar-wrapper/codejar-wrapper.component.html

@@ -3,7 +3,7 @@
         {{ errorMessage }}
     </div>
     <ngx-codejar
-        [highlightMethod]="resolvedHighlighter"
+        [highlightMethod]="mode ? highlightMethod : highlightMethodJSON"
         [code]="code"
         (codeChange)="onChangeCode($event)"
         [showLineNumbers]="false"

src/app/components/controls/codejar-wrapper/codejar-wrapper.component.ts

@@ -3,7 +3,7 @@ import {
     Component, EventEmitter, Input, OnInit, Output, AfterViewInit,
     ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, HostListener
 } from '@angular/core';
-import { CodeJarContainer, NgxCodeJarComponent } from 'ngx-codejar';
+import { CodeJarContainer } from 'ngx-codejar';
 
 @Component({
     selector: 'app-codejar-wrapper',
@@ -21,18 +21,7 @@ export class CodeJarWrapperComponent implements OnInit, AfterViewInit {
         return this.code;
     }
     @Output() textChange = new EventEmitter<string>();
-    private _mode: string;
-    @Input()
-    set mode(value: string) {
-        const prev = this._mode;
-        this._mode = value;
-        if (prev !== undefined && prev !== value) {
-            requestAnimationFrame(() => this.refreshHighlight());
-        }
-    }
-    get mode(): string {
-        return this._mode;
-    }
+    @Input() mode: string;
     @Input() jsonValidator: boolean = false;
     @Input() theme = 'monokai';
     _readOnly = false;
@@ -61,7 +50,6 @@ export class CodeJarWrapperComponent implements OnInit, AfterViewInit {
     isReadyToShow = false;
 
     @ViewChild('codejar') codejar: any;
-    @ViewChild(NgxCodeJarComponent) private ngxCodeJar: NgxCodeJarComponent;
 
     constructor(private cdr: ChangeDetectorRef) {
     }
@@ -84,27 +72,6 @@ export class CodeJarWrapperComponent implements OnInit, AfterViewInit {
             editor.innerHTML = hljs.highlight(editor.textContent, { language: 'javascript' }).value;
         }
     }
-    resolvedHighlighter = (editor: CodeJarContainer) => {
-        if (editor.textContent === null || editor.textContent === undefined) {
-            return;
-        }
-        let language: string;
-        switch ((this.mode || '').toLowerCase()) {
-            case 'lua':
-                language = 'lua';
-                break;
-            case 'json':
-                language = 'json';
-                break;
-            case 'javascript':
-            case 'js':
-                language = 'javascript';
-                break;
-            default:
-                language = this.mode ? 'javascript' : 'json';
-        }
-        editor.innerHTML = hljs.highlight(editor.textContent, { language }).value;
-    }
 
     ngAfterViewInit(): void {
 
@@ -126,13 +93,6 @@ export class CodeJarWrapperComponent implements OnInit, AfterViewInit {
         this.editor?.updateOptions({ readOnly: this._readOnly });
         console.log(line);
     }
-    refreshHighlight() {
-        if (!this.ngxCodeJar) {
-            return;
-        }
-        this.ngxCodeJar.updateCode(this.code ?? '');
-        requestAnimationFrame(() => this.cdr.detectChanges());
-    }
     onChangeCode(event: any) {
         this.code = event;
         if (this.jsonValidator) {

src/app/components/preference/dialogs/dialog-scripts/dialog-scripts.component.html

@@ -112,32 +112,23 @@
     <mat-tab [label]="'preference.scripts.dialog.jsScripts' | translate">
       <hr />
 
-      <p style="display:flex; align-items:center; justify-content:space-between;">
+      <p>
         <strong>{{ 'preference.scripts.dialog.jsScripts' | translate }}</strong>
-        <span>
-          <mat-button-toggle-group [value]="editorMode"
-            (change)="setEditorMode($event.value)"
-            aria-label="Script language">
-            <mat-button-toggle value="javascript">JavaScript</mat-button-toggle>
-            <mat-button-toggle value="lua">Lua</mat-button-toggle>
-          </mat-button-toggle-group>
-        </span>
       </p>
       <small>{{ 'preference.scripts.dialog.jsScriptsDescription' | translate }}</small>
       <hr />
       <full-screen (fullPage)='disableClose($event)'
                     (import)='import($event)'
-                    [data]='{json:data.data.data, title: "Script " +  data.data.hep_alias + " " + data.data.profile, type: editorMode}'>
-        <app-codejar-wrapper
-          [mode]="editorMode"
+                    [data]='{json:data.data.data, title: "Script " +  data.data.hep_alias + " " + data.data.profile, type: "js"}'>
+        <ace-editor [mode]="'javascript'"
           [theme]="'monokai'"
-          [readOnly]="!isAdmin"
+          [readOnly]="false"
           [(text)]="data.data.data"
           #data_view
           [style.min-height.%]="100"
-          style="padding: 5px; display:block; min-height: 400px;"
+          style="padding: 5px"
           [disabled]="!isAdmin"
-        ></app-codejar-wrapper>
+        ></ace-editor>
       </full-screen>
     </mat-tab>
   </mat-tab-group>

src/app/components/preference/dialogs/dialog-scripts/dialog-scripts.component.ts

@@ -1,10 +1,10 @@
 import { Component, Inject, ChangeDetectionStrategy, ViewChild, AfterViewInit, ChangeDetectorRef } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+// import 'brace';
+// import 'brace/mode/text';
+// import 'brace/theme/github';
 import { TranslateService } from '@ngx-translate/core'
-
-const LUA_TYPES = new Set(['correlation', 'lua']);
-
 @Component({
     selector: 'app-dialog-scripts',
     templateUrl: './dialog-scripts.component.html',
@@ -17,7 +17,6 @@ export class DialogScriptsComponent implements AfterViewInit {
     isAdmin = false;
     regNum = /^[0-9]+$/;
     regString = /^[a-zA-Z0-9\-\_]+$/;
-    editorMode: 'lua' | 'javascript' = 'javascript';
 
     @ViewChild('data_view', { static: false }) editor;
     partid = new FormControl('', [
@@ -87,27 +86,28 @@ export class DialogScriptsComponent implements AfterViewInit {
             this.profile.setValue(d.profile);
             this.type.setValue(d.type);
         })(data.data);
-        this.editorMode = this.resolveEditorMode(data.data?.type);
-        this.type.valueChanges.subscribe(val => {
-            const next = this.resolveEditorMode(val);
-            if (next !== this.editorMode) {
-                this.editorMode = next;
-                this.cdr.detectChanges();
-            }
-        });
         this.isValidForm = true;
+            // const test = this.editor.getEditor().getSession().getAnnotations().filter(annotation => annotation.raw !== `['{a}'] is better written in dot notation.`);
+
     }
     ngAfterViewInit() {
-        this.cdr.detectChanges();
-    }
-    private resolveEditorMode(t: string | null | undefined): 'lua' | 'javascript' {
-        if (typeof t === 'string' && LUA_TYPES.has(t.toLowerCase())) {
-            return 'lua';
-        }
-        return 'javascript';
-    }
-    setEditorMode(mode: 'lua' | 'javascript') {
-        this.editorMode = mode;
+        const options = {
+            esnext: true,
+            moz: true,
+            devel: true,
+            browser: true,
+            node: true,
+            laxcomma: true,
+            laxbreak: true,
+            lastsemic: true,
+            onevar: false,
+            passfail: false,
+            maxerr: 10000,
+            expr: true,
+            multistr: true,
+            globalstrict: true
+        };
+        this.editor.getEditor().getSession().$worker.call("setOptions", [options]);
         this.cdr.detectChanges();
     }
     disableClose(e) {