From 8f8667aad5043467f8111131b134e0881815d5e9 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 7 Feb 2022 23:03:56 +0530
Subject: [PATCH 01/12] Fix Favicon

---
 src/app.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app.html b/src/app.html
index 35d05de7..901dd3de 100644
--- a/src/app.html
+++ b/src/app.html
@@ -11,8 +11,8 @@
 		<meta
 			name="description"
 			content="Simplify documentation and avoid heavy tools. Open source Visio Alternative. Commonly used for explaining your code! Mermaid is a simple markdown-like script language for generating charts from text via javascript." />
-		<link rel="icon" type="image/png" href="favicon.png" />
-		<link rel="manifest" href="manifest.json" />
+		<link rel="icon" type="image/png" href="/favicon.png" />
+		<link rel="manifest" href="/manifest.json" />
 		<link
 			rel="stylesheet"
 			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />

From 79c14647be0a6b1436e4ef8701caa7eec9209f5f Mon Sep 17 00:00:00 2001
From: kerwin612 <kerwin612@qq.com>
Date: Mon, 7 Mar 2022 22:33:29 +0800
Subject: [PATCH 02/12] Fix tab style exception

---
 src/lib/components/card/tabs.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/card/tabs.svelte b/src/lib/components/card/tabs.svelte
index 18382abd..5fe726b9 100644
--- a/src/lib/components/card/tabs.svelte
+++ b/src/lib/components/card/tabs.svelte
@@ -26,7 +26,7 @@
 		<ul class="tabs" transition:fade>
 			{#each tabs as tab}
 				<div
-					class="tab tab-lifted text-primary-content {activeTabID === tab.id ? 'tab-active' : ''}"
+					class="tab tab-lifted {activeTabID === tab.id ? 'tab-active' : 'text-primary-content'}"
 					on:click|stopPropagation={() => toggleTabs(tab)}>
 					<i class="mr-1 {tab.icon}" />
 					{tab.title}

From 3d3b4b0e5617b9bb204c9bd966748251a1c5cd4e Mon Sep 17 00:00:00 2001
From: kerwin612 <kerwin612@qq.com>
Date: Mon, 7 Mar 2022 23:46:52 +0800
Subject: [PATCH 03/12] New feature: add quick document entry

---
 src/routes/edit.svelte | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte
index f097364f..63e943c1 100644
--- a/src/routes/edit.svelte
+++ b/src/routes/edit.svelte
@@ -21,7 +21,23 @@
 		code: 'mermaid',
 		config: 'json'
 	};
+	const docMap = {
+		graph: '/#/flowchart',
+		graph_config: '/#/flowchart?id=configuration',
+		sequenceDiagram: '/#/sequenceDiagram',
+		sequenceDiagram_config: '/#/sequenceDiagram?id=configuration',
+		classDiagram: '/#/classDiagram',
+		classDiagram_config: '/#/classDiagram?id=configuration',
+		'stateDiagram-v2': '/#/stateDiagram',
+		gantt: '/#/gantt',
+		gantt_config: '/#/gantt?id=configuration',
+		pie: '/#/pie',
+		erDiagram: '/#/entityRelationshipDiagram',
+		erDiagram_config: '/#/entityRelationshipDiagram?id=styling',
+		journey: '/#/user-journey'
+	};
 	let text = '';
+	let docKey = '';
 	let language: 'mermaid' | 'json' = 'mermaid';
 	let errorMarkers: monaco.editor.IMarkerData[] = [];
 	$: language = languageMap[selectedMode];
@@ -37,6 +53,9 @@
 		if (state.updateEditor) {
 			text = selectedMode === 'code' ? state.code : state.mermaid;
 		}
