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

machine.js

const layerMachine = Machine(
  {
    id: 'layer',
    initial: 'idle',
    states: {
      idle: {
        on: {
          MOUSE_OVER: 'hovered',
        },
      },
      hovered: {
        on: {
          MOUSE_OUT: 'idle',
          MOUSE_DOWN: 'editing',
        },
      },
      editing: {
        on: {
          CLICK: 'focused',
        },
        entry: ['hideLayer'],
      },
      focused: {
        on: {
          /* ESCAPE: */
          BLUR: [
            {
              target: 'saving',
              cond: 'contentValid',
              actions: ['repositionLayer', 'showLayer', 'updateContent'],
            },
            { target: 'idle' },
          ],
          CHANGE: {
            actions: assign({
              editorState: (context, event) => {
                if (event.type === 'CHANGE') {
                  return (context.editorState = event.editorState);
                } else {
                  return context.editorState;
                }
              },
            }),
          },
        },
        entry: ['trackFocused'],
      },
      saving: {
        invoke: {
          id: 'updateCopy',
          src: (context) =>
            context.updateCopy(context.id, context.value),
          onDone: {
            target: 'success',
          },
          onError: {
            target: 'failure',
          },
        },
        entry: ['trackSaved'],
      },
      success: {
        on: {
          '': 'idle',
        },
      },
      failure: {
        on: {
          '': 'idle',
        },
      },
    },
  },
  {
    actions: {
      trackSaved: (context) => {
        context.trackEvent({
          name: `CopyMode.Text.Saved`,
        });
      },
      trackFocused: (context) => {
        context.trackEvent({
          name: `CopyMode.Text.Focused`,
        });
      },
    },
    guards: {
      contentValid: (context) => {
        let editorContent = ''; // context.editorState
        context.content !== editorContent;
      },
    },
  },
);