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?

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

2. 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 🎉

3. 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();
     };
   }, []);
   // ...

4. (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

References

• kommitters/editorjs-undo
• inputType values of InputEvent