luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: fix image preview modal story (#5879)

Browse Source
This commit is contained in:
Peng Xiao
2024-02-23 06:07:46 +00:00
parent 0bbecec2fb
commit c22216c71a
1 changed files with 23 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
tests/storybook/src/stories/image-preview-modal.stories.tsx
View File

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