+		let codeTypeMatch = /([\S]+)[\s\n]/.exec(state.code);
+		docKey = codeTypeMatch && codeTypeMatch.length > 1 ? codeTypeMatch[1] : null;
+		docKey = docKey ? docKey + (selectedMode !== 'code' ? '_config' : '') : null;
 	});
 	const tabSelectHandler = (message: CustomEvent<Tab>) => {
 		$codeStore.updateEditor = true;
@@ -136,7 +155,7 @@
 								on:click={syncDiagram}><i class="fas fa-sync" /></button>
 						{/if}
 
-						<div class="form-control">
+						<div class="form-control flex-row items-center">
 							<label class="cursor-pointer label" for="autoSync">
 								<input
 									type="checkbox"
@@ -145,6 +164,11 @@
 									bind:checked={$codeStore.autoSync} />
 								<span> Auto sync</span>
 							</label>
+							<a
+								target="_blank"
+								class="btn btn-primary btn-xs shadow-lg"
+								href="https://mermaid-js.github.io/mermaid/{docMap[docKey] || ''}"
+								><i class="far fa-eye mr-2" /> DOC</a>
 						</div>
 					</div>
 				</div>

From 3456ad33c19a8c87c9f2ed5fd77b56bf2bfc2612 Mon Sep 17 00:00:00 2001
From: kerwin612 <kerwin612@qq.com>
Date: Thu, 10 Mar 2022 23:25:20 +0800
Subject: [PATCH 04/12] Optimize style, optimize URL matching logic

---
 src/routes/edit.svelte | 87 +++++++++++++++++++++++++-----------------
 1 file changed, 53 insertions(+), 34 deletions(-)

diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte
index 63e943c1..ea639409 100644
--- a/src/routes/edit.svelte
+++ b/src/routes/edit.svelte
@@ -22,22 +22,38 @@
 		config: 'json'
 	};
 	const docMap = {
-		graph: '/#/flowchart',
-		graph_config: '/#/flowchart?id=configuration',
-		sequenceDiagram: '/#/sequenceDiagram',
-		sequenceDiagram_config: '/#/sequenceDiagram?id=configuration',
-		classDiagram: '/#/classDiagram',
-		classDiagram_config: '/#/classDiagram?id=configuration',
-		'stateDiagram-v2': '/#/stateDiagram',
-		gantt: '/#/gantt',
-		gantt_config: '/#/gantt?id=configuration',
-		pie: '/#/pie',
-		erDiagram: '/#/entityRelationshipDiagram',
-		erDiagram_config: '/#/entityRelationshipDiagram?id=styling',
-		journey: '/#/user-journey'
+		graph: {
+			code: '/#/flowchart',
+			config: '/#/flowchart?id=configuration'
+		},
+		sequenceDiagram: {
+			code: '/#/sequenceDiagram',
+			config: '/#/sequenceDiagram?id=configuration'
+		},
+		classDiagram: {
+			code: '/#/classDiagram',
+			config: '/#/classDiagram?id=configuration'
+		},
+		'stateDiagram-v2': {
+			code: '/#/stateDiagram'
+		},
+		gantt: {
+			code: '/#/gantt',
+			config: '/#/gantt?id=configuration'
+		},
+		pie: {
+			code: '/#/pie'
+		},
+		erDiagram: {
+			code: '/#/entityRelationshipDiagram',
+			config: '/#/entityRelationshipDiagram?id=styling'
+		},
+		journey: {
+			code: '/#/user-journey'
+		}
 	};
 	let text = '';
-	let docKey = '';
+	let docURL = '';
 	let language: 'mermaid' | 'json' = 'mermaid';
 	let errorMarkers: monaco.editor.IMarkerData[] = [];
 	$: language = languageMap[selectedMode];
@@ -54,8 +70,11 @@
 			text = selectedMode === 'code' ? state.code : state.mermaid;
 		}
 		let codeTypeMatch = /([\S]+)[\s\n]/.exec(state.code);
