From a4c76ff48543addf5bf499e2ef680d96c558ce2e Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Thu, 3 Apr 2025 05:11:46 +0000
Subject: [PATCH] fix(editor): link popover ui in modal (#11415)

fix AF-2316
---
 .../src/link-node/link-popup/link-popup.ts    | 19 ++++++++++++++-----
 .../link/src/link-node/link-popup/styles.ts   |  8 ++++++--
 .../link-node/link-popup/toggle-link-popup.ts |  5 ++++-
 .../reference-popup/reference-popup.ts        |  2 --
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/blocksuite/affine/inlines/link/src/link-node/link-popup/link-popup.ts b/blocksuite/affine/inlines/link/src/link-node/link-popup/link-popup.ts
index aabee5a43..5bf30119f 100644
--- a/blocksuite/affine/inlines/link/src/link-node/link-popup/link-popup.ts
+++ b/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`;
 
diff --git a/blocksuite/affine/inlines/link/src/link-node/link-popup/styles.ts b/blocksuite/affine/inlines/link/src/link-node/link-popup/styles.ts
index e292d505d..68e64cc80 100644
--- a/blocksuite/affine/inlines/link/src/link-node/link-popup/styles.ts
+++ b/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;
diff --git a/blocksuite/affine/inlines/link/src/link-node/link-popup/toggle-link-popup.ts b/blocksuite/affine/inlines/link/src/link-node/link-popup/toggle-link-popup.ts
index 2835be8f9..d04d5e3c1 100644
--- a/blocksuite/affine/inlines/link/src/link-node/link-popup/toggle-link-popup.ts
+++ b/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;
 }
diff --git a/blocksuite/affine/inlines/reference/src/reference-node/reference-popup/reference-popup.ts b/blocksuite/affine/inlines/reference/src/reference-node/reference-popup/reference-popup.ts
index 48a7f3f4c..5c21a24d5 100644
--- a/blocksuite/affine/inlines/reference/src/reference-node/reference-popup/reference-popup.ts
+++ b/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;