How can I listen to the node attrs changed and dispatch a transaction?

How can I listen to the node attrs changed and dispatch a transaction?

Say I have a schema which own a attrs props like below:

attrs: {
   someProp: {
      default: true
   }
}

What I want to do is something like, when the attrs.someProp changed from true to false and vice versa, I want to do something like dispatch(tr.scrollIntoView()).

What is the proper way to achieve this? I happened to see the update function in NodeView. Is it the best way to do this?

Any help will be appreciated. :slight_smile:

Sounds like your best bet would be to add this to whatever code is going to originate changes to this attribute. Just make sure that when it creates a transaction that does this, you also set its scroll-into-view flag. But I’m not entirely sure what you are trying to do in the first place—scrollIntoView will scroll the selection into view, not the changed node.

Thanks @marijn for the quick reply. We are tring to do this in a collabrative co-edit situation. When let’s say user A changed the node attrs.xxx which makes the node’s width to be changed(become smaller). (the node dom is a horizontally scrollable container) This might make the co-editor user B’s cursor selection dispear from the viewport.

An example would be the table container width shrinked to the red one, then the user B’s cursor in the 3rd cell on the 1st row will become invisible(this is why we want to trigger an extra scrollIntoView here when the this exact attr changed).

Browsers will already stabilize the scroll position for size changes that occur outside of the visible viewport. If that doesn’t suffice, you could consider always adding the scrollIntoView flag to transactions created by the collaborative step receiving mechanism, maybe?

Thanks @marijn. I will look into it.