Bug: Lexical nodes not persisting styles present in original HTML

Lexical version: 0.4.1

Steps To Reproduce

1. Generate HTML using Lexical APIs
2. Use generated HTML from step 1 and provide to Lexical editor. use generateNode API provided by Lexical.
3. Resulting content in editor will not have style which it supposed to have

Following HTML was generated by Lexical and saved in DB. We provide it as is to Lexical and generate nodes (https://lexical.dev/docs/concepts/serialization) from it

<p class="RMXContentTheme__paragraph"
 data-lexical-node-type="paragraph"
 data-lexical-node-json='{"children":[],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}'
 data-lexical-editor-key="rpoel">
 <span
   data-lexical-node-type="text"
   data-lexical-node-json='{"detail":0,"format":0,"mode":"normal","style":"color: #e00000;background-color: #f8e71c;","text":"manish","type":"text","version":1}'
   data-lexical-editor-key="rpoel"
   style="color: rgb(224, 0, 0); background-color: rgb(248, 231, 28)">
       Hello World
   </span>
</p>

The current behavior

After deserializing HTML content its NOT PERSISTING style properties which were present in HTML

<p
  class="RMXContentTheme__paragraph"
  data-lexical-node-type="paragraph"
  data-lexical-node-json='{"children":[],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}'
  data-lexical-editor-key="qktmf">
  <span
    data-lexical-node-type="text"
    data-lexical-node-json='{"detail":0,"format":0,"mode":"normal","style":"","text":"manish","type":"text","version":1}'
    data-lexical-editor-key="qktmf">
    Hello World
  </span>
</p>

The expected behavior

After deserializing HTML content it SHOULD PERSIST style properties which were present in HTML

<p class="RMXContentTheme__paragraph"
 data-lexical-node-type="paragraph"
 data-lexical-node-json='{"children":[],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}'
 data-lexical-editor-key="rpoel">
 <span
   data-lexical-node-type="text"
   data-lexical-node-json='{"detail":0,"format":0,"mode":"normal","style":"color: #e00000;background-color: #f8e71c;","text":"manish","type":"text","version":1}'
   data-lexical-editor-key="rpoel"
   style="color: rgb(224, 0, 0); background-color: rgb(248, 231, 28)">
       Hello World
   </span>
</p>

[Manish2612]

@zurfyx Thanks for prompt response and fix! It will be great if you can let us know way to persist text-alignment?

[Manish2612]

@zurfyx Thanks for prompt response and fix! It will be great if you can let us know way to persist text-alignment?

Can you store this on the parent (i.e. ParagraphNode)? paragraphNode.setFormat('center')

We also have a command for this -> .dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center');

It’s already being stored in parent by lexical itself. When we use generated HTML as initial state, aligned text is not rendered by editor even if data-lexical-json attributes is present on parent tag.

<p
  class="RMXContentTheme__paragraph"
  data-lexical-node-type="paragraph"
  data-lexical-node-json='{"children":[],"direction":"ltr","format":"center","indent":0,"type":"paragraph","version":1}'
  data-lexical-editor-key="tcrre"
>
  <span
    data-lexical-node-type="text"
    data-lexical-node-json='{"detail":0,"format":0,"mode":"normal","style":"","text":"Manish","type":"text","version":1}'
    data-lexical-editor-key="tcrre"
    >This should be aligned center</span
  >
</p>

let me know your thoughts on this.