How to add `Decoration.line()` for multiple lines at once?

I’m using Markdown in CodeMirror.

I would like to add Decoration.mark() for `inline` code and Decoration.line() for blockquote.

Now there problem is with this code

> `one
> two`

Since then I have nodes Blockquote spaning from 0 to 13, and inline code spaning from 2 to 13. So I have to add Decoration.mark() from 2 to 13, and I also need to add Decoration.line() from 0 and also from 7 (because that’s where the second line of quote starts). I can’t use Decoration.mark() for blockquote, since then I won’t be able to style the whole line, will I? And I need to style the whole line.

And I can’t add them in reverse order. (I reckon that’s because CodeMirror must be fast and can’t allow n^2 sorting in rendering). So question arises, how should I do that?

If I try to do view.state.tree.iterate() and then I iterate, and do if (type.name === 'Blockquote') and add Decoration.line() twice for each line, then if I get if (type.name == 'Inline') and I add Decoration.mark(2,13) i get error because there is already a second line added. If I only add one line, then only the first line of block quote is decorated.

How should I do it?

1 Like

I don’t really understand the issue. What kind of error are you getting?

1 Like

Thanks for a quick answer.

My error:

That comes from the fact, that using this EditorState.

> `one
> two`

I iterate the nodes, and I find Blockquote at positions 0 to 13, and inline code at positions 2 to 13.

I then parse it and try to add decorations to RangeSetBuilder, and I do this

set.add(0, 0, Decoration.line({class: 'highlight-quote'})); // first line
set.add(7, 7, Decoration.line({class: 'highlight-quote'})); // second line
set.add(2, 13, Decoration.mark({class: 'highlight-code'})); // inline decoration

Obviously the second line should be added after the decoration of Decoration.mark() in this case, but I don’t see a way of doing that. I don’t want to sort the decorations.

Should I implement a binary tree, to insert new decorations in order and then iterate them to add them to RangeSetBuilder?

You can also use RangeSet.of with a second argument of true if you can’t sort the ranges. Or keep using a builder and add some extra logic to make sure you insert them in order.

1 Like

Is using RangeSet.of() for larger documents performant? Should I be concerned about that at all?

I could probably write a BinaryTree, and insert into it while iterating. But if RangeSet.of() all right then I’ll use that.