Paste: Internet Explorer: Multi-paragraph Microsoft Word document yields single block

[troytempleman]

Description of the bug

Copying and pasting text from Microsoft Word into the Gutenburg editor in Internet Explorer gives undesirable results. The title pastes fine but the remaining text all gets pasted into one block, with no paragraph breaks or formatting from the Word document.

To Reproduce

1. Copy title Lorem ipsum dolor... from https://github.com/WordPress/gutenberg/files/2367501/Word.docx and paste into Gutenburg editor in Internet Explorer
2. Copy remaining text from Word document and paste into Gutenburg editor, underneath above title.

Expected behavior

Pasted text should retain the same formatting as in the Word document.

Screenshots

Desktop

• Windows NT 10.0
• Internet Explorer 11
• See whatsmybrowser.org/b/VNVP2Y7 for more information

Additional context

• WordPress 4.9.8 and Gutenburg 3.7.0

[designsimply]

Thank you for reporting this! Noting that you've tested different browsers is valuable and I see that you reported the same issue for Chrome on Windows 10 at #9761, and I would like to consolidate this report together with #9719 as it looks the same to me. If you think this issue should remain open separately, please let me know.

Also thank you for including a link to a sample file!

[troytempleman]

Hi Sheri,

I posted them separately because the pasting result is different in Chrome and Explorer.

The Chrome issue in #9761 does appear to be the same as #9719 so its fine to close that one. However, I believe this Explorer issue #9759 should remain open. Font styles aren't inserted in Explorer as they in Chrome, but the text looses its formatting from the Word document (i.e. paragraph breaks, lists, etc.).

Please let me know if you need clarification.

Thanks!

[mcsf]

@troytempleman, thanks for the report. Could you provide the console output from that pasting action?

[troytempleman]

@mcsf, there's nothing in console, at least not in Explorer where this issue is (see screenshot below).

.

@designsimply, can you please reopen this issue?

Thanks!

[mcsf]

@troytempleman, I'm not used to Internet Explorer anymore, so forgive me if this is a dumb question, but in that screenshot it looks like there's some filtering abiliity that may be hiding output? Specifically, this:

[troytempleman]

@mcsf I'm not used ot it either, lol. Funny thing, today I went back and I get the following in the Warnings tab (second icon from the left):

DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
post.php
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
post.php
JQMIGRATE: Migrate is installed, version 1.4.1
value prop in color objects passed by withColors HOC is deprecated and will be removed from Gutenberg in 3.9. Please use color prop passed in the object instead. Note: This is a global warning, shown regardless of whether value prop is used.
wp.editor.RichTextProvider is deprecated and will be removed from Gutenberg in 4.0.0. Please use wp.data.select( 'core/editor' ) methods instead. Note: This is a global warning, shown regardless of whether the component is used.
Received HTML:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet hendrerit auctor. Nam lobortis, est vel lacinia tincidunt, purus tellus vehicula ex, nec pharetra justo dui sed lorem. Nam congue laoreet massa, quis varius est tincidunt ut.

Cras imperdiet pulvinar nisi sed semper. Vestibulum vestibulum, odio at gravida fermentum, magna est pulvinar diam, ac sollicitudin mi lectus at tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec sodales ipsum eu metus lobortis, eget mattis mauris aliquam. Mauris a gravida elit.

Nulla facilisi. Nunc lobortis faucibus faucibus:
• Nam id libero imperdiet felis vulputate rhoncus
• Curabitur consequat, magna a viverra finibus, ligula enim consequat dolor, eu luctus lorem orci sit amet ante.
• Donec laoreet rutrum ipsum, quis dapibus nulla commodo dapibus.

Fusce gravida sodales nisl quis vehicula. Nam
Received plain text:

Processed HTML piece:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet hendrerit auctor. Nam lobortis, est vel lacinia tincidunt, purus tellus vehicula ex, nec pharetra justo dui sed lorem. Nam congue laoreet massa, quis varius est tincidunt ut.

Cras imperdiet pulvinar nisi sed semper. Vestibulum vestibulum, odio at gravida fermentum, magna est pulvinar diam, ac sollicitudin mi lectus at tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec sodales ipsum eu metus lobortis, eget mattis mauris aliquam. Mauris a gravida elit.

Nulla facilisi. Nunc lobortis faucibus faucibus:
• Nam id libero imperdiet felis vulputate rhoncus
• Curabitur consequat, magna a viverra finibus, ligula enim consequat dolor, eu luctus lorem orci sit amet ante.
• Donec laoreet rutrum ipsum, quis dapibus nulla commodo dapibus.

Fusce gravida sodales nisl quis vehicula. Nam

[troytempleman]

...and the following in the Messages tab (third icon from the left):

