feat: center peek view (#7073)

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/7380c06e-880e-424a-9204-8cfb5e924978.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/7380c06e-880e-424a-9204-8cfb5e924978.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/7380c06e-880e-424a-9204-8cfb5e924978.mp4">Kapture 2024-05-30 at 19.42.46.mp4</video>

scripts/setup/vi-mock.ts

@@ -0,0 +1,37 @@
+import { vi } from 'vitest';
+
+vi.mock('lottie-web', () => ({
+  default: {},
+}));
+
+vi.mock('@blocksuite/presets', () => ({
+  AffineEditorContainer: vi.fn(),
+  BiDirectionalLinkPanel: vi.fn(),
+  DocMetaTags: vi.fn(),
+  DocTitle: vi.fn(),
+  EdgelessEditor: vi.fn(),
+  PageEditor: vi.fn(),
+  AIProvider: {
+    slots: new Proxy(
+      {},
+      {
+        get: () => ({
+          on: vi.fn(),
+        }),
+      }
+    ),
+    provide: vi.fn(),
+  },
+  AIEdgelessRootBlockSpec: {},
+  AIParagraphBlockSpec: {},
+  AIPageRootBlockSpec: {},
+}));
+
+if (typeof window !== 'undefined' && HTMLCanvasElement) {
+  // @ts-expect-error
+  HTMLCanvasElement.prototype.getContext = () => {
+    return {
+      fillRect: vi.fn(),
+    };
+  };
+}