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

machine.js

function applyInsertModeStyles() {
  console.log("NOT SERIALIZED, WILL GET CALLED");
  showmode.textContent = "-- INSERT --";
  cursor.style.width = "2.5px";
}

const modeMachine = Machine({
  id: "input-mode",
  initial: "normal",
  context: {
    cursorPointer: undefined,
    textLength: undefined
  },
  states: {
    normal: {
      entry: "applyNormalModeStyles",
      on: {
        INSERT: "insert",
        VISUAL: "visual",
        REPLACE: "replace",
        CURSOR_LEFT: {
          target: ".",
          actions: "moveLeft",
          internal: true
        },
        CURSOR_RIGHT: {
          target: ".",
          actions: "moveRight",
          internal: true
        }
      }
    },
    visual: {
      entry: "applyVisualModeStyles",
      on: { NORMAL: "normal" }
    },
    insert: {
      entry: applyInsertModeStyles,
      on: {
        NORMAL: "normal",
        UPDATE_TEXT: {
          target: ".",
          actions: "updateText"
        }
      }
    },
    replace: {
      entry: "applyReplaceModeStyles",
      on: { NORMAL: "normal" }
    }
  },
  actions: {
    updateText: (ctx, e) => {
      console.log("UPDATE", e);
      terminalText.textContent = e.value;
      assign({
        textContent: e.value
      });
    },
    moveLeft: ctx => {
      const cursorPointer = ctx.cursorPointer - 1;
      cursor.style.left = `${(ctx.textLength - cursorPointer) * -7}px`;
      assign({
        cursorPointer
      });
    },
    moveRight: ctx => {
      const cursorPointer = ctx.cursorPointer + 1;
      const calculatedPosition = (ctx.textLength - cursorPointer) * 7;
      const lineEnd = calculatedPosition > 0;
      cursor.style.left = `${lineEnd ? 0 : calculatedPosition}px`;
      assign({
        cursorPointer
      });
    },
    // applyInsertModeStyles: () => {
    //   console.log("APPLYING INSERT STYLES");
    //   showmode.textContent = "-- INSERT --";
    //   cursor.style.width = "2.5px";
    // },
    applyReplaceModeStyles: () => {
      showmode.textContent = "-- REPLACE --";
    },
    applyNormalModeStyles: () => {
      console.log("SERIALIZED, DOES NOT GET CALLED");
      showmode.textContent = "";
      cursor.style.width = "7px";
    },
    applyVisualModeStyles: () => {
      showmode.textContent = "-- VISUAL --";
    }
  }
});