With CodeMirror 5, I used Markdown with a sans-serif font, except for when formatting code tags, which used a monospace font. It’s my desire to do the same thing with CodeMirror 6.
However, as you can see from this demo, it doesn’t work when I want to indent code by 2+ tabs. The cursor appears in the wrong position unless the full line is entirely a monospace or entirely a proportional font.
It appears to be because, for a line with a few indents before a code span, some of the whitespace is rendered outside the code span, and some of the whitespace is rendered inside the span.
A solution would be to make the entire .cm-editor be monospace, except for tags that are NOT code, but doing so would require all naked text to be inside a span.
Is there another alternative that might work? (Note: I’m not a JS person). I came across this thread but not sure what to make of it.
I wasn’t able to see this in the demo you linked—could you describe the steps needed to cause it to happen (and/or say more precisely how the behavior differs from what you’d expect)?
To start a code block, press tab or indent by 4+ spaces.
Type some code to begin a code block (such as if (true) {).
Hit enter to get to the next line of code.
Press tab to indent your second line of code inside the if statement, and the cursor will move 4 spaces to the right.
Start typing, and text will appear much further to the right than the cursor was.
Hit enter again to et to the third line of code.
Start typing again, and the problem will reproduce itself.
The problem only happens when the editor is set to a sans-serif font, but code blocks are set to a monospace font. It appears that, when indenting, the tab stops that determine cursor placement are based on the sans-serif font. But where the text begins is based on the monospace font.
My expectation would be that the span that wraps around code only wraps around text (and not the leading whitespace), so that all leading whitespace is handled by the cm-line’s CSS style. Currently it seems to be like this:
That should ensure that cursor placement is based on the font for cm-line and leading whitespace when indenting code is also based on the font for cm-line.
I mean, it appears in the correct position for the styling that is applied at that time. Adding text on the line changes the meaning of the whitespace before the cursor, causing some of it to be styled as code, which it wasn’t before.
I don’t think that’s going to be much of an issue—code highlighting already adds spans all over the place. You could create an extension that uses mark decorations to add a variable-width font to all paragraphs and headings, for example.
I mean, it appears in the correct position for the styling that is applied at that time. Adding text on the line changes the meaning of the whitespace before the cursor, causing some of it to be styled as code, which it wasn’t before.
I completely understand that. However, that doesn’t change the fact that the current [working as designed] implementation introduces an end-user bug in the Markdown language that didn’t exist in CM 5.
Unfortunately, making the change myself is beyond my area of expertise. I’ve tentatively switched the entire editor to a monospace font and users don’t seem to mind.
