Handling DOM node style mutations made in web inspector

1

Hey,

my schema has a node called rect with a style attribute. Since browsers use the style attribute on DOM nodes for inline styles, I can conveniently use it to style individual rect nodes, and persist values in my PM document.

I would like to be able to use my browser’s Web Inspector to manipulate these styles. Right now, when I make changes to a rect with the inspector, the changes get reverted to the PM document’s value instantly. From the way the inspector behaves, it looks like the node is tossed out and replaced with one that represents the last known value from the document.

Outside of ProseMirror, I know I can use a MutationObserver to watch a DOM node’s style attribute change.

(tl;dr) My question is: Can I write a PM NodeView (or something else) that captures these mutations and turns them into proper transactions effecting the style attribute on the PM doc, which in turn should result in the DOM representing the change I made in the inspector?

Thank you!

2

The way ProseMirror sees it, that’s kind of going the wrong way—if you want to update the document programatically, do it through a state transaction. Supporting interaction through the web inspector isn’t really in scope.

Still, you may be able to hack this together with a node view, yes—the node view’s ignoreMutation method could notice the mutation and dispatch a transaction (or you could register your own mutation observer).

1 Like
3

I’m going to give this a try based on your suggestions. I see additional potential for unfixable funkiness (inspector’s own undo/redo handling, lolwut), but maybe I can get somewhere that is useful quicker than…

The cleaner option would be rendering Chromium’s element style inspector within the editor, so I’ll keep that in mind when the rabbit hole gets to deep!

Thank you for your help, it’s much appreciated! Wish you a nice weekend :pray: :sun_with_face: