From c1e16aeaa7b2b8ea64373d45549b4995412cbd38 Mon Sep 17 00:00:00 2001 From: Saul-Mirone Date: Wed, 19 Mar 2025 13:38:09 +0000 Subject: [PATCH] refactor(editor): remove paragraph service (#11003) --- .../blocks/block-paragraph/src/index.ts | 2 +- .../src/paragraph-block-config.ts | 9 ++++ .../block-paragraph/src/paragraph-block.ts | 15 +++--- .../block-paragraph/src/paragraph-service.ts | 26 ----------- .../block-paragraph/src/paragraph-spec.ts | 19 +++++++- .../block-std/src/extension/config.ts | 2 +- .../blocksuite/ai/extensions/ai-paragraph.ts | 28 ++++------- .../extensions/entry/enable-mobile.ts | 46 +++++++++---------- 8 files changed, 67 insertions(+), 80 deletions(-) create mode 100644 blocksuite/affine/blocks/block-paragraph/src/paragraph-block-config.ts delete mode 100644 blocksuite/affine/blocks/block-paragraph/src/paragraph-service.ts diff --git a/blocksuite/affine/blocks/block-paragraph/src/index.ts b/blocksuite/affine/blocks/block-paragraph/src/index.ts index 800f253ef9..fabfdc09e3 100644 --- a/blocksuite/affine/blocks/block-paragraph/src/index.ts +++ b/blocksuite/affine/blocks/block-paragraph/src/index.ts @@ -1,7 +1,7 @@ export * from './adapters/index.js'; export * from './commands'; export * from './paragraph-block.js'; -export * from './paragraph-service.js'; +export * from './paragraph-block-config.js'; export * from './paragraph-spec.js'; export * from './turbo/paragraph-layout-provider.js'; export * from './turbo/paragraph-painter.worker.js'; diff --git a/blocksuite/affine/blocks/block-paragraph/src/paragraph-block-config.ts b/blocksuite/affine/blocks/block-paragraph/src/paragraph-block-config.ts new file mode 100644 index 0000000000..4650906399 --- /dev/null +++ b/blocksuite/affine/blocks/block-paragraph/src/paragraph-block-config.ts @@ -0,0 +1,9 @@ +import type { ParagraphBlockModel } from '@blocksuite/affine-model'; +import { ConfigExtensionFactory } from '@blocksuite/block-std'; + +export interface ParagraphBlockConfig { + getPlaceholder: (model: ParagraphBlockModel) => string; +} + +export const ParagraphBlockConfigExtension = + ConfigExtensionFactory('affine:paragraph'); diff --git a/blocksuite/affine/blocks/block-paragraph/src/paragraph-block.ts b/blocksuite/affine/blocks/block-paragraph/src/paragraph-block.ts index beae8098bd..7d6547ad61 100644 --- a/blocksuite/affine/blocks/block-paragraph/src/paragraph-block.ts +++ b/blocksuite/affine/blocks/block-paragraph/src/paragraph-block.ts @@ -25,13 +25,10 @@ import { classMap } from 'lit/directives/class-map.js'; import { styleMap } from 'lit/directives/style-map.js'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; -import type { ParagraphBlockService } from './paragraph-service.js'; +import { ParagraphBlockConfigExtension } from './paragraph-block-config.js'; import { paragraphBlockStyles } from './styles.js'; -export class ParagraphBlockComponent extends CaptionedBlockComponent< - ParagraphBlockModel, - ParagraphBlockService -> { +export class ParagraphBlockComponent extends CaptionedBlockComponent { static override styles = paragraphBlockStyles; focused$ = computed(() => { @@ -59,6 +56,12 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent< return false; }; + private get _placeholder() { + return this.std + .get(ParagraphBlockConfigExtension.identifier) + ?.getPlaceholder(this.model); + } + get attributeRenderer() { return this.inlineManager.getRenderer(); } @@ -309,7 +312,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent< visible: this._displayPlaceholder.value, })} > - ${this.service.placeholderGenerator(this.model)} + ${this._placeholder} `} diff --git a/blocksuite/affine/blocks/block-paragraph/src/paragraph-service.ts b/blocksuite/affine/blocks/block-paragraph/src/paragraph-service.ts deleted file mode 100644 index 611f198531..0000000000 --- a/blocksuite/affine/blocks/block-paragraph/src/paragraph-service.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { - type ParagraphBlockModel, - ParagraphBlockSchema, -} from '@blocksuite/affine-model'; -import { BlockService } from '@blocksuite/block-std'; - -export class ParagraphBlockService extends BlockService { - static override readonly flavour = ParagraphBlockSchema.model.flavour; - - placeholderGenerator: (model: ParagraphBlockModel) => string = model => { - if (model.props.type === 'text') { - return "Type '/' for commands"; - } - - const placeholders = { - h1: 'Heading 1', - h2: 'Heading 2', - h3: 'Heading 3', - h4: 'Heading 4', - h5: 'Heading 5', - h6: 'Heading 6', - quote: '', - }; - return placeholders[model.props.type]; - }; -} diff --git a/blocksuite/affine/blocks/block-paragraph/src/paragraph-spec.ts b/blocksuite/affine/blocks/block-paragraph/src/paragraph-spec.ts index a22df6f6bf..d2439f63ad 100644 --- a/blocksuite/affine/blocks/block-paragraph/src/paragraph-spec.ts +++ b/blocksuite/affine/blocks/block-paragraph/src/paragraph-spec.ts @@ -3,17 +3,32 @@ import type { ExtensionType } from '@blocksuite/store'; import { literal } from 'lit/static-html.js'; import { ParagraphBlockAdapterExtensions } from './adapters/extension.js'; +import { ParagraphBlockConfigExtension } from './paragraph-block-config.js'; import { ParagraphKeymapExtension, ParagraphTextKeymapExtension, } from './paragraph-keymap.js'; -import { ParagraphBlockService } from './paragraph-service.js'; + +const placeholders = { + text: "Type '/' for commands", + h1: 'Heading 1', + h2: 'Heading 2', + h3: 'Heading 3', + h4: 'Heading 4', + h5: 'Heading 5', + h6: 'Heading 6', + quote: '', +}; export const ParagraphBlockSpec: ExtensionType[] = [ FlavourExtension('affine:paragraph'), - ParagraphBlockService, BlockViewExtension('affine:paragraph', literal`affine-paragraph`), ParagraphTextKeymapExtension, ParagraphKeymapExtension, ParagraphBlockAdapterExtensions, + ParagraphBlockConfigExtension({ + getPlaceholder: model => { + return placeholders[model.props.type]; + }, + }), ].flat(); diff --git a/blocksuite/framework/block-std/src/extension/config.ts b/blocksuite/framework/block-std/src/extension/config.ts index 9be9b0864f..3291c98371 100644 --- a/blocksuite/framework/block-std/src/extension/config.ts +++ b/blocksuite/framework/block-std/src/extension/config.ts @@ -32,7 +32,7 @@ export function ConfigExtensionFactory>( const identifier = ConfigIdentifier(flavor) as ServiceIdentifier; const extensionFactory = (config: Config): ExtensionType => ({ setup: di => { - di.addImpl(ConfigIdentifier(flavor), () => config); + di.override(ConfigIdentifier(flavor), () => config); }, }); extensionFactory.identifier = identifier; diff --git a/packages/frontend/core/src/blocksuite/ai/extensions/ai-paragraph.ts b/packages/frontend/core/src/blocksuite/ai/extensions/ai-paragraph.ts index a900f40044..d14be5aa85 100644 --- a/packages/frontend/core/src/blocksuite/ai/extensions/ai-paragraph.ts +++ b/packages/frontend/core/src/blocksuite/ai/extensions/ai-paragraph.ts @@ -1,22 +1,15 @@ -import { LifeCycleWatcher } from '@blocksuite/affine/block-std'; import { - ParagraphBlockService, + ParagraphBlockConfigExtension, ParagraphBlockSpec, } from '@blocksuite/affine/blocks/paragraph'; import type { ExtensionType } from '@blocksuite/affine/store'; -class AIParagraphBlockWatcher extends LifeCycleWatcher { - static override key = 'ai-paragraph-block-watcher'; - - override mounted() { - super.mounted(); - const service = this.std.get(ParagraphBlockService); - service.placeholderGenerator = model => { - if (model.props.type === 'text') { - return "Type '/' for commands, 'space' for AI"; - } - +export const AIParagraphBlockSpec: ExtensionType[] = [ + ...ParagraphBlockSpec, + ParagraphBlockConfigExtension({ + getPlaceholder: model => { const placeholders = { + text: "Type '/' for commands, 'space' for AI", h1: 'Heading 1', h2: 'Heading 2', h3: 'Heading 3', @@ -26,11 +19,6 @@ class AIParagraphBlockWatcher extends LifeCycleWatcher { quote: '', }; return placeholders[model.props.type]; - }; - } -} - -export const AIParagraphBlockSpec: ExtensionType[] = [ - ...ParagraphBlockSpec, - AIParagraphBlockWatcher, + }, + }), ]; diff --git a/packages/frontend/core/src/blocksuite/extensions/entry/enable-mobile.ts b/packages/frontend/core/src/blocksuite/extensions/entry/enable-mobile.ts index 1dafa39364..16c876fb5b 100644 --- a/packages/frontend/core/src/blocksuite/extensions/entry/enable-mobile.ts +++ b/packages/frontend/core/src/blocksuite/extensions/entry/enable-mobile.ts @@ -8,7 +8,7 @@ import { import type { CodeBlockConfig } from '@blocksuite/affine/blocks/code'; import { codeToolbarWidget } from '@blocksuite/affine/blocks/code'; import { imageToolbarWidget } from '@blocksuite/affine/blocks/image'; -import { ParagraphBlockService } from '@blocksuite/affine/blocks/paragraph'; +import { ParagraphBlockConfigExtension } from '@blocksuite/affine/blocks/paragraph'; import { surfaceRefToolbarWidget } from '@blocksuite/affine/blocks/surface-ref'; import type { Container, @@ -68,30 +68,24 @@ class MobileSpecsPatches extends LifeCycleWatcher { }); } } - - override mounted() { - // remove slash placeholder for mobile: `type / ...` - { - const paragraphService = this.std.get(ParagraphBlockService); - if (!paragraphService) return; - - paragraphService.placeholderGenerator = model => { - const placeholders = { - text: '', - h1: 'Heading 1', - h2: 'Heading 2', - h3: 'Heading 3', - h4: 'Heading 4', - h5: 'Heading 5', - h6: 'Heading 6', - quote: '', - }; - return placeholders[model.props.type]; - }; - } - } } +const mobileParagraphConfig = ParagraphBlockConfigExtension({ + getPlaceholder: model => { + const placeholders = { + text: '', + h1: 'Heading 1', + h2: 'Heading 2', + h3: 'Heading 3', + h4: 'Heading 4', + h5: 'Heading 5', + h6: 'Heading 6', + quote: '', + }; + return placeholders[model.props.type]; + }, +}); + function KeyboardToolbarExtension(framework: FrameworkProvider): ExtensionType { const affineVirtualKeyboardProvider = framework.get(VirtualKeyboardProvider); @@ -171,5 +165,9 @@ export function enableMobileExtension( specBuilder.omit(surfaceRefToolbarWidget); specBuilder.omit(toolbarWidget); specBuilder.omit(SlashMenuExtension); - specBuilder.extend([MobileSpecsPatches, KeyboardToolbarExtension(framework)]); + specBuilder.extend([ + MobileSpecsPatches, + KeyboardToolbarExtension(framework), + mobileParagraphConfig, + ]); }