feat(core): support copy as image in electron app (#8939)

Close issue [AF-1785](https://linear.app/affine-design/issue/AF-1785).

### What changed?
- Support copy as image in electron app：
  -  Select the whole mindmap if any of the mindmap nodes is selected.
  -  Hide unselected overlap elements before taking a snapshot.
  -  Fit the selected elements to the screen.
  -  Add CSS style to hide irrelevant dom nodes, like widgets, whiteboard background and so on.
     - Due to the usage of Shadow Dom in our code, not all node styles can be controlled. Thus this PR use `-2px` padding for `affine:frame` snapshots.
  - Using electron `capturePage` API to take a snapshot of selected elements.

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/sJGviKxfE3Ap685cl5bj/c1b7b772-ddf8-4a85-b670-e96af7bd5cc0.mov">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/sJGviKxfE3Ap685cl5bj/c1b7b772-ddf8-4a85-b670-e96af7bd5cc0.mov">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/c1b7b772-ddf8-4a85-b670-e96af7bd5cc0.mov">录屏2024-11-27 16.11.03.mov</video>

packages/frontend/apps/electron/src/main/ui/handlers.ts

@@ -1,4 +1,4 @@
-import { app, nativeTheme, shell } from 'electron';
+import { app, clipboard, nativeImage, nativeTheme, shell } from 'electron';
 import { getLinkPreview } from 'link-preview-js';
 
 import { isMacOS } from '../../shared/utils';
@@ -232,4 +232,23 @@ export const uiHandlers = {
       e.sender.session.setSpellCheckerLanguages([language, 'en-US']);
     }
   },
+  captureArea: async (e, { x, y, width, height }: Electron.Rectangle) => {
+    const image = await e.sender.capturePage({
+      x: Math.floor(x),
+      y: Math.floor(y),
+      width: Math.floor(width),
+      height: Math.floor(height),
+    });
+
+    if (image.isEmpty()) {
+      throw new Error('Image is empty or invalid');
+    }
+
+    const buffer = image.toPNG();
+    if (!buffer || !buffer.length) {
+      throw new Error('Failed to generate PNG buffer from image');
+    }
+
+    clipboard.writeImage(nativeImage.createFromBuffer(buffer));
+  },
 } satisfies NamespaceHandlers;