Prosemirror: Simple Copy Paste from google docs yields bold text

Created on 26 Sep 2016  路  5Comments  路  Source: ProseMirror/prosemirror

Tested locally running 0.10 and on http://prosemirror.net/demo/basic.html

Browser: Chrome V53
OS: OS X El Capitan

Steps to reproduce:

  1. Copy a plantext from google docs (text with default styling, no heading, no bold/italic, etc)
  2. Paste into ProseMirror

Expected:
Text is pasted normally as plain text.

Actual:
Text is pasted as bold text.

Debugging:
Looks like google docs has some crazy html backing even their plain text. When I log the html in the dataTransfer in fromClipboard() I get the following (line breaks introduced for clarity):

<meta charset='utf-8'>
<meta charset="utf-8">
<b style="font-weight:normal;" id="docs-internal-guid-27f6cb80-6774-abca-7723-8fd5aa0d3c3a">
<span style="font-size:14.666666666666666px;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Hello world</span>
</b>

As you can see there is indeed a <b> element but it has style="font-weight:normal" which is fairly crazy but we should still support this.

Fix within ProseMirror or should I use the paste hooks to do my own google docs cleaning?

Most helpful comment

Clipboard behavior is part of the user-facing app quality, though.

All 5 comments

Thanks for posting this as I have been copying and pasting a lot of Google Docs into prosemirror lately.

I realized Google Docs caused this annoying style issue but didn't get to the root cause. Kinda weird set-up they have. Wonder what the rationale for that design decision was...

Urgh, they use <b> tags for their plain content. Didn't get the semantic HTML memo, it seems.

Attached patch adds a specific parsing rule to the basic schema that works around this.

Oh, didn't get cross-repo issue linking right. The patch I meant is https://github.com/ProseMirror/prosemirror-schema-basic/commit/cbbdc1a6915047bc169d8fca7821fc07a31c0e35

Thanks for the quick fix!

For what it's worth, google docs is not designed to render a webpage. It's designed to be a web app version of a word processor. It could have been implemented with canvas for all google cares. So I'm not shocked that it has crazy markup.

Clipboard behavior is part of the user-facing app quality, though.

Was this page helpful?
0 / 5 - 0 ratings