Whitespace in pasted HTML is not handled according to the HTML spec #2713

12joan · 2023-10-24T10:25:05Z

Note to anyone attempting the bounty: Please read the Expected Behaviour section carefully and write tests to check that all cases are implemented correctly. Discuss it with us via this issue or Discord if anything is unclear.

Deadline: Thursday 2 November 2023

Clarifications:

Description

When pasting HTML into Plate via the deserialize HTML plugin, the pasted HTML is parsed inside getFragment using parseHtmlDocument before being passed as a HTML element to deserializeHtml. As a result of the logic inside deserializeHtml, the stripWhitespace option is ignored when the given argument is a HTML element instead of a string, hence whitespace is not stripped from pasted HTML.

Note that this is the intended behaviour in some circumstances, such as <pre> tags, but not all. See Expected Behaviour.

Context

When copying HTML from Firefox, Firefox inserts additional line feed characters (\n) at regular intervals. For example, the same paragraph with no newlines becomes the following when opened in and copied from Firefox:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Risus 
pretium quam vulputate dignissim suspendisse in est. Commodo elit at 
imperdiet dui accumsan sit amet nulla facilisi. Bibendum at varius vel 
pharetra vel turpis. Urna nec tincidunt praesent semper. Libero volutpat
 sed cras ornare arcu. Phasellus vestibulum lorem sed risus ultricies 
tristique. Tempus iaculis urna id volutpat lacus laoreet non. Lacus 
vestibulum sed arcu non odio euismod lacinia at quis. Quis lectus nulla 
at volutpat. Auctor urna nunc id cursus metus aliquam. Diam volutpat 
commodo sed egestas egestas fringilla phasellus faucibus scelerisque. 
Odio morbi quis commodo odio aenean sed adipiscing diam. Enim tortor at 
auctor urna. Pulvinar sapien et ligula ullamcorper malesuada proin 
libero nunc consequat. Duis convallis convallis tellus id interdum 
velit. Amet dictum sit amet justo donec enim diam vulputate. Etiam erat 
velit scelerisque in dictum.</p>

This bug results in those same line feed characters appearing inside text nodes when pasting into Plate. While this browser quirk is specific to Firefox, the HTML pasting bug in Plate applies to all browsers.

Steps to Reproduce

Place the above HTML in test.html
Open the HTML file in Firefox
Select the paragraph and copy
Paste the HTML into Plate

Expected Behavior

HTML should be parsed as per the HTML spec:

By default, newlines should be ignored
By default, sequences of two or more spaces should be collapsed into a single space

Additionally, this behaviour should be modifiable using the white-space CSS property, regardless of whether this property is included explicitly using a style prop or implicitly though default browser styles. (The <pre> element applies an implicit white-space: pre style.)

See MDN's docs for a complete description of each possible value

Finally, as per the HTML spec, 4.4.3 The pre element:"In the HTML syntax, a leading newline character immediately following the pre element start tag is stripped."

Environment

slate: N/A
slate-react: N/A
browser: all browsers

Bounty

Click here to add a bounty via Algora.

Funding

You can sponsor this specific effort via a Polar.sh pledge below
We receive the pledge once the issue is completed & verified

The text was updated successfully, but these errors were encountered:

12joan · 2023-10-24T10:29:43Z

/bounty 150

algora-pbc · 2023-10-24T10:29:46Z

~~💎 $150 bounty created by 12joan~~
~~🙋 If you start working on this, comment /attempt #2713 to notify everyone~~
~~👉 To claim this bounty, submit a pull request that includes the text /claim #2713 somewhere in its body~~
~~📝 Before proceeding, please make sure you can receive payouts in your country~~
~~💵 Payment arrives in your account 2-5 days after the bounty is rewarded~~
~~💯 You keep 100% of the bounty award~~
~~🙏 Thank you for contributing to udecode/plate!~~

Attempt	Started (GMT+0)	Solution
🔴 @mrkirthi-24	Oct 24, 2023, 11:56:43 AM	WIP
🔴 @AayushMohan	Oct 24, 2023, 9:36:38 PM	WIP
🟢 @Dhoni77	Oct 25, 2023, 3:54:50 AM	WIP
🟢 @RANJEETJ06	Oct 25, 2023, 10:13:17 AM	WIP
🔴 @rishi-raj-jain	Oct 25, 2023, 8:54:41 PM	WIP
🟢 @jkcs	Oct 27, 2023, 2:20:25 PM	#2718
🔴 @XooTB	Oct 29, 2023, 6:41:37 AM	WIP

