facebook / facebook/lexical

Bug: Floating link editor gets blurred (as if out of focus) if switches positions without closing first

Open
#4,552 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
23.9k
Forks
2.2k
Avg merge
1d 14h
Merged PRs (30d)
57

Description

If the floating link editor switches positions, it becomes blurred. This can be fixed by not having subpixels in the translate value

Lexical version: 0.11.0

## Steps To Reproduce

1. Click a link to open the link editor
2. Click another link to have the editor switch positions
3. The link editor will look blurred

Link to code example:
Can be easily reproduced in the playground: https://playground.lexical.dev/
Click a link then another one without closing the editor.

This seems to be caused by having the translate value move the editor with subpixel values (ie 823.345px).
In the file `setFloatingElemPositionForLinkEditor.ts`, rounding the values seems to fix it.
Before:
```floatingElem.style.transform = `translate(${left}px, ${top}px)`;```

After:
```floatingElem.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;```

I can create a PR with this change.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.