From c22216c71a42a9b5b9a9c8e026025c7a70ad582d Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Fri, 23 Feb 2024 06:07:46 +0000
Subject: [PATCH] fix: fix image preview modal story (#5879)

---
 .../stories/image-preview-modal.stories.tsx   | 32 +++++++++++++------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/tests/storybook/src/stories/image-preview-modal.stories.tsx b/tests/storybook/src/stories/image-preview-modal.stories.tsx
index 2df6709b9c..307c1329f1 100644
--- a/tests/storybook/src/stories/image-preview-modal.stories.tsx
+++ b/tests/storybook/src/stories/image-preview-modal.stories.tsx
@@ -1,8 +1,9 @@
 import { BlockSuiteEditor } from '@affine/core/components/blocksuite/block-suite-editor';
 import { ImagePreviewModal } from '@affine/core/components/image-preview';
+import { CurrentPageService } from '@affine/core/modules/page';
 import type { Page } from '@blocksuite/store';
 import type { Meta } from '@storybook/react';
-import { useService, Workspace } from '@toeverything/infra';
+import { PageManager, useService, Workspace } from '@toeverything/infra';
 import { initEmptyPage } from '@toeverything/infra/blocksuite';
 import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -14,27 +15,35 @@ export default {
 
 export const Default = () => {
   const workspace = useService(Workspace);
+  const pageManager = useService(PageManager);
+  const currentPageService = useService(CurrentPageService);
 
   const [page, setPage] = useState<Page | null>(null);
 
   useEffect(() => {
-    const page = workspace.blockSuiteWorkspace.createPage('page0');
-    initEmptyPage(page);
+    const bsPage = workspace.blockSuiteWorkspace.createPage('page0');
+    initEmptyPage(bsPage);
+
+    const { page, release } = pageManager.open(bsPage.meta);
+    currentPageService.openPage(page);
+
     fetch(new URL('@affine-test/fixtures/large-image.png', import.meta.url))
       .then(res => res.arrayBuffer())
       .then(async buffer => {
         const id = await workspace.blockSuiteWorkspace.blob.set(
           new Blob([buffer], { type: 'image/png' })
         );
-        const frameId = page.getBlockByFlavour('affine:note')[0].id;
-        page.addBlock(
+        const frameId = bsPage.getBlockByFlavour('affine:note')[0].id;
+        bsPage.addBlock(
           'affine:paragraph',
           {
-            text: new page.Text('Please double click the image to preview it.'),
+            text: new bsPage.Text(
+              'Please double click the image to preview it.'
+            ),
           },
           frameId
         );
-        page.addBlock(
+        bsPage.addBlock(
           'affine:image',
           {
             sourceId: id,
@@ -45,8 +54,13 @@ export const Default = () => {
       .catch(err => {
         console.error('Failed to load large-image.png', err);
       });
-    setPage(page);
-  }, [workspace]);
+    setPage(bsPage);
+
+    return () => {
+      release();
+      currentPageService.closePage();
+    };
+  }, [currentPageService, pageManager, workspace]);
 
   if (!page) {
     return null;