Mark content view dirty when widget content changes

v6
1

I use widget decorations in my editor to hide some underlying text. The displayed content of the widget is fetched asynchronously and I then simply change the inner text of the DOM. When I change the content of the widget it can change length but if the cursor is on the same line it does not move accordingly. If I move the cursor manually it behaves correctly again.

I realize that this is because CodeMirror does not know that the widget has changed size. I did not find a proper way to mark the widget dirty. Right now my workaround is to use a ResizeObserver on the DOM and dispatch a selection event for the current cursor position (code below). This is clearly pretty hacky so I was wondering if there’s a better way to do it.

view.dispatch({
  selection: view.state.selection,
});

I keep track of the decorations using a StateField<DecorationSet> but I didn’t find a way to modify a widget in the update method, it seems to only support adding and filtering.

So is there a better way to either:

  1. Mark the widget as dirty and force a redraw of the cursor position
  2. Modify the widget in such a way that CodeMirror is aware of the change and to redraw automatically
2

Replacing the widget with a new one is how widgets are updated. You can optimize it on the DOM level by defining an update method for your widget type.