refactor: image preview plugin (#3457)

apps/core/src/bootstrap/plugins/setup.ts

@@ -81,6 +81,9 @@ export const createGlobalThis = () => {
     TextDecoder: globalThis.TextDecoder,
     Request: globalThis.Request,
     Error: globalThis.Error,
+    // bookmark uses these
+    Blob: globalThis.Blob,
+    ClipboardItem: globalThis.ClipboardItem,
 
     // fixme: use our own db api
     indexedDB: globalThis.indexedDB,

apps/core/src/bootstrap/register-plugins.ts

@@ -37,6 +37,7 @@ const builtinPluginUrl = new Set([
   '/plugins/bookmark',
   '/plugins/copilot',
   '/plugins/hello-world',
+  '/plugins/image-preview',
 ]);
 
 const logger = new DebugLogger('register-plugins');

apps/storybook/src/stories/image-preview-modal.stories.tsx

@@ -1,11 +1,13 @@
 import { BlockHubWrapper } from '@affine/component/block-hub';
 import { BlockSuiteEditor } from '@affine/component/block-suite-editor';
-import { ImagePreviewModal } from '@affine/component/image-preview-modal';
 import { initEmptyPage } from '@affine/env/blocksuite';
 import { WorkspaceFlavour } from '@affine/env/workspace';
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { ImagePreviewModal } from '@affine/image-preview-plugin/src/component';
 import { rootBlockHubAtom } from '@affine/workspace/atom';
 import { getOrCreateWorkspace } from '@affine/workspace/manager';
 import type { Meta } from '@storybook/react';
+import { createPortal } from 'react-dom';
 
 export default {
   title: 'Component/ImagePreviewModal',
@@ -52,6 +54,10 @@ export const Default = () => {
         }}
       >
         <BlockSuiteEditor mode="page" page={page} onInit={initEmptyPage} />
+        {createPortal(
+          <ImagePreviewModal pageId={page.id} workspace={page.workspace} />,
+          document.body
+        )}
       </div>
       <BlockHubWrapper
         style={{

apps/storybook/tsconfig.json

@@ -18,6 +18,9 @@
     {
       "path": "../../packages/workspace"
     },
+    {
+      "path": "../../plugins/image-preview"
+    },
     {
       "path": "./tsconfig.node.json"
     }

packages/cli/src/bin/dev-plugin.ts

@@ -45,7 +45,8 @@ const external = [
   /^@toeverything/,
 
   // react
-  /^react/,
+  'react',
+  /^react\//,
   /^react-dom/,
 
   // store
@@ -72,11 +73,11 @@ const json: z.infer<typeof packageJsonInputSchema> = await readFile(
 )
   .then(text => JSON.parse(text))
   .then(async json => {
-    const { success } = await packageJsonInputSchema.safeParseAsync(json);
+    const result = await packageJsonInputSchema.safeParseAsync(json);
-    if (success) {
+    if (result.success) {
       return json;
     } else {
-      throw new Error('invalid package.json');
+      throw new Error('invalid package.json', result.error);
     }
   });
 

packages/component/src/components/block-suite-editor/index.tsx

@@ -8,8 +8,7 @@ import { Skeleton } from '@mui/material';
 import { use } from 'foxact/use';
 import { useAtomValue } from 'jotai';
 import type { CSSProperties, ReactElement } from 'react';
-import { lazy, memo, Suspense, useCallback, useEffect, useRef } from 'react';
+import { memo, Suspense, useCallback, useEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
 import type { FallbackProps } from 'react-error-boundary';
 import { ErrorBoundary } from 'react-error-boundary';
 
@@ -41,12 +40,6 @@ declare global {
   var currentEditor: EditorContainer | undefined;
 }
 
-const ImagePreviewModal = lazy(() =>
-  import('../image-preview-modal').then(module => ({
-    default: module.ImagePreviewModal,
-  }))
-);
-
 const BlockSuiteEditorImpl = (props: EditorProps): ReactElement => {
   const { onLoad, page, mode, style } = props;
   if (!page.loaded) {
@@ -191,17 +184,6 @@ export const BlockSuiteEditor = memo(function BlockSuiteEditor(
       <Suspense fallback={<BlockSuiteFallback />}>
         <BlockSuiteEditorImpl {...props} />
       </Suspense>
-      {props.page && (
-        <Suspense fallback={null}>
-          {createPortal(
-            <ImagePreviewModal
-              workspace={props.page.workspace}
-              pageId={props.page.id}
-            />,
-            document.body
-          )}
-        </Suspense>
-      )}
     </ErrorBoundary>
   );
 });

plugins/image-preview/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@affine/image-preview-plugin",
+  "version": "0.8.0-canary.0",
+  "description": "Image preview plugin",
+  "affinePlugin": {
+    "release": true,
+    "entry": {
+      "core": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@affine/component": "workspace:*",
+    "@blocksuite/icons": "^2.1.27",
+    "@toeverything/plugin-infra": "workspace:*",
+    "@toeverything/theme": "^0.7.9",
+    "clsx": "^2.0.0",
+    "react-error-boundary": "^4.0.10",
+    "swr": "2.1.5"
+  }
+}

plugins/image-preview/src/app.tsx

@@ -0,0 +1,11 @@
+import type { Page } from '@blocksuite/store';
+
+import { ImagePreviewModal } from './component';
+
+export type AppProps = {
+  page: Page;
+};
+
+export const App = ({ page }: AppProps) => {
+  return <ImagePreviewModal pageId={page.id} workspace={page.workspace} />;
+};

plugins/image-preview/src/component/index.jotai.ts

@@ -5,8 +5,8 @@ export const hasAnimationPlayedAtom = atom<boolean | null>(true);
 
 previewBlockIdAtom.onMount = set => {
   const callback = (event: MouseEvent) => {
-    const target = event.target;
+    const target = event.target as HTMLElement | null;
-    if (target instanceof HTMLImageElement) {
+    if (target?.tagName === 'IMG') {
       const imageBlock = target.closest('affine-image');
       if (imageBlock) {
         const blockId = imageBlock.getAttribute('data-block-id');

plugins/image-preview/src/component/index.tsx

@@ -1,5 +1,4 @@
-import '@blocksuite/blocks';
+import { Button, IconButton, Tooltip } from '@affine/component';
-
 import type { ImageBlockModel } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
 import {
@@ -23,8 +22,6 @@ import type { FallbackProps } from 'react-error-boundary';
 import { ErrorBoundary } from 'react-error-boundary';
 import useSWR from 'swr';
 
-import { Button, IconButton } from '../../ui/button';
-import { Tooltip } from '../../ui/tooltip';
 import { useZoomControls } from './hooks/use-zoom';
 import {
   buttonStyle,

plugins/image-preview/src/index.ts

@@ -0,0 +1,18 @@
+import type { PluginContext } from '@toeverything/plugin-infra/entry';
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { App } from './app';
+
+export const entry = (context: PluginContext) => {
+  context.register('editor', (div, editor) => {
+    const root = createRoot(div);
+    root.render(createElement(App, { page: editor.page }));
+    return () => {
+      root.unmount();
+    };
+  });
+  return () => {
+    // do nothing
+  };
+};

plugins/image-preview/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./src"],
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "lib",
+    "jsx": "preserve"
+  },
+  "references": [
+    {
+      "path": "../../packages/plugin-infra"
+    },
+    {
+      "path": "../../packages/component"
+    }
+  ]
+}

scripts/build-plugins.mjs

@@ -1,16 +1,15 @@
-import { spawnSync } from 'node:child_process';
+import { spawn } from 'node:child_process';
 
-spawnSync('yarn', ['-T', 'run', 'dev-plugin', '--plugin', 'bookmark'], {
+const builtInPlugins = ['bookmark', 'hello-world', 'copilot', 'image-preview'];
-  stdio: 'inherit',
-  shell: true,
-});
 
-spawnSync('yarn', ['-T', 'run', 'dev-plugin', '--plugin', 'hello-world'], {
+for (const plugin of builtInPlugins) {
-  stdio: 'inherit',
+  const cp = spawn('yarn', ['-T', 'run', 'dev-plugin', '--plugin', plugin], {
-  shell: true,
+    stdio: 'inherit',
-});
+    shell: true,
-
+  });
-spawnSync('yarn', ['-T', 'run', 'dev-plugin', '--plugin', 'copilot'], {
+  cp.on('exit', code => {
-  stdio: 'inherit',
+    if (code !== 0) {
-  shell: true,
+      process.exit(code);
-});
+    }
+  });
+}

tests/affine-plugin/e2e/basic.spec.ts

@@ -7,7 +7,7 @@ test('plugin should exist', async ({ page }) => {
   await openHomePage(page);
   await waitEditorLoad(page);
   await page.route('**/plugins/**/package.json', route => route.fetch(), {
-    times: 3,
+    times: 4,
   });
   await page.waitForTimeout(50);
   const packageJson = await page.evaluate(() => {
@@ -17,14 +17,26 @@ test('plugin should exist', async ({ page }) => {
   expect(packageJson).toEqual([
     {
       name: '@affine/bookmark-plugin',
+      version: expect.any(String),
+      description: expect.any(String),
       affinePlugin: expect.anything(),
     },
     {
       name: '@affine/copilot-plugin',
+      version: expect.any(String),
+      description: expect.any(String),
       affinePlugin: expect.anything(),
     },
     {
       name: '@affine/hello-world-plugin',
+      version: expect.any(String),
+      description: expect.any(String),
+      affinePlugin: expect.anything(),
+    },
+    {
+      name: '@affine/image-preview-plugin',
+      version: expect.any(String),
+      description: expect.any(String),
       affinePlugin: expect.anything(),
     },
   ]);

yarn.lock

@@ -403,6 +403,20 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@affine/image-preview-plugin@workspace:plugins/image-preview":
+  version: 0.0.0-use.local
+  resolution: "@affine/image-preview-plugin@workspace:plugins/image-preview"
+  dependencies:
+    "@affine/component": "workspace:*"
+    "@blocksuite/icons": ^2.1.27
+    "@toeverything/plugin-infra": "workspace:*"
+    "@toeverything/theme": ^0.7.9
+    clsx: ^2.0.0
+    react-error-boundary: ^4.0.10
+    swr: 2.1.5
+  languageName: unknown
+  linkType: soft
+
 "@affine/jotai@workspace:*, @affine/jotai@workspace:packages/jotai":
   version: 0.0.0-use.local
   resolution: "@affine/jotai@workspace:packages/jotai"