Custom node UI (code block language selector)

So I want to add a language selector dropdown for my code blocks that is only visible when the user is within a code block (active).

I’m struggling on the best way to achieve this.

Active/not-active: I’ve got a less than ideal way of detecting if the code block is active or when it goes to inactive (using dispatchTransaction and then my “buttons” having a '.active()` method on them). Seems a bit hacky but it works and I think will be stable.

Custom Node UI: My real issue is setting up this UI. I could use a widget decoration to provide the UI OR I could wrap the codemirror DOM inside the UI and use a decorator to toggle a class to show/hide the UI.

In either case I’m having trouble coming up with a good way to achieve the update to the node.attrs. First I need access to the current node and second I’ll need it’s position so that I can do the replace. (Is there another way?)

Definitely seems like updating nodes is a common struggle and node.updateAttrs and node.updateContent and the like would be very useful if possible.

Any guidance here would be very much appreciated!

Ohh I think I got it, NodeView’s nicely have access to their node and to getPos()!

This is still valid though: