Issues when pasting into post title field

[claudiulodro]

Description

While doing some in-depth testing around copy + pasting into the post title field of the editor, I noticed a few issues:

1. When pasting headings with a lot of formatting from Google Docs into the post title field, a bunch of the original formatting is initially displayed in the editor. This is really just a visual issue, as it doesn't cause issues on the frontend and goes away when a post is re-visited in the editor.
2. When pasting strings with certain characters into the post title field, it's possible to generate permalinks that can cause redirection issues or crash browsers.
3. When pasting a full line heading from Google Docs into the post title field in Safari, certain headings crash the editor and the whole browser.

Step-by-step reproduction instructions

To reproduce issue 1 around pasting formatted content from Google Docs into the title field:

1. Create a Google Doc. Add some headings with a bunch of formatting to the doc.
2. Copy one of the headings. Paste it into the title field of the editor. Observe much of the styling carries over (color, sometimes size, sometimes font weight, etc.)
3. Save post. Re-open editor. Observe post title doesn't have all that extra formatting applied and looks normal.
   This screen recording demonstrates this issue well:
   

To reproduce issue 2 around permalink generation when certain characters are in the title:

1. Copy this string, including the character at the end which displays as [obj] or an empty space, depending on your browser:

Orange County Cities Continue Grappling With State Mandated Housing Goals This Week

2. Paste it into the title field. Publish the post. The generated permalink and title will look like this in different browsers:

Chrome:

Safari:

The presence of this character in URLs seems to cause difficulties for some users' browsers, and can crash the tab when a user visits a link with the character in it. I am unsure how to get that character "naturally" in the clipboard, but it seems to happen when copy + pasting from something (I've encountered it on a number of sites I manage following the WP 5.9 release).

To reproduce issue 3 around the Safari crashing when a heading is pasted into the title field:

1. This doesn't seem to happen with every Google Doc, but it does happen with many in my testing. In Safari, copy the full heading line to the clipboard and paste it into the post title field. Observe the browser crashes. In the below screen recording, I copy the heading line, paste it, Safari crashes and reloads, I paste it again, Safari crashes and doesn't reload:
   

Screenshots, screen recording, code snippet

See steps to reproduce

Environment info

I tested on a clean site running only WP 5.9 (using the version of Gutenberg that ships with WP 5.9). Theme was Twenty Twenty Two, but I can reproduce with other themes. I tested with Safari and Chrome. Device was a MacBook Pro.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[gwwar]

@claudiulodro thanks for the report! Do you happen to have any extra plugins running? I'm having trouble reproducing issues 2/3 on 5.9

We use the object replacement character internally in the rich text package, so some havoc can occur if it slips in via paste. Most commonly folks were copy pasting in MS Word.

We previously worked around this in #34851

[claudiulodro]

Thanks for the reply! That's good info. I reproduced these on a clean site with no extra plugins, specifically for testing these issues, but I'm sure it does probably vary depending on browser version, OS, when a Google Doc was written (I bet the internal markup changes occasionally), etc.

For item 2 specifically, I've been receiving a number of reports and noticing it across many of the sites we host following WP 5.9. In talking to the customers, it does appear that the one thing they have in common is that they write the posts in an external editor and then paste them into WP, so MS Word seems like a good theory. I'll continue collecting data as I encounter the issue and follow up if I get more concrete facts. :)

[gwwar]

Chatting with @claudiulodro this might require Safari 14 to reproduce. I do see some slightly different behavior on Safari 14 vs 15 but I'm still having trouble reproducing the wrong permalink url / safari crash.

@claudiulodro if you can consistently reproduce this, would you be interested in proposing a patch? I'm happy to help review.

[Robertght]

I experienced this recently as well, but the text was copied from a page created with Gutenberg and added that inside a post later.

In this case, it only appears in Firefox.

[gwwar]

Hmm, I still didn't have luck reproducing on Firefox. I'll maybe try to bulletproof the slug creation logic to remove the object replacement character, and ask y'all to test in a bit.

[annezazu]

I can replicate this repeatedly in Chrome when pasting into the Post Title. Most recently could replicate on the Make Network when writing a post for Make Test.

[gwwar]

@annezazu do you see the same behavior in this branch? #39033

[fringillas]

I have a similar situation on WP 5.9.1. If you paste from MS Word into the post title on a mac in chrome, you will get a "?" at the end of the title when the draft is saved. The styling from MS Word is visible in WP until the draft is saved, after saving the normal post title styling is visible plus the added "?".

The permalink is also affected, and gets a ""-char at the end. I can't really replicate this permalink-behavior, it only seem to happen sometimes.

[claudiulodro]

Adding a few more data points: I had a 3 more reports of the  issue yesterday. In all cases, the users were pasting the title from Google Docs or MS Word into the post title field.

[eduardogoncalves]

Hello, I'm having the same issue here. I noticed this is happening when I'm blogging on macOS. When I copy a text, like the title of an article (https://g1.globo.com/mt/mato-grosso/noticia/2022/03/08/mulher-que-matou-amiga-com-facada-no-peito-em-mt-e-condenada-a-10-anos-de-prisao.ghtml) and paste it into my post title, on macOs it doesn't show any char/space at the end of the string. But when I open it on Windows machine, it displays an [obj] char at the end.

In the original site title it doesn't show any special char, it looks like gutenberg is adding it.

[gwwar]

@dmsnell would you be available to help keep an eye on this one, since I'll be less available to contribute as often? From the reports, it's highly likely that there's still an issue here, but the tricky part is being able to reproduce the issue. We're likely missing environment/browser details or additional steps.