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

Contribute Bug
14

Sure. I’m glad if the information can be useful. I would like to reiterate my previous statement:

However, I’d be happy to be wrong about that :slightly_smiling_face:.

  1. Copy the following C++ code:
    #include <iostream>
int main() {
  std::cout << __FILE__;
}
  2. Open the post composer.
  3. Put the composer into the “rich text editor” mode.
  4. Paste the copied content into the composer.

:slightly_frowning_face: The content is corrupted:

#include
int main() {
std::cout << FILE;
}

(note that the <iostream> has been suppressed due to resembling an unsupported HTML tag, and the __FILE__ has been treated as bold markup)

This could be seen as user error, since it could be avoided by triggering a code block prior to pasting the non-prose content. However, we might expect that the alternative workflow of applying code block formatting retroactively to pasted content would be equally valid (as it is when using the Markdown editor).

Equipment

  • Any Arduino board (whether official or 3rd party)

Instructions

  1. Install Arduino IDE 2.3.6, which can be downloaded from the “Software” page of the Arduino website:
    https://www.arduino.cc/en/software/#ide-download-section
  2. Start Arduino IDE.
  3. Select File > New Sketch from the Arduino IDE menus.
  4. Replace the content of the new sketch with the following code:
    void setup() {
  Serial.begin(9600);
  while (!Serial) {}  // Wait for serial port to be opened.
  delay(500);         // Some boards require a delay after serial port initialization.
  Serial.println("foo");
  Serial.println("bar");
}
void loop() {}
  5. Select Tools > Serial Monitor from the Arduino IDE menus to open the Serial Monitor view, if it is not already open.
  6. Select “9600” from the baud rate menu in the Serial Monitor view.
  7. Upload the sketch to your Arduino board.
  8. Select the serial output from the field in the Serial Monitor view.
  9. Copy the selected content.
  10. Open the Discourse post composer.
  11. Put the composer into the “rich text editor” mode.
  12. Paste the copied content into the composer.

:slightly_frowning_face: Each line of the copied content is placed in a separate code block:

foo


bar

If you inspect the clipboard content, you will see that, in addition to the expected “text/plain” type content:

foo
bar

It also contains the following “text/html” type content:

<div style="color: rgb(78, 91, 97); font-family: monospace; font-size: 13px; 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: nowrap; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; position: absolute; left: 0px; top: 0px; height: 18px; width: 1862px;"><pre style="margin: 0px;">foo
</pre></div><div style="color: rgb(78, 91, 97); font-family: monospace; font-size: 13px; 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: nowrap; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; position: absolute; left: 0px; top: 18px; height: 18px; width: 1862px;"><pre style="margin: 0px;">bar</pre></div>

Since the Arduino IDE 2.x Serial Monitor incorrectly wraps each line of the “text/html” type copied content in <pre> tags, the rendering of each line of the pasted content as a separate code block by the Discourse rich text editor is correct and expected.

As with the other problem I described above, the unexpected formatting can be avoided by proactively triggering code block formatting prior to pasting the content.

2 Likes