kommitters / editorjs-undo Goto Github PK
View Code? Open in Web Editor NEWUndo/Redo feature for Editor.js
Home Page: https://www.npmjs.com/package/editorjs-undo
License: MIT License
Undo/Redo feature for Editor.js
Home Page: https://www.npmjs.com/package/editorjs-undo
License: MIT License
Uncaught (in promise) DOMException: Failed to execute 'querySelector' on 'Document': '#[object HTMLDivElement]' is not a valid selector.
EditorJS supports queryselectors and actual element refs. This plugin breaks when using elements directly as a holder.
For example, when you specify { holder: ref.current }, the observer code #${this.holder}
breaks.
Breaks on this line of code
https://github.com/kommitters/editorjs-undo/blob/master/src/observer.js#L36
This problem is duplicate with PR and it does not fix the problem.
It was my bad that I didn't review it carefully. The problem is still the same that the plugin still trying to call the editor's save API after the editor instance has been destroyed.
if the keyboard is in Russian, it doesn't work.
I suggest using event.code = KeyZ and event.code = KeyY
For typed text, the number of characters deleted each time the CMD+Z key combination is pressed depends upon the speed/cadence with which the original text was typed. This is due to the currently unchangeable 200ms debounce used in the observer.
The number of characters deleted each time CMD+Z is pressed depends upon the rate of speed with which the original text was typed. To reproduce this behaviour:
It should be possible to have pressing CMD+Z delete one character at a time, regardless of how quickly the original text was entered.
N/A
Undo does not work in document with initial data
Changes should be rolled back in appropriate order or appearance
...
editorRef.current = new EditorJS({
placeholder: 'Enter some reach text...',
inlineToolbar: true,
readOnly,
data,
holder: 'editorjs',
onReady: () => {
const undo = new Undo({
editor: editorRef.current,
config: {
shortcuts: {
undo: 'CMD+Z',
redo: 'CMD+SHIFT+Z'
}
}
});
if (data) undo.initialize(data);
return undo;
},
tools: EDITOR_JS_TOOLS({
readOnly,
policyId: orgPolicyId,
orgId,
companyName: orgName,
blocks: data?.blocks,
orgEntities,
...orgParams
}),
tunes: ['blockTune', 'anchorBlockTune']
});
...
Work well in empty document.
Ctrl
/Cmd
+ Z
is the universally accepted keyboard shortcut to undo something.
However the shortcut for redo varies between different operating systems:
Ctrl
+ Y
(Windows)On Windows, it's common for redo be mapped to Ctrl
+ Y
.
But on Mac, Cmd
+ Y
has no effect in most applications. And sometimes it does something else entirely – for example, in Chrome it opens History.
Ctrl
/Cmd
+ Shift
+ Z
(Mac, Linux)This is the redo keyboard shortcut on Mac and Linux.
As a Mac user, I can confirm that Cmd
+ Shift
+ Z
performs the redo action consistently in all applications throughout the operating system. I believe this is also true for Linux.
The picture seems less clear on Windows. Some applications seem to support Ctrl
+ Y
whereas other support Ctrl
+ Shift
+ Z
(or both).
This is corroborated by: https://keyboardshortcuts.org/redo
It'd be great if the redo feature supported both Ctrl
+ Y
and Ctrl
/Cmd
+ Shift
+ Z
keyboard shortcuts. That way it'd be more discoverable and feel native to users of non-Windows operating systems.
Personally, I have a strong muscle memory for Cmd
+ Shift
+ Z
which is why I've noticed this. It breaks my internal expectations of how an editor behaves on Mac. I expect the same is true for people using iOS devices with an attached keyboard.
I haven't actually tried mapping redo to both shortcuts, so am unsure whether this is a trivial change or if it's limited to one single shortcut only.
But I thought I'd report this here as it doesn't seem to have been raised yet – although I do see that it was touched upon in #106.
I'm working on a Typescript project and ideally, this library should have Typescript type declarations
Add Typescript type declaration files
Creating my own type declaration files inline in my project for this library, but that is not a very maintainable solution.
If an article is very long, and scrollbar is in the middle of the article, press Ctrl+Z will make editor scroll to top.
this experience is not good
Press Ctrl+Z will scroll to top
Press Ctrl+Z would not scroll to any where
Firefox will cause this problem, Chrome is ok
I always use cmd+z for undo and cmd+shift+z for redo in every application I use so I wanted to set the same shortcuts for this library. However if I set it up like that then both cmd+z and cmd+shift+z will perform an undo action.
My configuration:
const undo = new Undo({
editor,
config: {
shortcuts: {
undo: "CMD+Z",
redo: "CMD+SHIFT+Z",
},
},
});
2.23.2
editorjs-undo: 2.0.0-rc.3
Having both cmd+z as undo and cmd+shift+z as redo in the shortcuts config will result in both performing an undo action.
The shortcuts should respect the config sent into Undo.
The keyboard shortcodes vary depending on the operating system or the language. It is hard to keep a standard here.
MacOS metaKey + z
metaKey + y
Other OS ctrlKey + z
ctrlKey + y
Allow users to configure their custom keyboard shortcodes to dispatch the Undo/Redo actions.
When binded to window.document, keyboard events are accepted even outside of Editor.js
Add the information about the beta version release in the Readme file
Calling querySelector
here results in an uncessary crash in case the Editor was initialized from a HTMLElement reference instead of a selector.
Recommended fix:
const target = this.holder instanceof HTMLElement ? this.holder : document.querySelector(`#${this.holder}`);
https://github.com/kommitters/editorjs-undo/security/dependabot
To keep the library up-to-date by updating dependencies in response to these alerts.
The recent EditorJS version has included a readOnly property. Ref.
To add support to this new property
I'm getting a weird error when using this component with NextJS. The page crashes, but is fixed after reloading, and doesn't appear for a while? It seems to be random. Possibly a SSR issue?
Unhandled Runtime Error
TypeError: can't access property "type", t[i] is undefined
Call Stack
value
node_modules/editorjs-undo/dist/bundle.js (1:6033)
value/<
node_modules/editorjs-undo/dist/bundle.js (1:5490)```
### Expected behavior
The page doesn't crash.
Undo deletes empty rows on a Table
Adding table, enter some content
Only remove the text that was entered
My Application is currently available here:
react-editor-js is a React component to use editorJS in React.
To update the library docs and explain how to use the editorjs-undo plugin with react-editor-js
Hi 👋
I update this morning to 0.1.7 and editorjs-undo stopped working. This is because my editorjs was configured with the default value for the holder
param, which is 'editorjs'
(https://editorjs.io/getting-started#configuration). It results in the following errors when instantiating Undo
bundle.js:280 Uncaught (in promise) TypeError: e.addEventListener is not a function
at t.value (bundle.js:280)
at new t (bundle.js:160)
at onReady (fs_builder_controller.js:116)
at editor.js:13098
bundle.js:205 Uncaught (in promise) TypeError: Cannot read property 'undefined' of undefined
at t.value (bundle.js:205)
at bundle.js:199
Changing the configuration value of holder
to document.querySelector('#editorjs')
fixes the issue. I think editorjs-undo should support both a String or a HTMLElement value for the holder
param, as this is what is supported by editorjs (see https://github.com/codex-team/editor.js/blob/master/types/configs/editor-config.d.ts#L16).
Let me know what you think. If you agree with my suggestion, I can go ahead and write a PR for this.
Cheers!
I am using react-editor-js
npm package and I would like to extend it with undo.
const handleReady = (editor) => {
new Undo({ editor });
};
<EditorJs
instanceRef={instance => (editorJsRef.current = instance)}
placeholder="Start typing what's in your head..."
tools={EDITOR_JS_TOOLS}
data={data}
onReady={handleReady}
/>
According to your documentation, this should work. But error breaks the page:
In this case e = this.editor.configuration.holder
.
holder
property in editor instance I am passing in handleReady
function is a string with editor container ID. But library code references it as DOM element.
This workaround works (converting element ID to DOM element):
const handleReady = (editor) => {
let temp = document.getElementById(editor.configuration.holder);
editor.configuration.holder = temp;
new Undo({ editor });
};
But I don't think that I should override this.
Also can you update README.md to show an example how to integrate this with https://www.npmjs.com/package/react-editor-js?
When the editorjs.undo plugin is instanced with custom shortcuts, the undo action is deleting all the content in the block and is causing unexpected behaviors.
If a user makes changes in more than one block and tries to undo those changes with CMD+Z, the plugin breaks and unexpectedly deletes a block when it should not.
The plugin unexpectedly deletes content during CMD+Z operations across multiple blocks, as shown below:
To recreate this bug, take the following steps:
Undo operations with CMD+Z should work properly across multiple blocks instead of having content deleted unexpectedly, as shown below:
The plugin is currently incorrectly deleting a block when it should not because no entry is inserted into the stack when a user moves between blocks. This causes the blockWasSkipped
function to return true
when it should not. It compares the index
and compIndex
obtained from the stack, and since there was no stack entry for when the user switched from one block to another, this condition evaluates to true
and the second block in the example I provided gets deleted.
For what it's worth, I did attempt to implement a fix for this issue by modifying the blockWasSkipped
function to no longer do an index comparison and also adding a new click listener/handler to save and insert new stack entries when the user switched between blocks, but my solution did not seem stable across environments. These changes are shown below:
Unfortunately I do not have the bandwidth to continue looking into a solution for this issue, so I'm hoping someone in the community can solve it and that the information I've provided here helps with that effort.
The plugin does not work correctly when the text was written in Russian. In particular, return does not work after converting text into a header and other types of blocks.
We write 1 paragraph of text
Convert 1 paragraph to heading
Change the keyboard layout to Russian (or another)
Press cmd + z
Nothing happens
We write 1 paragraph of text
Convert 1 paragraph to heading
Change the keyboard layout to Russian (or another)
Press cmd + z
Paragraph 1 became text again
A clear and concise description of what the bug is.
Include code samples, errors and stack traces if appropriate.
If reporting a bug, please include the reproducing steps.
A clear and concise description of what you expected to happen.
Add any other context about the problem here.
As Undo plugin need an inital state
`
function initUndo() {
undo = new Undo({editor});
editor.save().then((outputData) => {
//console.log('Article data: ', outputData) //strong tags are washed where are they are allowed in config
var initialData=outputData
undo.initialize(initialData.blocks);
}).catch((error) => {
console.log('Saving failed: ', error)
});
}
`
and in my paragaph plugin config, I have
paragraph: {
text: {
type: "string",
allowedTags: "i,b,u,a[href],strong,em,br,br,dt,dl,embed,ol,li,ul"
}
}
but edtor sanitize at least strong tag (and I guess others too) on editor.save()
/**
* Saving example
*/
saveButton.addEventListener('click',(e) => {
editor.save().then((savedData) => {
alert(savedData.toSource()) //<strong> dissaper
});
});
`
so when I undo, I got only text with br tag preserved in paragraph
There could be a function .resetStack(rootData)
rootData param could be similar to .initialize(data)
data param
https://github.com/kommitters/editorjs-undo/security/dependabot
To keep the library up-to-date by updating dependencies in response to these alerts.
There is a bug in the save
function where index
is incorrectly being used in place of indexInState
.
When determining the caretIndex
, index
is incorrectly used in the state[index].type === 'header'
comparison
/**
* Adds the saved data in the history stack and updates current position.
*/
save(state) {
if (this.position >= this.maxLength) {
this.truncate(this.stack, this.maxLength);
}
this.position = Math.min(this.position, this.stack.length - 1);
this.stack = this.stack.slice(0, this.position + 1);
const index = this.blocks.getCurrentBlockIndex();
const blockCount = this.blocks.getBlocksCount();
let indexInState = index;
if (!state[index]) indexInState -= (blockCount - state.length);
const caretIndex = state[indexInState].type === 'paragraph' || state[index].type === 'header'
? this.getCaretIndex(index) : null;
this.stack.push({ index: indexInState, state, caretIndex });
this.position += 1;
this.onUpdate();
}
When determining the caretIndex
, indexInState
should be used in both comparisons
/**
* Adds the saved data in the history stack and updates current position.
*/
save(state) {
if (this.position >= this.maxLength) {
this.truncate(this.stack, this.maxLength);
}
this.position = Math.min(this.position, this.stack.length - 1);
this.stack = this.stack.slice(0, this.position + 1);
const index = this.blocks.getCurrentBlockIndex();
const blockCount = this.blocks.getBlocksCount();
let indexInState = index;
if (!state[index]) indexInState -= (blockCount - state.length);
const caretIndex = state[indexInState].type === 'paragraph' || state[indexInState].type === 'header'
? this.getCaretIndex(index) : null;
this.stack.push({ index: indexInState, state, caretIndex });
this.position += 1;
this.onUpdate();
}
After initialize, then press ctrl+z, got error.
Can make redo working by ctrl + shift + x like the defaults of windows?
On hover action, the column and row creator toolbars show and hide causing the attribute mutation. I have added an exclusion for this toolbar's class.
On hover action, the column and row creator toolbars show and hide causing the attribute mutation
When on hover actions in the table toolbars, does not save it as a mutation in the observer
It seems that moving blocks (via Drag-and-Drop OR via BlockTune) doesn't behave consistently.
"@editorjs/header": "^2.6.2"
"@editorjs/paragraph": "^2.8.0"
Attached 2 Videos with two different behaviors
If you add an empty paragraph, followed by an empty paragraph and enter one character: You're receiving the following message:
bundle.js?:formatted:347 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type')
at t.value (bundle.js?:formatted:347:54)
at eval (bundle.js?:formatted:329:62)
The error message should not appear.
Using react-editor-js as described in the README.md with onInitialize
.
const handleInitialize = React.useCallback((instance) => {
editorCore.current = instance
}, [])
const handleReady = () => {
const editorJsInstance = editorCore.current._editorJS;
const undo = new Undo({
editor: editorJsInstance,
config: {
debounceTimer: 100
}
});
undo.initialize(editor.blocks);
new DragDrop(editorJsInstance);
};
hi guys
as mentioned in codex-team/editor.js#518 (comment), when i use this plugin in editor.js, the caret state (like previous cursor position staff) is lost,it's there a way to keep the cursor state after undo/redo ?
thanks!
CMD+Z and CMD+Y operations on text selections within a text block cause the caret to unexpectedly jump to the end of the current text block rather than remaining in its current location.
CMD+Z and CMD+Y operations on text selections within a text block should not cause the caret to unexpectedly jump to the end of the current text block. The caret should remain in the position it was in when the CMD+Z or CMD+Y operation was initiated.
If text deleted from within a text block is restored using CMD+Z, the restored text should be highlighted, indicating that it is currently selected.
The caret currently jumps to the end of the current text block when CMD+Z and CMD+Y are used, as shown below:
The caret should maintain its position during CMD+Z and CMD+Y operations, as shown below:
Event listeners are set in the document
instead of EditorJS' holder.
This causes problems when there are other input elements in the webpage. The ctrl-c/ctrl-z inside these other elements automatically fires the undo/redo events.
Currently, the publishing process to the NPM library hub is done manually.
Add workflow for automatic publishing in npm when the release on Github is created.
https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
Hi, thanks for this package. I'm getting a bug. Can you help me.
When a user pastes text into the editor and uses the 'undo' function, then it should undo the paste.
Instead, the undo is ignored.
Steps to reproduce:
Expected behavior:
The editor should undo the paste.
https://github.com/kommitters/editorjs-undo/security/dependabot
To keep the library up-to-date by updating dependencies in response to these alerts.
After instantiating the Undo class in onReady()
, every click on the DOM (anywhere other than the EditorJS editor itself) triggers a save event on the editor, this doesn't happen when I remove the editorjs-undo
library.
Editor.js version: 2.23.2
Plugins you use with their versions:
Embed, Table, List, Warning, Code, LinkTool, Raw, Header, Quote, Marker, CheckList, Delimiter, InlineCode, SimpleImage
Is there a way to scope the click events to the editor container only, so clicks outside the editor container doesn't trigger the save event?
I'm worried that this behaviour might affect performance.
This issue was automatically created by Allstar.
Security Policy Violation
Security policy not enabled.
A SECURITY.md file can give users information about what constitutes a vulnerability and how to report one securely so that information about a bug is not publicly visible. Examples of secure reporting methods include using an issue tracker with private issue support, or encrypted email with a published key.
To fix this, add a SECURITY.md file that explains how to handle vulnerabilities found in your repository. Go to https://github.com/kommitters/editorjs-undo/security/policy to enable.
For more information, see https://docs.github.com/en/code-security/getting-started/adding-a-security-policy-to-your-repository.
This issue will auto resolve when the policy is in compliance.
Issue created by Allstar. See https://github.com/ossf/allstar/ for more information. For questions specific to the repository, please contact the owner or maintainer.
A clear and concise description of what the bug is.
When you initialize the editorjs instance with readOnly: false
and then later toggle it to true using editor.readOnly.toggle()
then this library still tries to call editor.save()
causing an error.
This error does not happen when editorjs-undo
is not installed.
"@editorjs/embed": "2.5.0",
"@editorjs/header": "2.6.2",
"@editorjs/image": "2.6.2",
"@editorjs/list": "1.6.2",
"@editorjs/paragraph": "2.8.0",
"@editorjs/table": "2.0.1",
"editorjs-undo": "1.0.1",
Reproduction steps:
The library should know how to handle readOnly mode and respond accordingly when readOnly mode is toggled between true/false
eslint is not working because the dependence 'eslint-plugin-import' is not updated. Also, there are some linter errors.
A clear and concise description of what the bug is.
Include code samples, errors and stack traces if appropriate.
If reporting a bug, please include the reproducing steps.
A clear and concise description of what you expected to happen.
Add any other context about the problem here.
https://github.com/kommitters/editorjs-undo/security/dependabot
To keep the library up-to-date by updating dependencies in response to these alerts.
const Demo2 = () => {
const edjsParser = edjsHTML();
const handleReady = (editor) => {
new Undo({ editor });
new DragDrop(editor);
};
const handleChange = (api, newData) => console.log(newData, edjsParser.parse(newData), 'Something is changing!!');
return (
<EditorJs
tools={EDITOR_JS_TOOLS}
onReady={handleReady}
onChange={handleChange}
/>
);
};
Steps to reproduce
Type something
Ctrl + Z
click the editor
"editorjs-undo": "^0.3.0",
"react-editor-js": "^1.10.0",
Because of the variety of default prettier configurations among developers to reduce problems from auto stylizing code its necesary to add a code style file ".prettierrc"
A .prettierrc file with the parameters to stylize the code
A .prettierrc file with the parameters to stylize the code
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.