Bug: Floating Link Editor: If setting edit mode, clicking outside and opening a different link, edit mode is still active with previous link
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 23.9k
- Forks
- 2.2k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 61
Description
Floating link editor will retain edit mode === true and it's currently edited link state, as users click different links.
Lexical version: 0.11.0
## Steps To Reproduce
1. Open the floating editor link for a given link
2. Set edit mode to true, by clicking the edit button
3. Click outside closing the floating link editor, so that it closes
4. Click on a different link
5. The floating link editor will open with edit mode set already set to true and it will show the input that was present when editing mode was set to true the last time (the previous link)
Link to code example:
This can easily be reproduced in the playground: https://playground.lexical.dev/
Just click any of the links, start editing, and then click any other link.
Within the` FloatingLinkEditorPlugin.tsx` file, I suppose just moving the line
`setEditMode(false)`, so that it runs every time the editor switches positions would fix it
Before:
```
if (
selection !== null &&
nativeSelection !== null &&
rootElement !== null &&
rootElement.contains(nativeSelection.anchorNode) &&
editor.isEditable()
) {
const domRect: DOMRect | undefined =
nativeSelection.focusNode?.parentElement?.getBoundingClientRect();
if (domRect) {
domRect.y += 40;
setFloatingElemPositionForLinkEditor(domRect, editorElem, anchorElem);
}
setLastSelection(selection);
} else if (!activeElement || activeElement.className !== 'link-input') {
if (rootElement !== null) {
setFloatingElemPositionForLinkEditor(null, editorElem, anchorElem);
}
setLastSelection(null);
setEditMode(false);
setLinkUrl('');
}
return true;
```
After:
```
if (
selection !== null &&
nativeSelection !== null &&
rootElement !== null &&
rootElement.contains(nativeSelection.anchorNode) &&
editor.isEditable()
) {
const domRect: DOMRect | undefined =
nativeSelection.focusNode?.parentElement?.getBoundingClientRect();
if (domRect) {
domRect.y += 40;
setFloatingElemPositionForLinkEditor(domRect, editorElem, anchorElem);
}
setLastSelection(selection);
} else if (!activeElement || activeElement.className !== 'link-input') {
if (rootElement !== null) {
setFloatingElemPositionForLinkEditor(null, editorElem, anchorElem);
}
setLastSelection(null);
setLinkUrl('');
}
setEditMode(false); // <== setEditorMode got moved here so that it runs when opening setting a new position
return true;
```
It seems to fix it locally, but I'm not sure if there might be other possible issues to take into account.
If this is all there is to it, I can create a PR to fix it.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in FloatingLinkEditorPlugin.tsx and reproduce the sequence in the Lexical playground: open one link, enter edit mode, close the editor, then open another link. Inspect where the floating editor changes position and resets state. Done means opening a different link no longer preserves edit mode or the previous link's input.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100