A Powerful and Simple Javascript Library History for Undo/Redo Functionality

undoredo-js

UndoRedo.js is a powerful and simple JavaScript library that provides archives of the undo/redo function and applies undo and redo functions to text fields.

The plugin provides a history function that records what you’ve written for undo and redo functions.

Usage:

This package is useful for any step-by-step task, for example:

  • Undo / redo function for text input.
  • Something like browser history.
  • Settings page.
  • File Explorer.
  • Calculator (why not xD).
  • And more …

Notes:

  • This is my first package, leave a star if you like <3.
  • You are free to suggest anything and I will try to add it soon if I find it useful.
  • If you find any error (including the README file) don’t hesitate to help fix it.
  • Please report any bugs.
  • Made with ❤ in Algeria 🇩🇿.

How to make use of it:

1. Import the UndoRedo.js library into the doc.

<script src="src/UndoRedo.js"></script>

2. Initialize the UndoRedo.js library and decide the cooldown used for recording the information.

const txtHistory = window.UndoRedojs(5);

3. Add event listeners for inputs in your text field.

<textarea id="input"></textarea>
const textarea = document.querySelector("#input");

textarea.addEventListener('input', () => {
  // Check if the new textarea value is different
  if (txtHistory.current() !== textarea.value) {
    // Check for pastes, auto corrects..
    if ((textarea.value.length - txtHistory.current().length) > 1 || (textarea.value.length - txtHistory.current().length) < -1 || (textarea.value.length - txtHistory.current().length) === 0) {
      // Record the textarea value and force to bypass cooldown
      txtHistory.record(textarea.value, true);
    // Check for single key press, single chacacter paste..
    } else {
      // Record the textarea value
      txtHistory.record(textarea.value);
    }
  }
});

4. Some browsers will auto-fill the textarea once more after reloading, it will cope with that.

setTimeout(() => {
  if (textarea.value) txtHistory.record(textarea.value, true);
}, 100);

5. Enable the undo/redo functionalities.

if (txtHistory.undo(true) !== undefined) {
  textarea.value = txtHistory.undo();
}

if (txtHistory.redo(true) !== undefined) {
  textarea.value = txtHistory.redo();
}

Undo/Redo And History, UndoRedo.js Plugin/Github


See Demo And Download

Official Website(iMrDJAi): Click Here

This superior jQuery/javascript plugin is developed by iMrDJAi. For extra Advanced Usages, please go to the official website.