feat: copy image message

src/common/component/Message/useMessageOperation.js

@@ -1,4 +1,6 @@
 import { useState, useEffect } from "react";
+import toast from "react-hot-toast";
+import { copyImageToClipboard } from "copy-image-clipboard";
 import DeleteMessageConfirm from "../DeleteMessageConfirm";
 import ForwardModal from "../ForwardModal";
 import PinMessageModal from "./PinMessageModal";
@@ -6,18 +8,20 @@ import { ContentTypes } from "../../../app/config";
 import { useSelector } from "react-redux";
 import useCopy from "../../hook/useCopy";
 import usePinMessage from "../../hook/usePinMessage";
-import toast from "react-hot-toast";
 
 export default function useMessageOperation({ mid, context, contextId }) {
   const [copied, copy] = useCopy();
-  const { content_type, currUid, from_uid, content } = useSelector((store) => {
-    return {
-      content: store.message[mid]?.content,
-      from_uid: store.message[mid]?.from_uid,
-      content_type: store.message[mid]?.content_type,
-      currUid: store.authData.uid,
-    };
-  });
+  const { content_type, properties, currUid, from_uid, content } = useSelector(
+    (store) => {
+      return {
+        content: store.message[mid]?.content,
+        from_uid: store.message[mid]?.from_uid,
+        content_type: store.message[mid]?.content_type,
+        properties: store.message[mid]?.properties,
+        currUid: store.authData.uid,
+      };
+    }
+  );
   const { canPin, pins, unpinMessage, isUnpinSuccess } = usePinMessage(
     context == "channel" ? contextId : undefined
   );
@@ -38,8 +42,12 @@ export default function useMessageOperation({ mid, context, contextId }) {
     // hideAll();
     setPinModalVisible((prev) => !prev);
   };
-  const copyContent = () => {
-    copy(content);
+  const copyContent = (image = false) => {
+    if (image) {
+      copyImageToClipboard(content);
+    } else {
+      copy(content);
+    }
   };
   useEffect(() => {
     if (content_type == ContentTypes.archive) {
@@ -66,24 +74,28 @@ export default function useMessageOperation({ mid, context, contextId }) {
     }
   }, [copied]);
   const enablePin = context == "channel" && canPin;
-  const enableReply = currUid != from_uid;
-
+  // const enableReply = currUid != from_uid;
+  const isImage =
+    content_type == ContentTypes.file &&
+    properties?.content_type &&
+    properties?.content_type.startsWith("image");
   const enableEdit =
     currUid == from_uid &&
     [ContentTypes.text, ContentTypes.markdown].includes(content_type);
   const canDelete = currUid == from_uid;
-  const canCopy = [ContentTypes.text, ContentTypes.markdown].includes(
-    content_type
-  );
+  const canCopy =
+    [ContentTypes.text, ContentTypes.markdown].includes(content_type) ||
+    isImage;
   return {
-    copyContent,
+    copyContent: isImage ? copyContent.bind(null, true) : copyContent,
     canCopy,
+    isImage,
     isMarkdown: content_type == ContentTypes.markdown,
     canDelete,
     canPin: context == "channel" && canPin,
     pinned: enablePin ? pins.findIndex((p) => p.mid == mid) > -1 : false,
     unPin: unpinMessage,
-    canReply: enableReply,
+    canReply: true,
     canEdit: enableEdit,
     toggleDeleteModal,
     toggleForwardModal,