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"
     }