Re-add share functionality

src/app/App.ts

@@ -45,6 +45,7 @@ export const App = {
   language: new LocalStorageProperty('language', 'en')
     .watch(Tracker.dimLanguage),
   model: new Property<typeof config.models[0] | null>(null),
+  jsonOutput: new Property(''),
   errorsVisible: new Property(false),
   jsonError: new Property<string | null>(null),
   preview: new Property<Preview | null>(null)

src/app/Router.ts

@@ -1,4 +1,4 @@
-import { App } from './App';
+import { App, Models } from './App';
 import { View } from './views/View';
 import { Home } from './views/Home'
 import { Generator } from './views/Generator'
@@ -10,6 +10,8 @@ const categories = config.models.filter(m => m.category === true)
 
 const router = async () => {
   const urlParts = location.pathname.split('/').filter(e => e)  
+  const urlParams = new URLSearchParams(location.search)
+
   const target = document.getElementById('app')!
   const view = new View()
   let title = locale('title.home')
@@ -22,6 +24,12 @@ const router = async () => {
     target.innerHTML = Home(view)
   } else {
     App.model.set(config.models.find(m => m.id === urlParts.join('/'))!)
+    if (urlParams.has('q')) {
+      try {
+        const data = atob(urlParams.get('q') ?? '')
+        Models[App.model.get()!.id].reset(JSON.parse(data))
+      } catch (e) {}
+    }
     target.innerHTML = Generator(view)
     if (App.model.get()) {
       title = locale('title.generator', [locale(App.model.get()!.id)])

src/app/components/panels/SourcePanel.ts

@@ -8,7 +8,8 @@ import { App } from '../../App';
 export const SourcePanel = (view: View, model: DataModel) => {
   const updateContent = (el: HTMLTextAreaElement) => {
     const data = model.schema.hook(transformOutput, new ModelPath(model), model.data);
-    el.value = JSON.stringify(data, null, 2)
+    App.jsonOutput.set(JSON.stringify(data, null, 2))
+    el.value = App.jsonOutput.get()
   }
   const source = view.register(el => {
     updateContent(el as HTMLTextAreaElement)
@@ -42,7 +43,16 @@ export const SourcePanel = (view: View, model: DataModel) => {
     Tracker.download()
   }
   const shareSource = (el: Element) => {
-    el.closest('.panel-controls')?.querySelector('input')
+    const shareInput = el.closest('.panel-controls')?.querySelector('input')!
+    const data = btoa(JSON.stringify(JSON.parse(App.jsonOutput.get())))
+    const url = window.location.origin + window.location.pathname + '?q=' + data
+    shareInput.value = url
+    shareInput.style.display = 'inline-block'
+    document.body.addEventListener('click', evt => {
+      shareInput.style.display = 'none'
+    }, { capture: true, once: true })
+    shareInput.select()
+    document.execCommand('copy');
     Tracker.share()
   }
   return `<div class="panel source-panel">