fix(editor): shloud get closest viewport element from editor (#12603)

Close [BS-3338](https://linear.app/affine-design/issue/BS-3338/center-peek-框选会出现奇怪的选区)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Refactor**
  - Improved the method for locating the viewport element to ensure it is found relative to a scoped host element rather than the entire document. No visible changes to user-facing features.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/shared/src/services/viewport-element-service.ts

@@ -1,5 +1,6 @@
 import { createIdentifier } from '@blocksuite/global/di';
 import { BlockSuiteError } from '@blocksuite/global/exceptions';
+import { StdIdentifier } from '@blocksuite/std';
 import type { ExtensionType } from '@blocksuite/store';
 
 import type { Viewport } from '../types';
@@ -16,9 +17,10 @@ export const ViewportElementProvider = createIdentifier<ViewportElementService>(
 export const ViewportElementExtension = (selector: string): ExtensionType => {
   return {
     setup: di => {
-      di.override(ViewportElementProvider, () => {
+      di.override(ViewportElementProvider, provider => {
         const getViewportElement = (): HTMLElement => {
-          const viewportElement = document.querySelector<HTMLElement>(selector);
+          const std = provider.get(StdIdentifier);
+          const viewportElement = std.host.closest<HTMLElement>(selector);
           if (!viewportElement) {
             throw new BlockSuiteError(
               BlockSuiteError.ErrorCode.ValueNotExists,