React Lexical nodes not persisting styles present in original HTML

Question

I have created richtext editor in React using Lexical library. I am using Lexical APIs for serialisation and deserialisation to generate following HTML from editor.

<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>

When we try to generate Lexical Nodes using this generated HTML it should consider style present on span tag but its dropping style and displaying plain text.

here is how HTML looks when we generate Lexical nodes with previously generated 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>

how to make this work using Lexical APIs or any other approach so that existing style works correctly?

React Lexical nodes not persisting styles present in original HTML

0 Answers0