HTML1300: Navigation occurred.
post-new.php
HTML1202: https://.../wp-admin/post-new.php is running in Compatibility View because 'Display intranet sites in Compatibility View' is checked.
post-new.php
JQMIGRATE: Migrate is installed, version 1.4.1
Received HTML:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet hendrerit auctor. Nam lobortis, est vel lacinia tincidunt, purus tellus vehicula ex, nec pharetra justo dui sed lorem. Nam congue laoreet massa, quis varius est tincidunt ut.

Cras imperdiet pulvinar nisi sed semper. Vestibulum vestibulum, odio at gravida fermentum, magna est pulvinar diam, ac sollicitudin mi lectus at tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec sodales ipsum eu metus lobortis, eget mattis mauris aliquam. Mauris a gravida elit.

Nulla facilisi. Nunc lobortis faucibus faucibus:
• Nam id libero imperdiet felis vulputate rhoncus
• Curabitur consequat, magna a viverra finibus, ligula enim consequat dolor, eu luctus lorem orci sit amet ante.
• Donec laoreet rutrum ipsum, quis dapibus nulla commodo dapibus.

Fusce gravida sodales nisl quis vehicula. Nam
Received plain text:

Processed HTML piece:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet hendrerit auctor. Nam lobortis, est vel lacinia tincidunt, purus tellus vehicula ex, nec pharetra justo dui sed lorem. Nam congue laoreet massa, quis varius est tincidunt ut.

Cras imperdiet pulvinar nisi sed semper. Vestibulum vestibulum, odio at gravida fermentum, magna est pulvinar diam, ac sollicitudin mi lectus at tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec sodales ipsum eu metus lobortis, eget mattis mauris aliquam. Mauris a gravida elit.

Nulla facilisi. Nunc lobortis faucibus faucibus:
• Nam id libero imperdiet felis vulputate rhoncus
• Curabitur consequat, magna a viverra finibus, ligula enim consequat dolor, eu luctus lorem orci sit amet ante.
• Donec laoreet rutrum ipsum, quis dapibus nulla commodo dapibus.

Fusce gravida sodales nisl quis vehicula. Nam

[mcsf]

@troytempleman: could you share all that output once more, but using GitHub/Markdown's syntax for preformatted text? That way we can get the full HTML and better debug.

In case you're not familiar with the backtick-based (`) syntax:

Input

Output

Any <strong>content</strong> in between these triple backticks
  will be kept as-is.

[troytempleman]

Yes @mcsf, sorry about that. Output seems a bit different this time though, even though I followed the same process.

This is from the Warnings tab:

HTML1300: Navigation occurred. about:blank HTML1527: DOCTYPE expected. Consider adding a valid HTML5 doctype: "<!DOCTYPE html>". about:blank (1,1) DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337 about:blank DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337 post-new.php HTML1300: Navigation occurred. post-new.php HTML1202: https://.../wp-admin/post-new.php is running in Compatibility View because 'Display intranet sites in Compatibility View' is checked. post-new.php JQMIGRATE: Migrate is installed, version 1.4.1 value prop in color objects passed by withColors HOC is deprecated and will be removed from Gutenberg in 3.9. Please use color prop passed in the object instead. Note: This is a global warning, shown regardless of whether value prop is used. wp.editor.RichTextProvider is deprecated and will be removed from Gutenberg in 4.0.0. Please use wp.data.select( 'core/editor' ) methods instead. Note: This is a global warning, shown regardless of whether the component is used.

This is from the Messages tab:

HTML1527: DOCTYPE expected. Consider adding a valid HTML5 doctype: "<!DOCTYPE html>". about:blank (1,1) DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337 about:blank DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337 post-new.php JQMIGRATE: Migrate is installed, version 1.4.1 value prop in color objects passed by withColors HOC is deprecated and will be removed from Gutenberg in 3.9. Please use color prop passed in the object instead. Note: This is a global warning, shown regardless of whether value prop is used. wp.editor.RichTextProvider is deprecated and will be removed from Gutenberg in 4.0.0. Please use wp.data.select( 'core/editor' ) methods instead. Note: This is a global warning, shown regardless of whether the component is used.

[troytempleman]

I just noticed IE was in Compatibility View above and Gutenburg wasn't up to date. I just turned off Compatibility View and updated Gutenburg to 3.9.

This is what I get in the Warnings tab:

