fix(editor): missing copy as png implementation (#11716)

packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/copy-as-image.ts

@@ -104,18 +104,7 @@ function withDescendantElements(elements: GfxModel[]) {
 
 const MARGIN = 20;
 
-export function createCopyAsPngMenuItem(framework: FrameworkProvider) {
+export function copyAsImage(std: BlockStdScope) {
-  return {
-    icon: CopyAsImgaeIcon({ width: '20', height: '20' }),
-    label: 'Copy as Image',
-    type: 'copy-as-image',
-    when: (ctx: MenuContext) => {
-      if (ctx.isEmpty()) return false;
-      const { editor } = framework.get(EditorService);
-      const mode = editor.mode$.value;
-      return mode === 'edgeless';
-    },
-    action: async (ctx: MenuContext) => {
   if (!apis) {
     notify.error({
       title: I18n.t('com.affine.copy.asImage.notAvailable.title'),
@@ -130,7 +119,7 @@ export function createCopyAsPngMenuItem(framework: FrameworkProvider) {
     return;
   }
 
-      const gfx = ctx.host.std.get(GfxControllerIdentifier);
+  const gfx = std.get(GfxControllerIdentifier);
 
   let selected = gfx.selection.selectedElements;
   // select mindmap if root node selected
@@ -171,7 +160,7 @@ export function createCopyAsPngMenuItem(framework: FrameworkProvider) {
     const isSelected = elements.includes(ele);
     return !isSelected && isOverlap(exBound, exEleBound);
   });
-      hideEdgelessElements(overlapElements, ctx.host.std);
+  hideEdgelessElements(overlapElements, std);
 
   // add css style
   const styleEle = document.createElement('style');
@@ -211,17 +200,33 @@ export function createCopyAsPngMenuItem(framework: FrameworkProvider) {
         })
         .finally(() => {
           styleEle.remove();
-              showEdgelessElements(overlapElements, ctx.host.std);
+          showEdgelessElements(overlapElements, std);
         });
     } catch (e) {
       styleEle.remove();
-          showEdgelessElements(overlapElements, ctx.host.std);
+      showEdgelessElements(overlapElements, std);
       notify.error({
         title: I18n.t('com.affine.copy.asImage.failed'),
         message: String(e),
       });
     }
   }, 100);
+}
+
+export function createCopyAsPngMenuItem(framework: FrameworkProvider) {
+  return {
+    icon: CopyAsImgaeIcon({ width: '20', height: '20' }),
+    label: 'Copy as Image',
+    type: 'copy-as-image',
+    when: (ctx: MenuContext) => {
+      if (ctx.isEmpty()) return false;
+      const { editor } = framework.get(EditorService);
+      const mode = editor.mode$.value;
+      return mode === 'edgeless';
+    },
+    action: (ctx: MenuContext) => {
+      const std = ctx.std;
+      return copyAsImage(std);
     },
   };
 }

packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts

@@ -88,7 +88,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { openDocActions } from '../../open-doc';
-import { createCopyAsPngMenuItem } from './copy-as-image';
+import { copyAsImage, createCopyAsPngMenuItem } from './copy-as-image';
 
 export function createToolbarMoreMenuConfig(framework: FrameworkProvider) {
   return {
@@ -224,6 +224,9 @@ function createToolbarMoreMenuConfigV2(baseUrl?: string) {
               !flags.isHovering() &&
               isEdgelessMode &&
               gfx.selection.selectedElements.length > 0,
+            run: ({ std }) => {
+              copyAsImage(std);
+            },
           },
           {
             id: 'copy-link-to-block',