Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-26 10:45:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
fix AF-2316
This commit is contained in:
pengx17
2025-04-03 05:11:46 +00:00
parent 9206145a48
commit a4c76ff485
4 changed files with 24 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
blocksuite/affine/inlines/link/src/link-node/link-popup/link-popup.ts
View File

@@ -7,16 +7,20 @@ import {
} from '@blocksuite/affine-shared/utils'; } from '@blocksuite/affine-shared/utils';
import { WithDisposable } from '@blocksuite/global/lit'; import { WithDisposable } from '@blocksuite/global/lit';
import { DoneIcon } from '@blocksuite/icons/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 type { InlineRange } from '@blocksuite/std/inline';
import { computePosition, inline, offset, shift } from '@floating-ui/dom'; 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 { property, query } from 'lit/decorators.js';
import { choose } from 'lit/directives/choose.js'; import { choose } from 'lit/directives/choose.js';
import { linkPopupStyle } from './styles'; import { linkPopupStyle } from './styles';
export class LinkPopup extends WithDisposable(LitElement) { export class LinkPopup extends WithDisposable(ShadowlessElement) {
static override styles = linkPopupStyle; static override styles = linkPopupStyle;
private _bodyOverflowStyle = ''; private _bodyOverflowStyle = '';
@@ -240,8 +244,13 @@ export class LinkPopup extends WithDisposable(LitElement) {
} }
const mockSelection = document.createElement('div'); const mockSelection = document.createElement('div');
mockSelection.classList.add('mock-selection'); 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.width = `${domRect.width}px`;
mockSelection.style.height = `${domRect.height}px`; mockSelection.style.height = `${domRect.height}px`;

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

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

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

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

2
blocksuite/affine/inlines/reference/src/reference-node/reference-popup/reference-popup.ts
View File

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