Draft-js: Paste from Google Docs

[gesposito]

I'm addressing a particular use case where I should paste content copied from a generic Google Docs document.
So far, on a Mac with OS X 10.11 with Chrome 50 whenever I try to do so, somehow the whole document get styled 'BOLD'.
If I try to do the same, but going through the "Notes" app (copy > paste > copy > paste), then the content looks alright.
I'm not sure where I should look at while trying to address such issue, any idea?

[aem]

This is an issue you should probably handle yourself, it seems out of scope for this kind of a library to handle the nuances of Google Docs' clipboard handling. If you look at the clipboard content coming from Google Docs (set a breakpoint inside of a handlePastedText handler) you'll see that Google Docs surrounds its entire HTML structure in a <b> tag, which Draft technically handles correctly. I have an in-house solution that I'm planning on open-sourcing soon, but the gist of it is you need to process the HTML to extract the inner HTML elements and then use Modifier to insert the result into the document.

[sophiebits]

Google Docs surrounds its entire HTML structure in a <b> tag

why would it do that… @_@

[aem]

¯_(ツ)_/¯ not sure why the wrapping in a <b> tag, but all of their blocks are styled inline, so a bold chunk of text is a <span style="...;font-weight:700;...">, etc. Writing the parser was a party

[gesposito]

Thanks @aem, I wasn't sure what was happening, I'm having a look at the solution you're suggesting.

[aem]

As followup, today I open-sourced the solution that I built internally. Doesn't cover all cases, but should be enough to get started. Contributions welcome :)

[khudiiash]

This worked for me

handlePastedText = (text, html,editorState) => {
      const blocksFromHTML = convertFromHTML(html.replace(/<b/g,'<p').replace(/<\/b/,'</p'));
      const newState = ContentState.createFromBlockArray(
        blocksFromHTML.contentBlocks,
        blocksFromHTML.entityMap,
      );

      this.onChange(EditorState.push(editorState, newState, 'insert-fragment'))
      return true
  }