Uncaught RangeError: Position 3 is out of range for changeset of length 1

v6
1

For some reason, if I select all the text, and delete, I get this error:

VM4218:1358 Uncaught RangeError: Position 3 is out of range for changeset of length 1
    at ChangeSet.mapPos (eval at handle_message (about:srcdoc:14:8), <anonymous>:1358:23)
    at findSharedChunks (eval at handle_message (about:srcdoc:14:8), <anonymous>:4078:59)
    at RangeSet.compare (eval at handle_message (about:srcdoc:14:8), <anonymous>:3872:32)
    at findChangedDeco (eval at handle_message (about:srcdoc:14:8), <anonymous>:7821:18)
    at DocView.update (eval at handle_message (about:srcdoc:14:8), <anonymous>:7360:28)
    at EditorView.measure (eval at handle_message (about:srcdoc:14:8), <anonymous>:11539:48)
    at eval (eval at handle_message (about:srcdoc:14:8), <anonymous>:11648:83)

REPL is here: CodeMirror - Tooltip • REPL • Svelte

Has anyone come across this before? I’m having a hard time trying to diagnose.

2

The decorations returned from your annotation extension are bigger than the actual document. That logic (start empty, add a fixed set of ranges in an update when the set is empty) seems entirely wrong. You’ll probably want to initialize to the given ranges in create, and then just map it through changes (underlines.map(tr.changes)) on further transactions.

3

That makes sense, but I’m lost on what to “create” in the create() method? Do I need to create new RangeSets, and somehow add them to the editor state as Transactions?

export const annotation = (annotations) => {
	return StateField.define({
		create() {
			const rangeSets = [];
			for(let i = 0; i < annotations.length; i++){
				rangeSets.push(RangeSet.of([annotationMark.range(annotations[i].startIndex, annotations[i].endIndex)]))
			}
			return rangeSets;
		},
		update(underlines, tr) {
			return underlines
		},
		provide: f => EditorView.decorations.from(f)
	})
}

const annotationMark = Decoration.mark({class: "cm-annotation"})

Updated REPL:

4

@marijn would really appreciate any pointers here - I’m stuck and I can’t find my way through reading the docs :confused:

5

I don’t know what to say—you’re asking what to do in the create method but then paste code that creates the rangeset in that method, but still doesn’t call map on it in the update method despite me explicitly mentioning that.

6

I understand what you are saying about update(), I was just hung up on exactly what to return in create() as I kept getting errors. I finally got it, posting here in case others come across this:

export const annotation = (annotations) => {
	return StateField.define({
		create() {
			const rangeSets = [];
			for(let i = 0; i < annotations.length; i++){
				rangeSets.push(annotationMark.range(annotations[i].startIndex, annotations[i].endIndex));
			}
			return RangeSet.of(rangeSets);
		},
		update(underlines, tr) {
			underlines.map(tr.changes)
			return underlines
		},
		provide: f => EditorView.decorations.from(f)
	})
}
7

Okay sorry to re-open this, but while the implementation is more correct, the original issue is still there.

If I backspace some of the characters (or highlight and delete all of it), I get “out of range” errors:

VM1189:1358 Uncaught RangeError: Position 71 is out of range for changeset of length 70
    at ChangeSet.mapPos (eval at handle_message (about:srcdoc:14:8), <anonymous>:1358:23)
    at Chunk.map (eval at handle_message (about:srcdoc:14:8), <anonymous>:3674:37)
    at RangeSet.map (eval at handle_message (about:srcdoc:14:8), <anonymous>:3809:49)
    at StateField.update [as updateF] (eval at handle_message (about:srcdoc:14:8), <anonymous>:26795:55)
    at Object.update (eval at handle_message (about:srcdoc:14:8), <anonymous>:2355:38)
    at EditorState.eval [as computeSlot] (eval at handle_message (about:srcdoc:14:8), <anonymous>:3190:98)
    at ensureAddr (eval at handle_message (about:srcdoc:14:8), <anonymous>:2591:29)
    at new EditorState (eval at handle_message (about:srcdoc:14:8), <anonymous>:3127:17)
    at EditorState.applyTransaction (eval at handle_message (about:srcdoc:14:8), <anonymous>:3190:13)
    at get state [as state] (eval at handle_message (about:srcdoc:14:8), <anonymous>:2841:33)

The error makes sense, and I’m assuming I need to do a check in the update(underlines, tr) method, but how does this look exactly? It seems like the new length is sent in tr[0], but how do I access/return the ranges that are within the new length? When inspecting underlines and tr I don’t see the original range sets that I set in create()…

8

map is a pure function, so this does entirely nothing. Return the value map gives you, and it should work better.

9

that’s it - thank you!