Active Line Highlighting and Line Wrapping

[raguay]

I’m having problems getting active line highlighting and line wrapping to work. Every time I add them, the console logs error like this:

Uncaught TypeError: Cannot read property 'endSide' of null
    at Bn.addInner (<anonymous>)
    at Bn.add (<anonymous>)
    at Function.of (<anonymous>)
    at Function.set (<anonymous>)
    at He.update [as updateF] (<anonymous>)
    at Array.<anonymous> (<anonymous>)
    at on (<anonymous>)
    at new Tn (<anonymous>)
    at Tn.applyTransaction (<anonymous>)
    at yn.get state [as state] (<anonymous>)

But, due to using a bundler, I can’t get a better idea of where the error is. My code for it is:

    if(config.lineWrapping) {
      exts.push(EditorView.lineWrapping);
    }

    if(config.lineHighlight) {
      exts.push(highlightActiveLine());
    }

Where exts is an array of extensions that is used to configure the editor. This is a Svelte wrapper around CodeMirror 6.

[raguay]

Okay, more experimenting shows that the highlightActiveLine() has to be in a particular sequence in the loading of the extensions. It is now back in the order that I found in the basic setup. But, the current line is still not highlighted. But, I am using the one-dark theme. It might be an issue with it?

Line wrapping is a bigger puzzle right now. I’m not sure how to get it working at all. Help!

[raguay]

Okay, the error isn’t real. It was a typo on setting the cursor. Fixing that fixed the error in the console.

But, I still can’t get line wrapping and active line highlighting to work. They just don’t seem to do anything.

[raguay]

Okay. I’m solving some of it myself. Line wrapping is working now. But, I still can’t get active line highlighting to work. I guess I need to dive into theming? Does anyone know if the one-dark theme has an issue with active line highlighting?

[marijn]

Active line highlighting works with One Dark for me—it’s somewhat low-contrast, but should be visible unless you have a really dark screen. Inspect the DOM to see whether the line with the cursor has the cm-activeLine class, and to see how/if that is styled.

[raguay]

cm-activeLine isn’t on any of the lines. So, I’m guessing the extension isn’t working?

[marijn]

Sounds like it. If you can reduce the problem to a few lines of code, I can take a look.

[raguay]

@raguay

// At the top of the script tab for the Svelte object:
//
  import { highlightSpecialChars, drawSelection, highlightActiveLine, keymap, EditorView } from '@codemirror/view';

  // Inside the `onMount` command to create the editor:
  if(config.lineHighlight) {
      exts.push(highlightActiveLine());
    }

    // 
    // Create the editor state.
    //
    edState = EditorState.create({
      doc: text,
      extensions: exts
    });

    // 
    // Create the editor View.
    // 
    edView = new EditorView({
      state: edState,
      parent: CodeMirrorEditor
    });

Well, this is all I’m doing to do the active line highlighting. All the other extensions seem to be working, just not the highlightActiveLine(). All extensions are in the exts array.

[marijn]

That’s not a self-contained piece of code that I could test though. You’ll have to break the code out of its context to figure out what you have to do to reproduce the problem.

[raguay]

Okay, I’ve separated out just the CodeMirror component and a small app to contain it in Svelte. The smaller application doesn’t display anything funny and works really well. But the larger application does. But, in the larger app, I’m creating three different Codemirror components with different configs. I’ll do that and see what difference it makes in the smaller app.

[raguay]

Also, the one-dark theme has a very subtle difference in the active line color. Very little. You might want to up it some!

[raguay]

Well, I created a stand alone app with just three editors with various configurations to match my main app. It doesn’t show any of the weirdness the main application does. The standalone version is here:

raguay/SvelteCodeMirror6

Not sure where to look for problems in the original app. Other components shouldn’t interfere with one another. The main program has 33 components. It is a migration from CodeMirror 5. Therefore, I’m guessing something is still lingering around from that?

[raguay]

The weirdness I’m getting in the main program is:

• activeLineHighlight isn’t working
• scrolling causes the text to disappear until it loses and regains focus
• line numbering is all scrunched up to the beginning (top) of the editor

[raguay]

okay, I got the active line working (a slight miss-spelling ). But I still have:

• scrolling causes the text to disappear until it loses and regains focus
• line numbering is all scrunched up to the beginning (top) of the editor
• scrolling down with the arrow gets stuck in one location. Not even clicking on a different line will get past it, but cmd-DownArrow goes past it to the bottom okay

And I can’t reproduce them in the test application. Still looking…