facebook / facebook/lexical

Bug: Reverts to previos styles when you click in an empty editor

Open
#4,908 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
23.9k
Forks
2.2k
Avg merge
1d 14h
Merged PRs (30d)
55

Description

When you change a style when the text field is empty, and click into the editor box instead of just starting to type, the styles are reverted to the initial styles.

Lexical version: v0.12.0

## Steps To Reproduce

1. Go to the Lexical Playground and remove all the text
2. Change some styles
3. Click in the editor box (before typing)
4. Now, the styles are reverted to the initial styles

Link to code example: https://playground.lexical.dev/

The styles seems to be removed in the `LexicalEvents.ts -> onSelectionChange -> updateEditor`
at the last section of this code blob `else if (anchor.type === 'element')`
```javascript
if (
currentTimeStamp < timeStamp + 200 &&
anchor.offset === lastOffset &&
anchor.key === lastKey
) {
selection.format = lastFormat;
selection.style = lastStyle;
} else {
if (anchor.type === 'text') {
selection.format = anchorNode.getFormat();
selection.style = anchorNode.getStyle();
} else if (anchor.type === 'element') {
selection.format = 0;
selection.style = '';
}
}
```
This problem can be fixed with tree solutions.
1. Remove the `currentTimeStamp < timeStamp + 200`. However, I am not sure why this time check is added.
2. Change the `if(anchor.type === 'element')` to get values. E.g. the `lastFormat` and `lastStyle`.
3. Before going into updateEditor there is a check for skip selection change. Maybe we could add a check there? That it should not update if the editor is empty.

## The current behavior
![behavior_now](https://github.com/facebook/lexical/assets/59730495/a1c0dfb7-6a90-4bdb-92a1-0fff5113b26b)

## The expected behavior
![behavior_wanted](https://github.com/facebook/lexical/assets/59730495/4e044ecc-0826-4d4f-838c-9740a1b38079)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.