fix: remove pageMode from pageMeta (#1647)

apps/web/src/atoms/index.ts

@@ -1,4 +1,5 @@
 import type { EditorContainer } from '@blocksuite/editor';
+import type { Page } from '@blocksuite/store';
 import { assertExists } from '@blocksuite/store';
 import { atom, createStore } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';
@@ -72,6 +73,12 @@ export const workspaceRecentViewsAtom = atomWithStorage<WorkspaceRecentViews>(
   {}
 );
 
+export type PreferredModeRecord = Record<Page['id'], 'page' | 'edgeless'>;
+export const workspacePreferredModeAtom = atomWithStorage<PreferredModeRecord>(
+  'preferredMode',
+  {}
+);
+
 export const workspaceRecentViresWriteAtom = atom<null, [string, View], View[]>(
   null,
   (get, set, id, value) => {

apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx

@@ -19,9 +19,11 @@ import {
   useTheme as useMuiTheme,
   useTheme,
 } from '@mui/material';
+import { useAtomValue } from 'jotai';
 import type React from 'react';
 import { useMemo } from 'react';
 
+import { workspacePreferredModeAtom } from '../../../../atoms';
 import {
   usePageMeta,
   usePageMetaHelper,
@@ -102,6 +104,7 @@ export const PageList: React.FC<PageListProps> = ({
   const theme = useMuiTheme();
   const matches = useMediaQuery(theme.breakpoints.up('sm'));
   const isTrash = listType === 'trash';
+  const record = useAtomValue(workspacePreferredModeAtom);
   const list = useMemo(
     () => pageList.filter(filter[listType ?? 'all']),
     [pageList, listType]
@@ -141,7 +144,7 @@ export const PageList: React.FC<PageListProps> = ({
                 >
                   <StyledTitleWrapper>
                     <StyledTitleLink>
-                      {pageMeta.mode === 'edgeless' ? (
+                      {record[pageMeta.id] === 'edgeless' ? (
                         <EdgelessIcon />
                       ) : (
                         <PageIcon />

apps/web/src/components/blocksuite/header/editor-mode-switch/index.tsx

@@ -1,11 +1,10 @@
 import { toast } from '@affine/component';
 import { assertExists } from '@blocksuite/store';
+import { useAtomValue, useSetAtom } from 'jotai';
 import type { CSSProperties } from 'react';
 
-import {
+import { workspacePreferredModeAtom } from '../../../../atoms';
-  usePageMeta,
+import { usePageMeta } from '../../../../hooks/use-page-meta';
-  usePageMetaHelper,
-} from '../../../../hooks/use-page-meta';
 import type { BlockSuiteWorkspace } from '../../../../shared';
 import { StyledEditorModeSwitch } from './style';
 import { EdgelessSwitchItem, PageSwitchItem } from './switch-items';
@@ -22,34 +21,36 @@ export const EditorModeSwitch = ({
   blockSuiteWorkspace,
   pageId,
 }: EditorModeSwitchProps) => {
-  const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
+  const currentMode =
+    useAtomValue(workspacePreferredModeAtom)[pageId] ?? 'page';
+  const setMode = useSetAtom(workspacePreferredModeAtom);
   const pageMeta = usePageMeta(blockSuiteWorkspace).find(
     meta => meta.id === pageId
   );
   assertExists(pageMeta);
-  const { trash, mode = 'page' } = pageMeta;
+  const { trash } = pageMeta;
 
   return (
     <StyledEditorModeSwitch
       style={style}
-      switchLeft={mode === 'page'}
+      switchLeft={currentMode === 'page'}
       showAlone={trash}
     >
       <PageSwitchItem
         data-testid="switch-page-mode-button"
-        active={mode === 'page'}
+        active={currentMode === 'page'}
-        hide={trash && mode !== 'page'}
+        hide={trash && currentMode !== 'page'}
         onClick={() => {
-          setPageMeta(pageId, { mode: 'page' });
+          setMode(mode => ({ ...mode, [pageMeta.id]: 'page' }));
           toast('Page mode');
         }}
       />
       <EdgelessSwitchItem
         data-testid="switch-edgeless-mode-button"
-        active={mode === 'edgeless'}
+        active={currentMode === 'edgeless'}
-        hide={trash && mode !== 'edgeless'}
+        hide={trash && currentMode !== 'edgeless'}
         onClick={() => {
-          setPageMeta(pageId, { mode: 'edgeless' });
+          setMode(mode => ({ ...mode, [pageMeta.id]: 'edgeless' }));
           toast('Edgeless mode');
         }}
       />

apps/web/src/components/page-detail-editor.tsx

@@ -1,13 +1,13 @@
 import type { EditorContainer } from '@blocksuite/editor';
 import type { Page } from '@blocksuite/store';
 import { assertExists } from '@blocksuite/store';
-import { useSetAtom } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import type React from 'react';
 import { useCallback } from 'react';
 
-import { currentEditorAtom } from '../atoms';
+import { currentEditorAtom, workspacePreferredModeAtom } from '../atoms';
 import { useBlockSuiteWorkspacePageTitle } from '../hooks/use-blocksuite-workspace-page-title';
 import { usePageMeta } from '../hooks/use-page-meta';
 import type { BlockSuiteWorkspace } from '../shared';
@@ -49,6 +49,8 @@ export const PageDetailEditor: React.FC<PageDetailEditorProps> = ({
   const meta = usePageMeta(blockSuiteWorkspace).find(
     meta => meta.id === pageId
   );
+  const currentMode =
+    useAtomValue(workspacePreferredModeAtom)[pageId] ?? 'page';
   const setEditor = useSetAtom(currentEditorAtom);
   assertExists(meta);
   return (
@@ -70,8 +72,7 @@ export const PageDetailEditor: React.FC<PageDetailEditorProps> = ({
         }}
         key={pageId}
         blockSuiteWorkspace={blockSuiteWorkspace}
-        // fixme: remove mode from meta
+        mode={isPublic ? 'page' : currentMode}
-        mode={isPublic ? 'page' : meta.mode ?? 'page'}
         page={page}
         onInit={useCallback(
           (page: Page, editor: Readonly<EditorContainer>) => {

apps/web/src/hooks/affine/use-recent-views.ts

@@ -3,6 +3,7 @@ import type { NextRouter } from 'next/router';
 import { useEffect } from 'react';
 
 import {
+  workspacePreferredModeAtom,
   workspaceRecentViewsAtom,
   workspaceRecentViresWriteAtom,
 } from '../../atoms';
@@ -27,13 +28,16 @@ export function useSyncRecentViewsWithRouter(router: NextRouter) {
   const meta = usePageMeta(blockSuiteWorkspace).find(
     meta => meta.id === pageId
   );
+  const currentMode = useAtomValue(workspacePreferredModeAtom)[
+    pageId as string
+  ];
   useEffect(() => {
     if (!workspaceId) return;
     if (pageId && meta) {
       set(workspaceId, {
         id: pageId as string,
-        mode: meta.mode || 'page',
+        mode: currentMode ?? 'page',
       });
     }
-  }, [pageId, meta, workspaceId, set]);
+  }, [pageId, meta, workspaceId, set, currentMode]);
 }

apps/web/src/hooks/use-page-meta.ts

@@ -5,7 +5,6 @@ import type { BlockSuiteWorkspace } from '../shared';
 
 declare module '@blocksuite/store' {
   interface PageMeta {
-    mode?: 'page' | 'edgeless';
     favorite?: boolean;
     trash?: boolean;
     trashDate?: number;

apps/web/src/providers/ThemeProvider.tsx

@@ -6,14 +6,14 @@ import {
   ThemeProvider as AffineThemeProvider,
 } from '@affine/component';
 import { GlobalStyles } from '@mui/material';
+import { useAtomValue } from 'jotai';
 import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes';
 import type { PropsWithChildren } from 'react';
 import type React from 'react';
 import { memo, useEffect, useMemo, useState } from 'react';
 
+import { workspacePreferredModeAtom } from '../atoms';
 import { useCurrentPage } from '../hooks/current/use-current-page-id';
-import { useCurrentWorkspace } from '../hooks/current/use-current-workspace';
-import { usePageMeta } from '../hooks/use-page-meta';
 
 const ThemeInjector = memo<{
   themeStyle: AffineTheme;
@@ -40,11 +40,9 @@ const ThemeInjector = memo<{
 const ThemeProviderInner = memo<React.PropsWithChildren>(
   function ThemeProviderInner({ children }) {
     const { resolvedTheme: theme } = useTheme();
-    const [currentWorkspace] = useCurrentWorkspace();
     const currentPage = useCurrentPage();
-    const pageMeta = usePageMeta(currentWorkspace?.blockSuiteWorkspace ?? null);
+    const record = useAtomValue(workspacePreferredModeAtom);
-    const editorMode =
+    const editorMode = currentPage ? record[currentPage.id] ?? 'page' : 'page';
-      pageMeta.find(page => page.id === currentPage?.id)?.mode ?? 'page';
     const themeStyle = useMemo(() => getLightTheme(editorMode), [editorMode]);
     const darkThemeStyle = useMemo(
       () => getDarkTheme(editorMode),