feat(layout): integrate copy reference to clipboard button

apps/client/src/widgets/ribbon/NoteActionsCustom.tsx

@@ -1,24 +1,28 @@
+import { useContext } from "preact/hooks";
+
 import FNote from "../../entities/fnote";
 import { t } from "../../services/i18n";
 import { downloadFileNote, openNoteExternally } from "../../services/open";
 import protected_session_holder from "../../services/protected_session_holder";
 import ActionButton from "../react/ActionButton";
 import { FormFileUploadActionButton } from "../react/FormFileUpload";
+import { ParentComponent } from "../react/react_utils";
 import { buildUploadNewFileRevisionListener } from "./FilePropertiesTab";
 import { buildUploadNewImageRevisionListener } from "./ImagePropertiesTab";
 
 interface NoteActionsCustomProps {
     note: FNote;
+    ntxId: string;
 }
 
 /**
  * Part of {@link NoteActions} on the new layout, but are rendered with a slight spacing
  * from the rest of the note items and the buttons differ based on the note type.
  */
-export default function NoteActionsCustom({ note }: NoteActionsCustomProps) {
+export default function NoteActionsCustom(props: NoteActionsCustomProps) {
     return (
         <div className="note-actions-custom">
-            <NoteActionsCustomInner note={note} />
+            <NoteActionsCustomInner {...props} />
         </div>
     );
 }
@@ -33,22 +37,23 @@ function NoteActionsCustomInner(props: NoteActionsCustomProps) {
     }
 }
 
-function FileActions({ note }: NoteActionsCustomProps) {
+function FileActions(props: NoteActionsCustomProps) {
     return (
         <>
-            <UploadNewRevisionButton note={note} onChange={buildUploadNewFileRevisionListener(note)} />
-            <OpenExternallyButton note={note} />
-            <DownloadFileButton note={note} />
+            <UploadNewRevisionButton {...props} onChange={buildUploadNewFileRevisionListener(props.note)} />
+            <OpenExternallyButton {...props} />
+            <DownloadFileButton {...props} />
         </>
     );
 }
 
-function ImageActions({ note }: NoteActionsCustomProps) {
+function ImageActions(props: NoteActionsCustomProps) {
     return (
         <>
-            <UploadNewRevisionButton note={note} onChange={buildUploadNewImageRevisionListener(note)} />
-            <OpenExternallyButton note={note} />
-            <DownloadFileButton note={note} />
+            <CopyReferenceToClipboardButton {...props} />
+            <UploadNewRevisionButton {...props} onChange={buildUploadNewImageRevisionListener(props.note)} />
+            <OpenExternallyButton {...props} />
+            <DownloadFileButton {...props} />
         </>
     );
 }
@@ -93,4 +98,16 @@ function DownloadFileButton({ note }: NoteActionsCustomProps) {
         />
     );
 }
+
+function CopyReferenceToClipboardButton({ ntxId }: NoteActionsCustomProps) {
+    const parentComponent = useContext(ParentComponent);
+
+    return (
+        <ActionButton
+            text={t("image_properties.copy_reference_to_clipboard")}
+            icon="bx bx-copy"
+            onClick={() => parentComponent?.triggerEvent("copyImageReferenceToClipboard", { ntxId })}
+        />
+    );
+}
 //#endregion