refactor(editor): inner toolbar surface-ref block with extension (#11246)

This PR refactor `surface-ref` toolbar with `ToolbarExtension`

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

@@ -1,3 +1,10 @@
+import type { SurfaceBlockComponent } from '@blocksuite/affine-block-surface';
+import { ExportManager } from '@blocksuite/affine-block-surface';
+import type { SurfaceRefBlockComponent } from '@blocksuite/affine-block-surface-ref';
+import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
+import { BlockSuiteError } from '@blocksuite/global/exceptions';
+import { Bound } from '@blocksuite/global/gfx';
+import { assertType } from '@blocksuite/global/utils';
 import { html } from 'lit';
 
 export const noContentPlaceholder = html`
@@ -97,3 +104,43 @@ export const noContentPlaceholder = html`
     />
   </svg>
 `;
+
+export const surfaceRefToBlob = async (
+  surfaceRefBlock: SurfaceRefBlockComponent
+): Promise<Blob | null> => {
+  const { referenceModel, previewEditor } = surfaceRefBlock;
+  if (!referenceModel || !previewEditor) return null;
+
+  const exportManager = previewEditor.std.get(ExportManager);
+  const gfx = previewEditor.std.get(GfxControllerIdentifier);
+
+  const { surface } = gfx;
+  if (!surface) return null;
+  const surfaceBlock = previewEditor.std.view.getBlock(surface.id);
+  if (!surfaceBlock) return null;
+  assertType<SurfaceBlockComponent>(surfaceBlock);
+
+  const canvas = await exportManager.edgelessToCanvas(
+    surfaceBlock.renderer,
+    Bound.deserialize(referenceModel.xywh),
+    gfx,
+    undefined,
+    undefined,
+    { zoom: surfaceBlock.renderer.viewport.zoom }
+  );
+
+  if (!canvas) {
+    throw new BlockSuiteError(
+      BlockSuiteError.ErrorCode.ValueNotExists,
+      'Failed to export edgeless to canvas'
+    );
+  }
+
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(blob => (blob ? resolve(blob) : reject(null)), 'image/png');
+  });
+};
+
+export const writeImageBlobToClipboard = async (blob: Blob) => {
+  await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
+};