La propriété CSS `white-space` des données du presse-papiers n'est pas respectée lors du collage dans l'éditeur de texte enrichi

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”.

Related

2 « J'aime »

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.

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

1 « J'aime »

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.

2 « J'aime »

What would you expect from such an HTML clipboard?

foo
bar

Or, considering it’s a span tag, two inline code lines with a hard break between?

foo
bar

Or just that we respect the line breaks but in a regular paragraph, with a hard break between?

foo
bar

Thank you!

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”:

This copies the output produced by the compiler and other tooling to the clipboard. This type of non-prose content is best formatted as a code block.

If the following procedure is used to share that copied output in a forum post:

  1. Put post composer into “rich text editor” mode.
  2. Paste the content into the composer.
  3. Select the pasted content.
  4. Click the </> icon on the composer toolbar.

The post ends up with the following formatting:

/run/arduino/sketches/asdf/asdf.ino:1:2: error: #error foo  #error foo   ^~~~~

(note that all the copied content is on a single line)

whereas we would expect this post formatting:

/run/arduino/sketches/asdf/asdf.ino:1:2: error: #error foo
 #error foo
  ^~~~~

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.

1 « J'aime »

In this case, does it still use a span tag in its text/html clipboard output, or does it only output plain/text?

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:

/run/arduino/sketches/asdf/asdf.ino:1:2: error: #error foo
 #error foo
  ^~~~~

as well as the following “text/html” type data:

<span style="color: rgb(0, 0, 0); font-family: &quot;Open Sans&quot;, &quot;Lucida Grande&quot;, lucida, verdana, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.16px; 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;">/run/arduino/sketches/asdf/asdf.ino:1:2: error: #error foo
 #error foo
  ^~~~~</span>

I hope that answers your question. I’m happy to provide additional information if needed.