mrkirthi-24 · 2023-10-24T11:56:41Z

/attempt #2713

Options

Cancel my attempt

Dhoni77 · 2023-10-25T03:54:47Z

/attempt #2713

Options

Cancel my attempt

algora-pbc · 2023-10-25T03:54:52Z

Note: The user @AayushMohan is already attempting to complete issue #2713 and claim the bounty. If you attempt to complete the same issue, there is a chance that @AayushMohan will complete the issue first, and be awarded the bounty. We recommend discussing with @AayushMohan and potentially collaborating on the same solution versus creating an alternate solution.

12joan · 2023-10-25T08:37:24Z

To anyone wondering where in the code to implement the solution:

Proper HTML parsing as per the spec should be part of the deserializeHtml function or the chain of functions it depends on. One solution would be to add a pre-processor function that transforms a HTML tree according to the whitespace rules before passing the result to deserializeHtmlElement. This pre-processor could be disabled if the existing stripWhitespace option is set to false.

12joan · 2023-10-25T08:46:50Z

I encourage anyone working on this to join us on Discord and share your thoughts in the #contributing channel. Better to collaborate on one good solution than everyone racing to complete one hastily-built solution, right? 🙂

12joan · 2023-10-25T08:55:24Z

I found some more detailed inforamtion about how HTML parsers should handle whitespace, in case it's helpful to anyone:

https://www.w3.org/TR/CSS21/text.html#white-space-model

RANJEETJ06 · 2023-10-25T10:13:15Z

/attempt #2713

Options

Cancel my attempt

12joan · 2023-10-25T11:53:47Z

Discussion on Discord is here: https://discord.com/channels/1026227597115396188/1166709783865331723

rishi-raj-jain · 2023-10-25T20:54:29Z

@12joan

How to run tests of the file: deserializeHtml.spec.tsx?

12joan · 2023-10-25T21:41:55Z

@rishi-raj-jain You can run those tests like this:

yarn jest packages/core/src/plugins/html-deserializer/utils/deserializeHtml.spec.tsx

12joan · 2023-10-25T21:45:55Z

Discussion on potential approaches: https://github.com/udecode/plate/pull/2715/files#r1372355759

12joan · 2023-10-25T22:02:35Z

For testing purposes, here's an example of an input and its equivalent collapsed HTML. Both of these HTML strings should result in identical Slate values.

Original:

<p>
  Hello  world
  </p>

  <p>
  one     two   
  three
</p>

<pre>
hello     one two
three
four
</pre>

<div style="white-space: pre">
hello     one two
three
four
</div>

<div style="white-space: pre-line">
hello     one two
three
four
</div>

Collapsed:

<p>Hello world</p><p>one two three</p><pre>hello     one two
three
four
</pre><div style="white-space: pre">
hello     one two
three
four
</div><div style="white-space: pre-line">
hello one two
three
four
</div>

12joan · 2023-10-26T17:27:22Z

Just to let everyone know, it looks like there are a lot of people working on this. I'm going to leave the bounty open for a few days after the first mergable PR is opened, and I'm going to award the bounty to whichever PR presents the highest quality solution (completeness, testing, general code quality), regardless of who submits first.

If you want to avoid wasting your time, I suggest collaborating on a single solution like the Algora comment recommends.

jkcs · 2023-10-27T14:20:23Z

/attempt #2713

Options

Cancel my attempt

12joan · 2023-10-28T08:08:48Z

As I said here, I'll leave this bounty open until Thursday to give anyone else a chance to submit a PR.

Please do not copy from other contributors' PRs without their permission. This will be treated as a copyright violation.

XooTB · 2023-10-29T06:41:35Z

/attempt #2713

Options

Cancel my attempt

12joan · 2023-10-29T11:29:51Z

@jkcs and I have discovered some more details about how browsers handle leading and trailing whitespace in <pre> tags and white-space: pre / pre-line.

#2718 (comment)

12joan · 2023-11-02T09:44:46Z

Thanks everyone for your time. We'll no longer be accepting new PRs for this issue. The bounty will be awarded to @jkcs once the last few issues are resolved.

algora-pbc · 2023-11-04T09:11:19Z

💡 @jkcs submitted a pull request that claims the bounty. You can visit your org dashboard to reward.

algora-pbc · 2023-11-06T21:57:04Z

@jkcs: Your claim has been rewarded! We'll notify you once it is processed.

algora-pbc · 2023-11-06T22:50:19Z

