From 2ac4a846f7d0bc0145a3c3548437db1412364233 Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Fri, 13 Sep 2024 10:28:28 +0000
Subject: [PATCH] feat(core): copy event for image (#8219)

fix AF-1383
---
 .../peek-view/view/image-preview/index.tsx    | 11 ++++++-
 tests/affine-local/e2e/image-preview.spec.ts  | 29 +++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/core/src/modules/peek-view/view/image-preview/index.tsx b/packages/frontend/core/src/modules/peek-view/view/image-preview/index.tsx
index 2473f40d5e..848b74b447 100644
--- a/packages/frontend/core/src/modules/peek-view/view/image-preview/index.tsx
+++ b/packages/frontend/core/src/modules/peek-view/view/image-preview/index.tsx
@@ -265,11 +265,20 @@ const ImagePreviewModalImpl = ({
       event.stopPropagation();
     };
 
+    const onCopyEvent = (event: ClipboardEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      copyHandler();
+    };
+
     document.addEventListener('keyup', handleKeyUp);
+    document.addEventListener('copy', onCopyEvent);
     return () => {
       document.removeEventListener('keyup', handleKeyUp);
+      document.removeEventListener('copy', onCopyEvent);
     };
-  }, [blockModel, blocksuiteDoc, onBlockIdChange]);
+  }, [blockModel, blocksuiteDoc, copyHandler, onBlockIdChange]);
 
   useErrorBoundary(error);
 
diff --git a/tests/affine-local/e2e/image-preview.spec.ts b/tests/affine-local/e2e/image-preview.spec.ts
index 4a4bcb333a..37b709c4a1 100644
--- a/tests/affine-local/e2e/image-preview.spec.ts
+++ b/tests/affine-local/e2e/image-preview.spec.ts
@@ -375,6 +375,35 @@ test('image able to copy to clipboard', async ({ page }) => {
   ).toBeVisible();
 });
 
+test('image preview should be able to copy image to clipboard on copy event', async ({
+  page,
+}) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page);
+  let blobId: string;
+  {
+    const title = getBlockSuiteEditorTitle(page);
+    await title.click();
+    await page.keyboard.press('Enter');
+    await importImage(page, 'http://localhost:8081/large-image.png');
+    await page.locator('affine-page-image').first().dblclick();
+    await page.waitForTimeout(500);
+    blobId = (await page
+      .getByTestId('image-preview-modal')
+      .locator('img')
+      .first()
+      .getAttribute('data-blob-id')) as string;
+    expect(blobId).toBeTruthy();
+  }
+  const locator = page.getByTestId('image-preview-modal');
+  await expect(locator).toBeVisible();
+  await page.dispatchEvent('body', 'copy');
+  await expect(
+    page.locator('[data-testid=affine-toast]:has-text("Copied to clipboard.")')
+  ).toBeVisible();
+});
+
 test('image able to download', async ({ page }) => {
   await openHomePage(page);
   await waitForEditorLoad(page);