refactor(editor): use spec builder (#9424)

blocksuite/affine/shared/src/utils/spec/spec-builder.ts

@@ -19,9 +19,10 @@ export class SpecBuilder {
     this._value = this._value.filter(extension => extension !== target);
   }
 
-  replace(target: ExtensionType, newExtension: ExtensionType) {
-    this._value = this._value.map(extension =>
-      extension === target ? newExtension : extension
-    );
+  replace(target: ExtensionType[], newExtension: ExtensionType[]) {
+    this._value = [
+      ...this._value.filter(extension => !target.includes(extension)),
+      ...newExtension,
+    ];
   }
 }

blocksuite/blocks/src/_specs/common.ts

@@ -22,6 +22,7 @@ import {
   RichTextExtensions,
 } from '@blocksuite/affine-components/rich-text';
 import {
+  DocDisplayMetaService,
   EditPropsStore,
   FontLoaderService,
 } from '@blocksuite/affine-shared/services';
@@ -36,6 +37,7 @@ import {
 } from '../surface-ref-block/surface-ref-spec.js';
 
 export const CommonBlockSpecs: ExtensionType[] = [
+  DocDisplayMetaService,
   RefNodeSlotsExtension,
   EditPropsStore,
   RichTextExtensions,
@@ -54,15 +56,15 @@ export const CommonBlockSpecs: ExtensionType[] = [
 ].flat();
 
 export const PageFirstPartyBlockSpecs: ExtensionType[] = [
-  ...CommonBlockSpecs,
+  CommonBlockSpecs,
   NoteBlockSpec,
   PageSurfaceBlockSpec,
   PageSurfaceRefBlockSpec,
   FontLoaderService,
 ].flat();
 
 export const EdgelessFirstPartyBlockSpecs: ExtensionType[] = [
-  ...CommonBlockSpecs,
+  CommonBlockSpecs,
 
   EdgelessNoteBlockSpec,
   EdgelessSurfaceBlockSpec,

blocksuite/blocks/src/_specs/index.ts

@@ -1,4 +1,3 @@
-export * from './group/common.js';
 export * from './preset/edgeless-specs.js';
 export * from './preset/mobile-patch.js';
 export * from './preset/page-specs.js';

blocksuite/blocks/src/_specs/preset/edgeless-specs.ts

@@ -53,7 +53,7 @@ export const EdgelessBuiltInManager: ExtensionType[] = [
 
 export const EdgelessEditorBlockSpecs: ExtensionType[] = [
   EdgelessRootBlockSpec,
-  ...EdgelessFirstPartyBlockSpecs,
+  EdgelessFirstPartyBlockSpecs,
   EdgelessToolExtension,
   EdgelessBuiltInManager,
 ].flat();

blocksuite/blocks/src/data-view-block/index.ts

@@ -2,6 +2,7 @@ import type { DataViewBlockModel } from './data-view-model.js';
 
 export * from './data-view-block.js';
 export * from './data-view-model.js';
+export * from './data-view-spec.js';
 
 declare global {
   namespace BlockSuite {

blocksuite/blocks/src/database-block/index.ts

@@ -5,6 +5,7 @@ export type { DatabaseOptionsConfig } from './config.js';
 export * from './data-source.js';
 export * from './database-block.js';
 export * from './database-service.js';
+export * from './database-spec.js';
 export { databaseBlockColumns } from './properties/index.js';
 declare global {
   namespace BlockSuite {

blocksuite/blocks/src/index.ts

@@ -16,8 +16,8 @@ export * from './_common/test-utils/test-utils.js';
 export * from './_common/transformers/index.js';
 export { type AbstractEditor } from './_common/types.js';
 export * from './_specs/index.js';
-export * from './data-view-block/index.js';
-export * from './database-block/index.js';
+export * from './data-view-block';
+export * from './database-block';
 export { EdgelessTemplatePanel } from './root-block/edgeless/components/toolbar/template/template-panel.js';
 export type {
   Template,

blocksuite/blocks/src/root-block/edgeless/edgeless-root-spec.ts

@@ -1,7 +1,6 @@
 import { FileDropExtension } from '@blocksuite/affine-components/drag-indicator';
 import {
   DNDAPIExtension,
-  DocDisplayMetaService,
   DocModeService,
   EmbedOptionService,
   PageViewportServiceExtension,
@@ -99,7 +98,6 @@ const EdgelessCommonExtension: ExtensionType[] = [
   ToolController,
   DNDAPIExtension,
   PageViewportServiceExtension,
-  DocDisplayMetaService,
   RootBlockAdapterExtensions,
   FileDropExtension,
 ].flat();

blocksuite/blocks/src/root-block/page/page-root-spec.ts

@@ -1,7 +1,6 @@
 import { FileDropExtension } from '@blocksuite/affine-components/drag-indicator';
 import {
   DNDAPIExtension,
-  DocDisplayMetaService,
   DocModeService,
   EmbedOptionService,
   PageViewportServiceExtension,
@@ -70,7 +69,6 @@ const PageCommonExtension: ExtensionType[] = [
   DocModeService,
   ThemeService,
   EmbedOptionService,
-  DocDisplayMetaService,
   PageViewportServiceExtension,
 ];
 

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/common.ts

@@ -15,6 +15,7 @@ import {
   DividerBlockSpec,
   EditPropsStore,
   EmbedExtensions,
+  FontLoaderService,
   ImageBlockSpec,
   LatexBlockSpec,
   ListBlockSpec,
@@ -36,6 +37,7 @@ const CommonBlockSpecs: ExtensionType[] = [
   BookmarkBlockSpec,
   AttachmentBlockSpec,
   AdapterFactoryExtensions,
+  FontLoaderService,
 ].flat();
 
 export const DefaultBlockSpecs: ExtensionType[] = [

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/root-block.ts

@@ -1,11 +1,12 @@
 import {
-  AIEdgelessRootBlockSpec,
-  AIPageRootBlockSpec,
+  AICodeBlockSpec,
+  AIImageBlockSpec,
+  AIParagraphBlockSpec,
 } from '@affine/core/blocksuite/presets/ai';
+import { AIChatBlockSpec } from '@affine/core/blocksuite/presets/blocks';
 import { DocService, DocsService } from '@affine/core/modules/doc';
 import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
 import { EditorSettingService } from '@affine/core/modules/editor-setting';
-import { FeatureFlagService } from '@affine/core/modules/feature-flag';
 import { AppThemeService } from '@affine/core/modules/theme';
 import { mixpanel } from '@affine/track';
 import {
@@ -18,18 +19,17 @@ import type {
   DocDisplayMetaExtension,
   DocDisplayMetaParams,
   RootBlockConfig,
+  SpecBuilder,
   TelemetryEventMap,
   ThemeExtension,
 } from '@blocksuite/affine/blocks';
 import {
+  CodeBlockSpec,
   ColorScheme,
   DocDisplayMetaProvider,
-  EdgelessBuiltInManager,
-  EdgelessRootBlockSpec,
-  EdgelessToolExtension,
   EditorSettingExtension,
-  FontLoaderService,
-  PageRootBlockSpec,
+  ImageBlockSpec,
+  ParagraphBlockSpec,
   TelemetryProvider,
   ThemeExtensionIdentifier,
 } from '@blocksuite/affine/blocks';
@@ -258,36 +258,24 @@ export const extendEdgelessPreviewSpec = (function () {
   };
 })();
 
-export function createPageRootBlockSpec(
-  framework: FrameworkProvider
-): ExtensionType[] {
-  const featureFlagService = framework.get(FeatureFlagService);
-  const enableAI = featureFlagService.flags.enable_ai.value;
-  return [
-    enableAI ? AIPageRootBlockSpec : PageRootBlockSpec,
-    FontLoaderService,
-    getThemeExtension(framework),
-    getFontConfigExtension(),
-    getTelemetryExtension(),
-    getEditorConfigExtension(framework),
-    buildDocDisplayMetaExtension(framework),
-  ].flat();
+export function enableAffineExtension(
+  framework: FrameworkProvider,
+  specBuilder: SpecBuilder
+): void {
+  specBuilder.extend(
+    [
+      getThemeExtension(framework),
+      getFontConfigExtension(),
+      getTelemetryExtension(),
+      getEditorConfigExtension(framework),
+      buildDocDisplayMetaExtension(framework),
+    ].flat()
+  );
 }
 
-export function createEdgelessRootBlockSpec(
-  framework: FrameworkProvider
-): ExtensionType[] {
-  const featureFlagService = framework.get(FeatureFlagService);
-  const enableAI = featureFlagService.flags.enable_ai.value;
-  return [
-    enableAI ? AIEdgelessRootBlockSpec : EdgelessRootBlockSpec,
-    FontLoaderService,
-    getThemeExtension(framework),
-    EdgelessToolExtension,
-    EdgelessBuiltInManager,
-    getFontConfigExtension(),
-    getTelemetryExtension(),
-    getEditorConfigExtension(framework),
-    buildDocDisplayMetaExtension(framework),
-  ].flat();
+export function enableAIExtension(specBuilder: SpecBuilder): void {
+  specBuilder.replace(CodeBlockSpec, AICodeBlockSpec);
+  specBuilder.replace(ImageBlockSpec, AIImageBlockSpec);
+  specBuilder.replace(ParagraphBlockSpec, AIParagraphBlockSpec);
+  specBuilder.extend(AIChatBlockSpec);
 }

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/edgeless.ts

@@ -1,36 +1,31 @@
+import { AIEdgelessRootBlockSpec } from '@affine/core/blocksuite/presets/ai';
 import { FeatureFlagService } from '@affine/core/modules/feature-flag';
 import { builtInTemplates as builtInEdgelessTemplates } from '@affine/templates/edgeless';
 import { builtInTemplates as builtInStickersTemplates } from '@affine/templates/stickers';
 import type { ExtensionType } from '@blocksuite/affine/block-std';
 import type { TemplateManager } from '@blocksuite/affine/blocks';
 import {
-  EdgelessNoteBlockSpec,
-  EdgelessSurfaceBlockSpec,
-  EdgelessSurfaceRefBlockSpec,
+  EdgelessRootBlockSpec,
   EdgelessTemplatePanel,
-  EdgelessTextBlockSpec,
-  FrameBlockSpec,
+  SpecProvider,
 } from '@blocksuite/affine/blocks';
 import { type FrameworkProvider } from '@toeverything/infra';
 
-import { AIBlockSpecs, DefaultBlockSpecs } from './common';
-import { createEdgelessRootBlockSpec } from './custom/root-block';
+import { enableAffineExtension, enableAIExtension } from './custom/root-block';
 
 export function createEdgelessModeSpecs(
   framework: FrameworkProvider
 ): ExtensionType[] {
   const featureFlagService = framework.get(FeatureFlagService);
   const enableAI = featureFlagService.flags.enable_ai.value;
-  return [
-    ...(enableAI ? AIBlockSpecs : DefaultBlockSpecs),
-    EdgelessSurfaceBlockSpec,
-    EdgelessSurfaceRefBlockSpec,
-    FrameBlockSpec,
-    EdgelessTextBlockSpec,
-    EdgelessNoteBlockSpec,
-    // special
-    createEdgelessRootBlockSpec(framework),
-  ].flat();
+  const edgelessSpec = SpecProvider.getInstance().getSpec('edgeless');
+  enableAffineExtension(framework, edgelessSpec);
+  if (enableAI) {
+    enableAIExtension(edgelessSpec);
+    edgelessSpec.replace(EdgelessRootBlockSpec, AIEdgelessRootBlockSpec);
+  }
+
+  return edgelessSpec.value;
 }
 
 export function effects() {

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/page.ts

@@ -1,26 +1,22 @@
+import { AIPageRootBlockSpec } from '@affine/core/blocksuite/presets/ai';
 import { FeatureFlagService } from '@affine/core/modules/feature-flag';
 import type { ExtensionType } from '@blocksuite/affine/block-std';
-import {
-  NoteBlockSpec,
-  PageSurfaceBlockSpec,
-  PageSurfaceRefBlockSpec,
-} from '@blocksuite/affine/blocks';
+import { PageRootBlockSpec, SpecProvider } from '@blocksuite/affine/blocks';
 import { type FrameworkProvider } from '@toeverything/infra';
 
-import { AIBlockSpecs, DefaultBlockSpecs } from './common';
-import { createPageRootBlockSpec } from './custom/root-block';
+import { enableAffineExtension, enableAIExtension } from './custom/root-block';
 
 export function createPageModeSpecs(
   framework: FrameworkProvider
 ): ExtensionType[] {
   const featureFlagService = framework.get(FeatureFlagService);
   const enableAI = featureFlagService.flags.enable_ai.value;
-  return [
-    ...(enableAI ? AIBlockSpecs : DefaultBlockSpecs),
-    PageSurfaceBlockSpec,
-    PageSurfaceRefBlockSpec,
-    NoteBlockSpec,
-    // special
-    createPageRootBlockSpec(framework),
-  ].flat();
+  const provider = SpecProvider.getInstance();
+  const pageSpec = provider.getSpec('page');
+  enableAffineExtension(framework, pageSpec);
+  if (enableAI) {
+    enableAIExtension(pageSpec);
+    pageSpec.replace(PageRootBlockSpec, AIPageRootBlockSpec);
+  }
+  return pageSpec.value;
 }