From 23831654701a375692b23a573dd6aaa83a86b6f7 Mon Sep 17 00:00:00 2001
From: Himself65 <himself65@outlook.com>
Date: Fri, 14 Apr 2023 17:07:41 -0500
Subject: [PATCH] refactor: remove NoSsr on top level (#1951)

---
 apps/electron/yarn.lock                       | 23 ++++---
 apps/web/src/atoms/public-workspace/index.ts  | 12 ++--
 .../components/__debug__/client/Editor.tsx    |  5 +-
 .../panel/publish/index.tsx                   |  4 +-
 .../web/src/components/page-detail-editor.tsx | 63 +++++++++----------
 ...e-link.ts => use-reference-link-effect.ts} |  2 +-
 .../affine/use-toggle-workspace-publish.ts    |  6 +-
 .../hooks/root/use-on-transform-workspace.ts  | 11 +---
 apps/web/src/hooks/use-router-helper.ts       | 21 +++++++
 apps/web/src/hooks/use-transform-workspace.ts |  7 ++-
 apps/web/src/layouts/index.tsx                |  5 +-
 apps/web/src/pages/_debug/init-page.dev.tsx   |  7 +--
 .../[workspaceId]/[pageId].tsx                | 46 +++++++-------
 .../workspace/[workspaceId]/[pageId].tsx      |  4 +-
 packages/component/package.json               | 11 ++--
 .../block-suite-editor/index.stories.tsx      |  6 +-
 .../components/block-suite-editor/index.tsx   | 17 +++--
 packages/jotai/package.json                   |  8 +++
 packages/jotai/src/resource.ts                | 13 +++-
 packages/workspace/package.json               |  4 +-
 packages/workspace/src/affine/login.ts        |  1 +
 packages/workspace/src/utils.ts               | 16 +++--
 playwright.config.ts                          |  2 -
 scripts/setup/lottie-web.ts                   | 18 ++++++
 tests/libs/playwright.ts                      |  7 +++
 vitest.config.ts                              |  2 +-
 yarn.lock                                     | 23 ++++---
 27 files changed, 211 insertions(+), 133 deletions(-)
 rename apps/web/src/hooks/affine/{use-reference-link.ts => use-reference-link-effect.ts} (95%)
 create mode 100644 scripts/setup/lottie-web.ts

diff --git a/apps/electron/yarn.lock b/apps/electron/yarn.lock
index 708d6e3bc2..2124ebdbbe 100644
--- a/apps/electron/yarn.lock
+++ b/apps/electron/yarn.lock
@@ -75,6 +75,7 @@ __metadata:
     clsx: ^1.2.1
     concurrently: ^8.0.1
     jest-mock: ^29.5.0
+    jotai: ^2.0.4
     kebab-case: ^1.0.2
     lit: ^2.7.2
     lottie-web: ^5.11.0
@@ -92,11 +93,11 @@ __metadata:
     wait-on: ^7.0.1
     yjs: ^13.5.52
   peerDependencies:
-    "@blocksuite/blocks": 0.0.0-20230409084303-221991d4-nightly
-    "@blocksuite/editor": 0.0.0-20230409084303-221991d4-nightly
-    "@blocksuite/global": 0.0.0-20230409084303-221991d4-nightly
-    "@blocksuite/icons": 2.1.10
-    "@blocksuite/store": 0.0.0-20230409084303-221991d4-nightly
+    "@blocksuite/blocks": "*"
+    "@blocksuite/editor": "*"
+    "@blocksuite/global": "*"
+    "@blocksuite/icons": "*"
+    "@blocksuite/store": "*"
   languageName: unknown
   linkType: soft
 
@@ -175,9 +176,17 @@ __metadata:
   resolution: "@affine/jotai@workspace:../../packages/jotai"
   dependencies:
     "@affine/env": "workspace:*"
+    "@blocksuite/blocks": 0.0.0-20230413190748-4d32b79a-nightly
+    "@blocksuite/editor": 0.0.0-20230413190748-4d32b79a-nightly
+    "@blocksuite/global": 0.0.0-20230413190748-4d32b79a-nightly
+    "@blocksuite/store": 0.0.0-20230413190748-4d32b79a-nightly
     jotai: ^2.0.4
     lottie-web: ^5.11.0
   peerDependencies:
+    "@blocksuite/blocks": "*"
+    "@blocksuite/editor": "*"
+    "@blocksuite/global": "*"
+    "@blocksuite/store": "*"
     lottie-web: "*"
   languageName: unknown
   linkType: soft
@@ -219,8 +228,8 @@ __metadata:
     yjs: ^13.5.52
     zod: ^3.21.4
   peerDependencies:
-    "@blocksuite/blocks": 0.0.0-20230409084303-221991d4-nightly
-    "@blocksuite/store": 0.0.0-20230409084303-221991d4-nightly
+    "@blocksuite/blocks": "*"
+    "@blocksuite/store": "*"
   languageName: unknown
   linkType: soft
 
