Add permalink popup & copy button.

Author: BigBlueHat

playground/next/editor.mjs

@@ -349,6 +349,14 @@ window.app = createApp({
     }
     return '';
   },
+  get permalinkURL() {
+    const url = new URL(window.location);
+    const hash = new URLSearchParams();
+    hash.set('json-ld', JSON.stringify(this.doc));
+    hash.set('startTab', `tab-${this.outputTab}`);
+    url.hash = hash.toString();
+    return url.toString();
+  },
   get sideDoc() {
     if (this.outputTab === 'framed') {
       return 'frameDoc';
@@ -370,6 +378,14 @@ window.app = createApp({
       return 'Context URL';
     }
   },
+  copyPermalink() {
+    const url = this.permalinkURL;
+    navigator.clipboard.writeText(url).then(() => {
+      console.log('Permalink copied to clipboard:', url);
+    }).catch(err => {
+      console.error('Failed to copy permalink:', err);
+    });
+  },
   // methods
   async retrieveDoc(_editor, docVar, url) {
     try {

playground/next/index.html

@@ -70,6 +70,18 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
   </div>
 
   <div class="ui right floated buttons">
+    <button id="permalink" class="ui icon button" data-position="left center">
+      <i class="icon linkify"></i>
+    </button>
+    <div class="ui popup" style="min-width: 20em;">
+      <div class="ui top attached label">Share this</div>
+      <div class="ui fluid action input">
+        <input type="text" readonly v-model="permalinkURL" @focus="$event.target.select()">
+        <button class="ui icon button" @click="copyPermalink()">
+          <i class="icon copy"></i>
+        </button>
+      </div>
+    </div>
     <button id="keyboard-shortcuts" class="ui icon button" data-position="left center">
       <i class="icon keyboard"></i>
     </button>