feat(editor): add WidgetViewExtension (#10180)

Closes: [BS-2282](https://linear.app/affine-design/issue/BS-2282/replace-widgetviewmapextension-with-widgetextension)

blocksuite/affine/block-code/src/code-block-spec.ts

@@ -1,7 +1,7 @@
 import {
   BlockViewExtension,
   FlavourExtension,
-  WidgetViewMapExtension,
+  WidgetViewExtension,
 } from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal, unsafeStatic } from 'lit/static-html.js';
@@ -14,13 +14,17 @@ import {
 import { CodeBlockService } from './code-block-service.js';
 import { AFFINE_CODE_TOOLBAR_WIDGET } from './code-toolbar/index.js';
 
+export const codeToolbarWidget = WidgetViewExtension(
+  'affine:code',
+  AFFINE_CODE_TOOLBAR_WIDGET,
+  literal`${unsafeStatic(AFFINE_CODE_TOOLBAR_WIDGET)}`
+);
+
 export const CodeBlockSpec: ExtensionType[] = [
   FlavourExtension('affine:code'),
   CodeBlockService,
   BlockViewExtension('affine:code', literal`affine-code`),
-  WidgetViewMapExtension('affine:code', {
-    codeToolbar: literal`${unsafeStatic(AFFINE_CODE_TOOLBAR_WIDGET)}`,
-  }),
+  codeToolbarWidget,
   CodeBlockInlineManagerExtension,
   CodeBlockUnitSpecExtension,
   CodeBlockAdapterExtensions,

blocksuite/affine/block-image/src/image-spec.ts

@@ -1,7 +1,7 @@
 import {
   BlockViewExtension,
   FlavourExtension,
-  WidgetViewMapExtension,
+  WidgetViewExtension,
 } from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
@@ -10,6 +10,12 @@ import { ImageBlockAdapterExtensions } from './adapters/extension.js';
 import { ImageProxyService } from './image-proxy-service.js';
 import { ImageBlockService, ImageDropOption } from './image-service.js';
 
+export const imageToolbarWidget = WidgetViewExtension(
+  'affine:image',
+  'imageToolbar',
+  literal`affine-image-toolbar-widget`
+);
+
 export const ImageBlockSpec: ExtensionType[] = [
   FlavourExtension('affine:image'),
   ImageBlockService,
@@ -22,9 +28,7 @@ export const ImageBlockSpec: ExtensionType[] = [
 
     return literal`affine-image`;
   }),
-  WidgetViewMapExtension('affine:image', {
-    imageToolbar: literal`affine-image-toolbar-widget`,
-  }),
+  imageToolbarWidget,
   ImageDropOption,
   ImageBlockAdapterExtensions,
 ].flat();

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

@@ -1,9 +1,6 @@
 export * from './commands.js';
 export * from './surface-ref-block.js';
 export * from './surface-ref-block-edgeless.js';
-export {
-  EdgelessSurfaceRefBlockSpec,
-  PageSurfaceRefBlockSpec,
-} from './surface-ref-spec.js';
+export * from './surface-ref-spec.js';
 export * from './types.js';
 export * from './utils.js';

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

@@ -1,17 +1,21 @@
 import {
   BlockViewExtension,
   FlavourExtension,
-  WidgetViewMapExtension,
+  WidgetViewExtension,
 } from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
+export const surfaceRefToolbarWidget = WidgetViewExtension(
+  'affine:surface-ref',
+  'surfaceToolbar',
+  literal`affine-surface-ref-toolbar`
+);
+
 export const PageSurfaceRefBlockSpec: ExtensionType[] = [
   FlavourExtension('affine:surface-ref'),
   BlockViewExtension('affine:surface-ref', literal`affine-surface-ref`),
-  WidgetViewMapExtension('affine:surface-ref', {
-    surfaceToolbar: literal`affine-surface-ref-toolbar`,
-  }),
+  surfaceRefToolbarWidget,
 ];
 
 export const EdgelessSurfaceRefBlockSpec: ExtensionType[] = [