added two apps, and better implementation

2022-03-22 18:20:26 +01:00
parent bb44e0e92d
commit 33b3f2e5cc
47 changed files with 486 additions and 151 deletions
@@ -0,0 +1,92 @@
+import { BaseElement } from "../_base";
+import './code-editor.less';
+import * as monaco from 'monaco-editor';
+import { OutputFrame } from "../output-frame/output-frame";
+import initScript from './injects/editor-init.txt';
+
+export class CodeEditor extends BaseElement {
+
+    public input: string = initScript;
+
+    onInit(): void {
+
+        
+        this.initWorkers();
+
+
+        var editor = monaco.editor.create(this, {
+            value: this.input,
+            language: 'javascript',
+            automaticLayout: true,
+            contextmenu: false,
+            minimap: {
+                enabled: false
+            },
+            autoIndent: "full"
+        });
+
+        monaco.languages.registerCompletionItemProvider("javascript", {
+            triggerCharacters: ["."],
+            provideCompletionItems: (model, position, context, token) => (
+                {
+                    suggestions: [
+                        {
+                            label: 'for',
+                            kind: monaco.languages.CompletionItemKind.Function,
+                            insertText: 'for (let i = 0; i < array.length; i++) {\n\n}',
+                            range: <any>null,
+                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
+                        },
+                        {
+                            label: 'forr',
+                            kind: monaco.languages.CompletionItemKind.Function,
+                            insertText: 'for (var i = array.length - 1; i >= 0; i--) {\n\n}',
+                            range: <any>null,
+                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
+                        }
+                    ]
+                }
+            )
+          });
+
+          
+        editor.onDidChangeModelContent((e) => {
+            this.input = editor.getValue();
+            this.outputFrame.setScript(this.input);
+        });
+
+        this.waitFor(this.outputFrame, () => {
+            this.outputFrame.setScript(this.input);
+        });
+
+    }
+
+    initWorkers() {
+        // @ts-ignore
+        self.MonacoEnvironment = {
+            getWorkerUrl: function (moduleId: any, label: string) {
+                if (label === 'json') {
+                    return './json.worker.bundle.js';
+                }
+                if (label === 'css' || label === 'scss' || label === 'less') {
+                    return './css.worker.bundle.js';
+                }
+                if (label === 'html' || label === 'handlebars' || label === 'razor') {
+                    return './html.worker.bundle.js';
+                }
+                if (label === 'typescript' || label === 'javascript') {
+                    return './ts.worker.bundle.js';
+                }
+                return './editor.worker.bundle.js';
+            }
+        };
+    }
+
+    onUpdate(): void {
+        console.log("APP ROOT UPDATE");
+    }
+
+    get outputFrame(): OutputFrame {
+        return <OutputFrame>this.findSibling("output-frame");
+    }
+}