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) {
+  replace(target: ExtensionType[], newExtension: ExtensionType[]) {
-    this._value = this._value.map(extension =>
+    this._value = [
-      extension === target ? newExtension : extension
+      ...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,7 +56,7 @@ export const CommonBlockSpecs: ExtensionType[] = [
 ].flat();
 
 export const PageFirstPartyBlockSpecs: ExtensionType[] = [
-  ...CommonBlockSpecs,
+  CommonBlockSpecs,
   NoteBlockSpec,
   PageSurfaceBlockSpec,
   PageSurfaceRefBlockSpec,
@@ -62,7 +64,7 @@ export const PageFirstPartyBlockSpecs: ExtensionType[] = [
 ].flat();
 
 export const EdgelessFirstPartyBlockSpecs: ExtensionType[] = [
-  ...CommonBlockSpecs,
+  CommonBlockSpecs,
 
   EdgelessNoteBlockSpec,
   EdgelessSurfaceBlockSpec,

blocksuite/blocks/src/_specs/group/common.ts

@@ -1,44 +0,0 @@
-import { AttachmentBlockSpec } from '@blocksuite/affine-block-attachment';
-import { BookmarkBlockSpec } from '@blocksuite/affine-block-bookmark';
-import { CodeBlockSpec } from '@blocksuite/affine-block-code';
-import { DividerBlockSpec } from '@blocksuite/affine-block-divider';
-import {
-  EmbedFigmaBlockSpec,
-  EmbedGithubBlockSpec,
-  EmbedHtmlBlockSpec,
-  EmbedLinkedDocBlockSpec,
-  EmbedLoomBlockSpec,
-  EmbedSyncedDocBlockSpec,
-  EmbedYoutubeBlockSpec,
-} from '@blocksuite/affine-block-embed';
-import { ImageBlockSpec } from '@blocksuite/affine-block-image';
-import { ListBlockSpec } from '@blocksuite/affine-block-list';
-import {
-  EdgelessNoteBlockSpec,
-  NoteBlockSpec,
-} from '@blocksuite/affine-block-note';
-import { ParagraphBlockSpec } from '@blocksuite/affine-block-paragraph';
-
-import { DataViewBlockSpec } from '../../data-view-block/data-view-spec.js';
-import { DatabaseBlockSpec } from '../../database-block/database-spec.js';
-
-export {
-  AttachmentBlockSpec,
-  BookmarkBlockSpec,
-  CodeBlockSpec,
-  DatabaseBlockSpec,
-  DataViewBlockSpec,
-  DividerBlockSpec,
-  EdgelessNoteBlockSpec,
-  EmbedFigmaBlockSpec,
-  EmbedGithubBlockSpec,
-  EmbedHtmlBlockSpec,
-  EmbedLinkedDocBlockSpec,
-  EmbedLoomBlockSpec,
-  EmbedSyncedDocBlockSpec,
-  EmbedYoutubeBlockSpec,
-  ImageBlockSpec,
-  ListBlockSpec,
-  NoteBlockSpec,
-  ParagraphBlockSpec,
-};

blocksuite/blocks/src/_specs/group/edgeless.ts

@@ -1,16 +0,0 @@
-import { EdgelessTextBlockSpec } from '@blocksuite/affine-block-edgeless-text';
-import { FrameBlockSpec } from '@blocksuite/affine-block-frame';
-import { LatexBlockSpec } from '@blocksuite/affine-block-latex';
-import { EdgelessSurfaceBlockSpec } from '@blocksuite/affine-block-surface';
-
-import { EdgelessRootBlockSpec } from '../../root-block/edgeless/edgeless-root-spec.js';
-import { EdgelessSurfaceRefBlockSpec } from '../../surface-ref-block/surface-ref-spec.js';
-
-export {
-  EdgelessRootBlockSpec,
-  EdgelessSurfaceBlockSpec,
-  EdgelessSurfaceRefBlockSpec,
-  EdgelessTextBlockSpec,
-  FrameBlockSpec,
-  LatexBlockSpec,
-};

blocksuite/blocks/src/_specs/group/page.ts

@@ -1,6 +0,0 @@
-import { PageSurfaceBlockSpec } from '@blocksuite/affine-block-surface';
-
-import { PageRootBlockSpec } from '../../root-block/page/page-root-spec.js';
-import { PageSurfaceRefBlockSpec } from '../../surface-ref-block/surface-ref-spec.js';
-
-export { PageRootBlockSpec, PageSurfaceBlockSpec, PageSurfaceRefBlockSpec };

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 './data-view-block';
-export * from './database-block/index.js';
+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,
+  AICodeBlockSpec,
-  AIPageRootBlockSpec,
+  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,
+  ImageBlockSpec,
-  PageRootBlockSpec,
+  ParagraphBlockSpec,
   TelemetryProvider,
   ThemeExtensionIdentifier,
 } from '@blocksuite/affine/blocks';
@@ -258,36 +258,24 @@ export const extendEdgelessPreviewSpec = (function () {
   };
 })();
 
-export function createPageRootBlockSpec(
+export function enableAffineExtension(
-  framework: FrameworkProvider
+  framework: FrameworkProvider,
-): ExtensionType[] {
+  specBuilder: SpecBuilder
-  const featureFlagService = framework.get(FeatureFlagService);
+): void {
-  const enableAI = featureFlagService.flags.enable_ai.value;
+  specBuilder.extend(
-  return [
+    [
-    enableAI ? AIPageRootBlockSpec : PageRootBlockSpec,
+      getThemeExtension(framework),
-    FontLoaderService,
+      getFontConfigExtension(),
-    getThemeExtension(framework),
+      getTelemetryExtension(),
-    getFontConfigExtension(),
+      getEditorConfigExtension(framework),
-    getTelemetryExtension(),
+      buildDocDisplayMetaExtension(framework),
-    getEditorConfigExtension(framework),
+    ].flat()
-    buildDocDisplayMetaExtension(framework),
+  );
-  ].flat();
 }
 
-export function createEdgelessRootBlockSpec(
+export function enableAIExtension(specBuilder: SpecBuilder): void {
-  framework: FrameworkProvider
+  specBuilder.replace(CodeBlockSpec, AICodeBlockSpec);
-): ExtensionType[] {
+  specBuilder.replace(ImageBlockSpec, AIImageBlockSpec);
-  const featureFlagService = framework.get(FeatureFlagService);
+  specBuilder.replace(ParagraphBlockSpec, AIParagraphBlockSpec);
-  const enableAI = featureFlagService.flags.enable_ai.value;
+  specBuilder.extend(AIChatBlockSpec);
-  return [
-    enableAI ? AIEdgelessRootBlockSpec : EdgelessRootBlockSpec,
-    FontLoaderService,
-    getThemeExtension(framework),
-    EdgelessToolExtension,
-    EdgelessBuiltInManager,
-    getFontConfigExtension(),
-    getTelemetryExtension(),
-    getEditorConfigExtension(framework),
-    buildDocDisplayMetaExtension(framework),
-  ].flat();
 }

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,
+  EdgelessRootBlockSpec,
-  EdgelessSurfaceBlockSpec,
-  EdgelessSurfaceRefBlockSpec,
   EdgelessTemplatePanel,
-  EdgelessTextBlockSpec,
+  SpecProvider,
-  FrameBlockSpec,
 } from '@blocksuite/affine/blocks';
 import { type FrameworkProvider } from '@toeverything/infra';
 
-import { AIBlockSpecs, DefaultBlockSpecs } from './common';
+import { enableAffineExtension, enableAIExtension } from './custom/root-block';
-import { createEdgelessRootBlockSpec } from './custom/root-block';
 
 export function createEdgelessModeSpecs(
   framework: FrameworkProvider
 ): ExtensionType[] {
   const featureFlagService = framework.get(FeatureFlagService);
   const enableAI = featureFlagService.flags.enable_ai.value;
-  return [
+  const edgelessSpec = SpecProvider.getInstance().getSpec('edgeless');
-    ...(enableAI ? AIBlockSpecs : DefaultBlockSpecs),
+  enableAffineExtension(framework, edgelessSpec);
-    EdgelessSurfaceBlockSpec,
+  if (enableAI) {
-    EdgelessSurfaceRefBlockSpec,
+    enableAIExtension(edgelessSpec);
-    FrameBlockSpec,
+    edgelessSpec.replace(EdgelessRootBlockSpec, AIEdgelessRootBlockSpec);
-    EdgelessTextBlockSpec,
+  }
-    EdgelessNoteBlockSpec,
+
-    // special
+  return edgelessSpec.value;
-    createEdgelessRootBlockSpec(framework),
-  ].flat();
 }
 
 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 {
+import { PageRootBlockSpec, SpecProvider } from '@blocksuite/affine/blocks';
-  NoteBlockSpec,
-  PageSurfaceBlockSpec,
-  PageSurfaceRefBlockSpec,
-} from '@blocksuite/affine/blocks';
 import { type FrameworkProvider } from '@toeverything/infra';
 
-import { AIBlockSpecs, DefaultBlockSpecs } from './common';
+import { enableAffineExtension, enableAIExtension } from './custom/root-block';
-import { createPageRootBlockSpec } from './custom/root-block';
 
 export function createPageModeSpecs(
   framework: FrameworkProvider
 ): ExtensionType[] {
   const featureFlagService = framework.get(FeatureFlagService);
   const enableAI = featureFlagService.flags.enable_ai.value;
-  return [
+  const provider = SpecProvider.getInstance();
-    ...(enableAI ? AIBlockSpecs : DefaultBlockSpecs),
+  const pageSpec = provider.getSpec('page');
-    PageSurfaceBlockSpec,
+  enableAffineExtension(framework, pageSpec);
-    PageSurfaceRefBlockSpec,
+  if (enableAI) {
-    NoteBlockSpec,
+    enableAIExtension(pageSpec);
-    // special
+    pageSpec.replace(PageRootBlockSpec, AIPageRootBlockSpec);
-    createPageRootBlockSpec(framework),
+  }
-  ].flat();
+  return pageSpec.value;
 }