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

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>
This commit is contained in:
akumatus 2024-09-18 08:45:58 +00:00
parent 544cdd3d56
commit a0d6a28ff4
No known key found for this signature in database
GPG Key ID: D1FD534C6C29FE19
6 changed files with 94 additions and 43 deletions

View File

@ -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) { export interface DocProps {
page.load(() => { page?: Partial<RootBlockProps>;
const pageBlockId = page.addBlock( surface?: Partial<SurfaceBlockProps>;
'affine:page' as keyof BlockSuite.BlockModels, note?: Partial<NoteProps>;
{ paragraph?: Partial<ParagraphProps>;
title: new page.Text(title ?? ''), }
}
); export function initEmptyDoc(doc: Doc, title?: string) {
page.addBlock( doc.load(() => {
'affine:surface' as keyof BlockSuite.BlockModels, initDocFromProps(doc, {
{}, page: {
pageBlockId title: new Text(title),
); },
const noteBlockId = page.addBlock( });
'affine:note' as keyof BlockSuite.BlockModels, });
{}, }
pageBlockId
); export function initDocFromProps(doc: Doc, props?: DocProps) {
page.addBlock( doc.load(() => {
'affine:paragraph' as keyof BlockSuite.BlockModels, const pageBlockId = doc.addBlock(
{}, 'affine:page',
noteBlockId props?.page || { title: new Text('') }
); );
page.history.clear(); 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();
}); });
} }

View File

@ -1,8 +1,8 @@
import { Unreachable } from '@affine/env/constant'; import { Unreachable } from '@affine/env/constant';
import type { DocMode } from '@blocksuite/blocks'; import { type DocMode } from '@blocksuite/blocks';
import { Service } from '../../../framework'; import { Service } from '../../../framework';
import { initEmptyPage } from '../../../initialization'; import { type DocProps, initDocFromProps } from '../../../initialization';
import { ObjectPool } from '../../../utils'; import { ObjectPool } from '../../../utils';
import type { Doc } from '../entities/doc'; import type { Doc } from '../entities/doc';
import { DocRecordList } from '../entities/record-list'; import { DocRecordList } from '../entities/record-list';
@ -54,11 +54,11 @@ export class DocsService extends Service {
createDoc( createDoc(
options: { options: {
primaryMode?: DocMode; primaryMode?: DocMode;
title?: string; docProps?: DocProps;
} = {} } = {}
) { ) {
const doc = this.store.createBlockSuiteDoc(); const doc = this.store.createBlockSuiteDoc();
initEmptyPage(doc, options.title); initDocFromProps(doc, options.docProps);
this.store.markDocSyncStateAsReady(doc.id); this.store.markDocSyncStateAsReady(doc.id);
const docRecord = this.list.doc$(doc.id).value; const docRecord = this.list.doc$(doc.id).value;
if (!docRecord) { if (!docRecord) {

View File

@ -8,6 +8,7 @@ import {
type useConfirmModal, type useConfirmModal,
} from '@affine/component'; } from '@affine/component';
import type { EditorService } from '@affine/core/modules/editor'; import type { EditorService } from '@affine/core/modules/editor';
import { EditorSettingService } from '@affine/core/modules/editor-settting';
import { resolveLinkToDoc } from '@affine/core/modules/navigation'; import { resolveLinkToDoc } from '@affine/core/modules/navigation';
import type { PeekViewService } from '@affine/core/modules/peek-view'; import type { PeekViewService } from '@affine/core/modules/peek-view';
import type { ActivePeekView } from '@affine/core/modules/peek-view/entities/peek-view'; import type { ActivePeekView } from '@affine/core/modules/peek-view/entities/peek-view';
@ -50,8 +51,9 @@ import {
ReferenceNodeConfigExtension, ReferenceNodeConfigExtension,
} from '@blocksuite/blocks'; } from '@blocksuite/blocks';
import { AIChatBlockSchema } from '@blocksuite/presets'; import { AIChatBlockSchema } from '@blocksuite/presets';
import type { BlockSnapshot } from '@blocksuite/store'; import { type BlockSnapshot, Text } from '@blocksuite/store';
import { import {
type DocProps,
type DocService, type DocService,
DocsService, DocsService,
type FrameworkProvider, type FrameworkProvider,
@ -336,11 +338,16 @@ export function patchQuickSearchService(framework: FrameworkProvider) {
if (result.source === 'creation') { if (result.source === 'creation') {
const docsService = framework.get(DocsService); const docsService = framework.get(DocsService);
const editorSettingService = framework.get(EditorSettingService);
const mode = const mode =
result.id === 'creation:create-edgeless' ? 'edgeless' : 'page'; 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({ const newDoc = docsService.createDoc({
primaryMode: mode, primaryMode: mode,
title: result.payload.title, docProps,
}); });
track.doc.editor.quickSearch.createDoc({ track.doc.editor.quickSearch.createDoc({
mode, mode,

View File

@ -1,21 +1,26 @@
import { toast } from '@affine/component'; import { toast } from '@affine/component';
import { EditorSettingService } from '@affine/core/modules/editor-settting';
import { WorkbenchService } from '@affine/core/modules/workbench'; import { WorkbenchService } from '@affine/core/modules/workbench';
import type { DocMode } from '@blocksuite/blocks'; import type { DocMode } from '@blocksuite/blocks';
import type { DocCollection } from '@blocksuite/store'; 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'; import { useCallback, useMemo } from 'react';
export const usePageHelper = (docCollection: DocCollection) => { export const usePageHelper = (docCollection: DocCollection) => {
const { docsService, workbenchService } = useServices({ const { docsService, workbenchService, editorSettingService } = useServices({
DocsService, DocsService,
WorkbenchService, WorkbenchService,
EditorSettingService,
}); });
const workbench = workbenchService.workbench; const workbench = workbenchService.workbench;
const docRecordList = docsService.list; const docRecordList = docsService.list;
const createPageAndOpen = useCallback( const createPageAndOpen = useCallback(
(mode?: DocMode, open?: boolean | 'new-tab') => { (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) { if (mode) {
docRecordList.doc$(page.id).value?.setPrimaryMode(mode); docRecordList.doc$(page.id).value?.setPrimaryMode(mode);
} }
@ -26,7 +31,7 @@ export const usePageHelper = (docCollection: DocCollection) => {
}); });
return page; return page;
}, },
[docRecordList, docsService, workbench] [docRecordList, docsService, editorSettingService, workbench]
); );
const createEdgelessAndOpen = useCallback( const createEdgelessAndOpen = useCallback(

View File

@ -1,7 +1,14 @@
import { EditorSettingService } from '@affine/core/modules/editor-settting';
import { i18nTime } from '@affine/i18n'; import { i18nTime } from '@affine/i18n';
import { track } from '@affine/track'; import { track } from '@affine/track';
import type { DocCollection } from '@blocksuite/store'; import { type DocCollection, Text } from '@blocksuite/store';
import { DocsService, initEmptyPage, useService } from '@toeverything/infra'; import {
type DocProps,
DocsService,
initDocFromProps,
useService,
useServices,
} from '@toeverything/infra';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useCallback, useMemo } from 'react'; import { useCallback, useMemo } from 'react';
@ -25,7 +32,10 @@ function toDayjs(j?: string | false) {
export const useJournalHelper = (docCollection: DocCollection) => { export const useJournalHelper = (docCollection: DocCollection) => {
const bsWorkspaceHelper = useDocCollectionHelper(docCollection); const bsWorkspaceHelper = useDocCollectionHelper(docCollection);
const docsService = useService(DocsService); const { docsService, editorSettingService } = useServices({
DocsService,
EditorSettingService,
});
const adapter = useCurrentWorkspacePropertiesAdapter(); const adapter = useCurrentWorkspacePropertiesAdapter();
/** /**
@ -46,11 +56,15 @@ export const useJournalHelper = (docCollection: DocCollection) => {
.toDate() .toDate()
.getTime(), .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); adapter.setJournalPageDateString(page.id, title);
return page; return page;
}, },
[adapter, bsWorkspaceHelper, docsService.list] [adapter, bsWorkspaceHelper, docsService.list, editorSettingService]
); );
const isPageJournal = useCallback( const isPageJournal = useCallback(

View File

@ -1,7 +1,9 @@
import { track } from '@affine/track'; 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 { Service } from '@toeverything/infra';
import { EditorSettingService } from '../../editor-settting';
import type { WorkbenchService } from '../../workbench'; import type { WorkbenchService } from '../../workbench';
import { CollectionsQuickSearchSession } from '../impls/collections'; import { CollectionsQuickSearchSession } from '../impls/collections';
import { CommandsQuickSearchSession } from '../impls/commands'; import { CommandsQuickSearchSession } from '../impls/commands';
@ -92,16 +94,22 @@ export class CMDKQuickSearchService extends Service {
} }
if (result.source === 'creation') { 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') { if (result.id === 'creation:create-page') {
const newDoc = this.docsService.createDoc({ const newDoc = this.docsService.createDoc({
primaryMode: 'page', primaryMode: 'page',
title: result.payload.title, docProps,
}); });
this.workbenchService.workbench.openDoc(newDoc.id); this.workbenchService.workbench.openDoc(newDoc.id);
} else if (result.id === 'creation:create-edgeless') { } else if (result.id === 'creation:create-edgeless') {
const newDoc = this.docsService.createDoc({ const newDoc = this.docsService.createDoc({
primaryMode: 'edgeless', primaryMode: 'edgeless',
title: result.payload.title, docProps,
}); });
this.workbenchService.workbench.openDoc(newDoc.id); this.workbenchService.workbench.openDoc(newDoc.id);
} }