Block decoration and gutter line numbers

I’m running into an issue where an whole line Decoration.replace behaves differently when created via a ViewPlugin vs a StateField. Specifically, I’m seeing that the gutter’s line number disappear, but only when using a StateField.

To repro, head to CodeMirror 6 and open the dev console to execute the following code.

StateField version

image

const {EditorState, EditorView, basicSetup} = CM["@codemirror/basic-setup"];
const {WidgetType, Decoration} = CM["@codemirror/view"];
const {StateField} = CM["@codemirror/state"];
class TestWidget extends WidgetType {
	toDOM(view) {
        let el = document.createElement('div');
        el.innerHTML = '<br>';
		return el;
	}
}
let decos = Decoration.set([Decoration.replace({widget: new TestWidget(), block: true}).range(0,2)]);
let field = StateField.define({
	create() {
		return decos;
	},
	update(decos, tr) {
		return decos;
	},
	provide: f => EditorView.decorations.from(f)
})
let state = EditorState.create({
	doc: 'ab\ncd',
	extensions: [basicSetup, field]
});
view.setState(state);

ViewPlugin version

image

const {EditorState, EditorView, basicSetup} = CM["@codemirror/basic-setup"];
const {WidgetType, Decoration, ViewPlugin} = CM["@codemirror/view"];
const {StateField} = CM["@codemirror/state"];
class TestWidget extends WidgetType {
	toDOM(view) {
        let el = document.createElement('div');
        el.innerHTML = '<br>';
		return el;
	}
}
let decos = Decoration.set([Decoration.replace({widget: new TestWidget(), block: true}).range(0,2)]);
let plugin = ViewPlugin.define(view => {}, {decorations: v => decos});
let state = EditorState.create({
	doc: 'ab\ncd',
	extensions: [basicSetup, plugin]
});
view.setState(state);

Also it seems that using the ViewPlugin version causes an exception when trying to select all:
image

You should always use state decorations for block decorations or other height-influencing things. I haven’t found a way to cheaply check this at run-time, but the docs mention it.

Thank you, for anyone else running into this, using a StateField for decorations solved this problem.