Are these styles all right, or is this intervening too much into the editor?

1

I tried to achieve a certain decoration effect. I’m using markdown language, and I would like to highlight CodeBlock elements, for the whole line, but not from the left of the code block. So for example, if the code was in a list, then the two spaces to the left of the could would not be decorated.

I can’t use Decoration.line(), since that edits the whole line, and there is not way to sqew it, so I must use Decoration.mark(), but when I do that, I achieve this effect.

image

To “pull” the background to the right, I added :after element after the mark decoration, into the view. I set it to position:absolute, set an arbitrarly wide width, but that made the editor scroll-bar appear.

image

Now this was the time I thought I’m interfering with the editor too much, and that my idea’s probably not going to work well. I added overflow:hidden style to .cm-line class, and now it behaves all right (I think). I also had to add pointer-events: none; and z-index: -1 to the pseudo-element to have it behave normally.

Is there anything I did that breaks the editor in some way? Perhaps there’s a case I didn’t think, and that’s a really bad idea? Or perhaps there’s a safer way to add background to the items from a position to the end of the line?

These are the styles that I added

  .cm-line {
    overflow: hidden;

    .highlight-code {
      position: relative;

      &:after {
        content: '';
        position: absolute;
        pointer-events: none;
        left: 0;
        top: -2px;
        bottom: -2px;
        opacity: 1;
        width: 1900px;
        z-index: -1;
        height: 22px;
        background-color: #f2f2f2;
      }
    }
  }

highlight-code is a class added by Decoration.mark() to node CodeText.

2

I don’t see anything that would obviously cause problem with this, but then, CSS is a subtle monster so I also can’t guarantee that nothing is going to get confused by it. Try and see, I guess.

1 Like
3

Okay, cool.

But I have another problem.

When I have code with empty lines in markdown list, then in the DOM there is .cm-line with two spaces inside

image

I wanted to mark it somehow, add Decoration.mark() for it with the styles, but it doesn’t get applied for empty lines. Do you have an idea?

I apply Decoration.mark() for these start and end, and this leaves off empty line

image
image698×156 5.52 KB

PS: If I add even a space to that place, then mark correctly gets applied, cause this works:

image
image692×155 5.53 KB

I tried adding Decoration.widet() and Decoration.replace(), but then they occupy space in the editor, and I don’t want that. I find it unintuivity, for you can very easily mark Decoration.line() for an empty line, you should be able to add Decoration.mark() for empty line as well.

4

Mark decorations can only style content, so if there’s no content, they don’t appear, no.

What do you mean with Decoration.widget occupying space?

5

What do you mean with Decoration.widget occupying space?

I mean it behaves like a zero-width character. In other words, it takes 2 key strokes of ArrowLeft to move cursor over it. Like there would be an invisible “something there”.

Ps: it’s actually my bad, this was because I was using browser keyboard. When i used keymap for Arrow keys from “@codemirror/commands”, everything works fine.