feat(core): add history shortcut (#4595)

apps/core/src/components/root-app-sidebar/index.tsx

@@ -27,7 +27,9 @@ import { forwardRef, useCallback, useEffect, useMemo } from 'react';
 import { openWorkspaceListModalAtom } from '../../atoms';
 import { useHistoryAtom } from '../../atoms/history';
 import { useAppSetting } from '../../atoms/settings';
+import { useGeneralShortcuts } from '../../hooks/affine/use-shortcuts';
 import { useTrashModalHelper } from '../../hooks/affine/use-trash-modal-helper';
+import { useRegisterBlocksuiteEditorCommands } from '../../hooks/use-shortcut-commands';
 import type { AllWorkspace } from '../../shared';
 import { currentCollectionsAtom } from '../../utils/user-setting';
 import { CollectionsList } from '../pure/workspace-slider-bar/collections';
@@ -105,6 +107,8 @@ export const RootAppSidebar = ({
   const [openUserWorkspaceList, setOpenUserWorkspaceList] = useAtom(
     openWorkspaceListModalAtom
   );
+  const generalShortcutsInfo = useGeneralShortcuts();
+
   const onClickNewPage = useCallback(async () => {
     const page = createPage();
     await page.waitForLoaded();
@@ -161,7 +165,7 @@ export const RootAppSidebar = ({
   const closeUserWorkspaceList = useCallback(() => {
     setOpenUserWorkspaceList(false);
   }, [setOpenUserWorkspaceList]);
-
+  useRegisterBlocksuiteEditorCommands(router.back, router.forward);
   return (
     <>
       <AppSidebar
@@ -173,6 +177,7 @@ export const RootAppSidebar = ({
             environment.isMacOs
           )
         }
+        generalShortcutsInfo={generalShortcutsInfo}
       >
         <MoveToTrash.ConfirmModal
           open={trashConfirmOpen}

apps/core/src/hooks/affine/use-shortcuts.ts

@@ -81,9 +81,8 @@ export const useWinGeneralKeyboardShortcuts = (): ShortcutMap => {
       // not implement yet
       // [t('appendDailyNote')]: 'Ctrl + Alt + A',
       [t('expandOrCollapseSidebar')]: ['Ctrl', '/'],
-      // not implement yet
-      // [t('goBack')]: 'Ctrl + [',
-      // [t('goForward')]: 'Ctrl + ]',
+      [t('goBack')]: ['Ctrl + ['],
+      [t('goForward')]: ['Ctrl + ]'],
     }),
     [t]
   );
@@ -98,9 +97,8 @@ export const useMacGeneralKeyboardShortcuts = (): ShortcutMap => {
       // not implement yet
       // [t('appendDailyNote')]: '⌘ + ⌥ + A',
       [t('expandOrCollapseSidebar')]: ['⌘', '/'],
-      // not implement yet
-      // [t('goBack')]: '⌘ + [',
-      // [t('goForward')]: '⌘ + ]',
+      [t('goBack')]: ['⌘ + ['],
+      [t('goForward')]: ['⌘ + ]'],
     }),
     [t]
   );

apps/core/src/hooks/use-shortcut-commands.ts

@@ -0,0 +1,49 @@
+import {
+  PreconditionStrategy,
+  registerAffineCommand,
+} from '@toeverything/infra/command';
+import { useEffect } from 'react';
+
+export function useRegisterBlocksuiteEditorCommands(
+  back: () => unknown,
+  forward: () => unknown
+) {
+  useEffect(() => {
+    const unsubs: Array<() => void> = [];
+
+    unsubs.push(
+      registerAffineCommand({
+        id: 'affine:shortcut-history-go-back',
+        category: 'affine:general',
+        preconditionStrategy: PreconditionStrategy.Never,
+        icon: 'none',
+        label: 'go back',
+        keyBinding: {
+          binding: '$mod+[',
+        },
+        run() {
+          back();
+        },
+      })
+    );
+    unsubs.push(
+      registerAffineCommand({
+        id: 'affine:shortcut-history-go-forward',
+        category: 'affine:general',
+        preconditionStrategy: PreconditionStrategy.Never,
+        icon: 'none',
+        label: 'go forward',
+        keyBinding: {
+          binding: '$mod+]',
+        },
+        run() {
+          forward();
+        },
+      })
+    );
+
+    return () => {
+      unsubs.forEach(unsub => unsub());
+    };
+  }, [back, forward]);
+}

packages/component/src/components/app-sidebar/index.tsx

@@ -110,7 +110,10 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
         data-enable-animation={enableAnimation && !isResizing}
       >
         <nav className={navStyle} ref={navRef} data-testid="app-sidebar">
-          <SidebarHeader router={props.router} />
+          <SidebarHeader
+            router={props.router}
+            generalShortcutsInfo={props.generalShortcutsInfo}
+          />
           <div className={navBodyStyle} data-testid="sliderBar-inner">
             {props.children}
           </div>

packages/component/src/components/app-sidebar/sidebar-header/index.tsx

@@ -1,6 +1,9 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ArrowLeftSmallIcon, ArrowRightSmallIcon } from '@blocksuite/icons';
 import { IconButton } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
 import { useAtomValue } from 'jotai';
+import { useMemo } from 'react';
 
 import type { History } from '..';
 import {
@@ -17,10 +20,32 @@ export type SidebarHeaderProps = {
     forward: () => unknown;
     history: History;
   };
+  generalShortcutsInfo?: {
+    shortcuts: {
+      [title: string]: string[];
+    };
+  };
 };
 
 export const SidebarHeader = (props: SidebarHeaderProps) => {
   const open = useAtomValue(appSidebarOpenAtom);
+  const t = useAFFiNEI18N();
+
+  const shortcuts = props.generalShortcutsInfo?.shortcuts;
+  const shortcutsObject = useMemo(() => {
+    const goBack = t['com.affine.keyboardShortcuts.goBack']();
+    const goBackShortcut = shortcuts?.[goBack];
+
+    const goForward = t['com.affine.keyboardShortcuts.goForward']();
+    const goForwardShortcut = shortcuts?.[goForward];
+    return {
+      goBack,
+      goBackShortcut,
+      goForward,
+      goForwardShortcut,
+    };
+  }, [shortcuts, t]);
+
   return (
     <div
       className={navHeaderStyle}
@@ -29,33 +54,43 @@ export const SidebarHeader = (props: SidebarHeaderProps) => {
     >
       <SidebarSwitch show={open} />
       <div className={navHeaderNavigationButtons}>
-        <IconButton
-          className={navHeaderButton}
-          data-testid="app-sidebar-arrow-button-back"
-          disabled={props.router?.history.current === 0}
-          onClick={() => {
-            props.router?.back();
-          }}
+        <Tooltip
+          content={`${shortcutsObject.goBack} ${shortcutsObject.goBackShortcut}`}
+          side="bottom"
         >
-          <ArrowLeftSmallIcon />
-        </IconButton>
-        <IconButton
-          className={navHeaderButton}
-          data-testid="app-sidebar-arrow-button-forward"
-          disabled={
-            props.router
-              ? (props.router.history.stack.length > 0 &&
-                  props.router.history.current ===
-                    props.router.history.stack.length - 1) ||
-                props.router.history.stack.length === 0
-              : true
-          }
-          onClick={() => {
-            props.router?.forward();
-          }}
+          <IconButton
+            className={navHeaderButton}
+            data-testid="app-sidebar-arrow-button-back"
+            disabled={props.router?.history.current === 0}
+            onClick={() => {
+              props.router?.back();
+            }}
+          >
+            <ArrowLeftSmallIcon />
+          </IconButton>
+        </Tooltip>
+        <Tooltip
+          content={`${shortcutsObject.goForward} ${shortcutsObject.goForwardShortcut}`}
+          side="bottom"
         >
-          <ArrowRightSmallIcon />
-        </IconButton>
+          <IconButton
+            className={navHeaderButton}
+            data-testid="app-sidebar-arrow-button-forward"
+            disabled={
+              props.router
+                ? (props.router.history.stack.length > 0 &&
+                    props.router.history.current ===
+                      props.router.history.stack.length - 1) ||
+                  props.router.history.stack.length === 0
+                : true
+            }
+            onClick={() => {
+              props.router?.forward();
+            }}
+          >
+            <ArrowRightSmallIcon />
+          </IconButton>
+        </Tooltip>
       </div>
     </div>
   );