28

Earlier today, I encountered a question with several lines of code that had been entered as individual, inline code blocks instead of a single, fenced code block. I assumed the OP was unfamiliar with Markdown and had simply done more work than necessary, so I edited the question to consolidate the lines of code into a single, fenced block and moved on.

Screenshot showing edit history containing the problem

However, I just came across another question in the new questions queue with the same problem: a series of seemingly related lines of code broken into individual, inline code blocks.

Screenshot of text showing the same problem

It occurred to me that this could be the result of the new Ask Wizard and, after checking the edit history on the first post mentioned above, I can see that the wizard was indeed used to draft the question.

Sebastian Simon points out that the wizard itself is not the cause; it is exposing new users to the new editor. There may be similar issues logged with code (and formatting in general) when the new editor is in "Rich Text" mode (Markdown off).

The second question has not been edited, so I cannot confirm that it too was created with the wizard, but the OP of the second question has 1 rep, so I don't believe it's out of the realm of possibility.

wjandrea points out that you can check if the draft of the post was created with the Ask Wizard by checking the timeline when the edit history is not otherwise visible on the post.


Replication

I used the provided /questions/ask?force-wizard=true link to test my hypothesis. I used the following code and tried the following methods to reproduce the issue. Method 4 ended up reproducing the problem.

const greeting = 'Hello';
const subjects = ['World', 'Meta', 'You'];

subjects.forEach(s => {
    console.log(`${greeting}, ${s}!`);
});

1. Copying the code, then applying the "Inline Code" tool.

This approach handled inlining as I expected, though I did note that the tool did not account for the existing backticks (`) in my code when deciding how many backticks to surround my code with. This will cause formatting issues that a new asker may not know about until they review their question for posting.

Screenshot showing this other problem in Markdown

2. Clicking the "Inline Code" tool, then pasting my code into the selection area.

This approach yielded the same results as the first test.

3. Turning off the "Markdown" toggle, then pasting my code.

Interestingly, this appears to have correctly created a fenced code block. Again, I would have to continue to review the question to be sure, but it certainly renders as one in the editor.

Screenshot showing the fenced code block in rich text

4. Pasting my code, then turning off the "Markdown" toggle, then using the "Inline Code" tool.

With Markdown off, my interpolated string's backticks rendered an inline code block in the editor. Selecting all the code caused the "Inline Code" button to change to an active state, so presumably it was able to tell there was an inline code block in the selection.

Screenshot showing Markdown on

Screenshot showing Markdown off

After using the "Inline Code" twice (once to remove the inline block created by my interpolated string and a second time to create an inline block from my code), I recreated the issue. Each line was wrapped in its own inline code block.

Screenshot showing the replication of the issue

If my code would not have had backticks in it, the first application of the "Inline Code" tool would have caused this outcome.


Resolution

I'm not sure what the best approach would be here because I am both:

  • Unfamiliar with the asking process
  • Unfamiliar with the editor's implementation

It's odd to me that the "Inline Code" tool isn't simply wrapping each line in an inline code block. It looks like it's trying to parse the code into statements and wrapping each statement it finds. I don't know if that means the editor could be tweaked to generate a fenced code block when multiple lines/statements are detected (though the name of the tool would need to be adjusted too).

I'm not even sure if this is a real issue since the "Markdown" toggle must be off. Maybe I'm missing some of the cases and considerations that went into the editor's behavior when the input isn't considered markdown.

So is this something that should be addressed? If so, how?

6

1 Answer 1

-2

tl;dr I've filed a feature enhancement on the Stacks-Editor repo to address this UX issue.

Technically speaking, this is working "as expected". A user is posting text into the editor's markdown mode that contains "special characters" in it, then submitting that text without adding the correct Commonmark syntax to mark it as code. In your specific example, those characters are the left/right square brackets (used in e.g. links, but the syntax here is invalid), right angle bracket (e.g. blockquotes, also invalid) and backticks (code spans, valid markdown). When this text is parsed later (either by rich-text mode or the server-side Commonmark renderer), these special characters are treated as such, with the parser attempting to tokenize and render them as-is. You would see this same behavior no matter what Commonmark renderer you use. In the case of rich-text mode, when the internal representation is serialized back to Commonmark, all special characters in text nodes are escaped, which is why you may see a bunch of extra escape characters in the submitted text.

What this means is that this isn't a bug, but user error (see: "you're holding it wrong"). That being said, we can improve the experience here a bit. In rich-text mode, we look at the pasted text to try and identify it as code. If it is successfully detected as code, we wrap the text in a code_block node. We could do something similar for Commonmark mode, where if the pasted text is detected as code, we wrap it in a code fence.

I've filed a feature enhancement against our open source GitHub repo and prioritized it to be included in the beta release. The request contains a full description of the proposed solution, as well as a short analysis of the benefits and drawbacks of this implementation.

7
  • 4
    We'll never know what other CommonMark converters would have done with the source text, because the Stacks Editor destroys the source text and forces its interpretation of the source text to be what is saved. That's one of the major problems. It will always get some things wrong, because people will feed it text which isn't proper Markdown. It needs to save the source text, not the mangled mess which it interprets the text to be.
    – Makyen Mod
    Commented Jun 4, 2022 at 2:47
  • 6
    The assumption it uses of being able to accurately parse the text into an internal format is fundamentally flawed when reversing that process doesn't produce the exact same text as the source. Currently, it's assuming that it is the ultimate source of truth about what the text for the post will be. That's just wrong. The source of truth for the text is what the user enters, even if the user gets it wrong.
    – Makyen Mod
    Commented Jun 4, 2022 at 2:52
  • 5
    Saying "this isn't a bug, but user error" is, again, a fundamentally flawed point of view for an editor like this. It's absolutely a bug, a design flaw, or some other mis-operation, that the editor mangles the text prior to saving it. Trying to brush it off as "user error" is inappropriate. Yes, sure, the user didn't provide Markdown that did what they probably intended. But, they did provide text and the editor mangled that text, rather than save it as the user entered it.
    – Makyen Mod
    Commented Jun 4, 2022 at 2:58
  • 3
    @Makyen Please don't take this response as a deferral of responsibility from ourselves to the user. I outlined the editor's behavior here to show why this was happening. I do believe that this is a common enough use case that we can attempt to preemptively mitigate it, even going so far as to file an enhancement against our current release milestone (in other words, immediate prioritization). I did poke a bit of fun at myself for the "user error" comment, but that was probably lost on folks that are not familiar with the iPhone "antenna gate" coverage from a number of years ago.
    – Ben Kelly StaffMod
    Commented Jun 13, 2022 at 13:41
  • 1
    This was completed in release Beta 1
    – Yaakov Ellis StaffMod
    Commented Jul 12, 2022 at 14:35
  • a link to the issue would have been a bit more useful, nothing in the beta 1 section mentions this problem
    – Kevin B
    Commented Jul 12, 2022 at 14:43
  • @KevinB: ...Doesn't the answer here already have a link to the issue on GitHub?
    – V2Blast Staff
    Commented Jul 13, 2022 at 17:46

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .