From e5a962272084b9bb945aae52cdd4284fa7883afe Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 13 Apr 2026 14:16:24 +0300
Subject: [PATCH] fix(note_actions): copy reference to clipboard button not
 working (closes #9406)

---
 .../src/widgets/ribbon/NoteActionsCustom.tsx  | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx b/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
index 4c91c1323b..92587d2ca9 100644
--- a/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
+++ b/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
@@ -7,9 +7,10 @@ import Component from "../../components/component";
 import NoteContext from "../../components/note_context";
 import FNote from "../../entities/fnote";
 import { t } from "../../services/i18n";
+import { copyImageReferenceToClipboard } from "../../services/image";
 import { getHelpUrlForNote } from "../../services/in_app_help";
 import { downloadFileNote, openNoteExternally } from "../../services/open";
-import { isMobile, openInAppHelpFromUrl } from "../../services/utils";
+import { createImageSrcUrl, isMobile, openInAppHelpFromUrl } from "../../services/utils";
 import { ViewTypeOptions } from "../collections/interface";
 import { buildSaveSqlToNoteHandler } from "../FloatingButtonsDefinitions";
 import ActionButton, { ActionButtonProps } from "../react/ActionButton";
@@ -151,13 +152,26 @@ function DownloadFileButton({ note, parentComponent, ntxId }: NoteActionsCustomI
 }
 
 //#region Floating buttons
-function CopyReferenceToClipboardButton({ ntxId, noteType, parentComponent }: NoteActionsCustomInnerProps) {
-    return (["mermaid", "canvas", "mindMap", "image"].includes(noteType) &&
-        <NoteAction
-            text={t("image_properties.copy_reference_to_clipboard")}
-            icon="bx bx-copy"
-            onClick={() => parentComponent?.triggerEvent("copyImageReferenceToClipboard", { ntxId })}
-        />
+function CopyReferenceToClipboardButton({ note, noteType }: NoteActionsCustomInnerProps) {
+    const hiddenImageCopyRef = useRef<HTMLDivElement>(null);
+    const isEnabled = ["mermaid", "canvas", "mindMap", "image"].includes(noteType);
+
+    return isEnabled && (
+        <>
+            <NoteAction
+                text={t("image_properties.copy_reference_to_clipboard")}
+                icon="bx bx-copy"
+                onClick={() => {
+                    if (!hiddenImageCopyRef.current) return;
+                    const imageEl = document.createElement("img");
+                    imageEl.src = createImageSrcUrl(note);
+                    hiddenImageCopyRef.current.replaceChildren(imageEl);
+                    copyImageReferenceToClipboard($(hiddenImageCopyRef.current));
+                    hiddenImageCopyRef.current.removeChild(imageEl);
+                }}
+            />
+            <div ref={hiddenImageCopyRef} style={{ position: "absolute" }} />
+        </>
     );
 }