Anybody else noticed an influx of code formatted as individual lines?

Another example of post corruption specific to the "rich text editor":

Minimal reproduction:

  1. Add the following content to the Arduino IDE 2.x editor:

    foo
        [i]
    bar
    
    • β“˜ The fault is specific to content copied from the Arduino IDE 2.x editor due to the way it populates the clipboard with formatted (text/html type) data, instead of only plaintext (text/plain kind) data as you would obtain by copying from other applications (including Arduino IDE 1.x).
    • β“˜ The leading spaces on the line that contains content resembling BBCode markup are required, as these act as code block markup (alternative syntax to fenced code block markup.
    • β“˜ The foo and bar lines are not required to reproduce the fault, but were added to make the nature of the fault more clear.
  2. Select the content from the Arduino IDE editor.

  3. Do a standard copy (not using the "Copy for Forum (Markdown)" feature) of the content from the Arduino IDE editor.

  4. Open a post composer.

  5. Put the post composer in the "rich text editor" mode.

  6. Paste the copied content into the composer.
    β“˜ The corruption will not be visible in the composer.

  7. Publish the post.

The post will have the following corrupted form:


foo

\[i\]

bar


The problem does not occur if the user posts the code correctly, by any of the available methods (the "Copy for Forum (Markdown)" feature, proactively activating a code block, retroactively applying code formatting to the selection. So it is more a matter of user error since we expect corruption of code that is not posted correctly. However, this is distinctive in a couple of ways:

  • The corruption is not visible in the post preview
  • The corrupted code is rendered in a code block

@UKHeliBob spotted a new type of corruption of pasted content when using the "rich text editor":

The markup of the content looks like this:

```
Possible Tag Data: Header: 38 08, Data: 40 1A End: 3C FF

```

```
Extracted ID: 16410

```

```

```

```
Raw FDX-B: 38 08 38 58 FC 9E 

```

```

```

At first it seems the same as the bug I described in post #2. However, it is significantly different. I am able to reproduce it through the following procedure:

  1. Copy some content from the Arduino IDE 2.x Serial Monitor.
  2. Put the post composer in the "rich text editor" mode.2.
  3. Paste the copied content into the composer.

When you copy text to the clipboard, it may be stored in a formatted form (text/html) in addition to plaintext (text/plain). When formatted text is available in the clipboard, the rich text editor formats the post accordingly.

If I copy the following text from Serial Monitor:

foo
bar

and then inspect the raw data inside the clipboard (this is a useful tool for that purpose), I see the following text/html data:

<html>
  <body>
    <!--StartFragment-->
    <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: 1852px;
      "
    >
      <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: 36px;
        height: 18px;
        width: 1852px;
      "
    >
      <pre style="margin: 0px">
bar
</pre
      >
    </div>
    <!--EndFragment-->
  </body>
</html>

So it actually makes sense for the forum to format the pasted content this way, since that is indeed what is indicated by the HTML. Therefore this is more a bug in Arduino IDE, which is already being tracked here:

As with the other bugs, the content is correctly formatted when pasting into a code block:

  1. Copy some content from the Arduino IDE 2.x Serial Monitor.
  2. Put the post composer in the "rich text editor" mode.
  3. Click the "<CODE/>" icon on the composer toolbar.
  4. Paste the copied content into the composer.

I saw another one today

It looked a little different because each line was preceded by and ended in a backtick and so there were no blank likes between the code lines

I believe that one was caused by the bug I described in post #2.

Even if "solved", it seems to be only a workaround (and I think i'ts a bit difficult to explain to users) so I would like to try to give my contribution, even if quite limited as I obviously do not know the entire framework, but I hope it can be useful in some way for someone who can better analyze and solve this thing...

After a quick and easy analysis of the forum code using the page inspector function, I think the problem lies in this function "formatCode()", within "textarea-text-manipulation.js":

 @bind
  formatCode() {
    const sel = this.getSelected("", { lineVal: true });
    const selValue = sel.value;
    const hasNewLine = selValue.includes("\n");
    const isBlankLine = sel.lineVal.trim().length === 0;
    const isFourSpacesIndent =
      this.siteSettings.code_formatting_style === FOUR_SPACES_INDENT;

    if (!hasNewLine) {
      if (selValue.length === 0 && isBlankLine) {
        if (isFourSpacesIndent) {
          const example = i18n(`composer.code_text`);
          this._insertAt(sel.start, sel.end, `    ${example}`);
          return this.selectText(sel.pre.length + 4, example.length);
        } else {
          return this.applySurround(sel, "```\n", "\n```", "paste_code_text");
        }
      } else {
        return this.applySurround(sel, "`", "`", "code_title");
      }
    } else {
      if (isFourSpacesIndent) {
        return this.applySurround(sel, "    ", "", "code_text");
      } else {
        const preNewline = sel.pre[-1] !== "\n" && sel.pre !== "" ? "\n" : "";
        const postNewline = sel.post[0] !== "\n" ? "\n" : "";
        return this.addText(
          sel,
          `${preNewline}\`\`\`\n${sel.value}\n\`\`\`${postNewline}`
        );
      }
    }
  }

As far as I can understand, if a line starts with at least 4 spaces, it is automatically formatted as "CODE" with the tags using applySurround() function. And that's ok.
Otherwise (the last "else" "if"), this code appears to add the prefix/suffix (the three backward quotes, you know) to the selected text:

        return this.addText(
          sel,
          `${preNewline}\`\`\`\n${sel.value}\n\`\`\`${postNewline}`
        );

So the problem seems to be that "sel" probably only contains a single line of the block and will therefore only return a single "encoded" line. If this is repeated for all the lines, they will become individual "codes" and not a single block. I currently see no other possible explanation for this strange editor behavior.
But I don't know if "getSelected()" works properly (returning the whole selected text block), and I'm sorry for not having much time to further investigate. :wink:

Anyway, this is the code where I think they should make some corrections.
I hope this helps someone in some way to solve this problem, but if it turns out to be irrelevant, well, you can just ignore it, I won't feel bad. :wink:
Cheers!

The Discourse developers have now fixed the bug that caused multi-line selections to be formatted as individual separate lines instead of a single code block:

Arduino Forum has been updated to the version of Discourse that contains the fix.

The other problems discussed in the topic are still outstanding:

This bug has now been fixed, and Arduino Forum updated to a version of Discourse that has the fix:

I submitted a bug report to the Discourse developers about this:

I mentioned this in passing in a post on the Discourse Meta forum and the Discourse co-founder requested that I provide details so they might investigate whether anything can be done to improve the handling. I have done as requested:

https://meta.discourse.org/t/white-space-css-property-of-clipboard-data-not-respected-when-pasting-in-rich-text-editor/379035/14#quote-id-379035-12-3

As I said here and in the mention on Discourse, this problem is caused by inappropriate formatting of the copied content by Arduino IDE, with Discourse simply faithfully rendering that formatting. So I don't hold out hope for a resolution from any corner other than the Arduino IDE developers, but thought it worth mentioning here in case anything interesting does come from the Discourse Meta discussion.