Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-15 00:56:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add page setting atom (#2725)

Browse Source 
(cherry picked from commit 9f129075dd)
This commit is contained in:
Himself65
2023-06-09 00:58:46 +08:00
committed by himself65
parent 4373aae010
commit 6d3dd9eefb
14 changed files with 119 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/blocksuite/block-suite-page-list/index.tsx
+2 -2
View File
@@ -17,7 +17,7 @@ import { useAtom } from 'jotai';
import type React from 'react';
import { useMemo } from 'react';
import { pageModeSelectAtom } from '../../../atoms';
import { allPageModeSelectAtom } from '../../../atoms';
import { useBlockSuiteMetaHelper } from '../../../hooks/affine/use-block-suite-meta-helper';
import type { BlockSuiteWorkspace } from '../../../shared';
import { toast } from '../../../utils';
@@ -107,7 +107,7 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
permanentlyDeletePage,
cancelPublicPage,
} = useBlockSuiteMetaHelper(blockSuiteWorkspace);
const [filterMode] = useAtom(pageModeSelectAtom);
const [filterMode] = useAtom(allPageModeSelectAtom);
const { createPage, createEdgeless, importFile, isPreferredEdgeless } =
usePageHelper(blockSuiteWorkspace);
const t = useAFFiNEI18N();
apps/web/src/components/blocksuite/block-suite-page-list/utils.tsx
+16 -13
View File
@@ -1,7 +1,9 @@
import { useBlockSuiteWorkspaceHelper } from '@toeverything/hooks/use-block-suite-workspace-helper';
import { useAtomValue, useSetAtom } from 'jotai';
import { useRouter } from 'next/router';
import { useCallback } from 'react';
import { useWorkspacePreferredMode } from '../../../hooks/use-recent-views';
import { pageSettingsAtom, setPageModeAtom } from '../../../atoms';
import { useRouterHelper } from '../../../hooks/use-router-helper';
import type { BlockSuiteWorkspace } from '../../../shared';
@@ -9,24 +11,25 @@ export const usePageHelper = (blockSuiteWorkspace: BlockSuiteWorkspace) => {
const router = useRouter();
const { openPage } = useRouterHelper(router);
const { createPage } = useBlockSuiteWorkspaceHelper(blockSuiteWorkspace);
const { getPreferredMode, setPreferredMode } = useWorkspacePreferredMode();
const isPreferredEdgeless = (pageId: string) => {
return getPreferredMode(pageId) === 'edgeless';
};
const createPageAndOpen = () => {
const pageSettings = useAtomValue(pageSettingsAtom);
const isPreferredEdgeless = useCallback(
(pageId: string) => pageSettings[pageId]?.mode === 'edgeless',
[pageSettings]
);
const setPageMode = useSetAtom(setPageModeAtom);
const createPageAndOpen = useCallback(() => {
const page = createPage();
return openPage(blockSuiteWorkspace.id, page.id);
};
const createEdgelessAndOpen = () => {
}, [blockSuiteWorkspace.id, createPage, openPage]);
const createEdgelessAndOpen = useCallback(() => {
const page = createPage();
setPreferredMode(page.id, 'edgeless');
setPageMode(page.id, 'edgeless');
return openPage(blockSuiteWorkspace.id, page.id);
};
const importFileAndOpen = async () => {
}, [blockSuiteWorkspace.id, createPage, openPage, setPageMode]);
const importFileAndOpen = useCallback(async () => {
const { showImportModal } = await import('@blocksuite/blocks');
showImportModal({ workspace: blockSuiteWorkspace });
};
}, [blockSuiteWorkspace]);
return {
createPage: createPageAndOpen,
createEdgeless: createEdgelessAndOpen,
apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/index.tsx
+11 -12
View File
@@ -1,10 +1,10 @@
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { assertExists } from '@blocksuite/store';
import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
import { useAtomValue, useSetAtom } from 'jotai';
import { useAtom } from 'jotai';
import type { CSSProperties } from 'react';
import { workspacePreferredModeAtom } from '../../../../atoms';
import { pageSettingFamily } from '../../../../atoms';
import type { BlockSuiteWorkspace } from '../../../../shared';
import { toast } from '../../../../utils';
import { StyledEditorModeSwitch } from './style';
@@ -22,9 +22,8 @@ export const EditorModeSwitch = ({
blockSuiteWorkspace,
pageId,
}: EditorModeSwitchProps) => {
const currentMode =
useAtomValue(workspacePreferredModeAtom)[pageId] ?? 'page';
const setMode = useSetAtom(workspacePreferredModeAtom);
const [setting, setSetting] = useAtom(pageSettingFamily(pageId));
const currentMode = setting?.mode ?? 'page';
const pageMeta = useBlockSuitePageMeta(blockSuiteWorkspace).find(
meta => meta.id === pageId
);
@@ -43,11 +42,11 @@ export const EditorModeSwitch = ({
active={currentMode === 'page'}
hide={trash && currentMode !== 'page'}
onClick={() => {
setMode(mode => {
if (mode[pageMeta.id] !== 'page') {
setSetting(setting => {
if (setting?.mode !== 'page') {
toast(t['com.affine.pageMode']());
}
return { ...mode, [pageMeta.id]: 'page' };
return { ...setting, mode: 'page' };
});
}}
/>
@@ -56,11 +55,11 @@ export const EditorModeSwitch = ({
active={currentMode === 'edgeless'}
hide={trash && currentMode !== 'edgeless'}
onClick={() => {
setMode(mode => {
if (mode[pageMeta.id] !== 'edgeless') {
toast(t['com.affine.edgelessMode']());
setSetting(setting => {
if (setting?.mode !== 'edgeless') {
toast(t['com.affine.pageMode']());
}
return { ...mode, [pageMeta.id]: 'edgeless' };
return { ...setting, mode: 'edgeless' };
});
}}
/>
apps/web/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx
+5 -6
View File
@@ -18,7 +18,7 @@ import { useAtom } from 'jotai';
import { useRouter } from 'next/router';
import { useState } from 'react';
import { workspacePreferredModeAtom } from '../../../../atoms';
import { pageSettingFamily } from '../../../../atoms';
import { useBlockSuiteMetaHelper } from '../../../../hooks/affine/use-block-suite-meta-helper';
import { useCurrentPageId } from '../../../../hooks/current/use-current-page-id';
import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
@@ -64,8 +64,8 @@ const PageMenu = () => {
meta => meta.id === pageId
);
assertExists(pageMeta);
const [record, set] = useAtom(workspacePreferredModeAtom);
const mode = record[pageId] ?? 'page';
const [setting, setSetting] = useAtom(pageSettingFamily(pageId));
const mode = setting?.mode ?? 'page';
const favorite = pageMeta.favorite ?? false;
const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
@@ -98,9 +98,8 @@ const PageMenu = () => {
icon={mode === 'page' ? <EdgelessIcon /> : <PageIcon />}
data-testid="editor-option-menu-edgeless"
onClick={() => {
set(record => ({
...record,
[pageId]: mode === 'page' ? 'edgeless' : 'page',
setSetting(setting => ({
mode: setting?.mode === 'page' ? 'edgeless' : 'page',
}));
}}
>
apps/web/src/components/page-detail-editor.tsx
+5 -3
View File
@@ -30,7 +30,7 @@ import React, {
} from 'react';
import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
import { workspacePreferredModeAtom } from '../atoms';
import { pageSettingFamily } from '../atoms';
import { contentLayoutAtom } from '../atoms/layout';
import type { AffineOfficialWorkspace } from '../shared';
import { BlockSuiteEditor as Editor } from './blocksuite/block-suite-editor';
@@ -63,11 +63,13 @@ const EditorWrapper = memo(function EditorWrapper({
const meta = useBlockSuitePageMeta(blockSuiteWorkspace).find(
meta => meta.id === pageId
);
const pageSettingAtom = pageSettingFamily(pageId);
const pageSetting = useAtomValue(pageSettingAtom);
const currentMode =
useAtomValue(workspacePreferredModeAtom)[pageId] ??
DEFAULT_HELLO_WORLD_PAGE_ID === pageId
pageSetting?.mode ?? DEFAULT_HELLO_WORLD_PAGE_ID === pageId
? 'edgeless'
: 'page';
const setEditor = useSetAtom(rootCurrentEditorAtom);
assertExists(meta);
return (
apps/web/src/components/pure/quick-search-modal/results.tsx
+5 -3
View File
@@ -5,12 +5,13 @@ import { assertExists } from '@blocksuite/store';
import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
import { useBlockSuiteWorkspaceHelper } from '@toeverything/hooks/use-block-suite-workspace-helper';
import { Command } from 'cmdk';
import { useAtomValue } from 'jotai';
import Image from 'next/legacy/image';
import type { NextRouter } from 'next/router';
import type { Dispatch, FC, SetStateAction } from 'react';
import { useEffect } from 'react';
import { useRecentlyViewed } from '../../../hooks/use-recent-views';
import { recentPageSettingsAtom } from '../../../atoms';
import { useRouterHelper } from '../../../hooks/use-router-helper';
import type { BlockSuiteWorkspace } from '../../../shared';
import { useSwitchToConfig } from './config';
@@ -35,7 +36,7 @@ export const Results: FC<ResultsProps> = ({
assertExists(blockSuiteWorkspace.id);
const List = useSwitchToConfig(blockSuiteWorkspace.id);
const recentlyViewed = useRecentlyViewed();
const recentPageSetting = useAtomValue(recentPageSettingsAtom);
const t = useAFFiNEI18N();
const { jumpToPage } = useRouterHelper(router);
const results = blockSuiteWorkspace.search(query);
@@ -45,7 +46,8 @@ export const Results: FC<ResultsProps> = ({
const resultsPageMeta = pageList.filter(
page => pageIds.indexOf(page.id) > -1 && !page.trash
);
const recentlyViewedItem = recentlyViewed.filter(recent => {
const recentlyViewedItem = recentPageSetting.filter(recent => {
const page = pageList.find(page => recent.id === page.id);
if (!page) {
return false;
apps/web/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx
+3 -3
View File
@@ -8,7 +8,7 @@ import { useAtomValue } from 'jotai';
import { useRouter } from 'next/router';
import { useMemo, useState } from 'react';
import { workspacePreferredModeAtom } from '../../../../atoms';
import { pageSettingFamily } from '../../../../atoms';
import type { FavoriteListProps } from '../index';
import EmptyItem from './empty-item';
import * as styles from './styles.css';
@@ -27,9 +27,9 @@ function FavoriteMenuItem({
parentIds,
}: FavoriteMenuItemProps) {
const router = useRouter();
const record = useAtomValue(workspacePreferredModeAtom);
const setting = useAtomValue(pageSettingFamily(pageId));
const active = router.query.pageId === pageId;
const icon = record[pageId] === 'edgeless' ? <EdgelessIcon /> : <PageIcon />;
const icon = setting?.mode === 'edgeless' ? <EdgelessIcon /> : <PageIcon />;
const references = useBlockSuitePageReferences(workspace, pageId);
const referencesToShow = useMemo(() => {
return [
apps/web/src/components/pure/workspace-title/index.tsx
+5 -2
View File
@@ -5,7 +5,10 @@ import { useAtom } from 'jotai';
import type { ReactNode } from 'react';
import type React from 'react';
import { openQuickSearchModalAtom, pageModeSelectAtom } from '../../../atoms';
import {
allPageModeSelectAtom,
openQuickSearchModalAtom,
} from '../../../atoms';
import type { HeaderProps } from '../../blocksuite/workspace-header/header';
import { Header } from '../../blocksuite/workspace-header/header';
import * as styles from '../../blocksuite/workspace-header/styles.css';
@@ -40,7 +43,7 @@ export const WorkspaceTitle: React.FC<WorkspaceTitleProps> = ({
export const WorkspaceModeFilterTab = ({ ...props }: WorkspaceTitleProps) => {
const t = useAFFiNEI18N();
const [value, setMode] = useAtom(pageModeSelectAtom);
const [value, setMode] = useAtom(allPageModeSelectAtom);
const handleValueChange = (value: string) => {
if (value !== 'all' && value !== 'page' && value !== 'edgeless') {
throw new Error('Invalid value for page mode option');