'deserializeHTMLToDocumentFragment' changes HTML structure of div elements

[dmarchuk]

Hi, first of all thanks for this repo and all the plugins, it's been really really helpful!

Issue

So about my issue: I'm currently working on using a slate rich text formatting with HTML on an element that only had text inside it before. The initial value is Deserialized paragraph here.. Now that I added usage of slate plugins (for simplification, let's say only BlockquotePlugin), I see a weird behavior where it lets me add the blockquote, but after serializing and then deserializing the slate value, the blockquote is removed after each change - this is visible in the video below or there is a reproducible test case available here.

Am I missing something during the serialization/deserialization process which would prevent this issue or is this a bug? Any help would be really appreciated. 🙏

More details from investigation

I see that when I pass the initial value, it's serialized as <div>Deserialized paragraph here.</div> (the serializer automatically wraps the initial value text with div) and when I add the blockquote, it's then serialized to this:

<div>Deserialized paragraph here.</div><blockquote>blockquote</blockquote>

This works ok and I can edit the value and add any other elements, e.g. another blockquote. But when I save this deserialized string to database and use it as initial value when opening the editor again, right when I click into the editor the value is changed to:

<div>Deserialized paragraph here.<blockquote class="slate-blockquote">Blockquote</blockquote></div>

so now the div is wrapping the whole element. And it seems this results in the issue, where if you change anything in the input, it will remove the blockquote, as seen on the video below.

slate-element-removed-onchange.mov

[dmarchuk]

Any news on this, please? Maybe there's some quick workaround for this?

Thank you in advance!

[zbeyens]

There is indeed a div wrapping all the blocks, as you can see in the console of this sandbox. Can you try to reproduce in it?

[dmarchuk]

Thank you for the answer, @zbeyens! 🙏 I've tried to reproduce the issue in the sandbox from your previous message (I've just removed the other initial values in that sandbox), in that one it crashed (attaching a video), here's a link to the fork.

In the sandbox mentioned in the original issue description, it doesn't crash, but still removes the blockquote.

The main issue for us here is not that it wraps the whole value thing into a div, but that it changes the actual structure, which then results in removal of blockquote.

slate-plugins-reproduce.mov

[zbeyens]

Here is the problem: the div element is not deserialized as a paragraph but as a leaf (text), you can see that it works for p instead. The reason behind that is div is too much generic and we don't want to create a paragraph for a div that can just be a "wrapper". The workaround is to use p or div + option p.deserialize to add a custom class name to the deserializer rules.

These are the default rules for paragraph.

[dmarchuk]

Thank you for the info, very helpful! This probably wasn't 100% clear from my initial message, but the issue in this case is that the default value in the text is actually just a text like Your instructions go here..., which when serialized is turned into <div>Your instructions go here...</div>. So when I open the editor next time and add for example blockquote, I run into the issue.

I could just change the initial value to be <p>Your instructions go here...</p>, that would've definitely worked, but the old records would still have it without the wrapping p element and I wanted to avoid migrating old records (complicated structure with JSONs so not a straightforward migration).

[zbeyens]

Thanks for the details! You can create a client-side helper to wrap any tagless text with <p>, then you can remove the tag before saving to the database.

[dmarchuk]

Hi @zbeyens, sorry for the delay here but I only got back to this now. I just wanted to let you know that indeed wrapping any tagless text with <p> fixed all issues and it's now working ok. I just split the original (non-HTML) text by new lines and wrapped each of these with <p>.

Thank you again for your help and for your work on this repo!