Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-13 21:05:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: page mode shortcut (#2985)

Browse Source
This commit is contained in:
danielchim
2023-07-04 00:23:53 +08:00
committed by GitHub
parent 7b2acec7c3
commit 32692bd54a
2 changed files with 57 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/index.tsx
View File

@@ -1,8 +1,10 @@
import { Tooltip } from '@affine/component';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { assertExists } from '@blocksuite/store';
import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
import { useAtom } from 'jotai';
import type { CSSProperties } from 'react';
import { useEffect } from 'react';
import { pageSettingFamily } from '../../../../atoms';
import type { BlockSuiteWorkspace } from '../../../../shared';
@@ -30,39 +32,59 @@ export const EditorModeSwitch = ({
const t = useAFFiNEI18N();
assertExists(pageMeta);
const { trash } = pageMeta;
return (
<StyledEditorModeSwitch
style={style}
switchLeft={currentMode === 'page'}
showAlone={trash}
>
<PageSwitchItem
data-testid="switch-page-mode-button"
active={currentMode === 'page'}
hide={trash && currentMode !== 'page'}
onClick={() => {
setSetting(setting => {
if (setting?.mode !== 'page') {
toast(t['com.affine.pageMode']());
}
useEffect(() => {
const keydown = (e: KeyboardEvent) => {
if ((e.key === 's' && e.metaKey) || (e.key === 's' && e.altKey)) {
e.preventDefault();
setSetting(setting => {
if (setting?.mode !== 'page') {
toast(t['com.affine.pageMode']());
return { ...setting, mode: 'page' };
});
}}
/>
<EdgelessSwitchItem
data-testid="switch-edgeless-mode-button"
active={currentMode === 'edgeless'}
hide={trash && currentMode !== 'edgeless'}
onClick={() => {
setSetting(setting => {
if (setting?.mode !== 'edgeless') {
toast(t['com.affine.pageMode']());
}
} else {
toast(t['com.affine.edgelessMode']());
return { ...setting, mode: 'edgeless' };
});
}}
/>
</StyledEditorModeSwitch>
}
});
}
};
document.addEventListener('keydown', keydown, { capture: true });
return () =>
document.removeEventListener('keydown', keydown, { capture: true });
}, [setSetting, t]);
return (
<Tooltip content={'Switch ⌘ + S'}>
<StyledEditorModeSwitch
style={style}
switchLeft={currentMode === 'page'}
showAlone={trash}
>
<PageSwitchItem
data-testid="switch-page-mode-button"
active={currentMode === 'page'}
hide={trash && currentMode !== 'page'}
onClick={() => {
setSetting(setting => {
if (setting?.mode !== 'page') {
toast(t['com.affine.pageMode']());
}
return { ...setting, mode: 'page' };
});
}}
/>
<EdgelessSwitchItem
data-testid="switch-edgeless-mode-button"
active={currentMode === 'edgeless'}
hide={trash && currentMode !== 'edgeless'}
onClick={() => {
setSetting(setting => {
if (setting?.mode !== 'edgeless') {
toast(t['com.affine.edgelessMode']());
}
return { ...setting, mode: 'edgeless' };
});
}}
/>
</StyledEditorModeSwitch>
</Tooltip>
);
};