diff --git a/src/lib/components/editor/editor.svelte b/src/lib/components/editor/editor.svelte index 0a104d81..15a6ac0a 100644 --- a/src/lib/components/editor/editor.svelte +++ b/src/lib/components/editor/editor.svelte @@ -18,6 +18,7 @@ minimap: { enabled: false }, + theme: 'myCoolTheme', overviewRulerLanes: 0 }; export let errorMarkers: monaco.editor.IMarkerData[] = []; diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 7ffcddeb..4d8ef404 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -1,9 +1,9 @@ // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -export const initEditor = (monaco): void => { - monaco.languages.register({ id: 'mermaid' }); +export const initEditor = (monacoEditor): void => { + monacoEditor.languages.register({ id: 'mermaid' }); // Register a tokens provider for the language - monaco.languages.setMonarchTokensProvider('mermaid', { + monacoEditor.languages.setMonarchTokensProvider('mermaid', { typeKeywords: [ 'graph', 'stateDiagram', @@ -23,7 +23,7 @@ export const initEditor = (monaco): void => { [/[{}]/, 'delimiter.bracket'], [/[a-z_$][\w$]*/, { cases: { '@typeKeywords': 'keyword', '@keywords': 'keyword' } }], [/[-=>ox]+/, { cases: { '@arrows': 'transition' } }], - [/[[{(}]+.+?[)]}]+/, 'string'], + [/[[{(}]+.+?[)\]}]+/, 'string'], [/".*"/, 'string'] ] }, @@ -33,7 +33,7 @@ export const initEditor = (monaco): void => { ] }); - monaco.editor.defineTheme('myCoolTheme', { + monacoEditor.editor.defineTheme('myCoolTheme', { base: 'vs', inherit: false, rules: [ @@ -46,25 +46,25 @@ export const initEditor = (monaco): void => { }); // Register a completion item provider for the new language - monaco.languages.registerCompletionItemProvider('mermaid', { + monacoEditor.languages.registerCompletionItemProvider('mermaid', { provideCompletionItems: () => { const suggestions = [ { label: 'simpleText', - kind: monaco.languages.CompletionItemKind.Text, + kind: monacoEditor.languages.CompletionItemKind.Text, insertText: 'simpleText' }, { label: 'testing', - kind: monaco.languages.CompletionItemKind.Keyword, + kind: monacoEditor.languages.CompletionItemKind.Keyword, insertText: 'testing(${1:condition})', - insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet + insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet }, { label: 'ifelse', - kind: monaco.languages.CompletionItemKind.Snippet, + kind: monacoEditor.languages.CompletionItemKind.Snippet, insertText: ['if (${1:condition}) {', '\t$0', '} else {', '\t', '}'].join('\n'), - insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet, + insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, documentation: 'If-Else Statement' } ]; diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte index 62354296..9579bc06 100644 --- a/src/routes/edit.svelte +++ b/src/routes/edit.svelte @@ -35,8 +35,6 @@ } codeStore.subscribe((state: State) => { - console.log(state); - if (state.updateEditor) { text = selectedMode === 'code' ? state.code : state.mermaid; }