Fix the copy button

Author: NullVoxPopuli

apps/repl/app/components/limber/copy-menu.gts

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { on } from '@ember/modifier';
 
-import { getSnippetElement, toClipboard, withExtraStyles } from './copy-utils';
+import { copyToClipboard, getSnippetElement } from './copy-utils';
 import Menu from './menu';
 
 /**
@@ -17,7 +17,7 @@ export default class CopyMenu extends Component {
   copyAsImage = async (event: Event) => {
     let code = getSnippetElement(event);
 
-    await withExtraStyles(code, () => toClipboard(code));
+    await copyToClipboard(code);
   };
 
   <template>

apps/repl/app/components/limber/copy-utils.ts

@@ -1,3 +1,5 @@
+import { assert } from '@ember/debug';
+
 import { toBlob, toPng } from 'html-to-image';
 
 export function getSnippetElement(event: Event) {
@@ -39,22 +41,21 @@ export function getSnippetElement(event: Event) {
   throw new Error('Could not find snippet element');
 }
 
-export async function withExtraStyles(target: HTMLElement, next: () => Promise<void>) {
-  let pre = target.querySelector('pre');
+export async function copyToClipboard(target: HTMLElement) {
+  /**
+   * 1. clone
+   * 2. remove extra styles
+   * 3. image
+   * 3. clipboard
+   */
+  let toCopy = (target.querySelector('pre') || target).cloneNode();
 
-  if (!pre) {
-    return await next();
-  }
+  assert(`Element to copy must be an HTMLElement`, toCopy instanceof HTMLElement);
 
-  pre.classList.add('drop-shadow-lg');
-  pre.style.margin = '0';
+  toCopy.classList.add('drop-shadow-lg');
+  toCopy.style.margin = '0';
 
-  try {
-    await next();
-  } finally {
-    pre.classList.remove('drop-shadow-lg');
-    pre.setAttribute('style', '');
-  }
+  await toClipboard(toCopy);
 }
 
 export async function toClipboard(target: HTMLElement) {
@@ -67,6 +68,10 @@ export async function toClipboard(target: HTMLElement) {
       return false;
     }
 
+    if (node.classList.contains('limber__menu__content')) {
+      return false;
+    }
+
     return true;
   };