class is a block and its snippet

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,