Gutenberg: No Paste as Text button on Paragraph block

[maddisondesigns]

Issue Overview

I wanted to copy some text into a paragraph block. The text was a h2 header from another site. Instead of stripping the html and pasting as text, it created a new Header block. This means that it's going to be incredibly difficult, and in some cases impossible, to copy formatted text from other sources into your content in the way that you actually want it.

This gets even worse when the text you're copying contains multiple formats, such as a header and some paragraph text. Not only does it insert a Header block but it also inserts another paragraph block with the remaining text as well.

Steps to Reproduce (for bugs)

1. Add new Paragraph block
2. Copy some header text from another site
3. Place cursor in Paragraph block and paste copied text

Expected Behavior

I expect to be able to copy any text I want into a paragraph block

Current Behavior

Pasting text doesn't strip html and automatically creates unwanted blocks

Possible Solution

Add a _Paste as Text_ toolbar button to the Paragraph block so that people can paste content from other sources and strip the html

_Gutenberg 2.6.0
WordPress 4.9.5
Firefox Quantum 59.0.2 (64-bit)_

[mtias]

I've found myself doing Command+Shift+V many times.

[karmatosed]

I am not totally sure we need to add a 'paste as' button if pasting works. It actually does in most cases and where it doesn't we should focus on iterating on copying and pasting over adding a button to cover those issues.

[karmatosed]

Noting was closing to get an issue to not focus on the button, but let's carry on discussion here looking at what 'non-button' things we can do. I am sure we can do better with some considering.

[mtias]

Some past things we have discussed:

1) When copying a single line of text, regardless of source, paste as plain text. So if you copy a heading alone we consider you copied the text.

2) Expose contextual choice _after_ you pasted in case your intention was different.

This is very similar to what Ulysses does for Command+Shift+V:

[maddisondesigns]

@karmatosed Just because pasting works in some cases that's not a good enough reason to ignore the cases where it doesn't work. Copying content from other websites (or other formatted sources) is extremely common. It's going to be incredibly frustrating and tedious if pasting text into your page ends up creating multiple blocks that you don't want.

WordPress currently provides users with the ability to _Paste as Text_. There's no reason why Gutenberg shouldn't also provide this functionality. I'm confident in saying that very few people know about Command+Shift+V (Ctrl+Shift+V) and is it even guaranteed to work in every single OS/Browser combination? 99% of people will simply use Ctrl+C Ctrl+V to Copy and Paste.

If you're adamant about not adding a _Paste as Text_ button then you should simply strip everything and always paste as plain text no matter whether it's one word, two words, a whole sentence or multiple paragraphs.

[karmatosed]

@maddisondesigns my point was whether a button is the best option, not one of ignoring what is an issue. I totally see how this is a hitch and actually really like the suggestion by @mtias. What do you think of that? It's not a button and has some awesome options.

[maddisondesigns]

I'm not a big fan of the contextual menu after pasting. I think that would be confusing for users. Using my example from above, would it create a Header block for the H2 text that I pasted, ask if I wanted it pasted as text and if so, then remove the Header block and paste it back into the block where I had my cursor? Or would it paste as text by default at my cursor position and then only create a Header block if I selected another option? Both ways seem extremely confusing.

Most people expect that they'll have to re-format content that they paste from another source. If they're copying a sentence and they specifically want it as a Header, then they're more than likely going to paste it into a header block anyway. It seems pretty obvious that if you paste something into a paragraph block, then you actually want it as paragraph text.

Pasting should default to the type of block that you're pasting into;

• If you're pasting into a Paragraph block, then paste everything as plain text.
• If you're pasting into a Header block either:
  A) default it to h2 if it's plain text
  B) Keep the existing format (if it's a h1 to h6) or
  C) If there's multiple formats, strip everything and default to h2
• If you're pasting into a List Block then default it to a list.

[ZebulanStanphill]

@maddisondesigns Sounds good to me, though I would add that pasting into an empty Paragraph block would paste things as whatever they are (headings to Heading blocks, paragraphs to Paragraph blocks, lists to List blocks, etc.), since an empty Paragraph block does not really imply any particular block is desired yet (hence why the quick-add buttons and slash commands are used in them).

[maddisondesigns]

