chore: fix copy to clipboard (#214)

web/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.1",
     "axios": "^0.27.2",
+    "copy-to-clipboard": "^3.3.2",
     "dayjs": "^1.11.3",
     "lodash-es": "^4.17.21",
     "qs": "^6.11.0",

web/src/components/ResourcesDialog.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import * as utils from "../helpers/utils";
+import copy from "copy-to-clipboard";
 import useI18n from "../hooks/useI18n";
 import useLoading from "../hooks/useLoading";
 import { resourceService } from "../services";
@@ -99,7 +99,7 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
   };
 
   const handleCopyResourceLinkBtnClick = (resource: Resource) => {
-    utils.copyTextToClipboard(`${window.location.origin}/o/r/${resource.id}/${resource.filename}`);
+    copy(`${window.location.origin}/o/r/${resource.id}/${resource.filename}`);
     toastHelper.success("Succeed to copy resource link to clipboard");
   };
 

web/src/components/TagList.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import * as utils from "../helpers/utils";
 import { useAppSelector } from "../store";
 import { locationService, memoService, userService } from "../services";
 import useI18n from "../hooks/useI18n";
@@ -97,7 +96,6 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
     if (isActive) {
       locationService.setTagQuery(undefined);
     } else {
-      utils.copyTextToClipboard(`#${tag.text} `);
       locationService.setTagQuery(tag.text);
     }
   };

web/src/helpers/utils.ts

@@ -147,18 +147,6 @@ export function filterObjectNullKeys(object: KVObject): KVObject {
   return finalObject;
 }
 
-export async function copyTextToClipboard(text: string) {
-  if (navigator.clipboard && navigator.clipboard.writeText) {
-    try {
-      await navigator.clipboard.writeText(text);
-    } catch (error: unknown) {
-      console.warn("Copy to clipboard failed.", error);
-    }
-  } else {
-    console.warn("Copy to clipboard failed, methods not supports.");
-  }
-}
-
 export function getImageSize(src: string): Promise<{ width: number; height: number }> {
   return new Promise((resolve) => {
     const imgEl = new Image();

web/yarn.lock

@@ -767,6 +767,13 @@ copy-anything@^2.0.1:
   dependencies:
     is-what "^3.14.1"
 
+copy-to-clipboard@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.2.tgz#5b263ec2366224b100181dded7ce0579b340c107"
+  integrity sha512-Vme1Z6RUDzrb6xAI7EZlVZ5uvOk2F//GaxKUxajDqm9LhOVM1inxNAD2vy+UZDYsd0uyA9s7b3/FVZPSxqrCfg==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -2400,6 +2407,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
+
 tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"