refactor(editor): use spec builder to unify the extend of editor extensions (#9916)

packages/frontend/core/src/components/blocksuite/block-suite-editor/bi-directional-link-panel.tsx

@@ -154,7 +154,8 @@ const usePreviewExtensions = () => {
 
   const extensions = useMemo(() => {
     const specs = createPageModeSpecs(framework);
-    return [patchReferenceRenderer(reactToLit, referenceRenderer), ...specs];
+    specs.extend([patchReferenceRenderer(reactToLit, referenceRenderer)]);
+    return specs.value;
   }, [reactToLit, referenceRenderer, framework]);
 
   return [extensions, portals] as const;

packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx

@@ -144,42 +144,43 @@ const usePatchSpecs = (mode: DocMode) => {
     extendEdgelessPreviewSpec(framework);
   }, [framework]);
 
-  const specs = useMemo(() => {
+  const confirmModal = useConfirmModal();
-    return mode === 'edgeless'
+
+  const patchedSpecs = useMemo(() => {
+    const builder =
+      mode === 'edgeless'
         ? createEdgelessModeSpecs(framework)
         : createPageModeSpecs(framework);
-  }, [mode, framework]);
 
-  const confirmModal = useConfirmModal();
+    builder.extend(
-  const patchedSpecs = useMemo(() => {
+      [
-    let patched = specs.concat(
+        patchReferenceRenderer(reactToLit, referenceRenderer),
-      patchReferenceRenderer(reactToLit, referenceRenderer)
+        patchForEdgelessNoteConfig(reactToLit),
+        patchNotificationService(confirmModal),
+        patchPeekViewService(peekViewService),
+        patchOpenDocExtension(),
+        patchEdgelessClipboard(),
+        patchParseDocUrlExtension(framework),
+        patchGenerateDocUrlExtension(framework),
+        patchQuickSearchService(framework),
+        patchSideBarService(framework),
+        patchDocModeService(docService, docsService, editorService),
+      ].flat()
     );
 
     if (featureFlagService.flags.enable_pdf_embed_preview.value) {
-      patched = patched.concat(patchForAttachmentEmbedViews(reactToLit));
+      builder.extend([patchForAttachmentEmbedViews(reactToLit)]);
     }
-
-    patched = patched.concat(patchForEdgelessNoteConfig(reactToLit));
-    patched = patched.concat(patchNotificationService(confirmModal));
-    patched = patched.concat(patchPeekViewService(peekViewService));
-    patched = patched.concat(patchOpenDocExtension());
-    patched = patched.concat(patchEdgelessClipboard());
-    patched = patched.concat(patchParseDocUrlExtension(framework));
-    patched = patched.concat(patchGenerateDocUrlExtension(framework));
-    patched = patched.concat(patchQuickSearchService(framework));
-    patched = patched.concat(patchSideBarService(framework));
     if (BUILD_CONFIG.isMobileEdition) {
-      patched = patched.concat(patchForMobile());
+      builder.extend([patchForMobile()].flat());
     }
     if (BUILD_CONFIG.isElectron) {
-      patched = patched.concat(patchForClipboardInElectron(framework));
+      builder.extend([patchForClipboardInElectron(framework)].flat());
     }
-    patched = patched.concat(
+
-      patchDocModeService(docService, docsService, editorService)
+    return builder.value;
-    );
-    return patched;
   }, [
+    mode,
     confirmModal,
     docService,
     docsService,
@@ -188,7 +189,6 @@ const usePatchSpecs = (mode: DocMode) => {
     peekViewService,
     reactToLit,
     referenceRenderer,
-    specs,
     featureFlagService,
   ]);
 

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

@@ -2,20 +2,19 @@ import { createAIEdgelessRootBlockSpec } from '@affine/core/blocksuite/presets/a
 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 { TemplateManager } from '@blocksuite/affine/blocks';
+import type { SpecBuilder, TemplateManager } from '@blocksuite/affine/blocks';
 import {
   EdgelessRootBlockSpec,
   EdgelessTemplatePanel,
   SpecProvider,
 } from '@blocksuite/affine/blocks';
-import type { ExtensionType } from '@blocksuite/affine/store';
 import { type FrameworkProvider } from '@toeverything/infra';
 
 import { enableAffineExtension, enableAIExtension } from './custom/root-block';
 
 export function createEdgelessModeSpecs(
   framework: FrameworkProvider
-): ExtensionType[] {
+): SpecBuilder {
   const featureFlagService = framework.get(FeatureFlagService);
   const enableAI = featureFlagService.flags.enable_ai.value;
   const edgelessSpec = SpecProvider.getInstance().getSpec('edgeless');
@@ -28,7 +27,7 @@ export function createEdgelessModeSpecs(
     );
   }
 
-  return edgelessSpec.value;
+  return edgelessSpec;
 }
 
 export function effects() {

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

@@ -1,14 +1,15 @@
 import { createAIPageRootBlockSpec } from '@affine/core/blocksuite/presets/ai';
 import { FeatureFlagService } from '@affine/core/modules/feature-flag';
-import { PageRootBlockSpec, SpecProvider } from '@blocksuite/affine/blocks';
+import {
-import type { ExtensionType } from '@blocksuite/affine/store';
+  PageRootBlockSpec,
+  type SpecBuilder,
+  SpecProvider,
+} from '@blocksuite/affine/blocks';
 import { type FrameworkProvider } from '@toeverything/infra';
 
 import { enableAffineExtension, enableAIExtension } from './custom/root-block';
 
-export function createPageModeSpecs(
+export function createPageModeSpecs(framework: FrameworkProvider): SpecBuilder {
-  framework: FrameworkProvider
-): ExtensionType[] {
   const featureFlagService = framework.get(FeatureFlagService);
   const enableAI = featureFlagService.flags.enable_ai.value;
   const provider = SpecProvider.getInstance();
@@ -18,5 +19,5 @@ export function createPageModeSpecs(
     enableAIExtension(pageSpec);
     pageSpec.replace(PageRootBlockSpec, createAIPageRootBlockSpec(framework));
   }
-  return pageSpec.value;
+  return pageSpec;
 }

packages/frontend/core/src/modules/dnd/services/index.ts

@@ -163,7 +163,7 @@ export class DndService extends Service {
 
     const std = new BlockStdScope({
       store: doc,
-      extensions: createPageModeSpecs(this.framework),
+      extensions: createPageModeSpecs(this.framework).value,
     });
     const dndAPI = std.get(DndApiExtensionIdentifier);
     return dndAPI;