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

[lysender]

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

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

[samirant15]

Seems like the issue is in the .PlaygroundEditorTheme__indent selector.

For me it worked by setting it at the root:

:root {
  --lexical-indent-base-value: 20px;
}

[vimutti77]

Seems like the issue is in the .PlaygroundEditorTheme__indent selector.

For me it worked by setting it at the root:

:root {
  --lexical-indent-base-value: 20px;
}

It doesn't work for me.