feat: Add troubleshooting if link is broken

src/lib/util/state.ts

@@ -25,6 +25,17 @@ export const defaultState: State = {
 	updateDiagram: true
 };
 
+const urlParseFailedState = `graph TD
+    A[Loading URL failed. We can try to figure out why.] -->|Decode JSON| B(Please check the console to see the JSON and error details.)
+    B --> C{Is the JSON correct?}
+    C -->|Yes| D(Please Click here to Raise an issue in github.<br/>Including the broken link in the issue <br/> will speed up the fix.)
+    C -->|No| E{Did someone <br/>send you this link?}
+    E -->|Yes| F[Ask them to send <br/>you the complete link]
+    E -->|No| G{Did you copy <br/> the complete URL?}
+    G --> |Yes| D
+    G --> |"No :("| H(Try using the Timeline tab in History <br/>from same browser you used to create the diagram.)
+    click D href "https://github.com/mermaid-js/mermaid-live-editor/issues/new?assignees=&labels=bug&template=bug_report.md&title=Broken%20link" "Raise issue"`;
+
 export const codeStore = persist(writable(defaultState), localStorage(), 'codeStore');
 export const base64State: Readable<string> = derived([codeStore], ([code], set) => {
 	set(toBase64(JSON.stringify(code), true));
@@ -32,8 +43,9 @@ export const base64State: Readable<string> = derived([codeStore], ([code], set)
 
 export const loadState = (data: string): void => {
 	let state: State;
+	let stateStr: string;
 	try {
-		const stateStr = fromBase64(data);
+		stateStr = fromBase64(data);
 		console.log(`Trying to load state: ${stateStr}`);
 		state = JSON.parse(stateStr);
 		const mermaidConfig =
@@ -50,11 +62,11 @@ export const loadState = (data: string): void => {
 
 		state.mermaid = JSON.stringify(mermaidConfig, null, 2);
 	} catch (e) {
+		state = get(codeStore);
 		if (data) {
 			console.error('Init error', e);
+			state.code = urlParseFailedState;
 		}
-		state = get(codeStore);
-		console.log(state);
 	}
 	updateCodeStore({ ...state, updateEditor: true });
 };