Add copy (image) link button to message context menu. are you happy n…

…ow ciach0_??
Nerimity · Jan 19, 2025 · d478535 · d478535
1 parent 9d06b2e
commit d478535
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 3 deletions.
diff --git a/src/components/message-pane/message-log-area/MessageLogArea.tsx b/src/components/message-pane/message-log-area/MessageLogArea.tsx
@@ -107,7 +107,12 @@ export const MessageLogArea = (props: {
   }>({ lastSeenAt: null, messageId: null });
 
   const [messageContextDetails, setMessageContextDetails] = createSignal<
-    { position: { x: number; y: number }; message: Message } | undefined
+    | {
+        position: { x: number; y: number };
+        message: Message;
+        clickEvent: MouseEvent;
+      }
+    | undefined
   >(undefined);
   const [userContextMenuDetails, setUserContextMenuDetails] = createSignal<
     { position?: { x: number; y: number }; message?: Message } | undefined
@@ -500,6 +505,7 @@ export const MessageLogArea = (props: {
     event.preventDefault();
     setMessageContextDetails({
       message,
+      clickEvent: event,
       position: {
         x: event.clientX,
         y: event.clientY,
@@ -755,6 +761,7 @@ function UnreadMarker(props: { onClick: () => void }) {
 
 type MessageContextMenuProps = Omit<ContextMenuProps, "items"> & {
   message: Message;
+  clickEvent: MouseEvent;
   quoteMessage(): void;
   replyMessage(): void;
 };

diff --git a/src/components/ui/ImageEmbed.tsx b/src/components/ui/ImageEmbed.tsx
@@ -56,6 +56,10 @@ export function ImageEmbed(props: ImageEmbedProps) {
     return url.href;
   };
 
+  const contextMenuSrc = () => {
+    return props.attachment.origSrc || url(true);
+  };
+
   const style = () => {
     const maxWidth = clamp(
       (props.customWidth || paneWidth()!) + (props.widthOffset || 0),
@@ -93,7 +97,13 @@ export function ImageEmbed(props: ImageEmbedProps) {
         conditionalClass(isGif() && !hasFocus(), "gif")
       )}
     >
-      <img loading="lazy" src={url()} style={style()} alt="" />
+      <img
+        data-contextmenu-src={contextMenuSrc()}
+        loading="lazy"
+        src={url()}
+        style={style()}
+        alt=""
+      />
     </ImageEmbedContainer>
   );
 }

diff --git a/src/components/ui/context-menu/ContextMenu.tsx b/src/components/ui/context-menu/ContextMenu.tsx
@@ -43,6 +43,7 @@ export interface ContextMenuProps {
     y: number;
   } | null;
   header?: JSXElement;
+  clickEvent?: MouseEvent;
 }
 
 export default function ContextMenu(props: ContextMenuProps) {
@@ -56,9 +57,29 @@ export default function ContextMenu(props: ContextMenuProps) {
 
   const { height, width } = useResizeObserver(contextMenuEl);
 
+  const itemsWithExtra = () => {
+    if (!props.clickEvent) return props.items;
+    const tempItems = [...props.items];
+    const target = props.clickEvent.target as HTMLElement;
+    const imageSrc = target.getAttribute("data-contextmenu-src");
+    const url = target.getAttribute("href");
+    if (url || imageSrc) {
+      if (!tempItems[0]?.separator) tempItems.unshift({ separator: true });
+      tempItems.unshift({
+        label: "Copy Link",
+        icon: "content_copy",
+        onClick: () => {
+          navigator.clipboard.writeText(imageSrc || url || "");
+        },
+      });
+    }
+
+    return tempItems;
+  };
+
   createEffect(() => {
     if (props.position) {
-      setItems(reconcile(props.items));
+      setItems(reconcile(itemsWithExtra()));
     } else {
       setItems([]);
     }