[Bug] Syntax highlighted colors use the wrong font and aren't reset when toggling a code block

[dhda]

Describe the bug
In code blocks, syntax highlighted tokens are rendered in the base font instead of monospaced. Then, when toggle the code block off for a line of text, the colors are not reset to black (or whatever they were previously). The colors can then never be reset and will spread throughout the document like a permanently highlighted plauge. Somehow the editor seems to support multiple notions of colored text (the infected text doesn't register as having a color in the editor top bar).

To Reproduce
Steps to reproduce the behavior:

1. Type a line of plain text that would be highlighted in code
2. Click the code button and toggle the block to code
3. See highlighted tokens are rendered in the regular font
4. Click the code button again and toggle the block back to regular text
5. The pink colored literals stay the same color
6. Try making the text black again
7. The highlighted literals stay permanently highlighted for the lifetime of the document, regardless of any color changes through the editor.
8. Any text that gets entered by placing the cursor immediately adjacent to the highlighted words is also made pink–the highlighting spreads like a virus through the whole document!
9. If you copy and paste the text to a whole new document, it still stays pink forever!

Expected behavior
Code is rendered in monospaced font regardless of the highlighting, and the colors are reset when the block is toggled back.

Screenshots
pre-code block

toggle code block on (note wrong font)

toggle code block off (note the text that's still pink)

trying to type more text after the highlighted text

System Information (please complete the following information):

• Device: Macbook Pro
• OS: OS X 10.11.6
• Browser: Firefox v75
• Browser Extensions: tested with all extensions disabled

[dhda]

It's the coronavirus bug! 😆 I have one document now with a few perma pink words in it. I'm quarantining the entire section of text to make sure I don't accidentally spread it. We don't know the course of this disease or if they'll recover. All the other words are very worried.

[dhda]

I can clear the pinkness if I delete a character from the highlighted words (so that it no longer is parsed as highlightable syntax), and then toggle the code block on and off again.

[johnozbay]

Hi there! This is a fantastic catch! 🚀
I've added this to our bug tracker and we'll get this fixed as quickly as possible.

Looks like an underlying bug with the core editor we're using & highlight.js (the code highlighter) not playing well together.

Shortly, the editor toolbar color selector uses inline CSS to color the text. (so that it can be stored with the text when it's copy pasted / restored etc) and the editor functions on the top, look for these to toggle colors on / off.

Whereas highlight.js adds a bunch of custom classes to highlight things like variables, keywords, function declarations etc.

And looks like when you toggle the code-block off (notice p vs pre parent tag), these classes aren't removed :

So whatever you type keeps going into these hljs-keyword span elements, and gets colored.

The quick duct-tape solution is, after turning code block off, select all the text, and click clear formatting (or cmd/ctrl + \ ), and this will get rid of all the hljs-keyword classes = clear the color.

And in the meantime, we'll get this bug fixed right away 👍🏻

Many thanks for this!

Best,
J