87 lines
2.4 KiB
JavaScript
87 lines
2.4 KiB
JavaScript
export const initEditor = (monaco) => {
|
|
monaco.languages.register({ id: 'mermaid' });
|
|
|
|
// Register a tokens provider for the language
|
|
monaco.languages.setMonarchTokensProvider('mermaid', {
|
|
typeKeywords: [
|
|
'graph',
|
|
'stateDiagram',
|
|
'sequenceDiagram',
|
|
'classDiagram',
|
|
'pie',
|
|
'flowchart',
|
|
'gantt',
|
|
],
|
|
keywords: ['patricipant', 'as'],
|
|
arrows: ['---', '===', '-->', '==>'],
|
|
|
|
tokenizer: {
|
|
root: [
|
|
[/[{}]/, 'delimiter.bracket'],
|
|
[
|
|
/[a-z_$][\w$]*/,
|
|
{ cases: { '@typeKeywords': 'keyword', '@keywords': 'keyword' } },
|
|
],
|
|
[/[-=>ox]+/, { cases: { '@arrows': 'transition' } }],
|
|
[/[\[\{\(}]+.+?[\)\]\}]+/, 'string'],
|
|
[/\".*\"/, 'string'],
|
|
],
|
|
},
|
|
whitespace: [
|
|
[/[ \t\r\n]+/, 'white'],
|
|
[/\%\%.*$/, 'comment'],
|
|
],
|
|
});
|
|
|
|
monaco.editor.defineTheme('myCoolTheme', {
|
|
base: 'vs',
|
|
inherit: false,
|
|
rules: [
|
|
{ token: 'keyword', foreground: '880000', fontStyle: 'bold' },
|
|
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
|
|
{ token: 'string', foreground: 'AA8500' },
|
|
{ token: 'transition', foreground: '008800', fontStyle: 'bold' },
|
|
{ token: 'delimiter.bracket', foreground: '000000', fontStyle: 'bold' },
|
|
],
|
|
});
|
|
|
|
// Register a completion item provider for the new language
|
|
monaco.languages.registerCompletionItemProvider('mermaid', {
|
|
provideCompletionItems: () => {
|
|
var suggestions = [
|
|
{
|
|
label: 'simpleText',
|
|
kind: monaco.languages.CompletionItemKind.Text,
|
|
insertText: 'simpleText',
|
|
},
|
|
{
|
|
label: 'testing',
|
|
kind: monaco.languages.CompletionItemKind.Keyword,
|
|
insertText: 'testing(${1:condition})',
|
|
insertTextRules:
|
|
monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
|
|
},
|
|
{
|
|
label: 'ifelse',
|
|
kind: monaco.languages.CompletionItemKind.Snippet,
|
|
insertText: [
|
|
'if (${1:condition}) {',
|
|
'\t$0',
|
|
'} else {',
|
|
'\t',
|
|
'}',
|
|
].join('\n'),
|
|
insertTextRules:
|
|
monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
|
|
documentation: 'If-Else Statement',
|
|
},
|
|
];
|
|
return { suggestions: suggestions };
|
|
},
|
|
});
|
|
};
|
|
|
|
export const getResizeHandler = (editor) => {
|
|
return (node) => editor && editor.layout();
|
|
};
|