`HTML1300: Navigation occurred.
post-new.php
JQMIGRATE: Migrate is installed, version 1.4.1
Received HTML:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet hendrerit auctor. Nam lobortis, est vel lacinia tincidunt, purus tellus vehicula ex, nec pharetra justo dui sed lorem. Nam congue laoreet massa, quis varius est tincidunt ut.

Cras imperdiet pulvinar nisi sed semper. Vestibulum vestibulum, odio at gravida fermentum, magna est pulvinar diam, ac sollicitudin mi lectus at tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec sodales ipsum eu metus lobortis, eget mattis mauris aliquam. Mauris a gravida elit.

Nulla facilisi. Nunc lobortis faucibus faucibus:
• Nam id libero imperdiet felis vulputate rhoncus
• Curabitur consequat, magna a viverra finibus, ligula enim consequat dolor, eu luctus lorem orci sit amet ante.
• Donec laoreet rutrum ipsum, quis dapibus nulla commodo dapibus.

Fusce gravida sodales nisl quis vehicula. Nam
Received plain text:

Processed HTML piece:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet hendrerit auctor. Nam lobortis, est vel lacinia tincidunt, purus tellus vehicula ex, nec pharetra justo dui sed lorem. Nam congue laoreet massa, quis varius est tincidunt ut.

Cras imperdiet pulvinar nisi sed semper. Vestibulum vestibulum, odio at gravida fermentum, magna est pulvinar diam, ac sollicitudin mi lectus at tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec sodales ipsum eu metus lobortis, eget mattis mauris aliquam. Mauris a gravida elit.

Nulla facilisi. Nunc lobortis faucibus faucibus:
• Nam id libero imperdiet felis vulputate rhoncus
• Curabitur consequat, magna a viverra finibus, ligula enim consequat dolor, eu luctus lorem orci sit amet ante.
• Donec laoreet rutrum ipsum, quis dapibus nulla commodo dapibus.

Fusce gravida sodales nisl quis vehicula. Nam`

This is what I get in the Messages tab:

`JQMIGRATE: Migrate is installed, version 1.4.1
Received HTML:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet hendrerit auctor. Nam lobortis, est vel lacinia tincidunt, purus tellus vehicula ex, nec pharetra justo dui sed lorem. Nam congue laoreet massa, quis varius est tincidunt ut.

Cras imperdiet pulvinar nisi sed semper. Vestibulum vestibulum, odio at gravida fermentum, magna est pulvinar diam, ac sollicitudin mi lectus at tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec sodales ipsum eu metus lobortis, eget mattis mauris aliquam. Mauris a gravida elit.

Nulla facilisi. Nunc lobortis faucibus faucibus:
• Nam id libero imperdiet felis vulputate rhoncus
• Curabitur consequat, magna a viverra finibus, ligula enim consequat dolor, eu luctus lorem orci sit amet ante.
• Donec laoreet rutrum ipsum, quis dapibus nulla commodo dapibus.

Fusce gravida sodales nisl quis vehicula. Nam
Received plain text:

Processed HTML piece:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet hendrerit auctor. Nam lobortis, est vel lacinia tincidunt, purus tellus vehicula ex, nec pharetra justo dui sed lorem. Nam congue laoreet massa, quis varius est tincidunt ut.

Cras imperdiet pulvinar nisi sed semper. Vestibulum vestibulum, odio at gravida fermentum, magna est pulvinar diam, ac sollicitudin mi lectus at tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec sodales ipsum eu metus lobortis, eget mattis mauris aliquam. Mauris a gravida elit.

Nulla facilisi. Nunc lobortis faucibus faucibus:
• Nam id libero imperdiet felis vulputate rhoncus
• Curabitur consequat, magna a viverra finibus, ligula enim consequat dolor, eu luctus lorem orci sit amet ante.
• Donec laoreet rutrum ipsum, quis dapibus nulla commodo dapibus.

Fusce gravida sodales nisl quis vehicula. Nam`

@mcsf as you can see, this is just plain text with no HTML markup, with the exception of one paragraph tag. This is exactly how it appears to me in Console.

[mcsf]

I'm sorry to ask again 😅 but could you escape that output with the triple backticks? It seems only a single backtick was used. I want to be sure I don't miss anything in the output — thanks!

[troytempleman]

Sorry @mcsf, I went back today and no errors or messages in any tabs. I tried to reproduce but no luck.

[catapultcc]

Same problem here.
Copy text from Microsoft Word (Office365) and paste it into a Guttenberg block:

[mcsf]

Likely duplicate report in today's core-editor chat.

[troytempleman]

@catapultcc that looks more like issues #9761 and #9719, which is also a problem. However, I think it's important to point out this is not the same issue, as suggested in today's core-editor chat.

From my testing, there are two different issues, in two different browsers:

1. Paste from Chrome inserts font style code but retains proper formatting in the text (paragraphs, lists, etc.)
2. Paste from Internet Explorer doesn't insert font style code but no formatting either (no paragraphs, lists, etc.)

[ellatrix]

Unfortunately I cannot easily test Word on Windows and paste in Internet Explorer.

From the log messages you provided, it seems like we're only provided with plain text. Unfortunately we cannot do much with that. I created #16216 to at least parse the plain text into paragraph blocks, but we can't do anything more.

I'd suggest you use MS Edge or Chrome. :)

[youknowriad]

IE11 support is being dropped, context:

• https://make.wordpress.org/core/2021/03/04/discussion-dropping-support-for-ie11/
• https://make.wordpress.org/core/2021/03/25/discussion-summary-dropping-support-for-ie11/
• https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/

I'm closing this issue as it's not something we'll be investing in.