From dec0c580922ec5351c3f288217b657eca831c155 Mon Sep 17 00:00:00 2001 From: Yash Singh Date: Sat, 14 Aug 2021 21:49:17 -0700 Subject: [PATCH 01/36] More arrows --- src/lib/components/editor/util.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index b5e734be..88c14edf 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -20,7 +20,7 @@ export const initEditor = (monacoEditor): void => { 'journey' ], keywords: ['participant', 'as'], - arrows: ['---', '===', '-->', '==>', '->>', '->'], + arrows: ['---', '===', '-->', '==>', '->>', '-->>', '->', '-)', '--)', '-x', '--x'], tokenizer: { root: [ [/[{}]/, 'delimiter.bracket'], From b4814d7b138860811c3abd144c03e0b6802bd8a2 Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sun, 15 Aug 2021 17:36:26 -0700 Subject: [PATCH 02/36] Fix for + and - --- cypress/snapshots.js | 2 +- src/lib/components/editor/util.ts | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/cypress/snapshots.js b/cypress/snapshots.js index 0162dd5c..5422b1e8 100644 --- a/cypress/snapshots.js +++ b/cypress/snapshots.js @@ -7,7 +7,7 @@ module.exports = { "1": "{\"code\":\"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":false}" } }, - "__version": "8.2.0", + "__version": "8.1.0", "Auto sync tests": { "should dim diagram when code is edited": { "1": "{\"code\":\"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\\n C --> Test\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":false,\"updateDiagram\":false}" diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 88c14edf..9b158bf0 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -20,12 +20,15 @@ export const initEditor = (monacoEditor): void => { 'journey' ], keywords: ['participant', 'as'], - arrows: ['---', '===', '-->', '==>', '->>', '-->>', '->', '-)', '--)', '-x', '--x'], + arrows: ['---', '===', '-->>', '-->', '==>', '->>', '->', '--)', '-)', '--x', '-x'].reduce( + (accumalator, arrow) => accumalator.concat(arrow, arrow + '+', arrow + '-'), + [] + ), tokenizer: { root: [ [/[{}]/, 'delimiter.bracket'], [/[a-z_$][\w$]*/, { cases: { '@typeKeywords': 'keyword', '@keywords': 'keyword' } }], - [/[-=>ox]+/, { cases: { '@arrows': 'transition' } }], + [/[-+=>ox]+/, { cases: { '@arrows': 'transition' } }], [/[[{(}]+.+?[)\]}]+/, 'string'], [/".*"/, 'string'] ] From b73afb400beddb1c1cf978da98d7ee2db555e2a8 Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Mon, 16 Aug 2021 17:31:21 -0700 Subject: [PATCH 03/36] Info diagrams --- src/lib/components/editor/util.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 9b158bf0..3ddc4e7b 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -17,9 +17,10 @@ export const initEditor = (monacoEditor): void => { 'flowchart', 'gantt', 'gitGraph', - 'journey' + 'journey', + 'info' ], - keywords: ['participant', 'as'], + keywords: ['participant', 'as', 'showInfo'], arrows: ['---', '===', '-->>', '-->', '==>', '->>', '->', '--)', '-)', '--x', '-x'].reduce( (accumalator, arrow) => accumalator.concat(arrow, arrow + '+', arrow + '-'), [] From 3b63e9a9aa8b9aa6c71875acb2e92e50f2dc4b0b Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Mon, 16 Aug 2021 17:57:54 -0700 Subject: [PATCH 04/36] Finalize sequence diagrams --- src/lib/components/editor/util.ts | 59 ++++++++++++++++++++++--------- 1 file changed, 42 insertions(+), 17 deletions(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 3ddc4e7b..a247229c 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -5,7 +5,7 @@ export const initEditor = (monacoEditor): void => { monacoEditor.languages.register({ id: 'mermaid' }); - // Register a tokens provider for the language + // Register a tokens provider for the mermaid language monacoEditor.languages.setMonarchTokensProvider('mermaid', { typeKeywords: [ 'graph', @@ -20,7 +20,7 @@ export const initEditor = (monacoEditor): void => { 'journey', 'info' ], - keywords: ['participant', 'as', 'showInfo'], + keywords: ['participant', 'as', 'showInfo', 'autonumber'], arrows: ['---', '===', '-->>', '-->', '==>', '->>', '->', '--)', '-)', '--x', '-x'].reduce( (accumalator, arrow) => accumalator.concat(arrow, arrow + '+', arrow + '-'), [] @@ -52,27 +52,52 @@ export const initEditor = (monacoEditor): void => { ] }); - // Register a completion item provider for the new language + // Register a completion item provider for the mermaid language monacoEditor.languages.registerCompletionItemProvider('mermaid', { provideCompletionItems: () => { const suggestions = [ { - label: 'simpleText', - kind: monacoEditor.languages.CompletionItemKind.Text, - insertText: 'simpleText' - }, - { - label: 'testing', - kind: monacoEditor.languages.CompletionItemKind.Keyword, - insertText: 'testing(${1:condition})', - insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet - }, - { - label: 'ifelse', + label: 'loop', kind: monacoEditor.languages.CompletionItemKind.Snippet, - insertText: ['if (${1:condition}) {', '\t$0', '} else {', '\t', '}'].join('\n'), + insertText: ['loop ${1:Loop text}', '\t$0', 'end'].join('\n'), insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, - documentation: 'If-Else Statement' + 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' } ]; return { suggestions: suggestions }; From 76a70be939315049960b0696cce3a86a31cc93ab Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Tue, 17 Aug 2021 16:54:23 -0700 Subject: [PATCH 05/36] Proper theme name --- src/lib/components/editor/editor.svelte | 2 +- src/lib/components/editor/util.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/editor/editor.svelte b/src/lib/components/editor/editor.svelte index 07ecbe3e..7d2e7916 100644 --- a/src/lib/components/editor/editor.svelte +++ b/src/lib/components/editor/editor.svelte @@ -18,7 +18,7 @@ minimap: { enabled: false }, - theme: 'myCoolTheme', + theme: 'mermaidTheme', 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 a247229c..d1d5988e 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -40,7 +40,7 @@ export const initEditor = (monacoEditor): void => { ] }); - monacoEditor.editor.defineTheme('myCoolTheme', { + monacoEditor.editor.defineTheme('mermaidTheme', { base: 'vs', inherit: false, rules: [ From ca07ed764d64f440b8243afdbfe0d16c75261a49 Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Tue, 17 Aug 2021 17:01:08 -0700 Subject: [PATCH 06/36] HTML Entities --- src/lib/components/editor/util.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index d1d5988e..847ad4b5 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -31,7 +31,8 @@ export const initEditor = (monacoEditor): void => { [/[a-z_$][\w$]*/, { cases: { '@typeKeywords': 'keyword', '@keywords': 'keyword' } }], [/[-+=>ox]+/, { cases: { '@arrows': 'transition' } }], [/[[{(}]+.+?[)\]}]+/, 'string'], - [/".*"/, 'string'] + [/".*"/, 'string'], + [/#(\d|[a-zA-Z])*;/, 'html.entity'] ] }, whitespace: [ @@ -48,7 +49,8 @@ export const initEditor = (monacoEditor): void => { { token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' }, { token: 'string', foreground: 'AA8500' }, { token: 'transition', foreground: '008800', fontStyle: 'bold' }, - { token: 'delimiter.bracket', foreground: '000000', fontStyle: 'bold' } + { token: 'delimiter.bracket', foreground: '000000', fontStyle: 'bold' }, + { token: 'html.entity', foreground: 'f5b436' } ] }); From ae2880c8a2d04f4120704cc5dd6f225eda44c9dd Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Tue, 17 Aug 2021 17:11:22 -0700 Subject: [PATCH 07/36] Asymmetric, rhombus, hexagonal nodes --- src/lib/components/editor/util.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 847ad4b5..eb85b3a2 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -27,10 +27,10 @@ export const initEditor = (monacoEditor): void => { ), tokenizer: { root: [ - [/[{}]/, 'delimiter.bracket'], [/[a-z_$][\w$]*/, { cases: { '@typeKeywords': 'keyword', '@keywords': 'keyword' } }], + [/[[{(}>]+.+?[)\]}]+/, 'string'], [/[-+=>ox]+/, { cases: { '@arrows': 'transition' } }], - [/[[{(}]+.+?[)\]}]+/, 'string'], + [/[{}]/, 'delimiter.bracket'], [/".*"/, 'string'], [/#(\d|[a-zA-Z])*;/, 'html.entity'] ] From ff48d906aec2f80f2a4c4536dab5bc1755e62c2a Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Tue, 17 Aug 2021 17:36:45 -0700 Subject: [PATCH 08/36] Non-bold non-type-keywords and orientations --- src/lib/components/editor/util.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index eb85b3a2..6ee8b14e 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -21,13 +21,15 @@ export const initEditor = (monacoEditor): void => { 'info' ], keywords: ['participant', 'as', 'showInfo', 'autonumber'], + orientation: ['TB', 'TD', 'BT', 'RL', 'LR'], arrows: ['---', '===', '-->>', '-->', '==>', '->>', '->', '--)', '-)', '--x', '-x'].reduce( (accumalator, arrow) => accumalator.concat(arrow, arrow + '+', arrow + '-'), [] ), tokenizer: { root: [ - [/[a-z_$][\w$]*/, { cases: { '@typeKeywords': 'keyword', '@keywords': 'keyword' } }], + [/[a-z_$][\w$]*/, { cases: { '@typeKeywords': 'typeKeyword', '@keywords': 'keyword' } }], + [/[A-Z$][\w$]*/, { cases: { '@orientation': 'keyword' } }], [/[[{(}>]+.+?[)\]}]+/, 'string'], [/[-+=>ox]+/, { cases: { '@arrows': 'transition' } }], [/[{}]/, 'delimiter.bracket'], @@ -45,7 +47,8 @@ export const initEditor = (monacoEditor): void => { base: 'vs', inherit: false, rules: [ - { token: 'keyword', foreground: '880000', fontStyle: 'bold' }, + { token: 'typeKeyword', foreground: '880000', fontStyle: 'bold' }, + { token: 'keyword', foreground: '880000' }, { token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' }, { token: 'string', foreground: 'AA8500' }, { token: 'transition', foreground: '008800', fontStyle: 'bold' }, From 7983b5d94cf34f71a2d063d64e363f044b70f4dd Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Tue, 17 Aug 2021 17:43:20 -0700 Subject: [PATCH 09/36] Different color for keywords --- src/lib/components/editor/util.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 6ee8b14e..3a21ed17 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -47,8 +47,8 @@ export const initEditor = (monacoEditor): void => { base: 'vs', inherit: false, rules: [ - { token: 'typeKeyword', foreground: '880000', fontStyle: 'bold' }, - { token: 'keyword', foreground: '880000' }, + { token: 'typeKeyword', foreground: '9650c8', fontStyle: 'bold' }, + { token: 'keyword', foreground: '649696' }, { token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' }, { token: 'string', foreground: 'AA8500' }, { token: 'transition', foreground: '008800', fontStyle: 'bold' }, From c5348e9a81ac8a9d6bf51ce45fb953b5f6bc391c Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Tue, 17 Aug 2021 17:44:11 -0700 Subject: [PATCH 10/36] Add more code block keywords --- src/lib/components/editor/util.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 3a21ed17..44ad20d2 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -20,7 +20,18 @@ export const initEditor = (monacoEditor): void => { 'journey', 'info' ], - keywords: ['participant', 'as', 'showInfo', 'autonumber'], + keywords: [ + 'participant', + 'as', + 'showInfo', + 'autonumber', + 'rect', + 'opt', + 'alt', + 'loop', + 'else', + 'end' + ], orientation: ['TB', 'TD', 'BT', 'RL', 'LR'], arrows: ['---', '===', '-->>', '-->', '==>', '->>', '->', '--)', '-)', '--x', '-x'].reduce( (accumalator, arrow) => accumalator.concat(arrow, arrow + '+', arrow + '-'), From 3a4c4375361ee65e10675e378cbe5cacdcc948b8 Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sat, 21 Aug 2021 19:21:24 -0700 Subject: [PATCH 11/36] Auto closing brackets --- src/lib/components/editor/editor.svelte | 3 +- src/lib/components/editor/util.ts | 44 ++++++++++++++++++++----- 2 files changed, 38 insertions(+), 9 deletions(-) diff --git a/src/lib/components/editor/editor.svelte b/src/lib/components/editor/editor.svelte index 7d2e7916..25b28b27 100644 --- a/src/lib/components/editor/editor.svelte +++ b/src/lib/components/editor/editor.svelte @@ -19,7 +19,8 @@ enabled: false }, theme: 'mermaidTheme', - overviewRulerLanes: 0 + overviewRulerLanes: 0, + autoClosingBrackets: 'always' }; export let errorMarkers: monaco.editor.IMarkerData[] = []; let oldText = text; diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 44ad20d2..3c4eb00d 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -8,6 +8,7 @@ export const initEditor = (monacoEditor): void => { // Register a tokens provider for the mermaid language monacoEditor.languages.setMonarchTokensProvider('mermaid', { typeKeywords: [ + 'flowchart', 'graph', 'stateDiagram', 'sequenceDiagram', @@ -20,17 +21,21 @@ export const initEditor = (monacoEditor): void => { 'journey', 'info' ], + blockKeywords: ['subgraph', 'rect', 'opt', 'alt', 'loop', 'else', 'end'], keywords: [ 'participant', 'as', 'showInfo', 'autonumber', - 'rect', - 'opt', - 'alt', - 'loop', - 'else', - 'end' + 'rgba', + 'rgb', + 'hsla', + 'hsl', + 'linkStyle', + 'style', + 'classDef', + 'class', + 'direction' ], orientation: ['TB', 'TD', 'BT', 'RL', 'LR'], arrows: ['---', '===', '-->>', '-->', '==>', '->>', '->', '--)', '-)', '--x', '-x'].reduce( @@ -45,7 +50,8 @@ export const initEditor = (monacoEditor): void => { [/[-+=>ox]+/, { cases: { '@arrows': 'transition' } }], [/[{}]/, 'delimiter.bracket'], [/".*"/, 'string'], - [/#(\d|[a-zA-Z])*;/, 'html.entity'] + [/#(\d|[a-zA-Z])*;/, 'html.entity/hex-color-code'], + [/#(?:[0-9a-fA-F]{3}){1,2}/, 'html.entity/hex-color-code'] ] }, whitespace: [ @@ -64,7 +70,7 @@ export const initEditor = (monacoEditor): void => { { token: 'string', foreground: 'AA8500' }, { token: 'transition', foreground: '008800', fontStyle: 'bold' }, { token: 'delimiter.bracket', foreground: '000000', fontStyle: 'bold' }, - { token: 'html.entity', foreground: 'f5b436' } + { token: 'html.entity/hex-color-code', foreground: 'f5b436' } ] }); @@ -119,4 +125,26 @@ export const initEditor = (monacoEditor): void => { return { suggestions: suggestions }; } }); + + monacoEditor.languages.setLanguageConfiguration('mermaid', { + autoClosingPairs: [ + { + open: '(', + close: ')' + }, + { + open: '{', + close: '}' + }, + { + open: '[', + close: ']' + } + ], + brackets: [ + ['(', ')'], + ['{', '}'], + ['[', ']'] + ] + }); }; From 3b5af96ab03532e2a1fd8e5f85e4336ce8e3b36f Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sat, 21 Aug 2021 19:38:03 -0700 Subject: [PATCH 12/36] Keyword snippets --- src/lib/components/editor/util.ts | 74 ++++++++++++++++++------------- 1 file changed, 42 insertions(+), 32 deletions(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 3c4eb00d..e4c5eb52 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -5,39 +5,44 @@ export const initEditor = (monacoEditor): void => { monacoEditor.languages.register({ id: 'mermaid' }); + const orientations = ['TB', 'TD', 'BT', 'RL', 'LR']; + const typeKeywords = [ + 'flowchart', + 'graph', + 'stateDiagram', + 'sequenceDiagram', + 'classDiagram', + 'pie', + 'erDiagram', + 'flowchart', + 'gantt', + 'gitGraph', + 'journey', + 'info' + ]; + const blockKeywords = ['subgraph', 'rect', 'opt', 'alt', 'loop', 'else', 'end']; + const keywords = [ + 'participant', + 'as', + 'showInfo', + 'autonumber', + 'rgba', + 'rgb', + 'hsla', + 'hsl', + 'linkStyle', + 'style', + 'classDef', + 'class', + 'direction' + ]; + // Register a tokens provider for the mermaid language monacoEditor.languages.setMonarchTokensProvider('mermaid', { - typeKeywords: [ - 'flowchart', - 'graph', - 'stateDiagram', - 'sequenceDiagram', - 'classDiagram', - 'pie', - 'erDiagram', - 'flowchart', - 'gantt', - 'gitGraph', - 'journey', - 'info' - ], - blockKeywords: ['subgraph', 'rect', 'opt', 'alt', 'loop', 'else', 'end'], - keywords: [ - 'participant', - 'as', - 'showInfo', - 'autonumber', - 'rgba', - 'rgb', - 'hsla', - 'hsl', - 'linkStyle', - 'style', - 'classDef', - 'class', - 'direction' - ], - orientation: ['TB', 'TD', 'BT', 'RL', 'LR'], + typeKeywords, + blockKeywords, + keywords, + orientation: orientations, arrows: ['---', '===', '-->>', '-->', '==>', '->>', '->', '--)', '-)', '--x', '-x'].reduce( (accumalator, arrow) => accumalator.concat(arrow, arrow + '+', arrow + '-'), [] @@ -120,7 +125,12 @@ export const initEditor = (monacoEditor): void => { insertText: ['rect ${1:rgb(0, 255, 0)}', '\t$0', 'end'].join('\n'), insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, documentation: 'Background Color' - } + }, + ...[...orientations, ...typeKeywords, ...blockKeywords, ...keywords].map((keyword) => ({ + label: keyword, + kind: monacoEditor.languages.CompletionItemKind.Keyword, + insertText: keyword + })) ]; return { suggestions: suggestions }; } From 7ef1f1325be2c5e64679cdde3a1d39289d6dd493 Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sat, 21 Aug 2021 20:30:01 -0700 Subject: [PATCH 13/36] finally...done...with...regexp --- src/lib/components/editor/util.ts | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index e4c5eb52..f150ef2a 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -20,7 +20,7 @@ export const initEditor = (monacoEditor): void => { 'journey', 'info' ]; - const blockKeywords = ['subgraph', 'rect', 'opt', 'alt', 'loop', 'else', 'end']; + const blockKeywords = ['subgraph', 'rect', 'opt', 'alt', 'par', 'and', 'loop', 'else', 'end']; const keywords = [ 'participant', 'as', @@ -34,7 +34,9 @@ export const initEditor = (monacoEditor): void => { 'style', 'classDef', 'class', - 'direction' + 'direction', + 'activate', + 'deactivate' ]; // Register a tokens provider for the mermaid language @@ -43,17 +45,23 @@ export const initEditor = (monacoEditor): void => { blockKeywords, keywords, orientation: orientations, - arrows: ['---', '===', '-->>', '-->', '==>', '->>', '->', '--)', '-)', '--x', '-x'].reduce( + 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' } }], + [/[ox<]?(-{2,}|-+\.+-+|={2,})[ox>]?/, 'transition'], + [/[-+>]+/, { cases: { '@eatingSequenceArrows': 'transition' } }], [/[a-z_$][\w$]*/, { cases: { '@typeKeywords': 'typeKeyword', '@keywords': 'keyword' } }], [/[A-Z$][\w$]*/, { cases: { '@orientation': 'keyword' } }], [/[[{(}>]+.+?[)\]}]+/, 'string'], - [/[-+=>ox]+/, { cases: { '@arrows': 'transition' } }], - [/[{}]/, 'delimiter.bracket'], + [/[{}&]/, 'delimiter.bracket'], [/".*"/, 'string'], [/#(\d|[a-zA-Z])*;/, 'html.entity/hex-color-code'], [/#(?:[0-9a-fA-F]{3}){1,2}/, 'html.entity/hex-color-code'] From ea0e8b9883d9a3b3189fc8f52c53fb0cb7640697 Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sat, 21 Aug 2021 20:55:50 -0700 Subject: [PATCH 14/36] class, annotations, callbacks, classes, and much more --- src/lib/components/editor/util.ts | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index f150ef2a..35d73c27 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -36,7 +36,13 @@ export const initEditor = (monacoEditor): void => { 'class', 'direction', 'activate', - 'deactivate' + 'deactivate', + 'cssClass', + 'link', + 'callback', + 'click', + 'href', + 'call' ]; // Register a tokens provider for the mermaid language @@ -56,15 +62,20 @@ export const initEditor = (monacoEditor): void => { 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$]*/, { cases: { '@typeKeywords': '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'] + [/#(?:[0-9a-fA-F]{3}){1,2}/, 'html.entity/hex-color-code'], + [/<<.+>>/, 'annotation'] ] }, whitespace: [ @@ -83,7 +94,8 @@ export const initEditor = (monacoEditor): void => { { token: 'string', foreground: 'AA8500' }, { token: 'transition', foreground: '008800', fontStyle: 'bold' }, { token: 'delimiter.bracket', foreground: '000000', fontStyle: 'bold' }, - { token: 'html.entity/hex-color-code', foreground: 'f5b436' } + { token: 'html.entity/hex-color-code', foreground: 'f5b436' }, + { token: 'annotation', foreground: '4b4b96' } ] }); From 7a04384b7d74e9f1c23b52dbabaeac7c3569c8fc Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sat, 21 Aug 2021 21:00:06 -0700 Subject: [PATCH 15/36] class is a block and its snippet --- src/lib/components/editor/util.ts | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 35d73c27..ddc5d475 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -20,7 +20,18 @@ export const initEditor = (monacoEditor): void => { 'journey', 'info' ]; - const blockKeywords = ['subgraph', 'rect', 'opt', 'alt', 'par', 'and', 'loop', 'else', 'end']; + const blockKeywords = [ + 'subgraph', + 'rect', + 'opt', + 'class', + 'alt', + 'par', + 'and', + 'loop', + 'else', + 'end' + ]; const keywords = [ 'participant', 'as', @@ -33,7 +44,6 @@ export const initEditor = (monacoEditor): void => { 'linkStyle', 'style', 'classDef', - 'class', 'direction', 'activate', 'deactivate', @@ -146,6 +156,13 @@ export const initEditor = (monacoEditor): void => { 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' + }, ...[...orientations, ...typeKeywords, ...blockKeywords, ...keywords].map((keyword) => ({ label: keyword, kind: monacoEditor.languages.CompletionItemKind.Keyword, From db5ce6b74be9aa0953920f72dc3868238adea4fb Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sun, 22 Aug 2021 09:45:46 -0700 Subject: [PATCH 16/36] block keyword highlighting and class is also a normal keyword --- src/lib/components/editor/util.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index ddc5d475..bdd764e5 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -51,6 +51,7 @@ export const initEditor = (monacoEditor): void => { 'link', 'callback', 'click', + 'class', 'href', 'call' ]; @@ -77,7 +78,16 @@ export const initEditor = (monacoEditor): void => { [/[ox<]?(-{2,}|-+\.+-+|={2,})[ox>]?/, 'transition'], [/[-+>]+/, { cases: { '@eatingSequenceArrows': 'transition' } }], [':::', 'transition'], - [/[a-z_$][\w$]*/, { cases: { '@typeKeywords': 'typeKeyword', '@keywords': 'keyword' } }], + [ + /[a-z_$][\w$]*/, + { + cases: { + '@typeKeywords': 'typeKeyword', + '@blockKeywords': 'typeKeyword', + '@keywords': 'keyword' + } + } + ], [/[A-Z$][\w$]*/, { cases: { '@orientation': 'keyword' } }], [/\[\[(fork|join|choice)\]\]/, 'annotation'], [/[[{(}>]+.+?[)\]}]+/, 'string'], From b60718a18ebe3efe14b38e7e728ebf11265c8ab9 Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sun, 22 Aug 2021 09:50:35 -0700 Subject: [PATCH 17/36] Prevent dup keywords --- src/lib/components/editor/util.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index bdd764e5..5a8498bb 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -173,11 +173,13 @@ export const initEditor = (monacoEditor): void => { insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, documentation: 'Class' }, - ...[...orientations, ...typeKeywords, ...blockKeywords, ...keywords].map((keyword) => ({ - label: keyword, - kind: monacoEditor.languages.CompletionItemKind.Keyword, - insertText: keyword - })) + ...[...new Set([...orientations, ...typeKeywords, ...blockKeywords, ...keywords])].map( + (keyword) => ({ + label: keyword, + kind: monacoEditor.languages.CompletionItemKind.Keyword, + insertText: keyword + }) + ) ]; return { suggestions: suggestions }; } From bcb8031c8f9be0864eeb5a3e8566bf347dd6a2ae Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sun, 22 Aug 2021 09:52:31 -0700 Subject: [PATCH 18/36] style comments --- src/lib/components/editor/util.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 5a8498bb..e8c831e4 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -95,13 +95,11 @@ export const initEditor = (monacoEditor): void => { [/".*"/, 'string'], [/#(\d|[a-zA-Z])*;/, 'html.entity/hex-color-code'], [/#(?:[0-9a-fA-F]{3}){1,2}/, 'html.entity/hex-color-code'], - [/<<.+>>/, 'annotation'] + [/<<.+>>/, 'annotation'], + [/%%.*$/, 'comment'] ] }, - whitespace: [ - [/[ \t\r\n]+/, 'white'], - [/%%.*$/, 'comment'] - ] + whitespace: [[/[ \t\r\n]+/, 'white']] }); monacoEditor.editor.defineTheme('mermaidTheme', { @@ -115,7 +113,8 @@ export const initEditor = (monacoEditor): void => { { token: 'transition', foreground: '008800', fontStyle: 'bold' }, { token: 'delimiter.bracket', foreground: '000000', fontStyle: 'bold' }, { token: 'html.entity/hex-color-code', foreground: 'f5b436' }, - { token: 'annotation', foreground: '4b4b96' } + { token: 'annotation', foreground: '4b4b96' }, + { token: 'comment', foreground: '888c89' } ] }); From 3f843f29bf02a45f970659560481419c528d6bfb Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sun, 22 Aug 2021 10:06:37 -0700 Subject: [PATCH 19/36] directives arent comments --- src/lib/components/editor/util.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index e8c831e4..ea2825dd 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -96,7 +96,7 @@ export const initEditor = (monacoEditor): void => { [/#(\d|[a-zA-Z])*;/, 'html.entity/hex-color-code'], [/#(?:[0-9a-fA-F]{3}){1,2}/, 'html.entity/hex-color-code'], [/<<.+>>/, 'annotation'], - [/%%.*$/, 'comment'] + [/%%.*(? Date: Sun, 22 Aug 2021 10:57:20 -0700 Subject: [PATCH 20/36] stateDiagram-v2 --- src/lib/components/editor/util.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index ea2825dd..9409e89c 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -9,6 +9,7 @@ export const initEditor = (monacoEditor): void => { const typeKeywords = [ 'flowchart', 'graph', + 'stateDiagram-v2', 'stateDiagram', 'sequenceDiagram', 'classDiagram', @@ -79,7 +80,7 @@ export const initEditor = (monacoEditor): void => { [/[-+>]+/, { cases: { '@eatingSequenceArrows': 'transition' } }], [':::', 'transition'], [ - /[a-z_$][\w$]*/, + /[a-z_$][\w$]*((?<=stateDiagram)-v2)?/, { cases: { '@typeKeywords': 'typeKeyword', From bfa35ca86e58117dc62d34aaa2456f11df22d64c Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sun, 22 Aug 2021 11:00:52 -0700 Subject: [PATCH 21/36] States --- src/lib/components/editor/util.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 9409e89c..18e85e4f 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -54,7 +54,8 @@ export const initEditor = (monacoEditor): void => { 'click', 'class', 'href', - 'call' + 'call', + 'state' ]; // Register a tokens provider for the mermaid language @@ -173,6 +174,13 @@ export const initEditor = (monacoEditor): void => { insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, documentation: 'Class' }, + { + label: 'state', + kind: monacoEditor.languages.CompletionItemKind.Snippet, + insertText: ['state ${1:stateName} {', '\t$0', '}'].join('\n'), + insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, + documentation: 'State' + }, ...[...new Set([...orientations, ...typeKeywords, ...blockKeywords, ...keywords])].map( (keyword) => ({ label: keyword, From d7e7121666a4703f993065d974ae3bb003962bcc Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sun, 22 Aug 2021 11:01:43 -0700 Subject: [PATCH 22/36] Allow scroll behind end to prevent suggestion cuts --- src/lib/components/editor/editor.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/components/editor/editor.svelte b/src/lib/components/editor/editor.svelte index 25b28b27..fd86bc54 100644 --- a/src/lib/components/editor/editor.svelte +++ b/src/lib/components/editor/editor.svelte @@ -14,7 +14,6 @@ export let editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = { value: text, language: language, - scrollBeyondLastLine: false, minimap: { enabled: false }, From 0dd010336a494a2426176808b2caaab5da6ee048 Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sun, 22 Aug 2021 11:04:14 -0700 Subject: [PATCH 23/36] States are blocks and notes --- src/lib/components/editor/util.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 18e85e4f..5a7732b5 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -31,7 +31,8 @@ export const initEditor = (monacoEditor): void => { 'and', 'loop', 'else', - 'end' + 'end', + 'state' ]; const keywords = [ 'participant', @@ -55,7 +56,9 @@ export const initEditor = (monacoEditor): void => { 'class', 'href', 'call', - 'state' + 'state', + 'note', + 'Note' ]; // Register a tokens provider for the mermaid language @@ -181,6 +184,13 @@ export const initEditor = (monacoEditor): void => { insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, documentation: 'State' }, + { + label: 'note', + kind: monacoEditor.languages.CompletionItemKind.Snippet, + insertText: ['note ${1:right of State1}', '\t$0', 'end note'].join('\n'), + insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, + documentation: 'State' + }, ...[...new Set([...orientations, ...typeKeywords, ...blockKeywords, ...keywords])].map( (keyword) => ({ label: keyword, From 6868b0d761e4fb445c361c5e6dba1fcfe2295355 Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sun, 22 Aug 2021 11:11:28 -0700 Subject: [PATCH 24/36] Entity relationship diagrams --- src/lib/components/editor/util.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 5a7732b5..96148b1f 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -80,6 +80,7 @@ export const initEditor = (monacoEditor): void => { [/-{1,2}\)|-{1,2}>>/, { cases: { '@noEatingSequenceArrows': 'transition' } }], [/\*--\*?|--\*/, 'transition'], [/(<\|?)(\.{2}|-{2})(\|?>)?|(\.{2}|-{2})(\|?>)/, 'transition'], + [/(\|o|\|\||}o|}\|)(-{2}|\.{2})(o\||\|\||o\{|\|\{)/, 'transition'], [/[ox<]?(-{2,}|-+\.+-+|={2,})[ox>]?/, 'transition'], [/[-+>]+/, { cases: { '@eatingSequenceArrows': 'transition' } }], [':::', 'transition'], @@ -95,7 +96,7 @@ export const initEditor = (monacoEditor): void => { ], [/[A-Z$][\w$]*/, { cases: { '@orientation': 'keyword' } }], [/\[\[(fork|join|choice)\]\]/, 'annotation'], - [/[[{(}>]+.+?[)\]}]+/, 'string'], + [/[[{(}>|]+.+?[)\]}|]+/, 'string'], [/[{}&]/, 'delimiter.bracket'], [/".*"/, 'string'], [/#(\d|[a-zA-Z])*;/, 'html.entity/hex-color-code'], From 4ae314c5c0eca7a1c919e78b94151faa153b66ef Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sun, 22 Aug 2021 11:14:11 -0700 Subject: [PATCH 25/36] User-journey diagrams --- src/lib/components/editor/util.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 96148b1f..2860cdf6 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -32,7 +32,8 @@ export const initEditor = (monacoEditor): void => { 'loop', 'else', 'end', - 'state' + 'state', + 'section' ]; const keywords = [ 'participant', @@ -58,7 +59,8 @@ export const initEditor = (monacoEditor): void => { 'call', 'state', 'note', - 'Note' + 'Note', + 'title' ]; // Register a tokens provider for the mermaid language @@ -192,6 +194,13 @@ export const initEditor = (monacoEditor): void => { insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, documentation: 'State' }, + { + label: 'section', + kind: monacoEditor.languages.CompletionItemKind.Snippet, + insertText: ['section ${1:Go to work}', '\t$0'].join('\n'), + insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, + documentation: 'User-journey Section' + }, ...[...new Set([...orientations, ...typeKeywords, ...blockKeywords, ...keywords])].map( (keyword) => ({ label: keyword, From d6d987e962fbe4abf10d91c7125bee7225a5762c Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sun, 22 Aug 2021 11:17:20 -0700 Subject: [PATCH 26/36] Ganntt diagrams --- src/lib/components/editor/util.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 2860cdf6..a65c4ad7 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -60,7 +60,11 @@ export const initEditor = (monacoEditor): void => { 'state', 'note', 'Note', - 'title' + 'title', + 'excludes', + 'dateFormat', + 'axisFormat', + 'todayMarker' ]; // Register a tokens provider for the mermaid language From 536db58698b11790de68f8eefc3cf9ff7418a74a Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sun, 22 Aug 2021 11:45:07 -0700 Subject: [PATCH 27/36] Pie charts --- src/lib/components/editor/util.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index a65c4ad7..f1c53e2d 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -64,7 +64,8 @@ export const initEditor = (monacoEditor): void => { 'excludes', 'dateFormat', 'axisFormat', - 'todayMarker' + 'todayMarker', + 'showData' ]; // Register a tokens provider for the mermaid language From c8e217d0c9ca3bf8ea8bcd3a7cfb0f0072c6e9b2 Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sun, 22 Aug 2021 11:47:29 -0700 Subject: [PATCH 28/36] Git graphs --- src/lib/components/editor/util.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index f1c53e2d..013fbc62 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -65,7 +65,13 @@ export const initEditor = (monacoEditor): void => { 'dateFormat', 'axisFormat', 'todayMarker', - 'showData' + 'showData', + 'options', + 'commit', + 'branch', + 'merge', + 'reset', + 'checkout' ]; // Register a tokens provider for the mermaid language From b34942355f94602ac9d50f737e6f29cb0b691a64 Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sun, 22 Aug 2021 12:54:00 -0700 Subject: [PATCH 29/36] Requirement diagrams --- src/lib/components/editor/util.ts | 41 ++++++++++++++++++++++++++++--- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 013fbc62..f56f3743 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -5,6 +5,15 @@ export const initEditor = (monacoEditor): void => { monacoEditor.languages.register({ id: 'mermaid' }); + const requirementDiagrams = [ + 'requirement', + 'functionalRequirement', + 'interfaceRequirement', + 'performanceRequirement', + 'physicalRequirement', + 'designConstraint' + ]; + const orientations = ['TB', 'TD', 'BT', 'RL', 'LR']; const typeKeywords = [ 'flowchart', @@ -19,7 +28,8 @@ export const initEditor = (monacoEditor): void => { 'gantt', 'gitGraph', 'journey', - 'info' + 'info', + 'requirementDiagram' ]; const blockKeywords = [ 'subgraph', @@ -33,8 +43,9 @@ export const initEditor = (monacoEditor): void => { 'else', 'end', 'state', - 'section' - ]; + 'section', + 'element' + ].concat(requirementDiagrams); const keywords = [ 'participant', 'as', @@ -212,6 +223,30 @@ export const initEditor = (monacoEditor): void => { insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, documentation: 'User-journey Section' }, + { + label: 'element', + kind: monacoEditor.languages.CompletionItemKind.Snippet, + insertText: ['element ${1:test_entity} {', '\t$0', '}'].join('\n'), + insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, + documentation: 'User-journey Section' + }, + ...requirementDiagrams.map((requirementDiagramType) => ({ + label: requirementDiagramType, + kind: monacoEditor.languages.CompletionItemKind.Snippet, + insertText: [ + requirementDiagramType + ' ${1:test_req} {', + '\tid: 1', + '\ttext: the test text.', + '\trisk: high', + '\tverifyMethod: test', + '}' + ].join('\n'), + insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, + documentation: requirementDiagramType + .split(/(?=[A-Z])/) + .map((part) => part[0].toUpperCase() + part.slice(1)) + .join(' ') + })), ...[...new Set([...orientations, ...typeKeywords, ...blockKeywords, ...keywords])].map( (keyword) => ({ label: keyword, From b8d4ada693146544e9ad09620dc1cfff9635f8e6 Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sun, 22 Aug 2021 13:59:11 -0700 Subject: [PATCH 30/36] Directives highlighting --- src/lib/components/editor/editor.svelte | 7 +++---- src/lib/components/editor/util.ts | 3 +++ 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/lib/components/editor/editor.svelte b/src/lib/components/editor/editor.svelte index fd86bc54..065c0247 100644 --- a/src/lib/components/editor/editor.svelte +++ b/src/lib/components/editor/editor.svelte @@ -18,8 +18,7 @@ enabled: false }, theme: 'mermaidTheme', - overviewRulerLanes: 0, - autoClosingBrackets: 'always' + overviewRulerLanes: 0 }; export let errorMarkers: monaco.editor.IMarkerData[] = []; let oldText = text; @@ -39,7 +38,7 @@ let i = 0; while (i++ < 10) { try { - //@ts-ignore : This is a hack to handle a svelte-kit error when importing monaco. + // @ts-ignore : This is a hack to handle a svelte-kit error when importing monaco. Monaco = monaco; return; } catch { @@ -50,7 +49,7 @@ }; onMount(async () => { try { - //@ts-ignore : This is a hack to handle a svelte-kit error when importing monaco. + // @ts-ignore : This is a hack to handle a svelte-kit error when importing monaco. Monaco = monaco; } catch { await loadMonaco(); // Fix https://github.com/mermaid-js/mermaid-live-editor/issues/175 diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index f56f3743..95f09545 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -101,6 +101,8 @@ export const initEditor = (monacoEditor): void => { ), tokenizer: { root: [ + [/%%(?=.*%%$)/, { token: 'string', nextEmbedded: 'json' }], + [/%%$/, { token: 'string', nextEmbedded: '@pop' }], [/-{1,2}\)|-{1,2}>>/, { cases: { '@noEatingSequenceArrows': 'transition' } }], [/\*--\*?|--\*/, 'transition'], [/(<\|?)(\.{2}|-{2})(\|?>)?|(\.{2}|-{2})(\|?>)/, 'transition'], @@ -144,6 +146,7 @@ export const initEditor = (monacoEditor): void => { { token: 'delimiter.bracket', foreground: '000000', fontStyle: 'bold' }, { token: 'html.entity/hex-color-code', foreground: 'f5b436' }, { token: 'annotation', foreground: '4b4b96' }, + { token: 'number', foreground: '4b4b96' }, { token: 'comment', foreground: '888c89' } ] }); From 13581856928550a16ac19557a034ee92649af7e2 Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sun, 22 Aug 2021 14:54:26 -0700 Subject: [PATCH 31/36] Gitgraph options --- src/lib/components/editor/util.ts | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 95f09545..8a3acad1 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -44,7 +44,8 @@ export const initEditor = (monacoEditor): void => { 'end', 'state', 'section', - 'element' + 'element', + 'options' ].concat(requirementDiagrams); const keywords = [ 'participant', @@ -77,7 +78,6 @@ export const initEditor = (monacoEditor): void => { 'axisFormat', 'todayMarker', 'showData', - 'options', 'commit', 'branch', 'merge', @@ -110,6 +110,7 @@ export const initEditor = (monacoEditor): void => { [/[ox<]?(-{2,}|-+\.+-+|={2,})[ox>]?/, 'transition'], [/[-+>]+/, { cases: { '@eatingSequenceArrows': 'transition' } }], [':::', 'transition'], + ['option(?=s)', { token: 'typeKeyword', next: 'optionsGitGraph' }], [ /[a-z_$][\w$]*((?<=stateDiagram)-v2)?/, { @@ -129,6 +130,10 @@ export const initEditor = (monacoEditor): void => { [/#(?:[0-9a-fA-F]{3}){1,2}/, 'html.entity/hex-color-code'], [/<<.+>>/, 'annotation'], [/%%.*(? { insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, documentation: 'User-journey Section' }, + { + label: 'options', + kind: monacoEditor.languages.CompletionItemKind.Snippet, + insertText: ['options', '{', ' $0', '}', 'end'].join('\n'), + insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, + documentation: 'Git Graph Options' + }, ...requirementDiagrams.map((requirementDiagramType) => ({ label: requirementDiagramType, kind: monacoEditor.languages.CompletionItemKind.Snippet, From a49819e12086f0fa1ef2dd246138f3e365bbb13b Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sun, 29 Aug 2021 11:56:49 -0700 Subject: [PATCH 32/36] Refactor syntax highlighting --- src/lib/components/editor/util.ts | 410 ++++++++++++++++++++++-------- 1 file changed, 308 insertions(+), 102 deletions(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 8a3acad1..64e04b1b 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -14,83 +14,125 @@ export const initEditor = (monacoEditor): void => { 'designConstraint' ]; - const orientations = ['TB', 'TD', 'BT', 'RL', 'LR']; - const typeKeywords = [ - 'flowchart', - 'graph', - 'stateDiagram-v2', - 'stateDiagram', - 'sequenceDiagram', - 'classDiagram', - 'pie', - 'erDiagram', - 'flowchart', - 'gantt', - 'gitGraph', - 'journey', - 'info', - 'requirementDiagram' - ]; - const blockKeywords = [ - 'subgraph', - 'rect', - 'opt', - 'class', - 'alt', - 'par', - 'and', - 'loop', - 'else', - 'end', - 'state', - 'section', - 'element', - 'options' - ].concat(requirementDiagrams); - const keywords = [ - 'participant', - 'as', - 'showInfo', - 'autonumber', - 'rgba', - 'rgb', - 'hsla', - 'hsl', - 'linkStyle', - 'style', - 'classDef', - 'direction', - 'activate', - 'deactivate', - 'cssClass', - 'link', - 'callback', - 'click', - 'class', - 'href', - 'call', - 'state', - 'note', - 'Note', - 'title', - 'excludes', - 'dateFormat', - 'axisFormat', - 'todayMarker', - 'showData', - 'commit', - 'branch', - 'merge', - 'reset', - 'checkout' - ]; + const keywords: { + [key: string]: { + typeKeywords: string[]; + blockKeywords: string[]; + keywords: string[]; + }; + } = { + flowchart: { + typeKeywords: ['flowchart', 'flowchart-v2', 'graph'], + blockKeywords: ['subgraph', 'end'], + keywords: [ + 'TB', + 'TD', + 'BT', + 'RL', + 'LR', + 'click', + 'call', + 'href', + '_self', + '_blank', + '_parent', + '_top', + 'linkStyle', + 'style', + 'classDef', + 'class', + 'direction', + 'interpolate' + ] + }, + sequenceDiagram: { + typeKeywords: ['sequenceDiagram'], + blockKeywords: ['alt', 'par', 'and', 'loop', 'else', 'end', 'rect', 'opt', 'alt', 'rect'], + keywords: [ + 'participant', + 'as', + 'Note', + 'note', + 'right of', + 'left of', + 'over', + 'activate', + 'deactivate', + 'autonumber', + 'title' + ] + }, + classDiagram: { + typeKeywords: ['classDiagram', 'classDiagram-v2'], + blockKeywords: ['class'], + keywords: [ + 'link', + 'click', + 'callback', + 'call', + 'href', + 'cssClass', + 'direction', + 'TB', + 'BT', + 'RL', + 'LR' + ] + }, + stateDiagram: { + typeKeywords: ['stateDiagram', 'stateDiagram-v2'], + blockKeywords: ['state', 'note', 'end'], + keywords: ['state', 'as', 'hide empty description', 'direction', 'TB', 'BT', 'RL', 'LR'] + }, + erDiagram: { + typeKeywords: ['erDiagram'], + blockKeywords: [], + keywords: [] + }, + journey: { + typeKeywords: ['journey'], + blockKeywords: ['section'], + keywords: ['title'] + }, + info: { + typeKeywords: ['info'], + blockKeywords: [], + keywords: ['showInfo'] + }, + gantt: { + typeKeywords: ['gantt'], + blockKeywords: [], + keywords: ['title', 'dateFormat', 'axisFormat', 'todayMarker', 'section'] + }, + requirementDiagram: { + typeKeywords: ['requirement', 'requirementDiagram'], + blockKeywords: requirementDiagrams.concat('element'), + keywords: [] + }, + gitGraph: { + typeKeywords: ['gitGraph'], + blockKeywords: [], + keywords: ['commit', 'branch', 'merge', 'reset', 'checkout', 'LR', 'BT'] + }, + pie: { + typeKeywords: ['pie'], + blockKeywords: [], + keywords: ['title', 'showData'] + } + }; // Register a tokens provider for the mermaid language monacoEditor.languages.setMonarchTokensProvider('mermaid', { - typeKeywords, - blockKeywords, - keywords, - orientation: orientations, + ...Object.entries(keywords) + .map((entry) => + Object.fromEntries( + Object.entries(entry[1]).map((deepEntry) => [ + entry[0] + deepEntry[0][0].toUpperCase() + deepEntry[0].slice(1), + deepEntry[1] + ]) + ) + ) + .reduce((overallKeywords, nextKeyword) => ({ ...overallKeywords, ...nextKeyword }), {}), noEatingSequenceArrows: ['-)', '--)', '->>', '-->>'].reduce( (accumalator, arrow) => accumalator.concat(arrow, arrow + '+', arrow + '-'), [] @@ -103,37 +145,194 @@ export const initEditor = (monacoEditor): void => { root: [ [/%%(?=.*%%$)/, { token: 'string', nextEmbedded: 'json' }], [/%%$/, { token: 'string', nextEmbedded: '@pop' }], - [/-{1,2}\)|-{1,2}>>/, { cases: { '@noEatingSequenceArrows': 'transition' } }], - [/\*--\*?|--\*/, 'transition'], - [/(<\|?)(\.{2}|-{2})(\|?>)?|(\.{2}|-{2})(\|?>)/, 'transition'], - [/(\|o|\|\||}o|}\|)(-{2}|\.{2})(o\||\|\||o\{|\|\{)/, 'transition'], - [/[ox<]?(-{2,}|-+\.+-+|={2,})[ox>]?/, 'transition'], - [/[-+>]+/, { cases: { '@eatingSequenceArrows': 'transition' } }], - [':::', 'transition'], + [/^\s*gitGraph/m, { token: 'typeKeyword', next: 'gitGraph' }], + [/^\s*info/m, { token: 'typeKeyword', next: 'info' }], + [/^\s*pie/m, { token: 'typeKeyword', next: 'pie' }], + [/^\s*(flowchart|flowchart-v2|graph)/m, { token: 'typeKeyword', next: 'flowchart' }], + [/^\s*sequenceDiagram/, { token: 'typeKeyword', next: 'sequenceDiagram' }], + [/^\s*classDiagram(-v2)?/, { token: 'typeKeyword', next: 'classDiagram' }], + [/^\s*journey/, { token: 'typeKeyword', next: 'journey' }], + [/^\s*gantt/, { token: 'typeKeyword', next: 'gantt' }], + [/^\s*stateDiagram(-v2)?/, { token: 'typeKeyword', next: 'stateDiagram' }], + [/^\s*erDiagram/, { token: 'typeKeyword', next: 'erDiagram' }], + [/^\s*requirement(Diagram)?/, { token: 'typeKeyword', next: 'requirementDiagram' }], + [/%%.*(?|]+.+?[)\]}|]+/, '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'], - [/%%.*(?]+[^\]|[]+?\]+/, 'string'], + [/{+.+?}+/, 'string'], + [/\(+.+?\)+/, 'string'], + [/-\.+->?/, 'transition'], + [/(-[-.])([^-]+?)(-{3,}|-{2,}>|\.-+>)/, ['transition', 'string', 'transition']], + [/(==+)([^=]+?)(={3,}|={2,}>)/, ['transition', 'string', 'transition']], + [/|===+|---+/, 'transition'], + [/:::/, 'transition'], + [/[;&]/, 'delimiter.bracket'], + [/".*?"/, 'string'], + [/%%.*(??>|--?[)x])[+-]?/, 'transition'], + [/(:)([^:\n]*?$)/, ['delimiter.bracket', 'string']], + [/%%.*(?|o)?/, 'transition'], + [/^\s*class\s(?!.*\{)/, 'keyword'], + [ + /[a-zA-Z_$][\w$]*/, + { + cases: { + '@classDiagramBlockKeywords': 'typeKeyword', + '@classDiagramKeywords': 'keyword' + } + } + ], + [/%%.*(?>/, 'annotation'], + [/".*?"/, 'string'], + [/:::/, 'transition'] + ], + journey: [ + [/(title)(.*)/, ['keyword', 'string']], + [/(section)(.*)/, ['typeKeyword', 'string']], + [ + /[a-zA-Z_$][\w$]*/, + { + cases: { + '@journeyBlockKeywords': 'typeKeyword', + '@journeyKeywords': 'keyword' + } + } + ], + [ + /(^\s*.+?)(:)(.*?)(:)(.*?)$/, + ['string', 'delimiter.bracket', 'number', 'delimiter.bracket', null] + ], + [/(^\s*.+?)(:)([^:]*?)$/, ['string', 'delimiter.bracket', null]], + [/%%.*(?>/, 'annotation'], + [/\[\[(fork|join|choice)]]/, 'annotation'], + [ + /[a-zA-Z_$][\w$]*/, + { + cases: { + '@stateDiagramBlockKeywords': 'typeKeyword', + '@stateDiagramKeywords': 'keyword' + } + } + ], + [/".*?"/, 'string'], + [/(:)([^:\n]*?$)/, ['delimiter.bracket', 'string']], + [/%%.*(?/, 'transition'] + ], + stateDiagramNote: [ + [/^\s*end note$/, { token: 'typeKeyword', next: '@pop' }], + [/.*/, 'string'] + ], + erDiagram: [ + [/(\|o|\|\||\}o|\}\|)(--|\.\.)(o\||\|\||o\{|\|\{)/, 'transition'], + [/".*?"/, 'string'], + [/:/, 'delimiter.bracket'] + ], + requirementDiagram: [ + [ + /[a-zA-Z_$][\w$]*/, + { + cases: { + '@requirementDiagramBlockKeywords': 'typeKeyword' + } + } + ], + [/{|}/, 'delimiter.bracket'], + [/->|<-|-/, 'transition'], + [/".*?"/, 'string'] ] }, whitespace: [[/[ \t\r\n]+/, 'white']] @@ -149,7 +348,6 @@ export const initEditor = (monacoEditor): void => { { token: 'string', foreground: 'AA8500' }, { token: 'transition', foreground: '008800', fontStyle: 'bold' }, { token: 'delimiter.bracket', foreground: '000000', fontStyle: 'bold' }, - { token: 'html.entity/hex-color-code', foreground: 'f5b436' }, { token: 'annotation', foreground: '4b4b96' }, { token: 'number', foreground: '4b4b96' }, { token: 'comment', foreground: '888c89' } @@ -262,13 +460,21 @@ export const initEditor = (monacoEditor): void => { .map((part) => part[0].toUpperCase() + part.slice(1)) .join(' ') })), - ...[...new Set([...orientations, ...typeKeywords, ...blockKeywords, ...keywords])].map( - (keyword) => ({ - label: keyword, - kind: monacoEditor.languages.CompletionItemKind.Keyword, - insertText: keyword - }) - ) + ...[ + ...new Set( + Object.values(keywords) + .map((diagramKeywords) => + Object.entries(diagramKeywords) + .filter((keywordType) => keywordType[0] !== 'annotations') + .map((entry) => entry[1]) + ) + .flat(2) + ) + ].map((keyword) => ({ + label: keyword, + kind: monacoEditor.languages.CompletionItemKind.Keyword, + insertText: keyword + })) ]; return { suggestions: suggestions }; } From 65a1fa72a0004ca57fc40ee835d3308f77d0dc81 Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sun, 29 Aug 2021 12:44:36 -0700 Subject: [PATCH 33/36] Remove unneccessary groups --- src/lib/components/editor/util.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 64e04b1b..3ede9ff9 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -133,14 +133,6 @@ export const initEditor = (monacoEditor): void => { ) ) .reduce((overallKeywords, nextKeyword) => ({ ...overallKeywords, ...nextKeyword }), {}), - noEatingSequenceArrows: ['-)', '--)', '->>', '-->>'].reduce( - (accumalator, arrow) => accumalator.concat(arrow, arrow + '+', arrow + '-'), - [] - ), - eatingSequenceArrows: ['->', '-x'].reduce( - (accumalator, arrow) => accumalator.concat(arrow, arrow + '+', arrow + '-'), - [] - ), tokenizer: { root: [ [/%%(?=.*%%$)/, { token: 'string', nextEmbedded: 'json' }], From 51c9488d0e72754d9ca8ae73f253ef13344b6f29 Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sun, 29 Aug 2021 12:46:21 -0700 Subject: [PATCH 34/36] colons are brackets in class diagrams --- src/lib/components/editor/util.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 3ede9ff9..a942974e 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -249,7 +249,8 @@ export const initEditor = (monacoEditor): void => { [/%%.*(?>/, 'annotation'], [/".*?"/, 'string'], - [/:::/, 'transition'] + [/:::/, 'transition'], + [/:/, 'delimiter.bracket'] ], journey: [ [/(title)(.*)/, ['keyword', 'string']], From 4bdb5a0750b4716f8ee3faf02c53396ebe8f04ec Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sun, 29 Aug 2021 19:34:21 -0700 Subject: [PATCH 35/36] Add variables, types, and multiple refactors and fixes --- src/lib/components/editor/util.ts | 135 +++++++++++++++++++----------- 1 file changed, 88 insertions(+), 47 deletions(-) diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index a942974e..466d994a 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -102,7 +102,15 @@ export const initEditor = (monacoEditor): void => { gantt: { typeKeywords: ['gantt'], blockKeywords: [], - keywords: ['title', 'dateFormat', 'axisFormat', 'todayMarker', 'section'] + keywords: [ + 'title', + 'dateFormat', + 'axisFormat', + 'todayMarker', + 'section', + 'excludes', + 'inclusiveEndDates' + ] }, requirementDiagram: { typeKeywords: ['requirement', 'requirementDiagram'], @@ -137,23 +145,24 @@ export const initEditor = (monacoEditor): void => { root: [ [/%%(?=.*%%$)/, { token: 'string', nextEmbedded: 'json' }], [/%%$/, { token: 'string', nextEmbedded: '@pop' }], - [/^\s*gitGraph/m, { token: 'typeKeyword', next: 'gitGraph' }], - [/^\s*info/m, { token: 'typeKeyword', next: 'info' }], - [/^\s*pie/m, { token: 'typeKeyword', next: 'pie' }], - [/^\s*(flowchart|flowchart-v2|graph)/m, { token: 'typeKeyword', next: 'flowchart' }], - [/^\s*sequenceDiagram/, { token: 'typeKeyword', next: 'sequenceDiagram' }], - [/^\s*classDiagram(-v2)?/, { token: 'typeKeyword', next: 'classDiagram' }], - [/^\s*journey/, { token: 'typeKeyword', next: 'journey' }], - [/^\s*gantt/, { token: 'typeKeyword', next: 'gantt' }], - [/^\s*stateDiagram(-v2)?/, { token: 'typeKeyword', next: 'stateDiagram' }], - [/^\s*erDiagram/, { token: 'typeKeyword', next: 'erDiagram' }], - [/^\s*requirement(Diagram)?/, { token: 'typeKeyword', next: 'requirementDiagram' }], + [/^\s*gitGraph/m, 'typeKeyword', 'gitGraph'], + [/^\s*info/m, 'typeKeyword', 'info'], + [/^\s*pie/m, 'typeKeyword', 'pie'], + [/^\s*(flowchart|flowchart-v2|graph)/m, 'typeKeyword', 'flowchart'], + [/^\s*sequenceDiagram/, 'typeKeyword', 'sequenceDiagram'], + [/^\s*classDiagram(-v2)?/, 'typeKeyword', 'classDiagram'], + [/^\s*journey/, 'typeKeyword', 'journey'], + [/^\s*gantt/, 'typeKeyword', 'gantt'], + [/^\s*stateDiagram(-v2)?/, 'typeKeyword', 'stateDiagram'], + [/^\s*erDiagram/, 'typeKeyword', 'erDiagram'], + [/^\s*requirement(Diagram)?/, 'typeKeyword', 'requirementDiagram'], [/%%.*(? { } ], [/%%.*(? { ], info: [ [ - /[a-zA-Z_$][\w$]*/, + /[a-zA-Z][\w$]*/, { cases: { '@infoBlockKeywords': 'typeKeyword', @@ -182,7 +192,7 @@ export const initEditor = (monacoEditor): void => { pie: [ [/(title)(.*$)/, ['keyword', 'string']], [ - /[a-zA-Z_$][\w$]*/, + /[a-zA-Z][\w$]*/, { cases: { '@pieBlockKeywords': 'typeKeyword', @@ -198,11 +208,12 @@ export const initEditor = (monacoEditor): void => { flowchart: [ [/[ox]?(--+|==+)[ox]/, 'transition'], [ - /[a-zA-Z_$][\w$]*/, + /[a-zA-Z][\w$]*/, { cases: { '@flowchartBlockKeywords': 'typeKeyword', - '@flowchartKeywords': 'keyword' + '@flowchartKeywords': 'keyword', + '@default': 'variable' } } ], @@ -212,7 +223,7 @@ export const initEditor = (monacoEditor): void => { [/{+.+?}+/, 'string'], [/\(+.+?\)+/, 'string'], [/-\.+->?/, 'transition'], - [/(-[-.])([^-]+?)(-{3,}|-{2,}>|\.-+>)/, ['transition', 'string', 'transition']], + [/(-[-.])([^->]+?)(-{3,}|-{2,}>|\.-+>)/, ['transition', 'string', 'transition']], [/(==+)([^=]+?)(={3,}|={2,}>)/, ['transition', 'string', 'transition']], [/|===+|---+/, 'transition'], [/:::/, 'transition'], @@ -222,11 +233,12 @@ export const initEditor = (monacoEditor): void => { ], sequenceDiagram: [ [ - /[a-zA-Z_$][\w$]*/, + /[a-zA-Z][\w$]*/, { cases: { '@sequenceDiagramBlockKeywords': 'typeKeyword', - '@sequenceDiagramKeywords': 'keyword' + '@sequenceDiagramKeywords': 'keyword', + '@default': 'variable' } } ], @@ -235,47 +247,58 @@ export const initEditor = (monacoEditor): void => { [/%%.*(?|o)?/, 'transition'], [/^\s*class\s(?!.*\{)/, 'keyword'], [ - /[a-zA-Z_$][\w$]*/, + /[a-zA-Z][\w$]*/, { cases: { '@classDiagramBlockKeywords': 'typeKeyword', - '@classDiagramKeywords': 'keyword' + '@classDiagramKeywords': 'keyword', + '@default': 'variable' } } ], [/%%.*(?>/, 'annotation'], + [/(<<)(.+?)(>>)/, ['delimiter.bracket', 'annotation', 'delimiter.bracket']], [/".*?"/, 'string'], [/:::/, 'transition'], - [/:/, 'delimiter.bracket'] + [/:|\+|-|#|~|\*\s*$|\$\s*$|\(|\)|{|}/, 'delimiter.bracket'] ], journey: [ [/(title)(.*)/, ['keyword', 'string']], [/(section)(.*)/, ['typeKeyword', 'string']], [ - /[a-zA-Z_$][\w$]*/, + /[a-zA-Z][\w$]*/, { cases: { '@journeyBlockKeywords': 'typeKeyword', - '@journeyKeywords': 'keyword' + '@journeyKeywords': 'keyword', + '@default': 'variable' } } ], [ - /(^\s*.+?)(:)(.*?)(:)(.*?)$/, - ['string', 'delimiter.bracket', 'number', 'delimiter.bracket', null] + /(^\s*.+?)(:)(.*?)(:)(.*?)([,$])/, + [ + 'string', + 'delimiter.bracket', + 'number', + 'delimiter.bracket', + 'variable', + 'delimiter.bracket' + ] ], - [/(^\s*.+?)(:)([^:]*?)$/, ['string', 'delimiter.bracket', null]], + [/,/, 'delimiter.bracket'], + [/(^\s*.+?)(:)([^:]*?)$/, ['string', 'delimiter.bracket', 'variable']], [/%%.*(? { } ], [/(^\s*.*?)(:)/, ['string', 'delimiter.bracket']], - [/%%.*(?>/, 'annotation'], - [/\[\[(fork|join|choice)]]/, 'annotation'], + [/(<<)(fork|join|choice)(>>)/, 'annotation'], + [/(\[\[)(fork|join|choice)(]])/, ['delimiter.bracket', 'annotation', 'delimiter.bracket']], [ - /[a-zA-Z_$][\w$]*/, + /[a-zA-Z][\w$]*/, { cases: { '@stateDiagramBlockKeywords': 'typeKeyword', - '@stateDiagramKeywords': 'keyword' + '@stateDiagramKeywords': 'keyword', + '@default': 'variable' } } ], [/".*?"/, 'string'], [/(:)([^:\n]*?$)/, ['delimiter.bracket', 'string']], + [/{|}/, 'delimiter.bracket'], [/%%.*(?/, 'transition'] + [/-->/, 'transition'], + [/\[.*?]/, 'string'] ], stateDiagramNote: [ [/^\s*end note$/, { token: 'typeKeyword', next: '@pop' }], [/.*/, 'string'] ], erDiagram: [ - [/(\|o|\|\||\}o|\}\|)(--|\.\.)(o\||\|\||o\{|\|\{)/, 'transition'], + [/[}|][o|](--|\.\.)[o|][{|]/, 'transition'], [/".*?"/, 'string'], - [/:/, 'delimiter.bracket'] + [/(:)(.*?$)/, ['delimiter.bracket', 'string']], + [/:|{|}/, 'delimiter.bracket'], + [/([a-zA-Z]+)(\s+[a-zA-Z]+)/, ['type', 'variable']], + [/[a-zA-Z_-][\w$]*/, 'variable'] ], requirementDiagram: [ + [/->|<-|-/, 'transition'], + [/(\d+\.)*\d+/, 'number'], [ - /[a-zA-Z_$][\w$]*/, + /[a-zA-Z_-][\w$]*/, { cases: { - '@requirementDiagramBlockKeywords': 'typeKeyword' + '@requirementDiagramBlockKeywords': 'typeKeyword', + '@default': 'variable' } } ], - [/{|}/, 'delimiter.bracket'], - [/->|<-|-/, 'transition'], + [/:|{|}|\//, 'delimiter.bracket'], [/".*?"/, 'string'] ] - }, - whitespace: [[/[ \t\r\n]+/, 'white']] + } }); monacoEditor.editor.defineTheme('mermaidTheme', { @@ -343,7 +375,9 @@ export const initEditor = (monacoEditor): void => { { token: 'delimiter.bracket', foreground: '000000', fontStyle: 'bold' }, { token: 'annotation', foreground: '4b4b96' }, { token: 'number', foreground: '4b4b96' }, - { token: 'comment', foreground: '888c89' } + { token: 'comment', foreground: '888c89' }, + { token: 'variable', foreground: 'A22889' }, + { token: 'type', foreground: '2BDEA8' } ] }); @@ -394,6 +428,13 @@ export const initEditor = (monacoEditor): void => { insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, documentation: 'Background Color' }, + { + label: 'subgraph', + kind: monacoEditor.languages.CompletionItemKind.Snippet, + insertText: ['subgraph ${1:title}', '\t$0', 'end'].join('\n'), + insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, + documentation: 'Subgraph' + }, { label: 'class', kind: monacoEditor.languages.CompletionItemKind.Snippet, From 5bcb495569c8d86c89fbd96436626a7951c6a998 Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sun, 29 Aug 2021 19:42:27 -0700 Subject: [PATCH 36/36] Comment support --- cypress/snapshots.js | 2 +- src/lib/components/editor/util.ts | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/cypress/snapshots.js b/cypress/snapshots.js index b11755db..8651cd02 100644 --- a/cypress/snapshots.js +++ b/cypress/snapshots.js @@ -16,7 +16,7 @@ module.exports = { "1": "{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping!!)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello world\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"files\",\"config\":{\"codeURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd\",\"configURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json\"}}}" } }, - "__version": "8.1.0", + "__version": "8.3.0", "Auto sync tests": { "should dim diagram when code is edited": { "1": "{\"code\":\"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\\n C --> Test\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":false,\"updateDiagram\":false}" diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts index 466d994a..ef9d348a 100644 --- a/src/lib/components/editor/util.ts +++ b/src/lib/components/editor/util.ts @@ -343,6 +343,7 @@ export const initEditor = (monacoEditor): void => { [/(:)(.*?$)/, ['delimiter.bracket', 'string']], [/:|{|}/, 'delimiter.bracket'], [/([a-zA-Z]+)(\s+[a-zA-Z]+)/, ['type', 'variable']], + [/%%.*(? { } ], [/:|{|}|\//, 'delimiter.bracket'], + [/%%.*(?