feat: add copy button to memo (#267)

* feat: copy-content

* Update web/src/less/memo-detail.less

Co-authored-by: boojack <stevenlgtm@gmail.com>

web/src/components/Memo.tsx

@@ -1,3 +1,4 @@
+import copy from "copy-to-clipboard";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { memo, useEffect, useRef, useState } from "react";
@@ -61,6 +62,11 @@ const Memo: React.FC<Props> = (props: Props) => {
     navigate(`/m/${memo.id}`);
   };
 
+  const handleCopyContent = () => {
+    copy(memo.content);
+    toastHelper.success(t("message.succeed-copy-content"));
+  };
+
   const handleTogglePinMemoBtnClick = async () => {
     try {
       if (memo.pinned) {
@@ -205,6 +211,9 @@ const Memo: React.FC<Props> = (props: Props) => {
                 <span className="btn" onClick={handleMarkMemoClick}>
                   {t("common.mark")}
                 </span>
+                <span className="btn" onClick={handleCopyContent}>
+                  {t("memo.copy")}
+                </span>
                 <span className="btn" onClick={handleViewMemoDetailPage}>
                   {t("memo.view-detail")}
                 </span>

web/src/components/MemoCardDialog.tsx

@@ -1,3 +1,4 @@
+import copy from "copy-to-clipboard";
 import { useState, useEffect, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { editorStateService, memoService, userService } from "../services";
@@ -130,6 +131,11 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
     editorStateService.setEditMemoWithId(memo.id);
   };
 
+  const handleCopyContent = () => {
+    copy(memo.content);
+    toastHelper.success(t("message.succeed-copy-content"));
+  };
+
   const handleVisibilitySelectorChange = async (visibility: Visibility) => {
     if (memo.visibility === visibility) {
       return;
@@ -171,6 +177,9 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
                 <button className="btn edit-btn" onClick={handleGotoMemoLinkBtnClick}>
                   <Icon.ExternalLink className="icon-img" />
                 </button>
+                <button className="btn copy-btn" onClick={handleCopyContent}>
+                  <Icon.Clipboard className="icon-img" />
+                </button>
                 <button className="btn edit-btn" onClick={handleEditMemoBtnClick}>
                   <Icon.Edit3 className="icon-img" />
                 </button>

web/src/less/memo-detail.less

@@ -41,7 +41,10 @@
         @apply flex flex-col justify-start items-start w-full p-4 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;
 
         > .memo-header {
-          @apply mb-2 w-full flex flex-row justify-start items-center text-sm font-mono text-gray-400;
+          @apply mb-2 w-full flex flex-row justify-between items-center text-sm font-mono text-gray-400;
+
+          > .status-container {
+            @apply flex flex-row justify-start items-center;
 
             > .split-text {
               @apply mx-2;
@@ -70,6 +73,19 @@
             }
           }
 
+          .btns-container {
+            .flex(row, flex-start, center);
+
+            > .btn {
+              @apply rounded;
+            }
+
+            > .copy-btn {
+              @apply hover:bg-gray-100;
+            }
+          }
+        }
+
         > .memo-content {
           @apply cursor-default;
 

web/src/locales/en.json

@@ -74,6 +74,7 @@
   },
   "memo": {
     "view-detail": "View Detail",
+    "copy": "Copy",
     "visibility": {
       "private": "Private",
       "protected": "Protected",
@@ -138,6 +139,7 @@
     "user-not-found": "User not found",
     "password-changed": "Password Changed",
     "private-only": "This memo is private only.",
-    "copied": "Copied"
+    "copied": "Copied",
+    "succeed-copy-content": "Succeed to copy content to clipboard."
   }
 }

web/src/locales/vi.json

@@ -74,6 +74,7 @@
   },
   "memo": {
     "view-detail": "Xem chi tiết",
+    "copy": "Sao chép",
     "visibility": {
       "private": "Private",
       "protected": "Protected",
@@ -138,6 +139,7 @@
     "user-not-found": "Không tìm thấy người dùng này",
     "password-changed": "Mật khẩu đã được thay đổi",
     "private-only": "Memo này có trạng thái riêng tư.",
-    "copied": "Đã sao chép"
+    "copied": "Đã sao chép",
+    "succeed-copy-content": "Đã sao chép nội dung memo thành công."
   }
 }

web/src/locales/zh.json

@@ -74,6 +74,7 @@
   },
   "memo": {
     "view-detail": "查看详情",
+    "copy": "Copy",
     "visibility": {
       "private": "仅自己可见",
       "protected": "对所有用户公开",
@@ -138,6 +139,7 @@
     "user-not-found": "未找到用户",
     "password-changed": "密码已修改",
     "private-only": "This memo is private only.",
-    "copied": "Copied"
+    "copied": "Copied",
+    "succeed-copy-content": "Succeed to copy content to clipboard."
   }
 }

web/src/pages/MemoDetail.tsx

@@ -1,3 +1,4 @@
+import copy from "copy-to-clipboard";
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -65,6 +66,11 @@ const MemoDetail = () => {
     });
   };
 
+  const handleCopyContent = () => {
+    copy(state.memo.content);
+    toastHelper.success(t("message.succeed-copy-content"));
+  };
+
   return (
     <section className="page-wrapper memo-detail">
       <div className="page-container">
@@ -92,6 +98,7 @@ const MemoDetail = () => {
           <main className="memos-wrapper">
             <div className="memo-container">
               <div className="memo-header">
+                <div className="status-container">
                   <span className="time-text">{dayjs(state.memo.createdTs).locale(i18n.language).format("YYYY/MM/DD HH:mm:ss")}</span>
                   {user?.id === state.memo.creatorId ? (
                     <Dropdown
@@ -125,6 +132,12 @@ const MemoDetail = () => {
                     </>
                   )}
                 </div>
+                <div className="btns-container">
+                  <button className="btn copy-btn" onClick={handleCopyContent}>
+                    <Icon.Clipboard className="icon-img" />
+                  </button>
+                </div>
+              </div>
               <MemoContent className="memo-content" content={state.memo.content} onMemoContentClick={() => undefined} />
               <MemoResources memo={state.memo} />
             </div>