Code formatting leading white-space

[nqtronix]

If a code section contains leading white-space (space and ALT+255), the formatting in the editor window is misaligned. The preview window displays the code section correctly. This is especially a problem for diagrams, which rely on correct alignment.

Example from a current file (example code + screenshots): github code:

    Serial      Stream     CMDs

    +----+      +----+
 -->| RX |----->| 0  |---> Parser
    +----+      +----+      |
             +--| 1  | <----+
    +----+   |  +----+      |
 <--| TX |<--+--| 2  | <----+
    +----+      +----+
                | 3  |---> SPI (example)
                +----+      |
                | 4  | <----+
                +----+
                | .. |
                +----+
                | .. |
                +----+
                | n  |
                +----+

white-space in editor:

white-space in preview:

This issue is also present in the "minimal markdown editor", but not in the "simple markdown editor" or "fancy markdown editor".

[moughxyz]

Hmm..not sure what could be the cause of this. If you have any leads, please let me know. Or if you can replicate with a much simpler example, might be easier to track down.

[nqtronix]

Below the line you'll find more simple examples, testing

1. which characters experience this issue
2. the influence of the amount of characters

It seems like only valid whitespace characters are affected (space, tab, null, vertical tab, form feed, protected space), their amount doesn't seem to matter.

Could it be, that formatting is only applied once a printable character is found? I recon this make sense for e.g. bullet lists, so formatting gets only applied to the actual contents and not the spaces used for indentation.

Notice how the following example does not apply the striketrough formatting for the leading whitespace as well:

- entry 1
- ~~entry 2
    - entry 2a
    - entry 2b
    - entry 2c~~
- entry 3
    - entry 3a
    - entry 3b

(sidenote: the preview does not render correctly and I'm not even sure if this is correct markdown usage)

I tried to find details in the code, but I have zero experience with java script and am hopelessly lost.

---

Example code below (copy & paste into a note and enable the advanced markdown editor to see the effect)

code block (commonly used first characters)
```
correct (no space)
. correct (any character + 1 space)
.    correct (any character + any amount of space)
 wrong (1 space)
  wrong (2 spaces)
    wrong (tab)
 wrong (ALT + 255)
```

code block (ASCII control characters, 3 times each)
```
   wrong (0x00 NULL) 



 correct (0x01 SOH)
 correct (0x02 STX)
 correct (0x03 ETX)
 correct (0x04 EOT)
 correct (0x05 ENQ)
 correct (0x06 ACK)
 correct (0x07 BEL)
 correct (0x08 BS)
 wrong (0x0B VT)
 wrong (0x0C FF)
 correct (0x0E SO)
 correct (0x0F SI)
 correct (0x10 DLE)
 correct (0x11 DC1)
 correct (0x12 DC2)
 correct (0x13 DC3)
 correct (0x14 DC4)
 correct (0x15 NAK)
 correct (0x16 SYN)
 correct (0x17 ETB)
 correct (0x18 CAN)
 correct (0x19 EM)
 correct (0x1A SUB)
 correct (0x1B ESC)
 correct (0x1C FS)
 correct (0x1D GS)
 correct (0x1E RS)
 correct (0x1F US)
```

individual code fragments
`correct`
` correct`
`  correct`

---

Edit: Forgot that github interprets the markup code, so I added html code sections for easy copy & paste purposes

[moughxyz]

Thanks for the detailed report! I'm thinking this may just be how CodeMirror handles live editing, because I'm seeing the same results using the Minimal MD Editor and the Code Editor. Your theory on applying formatting once a printable character is found seems to be correct. CodeMirror is the underlying editor behind most of the MD editors (except for Simple). I'm not sure if they would allow a way to customize this. Would have to do more research. If you find any such detail in the documentation, please let me know, and we can see what it would take to incorporate the change.

[nqtronix]

I'm seeing the same results using the [...] Code Editor. I'm not. All editors that have monospace font don't have this issue. Tested Editors below, those with a check box work as intended:

• [ ] Plain
• [x] Plain (monospace option)
• [ ] Advanced Markdown
• [x] Code Editor (monospace)
• [x] Fancy Markdown (monospace)
• [ ] Minimal Markdown
• [x] Simple Markdown (monospace)
• [ ] Simple Task

This https://hackmd.io/zxeylID8RHG2dXmxA6yF1Q?both# online markdonw editor based on CodeMirror uses monospace formatting as well and thus doesn't have the problem. I couldn't find online markdown editor with CodeMirror which has non-monospace formatting.

I've searched through the documentation and found https://codemirror.net/doc/manual.html#addon_mark-selection and https://codemirror.net/doc/manual.html#markText, which seems to apply custom CSS formatting to selected characters. Although I think monospace is a selectable option in css, I don't know if it works on the non-printable characters.

Again, I've no clue about JS (or CSS) and I can't even tell if you already use the functions mentioned above. If you do, please excuse me.

---

If there is no fix, I'd appreciate a "toggle monospace" button for the advanced editor. If it's more than a few minutes of work, I totally understand if you don't want to do that, it's a rather niche application anyway.

[moughxyz]

Thanks for the info. In the near future, I do hope to pass on the monospace option to the individual editors, as right now it only works on the plain editor. For this issue, I'll have to do more research to identify a solution, other than monospace. I'm currently in the middle of a big update for mobile, so won't be able to address it immediately, but once I'm back in the realm of editors, I'm hoping to take another look.