Fix types

.eslintrc.cjs

@@ -4,7 +4,7 @@ module.exports = {
 	extends: [
 		'eslint:recommended',
 		'plugin:@typescript-eslint/recommended',
-		// 'plugin:@typescript-eslint/recommended-requiring-type-checking',
+		'plugin:@typescript-eslint/recommended-requiring-type-checking',
 		'prettier'
 	],
 	plugins: ['svelte3', 'tailwindcss', '@typescript-eslint', 'es'],

.github/workflows/update-browserlist.yml

@@ -9,7 +9,7 @@ jobs:
       - uses: actions/checkout@v2
       - run: npx browserslist@latest --update-db
       - name: Commit changes
-        uses: EndBug/add-and-commit@v8
+        uses: EndBug/add-and-commit@v7
         with:
           author_name: ${{ github.actor }}
           author_email: ${{ github.actor }}@users.noreply.github.com

.github/workflows/update-monaco-editor.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v2
       - run: ./bin/update-monaco
       - name: Commit changes
-        uses: EndBug/add-and-commit@v8
+        uses: EndBug/add-and-commit@v7
         with:
           author_name: ${{ github.actor }}
           author_email: ${{ github.actor }}@users.noreply.github.com

Dockerfile

@@ -6,7 +6,7 @@
 # Stop               : press ctrl + c 
 #                                     or 
 #                                        docker stop mermaid-live-editor
-FROM node:17.4.0 as mermaid-live-editor-builder 
+FROM node:17.3.1 as mermaid-live-editor-builder 
 COPY --chown=node:node . /home
 WORKDIR /home
 RUN yarn install

package.json

@@ -16,7 +16,7 @@
 	"devDependencies": {
 		"@cypress/snapshot": "^2.1.7",
 		"@sveltejs/adapter-static": "1.0.0-next.26",
-		"@sveltejs/kit": "1.0.0-next.236",
+		"@sveltejs/kit": "1.0.0-next.232",
 		"@types/mermaid": "^8.2.7",
 		"@types/pako": "^1.0.3",
 		"@typescript-eslint/eslint-plugin": "^4.33.0",
@@ -35,7 +35,7 @@
 		"eslint-plugin-svelte3": "^3.4.0",
 		"eslint-plugin-tailwindcss": "^3.3.0",
 		"husky": "^7.0.4",
-		"lint-staged": "^12.2.2",
+		"lint-staged": "^12.2.1",
 		"mocha": "^9.1.4",
 		"node-html-parser": "^5.2.0",
 		"postcss": "^8.4.5",
@@ -46,7 +46,7 @@
 		"svelte-preprocess": "^4.10.2",
 		"tailwindcss": "^3.0.13",
 		"tslib": "^2.3.1",
-		"typescript": "^4.5.5"
+		"typescript": "^4.5.4"
 	},
 	"type": "module",
 	"dependencies": {
@@ -55,10 +55,9 @@
 		"analytics": "^0.7.21",
 		"daisyui": "1.24.3",
 		"js-base64": "^3.7.2",
-		"mermaid": "8.14.0-rc1",
+		"mermaid": "8.13.9",
 		"moment": "^2.29.1",
 		"monaco-editor": "^0.31.1",
-		"monaco-mermaid": "^1.0.2",
 		"pako": "2.0.4",
 		"random-word-slugs": "^0.1.6"
 	},

src/hooks.ts

@@ -1,7 +1,7 @@
 import type { Handle } from '@sveltejs/kit/types/hooks';
 
-export const handle: Handle = async ({ event, resolve }) => {
-	const response = await resolve(event, {
+export const handle: Handle = async ({ request, resolve }) => {
+	const response = await resolve(request, {
 		ssr: false
 	});
 

src/lib/components/editor/editor.svelte

@@ -4,7 +4,7 @@
 	import { themeStore } from '$lib/util/theme';
 	import type monaco from 'monaco-editor';
 	import { createEventDispatcher, onMount } from 'svelte';
-	import initEditor from 'monaco-mermaid';
+	import { initEditor } from './util';
 
 	let divEl: HTMLDivElement = null;
 	let editor: monaco.editor.IStandaloneCodeEditor;

src/lib/components/editor/util.ts

@@ -0,0 +1,552 @@
+/* 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 requirementDiagrams = [
+		'requirement',
+		'functionalRequirement',
+		'interfaceRequirement',
+		'performanceRequirement',
+		'physicalRequirement',
+		'designConstraint'
+	];
+
+	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',
+				'actor'
+			]
+		},
+		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',
+				'excludes',
+				'inclusiveEndDates'
+			]
+		},
+		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', {
+		...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 }), {}),
+		tokenizer: {
+			root: [
+				[/%%(?=.*%%$)/, { token: 'string', nextEmbedded: 'json' }],
+				[/%%$/, { token: 'string', nextEmbedded: '@pop' }],
+				[/^\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'],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
+			],
+			gitGraph: [
+				[/option(?=s)/, { token: 'typeKeyword', next: 'optionsGitGraph' }],
+				[/(^\s*branch|reset|merge|checkout)(.*$)/, ['keyword', 'variable']],
+				[
+					/[a-zA-Z][\w$]*/,
+					{
+						cases: {
+							'@gitGraphBlockKeywords': 'typeKeyword',
+							'@gitGraphKeywords': 'keyword'
+						}
+					}
+				],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
+				[/".*?"/, 'string'],
+				[/\^/, 'delimiter.bracket']
+			],
+			optionsGitGraph: [
+				[/s$/, { token: 'typeKeyword', nextEmbedded: 'json', matchOnlyAtLineStart: false }],
+				['end', { token: 'typeKeyword', next: '@pop', nextEmbedded: '@pop' }]
+			],
+			info: [
+				[
+					/[a-zA-Z][\w$]*/,
+					{
+						cases: {
+							'@infoBlockKeywords': 'typeKeyword',
+							'@infoKeywords': 'keyword'
+						}
+					}
+				]
+			],
+			pie: [
+				[/(title)(.*$)/, ['keyword', 'string']],
+				[
+					/[a-zA-Z][\w$]*/,
+					{
+						cases: {
+							'@pieBlockKeywords': 'typeKeyword',
+							'@pieKeywords': 'keyword'
+						}
+					}
+				],
+				[/".*?"/, 'string'],
+				[/\s*\d+/, 'number'],
+				[/:/, 'delimiter.bracket'],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
+			],
+			flowchart: [
+				[/[ox]?(--+|==+)[ox]/, 'transition'],
+				[
+					/[a-zA-Z][\w$]*/,
+					{
+						cases: {
+							'@flowchartBlockKeywords': 'typeKeyword',
+							'@flowchartKeywords': 'keyword',
+							'@default': 'variable'
+						}
+					}
+				],
+				[/\|+.+?\|+/, 'string'],
+				[/\[+(\\.+?[\\/]|\/.+?[/\\])\]+/, 'string'],
+				[/[[>]+[^\]|[]+?\]+/, 'string'],
+				[/{+.+?}+/, 'string'],
+				[/\(+.+?\)+/, 'string'],
+				[/-\.+->?/, 'transition'],
+				[/(-[-.])([^->]+?)(-{3,}|-{2,}>|\.-+>)/, ['transition', 'string', 'transition']],
+				[/(==+)([^=]+?)(={3,}|={2,}>)/, ['transition', 'string', 'transition']],
+				[/<?(--+|==+)>|===+|---+/, 'transition'],
+				[/:::/, 'transition'],
+				[/[;&]/, 'delimiter.bracket'],
+				[/".*?"/, 'string'],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
+			],
+			sequenceDiagram: [
+				[
+					/[a-zA-Z][\w$]*/,
+					{
+						cases: {
+							'@sequenceDiagramBlockKeywords': 'typeKeyword',
+							'@sequenceDiagramKeywords': 'keyword',
+							'@default': 'variable'
+						}
+					}
+				],
+				[/(--?>?>|--?[)x])[+-]?/, 'transition'],
+				[/(:)([^:\n]*?$)/, ['delimiter.bracket', 'string']],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
+			],
+			classDiagram: [
+				[/(?!class\s)([a-zA-Z]+)(\s+[a-zA-Z]+)/, ['type', 'variable']],
+				[/(\*|<\|?|o)?(--|\.\.)(\*|\|?>|o)?/, 'transition'],
+				[/^\s*class\s(?!.*\{)/, 'keyword'],
+				[
+					/[a-zA-Z][\w$]*/,
+					{
+						cases: {
+							'@classDiagramBlockKeywords': 'typeKeyword',
+							'@classDiagramKeywords': 'keyword',
+							'@default': 'variable'
+						}
+					}
+				],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
+				[/(<<)(.+?)(>>)/, ['delimiter.bracket', 'annotation', 'delimiter.bracket']],
+				[/".*?"/, 'string'],
+				[/:::/, 'transition'],
+				[/:|\+|-|#|~|\*\s*$|\$\s*$|\(|\)|{|}/, 'delimiter.bracket']
+			],
+			journey: [
+				[/(title)(.*)/, ['keyword', 'string']],
+				[/(section)(.*)/, ['typeKeyword', 'string']],
+				[
+					/[a-zA-Z][\w$]*/,
+					{
+						cases: {
+							'@journeyBlockKeywords': 'typeKeyword',
+							'@journeyKeywords': 'keyword',
+							'@default': 'variable'
+						}
+					}
+				],
+				[
+					/(^\s*.+?)(:)(.*?)(:)(.*?)([,$])/,
+					[
+						'string',
+						'delimiter.bracket',
+						'number',
+						'delimiter.bracket',
+						'variable',
+						'delimiter.bracket'
+					]
+				],
+				[/,/, 'delimiter.bracket'],
+				[/(^\s*.+?)(:)([^:]*?)$/, ['string', 'delimiter.bracket', 'variable']],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
+			],
+			gantt: [
+				[/(title)(.*)/, ['keyword', 'string']],
+				[/(section)(.*)/, ['typeKeyword', 'string']],
+				[
+					/[a-zA-Z][\w$]*/,
+					{
+						cases: {
+							'@ganttBlockKeywords': 'typeKeyword',
+							'@ganttKeywords': 'keyword'
+						}
+					}
+				],
+				[/(^\s*.*?)(:)/, ['string', 'delimiter.bracket']],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
+				[/:/, 'delimiter.bracket']
+			],
+			stateDiagram: [
+				[/note[^:]*$/, { token: 'typeKeyword', next: 'stateDiagramNote' }],
+				['hide empty description', 'keyword'],
+				[/^\s*state\s(?!.*\{)/, 'keyword'],
+				[/(<<)(fork|join|choice)(>>)/, 'annotation'],
+				[/(\[\[)(fork|join|choice)(]])/, ['delimiter.bracket', 'annotation', 'delimiter.bracket']],
+				[
+					/[a-zA-Z][\w$]*/,
+					{
+						cases: {
+							'@stateDiagramBlockKeywords': 'typeKeyword',
+							'@stateDiagramKeywords': 'keyword',
+							'@default': 'variable'
+						}
+					}
+				],
+				[/".*?"/, 'string'],
+				[/(:)([^:\n]*?$)/, ['delimiter.bracket', 'string']],
+				[/{|}/, 'delimiter.bracket'],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
+				[/-->/, 'transition'],
+				[/\[.*?]/, 'string']
+			],
+			stateDiagramNote: [
+				[/^\s*end note$/, { token: 'typeKeyword', next: '@pop' }],
+				[/.*/, 'string']
+			],
+			erDiagram: [
+				[/[}|][o|](--|\.\.)[o|][{|]/, 'transition'],
+				[/".*?"/, 'string'],
+				[/(:)(.*?$)/, ['delimiter.bracket', 'string']],
+				[/:|{|}/, 'delimiter.bracket'],
+				[/([a-zA-Z]+)(\s+[a-zA-Z]+)/, ['type', 'variable']],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
+				[/[a-zA-Z_-][\w$]*/, 'variable']
+			],
+			requirementDiagram: [
+				[/->|<-|-/, 'transition'],
+				[/(\d+\.)*\d+/, 'number'],
+				[
+					/[a-zA-Z_-][\w$]*/,
+					{
+						cases: {
+							'@requirementDiagramBlockKeywords': 'typeKeyword',
+							'@default': 'variable'
+						}
+					}
+				],
+				[/:|{|}|\//, 'delimiter.bracket'],
+				[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
+				[/".*?"/, 'string']
+			]
+		}
+	});
+
+	monacoEditor.editor.defineTheme('mermaid-dark', {
+		base: 'vs-dark',
+		inherit: true,
+		rules: [
+			{ token: 'typeKeyword', foreground: '9650c8', fontStyle: 'bold' },
+			{ token: 'transition', foreground: '008800', fontStyle: 'bold' }
+		],
+		colors: {}
+	});
+
+	monacoEditor.editor.defineTheme('mermaid', {
+		base: 'vs',
+		inherit: true,
+		rules: [
+			{ 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' },
+			{ token: 'delimiter.bracket', foreground: '000000', fontStyle: 'bold' },
+			{ token: 'annotation', foreground: '4b4b96' },
+			{ token: 'number', foreground: '4b4b96' },
+			{ token: 'comment', foreground: '888c89' },
+			{ token: 'variable', foreground: 'A22889' },
+			{ token: 'type', foreground: '2BDEA8' }
+		],
+		colors: {}
+	});
+
+	// Register a completion item provider for the mermaid language
+	monacoEditor.languages.registerCompletionItemProvider('mermaid', {
+		provideCompletionItems: () => {
+			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: '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,
+					insertText: ['class ${1:className} {', '\t$0', '}'].join('\n'),
+					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'
+				},
+				{
+					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'
+				},
+				{
+					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'
+				},
+				{
+					label: 'element',
+					kind: monacoEditor.languages.CompletionItemKind.Snippet,
+					insertText: ['element ${1:test_entity} {', '\t$0', '}'].join('\n'),
+					insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+					documentation: 'Requirement Diagram Element'
+				},
+				{
+					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,
+					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(
+						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 };
+		}
+	});
+
+	monacoEditor.languages.setLanguageConfiguration('mermaid', {
+		autoClosingPairs: [
+			{
+				open: '(',
+				close: ')'
+			},
+			{
+				open: '{',
+				close: '}'
+			},
+			{
+				open: '[',
+				close: ']'
+			}
+		],
+		brackets: [
+			['(', ')'],
+			['{', '}'],
+			['[', ']']
+		]
+	});
+};

src/lib/util/fileLoaders/gist.ts

@@ -5,14 +5,108 @@ import type { State } from '$lib/types';
 import { defaultState } from '../state';
 import { addHistoryEntry } from '../../components/history/history';
 
+export interface GistResponse {
+	url: string;
+	forks_url: string;
+	commits_url: string;
+	id: string;
+	node_id: string;
+	git_pull_url: string;
+	git_push_url: string;
+	html_url: string;
+	files: Files;
+	public: boolean;
+	created_at: string;
+	updated_at: string;
+	description: string;
+	comments: number;
+	user: any;
+	comments_url: string;
+	owner: Owner;
+	fork_of: any;
+	forks: any[];
+	history: History[];
+	truncated: boolean;
+}
+
+export interface Files {
+	[key: string]: File;
+}
+
+export interface File {
+	filename: string;
+	type: string;
+	language: any;
+	raw_url: string;
+	size: number;
+	truncated: boolean;
+	content: string;
+}
+
+export interface Owner {
+	login: string;
+	id: number;
+	node_id: string;
+	avatar_url: string;
+	gravatar_id: string;
+	url: string;
+	html_url: string;
+	followers_url: string;
+	following_url: string;
+	gists_url: string;
+	starred_url: string;
+	subscriptions_url: string;
+	organizations_url: string;
+	repos_url: string;
+	events_url: string;
+	received_events_url: string;
+	type: string;
+	site_admin: boolean;
+}
+
+export interface History {
+	user: User;
+	version: string;
+	committed_at: string;
+	change_status: ChangeStatus;
+	url: string;
+}
+
+export interface User {
+	login: string;
+	id: number;
+	node_id: string;
+	avatar_url: string;
+	gravatar_id: string;
+	url: string;
+	html_url: string;
+	followers_url: string;
+	following_url: string;
+	gists_url: string;
+	starred_url: string;
+	subscriptions_url: string;
+	organizations_url: string;
+	repos_url: string;
+	events_url: string;
+	received_events_url: string;
+	type: string;
+	site_admin: boolean;
+}
+
+export interface ChangeStatus {
+	total: number;
+	additions: number;
+	deletions: number;
+}
+
 const codeFileName = 'code.mmd';
 const configFileName = 'config.json';
 
-const isValidGist = (files: any): boolean => {
+const isValidGist = (files: Files): boolean => {
 	return codeFileName in files;
 };
 
-const getFileContent = async (file: any): Promise<string> => {
+const getFileContent = async (file: File): Promise<string> => {
 	if (file.truncated) {
 		return await (await fetch(file.raw_url)).text();
 	}
@@ -32,9 +126,9 @@ const getGistData = async (gistURL: string): Promise<GistData> => {
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	const [_, __, gistID, revisionID] = gistURL.split('github.com').pop().split('/');
 	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-	const { html_url, files, history } = await (
+	const { html_url, files, history } = (await (
 		await fetch(`https://api.github.com/gists/${gistID}${revisionID ? '/' + revisionID : ''}`)
-	).json();
+	).json()) as GistResponse;
 	if (isValidGist(files)) {
 		const code = await getFileContent(files[codeFileName]);
 		let config: string;
@@ -48,7 +142,7 @@ const getGistData = async (gistURL: string): Promise<GistData> => {
 			config,
 			author: currentItem.user.login,
 			time: new Date(currentItem.committed_at).getTime(),
-			version: (currentItem.version as string).slice(-7)
+			version: currentItem.version.slice(-7)
 		};
 	} else {
 		throw 'Invalid gist provided';

src/routes/edit.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Editor from '$lib/components/editor.svelte';
+	import Editor from '$lib/components/editor/editor.svelte';
 	import Navbar from '$lib/components/navbar.svelte';
 	import Preset from '$lib/components/preset.svelte';
 	import Actions from '$lib/components/actions.svelte';

yarn.lock

@@ -204,10 +204,10 @@
   dependencies:
     tiny-glob "^0.2.9"
 
-"@sveltejs/kit@1.0.0-next.236":
-  version "1.0.0-next.236"
-  resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.236.tgz#d0742b68cf2441a241732e461d64a4ae11e9dbb2"
-  integrity sha512-V/K6KZwZlfM2jDiL7luisRkPujf/pAT2SUpgOEONk44WwUwYwd928qN2u0Z6SAfQFCDAxUI8pMHP2OC1bm352Q==
+"@sveltejs/kit@1.0.0-next.232":
+  version "1.0.0-next.232"
+  resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.232.tgz#a8879e331d37259d99f72cbcffa00d177106b896"
+  integrity sha512-STQ0hnJozIop8k9I313nwVasBIQ45Z2K1pUOkDVjCSOGijgsj+De5q0prQBtL1ZlqqisfkYlOf8W9gvDSyTLEA==
   dependencies:
     "@sveltejs/vite-plugin-svelte" "^1.0.0-next.32"
     sade "^1.7.4"
@@ -2916,10 +2916,10 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
-lint-staged@^12.2.2:
-  version "12.2.2"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.2.2.tgz#e03d93b41092316e0f38b37c9630da807aae3cca"
-  integrity sha512-bcHEoM1M/f+K1BYdHcEuIn8K+zMOSJR3mkny6PAuQiTgcSUcRbUWaUD6porAYypxF4k1vYZZ2HutZt1p94Z1jQ==
+lint-staged@^12.2.1:
+  version "12.2.1"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.2.1.tgz#e37b5a81deaabf5823f43b3aa903a70c15c9d0b3"
+  integrity sha512-VCVcA9C2Vt5HHxSR4EZVZFJcQRJH984CGBeY+cJ/xed4mBd+JidbM/xbKcCq5ASaygAV0iITtdsCTnID7h/1OQ==
   dependencies:
     cli-truncate "^3.1.0"
     colorette "^2.0.16"
@@ -3046,10 +3046,10 @@ merge2@^1.3.0:
   resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-mermaid@8.14.0-rc1:
-  version "8.14.0-rc1"
-  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-8.14.0-rc1.tgz#a3b02b57aea7412fceeaa4a0c554fc826600b87d"
-  integrity sha512-9im2C69x5MoBBNEVO3eAOn01Se8hVPTDeO5JnNlqhFKeTY9wB4C43/JpM1GDUf8pRFMUtEreVgIC19OEYOqZ6Q==
+mermaid@8.13.9:
+  version "8.13.9"
+  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-8.13.9.tgz#72f9a63b1b15239e260ca4728ad9196d1862889d"
+  integrity sha512-kMH676xEomSe/gzxMpDx91L+z9L+9iB3lvtPFA8aeOPRNNrfd3ZDvDCGFnuqQaJvPRCxs3Me2JDaVVNOZjojrg==
   dependencies:
     "@braintree/sanitize-url" "^3.1.0"
     d3 "^7.0.0"
@@ -3155,11 +3155,6 @@ monaco-editor@^0.31.1:
   resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.31.1.tgz#67f597b3e45679d1f551237e12a3a42c4438b97b"
   integrity sha512-FYPwxGZAeP6mRRyrr5XTGHD9gRXVjy7GUzF4IPChnyt3fS5WrNxIkS8DNujWf6EQy0Zlzpxw8oTVE+mWI2/D1Q==
 
-monaco-mermaid@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/monaco-mermaid/-/monaco-mermaid-1.0.2.tgz#a96d2c5dfbf9fc591cb7c61dff40a3d188021337"
-  integrity sha512-H0waK3QyTklsE3hKW4bvDFt+8Wcfghszi125wQVS89gzlHZMxZh5w1RqQe85d4FSmjwc3t1o71pCkyEYiZJiXg==
-
 mri@^1.1.0:
   version "1.1.6"
   resolved "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz"
@@ -4404,10 +4399,10 @@ type-fest@^0.21.3:
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz"
   integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
 
-typescript@^4.5.5:
-  version "4.5.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"
-  integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
+typescript@^4.5.4:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.4.tgz#a17d3a0263bf5c8723b9c52f43c5084edf13c2e8"
+  integrity sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==
 
 universal-analytics@^0.4.20:
   version "0.4.23"