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:
Create an HTML file with the following content:
<html>
<body>
<span style="white-space: pre">foo
bar
</span>
</body>
</html>
Open the file in your web browser.
Note that the whitespace of the page content is not collapsed:
foo
bar
Copy the content of the web page.
Open the post composer.
Put the composer into the “rich text editor” mode.
Paste the copied content.
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’m not very knowledgeable in the subject of HTML, but I would expect this rendering:
From what I can tell, this is how Chrome browser renders it.
That said, in the specific use in which I encountered the problem, it is true that the code block rendering would be most appropriate. We get this type of clipboard content by clicking the “Copy Console Output” button in an online IDE named “Arduino Cloud Editor”:
However, this preference for a code block is specific to our particular use case. It might be that in other use cases there are sources of clipboard content with a white-space: pre property for which a code block would not be appropriate. And even for our use case it is reasonable to put the responsibility of manually applying code block formatting on the user.
If I use the “Clipboard Inspector” tool to check what data is in my clipboard after I click that “Copy Console Output” button in Arduino Cloud Editor, it shows it contains the following “text/plain” type data: