feat(core): apply default doc mode setting (#8083)

Author: EYHN

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

@@ -406,8 +406,9 @@ export const General = () => {
       <FontFamilySettings />
       <CustomFontFamilySettings />
       <NewDocDefaultModeSettings />
+      {/* //TODO(@akumatus): implement these settings
       <DeFaultCodeBlockSettings />
-      <SpellCheckSettings />
+      <SpellCheckSettings /> */}
     </SettingWrapper>
   );
 };

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

@@ -1,47 +1,41 @@
 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 type { DocMode } from '@blocksuite/blocks';
-import {
-  DocsService,
-  initEmptyPage,
-  useLiveData,
-  useServices,
-} from '@toeverything/infra';
+import { DocsService, initEmptyPage, useServices } from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';
 
 import type { DocCollection } from '../../../shared';
 
 export const usePageHelper = (docCollection: DocCollection) => {
-  const { docsService, workbenchService, editorSettingService } = useServices({
+  const { docsService, workbenchService } = useServices({
     DocsService,
     WorkbenchService,
-    EditorSettingService,
   });
   const workbench = workbenchService.workbench;
   const { createDoc } = useDocCollectionHelper(docCollection);
   const docRecordList = docsService.list;
-  const settings = useLiveData(editorSettingService.editorSetting.settings$);
 
   const createPageAndOpen = useCallback(
     (mode?: DocMode, open?: boolean | 'new-tab') => {
       const page = createDoc();
       initEmptyPage(page);
-      const primaryMode = mode || settings.newDocDefaultMode;
-      docRecordList.doc$(page.id).value?.setPrimaryMode(primaryMode as DocMode);
+      if (mode) {
+        docRecordList.doc$(page.id).value?.setPrimaryMode(mode);
+      }
+
       if (open !== false)
         workbench.openDoc(page.id, {
           at: open === 'new-tab' ? 'new-tab' : 'active',
         });
       return page;
     },
-    [createDoc, docRecordList, settings.newDocDefaultMode, workbench]
+    [createDoc, docRecordList, workbench]
   );
 
   const createEdgelessAndOpen = useCallback(
     (open?: boolean | 'new-tab') => {
-      return createPageAndOpen('edgeless' as DocMode, open);
+      return createPageAndOpen('edgeless', open);
     },
     [createPageAndOpen]
   );

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

@@ -1,7 +1,6 @@
 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,
@@ -13,7 +12,6 @@ import { CMDKQuickSearchService } from '@affine/core/modules/quicksearch/service
 import { isNewTabTrigger } from '@affine/core/utils';
 import { apis, events } from '@affine/electron-api';
 import { useI18n } from '@affine/i18n';
-import type { DocMode } from '@blocksuite/blocks';
 import {
   AllDocsIcon,
   GithubIcon,
@@ -79,17 +77,12 @@ export type RootAppSidebarProps = {
  *
  */
 export const RootAppSidebar = (): ReactElement => {
-  const {
-    workbenchService,
-    workspaceService,
-    cMDKQuickSearchService,
-    editorSettingService,
-  } = useServices({
-    WorkspaceService,
-    WorkbenchService,
-    CMDKQuickSearchService,
-    EditorSettingService,
-  });
+  const { workbenchService, workspaceService, cMDKQuickSearchService } =
+    useServices({
+      WorkspaceService,
+      WorkbenchService,
+      CMDKQuickSearchService,
+    });
   const currentWorkspace = workspaceService.workspace;
   const { appSettings } = useAppSettingHelper();
   const docCollection = currentWorkspace.docCollection;
@@ -106,18 +99,16 @@ export const RootAppSidebar = (): ReactElement => {
 
   const pageHelper = usePageHelper(currentWorkspace.docCollection);
 
-  const settings = useLiveData(editorSettingService.editorSetting.settings$);
-
   const onClickNewPage = useAsyncCallback(
     async (e?: MouseEvent) => {
       const page = pageHelper.createPage(
-        settings.newDocDefaultMode as DocMode,
+        undefined,
         isNewTabTrigger(e) ? 'new-tab' : true
       );
       page.load();
-      track.$.navigationPanel.$.createDoc({ mode: settings.newDocDefaultMode });
+      track.$.navigationPanel.$.createDoc();
     },
-    [pageHelper, settings.newDocDefaultMode]
+    [pageHelper]
   );
 
   useEffect(() => {

packages/frontend/core/src/hooks/use-journal.ts

@@ -1,5 +1,5 @@
 import { i18nTime } from '@affine/i18n';
-import { initEmptyPage, useService } from '@toeverything/infra';
+import { DocsService, initEmptyPage, useService } from '@toeverything/infra';
 import dayjs from 'dayjs';
 import { useCallback, useMemo } from 'react';
 
@@ -24,6 +24,7 @@ function toDayjs(j?: string | false) {
 
 export const useJournalHelper = (docCollection: DocCollection) => {
   const bsWorkspaceHelper = useDocCollectionHelper(docCollection);
+  const docsService = useService(DocsService);
   const adapter = useCurrentWorkspacePropertiesAdapter();
 
   /**
@@ -34,6 +35,7 @@ export const useJournalHelper = (docCollection: DocCollection) => {
       const day = dayjs(maybeDate);
       const title = day.format(JOURNAL_DATE_FORMAT);
       const page = bsWorkspaceHelper.createDoc();
+      docsService.list.setPrimaryMode(page.id, 'page');
       // set created date to match the journal date
       page.collection.setDocMeta(page.id, {
         createDate: dayjs()
@@ -47,7 +49,7 @@ export const useJournalHelper = (docCollection: DocCollection) => {
       adapter.setJournalPageDateString(page.id, title);
       return page;
     },
-    [adapter, bsWorkspaceHelper]
+    [adapter, bsWorkspaceHelper, docsService.list]
   );
 
   const isPageJournal = useCallback(

packages/frontend/core/src/layouts/workspace-layout.tsx

@@ -14,6 +14,7 @@ import {
   throwIfAborted,
   useLiveData,
   useService,
+  useServices,
   WorkspaceService,
 } from '@toeverything/infra';
 import { useAtomValue, useSetAtom } from 'jotai';
@@ -46,6 +47,7 @@ import { useRegisterFindInPageCommands } from '../hooks/affine/use-register-find
 import { useSubscriptionNotifyReader } from '../hooks/affine/use-subscription-notify';
 import { useRegisterWorkspaceCommands } from '../hooks/use-register-workspace-commands';
 import { AppTabsHeader } from '../modules/app-tabs-header';
+import { EditorSettingService } from '../modules/editor-settting';
 import { NavigationButtons } from '../modules/navigation';
 import { useRegisterNavigationCommands } from '../modules/navigation/view/use-register-navigation-commands';
 import { QuickSearchContainer } from '../modules/quicksearch';
@@ -73,8 +75,13 @@ export const WorkspaceLayoutProviders = ({ children }: PropsWithChildren) => {
   const t = useI18n();
   const pushGlobalLoadingEvent = useSetAtom(pushGlobalLoadingEventAtom);
   const resolveGlobalLoadingEvent = useSetAtom(resolveGlobalLoadingEventAtom);
-  const currentWorkspace = useService(WorkspaceService).workspace;
-  const docsList = useService(DocsService).list;
+  const { workspaceService, docsService } = useServices({
+    WorkspaceService,
+    DocsService,
+    EditorSettingService,
+  });
+  const currentWorkspace = workspaceService.workspace;
+  const docsList = docsService.list;
 
   const workbench = useService(WorkbenchService).workbench;
   useEffect(() => {

packages/frontend/core/src/modules/editor-settting/services/editor-setting.ts

@@ -1,7 +1,25 @@
-import { Service } from '@toeverything/infra';
+import type { Workspace } from '@toeverything/infra';
+import {
+  DocsService,
+  OnEvent,
+  Service,
+  WorkspaceInitialized,
+} from '@toeverything/infra';
 
 import { EditorSetting } from '../entities/editor-setting';
 
+@OnEvent(WorkspaceInitialized, e => e.onWorkspaceInitialized)
 export class EditorSettingService extends Service {
   editorSetting = this.framework.createEntity(EditorSetting);
+
+  onWorkspaceInitialized(workspace: Workspace) {
+    // set default mode for new doc
+
+    workspace.docCollection.slots.docCreated.on(docId => {
+      const preferMode = this.editorSetting.settings$.value.newDocDefaultMode;
+      const docsService = workspace.scope.get(DocsService);
+      docsService.list.setPrimaryMode(docId, preferMode);
+    });
+    // never dispose, because this service always live longer than workspace
+  }
 }