1export const initEditor = (monaco) => { 2 monaco.languages.register({ id: 'mermaid' }); 3 4 // Register a tokens provider for the language 5 monaco.languages.setMonarchTokensProvider('mermaid', { 6 typeKeywords: [ 7 'graph', 8 'stateDiagram', 9 'sequenceDiagram', 10 'classDiagram', 11 'pie', 12 'flowchart', 13 'gantt', 14 ], 15 keywords: ['patricipant', 'as'], 16 arrows: ['---', '===', '-->', '==>'], 17 18 tokenizer: { 19 root: [ 20 [/[{}]/, 'delimiter.bracket'], 21 [ 22 /[a-z_$][\w$]*/, 23 { cases: { '@typeKeywords': 'keyword', '@keywords': 'keyword' } }, 24 ], 25 [/[-=>ox]+/, { cases: { '@arrows': 'transition' } }], 26 [/[\[\{\(}]+.+?[\)\]\}]+/, 'string'], 27 [/\".*\"/, 'string'], 28 ], 29 }, 30 whitespace: [ 31 [/[ \t\r\n]+/, 'white'], 32 [/\%\%.*$/, 'comment'], 33 ], 34 }); 35 36 monaco.editor.defineTheme('myCoolTheme', { 37 base: 'vs', 38 inherit: false, 39 rules: [ 40 { token: 'keyword', foreground: '880000', fontStyle: 'bold' }, 41 { token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' }, 42 { token: 'string', foreground: 'AA8500' }, 43 { token: 'transition', foreground: '008800', fontStyle: 'bold' }, 44 { token: 'delimiter.bracket', foreground: '000000', fontStyle: 'bold' }, 45 ], 46 }); 47 48 // Register a completion item provider for the new language 49 monaco.languages.registerCompletionItemProvider('mermaid', { 50 provideCompletionItems: () => { 51 var suggestions = [ 52 { 53 label: 'simpleText', 54 kind: monaco.languages.CompletionItemKind.Text, 55 insertText: 'simpleText', 56 }, 57 { 58 label: 'testing', 59 kind: monaco.languages.CompletionItemKind.Keyword, 60 insertText: 'testing(${1:condition})', 61 insertTextRules: 62 monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet, 63 }, 64 { 65 label: 'ifelse', 66 kind: monaco.languages.CompletionItemKind.Snippet, 67 insertText: [ 68 'if (${1:condition}) {', 69 '\t$0', 70 '} else {', 71 '\t', 72 '}', 73 ].join('\n'), 74 insertTextRules: 75 monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet, 76 documentation: 'If-Else Statement', 77 }, 78 ]; 79 return { suggestions: suggestions }; 80 }, 81 }); 82}; 83 84export const getResizeHandler = (editor) => { 85 return (node) => editor && editor.layout(); 86}; 87