Undo/Redo in a React Text Editor with a Command-History Stack

import { useCallback, useState } from "react";
import type { Command } from "./commands";

export function useHistory<S>(initial: S) {
  const [present, setPresent] = useState<S>(initial);
  const [undoStack, setUndoStack] = useState<Command<S>[]>([]);
  const [redoStack, setRedoStack] = useState<Command<S>[]>([]);

  const execute = useCallback((command: Command<S>) => {
    setPresent((state) => command.apply(state));
    setUndoStack((stack) => [...stack, command]);
    setRedoStack([]);
  }, []);

  const undo = useCallback(() => {
    setUndoStack((stack) => {
      if (stack.length === 0) return stack;
      const command = stack[stack.length - 1];
      setPresent((state) => {
        setRedoStack((redo) => [...redo, command]);
        return command.invert(state).apply(state);
      });
      return stack.slice(0, -1);
    });
  }, []);

  const redo = useCallback(() => {
    setRedoStack((stack) => {
      if (stack.length === 0) return stack;
      const command = stack[stack.length - 1];
      setPresent((state) => command.apply(state));
      setUndoStack((undo) => [...undo, command]);
      return stack.slice(0, -1);
    });
  }, []);

  return {
    present,
    execute,
    undo,
    redo,
    canUndo: undoStack.length > 0,
    canRedo: redoStack.length > 0,
  };
}

import React, { useCallback } from "react";
import { useHistory } from "./useHistory";
import { insertText, deleteRange, DocState } from "./commands";

const START: DocState = { text: "", selection: 0 };

export function Editor() {
  const { present, execute, undo, redo, canUndo, canRedo } = useHistory(START);

  const handleChange = useCallback(
    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
      const next = event.target.value;
      const prev = present.text;
      let start = 0;
      while (start < prev.length && start < next.length && prev[start] === next[start]) start++;
      let endPrev = prev.length;
      let endNext = next.length;
      while (endPrev > start && endNext > start && prev[endPrev - 1] === next[endNext - 1]) {
        endPrev--;
        endNext--;
      }
      const removed = prev.slice(start, endPrev);
      const inserted = next.slice(start, endNext);
      if (removed) execute(deleteRange(start, removed));
      if (inserted) execute(insertText(start, inserted));
    },
    [present.text, execute]
  );

  const handleKeyDown = useCallback(
    (event: React.KeyboardEvent) => {
      const mod = event.metaKey || event.ctrlKey;
      if (mod && event.key.toLowerCase() === "z") {
        event.preventDefault();
        event.shiftKey ? redo() : undo();
      }
    },
    [undo, redo]
  );

  return (
    <div className="editor">
      <div className="toolbar">
        <button onClick={undo} disabled={!canUndo}>Undo</button>
        <button onClick={redo} disabled={!canRedo}>Redo</button>
      </div>
      <textarea
        value={present.text}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
        rows={12}
      />
    </div>
  );
}