Question: Is it possible for TextNode to not wrap raw text with <span> ?

[dchhetri]

For example a html generated can look like

<p dir="ltr">
  <span style="white-space: pre-wrap;">Test </span>
  <b><strong style="white-space: pre-wrap;">Test</strong></b>
</p>

is it possible to remove the <span style="white-space: pre-wrap;"> all together and have it just be a raw HTML Text Node without the span wrapping?

[acywatson]

Do you want to change the HTML that the editor renders, or you want to render the editor state to an HTML string for usage elsewhere?

I don't think the former can be done as such today, as the createDOM method expects an HTMLElement to be returned, which TextNode doesn't implement. I'm not sure if the core could be easily changed to allow that or not. Maybe there's some other HTMLElement that might meet your needs?

If it's the latter, I think there was a PR that made a change to allow that in the recent past.

[dchhetri]

@acywatson

Thank you for the response. Ultimately, I would like a clean html output with only a limited set of tags (ex, p, b, strong, i, em, a) and attributes. That includes when user pastes in content. At the moment, I do not see a way to achieve this without a lot of overrides, for example overriding ParagraphNode, constructing our own paste behavior. Do you have a suggestion on how to achieve the desired behavior?

We utilize this HTML output elsewhere so we're trying to keep the same expected input/output for compatibility.

[acywatson]

No problem - I'm still not totally clear on which case we're in here:

Case 1) - the user is typing into the editor and Lexical is updating it's internal state as they do so, then rendering that state to the DOM in the browser as the user is typing.

Case 2) - the user has already typed something and you want to export it to HTML for transfer/storage/use elsewhere.

I think we're in Case 2), as you seem to care about using HTML as a transfer format, which is something we've intentionally decoupled from what Lexical renders to the DOM in the editor. The reason for this is that different editors interpret HTML differently.

In your case, yes, overriding the nodes should work. There is also an import/export API on the editor configuration itself, so you can do this without overriding nodes, if you want:

lexical/packages/lexical/src/LexicalEditor.ts

Line 185 in b6ae079

html?: HTMLConfig;

Note that pasting, by default, will try to use the native Lexical JSON format if it's on the clipboard and from the same editor namespace. If not, we fallback to HTML, then plain text.

[dchhetri]

I see. Yes this is for case 2. There is still much I need to learn about the system. Do you any examples of using import/export functionalities? I was unable to find some online.

[thorn0]

@dchhetri see https://github.com/facebook/lexical/releases/tag/v0.12.3

[CanRau]

Also an alternative is to manually render the result of editorState.toJSON recursively to HTML or whatever, that's what I'm doing, rendering to HTML and jsx-email

[etrepum]

This should be possible since exportDOM can return a fragment now. You would have to use node overrides or a custom html export editor config but you should be able to do it.