Gutenberg: Pasting content with leading white space results in an empty block

[skorasaurus]

Describe the bug

If you are pasting text from the clipboard that consists of multiple lines into a header block, the pasted text does not go into the header block, a new paragraph block is created.

Text is copy and pasted from PDFs or Word documents sometimes has line breaks or other artifacts that are invisible to the user.

To Reproduce
Steps to reproduce the behavior:

1. Copy text from a PDF or word document that has an invisible line break (honestly, I don't know how these are generated) into your clipboard. You can also open your plain text editor, create text consisting of 2 lines
2. add a header block
3. click inside header block
4. hit control+V

Expected behavior
I expected the pasted text to be inside the heading block, not a new paragraph block. A common workflow at my workplace (full disclosure, writing this report as an employee of the Cleveland Public Library) is to take text content (with no HTML formatting) from office365 or PDFs) that was proofed by an editor and that we then paste the text into WordPress editor and further edit, adding proper HTML structure and tags.

Screenshots
here's a video of it

Desktop (please complete the following information):
I've only verified this on Ubuntu 16.04, firefox 60, gutenberg 3.1.0

[designsimply]

Tested and confirmed that pasting content with leading line breaks into a heading block results in an empty heading (for the leading line break) and the rest becoming paragraph blocks.

^{Tested with WordPress 4.9.6 and Gutenberg 3.1.1 on Firefox 61.0 on macOS 10.13.5.}

[karmatosed]

I think this is fair if there are line breaks in it as headings shouldn't really have that? I am torn if we can create some check as it feels like almost this behaviour would be wanted. If there is some magical way of automatically not doing this great but it's not a design decision in this case. I can see a case where people may also want paragraphs.

[designsimply]

My opinion is to agree that it makes sense that line breaks would be considered a new paragraph when content is pasted from elsewhere.

@karmatosed, thanks for noting this isn't a design decision. 🙂 I may have gotten over excited about that label. 😂

[designsimply]

I expected the pasted text to be inside the heading block, not a new paragraph block.

I think changing it so line breaks are completely ignored when pasting into headers could create an undesired effect where a large amount of pasted text into a header block would result in too much text going into the header. I think the main problem you are trying to solve is that unexpected leading white space (i.e. line breaks) are included when pasting and stripping leading white space would solve this problem. Does that sound like a good suggested resolution for this problem?

[skorasaurus]

To prevent scope creep I'm fine with limiting the issue to stripping leading white space We're only using Gutenberg in a very limited manner so far and haven't come across any related issues (of copying and pasting from DOCS, pdfs) and when I do, I will create additional issues as they arise :)

[ghost]

See this issue related to this topic you closed #8548 https://wordpress.org/support/topic/errors-copy-pasting-from-pdf-documents/#post-10558802

[ellatrix]

Hi @skorasaurus! Thanks for the report.

Could you share what the console is logging for you when you paste?

I'm looking for this:

Please copy the text and paste it in between backticks:
````

````

Thank you!

[skorasaurus]

Hi, this is using the same PDF that I had before used before.

I pasted text twice; once into a heading block; and another into a paragraph block (different texts); using Gutenberg 7.0.0 plugin.

Received HTML:

 <h2 role="textbox" aria-multiline="true" aria-label="Write heading…" style="white-space: pre-wrap;" class="rich-text editor-rich-text__editable block-editor-rich-text__editable is-selected" contenteditable="true">Making a Grievance</h2> index.js:6:29672
Received plain text:

 Making a Grievance index.js:6:29715
Processed inline HTML:

 Making a Grievance index.js:2:145712
Received HTML:

 index.js:6:29672
Received plain text:

 Grievances made pursuant to this procedure should be in writing and must contain the following
information about the alleged discrimination:






Name of grievant;
Grievant’s address, telephone number, and/or email address;
Description of the issue/alleged discrimination;
Date that the issue/alleged discrimination occurred;
Location where issue/alleged discrimination occurred; and
Description of the solution sought.
Alternative means of filing complaints, such as personal interviews or a tape recording of the grievances,
will be made available for persons with disabilities upon request.
Grievances should be submitted as soon as possible, but in no event later than sixty (60) calendar days
after the alleged discrimination occurred. index.js:6:29715
Processed HTML piece:

 <p>Grievances made pursuant to this procedure should be in writing and must contain the following<br>information about the alleged discrimination:<br><br><br><br><br><br><br>Name of grievant;<br>Grievant’s address, telephone number, and/or email address;<br>Description of the issue/alleged discrimination;<br>Date that the issue/alleged discrimination occurred;<br>Location where issue/alleged discrimination occurred; and<br>Description of the solution sought.<br>Alternative means of filing complaints, such as personal interviews or a tape recording of the grievances,<br>will be made available for persons with disabilities upon request.<br>Grievances should be submitted as soon as possible, but in no event later than sixty (60) calendar days<br>after the alleged discrimination occurred.</p> index.js:2:146719

[ellatrix]

I don't see any leading space in the logs you shared.

1. Processed inline HTML: Making a Grievance.
2. Processed HTML piece:

<p>Grievances made pursuant to this procedure should be in writing and must contain the following<br>information about the alleged discrimination:<br><br><br><br><br><br><br>Name of grievant;<br>Grievant’s address, telephone number, and/or email address;<br>Description of the issue/alleged discrimination;<br>Date that the issue/alleged discrimination occurred;<br>Location where issue/alleged discrimination occurred; and<br>Description of the solution sought.<br>Alternative means of filing complaints, such as personal interviews or a tape recording of the grievances,<br>will be made available for persons with disabilities upon request.<br>Grievances should be submitted as soon as possible, but in no event later than sixty (60) calendar days<br>after the alleged discrimination occurred.</p>

What leading space do you mean?

[skorasaurus]

Aha, I determined that it was not the same document; they were different versions and don't have access to the earlier version ;)

I've found another document that we have with similar behavior and fortunately, I am unable to reproduce. In this example; there was a proceeding space and line break before the text.

As shown in the GIF below, Gutenberg appears to now properly remove the beginning space and line break.

```Received HTML:

Commas

index.js:6:29672

Received plain text:

Commas index.js:6:29715
Processed HTML piece:

Commas 

```

link to gif that shows recording:
https://user-images.githubusercontent.com/955351/70564648-9346fc00-1b5e-11ea-8dc6-2095c50a4f14.gif

[ellatrix]

I think #17470 fixed it. :) Thanks for confirming that the issue is fixed.