Paste HTML doesn't keep formatting for blockquotes

[wanglophile]

Description A) Copying and pasting a blockquote into Slate by itself does not provide the blockquote formatting.

B) Copy and pasting a blockquote into Slate with other paragraphs does provide the blockquote formatting but strips out other formatting in the blockquote

Recording A) https://watch.screencastify.com/v/lgkuOYZnBV7jxjwI3YGi Notice that pasting a blockquote into Slate.js Paste HTML does not deserialize or render a blockquote. It also does not keep the source blockquote's formatting on two lines.

B) https://watch.screencastify.com/v/eB5fPYlEqw4j7LUODjEL Notice that pasting a blockquote sandwiched by paragraphs into Slate.js Paste HTML does deserialize and render a blockquote - but it does not keep the blockquote's formatting on two lines.

Here's the source HTML I used: https://standardebooks.org/ebooks/victor-hugo/les-miserables/isabel-f-hapgood/text/single-page#chapter-2-2-2

The code looks like:

<p>Previous paragraph</p>
<blockquote>
  <p>
    <span>Fodit, et in fossa thesauros condit opaca,</span>
    <br />
    <span>As, nummas, lapides, cadaver, simulacra, nihilque.</span>
    </p>
</blockquote>
<p>Next paragraph</p>

Sandbox https://www.slatejs.org/examples/paste-html

Steps

1. Go to https://standardebooks.org/ebooks/victor-hugo/les-miserables/isabel-f-hapgood/text/single-page#chapter-2-2-2
2. Go to the blockquote starting with "Fodit, et in fossa"...
3. For Issue A: Copy the blockquote and paste into Slate.js Paste HTML
4. For Issue B: Copy the blockquote and another paragraph and paste into Slate.js Paste HTML

Expectation Expect Slate.js to match the source blockquote's HTML formatting

Environment

• Operating System: Windows 10
• Browser: Chrome

[PravunathSingh]

Hey, I am having the same issue, and cannot find any working solution for it. Have you by any chance been able to resolve this issue

[BitPhinix]

You have to implement that yourself. Slate is a framework for building text editors - not a fully-fledged text editor. There is an example showing how you would go about doing so: https://github.com/ianstormtaylor/slate/blob/main/site/examples/paste-html.tsx. If you just want a plug-and-play editor take a look at https://plate.udecode.io/

[wanglophile]

You have to implement that yourself. Slate is a framework for building text editors - not a fully-fledged text editor. There is an example showing how you would go about doing so: https://github.com/ianstormtaylor/slate/blob/main/site/examples/paste-html.tsx.

The example in my original post does use Slate's paste HTML example that you linked. The code also suggests it should serialize and deserialize blockquotes and newlines - but that obviously does not happen.

(The exact same issues in my original post are also present when using https://plate.udecode.io/)

I suspect the issue has something to do with nested tags? Or perhaps there is something strange about blockquotes that is tripping up the serialization/deserialization? Either way, I have not found a solution.

[dylans]

I think what's happening here is that the deserialization rules in the example are too simple to handle the nested markup you have (for the slate version), and not handled at all in the plate example.

Add from what I can tell it's actually the whitespace between blockquote and paragraph at the open and closing tags as this seems to work as expected by changing the markup to:

<p>Previous paragraph</p>
<blockquote><p>
    <span>Fodit, et in fossa thesauros condit opaca,</span><br>
    <span>As, nummas, lapides, cadaver, simulacra, nihilque.</span>
</p>
</blockquote>
<p>Next paragraph</p>

To make this parse correctly the fastest path is probably to remove empty text nodes on parse following the approach in https://github.com/udecode/plate/blob/main/packages/core/src/plugins/html-deserializer/utils/cleanHtmlTextNodes.ts .