refactor(editor): remove paragraph service (#11003)

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';

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<ParagraphBlockConfig>('affine:paragraph');

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<
+export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBlockModel> {
-  ParagraphBlockModel,
-  ParagraphBlockService
-> {
   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}
                 </div>
               `}
         </div>

blocksuite/affine/blocks/block-paragraph/src/paragraph-service.ts

@@ -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];
-  };
-}

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();

blocksuite/framework/block-std/src/extension/config.ts

@@ -32,7 +32,7 @@ export function ConfigExtensionFactory<Config extends Record<string, any>>(
   const identifier = ConfigIdentifier(flavor) as ServiceIdentifier<Config>;
   const extensionFactory = (config: Config): ExtensionType => ({
     setup: di => {
-      di.addImpl(ConfigIdentifier(flavor), () => config);
+      di.override(ConfigIdentifier(flavor), () => config);
     },
   });
   extensionFactory.identifier = identifier;

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 {
+export const AIParagraphBlockSpec: ExtensionType[] = [
-  static override key = 'ai-paragraph-block-watcher';
+  ...ParagraphBlockSpec,
-
+  ParagraphBlockConfigExtension({
-  override mounted() {
+    getPlaceholder: model => {
-    super.mounted();
-    const service = this.std.get(ParagraphBlockService);
-    service.placeholderGenerator = model => {
-      if (model.props.type === 'text') {
-        return "Type '/' for commands, 'space' for AI";
-      }
-
       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,
 ];

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,14 +68,10 @@ class MobileSpecsPatches extends LifeCycleWatcher {
       });
     }
   }
+}
 
-  override mounted() {
+const mobileParagraphConfig = ParagraphBlockConfigExtension({
-    // remove slash placeholder for mobile: `type / ...`
+  getPlaceholder: model => {
-    {
-      const paragraphService = this.std.get(ParagraphBlockService);
-      if (!paragraphService) return;
-
-      paragraphService.placeholderGenerator = model => {
     const placeholders = {
       text: '',
       h1: 'Heading 1',
@@ -87,10 +83,8 @@ class MobileSpecsPatches extends LifeCycleWatcher {
       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,
+  ]);
 }