`white-space` CSS property of clipboard data not respected when pasting in rich text editor

Bug
1

Priority/Severity:

Medium

Platform:

Operating System

  • Windows 11

Browser

  • Google Chrome 139.0.7258.128

Discourse

028c90dd5e7a2799ea5b6e963f71fc0222681943

Description:

Text copied from some sources may be stored in the clipboard in a formatted form (text/html type) in addition to plaintext (text/plain).

When text is pasted into the composer, if a formatted data type is present in the clipboard then this data is used instead of the plaintext type.

By default, whitespace in HTML content is collapsed. This behavior can be controlled via the white-space CSS property.

:bug: When pasting in the composer when in “rich text editor” mode, the white-space CSS property of the clipboard data is not respected. This results in whitespace always being collapsed in the pasted content. In cases where the source content had a white-space property set to the pre value, this results in the pasted content being difficult to read, and incorrect in cases where the whitespace of the source content had technical significance.

Reproducible steps:

  1. Create an HTML file with the following content:
    <html>
  <body>
    <span style="white-space: pre">foo
bar
    </span>
  </body>
</html>
  2. Open the file in your web browser.
    Note that the whitespace of the page content is not collapsed:
    foo
bar
  3. Copy the content of the web page.
  4. Open the post composer.
  5. Put the composer into the “rich text editor” mode.
  6. Paste the copied content.

:bug: Instead of having the same format as the copied content, the whitespace of the pasted content was collapsed:

foo bar

Additional context:

I see that ProseMirror does support white-space: pre:

The fault does not occur when using the composer in the “Markdown editor” mode.

The fault does not occur if the content is pasted into a code block instead of into the normal editor mode. It is true that in many cases it would be most appropriate to place the content that uses something like white-space: pre in a code block. However, it is fairly common for users to apply formatting retroactively by adding the content to the composer, selecting the content, then using the composer toolbar to apply the formatting (as opposed to the alternative approach of triggering a codeblock prior to adding the content).

I found this to be a useful tool for examining the raw data of the clipboard content:

I am able to reproduce the fault on try.discourse.org in “safe mode”.

1 Like
3

Did you put the post composer into “rich text editor” mode before you pasted the content copied from the web page?

The fault still occurs.

Are you sure you followed the instructions exactly as written?

Please note that you must copy the content that is rendered from that HTML, so that the clipboard content is populated with text/html type data:

<html>
<body>
<!--StartFragment--><span style="color: rgb(0, 0, 0); font-family: &quot;Times New Roman&quot;; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">foo
bar
    </span><!--EndFragment-->
</body>
</html>

This is not about composing your post using HTML markup.

4

Ah good catch. I have a tendency to skim the post a bit too fast :sweat_smile:

1 Like
5

Thanks for reporting @per1234, we are having a look at this.

Understand the general issue here, we want to make it as easy as possible for people to paste in code examples.

1 Like