Adding Link to view

src/components/Config.svelte

@@ -18,6 +18,7 @@ export let code = '';
 export let error = false;
 
 let edit;
+let editorElem = null;
 
 let decorations = [];
 const decArr = [];
@@ -42,14 +43,18 @@ const handleConfUpdate =  conf => {
 };
 
 const unsubscribe = codeStore.subscribe( state => {
+	if(editorElem === null) {
+		console.log('Starting stuff', document.getElementById('editor-conf'));
+		editorElem = document.getElementById('editor-conf');
+	}
 	if(!conf && state) {
 		conf = JSON.stringify(state.mermaid, null, 2);
 	}
 	if(state) {
 		code = state.code;
 	}
-	if(!edit && conf) {
-		edit = monaco.editor.create(document.getElementById('editor-conf'), {
+	if(!edit && conf && (editorElem!==null)) {
+		edit = monaco.editor.create(editorElem, {
 			value: [
 				conf,
 			].join('\n'),

src/components/Editor.svelte

@@ -19,6 +19,7 @@ export let error = false;
 
 let decorations = [];
 const decArr = [];
+let editorElem = null;
 const handleCodeUpdate = code => {
 	try {
 		mermaid.parse(code);
@@ -45,14 +46,19 @@ const handleCodeUpdate = code => {
 };
 
 const unsubscribe = codeStore.subscribe( state => {
+	if(editorElem === null) {
+		console.log('Starting stuff', document.getElementById('editor'));
+		editorElem = document.getElementById('editor');
+	}
 	if(!code && state) {
 		code = state.code;
 	}
 	if(state) {
 		conf = state.mermaid;
 	}
-	if(!edit && code) {
-		edit = monaco.editor.create(document.getElementById('editor'), {
+	if(!edit && code && (editorElem !== null)) {
+		console.log('creatinf editor');
+		edit = monaco.editor.create(editorElem, {
 			value: [
 				code,
 			].join('\n'),
@@ -81,6 +87,7 @@ initEditor(monaco);
 
 onMount(async () => {
 	console.log('Mounting editor');
+	// editorElem = document.querySelector('#editor')
 	self.MonacoEnvironment = {
 		getWorkerUrl: function (moduleId, label) {
 			return './editor.worker.bundle.js';

src/components/Links.svelte

@@ -0,0 +1,36 @@
+<script>
+import { errorStore } from '../error-store.js';
+import {link} from 'svelte-spa-router';
+import { Base64 } from 'js-base64'
+import { onMount } from 'svelte';
+import { codeStore } from '../code-store.js';
+
+onMount(async () => {
+});
+
+let url = '/view';
+const unsubscribe = codeStore.subscribe( state => {
+	url = '/#/view/' + Base64.encode(JSON.stringify(state));
+});
+</script>
+
+<style>
+	#error {
+		background: darkred;
+		color:  white;
+		flex: 1;
+		padding: 10px;
+		/* position: absolute; */
+
+	}
+	.invisible {
+		display: none;
+	}
+	.visible {
+		display: block;
+	}
+</style>
+
+<div id="links" >
+	<a href="{url}" use:link>Link to view</a>
+</div>

src/components/View.svelte

@@ -38,7 +38,7 @@ let insertSvg = function(svgCode, bindFunctions){
 			codeClasses = '';
 		} else {
 			codeClasses = 'error';
-			console.log('error: ', typeof _error);
+			console.log('code error: ', _error);
 		}
 	});
 	const unsubscribeConfigError = configStore.subscribe( _error => {
@@ -46,7 +46,7 @@ let insertSvg = function(svgCode, bindFunctions){
 			configClasses = '';
 		} else {
 			configClasses = 'error';
-			console.log('error: ', typeof _error);
+			console.log('conf error: ', _error);
 		}
 	});
 </script>

src/error-store.js

@@ -1,3 +1,3 @@
 import { writable } from 'svelte/store';
 
-export const errorStore = writable({});
+export const errorStore = writable(undefined);

src/routes/Edit.svelte

@@ -4,6 +4,7 @@ import Editor from '../components/Editor.svelte';
 import Config from '../components/Config.svelte';
 import View from '../components/View.svelte';
 import Card from '../components/Card.svelte';
+import Links from '../components/Links.svelte';
 import { fromUrl } from '../code-store.js';
 
 onMount(async () => {
@@ -53,7 +54,7 @@ onMount(async () => {
 		</div>
 		<div id="col2">
 			<Card title="Preview"><View /></Card>
-			<Card title="Actions">bla boac</Card>
+			<Card title="Actions"><Links /></Card>
 		</div>
 	</div>
 </div>

src/routes/View.svelte

@@ -2,8 +2,10 @@
 import { onMount } from 'svelte';
 import Editor from '../components/Editor.svelte';
 import View from '../components/View.svelte';
+import { fromUrl } from '../code-store.js';
 
 onMount(async () => {
+	fromUrl(params.data);
 });
 
 	export let code = '';
@@ -12,7 +14,7 @@ onMount(async () => {
 	export let error = {};
 	export let token = '';
 	export let expected = '';
-
+	export let params = {};
 </script>
 
 <style>
@@ -23,4 +25,5 @@ onMount(async () => {
 </style>
 
 <div id="view-page">
+	<View />
 </div>