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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
    
const editingMachine = Machine({
  id: 'editingMachine',
  initial: 'editing',
  states: {
    editing: {
      id: 'editing',
      on: {
        SAVE: 'saving',
        DISCARD: 'confirmingDiscard'
      }
    },
    confirmingDiscard: {
      on: {
        CONFIRM_DISCARD: '#viewing',
        CANCEL_DISCARD: '#editing'
      }
    },
    saving: {
      on: {
        SUCCESS: 'viewing',
        FAILURE: 'editing'
      }
    },
    viewing: {
      id: 'viewing',
      type: 'final'
    }
  }
})

const contentMachine = Machine({
  id: 'content',
  initial: 'draft',
  context: {
  },

  states: {
    draft: {
      id: 'draft',
      initial: 'viewing',
      states: {
        viewing: {
          on: {
            OPEN_DRAFT: '#content.draft',
            OPEN_LIVE: '#content.live',
            EDIT: 'editing',
          }
        },
        editing: {
          invoke:  {
            id: 'editingDraft',
            src: editingMachine,
            autoForward: true,
            onDone: 'viewing'
          },
        }
      }
    },
    live: {
      initial: 'viewing',
      states: {
        viewing: {
          on: {
            OPEN_DRAFT: '#content.draft',
            OPEN_LIVE: '#content.live',
            EDIT: 'editing',
          }
        },
        editing: {
          invoke:  {
            id: 'editingDraft',
            src: editingMachine,
            autoForward: true,
            onDone: 'viewing'
          },
        }
      }
    }
  }
});