92 lines
3.0 KiB
TypeScript
92 lines
3.0 KiB
TypeScript
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");
|
|
}
|
|
} |