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

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

packages/frontend/core/src/commands/affine-creation.tsx

@@ -32,7 +32,7 @@ export function registerAffineCreationCommands({
       run() {
         track.$.cmdk.creation.createDoc({ mode: 'page' });
 
-        pageHelper.createPage();
+        pageHelper.createPage('page');
       },
     })
   );

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') =>
+      createPage: (mode?: DocMode, open?: boolean | 'new-tab') =>
-        createPageAndOpen('page', open),
+        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(
+  const onCreatePage = useCallback(() => {
-    () => onConfirmAddDocument(createPage),
+    onConfirmAddDocument(createPageModeDoc);
-    [createPage, onConfirmAddDocument]
+  }, [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 { compatibleFavoriteItemsAdapter: favAdapter, workspaceService } =
-  const favAdapter = useService(CompatibleFavoriteItemsAdapter);
+    useServices({
-  const docCollection = useService(WorkspaceService).workspace.docCollection;
+      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.toggle();
-  }, [cmdkQuickSearchService]);
+  }, [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) {

packages/frontend/core/src/modules/explorer/views/nodes/collection/operations.tsx

@@ -4,6 +4,7 @@ import {
   MenuSeparator,
   useConfirmModal,
 } from '@affine/component';
+import { usePageHelper } from '@affine/core/components/blocksuite/block-suite-page-list/utils';
 import { IsFavoriteIcon } from '@affine/core/components/pure/icons';
 import { useDeleteCollectionInfo } from '@affine/core/hooks/affine/use-delete-collection-info';
 import { track } from '@affine/core/mixpanel';
@@ -19,10 +20,10 @@ import {
   SplitViewIcon,
 } from '@blocksuite/icons/rc';
 import {
-  DocsService,
   FeatureFlagService,
   useLiveData,
   useServices,
+  WorkspaceService,
 } from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';
 
@@ -36,19 +37,23 @@ export const useExplorerCollectionNodeOperations = (
   const t = useI18n();
   const {
     workbenchService,
-    docsService,
+    workspaceService,
     collectionService,
     compatibleFavoriteItemsAdapter,
     featureFlagService,
   } = useServices({
-    DocsService,
     WorkbenchService,
+    WorkspaceService,
     CollectionService,
     CompatibleFavoriteItemsAdapter,
     FeatureFlagService,
   });
   const deleteInfo = useDeleteCollectionInfo();
 
+  const { createPage } = usePageHelper(
+    workspaceService.workspace.docCollection
+  );
+
   const enableMultiView = useLiveData(
     featureFlagService.flags.enable_multi_view.$
   );
@@ -62,7 +67,7 @@ export const useExplorerCollectionNodeOperations = (
   const { openConfirmModal } = useConfirmModal();
 
   const createAndAddDocument = useCallback(() => {
-    const newDoc = docsService.createDoc();
+    const newDoc = createPage();
     collectionService.addPageToCollection(collectionId, newDoc.id);
     track.$.navigationPanel.collections.createDoc();
     track.$.navigationPanel.collections.addDocToCollection({
@@ -73,7 +78,7 @@ export const useExplorerCollectionNodeOperations = (
   }, [
     collectionId,
     collectionService,
-    docsService,
+    createPage,
     onOpenCollapsed,
     workbenchService.workbench,
   ]);

packages/frontend/core/src/modules/explorer/views/nodes/doc/operations.tsx

@@ -5,6 +5,7 @@ import {
   toast,
   useConfirmModal,
 } from '@affine/component';
+import { usePageHelper } from '@affine/core/components/blocksuite/block-suite-page-list/utils';
 import { IsFavoriteIcon } from '@affine/core/components/pure/icons';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { track } from '@affine/core/mixpanel';
@@ -24,6 +25,7 @@ import {
   FeatureFlagService,
   useLiveData,
   useServices,
+  WorkspaceService,
 } from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';
 
@@ -39,12 +41,14 @@ export const useExplorerDocNodeOperations = (
   const t = useI18n();
   const {
     workbenchService,
+    workspaceService,
     docsService,
     compatibleFavoriteItemsAdapter,
     featureFlagService,
   } = useServices({
     DocsService,
     WorkbenchService,
+    WorkspaceService,
     CompatibleFavoriteItemsAdapter,
     FeatureFlagService,
   });
@@ -55,6 +59,10 @@ export const useExplorerDocNodeOperations = (
 
   const docRecord = useLiveData(docsService.list.doc$(docId));
 
+  const { createPage } = usePageHelper(
+    workspaceService.workspace.docCollection
+  );
+
   const favorite = useLiveData(
     useMemo(() => {
       return compatibleFavoriteItemsAdapter.isFavorite$(docId, 'doc');
@@ -109,14 +117,14 @@ export const useExplorerDocNodeOperations = (
   }, [docId, workbenchService.workbench]);
 
   const handleAddLinkedPage = useAsyncCallback(async () => {
-    const newDoc = docsService.createDoc();
+    const newDoc = createPage();
     // TODO: handle timeout & error
     await docsService.addLinkedDoc(docId, newDoc.id);
     track.$.navigationPanel.docs.createDoc({ control: 'linkDoc' });
     track.$.navigationPanel.docs.linkDoc({ control: 'createDoc' });
     workbenchService.workbench.openDoc(newDoc.id);
     options.openNodeCollapsed();
-  }, [docsService, docId, workbenchService.workbench, options]);
+  }, [createPage, docsService, docId, workbenchService.workbench, options]);
 
   const handleToggleFavoriteDoc = useCallback(() => {
     compatibleFavoriteItemsAdapter.toggle(docId, 'doc');

packages/frontend/core/src/modules/explorer/views/nodes/folder/index.tsx

@@ -9,6 +9,7 @@ import {
   MenuSub,
   notify,
 } from '@affine/component';
+import { usePageHelper } from '@affine/core/components/blocksuite/block-suite-page-list/utils';
 import {
   useSelectCollection,
   useSelectDoc,
@@ -34,10 +35,10 @@ import {
   TagsIcon,
 } from '@blocksuite/icons/rc';
 import {
-  DocsService,
   FeatureFlagService,
   useLiveData,
   useServices,
+  WorkspaceService,
 } from '@toeverything/infra';
 import { difference } from 'lodash-es';
 import { useCallback, useMemo, useState } from 'react';
@@ -186,12 +187,13 @@ export const ExplorerFolderNodeFolder = ({
   node: FolderNode;
 } & GenericExplorerNode) => {
   const t = useI18n();
-  const { docsService, workbenchService, featureFlagService } = useServices({
+  const { workbenchService, workspaceService, featureFlagService } =
-    DocsService,
+    useServices({
-    WorkbenchService,
+      WorkbenchService,
-    CompatibleFavoriteItemsAdapter,
+      WorkspaceService,
-    FeatureFlagService,
+      CompatibleFavoriteItemsAdapter,
-  });
+      FeatureFlagService,
+    });
   const openDocsSelector = useSelectDoc();
   const openTagsSelector = useSelectTag();
   const openCollectionsSelector = useSelectCollection();
@@ -202,6 +204,9 @@ export const ExplorerFolderNodeFolder = ({
   const [collapsed, setCollapsed] = useState(true);
   const [newFolderId, setNewFolderId] = useState<string | null>(null);
 
+  const { createPage } = usePageHelper(
+    workspaceService.workspace.docCollection
+  );
   const handleDelete = useCallback(() => {
     node.delete();
     track.$.navigationPanel.organize.deleteOrganizeItem({
@@ -545,7 +550,7 @@ export const ExplorerFolderNodeFolder = ({
   );
 
   const handleNewDoc = useCallback(() => {
-    const newDoc = docsService.createDoc();
+    const newDoc = createPage();
     node.createLink('doc', newDoc.id, node.indexAt('before'));
     workbenchService.workbench.openDoc(newDoc.id);
     track.$.navigationPanel.folders.createDoc();
@@ -554,7 +559,7 @@ export const ExplorerFolderNodeFolder = ({
       target: 'doc',
     });
     setCollapsed(false);
-  }, [docsService, node, workbenchService.workbench]);
+  }, [createPage, node, workbenchService.workbench]);
 
   const handleCreateSubfolder = useCallback(() => {
     const newFolderId = node.createFolder(

packages/frontend/core/src/modules/explorer/views/nodes/tag/operations.tsx

@@ -1,4 +1,5 @@
 import { IconButton, MenuItem, MenuSeparator, toast } from '@affine/component';
+import { usePageHelper } from '@affine/core/components/blocksuite/block-suite-page-list/utils';
 import { IsFavoriteIcon } from '@affine/core/components/pure/icons';
 import { track } from '@affine/core/mixpanel';
 import { FavoriteService } from '@affine/core/modules/favorite';
@@ -16,6 +17,7 @@ import {
   FeatureFlagService,
   useLiveData,
   useServices,
+  WorkspaceService,
 } from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';
 
@@ -31,13 +33,14 @@ export const useExplorerTagNodeOperations = (
 ): NodeOperation[] => {
   const t = useI18n();
   const {
-    docsService,
     workbenchService,
+    workspaceService,
     tagService,
     favoriteService,
     featureFlagService,
   } = useServices({
     WorkbenchService,
+    WorkspaceService,
     TagService,
     DocsService,
     FavoriteService,
@@ -52,15 +55,19 @@ export const useExplorerTagNodeOperations = (
     featureFlagService.flags.enable_multi_view.$
   );
 
+  const { createPage } = usePageHelper(
+    workspaceService.workspace.docCollection
+  );
+
   const handleNewDoc = useCallback(() => {
     if (tagRecord) {
-      const newDoc = docsService.createDoc();
+      const newDoc = createPage();
       tagRecord?.tag(newDoc.id);
       track.$.navigationPanel.tags.createDoc();
       workbenchService.workbench.openDoc(newDoc.id);
       openNodeCollapsed();
     }
-  }, [docsService, openNodeCollapsed, tagRecord, workbenchService.workbench]);
+  }, [createPage, openNodeCollapsed, tagRecord, workbenchService.workbench]);
 
   const handleMoveToTrash = useCallback(() => {
     tagService.tagList.deleteTag(tagId);

packages/frontend/core/src/modules/explorer/views/sections/favorites/index.tsx

@@ -3,6 +3,7 @@ import {
   IconButton,
   useDropTarget,
 } from '@affine/component';
+import { usePageHelper } from '@affine/core/components/blocksuite/block-suite-page-list/utils';
 import { track } from '@affine/core/mixpanel';
 import {
   DropEffect,
@@ -18,7 +19,11 @@ import type { AffineDNDData } from '@affine/core/types/dnd';
 import { isNewTabTrigger } from '@affine/core/utils';
 import { useI18n } from '@affine/i18n';
 import { PlusIcon } from '@blocksuite/icons/rc';
-import { DocsService, useLiveData, useServices } from '@toeverything/infra';
+import {
+  useLiveData,
+  useServices,
+  WorkspaceService,
+} from '@toeverything/infra';
 import { type MouseEventHandler, useCallback } from 'react';
 
 import { ExplorerService } from '../../../services/explorer';
@@ -36,13 +41,17 @@ import {
 import { RootEmpty } from './empty';
 
 export const ExplorerFavorites = () => {
-  const { favoriteService, docsService, workbenchService, explorerService } =
+  const {
-    useServices({
+    favoriteService,
-      FavoriteService,
+    workspaceService,
-      DocsService,
+    workbenchService,
-      WorkbenchService,
+    explorerService,
-      ExplorerService,
+  } = useServices({
-    });
+    FavoriteService,
+    WorkbenchService,
+    WorkspaceService,
+    ExplorerService,
+  });
 
   const explorerSection = explorerService.sections.favorites;
 
@@ -52,6 +61,10 @@ export const ExplorerFavorites = () => {
 
   const t = useI18n();
 
+  const { createPage } = usePageHelper(
+    workspaceService.workspace.docCollection
+  );
+
   const handleDrop = useCallback(
     (data: DropTargetDropEvent<AffineDNDData>) => {
       if (
@@ -75,7 +88,7 @@ export const ExplorerFavorites = () => {
 
   const handleCreateNewFavoriteDoc: MouseEventHandler = useCallback(
     e => {
-      const newDoc = docsService.createDoc();
+      const newDoc = createPage();
       favoriteService.favoriteList.add(
         'doc',
         newDoc.id,
@@ -87,7 +100,7 @@ export const ExplorerFavorites = () => {
       explorerSection.setCollapsed(false);
     },
     [
-      docsService,
+      createPage,
       explorerSection,
       favoriteService.favoriteList,
       workbenchService.workbench,

packages/frontend/core/src/pages/workspace/all-page/all-page-header.tsx

@@ -11,7 +11,7 @@ import { track } from '@affine/core/mixpanel';
 import { isNewTabTrigger } from '@affine/core/utils';
 import type { Filter } from '@affine/env/filter';
 import { PlusIcon } from '@blocksuite/icons/rc';
-import { useService, WorkspaceService } from '@toeverything/infra';
+import { useServices, WorkspaceService } from '@toeverything/infra';
 import clsx from 'clsx';
 
 import * as styles from './all-page.css';
@@ -25,7 +25,10 @@ export const AllPageHeader = ({
   filters: Filter[];
   onChangeFilters: (filters: Filter[]) => void;
 }) => {
-  const workspace = useService(WorkspaceService).workspace;
+  const { workspaceService } = useServices({
+    WorkspaceService,
+  });
+  const workspace = workspaceService.workspace;
   const { importFile, createEdgeless, createPage } = usePageHelper(
     workspace.docCollection
   );
@@ -64,7 +67,10 @@ export const AllPageHeader = ({
               createEdgeless(isNewTabTrigger(e) ? 'new-tab' : true)
             }
             onCreatePage={e =>
-              createPage(isNewTabTrigger(e) ? 'new-tab' : true)
+              createPage('page', isNewTabTrigger(e) ? 'new-tab' : true)
+            }
+            onCreateDoc={e =>
+              createPage(undefined, isNewTabTrigger(e) ? 'new-tab' : true)
             }
             onImportFile={onImportFile}
           >