@SuperGeniusZeb I disagree with that. That's just going to get us back to the exact same issue I had in the first place, the inability to paste content into a paragraph block. When copying content from another source, there's a very good chance that I'd want it copied into a new paragraph so I would create a new Paragraph block first. If I specifically wanted it pasted as a heading, then I'd most likely create a heading block and then paste in the content. If I paste something into a Paragraph block, either paste everything as plain text or give me a _Paste as Text_ button.

[ellatrix]

@maddisondesigns I don't agree that we should always paste as the block the user pasted into, and strip all formatting, especially if it's a paragraph. I think we're doing quite good already in stripping all that is not semantic content, so it shouldn't bother the user as much as it does in the old editor.

I think pasting as plain text would be a bad default if the user is pasting from e.g. Google Docs, Word, or even a larger piece of an article on the web. In this particular case it seems you're pasting one line of text and expected an "inline" paste. We could consider always pasting content as inline text if there is only one block that needs to be created. Does this sound like a good solution? In addition we could also display some options before or after paste when the user is pasting HTML.

I'm happy to look for a solution once #5966 is merged.

[maddisondesigns]

@iseulde I disagree that what you're currently doing works well. I just tried the example you suggested in #5966 and the content that it pasted in was an absolute mess.

Copied

Pasted

For starters, if I happen to hit paste whilst the cursor is in the main page title, it simply pastes the whole content within the title block.

After that didn't work, I added my own page title and then tried pasting the content into a paragraph block. What I ended up with would take considerably more effort to fix than what it would've been to reformat from plain text.

Some of the content is pasted in paragraph blocks and then there's other content pasted into a Classic Block. Why!?

There's a list block with all the Share links. Why would I want that?

You're pasting in content which is visibly hidden, such as "Continue reading the main story" and "Share this Page" text. Why on earth would I want to paste content that A) I don't know exists, and B) is actually hidden so I cant see it?

The main title for the poem is a H2 and yet it's been copied into a Classic block, along with the rest of the poem. Not only that, you've converted it from a H2 in the original content to a <figcaption>. So instead of keeping the actual important part of the formatting, the H2, you've stripped that and kept <figcaption> instead. You've then also included the following paragraph in the <figcaption> and also added in a <br /> (which wasn't even in the original markup), instead of simply keeping it as a separate paragraph. Then there's the question of why was this put into a Classic block instead of a Heading Block and a couple of Paragraph blocks like the rest of the content?

If this is what pasting content in Gutenberg is going to result in, then you've just made it considerably more difficult to work with because now we'll have to paste it into a text editor first to strip everything ourselves, and then paste into Gutenberg.

At least with the current TinyMCE editor it does some form of cleanup and then if we find after pasting there's still some rubbish content, we have a _Paste as Text_ button to fallback on.

Can you please format the text to the type of block that I'm pasting into or if you're going to keep pasting this mess, at the very minimum, give us a _Paste as Text_ button.

[maddisondesigns]

And I forgot to mention after all that, your #5966 PR still isn't going to resolve my original issue, which is trying to paste some simple text into a paragraph block. Without a _Paste as Text_ button you've basically made it impossible. Just because I copy some text which happens to be formatted as a header (or even when its in multiple formats), doesn't mean that I automatically want it formatted exactly the same way in my own content. More than likely, if someone is pasting content from another site into their own content, they're going to want to reformat it so it matches the source content, not keep it as the original format.

[ellatrix]

I disagree that what you're currently doing works well. I just tried the example you suggested in #5966 and the content that it pasted in was an absolute mess.

Did you try #5966 with on the branch (with the patch applied)? I don't think so as it's impossible to to get a Classic block there.

For starters, if I happen to hit paste whilst the cursor is in the main page title, it simply pastes the whole content within the title block.

So you expect to always get plain text from paste, but are not happy with this result? Are you are happy with this result? I can't tell.

Some of the content is pasted in paragraph blocks and then there's other content pasted into a Classic Block. Why!?

Can't happen on #5966. The branch fixes that issue.

There's a list block with all the Share links. Why would I want that?

I don't think pasting as plain text will make this any better. You'll still be left with all the text from it and will have to delete it. I would actually prefer these to be isolated in a list so it can be easily deleted if copied by accident.

You're pasting in content which is visibly hidden, such as "Continue reading the main story" and "Share this Page" text. Why on earth would I want to paste content that A) I don't know exists, and B) is actually hidden so I cant see it?

Pasting as plain text is not going to solve that. I have a few ideas to filter screen reader content, you're solution won't help here at all.

