Updating node attributes after rendering

I’m looking for an elegant way to set attributes for a video tag after it has been attached to the DOM to adjust its size. I’m a bit puzzled what’s the best way to accomplish this. I tried creating a node view for it but I’m not sure how to determine when the rendering happens for this.dom. Or do I need to implement this with MutationObserver?

Welcome @jorilallo =)

Not mutation observer!

If I understand you correctly, everything can be done with Transforms (https://prosemirror.net/docs/ref/#transform)

Here’s an example that may work.

const transaction = state.tr.setNodeMarkup(
          getPos(), // For custom node views, this function is passed into the constructor.  It'll return the position of the node in the document.
          undefined, // No node type change
          newAttrs // Replace (update) attributes to your `video` block here

The way I got your specific use case working was adding event listeners to this.dom via node view. Mousemove, mouseup and mousedown will all need to be implemented.

But in short, on mousemove, element width/height dimension is updated directly (element.style.width = Xpx) and on mouseup, the new attributes are built and a transaction is dispatched with the final resized value (the size … height / width and anything else.) These attributes need to be stored as an attribute on the video schema and utilized to render to the DOM. So after the transform, the DOM state mirrors what prosemirror renders.

Let me know if you need more help or if the above doesnt work.

I assume you mean DOM attributes? ProseMirror doesn’t currently have any feature where it’ll notify a node view that it has been attached to the DOM, so you’d have to kludge this with a call to requestAnimationFrame when you create or update the DOM structure.

Exactly that, was just curious if there would have been a more native way. Thanks for the answer and happy holidays!