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

machine.js

const editingVisualState = {
  initial: 'loading',
  states: {
    loading: {
      after: {
        3000: [
          { target: 'idle' }
        ]
      }
    },
    idle: {
      on: {
        save: 'saving',
        preview: 'preview_mode',
        comment: 'comment_mode'
      }
    },
    saving: {
      on: {
        saveDone: 'idle'
      }
    },
    preview_mode: {
      on: {
        exit: 'idle'
      }
    },
    comment_mode: {
      on: {
        exit: 'idle'
      }
    }
  }
}

const editingTemplateState = {
  initial: 'loading',
  states: {
    loading: {
      after: {
        3000: [
          { target: 'editing' }
        ]
      }
    },
    editing: {
      on: {
        save: 'saving',
        preview: 'preview_mode'
      }
    },
    saving: {
      on: {
        saveDone: 'saved'
      }
    },
    preview_mode: {
      on: {
        exit: 'editing'
      }
    },
    saved: {
      type: 'final'
    }
  }
}

const editorMachine = Machine({
  initial: 'loading',
  context: {
    visualId: null,
    templateId: '172'
  },
  states: {
    loading: {
      after: {
        3000: [
          { target: 'editing_template', cond: 'isTemplate' },
          { target: 'editing_visual', cond: 'isVisual' }
        ]
      }
    },
    editing_visual: {
      ...editingVisualState
    },
    editing_template: {
      onDone: 'editing_visual.idle',
      ...editingTemplateState
    }
  }
}, {
  guards: {
    isTemplate: (context, event) => {
      return context.templateId !== null
    },
    isVisual: (context, event) => {
      return context.visualId !== null
    }
  }
})