From 9ee0da8acf154dc40e06eef81246f0fc7c4eba52 Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Wed, 4 Sep 2024 18:02:12 -0400
Subject: [PATCH 1/3] Fix the copy button

---
 apps/repl/app/components/limber/copy-menu.gts |  4 +--
 apps/repl/app/components/limber/copy-utils.ts | 31 +++++++++++--------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/apps/repl/app/components/limber/copy-menu.gts b/apps/repl/app/components/limber/copy-menu.gts
index 47df0af95..7b6091b42 100644
--- a/apps/repl/app/components/limber/copy-menu.gts
+++ b/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>
diff --git a/apps/repl/app/components/limber/copy-utils.ts b/apps/repl/app/components/limber/copy-utils.ts
index e1aa070f9..ac281de01 100644
--- a/apps/repl/app/components/limber/copy-utils.ts
+++ b/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;
   };
 

From b77aa26788c2ef9935b9c750de53333713b9a0c0 Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Wed, 4 Sep 2024 18:31:56 -0400
Subject: [PATCH 2/3] womp

---
 apps/repl/app/components/limber/copy-utils.ts | 51 +++++++++++--------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/apps/repl/app/components/limber/copy-utils.ts b/apps/repl/app/components/limber/copy-utils.ts
index ac281de01..4d74b88eb 100644
--- a/apps/repl/app/components/limber/copy-utils.ts
+++ b/apps/repl/app/components/limber/copy-utils.ts
@@ -1,5 +1,3 @@
-import { assert } from '@ember/debug';
-
 import { toBlob, toPng } from 'html-to-image';
 
 export function getSnippetElement(event: Event) {
@@ -41,24 +39,35 @@ export function getSnippetElement(event: Event) {
   throw new Error('Could not find snippet element');
 }
 
-export async function copyToClipboard(target: HTMLElement) {
-  /**
-   * 1. clone
-   * 2. remove extra styles
-   * 3. image
-   * 3. clipboard
-   */
-  let toCopy = (target.querySelector('pre') || target).cloneNode();
-
-  assert(`Element to copy must be an HTMLElement`, toCopy instanceof HTMLElement);
-
-  toCopy.classList.add('drop-shadow-lg');
-  toCopy.style.margin = '0';
-
-  await toClipboard(toCopy);
+/**
+ * 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 {
+    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');
+    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) => {
@@ -84,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',
     },
   };

From 72b7d370b8f5326fa9dd1cb5b87af91b979d32f9 Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Wed, 4 Sep 2024 18:32:59 -0400
Subject: [PATCH 3/3] Womp

---
 apps/repl/app/components/limber/copy-utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/repl/app/components/limber/copy-utils.ts b/apps/repl/app/components/limber/copy-utils.ts
index 4d74b88eb..21f624eb5 100644
--- a/apps/repl/app/components/limber/copy-utils.ts
+++ b/apps/repl/app/components/limber/copy-utils.ts
@@ -77,7 +77,7 @@ async function toClipboard(target: HTMLElement) {
       return false;
     }
 
-    if (node.classList.contains('limber__menu__content')) {
+    if ('classList' in node && node.classList.contains('limber__menu__content')) {
       return false;
     }