feat(editor): add viewport element service (#10727)

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

@@ -2,5 +2,4 @@ export * from './commands.js';
 export * from './surface-ref-block.js';
 export * from './surface-ref-block-edgeless.js';
 export * from './surface-ref-spec.js';
-export * from './types.js';
 export * from './utils.js';

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

@@ -15,6 +15,7 @@ import {
   DocModeProvider,
   EditPropsStore,
   ThemeProvider,
+  ViewportElementExtension,
 } from '@blocksuite/affine-shared/services';
 import {
   matchModels,
@@ -238,7 +239,9 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
 
   private _previewDoc: Store | null = null;
 
-  private readonly _previewSpec = SpecProvider._.getSpec('preview:edgeless');
+  private readonly _previewSpec = SpecProvider._.getSpec(
+    'preview:edgeless'
+  ).extend([ViewportElementExtension('.ref-viewport')]);
 
   private _referencedModel: GfxModel | null = null;
 

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

@@ -1,3 +0,0 @@
-export interface EdgelessPreviewer {
-  editorViewportSelector: string;
-}