facebook / facebook/lexical

Bug: custom theme.indent value not respected when rendering a stored editor content

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

Description

When using the `TabIndentationPlugin` plugin, custom indent size from the theme css not respected when rendering back the editor content from storage (DB for example) to the editor. It is only respected during the time the content is being typed into the editor.

For example, the default indent is 40px. Tried to override it to 20px;

```
.PlaygroundEditorTheme__indent {
--lexical-indent-base-value: 20px;
}
```

Lexical version: 0.11.1

![image](https://github.com/facebook/lexical/assets/114853/b540cce6-f98d-40f9-9abd-eab128292bb8)

## Steps To Reproduce

1. Setup an editor to have the `TabIndentationPlugin` plugin with 20px indention override on theme css
2. Start the editor with empty content
3. Enter a few lines of content with indention, 1 level of indention should be enough
4. Capture the editor state to json string, probably store it somewhere
5. Render the same editor but set the initial content to the value from above
6. Check the rendered content

Link to code example:

CodeSandbox: https://codesandbox.io/s/magical-david-o3y42f?file=/src/Editor.js

Demo repo: https://github.com/lysender/lexical-text-indent

## The current behavior

The rendered content still has 40px indention

## The expected behavior

Should have 20px indention

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.