Bug: underline strikethrough HTML serialization does not match editor about lexical

[mrAJAY1]

Can I work on this?

[mrAJAY1]

If no one is working on this bug, please assign it to me. 🙂

[inaseem]

@JavoByte the styles on the playground are being picked up from the theme object which is passed on in the initalConfig. That's why those are getting applied in the playground. When you are serializing the contents to html, the styles from theme theme classes are not applied only the styles which are applied inline would remain in the serialized html. You can use the theme css file to the document where you are rendering the serialized html. This should work.

[JavoByte]

@JavoByte the styles on the playground are being picked up from the theme object which is passed on in the initalConfig. That's why those are getting applied in the playground. When you are serializing the contents to html, the styles from theme theme classes are not applied only the styles which are applied inline would remain in the serialized html. You can use the theme css file to the document where you are rendering the serialized html. This should work.

I don't think that's the case. I see the classes applied in the generated HTML. I see additional tags that shouldn't be there IMO. I would be ok with classes not applied but since they are, a mix of styling is being applied that does not match with what user entered

[inaseem]

@JavoByte I meant the css associated with those css classes are not applied to the serialized html. For this to work correctly, you will have to include the css file either as as import or as style in the head of serialized html.

[JavoByte]

Styles of course are not added (if you mean inline styling) but the classes are.
So, I'm having this in the editor:

<p><span class="underline-strikethrough">this text is underlined and striked through</span></p>

but when I serialize that, I end up with:

<p><u><s><span class="underline-strikethrough">this text is underlined and striked through</span></s></u></p>

My point is that the u and s tags should not be there together with the class name.

[oleza]

@JavoByte that's how it's implemented to support both underline and strike-through, as far is I got. Wrapping are applied during export but merged back on import. This functionality is controlled within the exportDOM method of the TextNode class. You can customize this behavior by replacing the TextNode class. For example,

TextNode:

exportDOM(editor: LexicalEditor) {
      if (this.hasFormat("strikethrough")) {
        element = wrapElementWith(element, "s");
      }
      if (this.hasFormat("underline")) {
        element = wrapElementWith(element, "u");
      }

CustomTextNode:

exportDOM(editor: LexicalEditor) {
    const element = super.createDOM(editor._config);
    if (element instanceof HTMLElement) {
      if (element.className.match("underline-strikethrough")) {
        element.style.textDecoration = "underline line-through";
      } else if (this.hasFormat("bold")) {

will apply inline styles, instead of wrapping it with respective element. But than hasFormat behaviour should be adjusted as well, to support both from inline.