Gutenberg: Pasting with an indented unordered list is amazingly buggy

[danielbachhuber]

See GIF for multiple behavioral issues:

Desktop:

• OS: Mac 10.13.6
• Browser: FF Quantum
• Version: 62.0.2

[mtias]

See https://github.com/WordPress/gutenberg/issues/6555 and https://github.com/WordPress/gutenberg/issues/5727

[mtias]

cc @mcsf we should consolidate these, have actionable tasks, and close all the different duplicates.

[mcsf]

The issues you mention are actionable, @mtias.

@danielbachhuber, not sure what time you have, but taking your report and clearly identifying its issues would be very helpful.

[danielbachhuber]

taking your report and clearly identifying its issues would be very helpful.

I don't have the bandwidth this week to track down the specific technical defects. The GIF I shared seems fairly obvious though.

[chrisvanpatten]

@danielbachhuber I could try to look into this a bit; but out of curiosity what was your paste source? Were you pasting from within Gutenberg?

[danielbachhuber]

what was your paste source? Were you pasting from within Gutenberg?

A GitHub Gist.

[chrisvanpatten]

Okay so the issues particularly seem from pasting an ordered list into another ordered list but only if you paste into an indented level.

Test case:

1. Copy the list from this rendered markdown: https://gist.github.com/chrisvanpatten/069aeaeca2a6de74c83ee9743e9a1dc4
2. Note that your cursor is at the start of the text (#5317)
3. Place your cursor at the end of the final list item ("Another note")
4. Paste _again_
5. Note that everything is mangled.

[chrisvanpatten]

@danielbachhuber Hope you don't mind, fixed a typo in your issue title :)

EDIT: Also here's the console log for the first and second pastes, with each console log line in its own code block for clarity.

First paste

index.js:295 Received HTML:

 <meta charset='utf-8'><ul style="box-sizing: border-box; padding-left: 2em; margin-top: 0px; margin-bottom: 0px !important; color: rgb(36, 41, 46); font-family: -apple-system, system-ui, &quot;Segoe UI&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><li style="box-sizing: border-box;"><strong style="box-sizing: border-box; font-weight: 600;">Expose blah blah blah</strong><ul style="box-sizing: border-box; padding-left: 2em; margin-top: 0px; margin-bottom: 0px;"><li style="box-sizing: border-box;"><a href="https://google.com/" rel="nofollow" style="box-sizing: border-box; background-color: transparent; color: rgb(3, 102, 214); text-decoration: none;">https://google.com/</a></li><li style="box-sizing: border-box; margin-top: 0.25em;">Note about this</li></ul></li><li style="box-sizing: border-box; margin-top: 0.25em;"><strong style="box-sizing: border-box; font-weight: 600;">Do another thing</strong><ul style="box-sizing: border-box; padding-left: 2em; margin-top: 0px; margin-bottom: 0px;"><li style="box-sizing: border-box;"><a href="https://yahoo.com/" rel="nofollow" style="box-sizing: border-box; background-color: transparent; color: rgb(3, 102, 214); text-decoration: none;">https://yahoo.com/</a></li><li style="box-sizing: border-box; margin-top: 0.25em;">Another note</li></ul></li></ul>

index.js:296 Received plain text:

 Expose blah blah blah
https://google.com/
Note about this
Do another thing
https://yahoo.com/
Another note

index.js:176 Processed HTML piece:

 <ul><li><strong>Expose blah blah blah</strong><ul><li><a href="https://google.com/">https://google.com/</a></li><li>Note about this</li></ul></li><li><strong>Do another thing</strong><ul><li><a href="https://yahoo.com/">https://yahoo.com/</a></li><li>Another note</li></ul></li></ul>

Second paste

index.js:295 Received HTML:

 <meta charset='utf-8'><ul style="box-sizing: border-box; padding-left: 2em; margin-top: 0px; margin-bottom: 0px !important; color: rgb(36, 41, 46); font-family: -apple-system, system-ui, &quot;Segoe UI&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><li style="box-sizing: border-box;"><strong style="box-sizing: border-box; font-weight: 600;">Expose blah blah blah</strong><ul style="box-sizing: border-box; padding-left: 2em; margin-top: 0px; margin-bottom: 0px;"><li style="box-sizing: border-box;"><a href="https://google.com/" rel="nofollow" style="box-sizing: border-box; background-color: transparent; color: rgb(3, 102, 214); text-decoration: none;">https://google.com/</a></li><li style="box-sizing: border-box; margin-top: 0.25em;">Note about this</li></ul></li><li style="box-sizing: border-box; margin-top: 0.25em;"><strong style="box-sizing: border-box; font-weight: 600;">Do another thing</strong><ul style="box-sizing: border-box; padding-left: 2em; margin-top: 0px; margin-bottom: 0px;"><li style="box-sizing: border-box;"><a href="https://yahoo.com/" rel="nofollow" style="box-sizing: border-box; background-color: transparent; color: rgb(3, 102, 214); text-decoration: none;">https://yahoo.com/</a></li><li style="box-sizing: border-box; margin-top: 0.25em;">Another note</li></ul></li></ul>

index.js:296 Received plain text:

 Expose blah blah blah
https://google.com/
Note about this
Do another thing
https://yahoo.com/
Another note

index.js:52 Processed inline HTML:

 <strong>Expose blah blah blah</strong><a href="https://google.com/">https://google.com/</a><br>Note about this<br><strong>Do another thing</strong><a href="https://yahoo.com/">https://yahoo.com/</a><br>Another note

[ellatrix]

A lot of these issues have been resolved in the last two weeks. Any remaining issues should to be reported separately with clear steps to reproduce. If the original issue is still present, it also needs more information (ideally change the title/description).

[danielbachhuber]

@iseulde Works a lot better on master now, thanks!