how to preserve white spaces when pasting HTML with leading whitespaces

1

When pasting content (from other source) with leading whitespaces, like

<p>   hello</p>

the leading whitespaces would will be lost. I debug the code and found the preserveWhitespace is false in parseFromClipboard function (clipboard.ts)

CleanShot 2024-12-09 at 15.28.15@2x
CleanShot 2024-12-09 at 15.28.15@2x1878Ă—782 119 KB
Seems if I paste content with [data-pm-slice] attribute, it will preserve whitespace. is there an other way to preserve whitespace if pasted content has no [data-pm-slice] attribute?

Thanks.

2

Where is this HTML coming from? The library collapses space in HTML input, because that’s how HTML is generally rendered. I haven’t ran into a situation where HTML from an external source treats whitespace this way before—and if you were to set the editor up like this, preserving such space, I suspect you’d get issues with unintended whitespace showing up in your document when people copy-paste from random websites.

3

Thanks for your reply. This HTML is copied from our internal web application. The complete content read from the clipboard is:

<div>
  <p style="white-space: pre; display: inline; margin-top: 0; margin-bottom: 0;">
    <span>          hello</span>
  </p>
</div>

The leading spaces will be visible if I paste them to Notes app on Mac or Gmail compose editor, but not visible for prosemirror.

4

Okay, I guess it would be reasonable to preserve white space inside an element marked white-space: pre. Doing it for clipboard content in general wouldn’t be a good idea—people pasting from websites will get all kinds of unintended white space in their documents. This patch adds logic to the parser to preserve white space in this situation.

2 Likes
5

thank you @marijn