fix: allowed sync copy paste

teableio · Jan 3, 2025 · 9a1cab4 · 9a1cab4
1 parent dfe154d
commit 9a1cab4
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 39 deletions.
diff --git a/apps/nextjs-app/src/features/app/blocks/view/grid/hooks/useSelectionOperation.ts b/apps/nextjs-app/src/features/app/blocks/view/grid/hooks/useSelectionOperation.ts
@@ -87,7 +87,6 @@ export const useSelectionOperation = (props?: {
     if (
       !navigator.clipboard ||
       !navigator.clipboard.write ||
-      !navigator.clipboard.read ||
       typeof ClipboardItem === 'undefined'
     ) {
       toast({
@@ -149,7 +148,6 @@ export const useSelectionOperation = (props?: {
       recordMap: IRecordIndexMap,
       updateTemporaryData?: (records: ITemporaryPasteVo) => void
     ) => {
-      if (!checkCopyAndPasteEnvironment()) return;
       if (!viewId || !tableId) return;
 
       const { files, types } = e.clipboardData;
@@ -181,7 +179,7 @@ export const useSelectionOperation = (props?: {
             },
           });
         } else {
-          await textPasteHandler(selection, async (content, type, ranges, header) => {
+          await textPasteHandler(e, selection, async (content, type, ranges, header) => {
             if (updateTemporaryData) {
               const res = await temporaryPasteReq({ content, ranges, header });
               updateTemporaryData(res.data);
@@ -206,17 +204,7 @@ export const useSelectionOperation = (props?: {
         console.error('Paste error: ', error);
       }
     },
-    [
-      baseId,
-      viewId,
-      tableId,
-      fields,
-      toast,
-      temporaryPasteReq,
-      pasteReq,
-      checkCopyAndPasteEnvironment,
-      t,
-    ]
+    [baseId, viewId, tableId, fields, toast, temporaryPasteReq, pasteReq, t]
   );
 
   const doClear = useCallback(

diff --git a/apps/nextjs-app/src/features/app/blocks/view/grid/utils/copyAndPaste.ts b/apps/nextjs-app/src/features/app/blocks/view/grid/utils/copyAndPaste.ts
@@ -97,6 +97,7 @@ export const filePasteHandler = async ({
 };
 
 export const textPasteHandler = async (
+  e: React.ClipboardEvent,
   selection: CombinedSelection,
   requestPaste: (
     content: string,
@@ -105,14 +106,11 @@ export const textPasteHandler = async (
     header: IPasteRo['header']
   ) => Promise<void>
 ) => {
-  const clipboardContent = await navigator.clipboard.read();
-  const hasHtml = clipboardContent[0].types.includes(ClipboardTypes.html);
-  const text = clipboardContent[0].types.includes(ClipboardTypes.text)
-    ? await (await clipboardContent[0].getType(ClipboardTypes.text)).text()
+  const hasHtml = e.clipboardData.types.includes(ClipboardTypes.html);
+  const text = e.clipboardData.types.includes(ClipboardTypes.text)
+    ? e.clipboardData.getData(ClipboardTypes.text)
     : '';
-  const html = hasHtml
-    ? await (await clipboardContent[0].getType(ClipboardTypes.html)).text()
-    : undefined;
+  const html = hasHtml ? e.clipboardData.getData(ClipboardTypes.html) : undefined;
   const header = extractTableHeader(html);
 
   if (header.error) {

diff --git a/apps/nextjs-app/src/features/app/components/CopyButton.tsx b/apps/nextjs-app/src/features/app/components/CopyButton.tsx
@@ -2,6 +2,7 @@ import { Check, Copy } from '@teable/icons';
 import type { ButtonProps } from '@teable/ui-lib/shadcn';
 import { Button, cn } from '@teable/ui-lib/shadcn';
 import { useState } from 'react';
+import { syncCopy } from '../utils/sync-copy';
 
 interface ICopyButtonProps extends ButtonProps {
   text: string;
@@ -11,8 +12,8 @@ export const CopyButton = (props: ICopyButtonProps) => {
   const { text, iconClassName, ...rest } = props;
   const [isCopied, setIsCopied] = useState<boolean>(false);
 
-  const onCopy = async () => {
-    await navigator.clipboard.writeText(text);
+  const onCopy = () => {
+    syncCopy(text);
     setIsCopied(true);
     setTimeout(() => {
       setIsCopied(false);

diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/CodeBlock.tsx b/apps/nextjs-app/src/features/app/components/ai-chat/CodeBlock.tsx
@@ -1,7 +1,9 @@
 import CopyIcon from '@teable/ui-lib/icons/app/copy.svg';
-import { useToast } from '@teable/ui-lib/shadcn/ui/use-toast';
+import { toast } from '@teable/ui-lib/shadcn/ui/sonner';
+import { useTranslation } from 'next-i18next';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { syncCopy } from '../../utils/sync-copy';
 import type { IChat } from './type';
 
 interface Props {
@@ -16,22 +18,12 @@ export const checkStatementIsSelect = (statement: string) => {
 };
 
 export const CodeBlock: React.FC<Props> = ({ language, value, onExecute }) => {
-  const { toast } = useToast();
   const showExecuteButton = language.toUpperCase() === 'AI';
+  const { t } = useTranslation(['table']);
 
   const copyToClipboard = () => {
-    console.log('copy!');
-    if (!navigator.clipboard || !navigator.clipboard.writeText) {
-      toast({
-        description: 'Failed to copy to clipboard',
-      });
-      return;
-    }
-    navigator.clipboard.writeText(value).then(() => {
-      toast({
-        description: 'Failed to copy to clipboard',
-      });
-    });
+    syncCopy(value);
+    toast(t('table:table.actionTips.copySuccessful'));
   };
 
   const handleExecuteQuery = () => {

diff --git a/.../nextjs-app/src/features/app/components/collaborator-manage/components/InviteLinkItem.tsx b/.../nextjs-app/src/features/app/components/collaborator-manage/components/InviteLinkItem.tsx
@@ -10,6 +10,7 @@ import {
   useToast,
 } from '@teable/ui-lib/shadcn';
 import { useTranslation } from 'next-i18next';
+import { syncCopy } from '@/features/app/utils/sync-copy';
 
 export const InviteLinkItem = (props: {
   url: string;
@@ -24,7 +25,7 @@ export const InviteLinkItem = (props: {
   const dayjs = useLanDayjs();
 
   const copyInviteUrl = async () => {
-    await navigator.clipboard.writeText(url);
+    syncCopy(url);
     toast({ title: t('invite.dialog.linkCopySuccess') });
   };
 

diff --git a/apps/nextjs-app/src/features/app/utils/sync-copy.ts b/apps/nextjs-app/src/features/app/utils/sync-copy.ts
@@ -0,0 +1,11 @@
+// you can only use this in sync keyboard or mouse click event
+export const syncCopy = async (text: string) => {
+  const textArea = document.createElement('textarea');
+  textArea.value = text;
+  textArea.style.position = 'fixed';
+  textArea.style.left = '-999999px';
+  document.body.appendChild(textArea);
+  textArea.select();
+  document.execCommand('copy');
+  textArea.remove();
+};
diff --git a/packages/sdk/src/components/expand-record/ExpandRecorder.tsx b/packages/sdk/src/components/expand-record/ExpandRecorder.tsx
@@ -8,6 +8,7 @@ import { StandaloneViewProvider, ViewProvider } from '../../context';
 import { useTranslation } from '../../context/app/i18n';
 import { useBaseId, useTableId, useTablePermission } from '../../hooks';
 import { Record } from '../../model';
+import { syncCopy } from './copy';
 import { ExpandRecord } from './ExpandRecord';
 import type { ExpandRecordModel } from './type';
 
@@ -89,7 +90,7 @@ export const ExpandRecorder = (props: IExpandRecorderProps) => {
 
   const onCopyUrl = () => {
     const url = window.location.href;
-    navigator.clipboard.writeText(url);
+    syncCopy(url);
     toast({ description: t('expandRecord.copy') });
   };
 

diff --git a/packages/sdk/src/components/expand-record/copy.ts b/packages/sdk/src/components/expand-record/copy.ts
@@ -0,0 +1,11 @@
+// you can only use this in sync keyboard or mouse click event
+export const syncCopy = async (text: string) => {
+  const textArea = document.createElement('textarea');
+  textArea.value = text;
+  textArea.style.position = 'fixed';
+  textArea.style.left = '-999999px';
+  document.body.appendChild(textArea);
+  textArea.select();
+  document.execCommand('copy');
+  textArea.remove();
+};
diff --git a/plugins/src/app/sheet-form-view/components/CopyButton.tsx b/plugins/src/app/sheet-form-view/components/CopyButton.tsx
@@ -14,6 +14,8 @@ export const CopyButton = (props: ICopyButtonProps) => {
   const onCopy = () => {
     const textarea = document.createElement('textarea');
     textarea.value = text;
+    textarea.style.position = 'fixed';
+    textarea.style.left = '-999999px';
     document.body.appendChild(textarea);
     textarea.select();
     document.execCommand('copy');