-		docKey = codeTypeMatch && codeTypeMatch.length > 1 ? codeTypeMatch[1] : null;
-		docKey = docKey ? docKey + (selectedMode !== 'code' ? '_config' : '') : null;
+		let docKey = codeTypeMatch && codeTypeMatch.length > 1 ? codeTypeMatch[1] : null;
+		docURL =
+			((docKey && docMap[docKey]) || {})[selectedMode] ||
+			((docKey && docMap[docKey]) || {})['code'] ||
+			'';
 	});
 	const tabSelectHandler = (message: CustomEvent<Tab>) => {
 		$codeStore.updateEditor = true;
@@ -147,29 +166,29 @@
 			<Card on:select={tabSelectHandler} {tabs} isCloseable={false} title="Mermaid">
 				<div slot="actions">
 					<div class="flex flex-row items-center">
+						<div class="form-control flex-row items-center">
+							<label class="cursor-pointer label" for="autoSync">
+								<span> Auto sync</span>
+								<input
+									type="checkbox"
+									class="toggle {$codeStore.autoSync ? 'btn-secondary' : 'toggle-primary'} ml-1"
+									id="autoSync"
+									bind:checked={$codeStore.autoSync} />
+							</label>
+						</div>
+
 						{#if !$codeStore.autoSync}
 							<button
-								class="btn btn-secondary btn-xs"
+								class="btn btn-secondary btn-xs mr-1"
 								title="Sync Diagram"
 								data-cy="sync"
 								on:click={syncDiagram}><i class="fas fa-sync" /></button>
 						{/if}
 
-						<div class="form-control flex-row items-center">
-							<label class="cursor-pointer label" for="autoSync">
-								<input
-									type="checkbox"
-									class="toggle toggle-primary mr-1"
-									id="autoSync"
-									bind:checked={$codeStore.autoSync} />
-								<span> Auto sync</span>
-							</label>
-							<a
-								target="_blank"
-								class="btn btn-primary btn-xs shadow-lg"
-								href="https://mermaid-js.github.io/mermaid/{docMap[docKey] || ''}"
-								><i class="far fa-eye mr-2" /> DOC</a>
-						</div>
+						<button class="btn btn-secondary btn-xs" title="View documentation">
+							<a target="_blank" href="https://mermaid-js.github.io/mermaid{docURL || ''}"
+								><i class="fas fa-book mr-1" />DOC</a>
+						</button>
 					</div>
 				</div>
 
@@ -187,9 +206,9 @@
 			<Card title="Diagram" isCloseable={false}>
 				<button
 					slot="actions"
-					class="btn btn-primary btn-xs shadow-lg"
+					class="btn btn-secondary btn-xs"
 					title="View diagram in new page"
-					on:click|stopPropagation={() => viewDiagram()}><i class="far fa-eye mr-2" /> View</button>
+					on:click|stopPropagation={() => viewDiagram()}><i class="far fa-eye mr-1" />View</button>
 
 				<div class="flex-1 overflow-auto">
 					<View />

From 0365e40c0a9940b4917e13536f95e887b7af9242 Mon Sep 17 00:00:00 2001
From: kerwin612 <kerwin612@qq.com>
Date: Fri, 11 Mar 2022 08:43:58 +0800
Subject: [PATCH 05/12] Optimized type structure

---
 src/lib/types.d.ts     |  7 +++++++
 src/routes/edit.svelte | 10 ++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/lib/types.d.ts b/src/lib/types.d.ts
index e0a139b3..7db225f5 100644
--- a/src/lib/types.d.ts
+++ b/src/lib/types.d.ts
@@ -57,4 +57,11 @@ export interface HistoryEntry {
 	url?: string;
 }
 
+export interface DocConfig {
+	[key: string]: {
+		code: string;
+		config?: string;
+	};
+}
+
 type Loader = (url: string) => Promise<State>;
diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte
index ea639409..04a098bc 100644
--- a/src/routes/edit.svelte
+++ b/src/routes/edit.svelte
@@ -12,7 +12,7 @@
 	import { onMount } from 'svelte';
 	import mermaid from 'mermaid';
 	import type monaco from 'monaco-editor';
-	import type { EditorUpdateEvent, State, Tab } from '$lib/types';
+	import type { EditorUpdateEvent, State, Tab, DocConfig } from '$lib/types';
 	import { base } from '$app/paths';
 
 	serializedState; // Weird fix for error > serializedState is not defined. Treeshaking?
@@ -21,7 +21,7 @@
 		code: 'mermaid',
 		config: 'json'
 	};
-	const docMap = {
+	const docMap: DocConfig = {
 		graph: {
 			code: '/#/flowchart',
 			config: '/#/flowchart?id=configuration'
@@ -71,10 +71,8 @@
 		}
 		let codeTypeMatch = /([\S]+)[\s\n]/.exec(state.code);
 		let docKey = codeTypeMatch && codeTypeMatch.length > 1 ? codeTypeMatch[1] : null;
-		docURL =
-			((docKey && docMap[docKey]) || {})[selectedMode] ||
-			((docKey && docMap[docKey]) || {})['code'] ||
-			'';
+		let docConfig = (docKey && docMap[docKey]) || {};
+		docURL = docConfig[selectedMode] || docConfig['code'] || '';
 	});
 	const tabSelectHandler = (message: CustomEvent<Tab>) => {
 		$codeStore.updateEditor = true;

From e12a05b8926adb3cf2584a6d806d2cb272ee8962 Mon Sep 17 00:00:00 2001
From: kerwin612 <kerwin612@qq.com>
Date: Fri, 11 Mar 2022 09:11:51 +0800
Subject: [PATCH 06/12] docMap adds flowchart configuration

---
 src/routes/edit.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte
index 04a098bc..8a8fa538 100644
--- a/src/routes/edit.svelte
+++ b/src/routes/edit.svelte
@@ -26,6 +26,10 @@
 			code: '/#/flowchart',
 			config: '/#/flowchart?id=configuration'
 		},
+		flowchart: {
+			code: '/#/flowchart',
+			config: '/#/flowchart?id=configuration'
+		},
 		sequenceDiagram: {
 			code: '/#/sequenceDiagram',
 			config: '/#/sequenceDiagram?id=configuration'

From 13d5916996563af03256c889378b24fd1648722d Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 11 Mar 2022 08:33:50 +0530
Subject: [PATCH 07/12] Minor Cleanup

---
 src/routes/edit.svelte | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte
index 8a8fa538..d31b4036 100644
--- a/src/routes/edit.svelte
+++ b/src/routes/edit.svelte
@@ -16,11 +16,16 @@
 	import { base } from '$app/paths';
 
 	serializedState; // Weird fix for error > serializedState is not defined. Treeshaking?
-	let selectedMode = 'code';
-	const languageMap = {
+
+	type Modes = 'code' | 'config';
+	type Languages = 'mermaid' | 'json';
+
+	let selectedMode: Modes = 'code';
+	const languageMap: { [key in Modes]: Languages } = {
 		code: 'mermaid',
 		config: 'json'
 	};
+	const docURLBase = 'https://mermaid-js.github.io/mermaid';
 	const docMap: DocConfig = {
 		graph: {
 			code: '/#/flowchart',
@@ -57,8 +62,8 @@
 		}
 	};
 	let text = '';
-	let docURL = '';
-	let language: 'mermaid' | 'json' = 'mermaid';
+	let docURL = docURLBase;
+	let language: Languages = 'mermaid';
 	let errorMarkers: monaco.editor.IMarkerData[] = [];
 	$: language = languageMap[selectedMode];
 	$: {
@@ -73,14 +78,16 @@
 		if (state.updateEditor) {
 			text = selectedMode === 'code' ? state.code : state.mermaid;
 		}
-		let codeTypeMatch = /([\S]+)[\s\n]/.exec(state.code);
-		let docKey = codeTypeMatch && codeTypeMatch.length > 1 ? codeTypeMatch[1] : null;
-		let docConfig = (docKey && docMap[docKey]) || {};
-		docURL = docConfig[selectedMode] || docConfig['code'] || '';
+		const codeTypeMatch = /([\S]+)[\s\n]/.exec(state.code);
+		if (codeTypeMatch && codeTypeMatch.length > 1) {
+			const docKey = codeTypeMatch[1];
+			const docConfig = docMap[docKey] ?? { code: '' };
+			docURL = docURLBase + (docConfig[selectedMode] ?? docConfig.code ?? '');
+		}
 	});
 	const tabSelectHandler = (message: CustomEvent<Tab>) => {
 		$codeStore.updateEditor = true;
-		selectedMode = message.detail.id;
+		selectedMode = message.detail.id === 'code' ? 'code' : 'config';
 	};
 	const tabs: Tab[] = [
 		{
@@ -188,8 +195,7 @@
 						{/if}
 
 						<button class="btn btn-secondary btn-xs" title="View documentation">
-							<a target="_blank" href="https://mermaid-js.github.io/mermaid{docURL || ''}"
-								><i class="fas fa-book mr-1" />DOC</a>
+							<a target="_blank" href={docURL}><i class="fas fa-book mr-1" />Docs</a>
 						</button>
 					</div>
 				</div>

From 5922b75f08e21b2be52aa198bb481bc634775da2 Mon Sep 17 00:00:00 2001
From: kerwin612 <kerwin612@qq.com>
Date: Fri, 11 Mar 2022 15:11:18 +0800
Subject: [PATCH 08/12] add test for editor-docs

---
 cypress/integration/docMap.spec.ts | 90 ++++++++++++++++++++++++++++++
 src/routes/edit.svelte             |  2 +-
 2 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 cypress/integration/docMap.spec.ts

diff --git a/cypress/integration/docMap.spec.ts b/cypress/integration/docMap.spec.ts
new file mode 100644
index 00000000..a0b64f0a
--- /dev/null
+++ b/cypress/integration/docMap.spec.ts
@@ -0,0 +1,90 @@
+describe('Editor docs tests', () => {
+	beforeEach(() => {
+		cy.clearLocalStorage();
+		cy.visit('/');
+	});
+
+	it('[Default] test', () => {
+		cy.get(`[data-cy=docs][href^="https://mermaid-js.github.io/mermaid"]`).should('exist');
+	});
+
+	it('[Flow Chart] test', () => {
+		cy.contains('Sample Diagrams').click();
+
+		cy.contains('Flow Chart').click();
+		cy.get(`[data-cy=docs][href$="/#/flowchart"]`).should('exist');
+
+		cy.contains('Config').click();
+		cy.get(`[data-cy=docs][href$="/#/flowchart?id=configuration"]`).should('exist');
+	});
+
+	it('[Sequence Diagram] test', () => {
+		cy.contains('Sample Diagrams').click();
+
+		cy.contains('Sequence Diagram').click();
+		cy.get(`[data-cy=docs][href$="/#/sequenceDiagram"]`).should('exist');
+
+		cy.contains('Config').click();
+		cy.get(`[data-cy=docs][href$="/#/sequenceDiagram?id=configuration"]`).should('exist');
+	});
+
+	it('[Class Diagram] test', () => {
+		cy.contains('Sample Diagrams').click();
+
+		cy.contains('Class Diagram').click();
+		cy.get(`[data-cy=docs][href$="/#/classDiagram"]`).should('exist');
+
+		cy.contains('Config').click();
+		cy.get(`[data-cy=docs][href$="/#/classDiagram?id=configuration"]`).should('exist');
+	});
+
+	it('[State Diagram] test', () => {
+		cy.contains('Sample Diagrams').click();
+
+		cy.contains('State Diagram').click();
+		cy.get(`[data-cy=docs][href$="/#/stateDiagram"]`).should('exist');
+
+		cy.contains('Config').click();
+		cy.get(`[data-cy=docs][href$="/#/stateDiagram"]`).should('exist');
+	});
+
+	it('[Gantt Chart] test', () => {
+		cy.contains('Sample Diagrams').click();
+
+		cy.contains('Gantt Chart').click();
+		cy.get(`[data-cy=docs][href$="/#/gantt"]`).should('exist');
+
+		cy.contains('Config').click();
+		cy.get(`[data-cy=docs][href$="/#/gantt?id=configuration"]`).should('exist');
+	});
+
+	it('[Pie Chart] test', () => {
+		cy.contains('Sample Diagrams').click();
+
+		cy.contains('Pie Chart').click();
+		cy.get(`[data-cy=docs][href$="/#/pie"]`).should('exist');
+
+		cy.contains('Config').click();
+		cy.get(`[data-cy=docs][href$="/#/pie"]`).should('exist');
+	});
+
+	it('[ER Diagram] test', () => {
+		cy.contains('Sample Diagrams').click();
+
+		cy.contains('ER Diagram').click();
+		cy.get(`[data-cy=docs][href$="/#/entityRelationshipDiagram"]`).should('exist');
+
+		cy.contains('Config').click();
+		cy.get(`[data-cy=docs][href$="/#/entityRelationshipDiagram?id=styling"]`).should('exist');
+	});
+
+	it('[User Journey] test', () => {
+		cy.contains('Sample Diagrams').click();
+
+		cy.contains('User Journey').click();
+		cy.get(`[data-cy=docs][href$="/#/user-journey"]`).should('exist');
+
+		cy.contains('Config').click();
+		cy.get(`[data-cy=docs][href$="/#/user-journey"]`).should('exist');
+	});
+});
diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte
index d31b4036..b85b6459 100644
--- a/src/routes/edit.svelte
+++ b/src/routes/edit.svelte
@@ -195,7 +195,7 @@
 						{/if}
 
 						<button class="btn btn-secondary btn-xs" title="View documentation">
-							<a target="_blank" href={docURL}><i class="fas fa-book mr-1" />Docs</a>
+							<a target="_blank" href={docURL} data-cy="docs"><i class="fas fa-book mr-1" />Docs</a>
 						</button>
 					</div>
 				</div>

From c9ad0a5a6dc7f0158814ad58a3751994382a9694 Mon Sep 17 00:00:00 2001
From: kerwin612 <kerwin612@qq.com>
Date: Sat, 12 Mar 2022 20:55:18 +0800
Subject: [PATCH 09/12] Optimize test cases

---
 cypress/integration/docMap.spec.ts | 130 +++++++++++++----------------
 src/routes/edit.svelte             |   2 +-
 2 files changed, 60 insertions(+), 72 deletions(-)

diff --git a/cypress/integration/docMap.spec.ts b/cypress/integration/docMap.spec.ts
index a0b64f0a..7edbf82e 100644
--- a/cypress/integration/docMap.spec.ts
+++ b/cypress/integration/docMap.spec.ts
@@ -1,90 +1,78 @@
 describe('Editor docs tests', () => {
-	beforeEach(() => {
-		cy.clearLocalStorage();
-		cy.visit('/');
-	});
+    beforeEach(() => {
+        cy.on('uncaught:exception', (err, runnable) => {
+            return false;
+        });
+        cy.clearLocalStorage();
+        cy.visit('/edit');
+        cy.contains('Sample Diagrams').click();
+    });
 
-	it('[Default] test', () => {
-		cy.get(`[data-cy=docs][href^="https://mermaid-js.github.io/mermaid"]`).should('exist');
-	});
+    it('[Default] test', () => {
+        cy.get(`[data-cy=docs][href^="https://mermaid-js.github.io/mermaid"]`).should('exist');
+    });
 
-	it('[Flow Chart] test', () => {
-		cy.contains('Sample Diagrams').click();
+    it('[Flow Chart] test', () => {
+        cy.contains('Flow Chart').click();
+        cy.get(`[data-cy=docs][href$="/#/flowchart"]`).should('exist');
 
-		cy.contains('Flow Chart').click();
-		cy.get(`[data-cy=docs][href$="/#/flowchart"]`).should('exist');
+        cy.contains('Config').click();
+        cy.get(`[data-cy=docs][href$="/#/flowchart?id=configuration"]`).should('exist');
+    });
 
-		cy.contains('Config').click();
-		cy.get(`[data-cy=docs][href$="/#/flowchart?id=configuration"]`).should('exist');
-	});
+    it('[Sequence Diagram] test', () => {
+        cy.contains('Sequence Diagram').click();
+        cy.get(`[data-cy=docs][href$="/#/sequenceDiagram"]`).should('exist');
 
-	it('[Sequence Diagram] test', () => {
-		cy.contains('Sample Diagrams').click();
+        cy.contains('Config').click();
+        cy.get(`[data-cy=docs][href$="/#/sequenceDiagram?id=configuration"]`).should('exist');
+    });
 
-		cy.contains('Sequence Diagram').click();
-		cy.get(`[data-cy=docs][href$="/#/sequenceDiagram"]`).should('exist');
+    it('[Class Diagram] test', () => {
+        cy.contains('Class Diagram').click();
+        cy.get(`[data-cy=docs][href$="/#/classDiagram"]`).should('exist');
 
-		cy.contains('Config').click();
-		cy.get(`[data-cy=docs][href$="/#/sequenceDiagram?id=configuration"]`).should('exist');
-	});
+        cy.contains('Config').click();
+        cy.get(`[data-cy=docs][href$="/#/classDiagram?id=configuration"]`).should('exist');
+    });
 
-	it('[Class Diagram] test', () => {
-		cy.contains('Sample Diagrams').click();
+    it('[State Diagram] test', () => {
+        cy.contains('State Diagram').click();
+        cy.get(`[data-cy=docs][href$="/#/stateDiagram"]`).should('exist');
 
-		cy.contains('Class Diagram').click();
-		cy.get(`[data-cy=docs][href$="/#/classDiagram"]`).should('exist');
+        cy.contains('Config').click();
+        cy.get(`[data-cy=docs][href$="/#/stateDiagram"]`).should('exist');
+    });
 
-		cy.contains('Config').click();
-		cy.get(`[data-cy=docs][href$="/#/classDiagram?id=configuration"]`).should('exist');
-	});
+    it('[Gantt Chart] test', () => {
+        cy.contains('Gantt Chart').click();
+        cy.get(`[data-cy=docs][href$="/#/gantt"]`).should('exist');
 
-	it('[State Diagram] test', () => {
-		cy.contains('Sample Diagrams').click();
+        cy.contains('Config').click();
+        cy.get(`[data-cy=docs][href$="/#/gantt?id=configuration"]`).should('exist');
+    });
 
-		cy.contains('State Diagram').click();
-		cy.get(`[data-cy=docs][href$="/#/stateDiagram"]`).should('exist');
+    it('[Pie Chart] test', () => {
+        cy.contains('Pie Chart').click();
+        cy.get(`[data-cy=docs][href$="/#/pie"]`).should('exist');
 
-		cy.contains('Config').click();
-		cy.get(`[data-cy=docs][href$="/#/stateDiagram"]`).should('exist');
-	});
+        cy.contains('Config').click();
+        cy.get(`[data-cy=docs][href$="/#/pie"]`).should('exist');
+    });
 
-	it('[Gantt Chart] test', () => {
-		cy.contains('Sample Diagrams').click();
+    it('[ER Diagram] test', () => {
+        cy.contains('ER Diagram').click();
+        cy.get(`[data-cy=docs][href$="/#/entityRelationshipDiagram"]`).should('exist');
 
-		cy.contains('Gantt Chart').click();
-		cy.get(`[data-cy=docs][href$="/#/gantt"]`).should('exist');
+        cy.contains('Config').click();
+        cy.get(`[data-cy=docs][href$="/#/entityRelationshipDiagram?id=styling"]`).should('exist');
+    });
 
-		cy.contains('Config').click();
-		cy.get(`[data-cy=docs][href$="/#/gantt?id=configuration"]`).should('exist');
-	});
+    it('[User Journey] test', () => {
+        cy.contains('User Journey').click();
+        cy.get(`[data-cy=docs][href$="/#/user-journey"]`).should('exist');
 
-	it('[Pie Chart] test', () => {
-		cy.contains('Sample Diagrams').click();
-
-		cy.contains('Pie Chart').click();
-		cy.get(`[data-cy=docs][href$="/#/pie"]`).should('exist');
-
-		cy.contains('Config').click();
-		cy.get(`[data-cy=docs][href$="/#/pie"]`).should('exist');
-	});
-
-	it('[ER Diagram] test', () => {
-		cy.contains('Sample Diagrams').click();
-
-		cy.contains('ER Diagram').click();
-		cy.get(`[data-cy=docs][href$="/#/entityRelationshipDiagram"]`).should('exist');
-
-		cy.contains('Config').click();
-		cy.get(`[data-cy=docs][href$="/#/entityRelationshipDiagram?id=styling"]`).should('exist');
-	});
-
-	it('[User Journey] test', () => {
-		cy.contains('Sample Diagrams').click();
-
-		cy.contains('User Journey').click();
-		cy.get(`[data-cy=docs][href$="/#/user-journey"]`).should('exist');
-
-		cy.contains('Config').click();
-		cy.get(`[data-cy=docs][href$="/#/user-journey"]`).should('exist');
-	});
+        cy.contains('Config').click();
+        cy.get(`[data-cy=docs][href$="/#/user-journey"]`).should('exist');
+    });
 });
diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte
index b85b6459..8a841ab8 100644
--- a/src/routes/edit.svelte
+++ b/src/routes/edit.svelte
@@ -86,8 +86,8 @@
 		}
 	});
 	const tabSelectHandler = (message: CustomEvent<Tab>) => {
-		$codeStore.updateEditor = true;
 		selectedMode = message.detail.id === 'code' ? 'code' : 'config';
+		$codeStore.updateEditor = true;
 	};
 	const tabs: Tab[] = [
 		{

From 617c20f2212dbb3520af203485d30ae7d7c81c0a Mon Sep 17 00:00:00 2001
From: kerwin612 <kerwin612@qq.com>
Date: Sat, 12 Mar 2022 21:13:47 +0800
Subject: [PATCH 10/12] Optimize test cases

---
 cypress/integration/docMap.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/integration/docMap.spec.ts b/cypress/integration/docMap.spec.ts
index 7edbf82e..1c5d6d58 100644
--- a/cypress/integration/docMap.spec.ts
+++ b/cypress/integration/docMap.spec.ts
@@ -1,6 +1,6 @@
 describe('Editor docs tests', () => {
     beforeEach(() => {
-        cy.on('uncaught:exception', (err, runnable) => {
+        cy.on('uncaught:exception', () => {
             return false;
         });
         cy.clearLocalStorage();

From 7445f5f00808f8fa42ab9fafb87ed9883f8e5017 Mon Sep 17 00:00:00 2001
From: kerwin612 <kerwin612@qq.com>
Date: Sat, 12 Mar 2022 21:20:21 +0800
Subject: [PATCH 11/12] Optimize test cases

---
 cypress/integration/docMap.spec.ts | 118 ++++++++++++++---------------
 1 file changed, 59 insertions(+), 59 deletions(-)
 mode change 100644 => 100755 cypress/integration/docMap.spec.ts

diff --git a/cypress/integration/docMap.spec.ts b/cypress/integration/docMap.spec.ts
old mode 100644
new mode 100755
index 1c5d6d58..e33fe9a1
--- a/cypress/integration/docMap.spec.ts
+++ b/cypress/integration/docMap.spec.ts
@@ -1,78 +1,78 @@
 describe('Editor docs tests', () => {
-    beforeEach(() => {
-        cy.on('uncaught:exception', () => {
-            return false;
-        });
-        cy.clearLocalStorage();
-        cy.visit('/edit');
-        cy.contains('Sample Diagrams').click();
-    });
+	beforeEach(() => {
+		cy.on('uncaught:exception', () => {
+			return false;
+		});
+		cy.clearLocalStorage();
+		cy.visit('/edit');
+		cy.contains('Sample Diagrams').click();
+	});
 
-    it('[Default] test', () => {
-        cy.get(`[data-cy=docs][href^="https://mermaid-js.github.io/mermaid"]`).should('exist');
-    });
+	it('[Default] test', () => {
+		cy.get(`[data-cy=docs][href^="https://mermaid-js.github.io/mermaid"]`).should('exist');
+	});
 
-    it('[Flow Chart] test', () => {
-        cy.contains('Flow Chart').click();
-        cy.get(`[data-cy=docs][href$="/#/flowchart"]`).should('exist');
+	it('[Flow Chart] test', () => {
+		cy.contains('Flow Chart').click();
+		cy.get(`[data-cy=docs][href$="/#/flowchart"]`).should('exist');
 
-        cy.contains('Config').click();
-        cy.get(`[data-cy=docs][href$="/#/flowchart?id=configuration"]`).should('exist');
-    });
+		cy.contains('Config').click();
+		cy.get(`[data-cy=docs][href$="/#/flowchart?id=configuration"]`).should('exist');
+	});
 
-    it('[Sequence Diagram] test', () => {
-        cy.contains('Sequence Diagram').click();
-        cy.get(`[data-cy=docs][href$="/#/sequenceDiagram"]`).should('exist');
+	it('[Sequence Diagram] test', () => {
+		cy.contains('Sequence Diagram').click();
+		cy.get(`[data-cy=docs][href$="/#/sequenceDiagram"]`).should('exist');
 
-        cy.contains('Config').click();
-        cy.get(`[data-cy=docs][href$="/#/sequenceDiagram?id=configuration"]`).should('exist');
-    });
+		cy.contains('Config').click();
+		cy.get(`[data-cy=docs][href$="/#/sequenceDiagram?id=configuration"]`).should('exist');
+	});
 
-    it('[Class Diagram] test', () => {
-        cy.contains('Class Diagram').click();
-        cy.get(`[data-cy=docs][href$="/#/classDiagram"]`).should('exist');
+	it('[Class Diagram] test', () => {
+		cy.contains('Class Diagram').click();
+		cy.get(`[data-cy=docs][href$="/#/classDiagram"]`).should('exist');
 
-        cy.contains('Config').click();
-        cy.get(`[data-cy=docs][href$="/#/classDiagram?id=configuration"]`).should('exist');
-    });
+		cy.contains('Config').click();
+		cy.get(`[data-cy=docs][href$="/#/classDiagram?id=configuration"]`).should('exist');
+	});
 
-    it('[State Diagram] test', () => {
-        cy.contains('State Diagram').click();
-        cy.get(`[data-cy=docs][href$="/#/stateDiagram"]`).should('exist');
+	it('[State Diagram] test', () => {
+		cy.contains('State Diagram').click();
+		cy.get(`[data-cy=docs][href$="/#/stateDiagram"]`).should('exist');
 
-        cy.contains('Config').click();
-        cy.get(`[data-cy=docs][href$="/#/stateDiagram"]`).should('exist');
-    });
+		cy.contains('Config').click();
+		cy.get(`[data-cy=docs][href$="/#/stateDiagram"]`).should('exist');
+	});
 
-    it('[Gantt Chart] test', () => {
-        cy.contains('Gantt Chart').click();
-        cy.get(`[data-cy=docs][href$="/#/gantt"]`).should('exist');
+	it('[Gantt Chart] test', () => {
+		cy.contains('Gantt Chart').click();
+		cy.get(`[data-cy=docs][href$="/#/gantt"]`).should('exist');
 
-        cy.contains('Config').click();
-        cy.get(`[data-cy=docs][href$="/#/gantt?id=configuration"]`).should('exist');
-    });
+		cy.contains('Config').click();
+		cy.get(`[data-cy=docs][href$="/#/gantt?id=configuration"]`).should('exist');
+	});
 
-    it('[Pie Chart] test', () => {
-        cy.contains('Pie Chart').click();
-        cy.get(`[data-cy=docs][href$="/#/pie"]`).should('exist');
+	it('[Pie Chart] test', () => {
+		cy.contains('Pie Chart').click();
+		cy.get(`[data-cy=docs][href$="/#/pie"]`).should('exist');
 
-        cy.contains('Config').click();
-        cy.get(`[data-cy=docs][href$="/#/pie"]`).should('exist');
-    });
+		cy.contains('Config').click();
+		cy.get(`[data-cy=docs][href$="/#/pie"]`).should('exist');
+	});
 
-    it('[ER Diagram] test', () => {
-        cy.contains('ER Diagram').click();
-        cy.get(`[data-cy=docs][href$="/#/entityRelationshipDiagram"]`).should('exist');
+	it('[ER Diagram] test', () => {
+		cy.contains('ER Diagram').click();
+		cy.get(`[data-cy=docs][href$="/#/entityRelationshipDiagram"]`).should('exist');
 
-        cy.contains('Config').click();
-        cy.get(`[data-cy=docs][href$="/#/entityRelationshipDiagram?id=styling"]`).should('exist');
-    });
+		cy.contains('Config').click();
+		cy.get(`[data-cy=docs][href$="/#/entityRelationshipDiagram?id=styling"]`).should('exist');
+	});
 
-    it('[User Journey] test', () => {
-        cy.contains('User Journey').click();
-        cy.get(`[data-cy=docs][href$="/#/user-journey"]`).should('exist');
+	it('[User Journey] test', () => {
+		cy.contains('User Journey').click();
+		cy.get(`[data-cy=docs][href$="/#/user-journey"]`).should('exist');
 
-        cy.contains('Config').click();
-        cy.get(`[data-cy=docs][href$="/#/user-journey"]`).should('exist');
-    });
+		cy.contains('Config').click();
+		cy.get(`[data-cy=docs][href$="/#/user-journey"]`).should('exist');
+	});
 });

From 5aeb4e80b12a3b7f955fee20f47da022d26577ea Mon Sep 17 00:00:00 2001
From: kerwin612 <kerwin612@qq.com>
Date: Mon, 14 Mar 2022 17:13:23 +0800
Subject: [PATCH 12/12] Optimize test cases

---
 cypress/integration/docMap.spec.ts | 54 ++++--------------------------
 1 file changed, 6 insertions(+), 48 deletions(-)

diff --git a/cypress/integration/docMap.spec.ts b/cypress/integration/docMap.spec.ts
index e33fe9a1..904e165d 100755
--- a/cypress/integration/docMap.spec.ts
+++ b/cypress/integration/docMap.spec.ts
@@ -8,71 +8,29 @@ describe('Editor docs tests', () => {
 		cy.contains('Sample Diagrams').click();
 	});
 
-	it('[Default] test', () => {
+	it('Test default loading', () => {
 		cy.get(`[data-cy=docs][href^="https://mermaid-js.github.io/mermaid"]`).should('exist');
 	});
 
-	it('[Flow Chart] test', () => {
+	it('Test to see if the correct URL loads when changing from one diagram to other', () => {
 		cy.contains('Flow Chart').click();
 		cy.get(`[data-cy=docs][href$="/#/flowchart"]`).should('exist');
 
 		cy.contains('Config').click();
 		cy.get(`[data-cy=docs][href$="/#/flowchart?id=configuration"]`).should('exist');
-	});
 
-	it('[Sequence Diagram] test', () => {
 		cy.contains('Sequence Diagram').click();
-		cy.get(`[data-cy=docs][href$="/#/sequenceDiagram"]`).should('exist');
-
-		cy.contains('Config').click();
 		cy.get(`[data-cy=docs][href$="/#/sequenceDiagram?id=configuration"]`).should('exist');
+
+		cy.contains('Code').click();
+		cy.get(`[data-cy=docs][href$="/#/sequenceDiagram"]`).should('exist');
 	});
 
-	it('[Class Diagram] test', () => {
-		cy.contains('Class Diagram').click();
-		cy.get(`[data-cy=docs][href$="/#/classDiagram"]`).should('exist');
-
-		cy.contains('Config').click();
-		cy.get(`[data-cy=docs][href$="/#/classDiagram?id=configuration"]`).should('exist');
-	});
-
-	it('[State Diagram] test', () => {
+	it("Test to check URLs for a case where config URL doesn't exist", () => {
 		cy.contains('State Diagram').click();
 		cy.get(`[data-cy=docs][href$="/#/stateDiagram"]`).should('exist');
 
 		cy.contains('Config').click();
 		cy.get(`[data-cy=docs][href$="/#/stateDiagram"]`).should('exist');
 	});
-
-	it('[Gantt Chart] test', () => {
-		cy.contains('Gantt Chart').click();
-		cy.get(`[data-cy=docs][href$="/#/gantt"]`).should('exist');
-
-		cy.contains('Config').click();
-		cy.get(`[data-cy=docs][href$="/#/gantt?id=configuration"]`).should('exist');
-	});
-
-	it('[Pie Chart] test', () => {
-		cy.contains('Pie Chart').click();
-		cy.get(`[data-cy=docs][href$="/#/pie"]`).should('exist');
-
-		cy.contains('Config').click();
-		cy.get(`[data-cy=docs][href$="/#/pie"]`).should('exist');
-	});
-
-	it('[ER Diagram] test', () => {
-		cy.contains('ER Diagram').click();
-		cy.get(`[data-cy=docs][href$="/#/entityRelationshipDiagram"]`).should('exist');
-
-		cy.contains('Config').click();
-		cy.get(`[data-cy=docs][href$="/#/entityRelationshipDiagram?id=styling"]`).should('exist');
-	});
-
-	it('[User Journey] test', () => {
-		cy.contains('User Journey').click();
-		cy.get(`[data-cy=docs][href$="/#/user-journey"]`).should('exist');
-
-		cy.contains('Config').click();
-		cy.get(`[data-cy=docs][href$="/#/user-journey"]`).should('exist');
-	});
 });