{"id":13770430,"url":"https://github.com/kommitters/editorjs-undo","last_synced_at":"2025-05-15T05:07:45.159Z","repository":{"id":38066091,"uuid":"271114793","full_name":"kommitters/editorjs-undo","owner":"kommitters","description":"Undo/Redo feature for Editor.js","archived":false,"fork":false,"pushed_at":"2025-05-02T10:42:49.000Z","size":7164,"stargazers_count":184,"open_issues_count":11,"forks_count":53,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-05-12T21:09:34.828Z","etag":null,"topics":["editorjs","editorjs-plugin","hacktoberfest","javascript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/editorjs-undo","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kommitters.png","metadata":{"funding":{"github":["kommitters"]},"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-06-09T21:35:50.000Z","updated_at":"2025-05-08T22:50:11.000Z","dependencies_parsed_at":"2023-10-23T17:32:51.666Z","dependency_job_id":"26a40e13-7d09-4674-86f2-f6d5f4422390","html_url":"https://github.com/kommitters/editorjs-undo","commit_stats":{"total_commits":119,"total_committers":29,"mean_commits":4.103448275862069,"dds":0.7815126050420168,"last_synced_commit":"788014bf2631bf62556498ca0ab449d36a483dd3"},"previous_names":[],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kommitters%2Feditorjs-undo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kommitters%2Feditorjs-undo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kommitters%2Feditorjs-undo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kommitters%2Feditorjs-undo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kommitters","download_url":"https://codeload.github.com/kommitters/editorjs-undo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254276447,"owners_count":22043867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editorjs","editorjs-plugin","hacktoberfest","javascript"],"created_at":"2024-08-03T17:00:37.348Z","updated_at":"2025-05-15T05:07:40.150Z","avatar_url":"https://github.com/kommitters.png","language":"JavaScript","readme":"# EditorJS Undo Plugin\n\n![Stability Badge](https://img.shields.io/badge/stability-stable-green.svg)\n![](https://badgen.net/badge/Editor.js/v2.0/blue)\n[![Coverage Status](https://coveralls.io/repos/github/kommitters/editorjs-undo/badge.svg)](https://coveralls.io/github/kommitters/editorjs-undo)\n[![OpenSSF Best Practices](https://bestpractices.coreinfrastructure.org/projects/6471/badge)](https://bestpractices.coreinfrastructure.org/projects/6471)\n[![OpenSSF Scorecard](https://api.securityscorecards.dev/projects/github.com/kommitters/editorjs-undo/badge)](https://api.securityscorecards.dev/projects/github.com/kommitters/editorjs-undo)\n\nUndo/Redo feature for [Editor.js](https://editorjs.io).\n\n![](assets/demo.gif)\n\n## Installation\n### Install via NPM\n\n### 2.x.x (beta)\n\nThis new version introduces breaking changes. Remember that it is still in beta version.\n\nPlease, report bugs or behavior issues :).\n\n#### What's new?\n* Overall plugin performance is improved, especially with large documents.\n* Undo/Redo lifecycle is managed through block updates instead of a full document render.\n* Solves issues in documents with several images, for example the blink with undo/redo.\n* Sets the caret in the respective position when the user is typing inside an existing text.\n* Adds support to ReadOnly toggle.\n* Optimizes the observer, saving with the EditorJS API only when the content changes.\n\nGet the package\n\n```shell\n$ npm i --save-dev editorjs-undo\n```\n\n### 1.x.x (stable version)\n\nTo install the latest v1 stable version\n\nGet the package\n\n```shell\n$ npm i --save-dev editorjs-undo@1.0.1\n```\n\nInclude module in your application\n\n```javascript\nimport Undo from 'editorjs-undo';\n```\n\n### Load from CDN\n\nYou can load a specific version of the package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/editorjs-undo).\n\nRequire this script on a page with Editor.js.\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/editorjs-undo\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n```javascript\nconst editor = new EditorJS({\n  onReady: () =\u003e {\n    new Undo({ editor });\n  },\n});\n```\n\nOn the editor, use \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eZ\u003c/kbd\u003e or \u003ckbd\u003e⌘\u003c/kbd\u003e + \u003ckbd\u003eZ\u003c/kbd\u003e to undo, or use \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eY\u003c/kbd\u003e or \u003ckbd\u003e⌘\u003c/kbd\u003e + \u003ckbd\u003eY\u003c/kbd\u003e to redo.\n\n### Usage with React\n\nIf you are using React, you could create a function to handle the onReady property, the function will store the Undo instance. Then, you must call the function in onReady in the editorJS instance.\n\n```javascript\nconst handleReady = (editor) =\u003e {\n  new Undo({ editor });\n};\n\nclass ReactEditor extends Component {\n  render() {\n    return (\n      \u003cEditorJs\n        onReady={ handleReady }\n        tools={ ... }\n      /\u003e\n    )\n  }\n}\n\n```\n\n### Usage with [react-editor-js](https://github.com/Jungwoo-An/react-editor-js).\n\nIf you are using [react-editor-js](https://github.com/Jungwoo-An/react-editor-js), you could create a function to handle the onReady property, the function will store the undo instance and the respective configuration or initialize method if you want to use them (they will be explained below). Then, you must call the function in onReady in the editorJS instance.\n\n**React class components:**\n```javascript\n\nclass ReactEditor extends Component {\n  constructor(props) {\n    super(props);\n    this.editorCore = React.createRef();\n  }\n\n  handleInitialize = (instance) =\u003e {\n    this.editorCore.current = instance;\n  };\n\n  handleReady = () =\u003e {\n    const editor = this.editorCore.current._editorJS;\n    new Undo({ editor });\n  };\n\n  render() {\n    return (\n      \u003cReactEditorJS\n        onInitialize={ this.handleInitialize }\n        onReady={ this.handleReady }\n        tools={ ... }\n      /\u003e\n    )\n  }\n}\n```\n**Note:** If you are already using [editorjs-drag-drop](https://github.com/kommitters/editorjs-drag-drop) your handleReady function must have the editorjs-drag-drop instance.\n\n```javascript\nhandleReady = () =\u003e {\n  const editor = this.editorCore.current._editorJS;\n  new Undo({ editor });\n  new DragDrop(editor);\n};\n\n```\n\n**React functional components:**\n\n```javascript\n........\nexport const ReactEditor = () =\u003e {\n  const editorCore = React.useRef(null)\n\n  const handleInitialize = React.useCallback((instance) =\u003e {\n    editorCore.current = instance\n  }, [])\n\n  const handleReady = () =\u003e {\n    const editor = editorCore.current._editorJS;\n    new Undo({ editor })\n    new DragDrop(editor);\n  };\n\n  const ReactEditorJS = createReactEditorJS()\n  return(\n  \u003cReactEditorJS\n    onInitialize={ handleInitialize }\n    onReady={ handleReady }\n    tools={ ... }\n    defaultValue={ ... }\n  /\u003e\n  )\n}\n\n```\n\n### Initialize the plugin with data\n\n**Note:** If you have loaded EditorJS with any initial data (such as some saved content), you _must_ pass in an `initialData` object. If you don't, the default initial undo state lead to an empty editor.\n\nYou may use the `initialize` method inside the editor's `onReady` callback.\n\n```javascript\nconst editor = new EditorJS({\n  onReady: () =\u003e {\n    const undo = new Undo({ editor });\n    undo.initialize(initialData);\n  },\n});\n```\n\n### Add a custom shortcut to undo and redo\n\n**Note:** If you do not add any shortcut, the default shortcuts will be set up.\n\nIf you want to add custom shortcuts, pass a config object with a shortcut key in the undo instance, the shortcuts must be called `undo` and `redo`.\n\n```javascript\nconst config = {\n  shortcuts: {\n    undo: 'CMD+X',\n    redo: 'CMD+ALT+C'\n  }\n}\nconst editor = new EditorJS({\n  onReady: () =\u003e {\n    const undo = new Undo({ editor, config });\n  },\n});\n```\n\nYou can set each shortcut with two or three keys, the available special keys are: CMD, ALT, SHIFT. CMD will be set up automatically as \u003ckbd\u003eCtrl\u003c/kbd\u003e or \u003ckbd\u003e⌘\u003c/kbd\u003e depending on your OS.\n\n### Provide a custom debounce time for the Observer\n\nInternally, editorjs-undo uses an Observer instance that watches for changes in the text being entered. By default, it waits for a pause of 200ms in text entry before saving a change. If you want to have editorjs-undo save changes more or less often, pass a config object with a **debounceTimer** key in the undo instance and provide a different value in milliseconds.\n\n```javascript\nconst config = {\n  debounceTimer: 100\n};\nconst editor = new EditorJS({\n  onReady: () =\u003e {\n    const undo = new Undo({ editor, config });\n  },\n});\n```\n\nLowering the debounceTimer value below 200ms will make editorjs-undo save changes more often. Raising the debounceTimer value above 200ms will make editorjs-undo save changes less often.\n\nSetting the debounceTimer value to 0 makes editorjs-undo save every character entered as an individual change, which makes undo and redo operations only remove/replace one character at a time.\n\n### Available Options\n\n| Field      | Type       | Description                                                    |\n| ---------- | ---------- | -------------------------------------------------------------- |\n| editor     | `EditorJS`   | **Required.** The EditorJS instance.                         |\n| maxLength  | `Number`   | Max amount of changes recorded by the history stack.           |\n| onUpdate() | `function` | Callback called when the user performs an undo or redo action. |\n| config     | `object`   | Set up the configuration to editorjs-undo like the shortcuts   |\n\n\n## Development\n\n**Development mode**\n\n```shell\n$ yarn build:dev\n```\n\n**Production release**\n\n1. Create a production bundle\n\n```shell\n$ yarn build\n```\n\n2. Commit `dist/bundle.js`\n\n**Run tests**\n\n```shell\n$ yarn test\n```\n\n## Code of conduct\nWe welcome everyone to contribute. Make sure you have read the [CODE_OF_CONDUCT][coc] before.\n\n## Contributing\nFor information on how to contribute, please refer to our [CONTRIBUTING][contributing] guide.\n\n## Changelog\nFeatures and bug fixes are listed in the [CHANGELOG][changelog] file.\n\n## License\nThis library is licensed under an MIT license. See [LICENSE][license] for details.\n\n## Acknowledgements\nMade with 💙 by [kommitters Open Source](https://kommit.co)\n\n[license]: https://github.com/kommitters/editorjs-undo/blob/master/LICENSE\n[coc]: https://github.com/kommitters/editorjs-undo/blob/master/CODE_OF_CONDUCT.md\n[changelog]: https://github.com/kommitters/editorjs-undo/blob/master/CHANGELOG.md\n[contributing]: https://github.com/kommitters/editorjs-undo/blob/master/CONTRIBUTING.md\n","funding_links":["https://github.com/sponsors/kommitters"],"categories":["Tools"],"sub_categories":["Plugins"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkommitters%2Feditorjs-undo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkommitters%2Feditorjs-undo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkommitters%2Feditorjs-undo/lists"}