Merge branch 'master' into fix-base64-in-urls

docs/bundle.css

@@ -2476,5 +2476,6 @@
 #view.svelte-1lgruaz{border:1px solor darkred;flex:1}.error.svelte-1lgruaz{opacity:0.5}
 #card.svelte-94c5zs{border:1px solid lightgray;margin-bottom:16px}#title.svelte-94c5zs{border-bottom:1px solid lightgray}#content.svelte-94c5zs{padding-top:16px}.padding.svelte-94c5zs{padding:16px}
 #tag.svelte-kzz8td{height:auto;margin:0 8px 0 0;padding:0 7px;font-size:12px;line-height:20px;white-space:nowrap;border:1px solid #d9d9d9;border-radius:4px;cursor:default;font-size:smaller;color:#52c41a;background:#f6ffed;border-color:#b7eb8f;margin-left:8px}
+#markdown.svelte-13581ad{padding:7px;font-family:monospace;font-size:14px;width:300px}label[for="markdown"].svelte-13581ad{cursor:pointer;color:-webkit-link;color:-moz-link;color:blue;text-decoration:underline}
 #editor-root.svelte-f0aro2{display:flex;height:100%}#col1.svelte-f0aro2{width:35%}#col2.svelte-f0aro2{width:65%;padding-left:32px}#app-title.svelte-f0aro2{border-bottom:1px solid lightgrey;padding-bottom:32px;margin-bottom:32px;font-size:28px;font-weight:400;margin-top:0}#power.svelte-f0aro2{width:100%;display:flex;justify-content:flex-end;align-items:center}
 #view-page.svelte-ylwsal{display:flex;height:100%}

src/components/Links.svelte

@@ -49,16 +49,36 @@ export const onDownloadSVG = event => {
 	)}.svg`
 	console.log('event', event);
 };
+export const onCopyMarkdown = event => {
+  event.target.select();
+  document.execCommand('Copy');
+}
 
 let url = '/mermaid-live-editor/#/view';
 let iUrl;
+let mdCode;
 const unsubscribe = codeStore.subscribe( state => {
-	url = '/mermaid-live-editor/#/view/' + Base64.encodeURI(JSON.stringify(state));
-	iUrl = `https://mermaid.ink/img/${Base64.encodeURI(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>
 
-<style></style>
+<style>
+#markdown {
+  padding: 7px;
+  font-family: monospace;
+  font-size: 14px;
+  width: 300px;
+}
+label[for="markdown"] {
+  cursor: pointer;
+  color: -webkit-link;
+  color: -moz-link;
+  color: blue;
+  text-decoration: underline;
+}
+</style>
 
 <div id="links" >
 	<a href="{url}" use:link>Link to view</a>
@@ -70,3 +90,7 @@ const unsubscribe = codeStore.subscribe( state => {
 		Download PNG
 	</a>
 </div>
+<p>
+  <label for="markdown">Copy Markdown</label>
+  <input id="markdown" type="text" value="{mdCode}" on:click={onCopyMarkdown} />
+</p>

src/components/View.svelte

@@ -113,6 +113,9 @@ let insertSvg = function(svgCode, bindFunctions){
 		border: 1px solor darkred;
 		flex: 1;
 	}
+	#container {
+		overflow-x: auto;
+	}
 	.error {
 		opacity: 0.5;
 	}
@@ -120,4 +123,4 @@ let insertSvg = function(svgCode, bindFunctions){
 
 <div id="view" class="{codeClasses} {configClasses}">
 	<div id="container" bind:this={container}></div>
-</div>
+</div>