fix: add strategy option for portal (#8470)

toeverything · Sep 26, 2024 · 9f19e4e · 9f19e4e
1 parent 34285e8
commit 9f19e4e
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 3 deletions.
diff --git a/packages/affine/components/src/portal/helper.ts b/packages/affine/components/src/portal/helper.ts
@@ -119,6 +119,7 @@ export function createLitPortal({
   computePosition: positionConfigOrFn,
   abortController,
   closeOnClickAway = false,
+  positionStrategy = 'absolute',
   ...portalOptions
 }: AdvancedPortalOptions) {
   let positionSlot = new Slot<ComputePositionReturn>();
@@ -160,7 +161,7 @@ export function createLitPortal({
 
   const visibility = portalRoot.style.visibility;
   portalRoot.style.visibility = 'hidden';
-  portalRoot.style.position = 'absolute';
+  portalRoot.style.position = positionStrategy;
   portalRoot.style.left = '0';
   portalRoot.style.top = '0';
   portalRoot.style.zIndex = cssVar('zIndexPopover');
@@ -181,7 +182,10 @@ export function createLitPortal({
     ) {
       abortController.abort();
     }
-    computePosition(referenceElement, portalRoot, options)
+    computePosition(referenceElement, portalRoot, {
+      strategy: positionStrategy,
+      ...options,
+    })
       .then(positionReturn => {
         const { x, y } = positionReturn;
         // Use transform maybe cause overlay-mask offset issue

diff --git a/packages/affine/components/src/portal/types.ts b/packages/affine/components/src/portal/types.ts
@@ -67,6 +67,7 @@ export type AdvancedPortalOptions = Omit<
         positionSlot: Slot<ComputePositionReturn>;
         updatePortal: () => void;
       }) => Renderable);
+  positionStrategy?: 'absolute' | 'fixed';
   /**
    * See https://floating-ui.com/docs/computePosition
    */

diff --git a/packages/blocks/src/_common/components/ai-item/ai-item-list.ts b/packages/blocks/src/_common/components/ai-item/ai-item-list.ts
@@ -97,6 +97,7 @@ export class AIItemList extends WithDisposable(LitElement) {
         .abortController=${this._abortController}
       ></ai-sub-item-list>`,
       container: aiItemContainer,
+      positionStrategy: 'fixed',
       computePosition: {
         referenceElement: aiItemContainer,
         placement: 'right-start',

diff --git a/packages/presets/src/editors/page-editor.ts b/packages/presets/src/editors/page-editor.ts
@@ -42,7 +42,6 @@ export class PageEditor extends WithDisposable(ShadowlessElement) {
     .page-editor-container {
       display: block;
       height: 100%;
-      position: relative;
     }
   `;
 

diff --git a/tests/utils/actions/misc.ts b/tests/utils/actions/misc.ts
@@ -273,10 +273,18 @@ export function expectConsoleMessage(
   page.on('console', (message: ConsoleMessage) => {
     if (
       [
+        '',
+        // React devtools:
         '%cDownload the React DevTools for a better development experience: https://reactjs.org/link/react-devtools font-weight:bold',
+        // Vite:
         '[vite] connected.',
         '[vite] connecting...',
+        // Figma embed:
+        'Fullscreen: Using 4GB WASM heap',
+        // Lit:
         'Lit is in dev mode. Not recommended for production! See https://lit.dev/msg/dev-mode for more information.',
+        // Figma embed:
+        'Running frontend commit',
       ].includes(message.text())
     ) {
       ignoredLog(message);