fix: default style of new document does not follow AFFiNE settings (#8291)

akumatus · akumatus · commit a0d6a28ff458 · 2024-09-18T08:45:58.000Z
Close issue [BS-1377](https://linear.app/affine-design/issue/BS-1377). ### What changed? - Add `initDocFromProps` function to initialize the document with specific props. - Extract `docProps` from editor settings and pass it to `docsService.createDoc` function. <div class='graphite__hidden'> <div>🎥 Video uploaded on Graphite:</div> <a href="https://app.graphite.dev/media/video/sJGviKxfE3Ap685cl5bj/8082a8bd-ab3d-432c-9d3e-2f1d1a8398eb.mov"> <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/sJGviKxfE3Ap685cl5bj/8082a8bd-ab3d-432c-9d3e-2f1d1a8398eb.mov"> </a> </div> <video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/8082a8bd-ab3d-432c-9d3e-2f1d1a8398eb.mov">录屏2024-09-18 16.13.43.mov</video>
diff --git a/packages/common/infra/src/initialization/index.ts b/packages/common/infra/src/initialization/index.ts
@@ -1,28 +1,45 @@
-import type { Doc } from '@blocksuite/store';
+import type { SurfaceBlockProps } from '@blocksuite/block-std/gfx';
+import {
+  NoteDisplayMode,
+  type NoteProps,
+  type ParagraphProps,
+  type RootBlockProps,
+} from '@blocksuite/blocks';
+import { type Doc, Text } from '@blocksuite/store';
 
-export function initEmptyPage(page: Doc, title?: string) {
-  page.load(() => {
-    const pageBlockId = page.addBlock(
-      'affine:page' as keyof BlockSuite.BlockModels,
-      {
-        title: new page.Text(title ?? ''),
-      }
-    );
-    page.addBlock(
-      'affine:surface' as keyof BlockSuite.BlockModels,
-      {},
-      pageBlockId
+export interface DocProps {
+  page?: Partial<RootBlockProps>;
+  surface?: Partial<SurfaceBlockProps>;
+  note?: Partial<NoteProps>;
+  paragraph?: Partial<ParagraphProps>;
+}
+
+export function initEmptyDoc(doc: Doc, title?: string) {
+  doc.load(() => {
+    initDocFromProps(doc, {
+      page: {
+        title: new Text(title),
+      },
+    });
+  });
+}
+
+export function initDocFromProps(doc: Doc, props?: DocProps) {
+  doc.load(() => {
+    const pageBlockId = doc.addBlock(
+      'affine:page',
+      props?.page || { title: new Text('') }
     );
-    const noteBlockId = page.addBlock(
-      'affine:note' as keyof BlockSuite.BlockModels,
-      {},
+    doc.addBlock('affine:surface', props?.surface || {}, pageBlockId);
+    const noteBlockId = doc.addBlock(
+      'affine:note',
+      {
+        ...props?.note,
+        displayMode: NoteDisplayMode.DocAndEdgeless,
+      },
       pageBlockId
     );
-    page.addBlock(
-      'affine:paragraph' as keyof BlockSuite.BlockModels,
-      {},
-      noteBlockId
-    );
-    page.history.clear();
+    doc.addBlock('affine:paragraph', props?.paragraph || {}, noteBlockId);
+    doc.history.clear();
   });
 }
diff --git a/packages/common/infra/src/modules/doc/services/docs.ts b/packages/common/infra/src/modules/doc/services/docs.ts
@@ -1,8 +1,8 @@
 import { Unreachable } from '@affine/env/constant';
-import type { DocMode } from '@blocksuite/blocks';
+import { type DocMode } from '@blocksuite/blocks';
 
 import { Service } from '../../../framework';
-import { initEmptyPage } from '../../../initialization';
+import { type DocProps, initDocFromProps } from '../../../initialization';
 import { ObjectPool } from '../../../utils';
 import type { Doc } from '../entities/doc';
 import { DocRecordList } from '../entities/record-list';
@@ -54,11 +54,11 @@ export class DocsService extends Service {
   createDoc(
     options: {
       primaryMode?: DocMode;
-      title?: string;
+      docProps?: DocProps;
     } = {}
   ) {
     const doc = this.store.createBlockSuiteDoc();
-    initEmptyPage(doc, options.title);
+    initDocFromProps(doc, options.docProps);
     this.store.markDocSyncStateAsReady(doc.id);
     const docRecord = this.list.doc$(doc.id).value;
     if (!docRecord) {
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.tsx
@@ -8,6 +8,7 @@ import {
   type useConfirmModal,
 } from '@affine/component';
 import type { EditorService } from '@affine/core/modules/editor';
+import { EditorSettingService } from '@affine/core/modules/editor-settting';
 import { resolveLinkToDoc } from '@affine/core/modules/navigation';
 import type { PeekViewService } from '@affine/core/modules/peek-view';
 import type { ActivePeekView } from '@affine/core/modules/peek-view/entities/peek-view';
@@ -50,8 +51,9 @@ import {
   ReferenceNodeConfigExtension,
 } from '@blocksuite/blocks';
 import { AIChatBlockSchema } from '@blocksuite/presets';
-import type { BlockSnapshot } from '@blocksuite/store';
+import { type BlockSnapshot, Text } from '@blocksuite/store';
 import {
+  type DocProps,
   type DocService,
   DocsService,
   type FrameworkProvider,
@@ -336,11 +338,16 @@ export function patchQuickSearchService(framework: FrameworkProvider) {
 
             if (result.source === 'creation') {
               const docsService = framework.get(DocsService);
+              const editorSettingService = framework.get(EditorSettingService);
               const mode =
                 result.id === 'creation:create-edgeless' ? 'edgeless' : 'page';
+              const docProps: DocProps = {
+                page: { title: new Text(result.payload.title) },
+                note: editorSettingService.editorSetting.get('affine:note'),
+              };
               const newDoc = docsService.createDoc({
                 primaryMode: mode,
-                title: result.payload.title,
+                docProps,
               });
               track.doc.editor.quickSearch.createDoc({
                 mode,
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-page-list/utils.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-page-list/utils.tsx
@@ -1,21 +1,26 @@
 import { toast } from '@affine/component';
+import { EditorSettingService } from '@affine/core/modules/editor-settting';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import type { DocMode } from '@blocksuite/blocks';
 import type { DocCollection } from '@blocksuite/store';
-import { DocsService, useServices } from '@toeverything/infra';
+import { type DocProps, DocsService, useServices } from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';
 
 export const usePageHelper = (docCollection: DocCollection) => {
-  const { docsService, workbenchService } = useServices({
+  const { docsService, workbenchService, editorSettingService } = useServices({
     DocsService,
     WorkbenchService,
+    EditorSettingService,
   });
   const workbench = workbenchService.workbench;
   const docRecordList = docsService.list;
 
   const createPageAndOpen = useCallback(
     (mode?: DocMode, open?: boolean | 'new-tab') => {
-      const page = docsService.createDoc();
+      const docProps: DocProps = {
+        note: editorSettingService.editorSetting.get('affine:note'),
+      };
+      const page = docsService.createDoc({ docProps });
       if (mode) {
         docRecordList.doc$(page.id).value?.setPrimaryMode(mode);
       }
@@ -26,7 +31,7 @@ export const usePageHelper = (docCollection: DocCollection) => {
         });
       return page;
     },
-    [docRecordList, docsService, workbench]
+    [docRecordList, docsService, editorSettingService, workbench]
   );
 
   const createEdgelessAndOpen = useCallback(
diff --git a/packages/frontend/core/src/components/hooks/use-journal.ts b/packages/frontend/core/src/components/hooks/use-journal.ts
@@ -1,7 +1,14 @@
+import { EditorSettingService } from '@affine/core/modules/editor-settting';
 import { i18nTime } from '@affine/i18n';
 import { track } from '@affine/track';
-import type { DocCollection } from '@blocksuite/store';
-import { DocsService, initEmptyPage, useService } from '@toeverything/infra';
+import { type DocCollection, Text } from '@blocksuite/store';
+import {
+  type DocProps,
+  DocsService,
+  initDocFromProps,
+  useService,
+  useServices,
+} from '@toeverything/infra';
 import dayjs from 'dayjs';
 import { useCallback, useMemo } from 'react';
 
@@ -25,7 +32,10 @@ function toDayjs(j?: string | false) {
 
 export const useJournalHelper = (docCollection: DocCollection) => {
   const bsWorkspaceHelper = useDocCollectionHelper(docCollection);
-  const docsService = useService(DocsService);
+  const { docsService, editorSettingService } = useServices({
+    DocsService,
+    EditorSettingService,
+  });
   const adapter = useCurrentWorkspacePropertiesAdapter();
 
   /**
@@ -46,11 +56,15 @@ export const useJournalHelper = (docCollection: DocCollection) => {
           .toDate()
           .getTime(),
       });
-      initEmptyPage(page, title);
+      const docProps: DocProps = {
+        page: { title: new Text(title) },
+        note: editorSettingService.editorSetting.get('affine:note'),
+      };
+      initDocFromProps(page, docProps);
       adapter.setJournalPageDateString(page.id, title);
       return page;
     },
-    [adapter, bsWorkspaceHelper, docsService.list]
+    [adapter, bsWorkspaceHelper, docsService.list, editorSettingService]
   );
 
   const isPageJournal = useCallback(
diff --git a/packages/frontend/core/src/modules/quicksearch/services/cmdk.ts b/packages/frontend/core/src/modules/quicksearch/services/cmdk.ts
@@ -1,7 +1,9 @@
 import { track } from '@affine/track';
-import type { DocsService } from '@toeverything/infra';
+import { Text } from '@blocksuite/store';
+import type { DocProps, DocsService } from '@toeverything/infra';
 import { Service } from '@toeverything/infra';
 
+import { EditorSettingService } from '../../editor-settting';
 import type { WorkbenchService } from '../../workbench';
 import { CollectionsQuickSearchSession } from '../impls/collections';
 import { CommandsQuickSearchSession } from '../impls/commands';
@@ -92,16 +94,22 @@ export class CMDKQuickSearchService extends Service {
           }
 
           if (result.source === 'creation') {
+            const editorSettingService =
+              this.framework.get(EditorSettingService);
+            const docProps: DocProps = {
+              page: { title: new Text(result.payload.title) },
+              note: editorSettingService.editorSetting.get('affine:note'),
+            };
             if (result.id === 'creation:create-page') {
               const newDoc = this.docsService.createDoc({
                 primaryMode: 'page',
-                title: result.payload.title,
+                docProps,
               });
               this.workbenchService.workbench.openDoc(newDoc.id);
             } else if (result.id === 'creation:create-edgeless') {
               const newDoc = this.docsService.createDoc({
                 primaryMode: 'edgeless',
-                title: result.payload.title,
+                docProps,
               });
               this.workbenchService.workbench.openDoc(newDoc.id);
             }
