Autocompletion and Syntax Highlight.

packages/uhk-web/package.json

@@ -67,6 +67,7 @@
     "karma-jasmine": "4.0.1",
     "karma-jasmine-html-reporter": "1.7.0",
     "monaco-editor": "0.44.0",
+    "naive-autocompletion-parser": "^1.1.8",
     "ng2-dragula": "5.0.1",
     "ng2-nouislider": "2.0.0",
     "ngrx-store-freeze": "0.2.4",

packages/uhk-web/src/app/components/macro/action-editor/tab/command/completion-provider.ts

@@ -0,0 +1,88 @@
+import { retrieveUhkGrammar, buildUhkParser, ParserBuilder, Parser, Suggestion } from 'naive-autocompletion-parser';
+import { LogService } from 'uhk-common';
+
+export class CustomCompletionProvider implements monaco.languages.CompletionItemProvider {
+    public readonly triggerCharacters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ.\\@( \\$".split("");
+
+    private parser: Parser | undefined;
+    private identifierCharPattern = /[a-zA-Z]/;
+
+    constructor( private logService: LogService ) {
+        this.parser = undefined;
+
+        // TODO: here, pass the actual reference-manual.md (from correct repository/tag) body into the buildUhkParser
+        retrieveUhkGrammar().then ( grammarText => {
+            this.parser = buildUhkParser(grammarText);
+        });
+    }
+
+    guessKind(text: string, rule: string): [monaco.languages.CompletionItemKind, string] {
+        if (rule.slice(rule.length-7) == '_ABBREV') {
+            // key and scancode abbreviations
+            return [monaco.languages.CompletionItemKind.Struct, "5"];
+        } else if (rule == 'MODMASK') {
+            // modmask
+            return [monaco.languages.CompletionItemKind.Interface, "4"];
+        } else  if (this.identifierCharPattern.test(text[0])) {
+            // identifiers, commands
+            return [monaco.languages.CompletionItemKind.Text, "3"];
+        } else if (text[0] == '<' && text[text.length-1] == '>') {
+            // hints
+            return [monaco.languages.CompletionItemKind.Property, "1"];
+        } else if (text[1] == '<' && text[text.length-2] == '>') {
+            // comment hints
+            return [monaco.languages.CompletionItemKind.Property, "1"];
+        } else {
+            // operators
+            return [monaco.languages.CompletionItemKind.Module, "2"];
+        }
+    }
+
+    provideCompletionItems(
+        model: monaco.editor.ITextModel,
+        position: monaco.Position,
+        context: monaco.languages.CompletionContext,
+        token: monaco.CancellationToken
+    ): monaco.languages.ProviderResult<monaco.languages.CompletionList> {
+        const lineNumber = position.lineNumber;
+        const column = position.column;
+
+        const lineText = model.getValueInRange({
+            startLineNumber: lineNumber,
+            startColumn: 1,
+            endLineNumber: lineNumber,
+            endColumn: column
+        });
+
+        if (this.parser) {
+            let nelaSuggestions: Suggestion[] = [];
+            try {
+                nelaSuggestions = this.parser.complete(lineText, "BODY");
+            } catch (e) {
+                this.logService.error(e);
+            }
+            let monacoSuggestions: monaco.languages.CompletionItem[] = nelaSuggestions.map(it => {
+                let kind = this.guessKind(it.suggestion, it.originRule);
+                return {
+                    insertText: it.text(),
+                    kind: kind[0],
+                    label: it.text(),
+                    sortText: kind[1] + it.text(),
+                    range: {
+                        startLineNumber: lineNumber,
+                        startColumn: column - it.overlap,
+                        endLineNumber: lineNumber,
+                        endColumn: column
+                    },
+                };
+            });
+            return {
+                suggestions: monacoSuggestions
+            };
+        } else {
+            return {
+                suggestions: []
+            };
+        }
+    }
+}

packages/uhk-web/src/app/components/macro/action-editor/tab/command/highlight-provider.ts

@@ -0,0 +1,82 @@
+export function highlightProvider(): monaco.languages.IMonarchLanguage {
+    return {
+        keywords: [],
+
+        typeKeywords: [],
+
+        operators: [
+            '=', '>', '<', '!', '~', '?', ':', '==', '<=', '>=', '!=',
+            '&&', '||', '++', '--', '+', '-', '*', '/', '&', '|', '^', '%',
+            '<<', '>>', '>>>', '+=', '-=', '*=', '/=', '&=', '|=', '^=',
+            '%=', '<<=', '>>=', '>>>='
+        ],
+
+        // we include these common regular expressions
+        symbols: /[=><!~?:&|+\-*/^%]+/,
+
+        // C# style strings
+        escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+
+        // The main tokenizer for our languages
+        tokenizer: {
+            root: [
+                // identifiers and keywords
+                [/[a-z_][\w$]*/, {
+                    cases: {
+                        '@typeKeywords': 'keyword',
+                        '@keywords': 'keyword',
+                        '@default': 'identifier'
+                    }
+                }],
+                [/\$[A-Za-z_][\w$]*/, 'type.identifier'],    // to show class names nicely
+
+                // numbers
+                [/\d*\.\d+([eE][-+]?\d+)?/, 'number.float'],
+                [/\d+/, 'number'],
+                [/true|false/, 'number'],
+
+                // whitespace
+                { include: '@whitespace' },
+
+                // delimiters and operators
+                [/[{}()[\]]/, '@brackets'],
+                [/[<>](?!@symbols)/, '@brackets'],
+                [/@symbols/, {
+                    cases: {
+                        '@operators': 'operator',
+                        '@default': ''
+                    }
+                }],
+
+                // delimiter: after number because of .\d floats
+                [/[;,.]/, 'delimiter'],
+
+                // strings
+                [/"([^"\\]|\\.)*$/, 'string.invalid'],    // non-teminated string
+                [/"/, { token: 'string.quote', bracket: '@open', next: '@string' }],
+
+                // literalStrings
+                [/'([^'\\]|\\.)*$/, 'string.invalid'],    // non-teminated string
+                [/'/, { token: 'string.quote', bracket: '@open', next: '@literalString' }],
+            ],
+
+            string: [
+                [/[^\\"]+/, 'string'],
+                [/@escapes/, 'string.escape'],
+                [/\\./, 'string.escape.invalid'],
+                [/"/, { token: 'string.quote', bracket: '@close', next: '@pop' }]
+            ],
+
+            literalString: [
+                [/[^\\']+/, 'string'],
+                [/\\./, 'string.escape.invalid'],
+                [/'/, { token: 'string.quote', bracket: '@close', next: '@pop' }]
+            ],
+
+            whitespace: [
+                [/[ \t\r\n]+/, 'white'],
+                [/\/\/.*$/, 'comment'],
+            ],
+        },
+    };
+}

packages/uhk-web/src/app/components/macro/action-editor/tab/command/macro-command-editor.component.ts

@@ -25,13 +25,15 @@ import { LogService } from 'uhk-common';
 import { SelectedMacroActionId } from '../../../../../models';
 import { SmartMacroDocCommandAction, SmartMacroDocService } from '../../../../../services/smart-macro-doc-service';
 import { hasNonAsciiCharacters, NON_ASCII_REGEXP } from '../../../../../util';
+import { CustomCompletionProvider } from './completion-provider';
+import { highlightProvider } from './highlight-provider';
 
 const MONACO_EDITOR_LINE_HEIGHT_OPTION = 66;
 const MONACO_EDITOR_LF_END_OF_LINE_OPTION = 0;
 const MACRO_CHANGE_DEBOUNCE_TIME = 250;
 
 function getVsCodeTheme(): string {
-    return (window as any).getUhkTheme() === 'dark' ? 'uhk-dark' : 'vs';
+    return (window as any).getUhkTheme() === 'dark' ? 'uhk-dark' : 'uhk-light';
 }
 
 @Component({
@@ -85,6 +87,7 @@ export class MacroCommandEditorComponent implements AfterViewInit, ControlValueA
     private insertingMacro = false;
     private changeObserver$: Observer<string>;
     private subscriptions = new Subscription();
+    private static completionRegistered: boolean = false;
 
     constructor(private cdRef: ChangeDetectorRef,
                 @Inject(DOCUMENT) private document: Document,
@@ -141,6 +144,7 @@ export class MacroCommandEditorComponent implements AfterViewInit, ControlValueA
         if (this.editor && this.autoFocus) {
             this.editor.focus();
         }
+
         this.calculateHeight();
     }
 
@@ -163,10 +167,42 @@ export class MacroCommandEditorComponent implements AfterViewInit, ControlValueA
         this.removeNonAsciiCharachters();
     }
 
+    private setLanguageProperties(editor: MonacoStandaloneCodeEditor) {
+        const languageId = 'uhkScript';
+
+        if (!MacroCommandEditorComponent.completionRegistered) {
+            MacroCommandEditorComponent.completionRegistered = true;
+            monaco.languages.register({ id: languageId });
+
+            // Register the custom completion provider
+            const completionProvider = new CustomCompletionProvider(this.logService);
+            const providerRegistration = monaco.languages.registerCompletionItemProvider(
+                languageId,
+                completionProvider
+            );
+
+            // Register highlighter
+            monaco.languages.setMonarchTokensProvider(
+                languageId,
+                highlightProvider()
+            );
+        }
+
+        editor.getModel()?.dispose();
+        const newModel = monaco.editor.createModel(
+            editor.getValue(),
+            languageId
+        );
+        editor.setModel(newModel);
+    }
+
     onEditorInit(editor: MonacoStandaloneCodeEditor) {
         this.logService.misc('[MacroCommandEditorComponent] editor initialized.');
 
         this.editor = editor;
+
+        this.setLanguageProperties(editor);
+
         this.setLFEndOfLineOption();
         if (this.autoFocus) {
             this.editor.focus();

packages/uhk-web/src/app/services/monaco-editor-custom-theme.service.ts

@@ -18,6 +18,17 @@ export class MonacoEditorCustomThemeService {
                     'editor.foreground': '#bbbbbb'
                 }
             });
+            monaco.editor.defineTheme('uhk-light', {
+                base: 'vs',
+                inherit: true,
+                rules: [
+                    { token: 'comment', foreground: '#777777'},
+                    { token: 'number', foreground: '#aa0000'},
+                    { token: 'string', foreground: '#55aa55'},
+                    { token: 'variable', foreground: '#7777ff'},
+                ],
+                colors: {}
+            });
         });
     }
 }