rollback #288 due to #338

Update mermaid

.eslintrc.cjs

@@ -14,6 +14,7 @@ module.exports = {
 		'*.md',
 		'snapshots.js',
 		'svelte.config.js',
+		'renovate.json',
 		'package.json',
 		'tsconfig.json'
 	],

cypress/integration/actions.spec.ts

@@ -1,9 +1,7 @@
 describe('Check actions', () => {
-	// eslint-disable-next-line mocha/no-hooks-for-single-case
 	beforeEach(() => {
 		cy.clearLocalStorage();
 		cy.visit('/edit');
-		cy.contains('Actions').click();
 	});
 	it('should update markdown code', () => {
 		cy.get('#markdown')

cypress/integration/history.spec.ts

@@ -1,8 +1,12 @@
 describe('Save History', () => {
 	beforeEach(() => {
+		cy.clock();
 		cy.clearLocalStorage();
 		cy.visit('/edit');
+		cy.contains('Actions').click();
+		cy.contains('History').click();
 	});
+
 	it('should save when clicked', () => {
 		cy.get('#historyList').find('li').should('have.length', 0);
 		cy.get('#historyList').contains('No items in History');
@@ -43,7 +47,6 @@ describe('Save History', () => {
 	});
 
 	it('should auto save history', () => {
-		cy.clock();
 		cy.get('#editor').type('  C --> HistoryTest');
 		cy.tick(70000);
 		cy.contains('Timeline').click();

cypress/integration/loadSite.spec.ts

@@ -34,6 +34,7 @@ describe('Site Loads', () => {
 
 	it('should load diagram from gist', () => {
 		cy.visit(`/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a`);
+		cy.contains('History').click();
 		cy.contains('Go shopping!!');
 		cy.contains('Revisions');
 		cy.contains('sidharthv96 v8f8f1e2');
@@ -45,6 +46,7 @@ describe('Site Loads', () => {
 		cy.visit(
 			'/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/ec9b4ab0e41e4ff6287326cd3cb47affd7851e19'
 		);
+		cy.contains('History').click();
 		cy.contains('Party');
 		cy.contains('Revisions');
 		cy.contains('sidharthv96 v7851e19');

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.2.0",
+  "__version": "8.3.1",
   "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}"

package.json

@@ -15,15 +15,15 @@
 	},
 	"devDependencies": {
 		"@cypress/snapshot": "^2.1.7",
-		"@sveltejs/adapter-static": "1.0.0-next.16",
+		"@sveltejs/adapter-static": "1.0.0-next.17",
 		"@sveltejs/kit": "1.0.0-next.147",
 		"@types/mermaid": "^8.2.7",
-		"@typescript-eslint/eslint-plugin": "^4.29.1",
-		"@typescript-eslint/parser": "^4.29.1",
-		"autoprefixer": "^10.3.1",
+		"@typescript-eslint/eslint-plugin": "^4.30.0",
+		"@typescript-eslint/parser": "^4.30.0",
+		"autoprefixer": "^10.3.3",
 		"chai": "^4.3.4",
-		"cssnano": "^5.0.7",
-		"cypress": "8.2.0",
+		"cssnano": "^5.0.8",
+		"cypress": "8.3.1",
 		"cypress-localstorage-commands": "^1.5.0",
 		"eslint": "^7.32.0",
 		"eslint-config-prettier": "^8.1.0",
@@ -31,29 +31,29 @@
 		"eslint-plugin-mocha": "^9.0.0",
 		"eslint-plugin-postcss-modules": "^1.2.1",
 		"eslint-plugin-svelte3": "^3.2.0",
-		"eslint-plugin-tailwindcss": "^1.14.1",
-		"husky": "^7.0.1",
+		"eslint-plugin-tailwindcss": "^1.14.3",
+		"husky": "^7.0.2",
 		"lint-staged": "^11.1.2",
-		"mocha": "^9.0.2",
+		"mocha": "^9.1.1",
 		"postcss": "^8.3.6",
 		"postcss-load-config": "^3.1.0",
 		"prettier": "~2.3.2",
-		"prettier-plugin-svelte": "^2.3.1",
-		"svelte": "^3.42.1",
-		"svelte-preprocess": "^4.7.4",
-		"tailwindcss": "^2.2.7",
+		"prettier-plugin-svelte": "^2.4.0",
+		"svelte": "^3.42.4",
+		"svelte-preprocess": "^4.8.0",
+		"tailwindcss": "^2.2.9",
 		"tslib": "^2.3.1",
-		"typescript": "^4.3.5"
+		"typescript": "^4.4.2"
 	},
 	"type": "module",
 	"dependencies": {
 		"@analytics/google-analytics": "^0.5.3",
-		"@macfja/svelte-persistent-store": "^1.1.1",
-		"analytics": "^0.7.13",
+		"@macfja/svelte-persistent-store": "^1.2.0",
+		"analytics": "^0.7.14",
 		"js-base64": "^3.6.1",
-		"mermaid": "^8.11.4",
+		"mermaid": "^8.12.1",
 		"moment": "^2.29.1",
-		"monaco-editor": "^0.25.2",
+		"monaco-editor": "^0.27.0",
 		"random-word-slugs": "^0.0.5"
 	},
 	"lint-staged": {

renovate.json

@@ -0,0 +1,28 @@
+{
+	"extends": [
+		"config:base",
+		":rebaseStalePrs",
+		"group:allNonMajor",
+		"schedule:earlyMondays",
+		":automergeMinor",
+		":automergeTesters",
+		":automergeLinters",
+		":automergeTypes",
+		":automergePatch"
+	],
+	"packageRules": [
+		{
+			"matchUpdateTypes": ["minor", "patch", "pin", "digest"],
+			"automerge": true
+		},
+		{
+			"matchDatasources": ["npm"],
+			"stabilityDays": 3
+		}
+	],
+	"dependencyDashboard": true,
+	"major": {
+		"dependencyDashboardApproval": true
+	},
+	"dependencyDashboardAutoclose": true
+}

src/app.html

@@ -21,27 +21,27 @@
 		/>
 		<link
 			rel="stylesheet"
-			href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.2/min/vs/editor/editor.main.min.css"
+			href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.27.0/min/vs/editor/editor.main.min.css"
 			crossorigin="anonymous"
 			referrerpolicy="no-referrer"
 		/>
 		<script>
 			var require = {
-				paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.2/min/vs' }
+				paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.27.0/min/vs' }
 			};
 		</script>
 		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.2/min/vs/loader.min.js"
+			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.27.0/min/vs/loader.min.js"
 			crossorigin="anonymous"
 			referrerpolicy="no-referrer"
 		></script>
 		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.2/min/vs/editor/editor.main.nls.min.js"
+			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.27.0/min/vs/editor/editor.main.nls.min.js"
 			crossorigin="anonymous"
 			referrerpolicy="no-referrer"
 		></script>
 		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.2/min/vs/editor/editor.main.js"
+			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.27.0/min/vs/editor/editor.main.js"
 			crossorigin="anonymous"
 			referrerpolicy="no-referrer"
 		></script>

src/lib/components/actions.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { browser } from '$app/env';
+
 	import Card from '$lib/components/card/card.svelte';
 	import type { State } from '$lib/types';
 	import { codeStore } from '$lib/util/state';
@@ -131,6 +133,10 @@
 	let imagemodeselected = 'auto';
 	let userimagesize = 1080;
 
+	let isNetlify = false;
+	if (browser && ['mermaid.live', 'netlify'].some((path) => window.location.host.includes(path))) {
+		isNetlify = true;
+	}
 	codeStore.subscribe((state: State) => {
 		const stateCopy = JSON.parse(JSON.stringify(state));
 		if (typeof stateCopy.mermaid === 'string') {
@@ -143,7 +149,7 @@
 	});
 </script>
 
-<Card title="Actions" isOpen={false}>
+<Card title="Actions" isOpen={true}>
 	<div class="flex flex-wrap gap-2 m-2">
 		{#if isClipboardAvailable()}
 			<button class="action-btn w-full" on:click={onCopyClipboard}
@@ -194,5 +200,12 @@
 				<button class="btn text-white flex-auto" on:click={loadGist}> Load Gist </button>
 			</label>
 		</div>
+		{#if isNetlify}
+			<div class="w-full flex items-center justify-center">
+				<a class="link underline text-gray-500 text-sm" href="https://netlify.com">
+					This site is powered by Netlify
+				</a>
+			</div>
+		{/if}
 	</div>
 </Card>

src/lib/components/card/card.svelte

@@ -10,7 +10,9 @@
 </script>
 
 <div class="bg-white rounded overflow-hidden shadow m-2 flex-grow flex flex-col">
-	<div class="bg-indigo-400 border-gray-400 p-2 flex-none" on:click={() => (isOpen = !isOpen)}>
+	<div
+		class="bg-indigo-400 border-gray-400 p-2 flex-none cursor-pointer"
+		on:click={() => (isOpen = !isOpen)}>
 		<div class="flex justify-between">
 			<Tabs on:select {tabs} bind:isOpen {title} {isCloseable} />
 			<div class="flex gap-x-4 items-center text-white">

src/lib/components/card/tabs.svelte

@@ -27,12 +27,12 @@
 			{#each tabs as tab}
 				<li class="mr-2 last:mr-0 w-28 h-6 flex-auto text-center">
 					<div
-						class="text cursor-pointer font-semibold min-w-16 w-auto px-2 py-1 -mb-4 rounded-t  block leading-normal {activeTabID ===
+						class="text cursor-pointer font-semibold min-w-16 w-auto px-2 py-1 -mb-4 rounded-t flex justify-center items-center leading-normal {activeTabID ===
 						tab.id
 							? 'text-indigo-500 bg-white border-white'
 							: 'text-white bg-indigo-500 border-indigo-500 hover:bg-indigo-600'}"
 						on:click|stopPropagation={() => toggleTabs(tab)}>
-						<i class={tab.icon} />
+						<i class="{tab.icon} mr-1" />
 						{tab.title}
 					</div>
 				</li>

src/lib/components/editor/editor.svelte

@@ -14,11 +14,10 @@
 	export let editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
 		value: text,
 		language: language,
-		scrollBeyondLastLine: false,
 		minimap: {
 			enabled: false
 		},
-		theme: 'myCoolTheme',
+		theme: 'mermaidTheme',
 		overviewRulerLanes: 0
 	};
 	export let errorMarkers: monaco.editor.IMarkerData[] = [];
@@ -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

src/lib/components/editor/util.ts

@@ -36,7 +36,7 @@ export const initEditor = (monacoEditor): void => {
 		]
 	});
 
-	monacoEditor.editor.defineTheme('myCoolTheme', {
+	monacoEditor.editor.defineTheme('mermaidTheme', {
 		base: 'vs',
 		inherit: false,
 		rules: [

src/lib/components/history/history.svelte

@@ -83,7 +83,7 @@
 		}
 	});
 
-	let isOpen = true;
+	let isOpen = false;
 </script>
 
 <Card on:select={tabSelectHandler} bind:isOpen {tabs} title="History">

src/lib/components/history/history.ts

@@ -1,4 +1,5 @@
-import { derived, Readable, Writable, writable, get } from 'svelte/store';
+import { derived, writable, get } from 'svelte/store';
+import type { Readable, Writable } from 'svelte/store';
 import { persist, localStorage } from '@macfja/svelte-persistent-store';
 import { generateSlug } from 'random-word-slugs';
 import type { HistoryEntry, HistoryType } from '$lib/types';

src/lib/util/loading.ts

@@ -1,4 +1,5 @@
-import { writable, Writable } from 'svelte/store';
+import { writable } from 'svelte/store';
+import type { Writable } from 'svelte/store';
 import type { LoadingState } from '$lib/types';
 
 const defaultLoading: LoadingState = {