facebook / facebook/lexical

Bug: Floating Link Editor: If setting edit mode, clicking outside and opening a different link, edit mode is still active with previous link

Open
#4,551 0 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.