Add share functionality

src/app/app.ts

@@ -115,6 +115,7 @@ const sourceControlsToggle = document.getElementById('source-controls-toggle')!
 const sourceControlsMenu = document.getElementById('source-controls-menu')!
 const sourceControlsCopy = document.getElementById('source-controls-copy')!
 const sourceControlsDownload = document.getElementById('source-controls-download')!
+const sourceControlsShare = document.getElementById('source-controls-share')!
 const sourceToggle = document.getElementById('source-toggle')!
 const treeControlsToggle = document.getElementById('tree-controls-toggle')!
 const treeControlsMenu = document.getElementById('tree-controls-menu')!
@@ -299,6 +300,19 @@ Promise.all([
     downloadAnchor.click()
   })
 
+  sourceControlsShare.addEventListener('click', evt => {
+    const data = btoa(JSON.stringify(JSON.parse(views.source.target.value)));
+    const url = window.location.origin + window.location.pathname + '?q=' + data
+    const shareInput = document.getElementById('source-controls-share-input') as HTMLInputElement
+    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');
+  })
+
   treeControlsToggle.addEventListener('click', evt => {
     treeControlsMenu.style.visibility = 'visible'
     document.body.addEventListener('click', evt => {
@@ -348,6 +362,8 @@ Promise.all([
     }
     selected = modelFromPath(target) ?? ''
 
+    const params = new URLSearchParams(window.location.search);
+
     const panels = [treeViewEl, sourceViewEl, errorsViewEl]
     if (models[selected] === undefined) {
       homeViewEl.style.display = '';
@@ -377,7 +393,13 @@ Promise.all([
       (document.querySelector('.gutter') as HTMLElement).style.display = ''
       modelSelector.style.display = ''
       panels.forEach(v => v.style.display = '')
+      
+      if (params.has('q')) {
+        const data = atob(params.get('q')!)
+        models[selected].reset(JSON.parse(data))
+      }
     }
+
     updateLanguage(LOCALES.language)
   }
   reload(location.pathname, false)

src/index.html

@@ -80,6 +80,7 @@
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path></svg>
             <span data-i18n="copy"></span>
           </button>
+          <input type="text" id="source-controls-share-input" style="display: none;"></input>
         </div>
         <div class="source-controls-menu btn-group" id="source-controls-menu">
           <button class="btn" id="source-controls-download">

src/styles/global.css

@@ -220,6 +220,19 @@ body {
   padding: 5px;
 }
 
+.source-controls input {
+  margin-right: 5px;
+  background: var(--background);
+  color: var(--text);
+  font-size: 17px;
+  border: none;
+  transition: background-color var(--style-transition), color var(--style-transition);
+}
+
+.source-controls input::selection {
+  background-color: var(--selection);
+}
+
 .gutter {
   border-color: var(--border) !important;
   transition: border-color var(--style-transition);