Hey @marijn! I’m currently running into an issue with React ProseMirror and I’m hoping (praying, really) that it’s going to ring a bell for you. If not, no worries!
The minimal implementation here is a custom node view is marked as an atom and implements some interactive controls. I’m using a button to represent these, as a simple native element that is focusable.
The desired behavior is that when a user clicks on a button, that button receives focus. In Firefox, with React ProseMirror, this is what happens.
In Chrome, though, this works with plain ProseMirror View, but with React ProseMirror, the button is focused initially, and then immediately focus moves back to the editor.
Here’s the plain ProseMirror sample code (this works!):
const schema = new Schema({
nodes: {
doc: { content: "block+" },
text: { group: "inline" },
button: {
group: "block",
content: "text*",
atom: true,
toDOM(node) {
return ["button", { type: "button" }, node.textContent];
},
},
}
});
const editorState = EditorState.create({
schema,
doc: schema.nodes.doc.create({}, [
schema.nodes.button.create({}, schema.text("Click me!")),
]
});
const root = document.getElementById("root")!;
new EditorView(root, {
state: editorState,
plugins,
nodeViews: {
button(node) {
const dom = document.createElement("button");
dom.type = "button";
dom.appendChild(document.createTextNode(node.textContent));
return {
dom,
stopEvent() {
return true;
},
};
},
},
});
I guess what I’m asking is: Do you remember having to add any Chrome-specific hacks to make this kind of thing work? React ProseMirror is already directly using the prosemirror-view input handlers, so I’m at a bit of a loss figuring out what’s going wrong.
Again, no worries if this doesn’t ring any bells for you!