Copy/paste from Google Docs messed up formatting

[JON418]

Barebone block editor. I tested a lot of scenarios, all lead to this :

• The Heading format seems to get through
• Every block is wrapped in Bold
• The correct styling never gets applied (bold, italic, underlined, etc.)
• Bullet lists and Numbered lists serializing is broken

====================================

====================================

[kmelve]

Hi @JON418, and thanks for your bug report! What platform and browser are you on? And what version of the studio?

[JON418]

Hi @kmelve ! I'm on Windows 10, having the issue on both Google Chrome and Firefox, Studio v0.141.6

Console doesn't fire any errors or warning upon the paste event.

I'm planning to update the Studio, and maybe scaffold a new project to see if it might be environment related or not. Will keep you posted.

[JON418]

Updated studio to v0.142.0, same issue.

Tried pasting from Microsoft Word .docx file and it works fine, if that is of any help.

[JON418]

@kmelve Update : just tested on a Mac and it worked almost perfectly! Bold, italic and lists worked as expected, but the underline and strikethrough did not. So, left aside the underline and strikethrough not working, which seems to be another issue, the initial issue seems to be Windows related.

[kmelve]

Thanks for investigating! It seems to be some cross-platform incompatibilities. We have made an effort to have paste-with-formatting work at least for HTML, Word, and Google Docs, so I've added this as a bug in our internal tracking. Stay tuned!

[Arjun99]

This happens because you have added {list-style-position: inside} for your ol or ul or li tags. Either you can remove that or.

The structure of bulletted list from google docs when pasted will be like:

• Content

If you could convert this p tag to span. It will be aligned.
This is how i handled this scenario.
handlePasteOnEditor(event) { //This function can be called using jquery on binding the paste event
if (event.hasOwnProperty('stop')) {
var htmlContent = event.data.dataTransfer.getData('text/html');
var plainContent = event.data.dataTransfer.getData('text');
this.contentPasteEvent = { htmlContent: htmlContent, plainContent: plainContent };
event.stop();
}
newElement.innerHTML = this.contentPasteEvent.htmlContent

var newElement = document.createElement('div')
newElement.style.display = "none"
console.log(newElement)

if (ul.length > 0) {

for (let i = 0; i < ul.length; i++) {
  var list = ul[i].children
  $(list).css('white-space', "") 
  $(list).css('margin-left',"")
  
  for (let j = 0; j < list.length; j++) {
    
    (<HTMLElement>list[j]).innerHTML =  list[j].textContent 

  }
}

}
textAreaId.innerHtml=newElement.innerHTML
newElement.remove()

}

[rexxars]

We're continuing to improve the paste handling from various sources, but a lot has changed since 2019 - let us know if you're still seeing things that needs to be improved :)

[eghernqvist]

This seems to be wonky still, unless I'm missing something?

From a .docx file in Google Docs. Also tried from a normal Google Docs doc to no avail:

Into Sanity portable text:

Versions

@sanity/cli             2.32.0 (latest: 2.35.0)
@sanity/base            2.33.0 (latest: 2.35.0)
@sanity/core            2.33.0 (latest: 2.35.0)
@sanity/desk-tool       2.33.0 (latest: 2.35.0)