feat(core): add new doc default mode setting (#7990)

https://github.com/user-attachments/assets/523b14f3-ee42-4061-8ca2-221e071d5cc9

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/general.tsx

@@ -34,7 +34,6 @@ import {
   useCallback,
   useEffect,
   useMemo,
-  useState,
 } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
@@ -275,7 +274,8 @@ const CustomFontFamilySettings = () => {
 };
 const NewDocDefaultModeSettings = () => {
   const t = useI18n();
-  const [value, setValue] = useState<DocMode>('page');
+  const { editorSettingService } = useServices({ EditorSettingService });
+  const settings = useLiveData(editorSettingService.editorSetting.settings$);
   const radioItems = useMemo<RadioItem[]>(
     () => [
       {
@@ -291,13 +291,19 @@ const NewDocDefaultModeSettings = () => {
     ],
     [t]
   );
+  const updateNewDocDefaultMode = useCallback(
+    (value: DocMode) => {
+      editorSettingService.editorSetting.set('newDocDefaultMode', value);
+    },
+    [editorSettingService.editorSetting]
+  );
   return (
     <RadioGroup
       items={radioItems}
-      value={value}
+      value={settings.newDocDefaultMode}
       width={250}
       className={styles.settingWrapper}
-      onChange={setValue}
+      onChange={updateNewDocDefaultMode}
     />
   );
 };

packages/frontend/core/src/components/blocksuite/block-suite-page-list/utils.tsx

@@ -1,29 +1,42 @@
 import { toast } from '@affine/component';
 import { useDocCollectionHelper } from '@affine/core/hooks/use-block-suite-workspace-helper';
+import { EditorSettingService } from '@affine/core/modules/editor-settting';
 import { WorkbenchService } from '@affine/core/modules/workbench';
-import { DocsService, initEmptyPage, useService } from '@toeverything/infra';
+import {
+  type DocMode,
+  DocsService,
+  initEmptyPage,
+  useLiveData,
+  useServices,
+} from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';
 
 import type { DocCollection } from '../../../shared';
 
 export const usePageHelper = (docCollection: DocCollection) => {
-  const workbench = useService(WorkbenchService).workbench;
+  const { docsService, workbenchService, editorSettingService } = useServices({
+    DocsService,
+    WorkbenchService,
+    EditorSettingService,
+  });
+  const workbench = workbenchService.workbench;
   const { createDoc } = useDocCollectionHelper(docCollection);
-  const docsService = useService(DocsService);
   const docRecordList = docsService.list;
+  const settings = useLiveData(editorSettingService.editorSetting.settings$);
 
   const createPageAndOpen = useCallback(
-    (mode?: 'page' | 'edgeless', open?: boolean | 'new-tab') => {
+    (mode?: DocMode, open?: boolean | 'new-tab') => {
       const page = createDoc();
       initEmptyPage(page);
-      docRecordList.doc$(page.id).value?.setPrimaryMode(mode || 'page');
+      const primaryMode = mode || settings.newDocDefaultMode;
+      docRecordList.doc$(page.id).value?.setPrimaryMode(primaryMode);
       if (open !== false)
         workbench.openDoc(page.id, {
           at: open === 'new-tab' ? 'new-tab' : 'active',
         });
       return page;
     },
-    [createDoc, docRecordList, workbench]
+    [createDoc, docRecordList, settings.newDocDefaultMode, workbench]
   );
 
   const createEdgelessAndOpen = useCallback(
@@ -77,8 +90,8 @@ export const usePageHelper = (docCollection: DocCollection) => {
 
   return useMemo(() => {
     return {
-      createPage: (open?: boolean | 'new-tab') =>
-        createPageAndOpen('page', open),
+      createPage: (mode?: DocMode, open?: boolean | 'new-tab') =>
+        createPageAndOpen(mode, open),
       createEdgeless: createEdgelessAndOpen,
       importFile: importFileAndOpen,
     };

packages/frontend/core/src/components/page-list/components/new-page-button.tsx

@@ -9,6 +9,7 @@ import { useCallback, useState } from 'react';
 import { menuContent } from './new-page-button.css';
 
 type NewPageButtonProps = {
+  createNewDoc: (e?: MouseEvent) => void;
   createNewPage: (e?: MouseEvent) => void;
   createNewEdgeless: (e?: MouseEvent) => void;
   importFile?: () => void;
@@ -61,6 +62,7 @@ export const CreateNewPagePopup = ({
 };
 
 export const NewPageButton = ({
+  createNewDoc,
   createNewPage,
   createNewEdgeless,
   importFile,
@@ -69,11 +71,20 @@ export const NewPageButton = ({
 }: PropsWithChildren<NewPageButtonProps>) => {
   const [open, setOpen] = useState(false);
 
+  const handleCreateNewDoc: NewPageButtonProps['createNewDoc'] = useCallback(
+    e => {
+      createNewDoc(e);
+      setOpen(false);
+      track.allDocs.header.actions.createDoc();
+    },
+    [createNewDoc]
+  );
+
   const handleCreateNewPage: NewPageButtonProps['createNewPage'] = useCallback(
     e => {
       createNewPage(e);
       setOpen(false);
-      track.allDocs.header.actions.createDoc();
+      track.allDocs.header.actions.createDoc({ mode: 'page' });
     },
     [createNewPage]
   );
@@ -99,6 +110,7 @@ export const NewPageButton = ({
     <Menu
       items={
         <CreateNewPagePopup
+          createNewDoc={handleCreateNewDoc}
           createNewPage={handleCreateNewPage}
           createNewEdgeless={handleCreateNewEdgeless}
           importFile={importFile ? handleImportFile : undefined}
@@ -118,7 +130,7 @@ export const NewPageButton = ({
     >
       <DropdownButton
         size={size}
-        onClick={handleCreateNewPage}
+        onClick={handleCreateNewDoc}
         onAuxClick={handleCreateNewPage}
         onClickDropDown={useCallback(() => setOpen(open => !open), [])}
       >

packages/frontend/core/src/components/page-list/docs/page-list-header.tsx

@@ -19,7 +19,12 @@ import {
   ViewLayersIcon,
 } from '@blocksuite/icons/rc';
 import type { Doc as BlockSuiteDoc } from '@blocksuite/store';
-import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
+import {
+  useLiveData,
+  useService,
+  useServices,
+  WorkspaceService,
+} from '@toeverything/infra';
 import clsx from 'clsx';
 import { nanoid } from 'nanoid';
 import { useCallback, useMemo, useState } from 'react';
@@ -38,7 +43,11 @@ import { PageListNewPageButton } from './page-list-new-page-button';
 
 export const PageListHeader = () => {
   const t = useI18n();
-  const workspace = useService(WorkspaceService).workspace;
+  const { workspaceService } = useServices({
+    WorkspaceService,
+  });
+
+  const workspace = workspaceService.workspace;
   const { importFile, createEdgeless, createPage } = usePageHelper(
     workspace.docCollection
   );
@@ -69,7 +78,12 @@ export const PageListHeader = () => {
         onCreateEdgeless={e =>
           createEdgeless(isNewTabTrigger(e) ? 'new-tab' : true)
         }
-        onCreatePage={e => createPage(isNewTabTrigger(e) ? 'new-tab' : true)}
+        onCreatePage={e =>
+          createPage('page', isNewTabTrigger(e) ? 'new-tab' : true)
+        }
+        onCreateDoc={e =>
+          createPage(undefined, isNewTabTrigger(e) ? 'new-tab' : true)
+        }
         onImportFile={onImportFile}
       >
         <div className={styles.buttonText}>{t['New Page']()}</div>
@@ -86,12 +100,15 @@ export const CollectionPageListHeader = ({
 }) => {
   const t = useI18n();
   const { jumpToCollections } = useNavigateHelper();
+  const { collectionService, workspaceService } = useServices({
+    CollectionService,
+    WorkspaceService,
+  });
 
   const handleJumpToCollections = useCallback(() => {
     jumpToCollections(workspaceId);
   }, [jumpToCollections, workspaceId]);
 
-  const collectionService = useService(CollectionService);
   const { node, open } = useEditCollection();
 
   const handleEdit = useAsyncCallback(async () => {
@@ -99,7 +116,7 @@ export const CollectionPageListHeader = ({
     collectionService.updateCollection(collection.id, () => ret);
   }, [collection, collectionService, open]);
 
-  const workspace = useService(WorkspaceService).workspace;
+  const workspace = workspaceService.workspace;
   const { createEdgeless, createPage } = usePageHelper(workspace.docCollection);
   const { openConfirmModal } = useConfirmModal();
 
@@ -127,14 +144,18 @@ export const CollectionPageListHeader = ({
     [openConfirmModal, t, createAndAddDocument]
   );
 
+  const createPageModeDoc = useCallback(() => createPage('page'), [createPage]);
+
   const onCreateEdgeless = useCallback(
     () => onConfirmAddDocument(createEdgeless),
     [createEdgeless, onConfirmAddDocument]
   );
-  const onCreatePage = useCallback(
-    () => onConfirmAddDocument(createPage),
-    [createPage, onConfirmAddDocument]
-  );
+  const onCreatePage = useCallback(() => {
+    onConfirmAddDocument(createPageModeDoc);
+  }, [createPageModeDoc, onConfirmAddDocument]);
+  const onCreateDoc = useCallback(() => {
+    onConfirmAddDocument(createPage);
+  }, [createPage, onConfirmAddDocument]);
 
   return (
     <>
@@ -154,6 +175,7 @@ export const CollectionPageListHeader = ({
           <PageListNewPageButton
             size="small"
             testId="new-page-button-trigger"
+            onCreateDoc={onCreateDoc}
             onCreateEdgeless={onCreateEdgeless}
             onCreatePage={onCreatePage}
           >

packages/frontend/core/src/components/page-list/docs/page-list-new-page-button.tsx

@@ -8,6 +8,7 @@ export const PageListNewPageButton = ({
   children,
   size,
   testId,
+  onCreateDoc,
   onCreatePage,
   onCreateEdgeless,
   onImportFile,
@@ -15,6 +16,7 @@ export const PageListNewPageButton = ({
   className?: string;
   size?: 'small' | 'default';
   testId?: string;
+  onCreateDoc: (e?: MouseEvent) => void;
   onCreatePage: (e?: MouseEvent) => void;
   onCreateEdgeless: (e?: MouseEvent) => void;
   onImportFile?: (e?: MouseEvent) => void;
@@ -24,6 +26,7 @@ export const PageListNewPageButton = ({
       <NewPageButton
         size={size}
         importFile={onImportFile}
+        createNewDoc={onCreateDoc}
         createNewEdgeless={onCreateEdgeless}
         createNewPage={onCreatePage}
       >

packages/frontend/core/src/components/page-list/operation-cell.tsx

@@ -32,7 +32,6 @@ import type { DocMeta } from '@blocksuite/store';
 import {
   FeatureFlagService,
   useLiveData,
-  useService,
   useServices,
   WorkspaceService,
 } from '@toeverything/infra';
@@ -305,9 +304,12 @@ export const CollectionOperationCell = ({
   info,
 }: CollectionOperationCellProps) => {
   const t = useI18n();
-
-  const favAdapter = useService(CompatibleFavoriteItemsAdapter);
-  const docCollection = useService(WorkspaceService).workspace.docCollection;
+  const { compatibleFavoriteItemsAdapter: favAdapter, workspaceService } =
+    useServices({
+      CompatibleFavoriteItemsAdapter,
+      WorkspaceService,
+    });
+  const docCollection = workspaceService.workspace.docCollection;
   const { createPage } = usePageHelper(docCollection);
   const { openConfirmModal } = useConfirmModal();
   const favourite = useLiveData(

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -1,6 +1,7 @@
 import { openSettingModalAtom } from '@affine/core/atoms';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { track } from '@affine/core/mixpanel';
+import { EditorSettingService } from '@affine/core/modules/editor-settting';
 import {
   ExplorerCollections,
   ExplorerFavorites,
@@ -20,7 +21,11 @@ import {
 } from '@blocksuite/icons/rc';
 import type { Doc } from '@blocksuite/store';
 import type { Workspace } from '@toeverything/infra';
-import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
+import {
+  useLiveData,
+  useServices,
+  WorkspaceService,
+} from '@toeverything/infra';
 import { useSetAtom } from 'jotai';
 import type { MouseEvent, ReactElement } from 'react';
 import { useCallback, useEffect } from 'react';
@@ -73,30 +78,45 @@ export type RootAppSidebarProps = {
  *
  */
 export const RootAppSidebar = (): ReactElement => {
-  const currentWorkspace = useService(WorkspaceService).workspace;
+  const {
+    workbenchService,
+    workspaceService,
+    cMDKQuickSearchService,
+    editorSettingService,
+  } = useServices({
+    WorkspaceService,
+    WorkbenchService,
+    CMDKQuickSearchService,
+    EditorSettingService,
+  });
+  const currentWorkspace = workspaceService.workspace;
   const { appSettings } = useAppSettingHelper();
   const docCollection = currentWorkspace.docCollection;
   const t = useI18n();
-  const workbench = useService(WorkbenchService).workbench;
+  const workbench = workbenchService.workbench;
   const currentPath = useLiveData(
     workbench.location$.map(location => location.pathname)
   );
-  const cmdkQuickSearchService = useService(CMDKQuickSearchService);
   const onOpenQuickSearchModal = useCallback(() => {
-    cmdkQuickSearchService.toggle();
-  }, [cmdkQuickSearchService]);
+    cMDKQuickSearchService.toggle();
+  }, [cMDKQuickSearchService]);
 
   const allPageActive = currentPath === '/all';
 
   const pageHelper = usePageHelper(currentWorkspace.docCollection);
 
+  const settings = useLiveData(editorSettingService.editorSetting.settings$);
+
   const onClickNewPage = useAsyncCallback(
     async (e?: MouseEvent) => {
-      const page = pageHelper.createPage(isNewTabTrigger(e) ? 'new-tab' : true);
+      const page = pageHelper.createPage(
+        settings.newDocDefaultMode,
+        isNewTabTrigger(e) ? 'new-tab' : true
+      );
       page.load();
-      track.$.navigationPanel.$.createDoc();
+      track.$.navigationPanel.$.createDoc({ mode: settings.newDocDefaultMode });
     },
-    [pageHelper]
+    [pageHelper, settings.newDocDefaultMode]
   );
   useEffect(() => {
     if (environment.isDesktop) {