NodeView innerHTML weird behaviour


We have a simple-ish, custom blockquote node setup with a NodeView. This NodeView contains a blockquote tag for the contentDOM, and a button. When clicked, the button inserts a new node called author directly after the blockquote tag.

We are experiencing some very weird bugs in certain scenarios:

  • When the blockquote has no nodes before it, adding the author, typing some text in the author block, and then removing the text results in the button’s text being added as a paragraph node outside of the NodeView
  • When adding a blockquote above another node, clicking the author button results in the node after the NodeView being focussed and the author not being added

Apologies for the lack of description. We aren’t entirely sure what’s going on

This is a minimal reproduction of what’s happening:!/magnificent-draw

Change to: let container = document.createElement(‘blockquote’) let inner = document.createElement(‘div’)

It would be helpful to read the docs and examples carefully.

I’ll admit to being a little fuzzy on the Node Views, but how does that fix their issue? When I edit their glitch to make those changes, I get the same result.

Problem 1 should have been solved by now.

Problem 2 depends on how the browser changes the selection when you click on the button. It will fail if the selection is changed to be after the button.

I don’t know why they want to do it this way, but it would be easier to use node and getpos() to accomplish what I guess they would like to achieve.

It feels like they’re hitting the jump from the basics which are a pretty gentle learning curve, to anything custom which takes a lot of deeper research and experimentation to really understand. I would probably have thought the way they were doing it was the way to go until quite recently and I’ve been puttering with this toolkit for years at this point.

1 Like