declarations support, color support, better inject

This commit is contained in:
David Meincke
2022-03-24 00:04:15 +01:00
parent ad53ae9695
commit c81b04cde3
9 changed files with 64 additions and 92 deletions
@@ -2,9 +2,10 @@ import { BaseElement } from "../../../shared/_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';
import spiralBoxesSolutionScript from './injects/spiral-boxes-solution.txt';
import initScript from '!!raw-loader!./injects/editor-init.js';
import spiralBoxesSolutionScript from '!!raw-loader!./injects/spiral-boxes-solution.js';
import { debounceManager } from "../../../shared/ensure-debounce";
import declarations from '!!raw-loader!./injects/declarations.d.ts';
export class CodeEditor extends BaseElement {
@@ -12,7 +13,6 @@ export class CodeEditor extends BaseElement {
onInit(): void {
this.initWorkers();
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
@@ -26,9 +26,11 @@ export class CodeEditor extends BaseElement {
enabled: false
},
autoIndent: "full",
theme: prefersDarkScheme.matches ? 'vs-dark' : 'vs-white'
theme: prefersDarkScheme.matches ? 'vs-dark' : 'vs-light'
});
monaco.languages.typescript.javascriptDefaults.addExtraLib(declarations, 'ts:filename/declarations.d.ts');
monaco.languages.registerCompletionItemProvider("javascript", {
triggerCharacters: ["."],
provideCompletionItems: (model, position, context, token) => (
@@ -48,58 +50,10 @@ export class CodeEditor extends BaseElement {
range: <any>null,
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
},
{
label: 'rect',
detail: "details",
kind: monaco.languages.CompletionItemKind.Function,
insertText: 'rect(${1:x}, ${2:y}, ${3:width}, ${4:height})',
range: <any>null,
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
},
{
label: 'box',
detail: "details",
kind: monaco.languages.CompletionItemKind.Function,
insertText: 'box(${1:x}, ${2:y}, ${3:width}, ${4:height})',
range: <any>null,
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
},
{
label: 'width',
detail: "gets the width of the canvas",
kind: monaco.languages.CompletionItemKind.Function,
insertText: 'width()',
range: <any>null,
insertTextRules: monaco.languages.CompletionItemInsertTextRule.KeepWhitespace
},
{
label: 'height',
detail: "gets the height of the canvas",
kind: monaco.languages.CompletionItemKind.Function,
insertText: 'height()',
range: <any>null,
insertTextRules: monaco.languages.CompletionItemInsertTextRule.KeepWhitespace
},
{
label: 'center',
detail: "gets the center of the canvas",
kind: monaco.languages.CompletionItemKind.Function,
insertText: 'center()',
range: <any>null,
insertTextRules: monaco.languages.CompletionItemInsertTextRule.KeepWhitespace
},
{
label: 'rand',
detail: "gets a random number between two numbers",
kind: monaco.languages.CompletionItemKind.Function,
insertText: 'rand(${1:from}, ${2:to})',
range: <any>null,
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
},
{
label: 'spiralBoxesSolutionSnippet',
detail: "inserts solution of spiral boxes",
kind: monaco.languages.CompletionItemKind.Function,
kind: monaco.languages.CompletionItemKind.Snippet,
insertText: spiralBoxesSolutionScript,
range: <any>null,
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet