Generated by XState Viz: https://xstate.js.org/viz

machine.js

  const undoMachine = Machine({
    id: 'input_w_undo',
    initial: 'idle',
    context: {
      value: "",
      prevSteps: []
    },
    states: {
      idle: {
        on: {
          FOCUS: {target: 'editing', actions: 'captureStep'},
          UNDO: {actions: 'undo', cond: 'hasUndoSteps'}
        }
      },
      editing: {
        on: {
          CHANGE: {actions: 'setValue'},
          BLUR: [{target: 'idle', cond: 'hasNewValue'}, {actions: send('RESET')}],
          RESET: {target: 'idle', actions: 'undo'}
        }
      },
    }
  }, {
    actions: {
      setValue: assign({value: (_, event) => event.data || ""}),
      captureStep: assign({prevSteps: (context) => [context.value, ...context.prevSteps]}),
      undo: assign(context => {
        const [head, ...tail] = context.prevSteps
        return {value: head, prevSteps: tail}
      })
    },
    guards: {
      hasUndoSteps: context => Boolean(context.prevSteps.length),
      hasNewValue: (context, event) => context.prevSteps[0] !== context.value
    },
  });