feat(core): set doc mode and primary doc mode separately (#8359)

https://github.com/user-attachments/assets/98c282f2-4c53-475f-bf10-936a626c2630
This commit is contained in:
JimmFly
2024-10-17 13:48:45 +00:00
parent 7dae5c5dd5
commit bfb8d582ed
15 changed files with 192 additions and 90 deletions

View File

@@ -1,4 +1,4 @@
import { IconButton, toast } from '@affine/component';
import { IconButton, notify } from '@affine/component';
import {
MenuSeparator,
MobileMenu,
@@ -39,21 +39,29 @@ export const PageHeaderMenuButton = () => {
const isInTrash = useLiveData(
editorService.editor.doc.meta$.map(meta => meta.trash)
);
const currentMode = useLiveData(editorService.editor.mode$);
const primaryMode = useLiveData(editorService.editor.doc.primaryMode$);
const { favorite, toggleFavorite } = useFavorite(docId);
const handleSwitchMode = useCallback(() => {
editorService.editor.toggleMode();
const mode = primaryMode === 'page' ? 'edgeless' : 'page';
// TODO(@JimmFly): remove setMode when there has view mode switch
editorService.editor.setMode(mode);
editorService.editor.doc.setPrimaryMode(mode);
track.$.header.docOptions.switchPageMode({
mode: currentMode === 'page' ? 'edgeless' : 'page',
mode,
});
toast(
currentMode === 'page'
? t['com.affine.toastMessage.edgelessMode']()
: t['com.affine.toastMessage.pageMode']()
);
}, [currentMode, editorService, t]);
notify.success({
title:
primaryMode === 'page'
? t['com.affine.toastMessage.defaultMode.edgeless.title']()
: t['com.affine.toastMessage.defaultMode.page.title'](),
message:
primaryMode === 'page'
? t['com.affine.toastMessage.defaultMode.edgeless.message']()
: t['com.affine.toastMessage.defaultMode.page.message'](),
});
}, [primaryMode, editorService, t]);
const handleMenuOpenChange = useCallback((open: boolean) => {
if (open) {
@@ -75,14 +83,13 @@ export const PageHeaderMenuButton = () => {
const EditMenu = (
<>
<MobileMenuItem
prefixIcon={currentMode === 'page' ? <EdgelessIcon /> : <PageIcon />}
prefixIcon={primaryMode === 'page' ? <EdgelessIcon /> : <PageIcon />}
data-testid="editor-option-menu-mode-switch"
onSelect={handleSwitchMode}
>
{t['Convert to ']()}
{currentMode === 'page'
? t['com.affine.pageMode.edgeless']()
: t['com.affine.pageMode.page']()}
{primaryMode === 'page'
? t['com.affine.editorDefaultMode.edgeless']()
: t['com.affine.editorDefaultMode.page']()}
</MobileMenuItem>
<MobileMenuItem
data-testid="editor-option-menu-favorite"