Merge pull request #7 from mcous/fix-base64-in-urls

fix(url): use URI-safe base64 encoding in URLs

src/code-store.js

@@ -35,5 +35,5 @@ export const fromUrl = data => {
 };
 export const updateCodeStore = newState => {
   codeStore.set(newState);
-  push('/edit/' + Base64.encode(JSON.stringify(newState)))
-};
+  push('/edit/' + Base64.encodeURI(JSON.stringify(newState)))
+};

src/components/Config.svelte

@@ -38,7 +38,7 @@ const handleConfUpdate =  conf => {
 		console.log('Error in parsed', e);
 		configErrorStore.set(e);
 		const str = JSON.stringify({ code, mermaid: oldConf });
-		push('/edit/' + Base64.encode(str))
+		push('/edit/' + Base64.encodeURI(str))
 	}
 };
 

src/components/Editor.svelte

@@ -36,7 +36,7 @@ const handleCodeUpdate = code => {
 			codeErrorStore.set(e);
 			console.log('Error in parsed', e.hash);
 			const str = JSON.stringify({ code: code, mermaid: conf });
-			push('/edit/' + Base64.encode(str))
+			push('/edit/' + Base64.encodeURI(str))
 			const l = e.hash.line;
 			decArr.push(edit.deltaDecorations([], [
 				{ range: new monaco.Range(e.hash.loc.first_line,e.hash.loc.last_line,e.hash.loc.first_column,e.hash.loc.last_column), options: { inlineClassName: 'myInlineDecoration' }}]

src/components/Links.svelte

@@ -58,9 +58,9 @@ let url = '/mermaid-live-editor/#/view';
 let iUrl;
 let mdCode;
 const unsubscribe = codeStore.subscribe( state => {
-	url = '/mermaid-live-editor/#/view/' + Base64.encode(JSON.stringify(state));
-	iUrl = `https://mermaid.ink/img/${Base64.encode(JSON.stringify(state))}`;
-	mdCode = `[![](${iUrl})](${window.location.protocol}//${window.location.host}${window.location.pathname}#/edit/${Base64.encode(JSON.stringify(state))})`;
+url = '/mermaid-live-editor/#/view/' + Base64.encodeURI(JSON.stringify(state));
+iUrl = `https://mermaid.ink/img/${Base64.encodeURI(JSON.stringify(state))}`;
+ mdCode = `[![](${iUrl})](${window.location.protocol}//${window.location.host}${window.location.pathname}#/edit/${Base64.encodeURI(JSON.stringify(state))})`;
 });
 </script>
 
@@ -90,8 +90,7 @@ label[for="markdown"] {
 		Download PNG
 	</a>
 </div>
-
 <p>
   <label for="markdown">Copy Markdown</label>
   <input id="markdown" type="text" value="{mdCode}" on:click={onCopyMarkdown} />
-</p>
+</p>