diff --git a/apps/web/src/atoms/public-workspace/index.ts b/apps/web/src/atoms/public-workspace/index.ts
index 76924ecc8e..07ccc77ef9 100644
--- a/apps/web/src/atoms/public-workspace/index.ts
+++ b/apps/web/src/atoms/public-workspace/index.ts
@@ -9,13 +9,17 @@ import { affineApis } from '../../shared/apis';
 
 function createPublicWorkspace(
   workspaceId: string,
-  binary: ArrayBuffer
+  binary: ArrayBuffer,
+  singlePage = false
 ): AffinePublicWorkspace {
   const blockSuiteWorkspace = createEmptyBlockSuiteWorkspace(
     workspaceId,
     (k: string) =>
       // fixme: token could be expired
-      ({ api: `api/workspace`, token: getLoginStorage()?.token }[k])
+      ({ api: `api/workspace`, token: getLoginStorage()?.token }[k]),
+    {
+      cachePrefix: WorkspaceFlavour.PUBLIC + (singlePage ? '-single-page' : ''),
+    }
   );
   BlockSuiteWorkspace.Y.applyUpdate(
     blockSuiteWorkspace.doc,
@@ -49,7 +53,7 @@ export const publicPageBlockSuiteAtom = atom<Promise<AffinePublicWorkspace>>(
       workspaceId,
       pageId
     );
-    return createPublicWorkspace(workspaceId, binary);
+    return createPublicWorkspace(workspaceId, binary, true);
   }
 );
 export const publicWorkspaceAtom = atom<Promise<AffinePublicWorkspace>>(
@@ -59,6 +63,6 @@ export const publicWorkspaceAtom = atom<Promise<AffinePublicWorkspace>>(
       throw new Error('No workspace id');
     }
     const binary = await affineApis.downloadWorkspace(workspaceId, true);
-    return createPublicWorkspace(workspaceId, binary);
+    return createPublicWorkspace(workspaceId, binary, false);
   }
 );
diff --git a/apps/web/src/components/__debug__/client/Editor.tsx b/apps/web/src/components/__debug__/client/Editor.tsx
index 23d859ba73..0e402cde38 100644
--- a/apps/web/src/components/__debug__/client/Editor.tsx
+++ b/apps/web/src/components/__debug__/client/Editor.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { createEmptyBlockSuiteWorkspace } from '@affine/workspace/utils';
 import type { EditorContainer } from '@blocksuite/editor';
 import type { Page } from '@blocksuite/store';
@@ -11,7 +10,9 @@ import { BlockSuiteEditor } from '../../blocksuite/block-suite-editor';
 const blockSuiteWorkspace = createEmptyBlockSuiteWorkspace(
   'test',
   _ => undefined,
-  Generator.AutoIncrement
+  {
+    idGenerator: Generator.AutoIncrement,
+  }
 );
 
 const page = blockSuiteWorkspace.createPage('page0');
