feat(component): support image preview by double click (#2198)

tests/parallels/image-preview.spec.ts

@@ -0,0 +1,44 @@
+import { expect, test } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import {
+  getBlockSuiteEditorTitle,
+  newPage,
+  waitMarkdownImported,
+} from '../libs/page-logic';
+
+test('image preview should be shown', async ({ page }) => {
+  await openHomePage(page);
+  await waitMarkdownImported(page);
+  await newPage(page);
+  const title = await getBlockSuiteEditorTitle(page);
+  await title.click();
+  await page.keyboard.press('Enter');
+  await page.evaluate(() => {
+    const clipData = {
+      'text/html': `<img src="http://localhost:8081/large-image.png" />`,
+    };
+    const e = new ClipboardEvent('paste', {
+      clipboardData: new DataTransfer(),
+    });
+    Object.defineProperty(e, 'target', {
+      writable: false,
+      value: document.body,
+    });
+    Object.entries(clipData).forEach(([key, value]) => {
+      e.clipboardData?.setData(key, value);
+    });
+    document.body.dispatchEvent(e);
+  });
+  await page.waitForTimeout(500);
+  await page.locator('img').first().dblclick();
+  const locator = page.getByTestId('image-preview-modal');
+  expect(locator.isVisible()).toBeTruthy();
+  await page
+    .getByTestId('image-preview-modal')
+    .locator('button')
+    .first()
+    .click();
+  await page.waitForTimeout(500);
+  expect(await locator.isVisible()).toBeFalsy();
+});