Grouping UndoManager actions

[Coffee2JS]

Getting undo patches out of the box is a super nice feature, but I'm having trouble using it correctly.

How do I prevent getting multiple undo actions, when the user e.g. types in a textfield, or moves a slider? Committing changes in 1 go, as in submitting a form, is not an option here, because changes to the model need to previewed live.

Another problem is that if the user e.g. types 'X' , and then hits backspace, it results in 2 undoable actions, instead of 0 which would be the expected outcome.

Could it be possible to somehow filter the incoming undo actions, to handle the cases above? Do I need to implement my own undo manager (patch recorder)? Any pointers for how to do that?

[xaviergonz]

You can use undoManager.withGroup / withGroupFlow to group several actions into single ones
https://mobx-keystone.js.org/actionMiddlewares/undoMiddleware#grouping-multiple-actions-into-a-single-undoredo-step

How do I prevent getting multiple undo actions, when the user e.g. types in a textfield, or moves a slider

For these cases I usually follow this pattern:

class M extends Model({ sliderFinalValue: 0 }) {
  @observable
  sliderTempValue = null;

  @computed
  get sliderValue() {
    return this.sliderTempValue ?? this.sliderFinalValue;
  }

  @modelAction
  setSliderTempValue(v) {
    this.sliderTempValue = v;
  }

  @modelAction
  commitSliderTempValue() {
    this.sliderFinalValue = this.sliderTempValue;
    this.sliderTempValue = null;
  }
}

Basically while moving the slider you are changing the observable temp value, which is not a prop and therefore skips middelwares, undo manager etc.
When the slider has finished moving (debounced / on mouse up...) then it commits this temp value into the final value, which adds an undo step. The computed property makes sure the right value is used at any time.

[Coffee2JS]

OK, thanks, I will try that.