/* eslint-disable @typescript-eslint/no-unsafe-assignment */ /* eslint-disable @typescript-eslint/no-unsafe-call */ /* eslint-disable @typescript-eslint/no-unsafe-member-access */ // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types export const initEditor = (monacoEditor): void => { monacoEditor.languages.register({ id: 'mermaid' }); const orientations = ['TB', 'TD', 'BT', 'RL', 'LR']; const typeKeywords = [ 'flowchart', 'graph', 'stateDiagram-v2', 'stateDiagram', 'sequenceDiagram', 'classDiagram', 'pie', 'erDiagram', 'flowchart', 'gantt', 'gitGraph', 'journey', 'info' ]; const blockKeywords = [ 'subgraph', 'rect', 'opt', 'class', 'alt', 'par', 'and', 'loop', 'else', 'end' ]; const keywords = [ 'participant', 'as', 'showInfo', 'autonumber', 'rgba', 'rgb', 'hsla', 'hsl', 'linkStyle', 'style', 'classDef', 'direction', 'activate', 'deactivate', 'cssClass', 'link', 'callback', 'click', 'class', 'href', 'call' ]; // Register a tokens provider for the mermaid language monacoEditor.languages.setMonarchTokensProvider('mermaid', { typeKeywords, blockKeywords, keywords, orientation: orientations, noEatingSequenceArrows: ['-)', '--)', '->>', '-->>'].reduce( (accumalator, arrow) => accumalator.concat(arrow, arrow + '+', arrow + '-'), [] ), eatingSequenceArrows: ['->', '-x'].reduce( (accumalator, arrow) => accumalator.concat(arrow, arrow + '+', arrow + '-'), [] ), tokenizer: { root: [ [/-{1,2}\)|-{1,2}>>/, { cases: { '@noEatingSequenceArrows': 'transition' } }], [/\*--\*?|--\*/, 'transition'], [/(<\|?)(\.{2}|-{2})(\|?>)?|(\.{2}|-{2})(\|?>)/, 'transition'], [/[ox<]?(-{2,}|-+\.+-+|={2,})[ox>]?/, 'transition'], [/[-+>]+/, { cases: { '@eatingSequenceArrows': 'transition' } }], [':::', 'transition'], [ /[a-z_$][\w$]*((?<=stateDiagram)-v2)?/, { cases: { '@typeKeywords': 'typeKeyword', '@blockKeywords': 'typeKeyword', '@keywords': 'keyword' } } ], [/[A-Z$][\w$]*/, { cases: { '@orientation': 'keyword' } }], [/\[\[(fork|join|choice)\]\]/, 'annotation'], [/[[{(}>]+.+?[)\]}]+/, 'string'], [/[{}&]/, 'delimiter.bracket'], [/".*"/, 'string'], [/#(\d|[a-zA-Z])*;/, 'html.entity/hex-color-code'], [/#(?:[0-9a-fA-F]{3}){1,2}/, 'html.entity/hex-color-code'], [/<<.+>>/, 'annotation'], [/%%.*(? { const suggestions = [ { label: 'loop', kind: monacoEditor.languages.CompletionItemKind.Snippet, insertText: ['loop ${1:Loop text}', '\t$0', 'end'].join('\n'), insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, documentation: 'Sequence Diagram Loops' }, { label: 'alt', kind: monacoEditor.languages.CompletionItemKind.Snippet, insertText: ['alt ${1:Describing text}', '\t$0', 'else', '\t', 'end'].join('\n'), insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, documentation: 'Alternative Path' }, { label: 'opt', kind: monacoEditor.languages.CompletionItemKind.Snippet, insertText: ['opt ${1:Describing text}', '\t$0', 'end'].join('\n'), insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, documentation: 'Optional Path' }, { label: 'par', kind: monacoEditor.languages.CompletionItemKind.Snippet, insertText: [ 'par ${1:[Action 1]}', '\t$0', 'and ${2:[Action 2]}', '\t', 'and ${3:[Action 3]}', '\t', 'end' ].join('\n'), insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, documentation: 'Parallel Actions' }, { label: 'rect', kind: monacoEditor.languages.CompletionItemKind.Snippet, insertText: ['rect ${1:rgb(0, 255, 0)}', '\t$0', 'end'].join('\n'), insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, documentation: 'Background Color' }, { label: 'class', kind: monacoEditor.languages.CompletionItemKind.Snippet, insertText: ['class ${1:className} {', '\t$0', '}'].join('\n'), insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, documentation: 'Class' }, ...[...new Set([...orientations, ...typeKeywords, ...blockKeywords, ...keywords])].map( (keyword) => ({ label: keyword, kind: monacoEditor.languages.CompletionItemKind.Keyword, insertText: keyword }) ) ]; return { suggestions: suggestions }; } }); monacoEditor.languages.setLanguageConfiguration('mermaid', { autoClosingPairs: [ { open: '(', close: ')' }, { open: '{', close: '}' }, { open: '[', close: ']' } ], brackets: [ ['(', ')'], ['{', '}'], ['[', ']'] ] }); };