Bug: Selection bug when using multiple editors (vanilla JS)
- 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)

step 7

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
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