From 339bfdae0f0430c8bc072b294c6b596ab4057956 Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Mon, 7 Jul 2025 19:17:57 +0800
Subject: [PATCH] fix(editor): centerize iframe modal in mobile (#13073)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Close
[BS-3160](https://linear.app/affine-design/issue/BS-3160/新的-embed-输入的-sheet-没有弹起来)

#### PR Dependency Tree


* **PR #13073** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

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

## Summary by CodeRabbit

* **Bug Fixes**
* Improved popup positioning and responsiveness when using virtual
keyboards, ensuring popups remain visible and correctly placed above the
keyboard.
* Standardized how popups and overlays are created and referenced
throughout the app, reducing inconsistencies and potential display
issues.
* Enhanced stability of date picker, AI panels, and slash menu popovers
by refining how their elements are managed and updated.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../embed-iframe-block/embed-iframe-block.ts  | 43 ++++++++++++++++---
 .../affine/blocks/latex/src/latex-block.ts    |  2 +-
 .../affine/components/src/hover/controller.ts |  2 +-
 .../affine/components/src/portal/helper.ts    |  4 +-
 .../property-presets/date/cell-renderer.ts    |  4 +-
 .../latex/src/latex-node/latex-node.ts        |  2 +-
 .../slash-menu/src/slash-menu-popover.ts      |  2 +-
 .../src/blocksuite/ai/actions/doc-handler.ts  |  2 +-
 .../ai/components/ask-ai-toolbar.ts           |  2 +-
 9 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/blocksuite/affine/blocks/embed/src/embed-iframe-block/embed-iframe-block.ts b/blocksuite/affine/blocks/embed/src/embed-iframe-block/embed-iframe-block.ts
index c63d7123d5..326e5f811d 100644
--- a/blocksuite/affine/blocks/embed/src/embed-iframe-block/embed-iframe-block.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-iframe-block/embed-iframe-block.ts
@@ -11,6 +11,7 @@ import {
   type IframeOptions,
   LinkPreviewServiceIdentifier,
   NotificationProvider,
+  VirtualKeyboardProvider,
 } from '@blocksuite/affine-shared/services';
 import { matchModels } from '@blocksuite/affine-shared/utils';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
@@ -213,9 +214,33 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
       this._linkInputAbortController.abort();
     }
 
+    const keyboard = this.host.std.getOptional(VirtualKeyboardProvider);
+    const computePosition = keyboard
+      ? {
+          referenceElement: document.body,
+          placement: 'top' as const,
+          middleware: [
+            offset(({ rects }) => ({
+              mainAxis:
+                -rects.floating.height -
+                (window.innerHeight -
+                  rects.floating.height -
+                  keyboard.height$.value) /
+                  2,
+            })),
+          ],
+          autoUpdate: { animationFrame: true },
+        }
+      : {
+          referenceElement: this._blockContainer,
+          placement: 'bottom' as const,
+          middleware: [flip(), offset(LINK_CREATE_POPUP_OFFSET), shift()],
+          autoUpdate: { animationFrame: true },
+        };
+
     this._linkInputAbortController = new AbortController();
 
-    createLitPortal({
+    const { update } = createLitPortal({
       template: html`<embed-iframe-link-input-popup
         .model=${this.model}
         .abortController=${this._linkInputAbortController}
@@ -224,15 +249,19 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
         .options=${options}
       ></embed-iframe-link-input-popup>`,
       container: document.body,
-      computePosition: {
-        referenceElement: this._blockContainer,
-        placement: 'bottom',
-        middleware: [flip(), offset(LINK_CREATE_POPUP_OFFSET), shift()],
-        autoUpdate: { animationFrame: true },
-      },
+      computePosition,
       abortController: this._linkInputAbortController,
       closeOnClickAway: true,
     });
+
+    if (keyboard) {
+      this._linkInputAbortController.signal.addEventListener(
+        'abort',
+        keyboard.height$.subscribe(() => {
+          update();
+        })
+      );
+    }
   };
 
   /**
diff --git a/blocksuite/affine/blocks/latex/src/latex-block.ts b/blocksuite/affine/blocks/latex/src/latex-block.ts
index a5a1275870..88d4f33965 100644
--- a/blocksuite/affine/blocks/latex/src/latex-block.ts
+++ b/blocksuite/affine/blocks/latex/src/latex-block.ts
@@ -116,7 +116,7 @@ export class LatexBlockComponent extends CaptionedBlockComponent<LatexBlockModel
 
     this.selection.setGroup('note', []);
 
-    const portal = createLitPortal({
+    const { portal } = createLitPortal({
       template: html`<latex-editor-menu
         .std=${this.std}
         .latexSignal=${this.model.props.latex$}
diff --git a/blocksuite/affine/components/src/hover/controller.ts b/blocksuite/affine/components/src/hover/controller.ts
index 4cf959d1f8..3e9afcf00f 100644
--- a/blocksuite/affine/components/src/hover/controller.ts
+++ b/blocksuite/affine/components/src/hover/controller.ts
@@ -179,7 +179,7 @@ export class HoverController implements ReactiveController {
       this._portal = createLitPortal({
         ...portalOptions,
         abortController: this._abortController,
-      });
+      }).portal;
 
       const transition = this._hoverOptions.transition;
       if (transition) {
diff --git a/blocksuite/affine/components/src/portal/helper.ts b/blocksuite/affine/components/src/portal/helper.ts
index 2244fd4653..f99579ca7e 100644
--- a/blocksuite/affine/components/src/portal/helper.ts
+++ b/blocksuite/affine/components/src/portal/helper.ts
@@ -161,7 +161,7 @@ export function createLitPortal({
   }
 
   if (!positionConfigOrFn) {
-    return portalRoot;
+    return { portal: portalRoot, update: () => {} };
   }
 
   const visibility = portalRoot.style.visibility;
@@ -221,5 +221,5 @@ export function createLitPortal({
     });
   }
 
-  return portalRoot;
+  return { portal: portalRoot, update };
 }
diff --git a/blocksuite/affine/data-view/src/property-presets/date/cell-renderer.ts b/blocksuite/affine/data-view/src/property-presets/date/cell-renderer.ts
index 79d3493305..11c170e267 100644
--- a/blocksuite/affine/data-view/src/property-presets/date/cell-renderer.ts
+++ b/blocksuite/affine/data-view/src/property-presets/date/cell-renderer.ts
@@ -78,7 +78,7 @@ export class DateCell extends BaseCellRenderer<number, number> {
         },
       });
     } else {
-      const root = createLitPortal({
+      const { portal } = createLitPortal({
         abortController,
         closeOnClickAway: true,
         computePosition: {
@@ -107,7 +107,7 @@ export class DateCell extends BaseCellRenderer<number, number> {
       //       for now the slide-layout-modal's z-index is `1001`
       //       the z-index of popover should be higher than it
       // root.style.zIndex = 'var(--affine-z-index-popover)';
-      root.style.zIndex = '1002';
+      portal.style.zIndex = '1002';
     }
   };
 
diff --git a/blocksuite/affine/inlines/latex/src/latex-node/latex-node.ts b/blocksuite/affine/inlines/latex/src/latex-node/latex-node.ts
index 5ddcd8833f..ad419c5138 100644
--- a/blocksuite/affine/inlines/latex/src/latex-node/latex-node.ts
+++ b/blocksuite/affine/inlines/latex/src/latex-node/latex-node.ts
@@ -190,7 +190,7 @@ export class AffineLatexNode extends SignalWatcher(
 
     blockComponent.selection.setGroup('note', []);
 
-    const portal = createLitPortal({
+    const { portal } = createLitPortal({
       template: html`<latex-editor-menu
         .std=${this.std}
         .latexSignal=${this.latexEditorSignal}
diff --git a/blocksuite/affine/widgets/slash-menu/src/slash-menu-popover.ts b/blocksuite/affine/widgets/slash-menu/src/slash-menu-popover.ts
index 48b8504753..f9ebc4976d 100644
--- a/blocksuite/affine/widgets/slash-menu/src/slash-menu-popover.ts
+++ b/blocksuite/affine/widgets/slash-menu/src/slash-menu-popover.ts
@@ -378,7 +378,7 @@ export class InnerSlashMenu extends WithDisposable(LitElement) {
       this._closeSubMenu();
     });
 
-    const subMenuElement = createLitPortal({
+    const { portal: subMenuElement } = createLitPortal({
       shadowDom: false,
       template: html`<inner-slash-menu
         .context=${this.context}
diff --git a/packages/frontend/core/src/blocksuite/ai/actions/doc-handler.ts b/packages/frontend/core/src/blocksuite/ai/actions/doc-handler.ts
index 8066afbbe0..c6c3932ae7 100644
--- a/packages/frontend/core/src/blocksuite/ai/actions/doc-handler.ts
+++ b/packages/frontend/core/src/blocksuite/ai/actions/doc-handler.ts
@@ -305,6 +305,6 @@ export function handleInlineAskAIAction(
       },
       abortController: abortController,
       closeOnClickAway: true,
-    });
+    }).portal;
   }, 0);
 }
diff --git a/packages/frontend/core/src/blocksuite/ai/components/ask-ai-toolbar.ts b/packages/frontend/core/src/blocksuite/ai/components/ask-ai-toolbar.ts
index 70e03334b4..5def982cd0 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ask-ai-toolbar.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ask-ai-toolbar.ts
@@ -65,7 +65,7 @@ export class AskAIToolbarButton extends WithDisposable(LitElement) {
       },
       abortController: this._abortController,
       closeOnClickAway: true,
-    });
+    }).portal;
   };
 
   private readonly _generateAnswer: AffineAIPanelWidgetConfig['generateAnswer'] =