Merge pull request #1817 from NullVoxPopuli/fix-copy-button

Fix the copy button (when copying snippets)

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

@@ -39,25 +39,35 @@ 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');
-
-  if (!pre) {
-    return await next();
-  }
-
-  pre.classList.add('drop-shadow-lg');
-  pre.style.margin = '0';
+/**
+ * Cloning elements for screenshotting is hard.
+ * Look at all this:
+ *   https://github.com/bubkoo/html-to-image/blob/128dc3edfde95d6ac636f2756630f5cbd6f7c8df/src/clone-node.ts#L231
+ *
+ * So instead, we jitter a bit
+ */
+export async function copyToClipboard(toCopy: HTMLElement) {
+  let pre = toCopy.querySelector('pre');
 
   try {
-    await next();
+    pre?.classList.add('drop-shadow-lg');
+    Object.assign(toCopy.style, {
+      margin: 0,
+      display: 'inline-block',
+      width: 'fit-content',
+    });
+    await toClipboard(toCopy);
   } finally {
-    pre.classList.remove('drop-shadow-lg');
-    pre.setAttribute('style', '');
+    pre?.classList.remove('drop-shadow-lg');
+    Object.assign(toCopy.style, {
+      margin: 'unset',
+      display: 'unset',
+      width: 'unset',
+    });
   }
 }
 
-export async function toClipboard(target: HTMLElement) {
+async function toClipboard(target: HTMLElement) {
   let backgroundColor = '#ffffff';
   let canCopyToImage = 'ClipboardItem' in window;
   let filter = (node: HTMLElement | Text) => {
@@ -67,6 +77,10 @@ export async function toClipboard(target: HTMLElement) {
       return false;
     }
 
+    if ('classList' in node && node.classList.contains('limber__menu__content')) {
+      return false;
+    }
+
     return true;
   };
 
@@ -79,10 +93,12 @@ export async function toClipboard(target: HTMLElement) {
     // html-to-image does not make adjustments if margins exist anyway
     width: box.width + 32,
     height: box.height + 32,
+    cacheBust: true,
+    /**
+     * Good for pasting on social medias
+     */
     pixelRatio: 3,
     style: {
-      // m-0
-      // make margin uniform all the way around
       margin: '1rem',
     },
   };