facebook / facebook/lexical

Bug: Selection bug when using multiple editors (vanilla JS)

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

Description

Lexical version: 0.12.6

## Steps To Reproduce

1. click on (focus) the editable container inside the iframe
2. type something
3. select all the content inside
4. click on the 'change font' button
5. click on the middle of the text that you typed on the point 2
6. type more text
7. [the behavior should be what is expected: everything with the same font] (image 1)
8. change the code: on line 12 of the index.js file, change the constant `nEditors` to `2`
9. run the code
10. repeat steps 1 to 6 on both editors
11. [the characters that you typed after the font change have a different font] (image2)

![image](https://github.com/facebook/lexical/assets/12272729/7ce0912d-8aed-4e28-9aad-f1a061f6d4ac)
step 7

![image](https://github.com/facebook/lexical/assets/12272729/4a8d14e6-ae85-44bf-8ad8-40c3a04bf33d)
step 11

[Link to code example](https://codesandbox.io/p/sandbox/lexical-rich-text-vanilla-forked-63ykgp?file=%2Fsrc%2Findex.js%3A12%2C20&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clr97m3aw0006356k1u717mx5%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clr97m3av0002356k23j7kmtf%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clr97m3aw0003356kscmxvqpp%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clr97m3aw0005356kdboq1y5w%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clr97m3av0002356k23j7kmtf%2522%253A%257B%2522id%2522%253A%2522clr97m3av0002356k23j7kmtf%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clr98kuzn0002356q6m6umscm%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A12%252C%2522startColumn%2522%253A20%252C%2522endLineNumber%2522%253A12%252C%2522endColumn%2522%253A20%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clr98kuzn0002356q6m6umscm%2522%257D%252C%2522clr97m3aw0005356kdboq1y5w%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clr97m3aw0004356kk549e4qc%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clr97m3aw0005356kdboq1y5w%2522%252C%2522activeTabId%2522%253A%2522clr97m3aw0004356kk549e4qc%2522%257D%252C%2522clr97m3aw0003356kscmxvqpp%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clr97m3aw0003356kscmxvqpp%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)

## The current behavior

When I have two editors (using iframes), and I change a selection's font family with $patchStyleText, change the cursor to the middle of the text, and start typing again, it won't identify the correct node and just inserts a new node (unstyled), so the fonts of the (now 3) nodes won't match.

## The expected behavior

(like it's behaving when I have only one editor)
I change a selection's font family with $patchStyleText, change the cursor to the middle of the text, and start typing again, it would identify the node I'm typing at, which has a 'non-default' font family and it would just add what I'm typing inside, so it would just be one single node with the font family I set.

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox, especially src/index.js line 12, and reproduce the selection and font-family behavior with nEditors set to 1 and 2 inside iframes. Compare typing after applying $patchStyleText; done means text inserted in the styled selection keeps the selected font family in both editors.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.