CSS causing inability to click on a line

v6
1

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

2

This is too much code for me to sift through. If you can reduce this to the minimal decoration needed to trigger it (and preferably run it on codemirror.net/try), I can take a look.

3

Fair comment - I thought I had stripped it back as much as I could - but apparently I didn’t. The following code snippet replicates the issue:

import {basicSetup, EditorView} from "codemirror"
import {markdown, markdownLanguage} from "@codemirror/lang-markdown"
import {languages} from "@codemirror/language-data"

const injectStyles = () => {
  const styleContent = `
    .cm-line {margin-top: 4px;}`;

  const styleElement = document.createElement("style");
  styleElement.type = "text/css";
  styleElement.textContent = styleContent;
  document.head.appendChild(styleElement);
};
  
injectStyles();

let view = new EditorView({
  doc: "# test\nasdads\n## test\nasdads\n### test\nasdasa\n#### test\nasdasd\n##### test\nadsdasd\n###### test\nadsdasd",
  extensions: [
    basicSetup,
    markdown({base: markdownLanguage, codeLanguages: languages}),
  ],
  parent: document.body
})

I was adding in a different margin-top depending on the header size, but I gave it a shot just applying a margin-top to .cm-line and managed to replicate it.

If you try that code in codemirror.net/retry, you should find the behaviour I initially described where if you try to click on the Level 6 header (“######”) you will find you can’t click on it, but you can click on the last line.

The issue also gets worse the more lines you have, so if you take the same text + copy & paste it an additional 2 times, you find that you can click on the last line, but if you try to click on the 5 lines above that, you can’t.

4

Having narrowed it down, I quickly found a solution that works around it:

  • apply a style (cm-md-h1) to the cm-line
  • add a padding-top value to “.cm-content .cm-md-h1”

Maybe worth a quick look to see why margin-top is causing an issue the way it is, but there is a way around it in case anyone comes across this.

5

Margins on line elements are not supported. The editor needs to be able to assign a precise height to every line, and margins (which kind of exist between elements, and collapse in interesting ways) don’t work with that.