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

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