feat(editor): replace spec provider with extension manager (#11861)

Closes: BS-3273

blocksuite/affine/blocks/embed/src/common/render-linked-doc.ts

@@ -1,4 +1,5 @@
 import { getSurfaceBlock } from '@blocksuite/affine-block-surface';
+import { ViewExtensionManagerIdentifier } from '@blocksuite/affine-ext-loader';
 import {
   type DocMode,
   ImageBlockModel,
@@ -9,7 +10,7 @@ import {
 } from '@blocksuite/affine-model';
 import { EMBED_CARD_HEIGHT } from '@blocksuite/affine-shared/consts';
 import { NotificationProvider } from '@blocksuite/affine-shared/services';
-import { matchModels, SpecProvider } from '@blocksuite/affine-shared/utils';
+import { matchModels } from '@blocksuite/affine-shared/utils';
 import { BlockStdScope, EditorLifeCycleExtension } from '@blocksuite/std';
 import {
   type BlockModel,
@@ -202,10 +203,13 @@ async function renderNoteContent(
     match: ids.map(id => ({ id, viewType: 'display' })),
   };
   const previewDoc = doc.doc.getStore({ query });
-  const previewSpec = SpecProvider._.getSpec('preview:page');
+  const std = card.host.std;
+  const previewSpec = std
+    .get(ViewExtensionManagerIdentifier)
+    .get('preview-page');
   const previewStd = new BlockStdScope({
     store: previewDoc,
-    extensions: previewSpec.value,
+    extensions: previewSpec,
   });
   const previewTemplate = previewStd.render();
   const fragment = document.createDocumentFragment();

blocksuite/affine/blocks/embed/src/embed-synced-doc-block/embed-edgeless-synced-doc-block.ts

@@ -70,7 +70,7 @@ export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
             <div class="affine-page-viewport" data-theme=${appTheme}>
               ${new BlockStdScope({
                 store: syncedDoc,
-                extensions: this._buildPreviewSpec('preview:page'),
+                extensions: this._buildPreviewSpec('preview-page'),
               }).render()}
             </div>
           `,
@@ -81,7 +81,7 @@ export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
             <div class="affine-edgeless-viewport" data-theme=${edgelessTheme}>
               ${new BlockStdScope({
                 store: syncedDoc,
-                extensions: this._buildPreviewSpec('preview:edgeless'),
+                extensions: this._buildPreviewSpec('preview-edgeless'),
               }).render()}
             </div>
           `,

blocksuite/affine/blocks/embed/src/embed-synced-doc-block/embed-synced-doc-block.ts

@@ -1,4 +1,5 @@
 import { Peekable } from '@blocksuite/affine-components/peek';
+import { ViewExtensionManagerIdentifier } from '@blocksuite/affine-ext-loader';
 import {
   type DocLinkClickedEvent,
   RefNodeSlotsProvider,
@@ -20,10 +21,7 @@ import {
   ThemeExtensionIdentifier,
   ThemeProvider,
 } from '@blocksuite/affine-shared/services';
-import {
-  cloneReferenceInfo,
-  SpecProvider,
-} from '@blocksuite/affine-shared/utils';
+import { cloneReferenceInfo } from '@blocksuite/affine-shared/utils';
 import { Bound, getCommonBound } from '@blocksuite/global/gfx';
 import {
   BlockSelection,
@@ -113,9 +111,10 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
     ],
   };
 
-  protected _buildPreviewSpec = (name: 'preview:page' | 'preview:edgeless') => {
+  protected _buildPreviewSpec = (name: 'preview-page' | 'preview-edgeless') => {
     const nextDepth = this.depth + 1;
-    const previewSpecBuilder = SpecProvider._.getSpec(name);
+    const viewExtensionManager = this.std.get(ViewExtensionManagerIdentifier);
+    const previewSpec = viewExtensionManager.get(name);
     const currentDisposables = this.disposables;
     const editorSetting = this.std.getOptional(EditorSettingProvider) ?? {
       setting$: signal(GeneralSettingSchema.parse({})),
@@ -157,13 +156,11 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
       }
     }
 
-    previewSpecBuilder.extend([
+    return previewSpec.concat([
       EmbedSyncedDocWatcher,
       GfxViewportInitializer,
       EditorSettingExtension(editorSetting),
     ]);
-
-    return previewSpecBuilder.value;
   };
 
   protected _renderSyncedView = () => {
@@ -204,7 +201,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
             <div class="affine-page-viewport" data-theme=${appTheme}>
               ${new BlockStdScope({
                 store: syncedDoc,
-                extensions: this._buildPreviewSpec('preview:page'),
+                extensions: this._buildPreviewSpec('preview-page'),
               }).render()}
             </div>
           `,
@@ -215,7 +212,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
             <div class="affine-edgeless-viewport" data-theme=${edgelessTheme}>
               ${new BlockStdScope({
                 store: syncedDoc,
-                extensions: this._buildPreviewSpec('preview:edgeless'),
+                extensions: this._buildPreviewSpec('preview-edgeless'),
               }).render()}
             </div>
           `,

blocksuite/affine/blocks/surface-ref/package.json

@@ -13,6 +13,7 @@
     "@blocksuite/affine-block-frame": "workspace:*",
     "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-inline-reference": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",

blocksuite/affine/blocks/surface-ref/src/portal/note.ts

@@ -1,4 +1,5 @@
 import type { CanvasRenderer } from '@blocksuite/affine-block-surface';
+import { ViewExtensionManagerIdentifier } from '@blocksuite/affine-ext-loader';
 import type { NoteBlockModel } from '@blocksuite/affine-model';
 import {
   DefaultTheme,
@@ -10,7 +11,6 @@ import {
   EDGELESS_BLOCK_CHILD_PADDING,
 } from '@blocksuite/affine-shared/consts';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
-import { SpecProvider } from '@blocksuite/affine-shared/utils';
 import { deserializeXYWH } from '@blocksuite/global/gfx';
 import { WithDisposable } from '@blocksuite/global/lit';
 import {
@@ -122,10 +122,12 @@ export class SurfaceRefNotePortal extends WithDisposable(ShadowlessElement) {
       query: this.query,
       readonly: true,
     });
-    const previewSpec = SpecProvider._.getSpec('preview:page');
+    const previewSpec = this.host.std
+      .get(ViewExtensionManagerIdentifier)
+      .get('preview-page');
     return new BlockStdScope({
       store: doc,
-      extensions: previewSpec.value.slice(),
+      extensions: previewSpec,
     }).render();
   }
 

blocksuite/affine/blocks/surface-ref/src/surface-ref-block.ts

@@ -6,6 +6,7 @@ import {
 import type { BlockCaptionEditor } from '@blocksuite/affine-components/caption';
 import { whenHover } from '@blocksuite/affine-components/hover';
 import { Peekable } from '@blocksuite/affine-components/peek';
+import { ViewExtensionManagerIdentifier } from '@blocksuite/affine-ext-loader';
 import { RefNodeSlotsProvider } from '@blocksuite/affine-inline-reference';
 import {
   FrameBlockModel,
@@ -20,10 +21,7 @@ import {
   ViewportElementExtension,
 } from '@blocksuite/affine-shared/services';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
-import {
-  requestConnectedFrame,
-  SpecProvider,
-} from '@blocksuite/affine-shared/utils';
+import { requestConnectedFrame } from '@blocksuite/affine-shared/utils';
 import { DisposableGroup } from '@blocksuite/global/disposable';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
 import {
@@ -46,7 +44,7 @@ import {
   type GfxModel,
   GfxPrimitiveElementModel,
 } from '@blocksuite/std/gfx';
-import type { BaseSelection, Store } from '@blocksuite/store';
+import type { BaseSelection, ExtensionType, Store } from '@blocksuite/store';
 import { effect, signal } from '@preact/signals-core';
 import { css, html, nothing } from 'lit';
 import { query } from 'lit/decorators.js';
@@ -114,9 +112,18 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
 
   private _previewDoc: Store | null = null;
 
-  private readonly _previewSpec = SpecProvider._.getSpec(
-    'preview:edgeless'
-  ).extend([ViewportElementExtension('.ref-viewport')]);
+  private _runtimePreviewExt: ExtensionType[] = [];
+
+  private get _viewExtensionManager() {
+    return this.std.get(ViewExtensionManagerIdentifier);
+  }
+
+  private get _previewSpec() {
+    return [
+      ...this._viewExtensionManager.get('preview-edgeless'),
+      ViewportElementExtension('.ref-viewport'),
+    ];
+  }
 
   private _referencedModel: GfxModel | null = null;
 
@@ -338,7 +345,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
       }
     }
 
-    this._previewSpec.extend([SurfaceRefViewportWatcher]);
+    this._runtimePreviewExt = [SurfaceRefViewportWatcher];
   }
 
   private _initHover() {
@@ -366,7 +373,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
 
   private _renderRefContent(referencedModel: GfxModel) {
     const [, , w, h] = deserializeXYWH(referencedModel.xywh);
-    const _previewSpec = this._previewSpec.value;
+    const _previewSpec = this._previewSpec.concat(this._runtimePreviewExt);
 
     return html`<div class="ref-content">
       <div

blocksuite/affine/blocks/surface-ref/tsconfig.json

@@ -10,6 +10,7 @@
     { "path": "../frame" },
     { "path": "../surface" },
     { "path": "../../components" },
+    { "path": "../../ext-loader" },
     { "path": "../../inlines/reference" },
     { "path": "../../model" },
     { "path": "../../shared" },