fix: remove pageMode from pageMeta ()

This commit is contained in:
Himself65 2023-03-21 19:45:54 -05:00 committed by GitHub
parent e7d6bda7a5
commit 45260543e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 40 additions and 27 deletions
apps/web/src
atoms
components
blocksuite
block-suite-page-list/page-list
header/editor-mode-switch
page-detail-editor.tsx
hooks
providers

View File

@ -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) => {

View File

@ -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 />

View File

@ -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 {
usePageMeta,
usePageMetaHelper,
} from '../../../../hooks/use-page-meta';
import { workspacePreferredModeAtom } from '../../../../atoms';
import { usePageMeta } 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'}
hide={trash && mode !== 'page'}
active={currentMode === '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'}
hide={trash && mode !== 'edgeless'}
active={currentMode === 'edgeless'}
hide={trash && currentMode !== 'edgeless'}
onClick={() => {
setPageMeta(pageId, { mode: 'edgeless' });
setMode(mode => ({ ...mode, [pageMeta.id]: 'edgeless' }));
toast('Edgeless mode');
}}
/>

View File

@ -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' : meta.mode ?? 'page'}
mode={isPublic ? 'page' : currentMode}
page={page}
onInit={useCallback(
(page: Page, editor: Readonly<EditorContainer>) => {

View File

@ -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]);
}

View File

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

View File

@ -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 editorMode =
pageMeta.find(page => page.id === currentPage?.id)?.mode ?? 'page';
const record = useAtomValue(workspacePreferredModeAtom);
const editorMode = currentPage ? record[currentPage.id] ?? 'page' : 'page';
const themeStyle = useMemo(() => getLightTheme(editorMode), [editorMode]);
const darkThemeStyle = useMemo(
() => getDarkTheme(editorMode),