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 TIME_BEFORE_IDLE = 250;
  
  const fetchMachine = Machine({
      id: 'rte',
      initial: 'blurred',
      states: {
        blurred: {
          on: {
            SELECTION_CHANGE: {
              actions: ['notifySelectionChange'],
              target: 'selected',
            },
            SELECTION_START: {
              target: 'selected.active',
            },
            TEXT_CHANGE: {
              actions: ['notifyTextChange'],
            },
          },
        },
        selected: {
          initial: 'idle',
          on: {
            BLUR: {
              actions: ['notifyBlur'],
              target: '#rte.blurred',
            },
          },
          states: {
            idle: {
              on: {
                SELECTION_CHANGE: {
                  target: 'changing',
                },
                SELECTION_START: {
                  target: 'active',
                },
                TEXT_CHANGE: {
                  target: 'writing',
                },
              },
            },
            active: {
              after: {
                [TIME_BEFORE_IDLE]: {
                  actions: ['notifySelectionStart'],
                },
              },
              on: {
                MOUSE_UP: {
                  target: 'idle',
                },
                SELECTION_CHANGE: {
                  target: 'changing',
                },
              },
            },
            changing: {
              after: {
                [TIME_BEFORE_IDLE]: {
                  actions: ['notifySelectionChange'],
                  target: 'idle',
                },
              },
              on: {
                SELECTION_CHANGE: {
                  target: 'changing',
                },
                SELECTION_START: {
                  target: 'active',
                },
                TEXT_CHANGE: {
                  target: 'writing',
                },
                WRITING_STOPPED: {
                  actions: ['notifySelectionChange'],
                  target: 'idle',
                },
              },
            },
            writing: {
              after: {
                [TIME_BEFORE_IDLE]: {
                  actions: ['notifyTextChange'],
                  target: 'idle',
                },
              },
              on: {
                BLUR: {
                  actions: ['notifyTextChange', 'notifyBlur'],
                  target: '#rte.blurred',
                },
                SELECTION_CHANGE: {
                  target: 'writing',
                },
                TEXT_CHANGE: {
                  target: 'writing',
                },
                WRITING_STOPPED: {
                  actions: ['notifyTextChange'],
                  target: 'idle',
                },
              },
            },
          },
        },
      },
    });