Unable to apply both Decoration.line and Decoration.mark using RangeSetBuilder — causes TypeError

v6
1

I’m trying to highlight both an entire line and a specific text range within that line in CodeMirror.
However, as soon as I add both Decoration.line and Decoration.mark to the same RangeSetBuilder, I get the following error:

ERROR TypeError: Cannot read properties of undefined (reading 'length')

If I comment out one of the two builder.add() calls, the other works fine. But having both together causes the crash.

highlightTextEditorLine() {
if (this.editor && this.preselectedSettings?.start && this.preselectedSettings?.end) {
const start = this.preselectedSettings.start;
const end = this.preselectedSettings.end;
const doc = this.editor.view?.state.doc;

if (doc && start >= 0 && end > start && end <= doc.length) {
  const line = doc.lineAt(start);
  const builder = new RangeSetBuilder<Decoration>();

  // This works individually:
  // builder.add(line.from, line.to, Decoration.line({ class: 'editor-highlight-line' }));

  // This also works individually:
  builder.add(start, end, Decoration.mark({ class: 'editor-highlight-word' }));

  const decorations = EditorView.decorations.of(builder.finish());
  this.editor.setDecorations(decorations);

  this.editor.view?.dispatch({
    effects: EditorView.scrollIntoView(line.from, { y: 'center' })
  });
}
}
}

Expected Behavior

Both decorations (Decoration.line and Decoration.mark) should be applied without conflict — i.e., highlight the entire line and mark a specific range inside it.

Actual Behavior

When both are added to the same RangeSetBuilder, CodeMirror throws a TypeError referencing .length.

Question

Is it not possible to mix Decoration.line and Decoration.mark in the same decoration set?
If not, what’s the correct way to apply both at once — e.g., one for the line background and one for a specific inline range?

Environment

  • CodeMirror version: 6.x

  • Framework: Angular

  • Browser: Chrome (latest)

  • OS: macOS

2

Line decorations should have their start and end positions both pointing at the start of the line. If you use Decoration.line(...).range(...) you immediately get an error when you violate this, but that doesn’t happen when you go through a range set builder.

3

I solved it with this construct:

builder.add(line.from, line.from, Decoration.line({class: 'editor-highlight-line'}));
builder.add(start, end, Decoration.mark({class: 'editor-highlight-word'}));

MarkDecorationSpec
has e.g. inclusive, start, end etc.

LineDecoration spec doesn’t have it…
and rangeValue then has that magic for the line there:

image
image908×126 14.2 KB