diff --git a/apps/web/src/components/affine/workspace-setting-detail/panel/publish/index.tsx b/apps/web/src/components/affine/workspace-setting-detail/panel/publish/index.tsx
index d969355553..d0ccbe59ae 100644
--- a/apps/web/src/components/affine/workspace-setting-detail/panel/publish/index.tsx
+++ b/apps/web/src/components/affine/workspace-setting-detail/panel/publish/index.tsx
@@ -89,8 +89,8 @@ const PublishPanelAffine: React.FC<PublishPanelAffineProps> = ({
       <Wrapper marginBottom="42px">{t('Publishing Description')}</Wrapper>
       <Button
         data-testid="publish-to-web-button"
-        onClick={() => {
-          publishWorkspace(true);
+        onClick={async () => {
+          await publishWorkspace(true);
         }}
         type="light"
         shape="circle"
diff --git a/apps/web/src/components/page-detail-editor.tsx b/apps/web/src/components/page-detail-editor.tsx
index 37db8eb07c..de4a30cac7 100644
--- a/apps/web/src/components/page-detail-editor.tsx
+++ b/apps/web/src/components/page-detail-editor.tsx
@@ -5,12 +5,13 @@ import { useBlockSuiteWorkspacePageTitle } from '@toeverything/hooks/use-blocksu
 import { useAtomValue, useSetAtom } from 'jotai';
 import Head from 'next/head';
 import type React from 'react';
-import { lazy, startTransition, Suspense, useCallback } from 'react';
+import { startTransition, useCallback } from 'react';
 
 import { currentEditorAtom, workspacePreferredModeAtom } from '../atoms';
 import { usePageMeta } from '../hooks/use-page-meta';
 import type { AffineOfficialWorkspace } from '../shared';
 import { PageNotFoundError } from './affine/affine-error-eoundary';
+import { BlockSuiteEditor as Editor } from './blocksuite/block-suite-editor';
 import { WorkspaceHeader } from './blocksuite/workspace-header';
 
 export type PageDetailEditorProps = {
@@ -23,12 +24,6 @@ export type PageDetailEditorProps = {
   header?: React.ReactNode;
 };
 
-const Editor = lazy(() =>
-  import('./blocksuite/block-suite-editor').then(module => ({
-    default: module.BlockSuiteEditor,
-  }))
-);
-
 export const PageDetailEditor: React.FC<PageDetailEditorProps> = ({
   workspace,
   pageId,
@@ -64,34 +59,32 @@ export const PageDetailEditor: React.FC<PageDetailEditorProps> = ({
       >
         {header}
       </WorkspaceHeader>
-      <Suspense>
-        <Editor
-          style={{
-            height: 'calc(100% - 52px)',
-          }}
-          key={pageId}
-          mode={isPublic ? 'page' : currentMode}
-          page={page}
-          onInit={useCallback(
-            (page: Page, editor: Readonly<EditorContainer>) => {
-              startTransition(() => {
-                setEditor(editor);
-              });
-              onInit(page, editor);
-            },
-            [onInit, setEditor]
-          )}
-          onLoad={useCallback(
-            (page: Page, editor: EditorContainer) => {
-              startTransition(() => {
-                setEditor(editor);
-              });
-              onLoad?.(page, editor);
-            },
-            [onLoad, setEditor]
-          )}
-        />
-      </Suspense>
+      <Editor
+        style={{
+          height: 'calc(100% - 52px)',
+        }}
+        key={`${workspace.flavour}-${workspace.id}-${[pageId]}`}
+        mode={isPublic ? 'page' : currentMode}
+        page={page}
+        onInit={useCallback(
+          (page: Page, editor: Readonly<EditorContainer>) => {
+            startTransition(() => {
+              setEditor(editor);
+            });
+            onInit(page, editor);
+          },
+          [onInit, setEditor]
+        )}
+        onLoad={useCallback(
+          (page: Page, editor: EditorContainer) => {
+            startTransition(() => {
+              setEditor(editor);
+            });
+            onLoad?.(page, editor);
+          },
+          [onLoad, setEditor]
+        )}
+      />
     </>
   );
 };
diff --git a/apps/web/src/hooks/affine/use-reference-link.ts b/apps/web/src/hooks/affine/use-reference-link-effect.ts
similarity index 95%
rename from apps/web/src/hooks/affine/use-reference-link.ts
rename to apps/web/src/hooks/affine/use-reference-link-effect.ts
index 7cabc19104..49ee7d0c6c 100644
--- a/apps/web/src/hooks/affine/use-reference-link.ts
+++ b/apps/web/src/hooks/affine/use-reference-link-effect.ts
@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 
 import { currentEditorAtom } from '../../atoms';
 
-export function useReferenceLink(props?: {
+export function useReferenceLinkEffect(props?: {
   pageLinkClicked?: (params: { pageId: string }) => void;
   subpageLinked?: (params: { pageId: string }) => void;
   subpageUnlinked?: (params: { pageId: string }) => void;
diff --git a/apps/web/src/hooks/affine/use-toggle-workspace-publish.ts b/apps/web/src/hooks/affine/use-toggle-workspace-publish.ts
index 7f661f49f7..87938305d7 100644
--- a/apps/web/src/hooks/affine/use-toggle-workspace-publish.ts
+++ b/apps/web/src/hooks/affine/use-toggle-workspace-publish.ts
@@ -15,10 +15,8 @@ export function useToggleWorkspacePublish(workspace: AffineWorkspace) {
         public: isPublish,
       });
       await mutate(QueryKey.getWorkspaces);
-      // force update
-      jotaiStore.set(jotaiWorkspacesAtom, [
-        ...jotaiStore.get(jotaiWorkspacesAtom),
-      ]);
+      // fixme: remove force update
+      jotaiStore.set(jotaiWorkspacesAtom, ws => [...ws]);
     },
     [mutate, workspace.id]
   );
diff --git a/apps/web/src/hooks/root/use-on-transform-workspace.ts b/apps/web/src/hooks/root/use-on-transform-workspace.ts
index a834a612f2..87e48b8c0f 100644
--- a/apps/web/src/hooks/root/use-on-transform-workspace.ts
+++ b/apps/web/src/hooks/root/use-on-transform-workspace.ts
@@ -9,7 +9,6 @@ import {
 import type { WorkspaceRegistry } from '@affine/workspace/type';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import { useSetAtom } from 'jotai';
-import { useRouter } from 'next/router';
 import { useCallback } from 'react';
 
 import { affineAuth } from '../../plugins/affine';
@@ -18,7 +17,6 @@ import { useTransformWorkspace } from '../use-transform-workspace';
 export function useOnTransformWorkspace() {
   const transformWorkspace = useTransformWorkspace();
   const setUser = useSetAtom(currentAffineUserAtom);
-  const router = useRouter();
   return useCallback(
     async <From extends WorkspaceFlavour, To extends WorkspaceFlavour>(
       from: From,
@@ -35,13 +33,6 @@ export function useOnTransformWorkspace() {
         }
       }
       const workspaceId = await transformWorkspace(from, to, workspace);
-      await router.replace({
-        pathname: `/workspace/[workspaceId]/setting`,
-        query: {
-          ...router.query,
-          workspaceId,
-        },
-      });
       window.dispatchEvent(
         new CustomEvent('affine-workspace:transform', {
           detail: {
@@ -53,6 +44,6 @@ export function useOnTransformWorkspace() {
         })
       );
     },
-    [router, setUser, transformWorkspace]
+    [setUser, transformWorkspace]
   );
 }
diff --git a/apps/web/src/hooks/use-router-helper.ts b/apps/web/src/hooks/use-router-helper.ts
index 9232e09878..29ff3a7ff7 100644
--- a/apps/web/src/hooks/use-router-helper.ts
+++ b/apps/web/src/hooks/use-router-helper.ts
@@ -25,6 +25,26 @@ export function useRouterHelper(router: NextRouter) {
     },
     [router]
   );
+  const jumpToWorkspace = useCallback(
+    (workspaceId: string, logic: RouteLogic = RouteLogic.PUSH) => {
+      if (router.pathname === '/workspace/[workspaceId]/[pageId]') {
+        return router[logic]({
+          pathname: `/workspace/[workspaceId]`,
+          query: {
+            workspaceId: workspaceId,
+          },
+        });
+      } else {
+        return router[logic]({
+          pathname: router.pathname,
+          query: {
+            workspaceId: workspaceId,
+          },
+        });
+      }
+    },
+    [router]
+  );
   const jumpToPublicWorkspacePage = useCallback(
     (
       workspaceId: string,
@@ -71,6 +91,7 @@ export function useRouterHelper(router: NextRouter) {
 
   return {
     jumpToPage,
+    jumpToWorkspace,
     jumpToPublicWorkspacePage,
     jumpToSubPath,
     openPage,
diff --git a/apps/web/src/hooks/use-transform-workspace.ts b/apps/web/src/hooks/use-transform-workspace.ts
index 703c2cc686..294477f2f1 100644
--- a/apps/web/src/hooks/use-transform-workspace.ts
+++ b/apps/web/src/hooks/use-transform-workspace.ts
@@ -2,9 +2,11 @@ import { jotaiWorkspacesAtom } from '@affine/workspace/atom';
 import type { WorkspaceFlavour } from '@affine/workspace/type';
 import type { WorkspaceRegistry } from '@affine/workspace/type';
 import { useSetAtom } from 'jotai';
+import { useRouter } from 'next/router';
 import { useCallback } from 'react';
 
 import { WorkspacePlugins } from '../plugins';
+import { useRouterHelper } from './use-router-helper';
 
 /**
  * Transform workspace from one flavour to another
@@ -13,6 +15,8 @@ import { WorkspacePlugins } from '../plugins';
  */
 export function useTransformWorkspace() {
   const set = useSetAtom(jotaiWorkspacesAtom);
+  const router = useRouter();
+  const helper = useRouterHelper(router);
   return useCallback(
     async <From extends WorkspaceFlavour, To extends WorkspaceFlavour>(
       from: From,
@@ -31,8 +35,9 @@ export function useTransformWorkspace() {
         });
         return [...workspaces];
       });
+      await helper.jumpToWorkspace(newId);
       return newId;
     },
-    [set]
+    [helper, set]
   );
 }
diff --git a/apps/web/src/layouts/index.tsx b/apps/web/src/layouts/index.tsx
index 110e5946eb..c6e13b2573 100644
--- a/apps/web/src/layouts/index.tsx
+++ b/apps/web/src/layouts/index.tsx
@@ -5,7 +5,6 @@ import { createAffineGlobalChannel } from '@affine/workspace/affine/sync';
 import { jotaiStore, jotaiWorkspacesAtom } from '@affine/workspace/atom';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import { assertExists, nanoid } from '@blocksuite/store';
-import { NoSsr } from '@mui/material';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
@@ -179,13 +178,13 @@ export const WorkspaceLayout: FC<PropsWithChildren> =
       }
     }, [currentWorkspaceId, jotaiWorkspaces]);
     return (
-      <NoSsr>
+      <>
         {/* fixme(himself65): don't re-render whole modals */}
         <ModalProvider key={currentWorkspaceId} />
         <Suspense fallback={<PageLoading />}>
           <WorkspaceLayoutInner>{children}</WorkspaceLayoutInner>
         </Suspense>
-      </NoSsr>
+      </>
     );
   };
 
diff --git a/apps/web/src/pages/_debug/init-page.dev.tsx b/apps/web/src/pages/_debug/init-page.dev.tsx
index dbe19a966a..29e3c0de80 100644
--- a/apps/web/src/pages/_debug/init-page.dev.tsx
+++ b/apps/web/src/pages/_debug/init-page.dev.tsx
@@ -1,10 +1,9 @@
-import { NoSsr } from '@mui/material';
 import { useRouter } from 'next/router';
 import { lazy, Suspense } from 'react';
 
 import { StyledPage, StyledWrapper } from '../../layouts/styles';
 import type { NextPageWithLayout } from '../../shared';
-import { initPage } from '../../utils/blocksuite';
+import { initPage } from '../../utils';
 
 const Editor = lazy(() =>
   import('../../components/__debug__/client/Editor').then(module => ({
@@ -36,7 +35,3 @@ const InitPagePage: NextPageWithLayout = () => {
 };
 
 export default InitPagePage;
-
-InitPagePage.getLayout = page => {
-  return <NoSsr>{page}</NoSsr>;
-};
diff --git a/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx b/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx
index 0474e6665e..d9f4002573 100644
--- a/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx
+++ b/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx
@@ -4,10 +4,10 @@ import { PageIcon } from '@blocksuite/icons';
 import { assertExists } from '@blocksuite/store';
 import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-blocksuite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-blocksuite-workspace-name';
-import { useAtomValue, useSetAtom } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import type React from 'react';
+import type { ReactElement } from 'react';
 import { Suspense, useCallback, useEffect } from 'react';
 
 import {
@@ -15,11 +15,10 @@ import {
   publicWorkspaceIdAtom,
   publicWorkspacePageIdAtom,
 } from '../../../atoms/public-workspace';
-import { QueryParamError } from '../../../components/affine/affine-error-eoundary';
 import { PageDetailEditor } from '../../../components/page-detail-editor';
 import { WorkspaceAvatar } from '../../../components/pure/footer';
 import { PageLoading } from '../../../components/pure/loading';
-import { useReferenceLink } from '../../../hooks/affine/use-reference-link';
+import { useReferenceLinkEffect } from '../../../hooks/affine/use-reference-link-effect';
 import { useRouterHelper } from '../../../hooks/use-router-helper';
 import {
   PublicQuickSearch,
@@ -55,9 +54,9 @@ export const StyledBreadcrumbs = styled(Link)(({ theme }) => {
   };
 });
 
-const PublicWorkspaceDetailPageInner: React.FC<{
-  pageId: string;
-}> = ({ pageId }) => {
+const PublicWorkspaceDetailPageInner = (): ReactElement => {
+  const pageId = useAtomValue(publicWorkspacePageIdAtom);
+  assertExists(pageId, 'pageId is null');
   const publicWorkspace = useAtomValue(publicPageBlockSuiteAtom);
   const blockSuiteWorkspace = publicWorkspace.blockSuiteWorkspace;
   if (!blockSuiteWorkspace) {
@@ -65,10 +64,9 @@ const PublicWorkspaceDetailPageInner: React.FC<{
   }
   const router = useRouter();
   const { openPage } = useRouterHelper(router);
-  useReferenceLink({
+  useReferenceLinkEffect({
     pageLinkClicked: useCallback(
       ({ pageId }: { pageId: string }) => {
-        assertExists(currentWorkspace);
         return openPage(blockSuiteWorkspace.id, pageId);
       },
       [blockSuiteWorkspace.id, openPage]
@@ -115,31 +113,31 @@ const PublicWorkspaceDetailPageInner: React.FC<{
 
 export const PublicWorkspaceDetailPage: NextPageWithLayout = () => {
   const router = useRouter();
-  const workspaceId = router.query.workspaceId;
-  const pageId = router.query.pageId;
-  const setWorkspaceId = useSetAtom(publicWorkspaceIdAtom);
-  const setPageId = useSetAtom(publicWorkspacePageIdAtom);
+  const [workspaceId, setWorkspaceId] = useAtom(publicWorkspaceIdAtom);
+  const [pageId, setPageId] = useAtom(publicWorkspacePageIdAtom);
   useEffect(() => {
     if (!router.isReady) {
       return;
     }
-    if (typeof workspaceId === 'string') {
-      setWorkspaceId(workspaceId);
+    if (typeof router.query.workspaceId === 'string') {
+      setWorkspaceId(router.query.workspaceId);
     }
-    if (typeof pageId === 'string') {
-      setPageId(pageId);
+    if (typeof router.query.pageId === 'string') {
+      setPageId(router.query.pageId);
     }
-  }, [pageId, router.isReady, setPageId, setWorkspaceId, workspaceId]);
-  const value = useAtomValue(publicWorkspaceIdAtom);
-  if (!router.isReady || !value) {
+  }, [
+    router.isReady,
+    router.query.pageId,
+    router.query.workspaceId,
+    setPageId,
+    setWorkspaceId,
+  ]);
+  if (!router.isReady || !workspaceId || !pageId) {
     return <PageLoading />;
   }
-  if (typeof workspaceId !== 'string' || typeof pageId !== 'string') {
-    throw new QueryParamError('workspaceId, pageId', workspaceId);
-  }
   return (
     <Suspense fallback={<PageLoading />}>
-      <PublicWorkspaceDetailPageInner pageId={pageId} />
+      <PublicWorkspaceDetailPageInner />
     </Suspense>
   );
 };
diff --git a/apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx b/apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx
index d483e5bb4f..b865942584 100644
--- a/apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx
+++ b/apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx
@@ -6,7 +6,7 @@ import { useCallback, useEffect } from 'react';
 
 import { Unreachable } from '../../../components/affine/affine-error-eoundary';
 import { PageLoading } from '../../../components/pure/loading';
-import { useReferenceLink } from '../../../hooks/affine/use-reference-link';
+import { useReferenceLinkEffect } from '../../../hooks/affine/use-reference-link-effect';
 import { useCurrentPageId } from '../../../hooks/current/use-current-page-id';
 import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
 import { usePageMeta, usePageMetaHelper } from '../../../hooks/use-page-meta';
@@ -43,7 +43,7 @@ const WorkspaceDetail: React.FC = () => {
 
   useSyncRecentViewsWithRouter(router);
 
-  useReferenceLink({
+  useReferenceLinkEffect({
     pageLinkClicked: useCallback(
       ({ pageId }: { pageId: string }) => {
         assertExists(currentWorkspace);
diff --git a/packages/component/package.json b/packages/component/package.json
index 0430965798..419c3f1152 100644
--- a/packages/component/package.json
+++ b/packages/component/package.json
@@ -13,11 +13,11 @@
     "./*": "./src/components/*/index.tsx"
   },
   "peerDependencies": {
-    "@blocksuite/blocks": "0.0.0-20230409084303-221991d4-nightly",
-    "@blocksuite/editor": "0.0.0-20230409084303-221991d4-nightly",
-    "@blocksuite/global": "0.0.0-20230409084303-221991d4-nightly",
-    "@blocksuite/icons": "2.1.10",
-    "@blocksuite/store": "0.0.0-20230409084303-221991d4-nightly"
+    "@blocksuite/blocks": "*",
+    "@blocksuite/editor": "*",
+    "@blocksuite/global": "*",
+    "@blocksuite/icons": "*",
+    "@blocksuite/store": "*"
   },
   "dependencies": {
     "@affine/debug": "workspace:*",
@@ -36,6 +36,7 @@
     "@radix-ui/react-avatar": "^1.0.2",
     "@toeverything/hooks": "workspace:*",
     "clsx": "^1.2.1",
+    "jotai": "^2.0.4",
     "kebab-case": "^1.0.2",
     "lit": "^2.7.2",
     "lottie-web": "^5.11.0",
diff --git a/packages/component/src/components/block-suite-editor/index.stories.tsx b/packages/component/src/components/block-suite-editor/index.stories.tsx
index e1494f46ce..1eeb50a3c1 100644
--- a/packages/component/src/components/block-suite-editor/index.stories.tsx
+++ b/packages/component/src/components/block-suite-editor/index.stories.tsx
@@ -59,13 +59,13 @@ const Template: StoryFn<EditorProps> = (props: EditorProps) => {
 
 export const Empty = Template.bind({});
 Empty.play = async ({ canvasElement }) => {
+  await new Promise<void>(resolve => {
+    setTimeout(() => resolve(), 500);
+  });
   const editorContainer = canvasElement.querySelector(
     '[data-testid="editor-page0"]'
   ) as HTMLDivElement;
   expect(editorContainer).not.toBeNull();
-  await new Promise<void>(resolve => {
-    setTimeout(() => resolve(), 50);
-  });
   const editor = editorContainer.querySelector(
     'editor-container'
   ) as EditorContainer;
diff --git a/packages/component/src/components/block-suite-editor/index.tsx b/packages/component/src/components/block-suite-editor/index.tsx
index d531b9eabf..0bc64a35dc 100644
--- a/packages/component/src/components/block-suite-editor/index.tsx
+++ b/packages/component/src/components/block-suite-editor/index.tsx
@@ -1,9 +1,11 @@
+import { editorContainerModuleAtom } from '@affine/jotai';
 import type { BlockHub } from '@blocksuite/blocks';
-import { EditorContainer } from '@blocksuite/editor';
+import type { EditorContainer } from '@blocksuite/editor';
 import { assertExists } from '@blocksuite/global/utils';
 import type { Page } from '@blocksuite/store';
+import { useAtomValue } from 'jotai';
 import type { CSSProperties, ReactElement } from 'react';
-import { memo, useCallback, useEffect, useRef } from 'react';
+import { memo, Suspense, useCallback, useEffect, useRef } from 'react';
 import type { FallbackProps } from 'react-error-boundary';
 import { ErrorBoundary } from 'react-error-boundary';
 
@@ -27,12 +29,15 @@ declare global {
 }
 
 const BlockSuiteEditorImpl = (props: EditorProps): ReactElement => {
+  const JotaiEditorContainer = useAtomValue(
+    editorContainerModuleAtom
+  ) as typeof EditorContainer;
   const page = props.page;
   assertExists(page, 'page should not be null');
   const editorRef = useRef<EditorContainer | null>(null);
   const blockHubRef = useRef<BlockHub | null>(null);
   if (editorRef.current === null) {
-    editorRef.current = new EditorContainer();
+    editorRef.current = new JotaiEditorContainer();
     editorRef.current.autofocus = true;
     globalThis.currentEditor = editorRef.current;
   }
@@ -83,7 +88,7 @@ const BlockSuiteEditorImpl = (props: EditorProps): ReactElement => {
       blockHubRef.current?.remove();
       container.removeChild(editor);
     };
-  }, [page]);
+  }, [editor, page]);
   return (
     <div
       data-testid={`editor-${props.page.id}`}
@@ -126,7 +131,9 @@ export const BlockSuiteEditor = memo(function BlockSuiteEditor(
         [props.onReset]
       )}
     >
-      <BlockSuiteEditorImpl {...props} />
+      <Suspense fallback={null}>
+        <BlockSuiteEditorImpl {...props} />
+      </Suspense>
     </ErrorBoundary>
   );
 });
diff --git a/packages/jotai/package.json b/packages/jotai/package.json
index 616db19a61..3a4555de05 100644
--- a/packages/jotai/package.json
+++ b/packages/jotai/package.json
@@ -7,9 +7,17 @@
     "jotai": "^2.0.4"
   },
   "devDependencies": {
+    "@blocksuite/blocks": "0.0.0-20230413190748-4d32b79a-nightly",
+    "@blocksuite/editor": "0.0.0-20230413190748-4d32b79a-nightly",
+    "@blocksuite/global": "0.0.0-20230413190748-4d32b79a-nightly",
+    "@blocksuite/store": "0.0.0-20230413190748-4d32b79a-nightly",
     "lottie-web": "^5.11.0"
   },
   "peerDependencies": {
+    "@blocksuite/blocks": "*",
+    "@blocksuite/editor": "*",
+    "@blocksuite/global": "*",
+    "@blocksuite/store": "*",
     "lottie-web": "*"
   }
 }
diff --git a/packages/jotai/src/resource.ts b/packages/jotai/src/resource.ts
index f80fabfc53..34fc99781f 100644
--- a/packages/jotai/src/resource.ts
+++ b/packages/jotai/src/resource.ts
@@ -1,5 +1,14 @@
+import { getEnvironment } from '@affine/env';
+import type { EditorContainer } from '@blocksuite/editor';
 import { atom } from 'jotai';
 
-export const lottieAtom = atom(async () =>
-  import('lottie-web').then(m => m.default)
+export const lottieAtom = atom(import('lottie-web').then(m => m.default));
+
+export const editorContainerModuleAtom = atom<Promise<typeof EditorContainer>>(
+  getEnvironment().isServer
+    ? async () =>
+        import('@blocksuite/editor').then(module => module.EditorContainer)
+    : (import('@blocksuite/editor').then(
+        module => module.EditorContainer
+      ) as any)
 );
diff --git a/packages/workspace/package.json b/packages/workspace/package.json
index afb50a4ab4..39bedb01cb 100644
--- a/packages/workspace/package.json
+++ b/packages/workspace/package.json
@@ -13,8 +13,8 @@
     "./affine/keck": "./src/affine/keck/index.ts"
   },
   "peerDependencies": {
-    "@blocksuite/blocks": "0.0.0-20230409084303-221991d4-nightly",
-    "@blocksuite/store": "0.0.0-20230409084303-221991d4-nightly"
+    "@blocksuite/blocks": "*",
+    "@blocksuite/store": "*"
   },
   "dependencies": {
     "@affine-test/fixtures": "workspace:*",
diff --git a/packages/workspace/src/affine/login.ts b/packages/workspace/src/affine/login.ts
index 0484bc5eb0..88b1d1f5d0 100644
--- a/packages/workspace/src/affine/login.ts
+++ b/packages/workspace/src/affine/login.ts
@@ -57,6 +57,7 @@ export const isExpired = (
 };
 
 export const setLoginStorage = (login: LoginResponse) => {
+  loginResponseSchema.parse(login);
   localStorage.setItem(
     STORAGE_KEY,
     JSON.stringify({
diff --git a/packages/workspace/src/utils.ts b/packages/workspace/src/utils.ts
index b9360cd61b..496af23ec3 100644
--- a/packages/workspace/src/utils.ts
+++ b/packages/workspace/src/utils.ts
@@ -6,11 +6,17 @@ const hashMap = new Map<string, Workspace>();
 export const createEmptyBlockSuiteWorkspace = (
   id: string,
   blobOptionsGetter?: BlobOptionsGetter,
-  idGenerator?: Generator
-): Workspace => {
-  if (hashMap.has(id)) {
-    return hashMap.get(id) as Workspace;
+  config?: {
+    cachePrefix?: string;
+    idGenerator?: Generator;
   }
+): Workspace => {
+  const prefix: string = config?.cachePrefix ?? '';
+  const cacheKey = `${prefix}${id}`;
+  if (hashMap.has(cacheKey)) {
+    return hashMap.get(cacheKey) as Workspace;
+  }
+  const idGenerator = config?.idGenerator;
   const workspace = new Workspace({
     id,
     isSSR: typeof window === 'undefined',
@@ -19,6 +25,6 @@ export const createEmptyBlockSuiteWorkspace = (
   })
     .register(AffineSchemas)
     .register(__unstableSchemas);
-  hashMap.set(id, workspace);
+  hashMap.set(cacheKey, workspace);
   return workspace;
 };
diff --git a/playwright.config.ts b/playwright.config.ts
index 78a62235e4..2f1540754d 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -76,8 +76,6 @@ const config: PlaywrightTestConfig = {
       env: {
         COVERAGE: process.env.COVERAGE || 'false',
         ENABLE_DEBUG_PAGE: '1',
-        ENABLE_SUBPAGE: '1',
-        ENABLE_CHANGELOG: '1',
         API_SERVER_PROFILE: 'local',
       },
     },
diff --git a/scripts/setup/lottie-web.ts b/scripts/setup/lottie-web.ts
new file mode 100644
index 0000000000..f4a5b8ebbb
--- /dev/null
+++ b/scripts/setup/lottie-web.ts
@@ -0,0 +1,18 @@
+import { vi } from 'vitest';
+
+vi.mock('lottie-web', () => ({
+  default: {},
+}));
+
+vi.mock('@blocksuite/editor', () => ({
+  EditorContainer: vi.fn(),
+}));
+
+if (typeof window !== 'undefined' && HTMLCanvasElement) {
+  // @ts-expect-error
+  HTMLCanvasElement.prototype.getContext = () => {
+    return {
+      fillRect: vi.fn(),
+    };
+  };
+}
diff --git a/tests/libs/playwright.ts b/tests/libs/playwright.ts
index 1e7da6728b..211e16df80 100644
--- a/tests/libs/playwright.ts
+++ b/tests/libs/playwright.ts
@@ -40,7 +40,14 @@ export const test = baseTest.extend({
         }
       );
     }
+
+    for (const page of context.pages()) {
+      await page.evaluate(() => window.localStorage.clear());
+      await page.evaluate(() => window.sessionStorage.clear());
+    }
+
     await use(context);
+
     if (enableCoverage) {
       for (const page of context.pages()) {
         await page.evaluate(() =>
diff --git a/vitest.config.ts b/vitest.config.ts
index 708ef9e6a7..417b39978b 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -14,7 +14,7 @@ export default defineConfig({
     },
   },
   test: {
-    setupFiles: ['./scripts/setup/search.ts'],
+    setupFiles: ['./scripts/setup/search.ts', './scripts/setup/lottie-web.ts'],
     include: [
       'packages/**/*.spec.ts',
       'packages/**/*.spec.tsx',
diff --git a/yarn.lock b/yarn.lock
index edbce739e5..f837ac0ffa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -75,6 +75,7 @@ __metadata:
     clsx: ^1.2.1
     concurrently: ^8.0.1
     jest-mock: ^29.5.0
+    jotai: ^2.0.4
     kebab-case: ^1.0.2
     lit: ^2.7.2
     lottie-web: ^5.11.0
@@ -92,11 +93,11 @@ __metadata:
     wait-on: ^7.0.1
     yjs: ^13.5.52
   peerDependencies:
-    "@blocksuite/blocks": 0.0.0-20230409084303-221991d4-nightly
-    "@blocksuite/editor": 0.0.0-20230409084303-221991d4-nightly
-    "@blocksuite/global": 0.0.0-20230409084303-221991d4-nightly
-    "@blocksuite/icons": 2.1.10
-    "@blocksuite/store": 0.0.0-20230409084303-221991d4-nightly
+    "@blocksuite/blocks": "*"
+    "@blocksuite/editor": "*"
+    "@blocksuite/global": "*"
+    "@blocksuite/icons": "*"
+    "@blocksuite/store": "*"
   languageName: unknown
   linkType: soft
 
@@ -148,9 +149,17 @@ __metadata:
   resolution: "@affine/jotai@workspace:packages/jotai"
   dependencies:
     "@affine/env": "workspace:*"
+    "@blocksuite/blocks": 0.0.0-20230413190748-4d32b79a-nightly
+    "@blocksuite/editor": 0.0.0-20230413190748-4d32b79a-nightly
+    "@blocksuite/global": 0.0.0-20230413190748-4d32b79a-nightly
+    "@blocksuite/store": 0.0.0-20230413190748-4d32b79a-nightly
     jotai: ^2.0.4
     lottie-web: ^5.11.0
   peerDependencies:
+    "@blocksuite/blocks": "*"
+    "@blocksuite/editor": "*"
+    "@blocksuite/global": "*"
+    "@blocksuite/store": "*"
     lottie-web: "*"
   languageName: unknown
   linkType: soft
@@ -257,8 +266,8 @@ __metadata:
     yjs: ^13.5.52
     zod: ^3.21.4
   peerDependencies:
-    "@blocksuite/blocks": 0.0.0-20230409084303-221991d4-nightly
-    "@blocksuite/store": 0.0.0-20230409084303-221991d4-nightly
+    "@blocksuite/blocks": "*"
+    "@blocksuite/store": "*"
   languageName: unknown
   linkType: soft