Hi,
I’ve created a plugin which adds a CSS class to a cm-line if the line is a markdown header. So if you have "# " at the start of the line it adds “md-h1-parent” to the line, with the idea of allowing me to size and space widgets as well as give the text a bigger font-size, line height being bigger etc. etc.
From a CodeMirror perspective, the plugin I’ve written (it actually does two things, removes “#” from the start of the line if not cm-activeLine, and add a CSS class to cm-line) correctly renders in the browser as I would expect it to, classes are in the correct place, “#” markers removed.
If I don’t actually have anything in the CSS files yet to change the style of the headers, everything is fine.
As I start to add the CSS itself, (so changing the font-size and line-height to give more prominence to the headers), then a weird issue starts to arise. I’ve noticed that the second-to-last line of the test text I’m using is no longer available to click on as a line, and I can only get to it by using the < > cursor keys as even Up+Down cursor keys are skipping it. It looks as if there is a calculation performed depending on where you click as to what line should be highlighted, and by increasing the size of individual lines - meaning they are no longer of uniform height, this is causing a backend issue.
I’ve replicated the problem here: https://codesandbox.io/p/devbox/rcrp8v
(PS I am hacking a POC together, so the CSS might seem a little all over the place, but regardless, the font size + line height appears to be a factor in this issue)
Thanks