From a0d6a28ff458732e25a9a96a3d8d03d2aac1d53d Mon Sep 17 00:00:00 2001 From: akumatus Date: Wed, 18 Sep 2024 08:45:58 +0000 Subject: [PATCH] fix: default style of new document does not follow AFFiNE settings (#8291) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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.
🎥 Video uploaded on Graphite:
--- .../common/infra/src/initialization/index.ts | 67 ++++++++++++------- .../infra/src/modules/doc/services/docs.ts | 8 +-- .../specs/custom/spec-patchers.tsx | 11 ++- .../block-suite-page-list/utils.tsx | 13 ++-- .../core/src/components/hooks/use-journal.ts | 24 +++++-- .../src/modules/quicksearch/services/cmdk.ts | 14 +++- 6 files changed, 94 insertions(+), 43 deletions(-) diff --git a/packages/common/infra/src/initialization/index.ts b/packages/common/infra/src/initialization/index.ts index 545775ead8..c120ecee07 100644 --- 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 - ); - const noteBlockId = page.addBlock( - 'affine:note' as keyof BlockSuite.BlockModels, - {}, - pageBlockId - ); - page.addBlock( - 'affine:paragraph' as keyof BlockSuite.BlockModels, - {}, - noteBlockId - ); - page.history.clear(); +export interface DocProps { + page?: Partial; + surface?: Partial; + note?: Partial; + paragraph?: Partial; +} + +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('') } + ); + doc.addBlock('affine:surface', props?.surface || {}, pageBlockId); + const noteBlockId = doc.addBlock( + 'affine:note', + { + ...props?.note, + displayMode: NoteDisplayMode.DocAndEdgeless, + }, + pageBlockId + ); + 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 index 679dda88b9..1d1f33f5c3 100644 --- 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 index 1b6691df53..06932655e2 100644 --- 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 index 0ffa280e02..c332810765 100644 --- 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 index 67686d3591..674c8decdb 100644 --- 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 index 9691459ec9..94c33d6a32 100644 --- 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); }