Hey everyone,
Struggling with a RangeError I’m getting in certain cases while using ProseMirror image plugin in a React application.
The component in question supports rich text editing as well as drag-and-drop image uploading and resizing, and appears to work fine with no issues. But the console is logging this error every time the component seems to be mounted:
RangeError: Index 2 out of range for <paragraph("Test text"), paragraph(image)>
at Fragment.child (index.js:238:1)
at Fragment.findIndex (index.js:288:1)
at Node.nodeAt (index.js:1327:1)
at f (index.es.js:15:1)
at index.es.js:15:1
at Generator.next (<anonymous>)
at l (index.es.js:15:1)
I’m having trouble tracking this down, or seeing if it’s worth checking out. To me, this seems like the document is reporting a length that’s 1 item longer than it really is, so when the node tree is constructed it’s trying to access something that’s not there, hence the RangeError.
What’s weird is we haven’t run into this before. The component stores the boundaryElement and the EditorView for the editor in a useRef, and then initializes the editor with an effect. This is done within the overall context of react-hook-form as well.
useEffect(() => {
if (!initialValue) {
return;
}
view.current = new EditorView(boundaryElement.current, {
state: EditorState.create({
doc: markdownParser.parse(initialValue ?? "")!,
plugins: basePlugins,
schema,
}),
dispatchTransaction(tr) {
view.current?.updateState(this.state.apply(tr));
onChange(markdownSerializer.serialize(this.state.doc));
},
});
rerender();
return () => {
if (view.current) {
view.current.dom.setAttribute("contenteditable", "false");
view.current.destroy();
rerender();
}
};
}, []);
Does anything look immediately off in how we’re setting up our editor here? We’re primarily using ProseMirror with a very basic setup with the following versions:
- “prosemirror-commands”: “1.1.12”,
- “prosemirror-dropcursor”: “^1.4.0”,
- “prosemirror-gapcursor”: “^1.2.1”,
- “prosemirror-history”: “^1.2.0”,
- “prosemirror-image-plugin”: “^2.3.2”,
- “prosemirror-inputrules”: “^1.1.3”,
- “prosemirror-keymap”: “^1.1.5”,
- “prosemirror-markdown”: “^1.7.1”,
- “prosemirror-menu”: “^1.1.4”,
- “prosemirror-schema-basic”: “^1.1.2”,
- “prosemirror-schema-list”: “^1.1.6”,
- “prosemirror-state”: “^1.3.4”,
- “prosemirror-view”: “^1.23.5”,