Bug: Some text formats use CSS instead of semantic HTML
- Dominant language
- TypeScript
- Stars
- 23.9k
- Forks
- 2.2k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 61
Description
Lexical version: v0.12.4
## Steps to reproduce
1. Go to https://playground.lexical.dev/.
2. Type the text ‘abc’.
3. Select the text ‘abc’.
4. Click on the ‘Bold’, ‘Italic’, and ‘Underline’ buttons.
## The current behavior
You get this HTML:
```html
abc
```
## The expected behavior
You should get this HTML:
```html
abc
```
## Analysis
The [WHATWG HTML specification](https://html.spec.whatwg.org/) does not forbid nesting `strong`, `em`, `b`, `i`, `u`, and `s` elements.
[GitHub](https://github.com/) nests those elements for instance (the very same editor I am using to open this issue). Post a comment, type the text ‘abc’, select it, click on the ‘Bold’ and ‘Italic’ buttons, and you get this HTML:
```html
abc
```
[Gmail](https://www.google.com/intl/fr/gmail/about/) nests those elements as well. Compose an email, type the text ‘abc’, select it, click on the ‘Bold’, ‘Italic’, and ‘Underline’ buttons, and you get this HTML:
```html
abc
```
[Stack Overflow](https://stackoverflow.com/) nests those elements as well. Ask a question, type the text ‘abc’, select it, click on the ‘Bold’ and ‘Italic’ buttons, and you get this HTML:
```html
abc
```
[Wikipedia](https://www.wikipedia.org/) nests those elements as well. Edit an article, type the text ‘abc’, select it, click on the ‘Bold’ and ‘Italic’ buttons, and you get this HTML:
```html
abc
```
In other words, the behavior of Lexical which uses CSS instead of semantic HTML to format text in bold, italic, underline, and line-through seems quite unique. It is also inconsistent with how Lexical applies other formats which uses semantic HTML instead of CSS with generic `div` and `span` elements: `p` elements for paragraphs, `h1` to `h6` elements for headings, `blockquote` elements for block quotes, `ul` elements for unordered lists, `ol` elements for ordered lists, `li` elements for list items, `sub` elements for subscripts, `sup` elements for superscripts, `code` elements for code.
Contributor guide
Research direction
Reproduce the behavior in the Lexical Playground at playground.lexical.dev using the listed formatting buttons and inspect the generated HTML. Trace how bold, italic, underline, and line-through formatting is serialized, then verify that the result uses nested semantic elements rather than CSS classes while preserving the other formatting behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100