🎉🎈 @jkcs has been awarded $150! 🎈🎊

12joan added bug Something isn't working plugin:deserialize-html Html deserializer labels Oct 24, 2023

algora-pbc bot added the 💎 Bounty label Oct 24, 2023

rishi-raj-jain mentioned this issue Oct 25, 2023

fix: Whitespace in pasted HTML is not handled according to the HTML spec #2715

Closed

jkcs mentioned this issue Oct 28, 2023

Want to handle whitespace in pasted HTML according to HTML spec #2718

Closed

12joan mentioned this issue Nov 6, 2023

Parse white space according to the HTML spec #2729

Merged

algora-pbc bot added the 💰 Rewarded label Nov 6, 2023

zbeyens closed this as completed in #2729 Nov 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Whitespace in pasted HTML is not handled according to the HTML spec #2713

Whitespace in pasted HTML is not handled according to the HTML spec #2713

12joan commented Oct 24, 2023 •

edited

Loading

12joan commented Oct 24, 2023

algora-pbc bot commented Oct 24, 2023 •

edited

Loading

mrkirthi-24 commented Oct 24, 2023 •

edited by algora-pbc bot

Loading

Dhoni77 commented Oct 25, 2023 •

edited by algora-pbc bot

Loading

algora-pbc bot commented Oct 25, 2023

12joan commented Oct 25, 2023 •

edited

Loading

12joan commented Oct 25, 2023

12joan commented Oct 25, 2023

RANJEETJ06 commented Oct 25, 2023 •

edited by algora-pbc bot

Loading

12joan commented Oct 25, 2023 •

edited

Loading

rishi-raj-jain commented Oct 25, 2023

12joan commented Oct 25, 2023

12joan commented Oct 25, 2023

12joan commented Oct 25, 2023

12joan commented Oct 26, 2023

jkcs commented Oct 27, 2023 •

edited by algora-pbc bot

Loading

12joan commented Oct 28, 2023

XooTB commented Oct 29, 2023 •

edited by algora-pbc bot

Loading

12joan commented Oct 29, 2023

12joan commented Nov 2, 2023

algora-pbc bot commented Nov 4, 2023

algora-pbc bot commented Nov 6, 2023

algora-pbc bot commented Nov 6, 2023

Whitespace in pasted HTML is not handled according to the HTML spec #2713

Whitespace in pasted HTML is not handled according to the HTML spec #2713

Comments

12joan commented Oct 24, 2023 • edited Loading

Description

Context

Steps to Reproduce

Expected Behavior

Environment

Bounty

Funding

12joan commented Oct 24, 2023

algora-pbc bot commented Oct 24, 2023 • edited Loading

mrkirthi-24 commented Oct 24, 2023 • edited by algora-pbc bot Loading

Dhoni77 commented Oct 25, 2023 • edited by algora-pbc bot Loading

algora-pbc bot commented Oct 25, 2023

12joan commented Oct 25, 2023 • edited Loading

12joan commented Oct 25, 2023

12joan commented Oct 25, 2023

RANJEETJ06 commented Oct 25, 2023 • edited by algora-pbc bot Loading

12joan commented Oct 25, 2023 • edited Loading

rishi-raj-jain commented Oct 25, 2023

12joan commented Oct 25, 2023

12joan commented Oct 25, 2023

12joan commented Oct 25, 2023

12joan commented Oct 26, 2023

jkcs commented Oct 27, 2023 • edited by algora-pbc bot Loading

12joan commented Oct 28, 2023

XooTB commented Oct 29, 2023 • edited by algora-pbc bot Loading

12joan commented Oct 29, 2023

12joan commented Nov 2, 2023

algora-pbc bot commented Nov 4, 2023

algora-pbc bot commented Nov 6, 2023

algora-pbc bot commented Nov 6, 2023

12joan commented Oct 24, 2023 •

edited

Loading

algora-pbc bot commented Oct 24, 2023 •

edited

Loading

mrkirthi-24 commented Oct 24, 2023 •

edited by algora-pbc bot

Loading

Dhoni77 commented Oct 25, 2023 •

edited by algora-pbc bot

Loading

12joan commented Oct 25, 2023 •

edited

Loading

RANJEETJ06 commented Oct 25, 2023 •

edited by algora-pbc bot

Loading

12joan commented Oct 25, 2023 •

edited

Loading

jkcs commented Oct 27, 2023 •

edited by algora-pbc bot

Loading

XooTB commented Oct 29, 2023 •

edited by algora-pbc bot

Loading