Skip to content

fix(link-popover): mount external popovers outside overflow:hidden container (SD-2148) #2308

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
caio-pizzol merged 2 commits into from
Mar 5, 2026
Merged

fix(link-popover): mount external popovers outside overflow:hidden container (SD-2148) #2308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
00e1f52
fix(link-popover): mount external popovers outside overflow:hidden co…
caio-pizzol Mar 5, 2026
d79f551
test(link-popover): update test DOM to match real hierarchy
caio-pizzol Mar 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 15 additions & 10 deletions packages/super-editor/src/components/link-click/LinkClickHandler.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -981,19 +981,23 @@ describe('LinkClickHandler', () => {
// ─── External type (framework-agnostic) ───────────────────────────────

describe('external type', () => {
let editorContainer;
let editorWrapper;

beforeEach(() => {
// External popovers need a parent container to mount into.
// Mirrors the real DOM: .super-editor > surface
// Mirrors the real DOM: .super-editor-container > .super-editor > surface
editorContainer = document.createElement('div');
editorContainer.classList.add('super-editor-container');
editorWrapper = document.createElement('div');
editorWrapper.classList.add('super-editor');
editorContainer.appendChild(editorWrapper);
editorWrapper.appendChild(mockSurfaceElement);
document.body.appendChild(editorWrapper);
document.body.appendChild(editorContainer);
});

afterEach(() => {
editorWrapper.remove();
editorContainer.remove();
});

it('should call render with container, closePopover, editor, and href', async () => {
Expand All @@ -1019,7 +1023,7 @@ describe('LinkClickHandler', () => {
expect(ctx.href).toBe('https://example.com');
});

it('should append a positioned container to the editor wrapper', async () => {
it('should append a positioned container to .super-editor-container (not .super-editor)', async () => {
const renderFn = vi.fn();
const resolver = vi.fn().mockReturnValue({ type: 'external', render: renderFn });

Expand All @@ -1035,7 +1039,8 @@ describe('LinkClickHandler', () => {
await dispatchLinkClick(mockSurfaceElement);

const container = renderFn.mock.calls[0][0].container;
expect(container.parentElement).toBe(editorWrapper);
// Must mount to .super-editor-container (not .super-editor) to avoid overflow:hidden clipping
expect(container.parentElement).toBe(editorContainer);
expect(container.classList.contains('sd-external-link-popover')).toBe(true);
expect(container.style.position).toBe('absolute');
expect(container.style.left).toBe('150px');
Expand All @@ -1060,7 +1065,7 @@ describe('LinkClickHandler', () => {

const ctx = renderFn.mock.calls[0][0];
const container = ctx.container;
expect(container.parentElement).toBe(editorWrapper);
expect(container.parentElement).toBe(editorContainer);

// Close the external popover
ctx.closePopover();
Expand All @@ -1085,7 +1090,7 @@ describe('LinkClickHandler', () => {
await dispatchLinkClick(mockSurfaceElement);

const container = renderFn.mock.calls[0][0].container;
expect(container.parentElement).toBe(editorWrapper);
expect(container.parentElement).toBe(editorContainer);

renderFn.mock.calls[0][0].closePopover();
expect(container.parentElement).toBeNull();
Expand All @@ -1108,7 +1113,7 @@ describe('LinkClickHandler', () => {
await dispatchLinkClick(mockSurfaceElement);

const container = renderFn.mock.calls[0][0].container;
expect(container.parentElement).toBe(editorWrapper);
expect(container.parentElement).toBe(editorContainer);

document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));

Expand All @@ -1133,7 +1138,7 @@ describe('LinkClickHandler', () => {
await dispatchLinkClick(mockSurfaceElement);

const container = renderFn.mock.calls[0][0].container;
expect(container.parentElement).toBe(editorWrapper);
expect(container.parentElement).toBe(editorContainer);

// Click outside the container
document.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
Expand Down Expand Up @@ -1216,7 +1221,7 @@ describe('LinkClickHandler', () => {
});

// Container should have been removed (not left in DOM)
const orphanedContainers = editorWrapper.querySelectorAll('[style*="position: absolute"]');
const orphanedContainers = editorContainer.querySelectorAll('[style*="position: absolute"]');
expect(orphanedContainers.length).toBe(0);

// Should fallback to default popover
Expand Down
6 changes: 4 additions & 2 deletions packages/super-editor/src/components/link-click/LinkClickHandler.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,8 +169,10 @@ const openExternalPopover = (resolution, position, detail, surface) => {
container.addEventListener('pointerdown', (e) => e.stopPropagation());
container.addEventListener('click', (e) => e.stopPropagation());

// Mount into the same coordinate-space parent that GenericPopover uses
const mountTarget = surface.closest('.super-editor') ?? surface.parentElement;
// Mount into the same coordinate-space parent that GenericPopover uses.
// GenericPopover renders as a child of .super-editor-container (outside .super-editor).
// We must mount here too, because .super-editor has overflow:hidden which clips popovers.
const mountTarget = surface.closest('.super-editor-container') ?? surface.parentElement;
Comment thread
caio-pizzol marked this conversation as resolved.
if (!mountTarget) return;
mountTarget.appendChild(container);

Expand Down
Loading