facebook / facebook/lexical

Bug: Some text formats use CSS instead of semantic HTML

Open
#5,310 4 comments 6 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.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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.