1 files changed, 11 insertions, 13 deletions
diff --git a/web_src/js/features/copycontent.ts b/web_src/js/features/copycontent.ts
index af867463b2..0fec2a6235 100644
--- a/web_src/js/features/copycontent.ts
+++ b/web_src/js/features/copycontent.ts
@@ -2,26 +2,24 @@ import {clippie} from 'clippie';
 import {showTemporaryTooltip} from '../modules/tippy.ts';
 import {convertImage} from '../utils.ts';
 import {GET} from '../modules/fetch.ts';
+import {registerGlobalEventFunc} from '../modules/observer.ts';
 
 const {i18n} = window.config;
 
 export function initCopyContent() {
-  const btn = document.querySelector('#copy-content');
-  if (!btn || btn.classList.contains('disabled')) return;
+  registerGlobalEventFunc('click', 'onCopyContentButtonClick', async (btn: HTMLElement) => {
+    if (btn.classList.contains('disabled') || btn.classList.contains('is-loading')) return;
+    const rawFileLink = btn.getAttribute('data-raw-file-link');
 
-  btn.addEventListener('click', async () => {
-    if (btn.classList.contains('is-loading')) return;
-    let content;
-    let isRasterImage = false;
-    const link = btn.getAttribute('data-link');
+    let content, isRasterImage = false;
 
-    // when data-link is present, we perform a fetch. this is either because
-    // the text to copy is not in the DOM or it is an image which should be
+    // when "data-raw-link" is present, we perform a fetch. this is either because
+    // the text to copy is not in the DOM, or it is an image that should be
     // fetched to copy in full resolution
-    if (link) {
+    if (rawFileLink) {
       btn.classList.add('is-loading', 'loading-icon-2px');
       try {
-        const res = await GET(link, {credentials: 'include', redirect: 'follow'});
+        const res = await GET(rawFileLink, {credentials: 'include', redirect: 'follow'});
         const contentType = res.headers.get('content-type');
 
         if (contentType.startsWith('image/') && !contentType.startsWith('image/svg')) {
@@ -40,13 +38,13 @@ export function initCopyContent() {
       content = Array.from(lineEls, (el) => el.textContent).join('');
     }
 
-    // try copy original first, if that fails and it's an image, convert it to png
+    // try copy original first, if that fails, and it's an image, convert it to png
     const success = await clippie(content);
     if (success) {
       showTemporaryTooltip(btn, i18n.copy_success);
     } else {
       if (isRasterImage) {
-        const success = await clippie(await convertImage(content, 'image/png'));
+        const success = await clippie(await convertImage(content as Blob, 'image/png'));
         showTemporaryTooltip(btn, success ? i18n.copy_success : i18n.copy_error);
       } else {
         showTemporaryTooltip(btn, i18n.copy_error);