update copy / paste

KonnorRogers · Dec 19, 2024 · 2d9cdb3 · 2d9cdb3
1 parent 45ffbce
commit 2d9cdb3
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 7 deletions.
diff --git a/docs/frontend/javascript/controllers/clipboard_controller.js b/docs/frontend/javascript/controllers/clipboard_controller.js
@@ -14,16 +14,35 @@ export default class ClipboardController extends Controller {
     }
   }
 
+  /**
+   * @param {string} str
+   */
+  unescapeHTML (str) {
+      return str
+        .replace(/&gt;/g, ">")
+        .replace(/&lt;/g, "<")
+        .replace(/&quot;/g, "\"")
+        .replace(/&#x27;/g, "'")
+        .replace(/&amp;/g, "&")
+  }
+
   handleClick (evt) {
     const el = /** @type {HTMLElement} */ (this.element.getRootNode()).querySelector(`#${this.element.getAttribute("for")}`)
-    // Only for <light-code>
-    if (el.localName !== "light-code") { return }
 
-    const lightCode = /** @type {import("light-pen/exports/components/light-code/light-code.js").default} */  (el)
+    let code = ""
+
+    // Only for <light-code>
+    if (el.localName === "light-code") {
+      const lightCode = /** @type {import("light-pen/exports/components/light-code/light-code.js").default} */  (el)
+      code = lightCode.code
+    } else {
+      code = this.unescapeHTML(el.innerHTML)
+    }
 
-    lightCode.code
-    navigator.clipboard.writeText(lightCode.code).then(() => {
+    navigator.clipboard.writeText(code).then(() => {
       this.element.dispatchEvent(new Event("clipboard-copy", { bubbles: true, composed: true, cancelable: false }))
+    }).catch((err) => {
+      console.error(err)
     })
   }
 

diff --git a/docs/plugins/builders/inspectors.rb b/docs/plugins/builders/inspectors.rb
@@ -85,15 +85,16 @@ def syntax_highlight(document)
           </div>
 
           <sl-tooltip content="Copy">
-            <clipboard-copy
+            <button
               for='#{id}'
               class='button clipboard clipboard--idle syntax-block__clipboard'
               aria-label='Copy to clipboard'
               data-controller='clipboard'
+              type="button"
             >
               <sl-icon class='clipboard__icon--success' name='clipboard-check'></sl-icon>
               <sl-icon class='clipboard__icon--idle' name='clipboard'></sl-icon>
-            </clipboard-copy>
+            </button>
           </sl-tooltip>
 
           <script type="text/plain" id='#{id}' hidden>#{CGI.escape_html(text)}</script>