Misc

src/lib/Util/state.ts

@@ -42,9 +42,24 @@ export const updateCodeStore = (newState: State): void => {
 	});
 };
 
-export const updateCode = (code: string, updateEditor: boolean): void => {
+let prompted = false;
+export const updateCode = (code: string, updateEditor: boolean, updateDiagram = false): void => {
+	const lines = (code.match(/\n/g) || '').length + 1;
+
+	if (lines > 50 && !prompted && get(codeStore).autoSync) {
+		const turnOff = confirm(
+			'Long diagram deteced. Turn off Auto Sync? Click the sync logo to manually sync.'
+		);
+		prompted = true;
+		if (turnOff) {
+			updateCodeStore({
+				autoSync: false
+			} as State);
+		}
+	}
+
 	codeStore.update((state) => {
-		return { ...state, code, updateEditor };
+		return { ...state, code, updateEditor, updateDiagram };
 	});
 };
 

src/lib/components/actions.svelte

@@ -128,10 +128,10 @@
 		<button class="btn flex-auto" on:click={onDownloadPNG}> Download PNG </button>
 		<button class="btn flex-auto" on:click={onDownloadSVG}> Download SVG </button>
 		<button class="btn flex-auto">
-			<a class="link-style" href={iUrl}>Link to Image</a>
+			<a class="link-style" target="_blank" href={iUrl}>Link to Image</a>
 		</button>
 		<button class="btn flex-auto">
-			<a class="link-style" href={svgUrl}>Link to SVG</a>
+			<a class="link-style" target="_blank" href={svgUrl}>Link to SVG</a>
 		</button>
 
 		<div class="flex gap-2 items-center">

src/lib/components/navbar.svelte

@@ -12,10 +12,6 @@
 			title: 'Tutorial',
 			href: 'https://github.com/mermaid-js/mermaid/blob/develop/docs/Tutorials.md'
 		},
-		{
-			title: 'Github',
-			href: 'https://github.com/mermaid-js/mermaid-live-editor'
-		},
 		{
 			title: 'Mermaid',
 			href: 'https://github.com/mermaid-js/mermaid'
@@ -23,6 +19,10 @@
 		{
 			title: 'CLI',
 			href: 'https://github.com/mermaid-js/mermaid-cli'
+		},
+		{
+			title: 'Github',
+			href: 'https://github.com/mermaid-js/mermaid-live-editor'
 		}
 	];
 </script>

src/lib/components/preset.svelte

@@ -73,7 +73,7 @@
 	};
 
 	const loadSampleDiagram = (diagramType: string): void => {
-		updateCode(samples[diagramType], true);
+		updateCode(samples[diagramType], true, true);
 	};
 </script>