fix(editor): link popover ui in modal (#11415)

fix AF-2316

blocksuite/affine/inlines/link/src/link-node/link-popup/link-popup.ts

@@ -7,16 +7,20 @@ import {
 } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/lit';
 import { DoneIcon } from '@blocksuite/icons/lit';
-import { type BlockStdScope, TextSelection } from '@blocksuite/std';
+import {
+  type BlockStdScope,
+  ShadowlessElement,
+  TextSelection,
+} from '@blocksuite/std';
 import type { InlineRange } from '@blocksuite/std/inline';
 import { computePosition, inline, offset, shift } from '@floating-ui/dom';
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
 
 import { linkPopupStyle } from './styles';
 
-export class LinkPopup extends WithDisposable(LitElement) {
+export class LinkPopup extends WithDisposable(ShadowlessElement) {
   static override styles = linkPopupStyle;
 
   private _bodyOverflowStyle = '';
@@ -240,8 +244,13 @@ export class LinkPopup extends WithDisposable(LitElement) {
       }
       const mockSelection = document.createElement('div');
       mockSelection.classList.add('mock-selection');
-      mockSelection.style.left = `${domRect.left}px`;
-      mockSelection.style.top = `${domRect.top}px`;
+
+      // Get the container's bounding rect to account for its position
+      const containerRect = this.mockSelectionContainer.getBoundingClientRect();
+
+      // Adjust the position by subtracting the container's offset
+      mockSelection.style.left = `${domRect.left - containerRect.left}px`;
+      mockSelection.style.top = `${domRect.top - containerRect.top}px`;
       mockSelection.style.width = `${domRect.width}px`;
       mockSelection.style.height = `${domRect.height}px`;
 

blocksuite/affine/inlines/link/src/link-node/link-popup/styles.ts

@@ -2,7 +2,6 @@ import { fontXSStyle, panelBaseStyle } from '@blocksuite/affine-shared/styles';
 import { css } from 'lit';
 
 const editLinkStyle = css`
-  ${panelBaseStyle('.affine-link-edit-popover')}
   .affine-link-edit-popover {
     display: grid;
     grid-template-columns: auto auto;
@@ -116,7 +115,8 @@ export const linkPopupStyle = css`
     }
   }
 
-  .overlay-mask {
+  .overlay-mask,
+  .mock-selection-container {
     position: fixed;
     top: 0;
     left: 0;
@@ -125,6 +125,10 @@ export const linkPopupStyle = css`
     z-index: var(--affine-z-index-popover);
   }
 
+  .mock-selection-container {
+    pointer-events: none;
+  }
+
   ${panelBaseStyle('.affine-link-popover.create')}
   .affine-link-popover.create {
     gap: 12px;

blocksuite/affine/inlines/link/src/link-node/link-popup/toggle-link-popup.ts

@@ -18,7 +18,10 @@ export function toggleLinkPopup(
   popup.targetInlineRange = targetInlineRange;
   popup.abortController = abortController;
 
-  document.body.append(popup);
+  const root =
+    inlineEditor.rootElement?.closest('editor-host')?.parentElement ??
+    document.body;
+  root.append(popup);
 
   return popup;
 }

blocksuite/affine/inlines/reference/src/reference-node/reference-popup/reference-popup.ts

@@ -40,8 +40,6 @@ export class ReferencePopup extends SignalWatcher(
     .popover-container {
       position: absolute;
       display: flex;
-      width: 321px;
-      height: 37px;
       gap: 8px;
       box-sizing: content-box;
       justify-content: space-between;