Whitespace and formatting lost when pasting from web based Microsoft Word into Portable Text

[marcusforsberg]

Describe the bug

These are technically two, potentially related, issues.
When pasting text from a Word document, in this case the web based version, into a Portable Text Editor, there are two issues:

1. It seems that when using non-English characters such as åäö, Sanity will randomly strip spaces between words, merging words into one.
2. Formatting doesn't appear to be respected at all, even basic formatting such as bold and italic is removed when pasting from Word, but it works when pasting from Google Docs.

To Reproduce

Steps to reproduce the behavior:

1. Open this sample Word document in the web based version of Microsoft Word: Sanity Portable Text Editor bug.docx
2. Copy its entire contents
3. Paste the text using CMD/CTRL + V into a Portable Text field in Sanity
4. Notice that spaces in most of the Swedish sentences are randomly stripped away
5. Notice that no formatting was included
6. You can read through the text in the document for my findings, but it clearly appears that the whitespace issue happens in sentences using åäö.

Expected behavior

When copy/pasting text from Word, Editors expect whitespace to be intact and basic formatting such as bold, italic and underline to be respected. This is already the case when using Google Docs.

Even copy/pasting the text from the sample Word document into Google Docs, and then copy/pasting from there into Sanity, everything works fine.

Screenshots

This shows the resulting text in the Portable Text editor:

Here's a video of the issue happening, and also showing how it works as expected when going via a Google Doc.

Screen.Recording.2024-12-16.at.10.38.43.mov

Looking at the HTML output of the Word editor, it appears that it's adding individual span tags around the spaces that are being removed:

Which versions of Sanity are you using?

@sanity/cli (global)             3.67.1 (up to date)
@sanity/icons                     3.5.2 (up to date)
@sanity/image-url                 1.1.0 (up to date)
@sanity/orderable-document-list   1.2.2 (up to date)
@sanity/preview-url-secret        2.0.5 (up to date)
@sanity/studio-secrets            3.0.0 (up to date)
@sanity/table                     1.1.2 (up to date)
@sanity/ui                       2.10.9 (up to date)
@sanity/vision                   3.67.1 (up to date)
@sanity/webhook                   4.0.4 (up to date)
sanity                           3.67.1 (up to date)

What operating system are you using?

MacOS 14.6.1 in Google Chrome, but the issue is not browser specific and has been reported by our client's editorial team running on Windows machines and different browsers.

Which versions of Node.js / npm are you running?

10.5.0
v20.12.0

Additional context

In this comment it's stated that Word should be supported when copy/pasting, but it's the only information I found on the topic so I'm not sure if that's still the case, but I'm hoping it is: #1437 (comment)

Couple of related issue around formatting, but I'm opening this specifically since it appears to be an åäö-issue: #3834 #3240

[devkobby24]

I'm facing a similar issue
All my formatting gets lost when i render my post content on my webapp

[bobinska-dev]

Hello everyone!
We can reproduce the copy paste issue – although copy/pasting from the online version of word will lead to different paste results depending if the word document is opened in viewer or editor mode (even when pasting into other rich text editors and apps).
One cause for the whitespace issue is that Word spellcheck will add wrapping spans around each spell error, leaving empty spans (" ") as mentioned in the description.
Copying from the desktop version of the app works as expected (both formatting and spaces).
We will investigate this further.

Regarding your issue @devkobby24, this seems not to be related and is probably related to setting up your Portable Text component. To get help with anything not working after following the docs about Presenting Portable Text, you can join our Slack community and state your issue in the help channel. Make sure to add more context though, since in-complete questions might be skipped.

[devkobby24]

Alright @bobinska-dev
I had to create my style component and pass it a prop to the PortableText component for it to work