Tiny-undo NPM | npm.io

Tiny Undo

Manage the undo/redo state programmatically for plain-text input element.

What does it solved?

Programming-friendly undo/redo handler (just like VSCode's behavior);
Get/set the undo/redo state, and subscribe its changes;
Run undo/redo programmatically;

How to use it?

Install package: yarn add tiny-undo or npm install tiny-undo

A simple example in pure html&javascript:

// 1. Get a textarea element instance
const textareaEl = document.querySelector("textarea");
// 2. Create a TinyUndo instance with the element
const tinyUndo = new TinyUndo(textareaEl);
// 3. done 🎉

And use it in React:

// ...
const editorRef = useRef<HTMLTextAreaElement>(null);

useEffect(() => {
  const tinyUndo = new TinyUndo(editorRef.current!);

  tinyUndo.subscribe((actions, index) => {
    // do anything you want right here
  });

  return () => {
    tinyUndo.destroy();
  };
}, []);
// ...

(Optional) With initial configuration:

/**
 * Initalize the TinyUndo config
 * @param initialValue: The initial value of the editor
 * @param interval: The interval in milliseconds to merge actions
 * @param maxSize: The maximum number of actions to keep
 * @param initialActions: The initial actions to add to the editor
 * @param initialIndex: The initial index of the initial actions
 */
export interface TinyUndoConfig {
  initialValue: string;
  interval: number;
  maxSize?: number;
  initialActions?: InputAction[];
  initialIndex?: number;
}

const config: TinyUndoConfig = {
  initialValue: "",
  interval: 500,
};
const tinyUndo = new TinyUndo(textareaEl, config);
// ...

More Advanced Examples

An undo/redo editor with persistent history in React
Please imagine that you can undo/redo with the historical data even if the browser has refreshed or restarted, and just need to save the tinyUndo data in the localstorage that can be done.
👀 Preview / ⌨️ Source code
An undo/redo state visual editor in Vue
Just a simple example which made with Vue.js to show how tiny-undo works.
👀 Preview / ⌨️ Source code