useReducer.js

function reducer(editorState, action) {
  switch (action.type) {
    // Set the editor’s render mode.
    case "SET_RENDER_MODE":
      return { ...editorState, renderMode: action.payload }
    // Set the editor’s read-only mode.
    case "SET_READ_ONLY":
      return { ...editorState, readOnly: action.payload }
    // Set the editor’s state.
    case "SET_STATE":
      return { ...editorState, ...action.payload } // `data`, `pos1`, and `pos2`.
    // Insert a tab character.
    case "TAB": {
      let { data, pos1, pos2 } = editorState // Use `let`.
      data = data.slice(0, pos1) + "\t" + data.slice(pos1, pos2) + data.slice(pos2)
      pos1 += "\t".length
      pos2 += "\t".length
      return { ...editorState, data, pos1, pos2 }
    }
    // Remove a tab character.
    case "DETAB": {
      let { data, pos1, pos2 } = editorState // Use `let`.
      if (data.slice(pos1 - 1, pos1) !== "\t") {
        return editorState
      }
      data = data.slice(0, pos1 - 1) + data.slice(pos1, pos2) + data.slice(pos2)
      pos1 -= "\t".length
      pos2 -= "\t".length
      return { ...editorState, data, pos1, pos2 }
    }
    // Rerenders the editor’s components.
    case "LEX":
      return { ...editorState, Components: Lex(editorState.readOnly, editorState.data) }
    // Store an undo state to the editor.
    case "STORE_UNDO": {
      if (editorState.stack.length) {
        const undo = editorState.stack[editorState.index]
        if (undo.data.length === editorState.data.length && undo.data === editorState.data) {
          return editorState
        }
      }
      // We need to overwrite `pos1` and `pos2` on the
      // second store undo.
      const { data, pos1, pos2 } = editorState
      if (editorState.stack.length === 1) {
        const undo = editorState.stack[0]
        undo.pos1 = pos1 - (data.length - undo.data.length) // ??
        undo.pos2 = pos2 - (data.length - undo.data.length) // ??
        // if (undo.pos1 < 0) {
        //  undo.pos1 = 0
        // }
        // if (undo.pos2 < 0) {
        //  undo.pos2 = 0
        // }
      }
      return { ...editorState, stack: [...editorState.stack, { data, pos1, pos2 }], index: editorState.index + 1 }
    }
    // Undo the editor’s state.
    case "UNDO": {
      if (!editorState.index) {
        return editorState
      }
      const { data, pos1, pos2 } = editorState.stack[editorState.index - 1]
      return { ...editorState, data, pos1, pos2, index: editorState.index - 1 }
    }
    // Redo the editor’s state.
    case "REDO": {
      if (editorState.index + 1 === editorState.stack.length) {
        return editorState
      }
      const { data, pos1, pos2 } = editorState.stack[editorState.index + 1]
      return { ...editorState, data, pos1, pos2, index: editorState.index + 1 }
    }
    // Prune the editor’s redo states.
    case "PRUNE": {
      // editorState.stack.splice(editorState.index + 1)
      return { ...editorState, stack: editorState.stack.slice(0, editorState.index + 1) }
    }
    default:
      throw new Error(`Action "${action}" not implemented. See \`reducer\`.`)
  }
  /* eslint-disable no-unreachable */
  return editorState // Never.
}