The main title for the poem is a H2 and yet it's been copied into a Classic block, along with the rest of the poem. Not only that, you've converted it from a H2 in the original content to a

. So instead of keeping the actual important part of the formatting, the H2, you've stripped that and kept

instead. You've then also included the following paragraph in the

and also added in a
(which wasn't even in the original markup), instead of simply keeping it as a separate paragraph. Then there's the question of why was this put into a Classic block instead of a Heading Block and a couple of Paragraph blocks like the rest of the content?

This is fixed in #5966...

At least with the current TinyMCE editor it does some form of cleanup and then if we find after pasting there's still some rubbish content, we have a Paste as Text button to fallback on.

The current TinyMCE editor does less cleanup than Gutenberg does. Try pasting the poem in the current editor, go to text mode, and you'll see a lot more rubbish. :)

And I forgot to mention after all that, your #5966 PR still isn't going to resolve my original issue, which is trying to paste some simple text into a paragraph block.

I didn't say this will solve your issue. I said "I'm happy to look for a solution once #5966 is merged". That pull request as nothing to do with this ticket, I just mentioned that I'll wait to work on a solution until this pull request (big refactor) is merged. What do you think of the solution I did propose? https://github.com/WordPress/gutenberg/issues/6132#issuecomment-383701859 This will only fix smaller pieces that are pasted, but I think it's generally better behaviour. I don't see a solution for large pieces of content, because in some cases you'll want to preserve the HTML, in other text, so that's why I mentioned that we could have the option before or after paste, if HTML is being pasted.

[karmatosed]

Lots of insights and thinking in this thread. I am going to try and summarise a little, see if we can get to a solution point.

As @matias showed I still think this is a great option forward of having similar to what Ulyssess does for Command+shift+V. Whilst I understand the caution it really using it feels like a vast improvement over a button.

I do agree 100% with @iseulde in that pasting plain text as a default is not the best user experience. I think the offer there to look at a solution is a sound one and now #5966 is in let's move onto that.

[maddisondesigns]

@iseulde

Did you try #5966 with on the branch (with the patch applied)? I don't think so as it's impossible to to get a Classic block there.

You're right, I didn't try the new updates since they weren't currently merged into the plugin at the time. My point was to show that you weren't currently doing a good job of pasting after you specifically said "I think we're doing quite good already".

I've just tried the new updates now that it's been merged, and honestly, it's not much better.

Copying content from this page, you've somehow managed to inject a whole bunch of carriage returns and spaces into the content, that wasn't present in the source page. On top of that, you've also stripped out images and h2 tags.

So you expect to always get plain text from paste, but are not happy with this result? Are you are happy with this result? I can't tell.

My point was to show the inconsistency. The Title block is just another block, isn't it? When I paste content in to that block, why is it treating the content differently to every other block.

@karmatosed

I still think this is a great option forward of having similar to what Ulyssess does for Command+shift+V.

I'm still not a fan of that contextual popup. What happens when pasting mixed content? e.g. Say a heading, a paragraph and an unordered list of links? Does it show 3 popups for the three different types of content or just one, for the whole lot?

This whole issue could be resolved simply by having a _Paste as Text_ button. For those that are happy with the results of the default pasting and the multiple blocks that it creates, then nothing changes. The rest of us that just want a way to insert plain text, we'll have a button that provides us with that option. If the only option is having that contextual popup, then so be it. At least it gives us a way to insert plain text.

For a 'new and improved' editor, Gutenberg sure is making editing your content more difficult!

[ZebulanStanphill]

@maddisondesigns Actually, those carriage returns were always there. The editor just stripped out various HTML tags (like <h2>s that were nested in <li>s) but did not remove the spacing before those tags. Here is what some of the content looks like in the page source:

That is some ugly and confusing indentation/spacing in the website markup, but the editor should probably clean that up on paste and not leave empty lines of whitespace after stripping tags.

Some thoughts on the contextual pop-up idea:

Maybe the contextual pop-up should appear before actually pasting the content. Doing it after the paste sounds like it might be tricky to implement. So the workflow would be:

• Copy something.
• Use Ctrl/⌘+Shift+V.
• A contextual pop-up appears, asking if you want to paste the clipboard content as plain text within the current block, a single Custom HTML block, or convert it to whatever blocks make most sense to the editor.
• Once you select an option, the content is pasted. You could also just press Enter, which would do the default of pasting plain text (this would only be the default for Ctrl/⌘+Shift+V, not Ctrl/⌘+V).

If a “Paste as Text” button is added, it does not belong in a block toolbar, as it really should not be specific to any one block. The button should be put in the top bar of the editor next to the Undo and Redo buttons. Actually, if there is going to be a button at all, it might as well be a “Paste as…” button that opens a modal/pop-up when pressed allowing you to select how the content is pasted (much like the contextual pop-up mentioned above, which would probably be unnecessary if a button was added).

That said, I am not sure that pasting as plain text is something that is used enough to warrant a dedicated button in the UI, since you can already use Ctrl/⌘+Shift+V to paste as plain text, and doing it via the keyboard is always going to be faster anyway. Maybe I am wrong and it does need a dedicated button, but I personally do not feel the need for one.

[maddisondesigns]

@SuperGeniusZeb I've never once used Ctrl/⌘+Shift+V. I've always used Ctrl/⌘+V, as I'm sure most people do.

[ZebulanStanphill]

@maddisondesigns I am used to using the shortcut frequently since it exists in WordPress in the Classic Editor, Microsoft Office, LibreOffice, Gmail, and a multitude of other programs. I thought it was fairly common knowledge since the shortcut seems to be so ubiquitous in programs with formatted text entry.

[ellatrix]

Copying content from this page, you've somehow managed to inject a whole bunch of carriage returns and spaces into the content, that wasn't present in the source page. On top of that, you've also stripped out images and h2 tags.

We currently don't support nested blocks inside lists so this is why.

My point was to show the inconsistency. The Title block is just another block, isn't it? When I paste content in to that block, why is it treating the content differently to every other block.

Sure, we can change it so that it behaves just the same as other blocks.

[JimBoone]

I haven't used Gutenburg very long but I must agree with maddisondesigns that the paste function is not acceptable. I had a word document that I wanted to add to a post - nothing fancy just one header and several paragraphs of text. I created a header in the post and typed in the text then created an empty paragraph block and pasted the text from the word document into it. It appeared to work but the paragraph block didn't display when I previewed the post or when I published it. It was only visible in the edit mode. My work around was to paste the text into notepad then copy the text and paste into the text block. Even so there were some odd things going on with carriage returns. 11/4/2018

[codewithfeeling]

I have just seen a client of mine make a royal mess of their content by pasting in content with hidden linebreaks. They don't show up unless you edit the block as HTML.

It's not very clear that there is a keyboard shortcut to paste in as text (Control / Command + Shift + V). And I don't expect that a lot of clients would know what it meant to paste in without formatting.

Not sure what the most elegant solution is but I am simply agreeing there is a problem with this.

[benhuson]

I have recently stumbled across an odd issue when pasting from Word which is any reason a paste-as-text option would be immensely useful.

I have a Word doc containing a mixture of standard paragraph, bold and underlined text etc. It is a working document which has has been edited by many people as is typical with many Word documents when preparing copy for a web site.

When copy and pasting into Gutenberg it is styling many of the standard paragraph bits of text as bold.

On investigating further, I saved the Word doc directly as HTML to see what was being produced and found many of the standard paragraphs were markup up like this:

<p class=MsoNormal><strong><span style='font-family:"Calibri Light",sans-serif;
mso-ascii-theme-font:major-latin;mso-hansi-theme-font:major-latin;mso-bidi-theme-font:
major-latin;color:black;mso-themecolor:text1;background:white;font-weight:normal;
mso-bidi-font-style:italic'>Text goes here. <o:p></o:p></span></strong></p>

For some reason Word has marked up a normal paragraph to include <strong> tags and then styling it to be normal weight. I presume Gutenberg is then stripping out all the custom WordPress styling and being left with the strong tags.

There is no indication in Word that this paragraph should be marked as bold or is wrapped in bold styling in any way - the B button is not highlighted and there is no indication that the text has any other custom styling.

I cannot explain why Word would markup content in this way - certainly if I recreate the paragraph in a new Word doc from scratch by typing, I can copy and paste fine so I imagine this is something that can occasional happen in Word after various iterations of text being styled, bolded and unbolded etc.

I don't expect this is a scenario that is fixable, but it does highlight the need for a user to optionally be able to paste as text if they would prefer to start from some clean pasted text.