facebook / facebook/lexical

Bug: Press Ctrl to open the Link in Playground

Open
#5,204 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
23.9k
Forks
2.2k
Avg merge
1d 16h
Merged PRs (30d)
61

Description

Lexical version: [v0.12.2](https://github.com/facebook/lexical/releases/tag/v.0.12.2)

## Steps To Reproduce

1. Press the `Ctrl` or `Meta` key and click the link in Playground can open the link at new Tab
2. But there are two weird situation:

* the first weird case: if Press the `Ctrl` or `Meta` (not click) to select a range of text, when the focus node is inside the Link, then the link will open immediately
* the second weird case: if select a range of text and the focus node is inside the Link, then Press the `Ctrl` or `Meta` to click any part of the selection, the link can open (it also work without click the link)

https://github.com/facebook/lexical/assets/40909550/cfd879fd-c55c-4235-9c2b-d14c88ffd08e

Link to code example:

## The current behavior
two weird situation to open the link:

* Press the `Ctrl` or `Meta` (not click) to select a range of text, if the focus node is inside the Link, then the link will open immediately
* if select a range of text, and the focus node is inside the Link, then Press the `Ctrl` or `Meta` to click any part of the selected text, but not the part of the link can also open the link

## The expected behavior
open the link only when clicking the link (text) with the `Ctrl` or `Meta` key pressed

## The Solution (maybe)
I dive into the source code and try to fingure out what causes this problem

and find some [relative codes](https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/FloatingLinkEditorPlugin/index.tsx#L303-L316) at [FloatingLinkEditorPlugin](https://github.com/facebook/lexical/tree/main/packages/lexical-playground/src/plugins/FloatingLinkEditorPlugin) for Playground

```tsx
editor.registerCommand(
CLICK_COMMAND,
(payload) => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
const node = getSelectedNode(selection);
const linkNode = $findMatchingParent(node, $isLinkNode);
if ($isLinkNode(linkNode) && (payload.metaKey || payload.ctrlKey)) {
window.open(linkNode.getURL(), '_blank');
return true;
}
}
return false;
},
COMMAND_PRIORITY_LOW,
),
```

it use the method `getSelectedNode(selection)` to get the `node` from `selection` and then check any LinkNode as its parent, so if the selection `node` is inside a link node, then it will trigger to open the link (when press the `Ctrl` or `Meta` key)

I think we should test if the selection is collapsed first to make sure that the user click the link, but not selection a range of text

```diff
editor.registerCommand(
CLICK_COMMAND,
(payload) => {
const selection = $getSelection();
- if ($isRangeSelection(selection)) {
+ if($isRangeSelection(selection) && selection.isCollapsed()){
- const node = getSelectedNode(selection);
+ const node = selection.anchor.getNode();
const linkNode = $findMatchingParent(node, $isLinkNode);
if ($isLinkNode(linkNode) && (payload.metaKey || payload.ctrlKey)) {
window.open(linkNode.getURL(), '_blank');
return true;
}
}
return false;
},
COMMAND_PRIORITY_LOW,
),
```

Contributor guide

Open the contributing guide

Research direction

Start in packages/lexical-playground/src/plugins/FloatingLinkEditorPlugin/index.tsx and inspect the CLICK_COMMAND handler around the linked lines, then reproduce both selection cases in Playground with Ctrl or Meta. Done means a link opens in a new tab only when the link text itself is clicked with the modifier pressed, not while selecting text or clicking elsewhere in a selection.

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
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.