djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix rare editorjs race condition (#953)

Browse source
This commit is contained in:
Jakub Majorek 2021-01-21 09:54:53 +01:00 committed by GitHub
parent 11bddd3d1b
commit 77ed12664d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
package-lock.json generated
View file

@ -2112,9 +2112,9 @@
}
},
"@editorjs/editorjs": {
"version": "2.19.0",
"resolved": "https://registry.npmjs.org/@editorjs/editorjs/-/editorjs-2.19.0.tgz",
"integrity": "sha512-8PUVaBZx69IrG8dNrE+FZbHSiRTR8ql8L/cmEi1mOdEdTqnOLq5Wv9dgemK00mBWEgNoavMAjtGQpItGknAa8A==",
"version": "2.19.1",
"resolved": "https://registry.npmjs.org/@editorjs/editorjs/-/editorjs-2.19.1.tgz",
"integrity": "sha512-5lN7r5B2NCE8VJdsS3poX3Qg9rNwzpxZ+6Jjif3hAVZTYpQwg5wXEpAHFNbuavS0T5Ji+0ID31DQFotVI4PosA==",
"requires": {
"codex-notifier": "^1.1.2",
"codex-tooltip": "^1.0.1"
@ -8283,9 +8283,9 @@
"integrity": "sha512-DCp6xe/LGueJ1N5sXEwcBc3r3PyVkEEDNWCVigfvywAkeXcZMk9K41a31tkEFBW0Ptlwji6/JlAb49E3Yrxbtg=="
},
"codex-tooltip": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/codex-tooltip/-/codex-tooltip-1.0.1.tgz",
"integrity": "sha512-1xLb1NZbxguNtf02xBRhDphq/EXvMMeEbY0ievjQTHqf8UjXsD41evGk9rqcbjpl+JOjNgtwnp1OaU/X/h6fhQ=="
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/codex-tooltip/-/codex-tooltip-1.0.2.tgz",
"integrity": "sha512-oC+Bu5X/zyhbPydgMSLWKoM/+vkJMqaLWu3Dt/jZgXS3MWK23INwC5DMBrVXZSufAFk0i0SUni38k9rLMyZn/w=="
},
"collapse-white-space": {
"version": "1.0.6",

2
package.json
View file

@ -17,7 +17,7 @@
"npm": ">=6.11.0"
},
"dependencies": {
"@editorjs/editorjs": "^2.19.0",
"@editorjs/editorjs": "^2.19.1",
"@editorjs/header": "^2.6.1",
"@editorjs/image": "^2.6.0",
"@editorjs/list": "^1.6.1",

21
src/components/RichTextEditor/RichTextEditor.tsx
View file

@ -3,7 +3,6 @@ import FormControl from "@material-ui/core/FormControl";
import FormHelperText from "@material-ui/core/FormHelperText";
import InputLabel from "@material-ui/core/InputLabel";
import classNames from "classnames";
import Undo from "editorjs-undo";
import React from "react";
import { RichTextEditorContentProps, tools } from "./RichTextEditorContent";
@ -34,6 +33,8 @@ const RichTextEditor: React.FC<RichTextEditorProps> = ({
const [isFocused, setFocus] = React.useState(false);
const editor = React.useRef<EditorJS>();
const editorContainer = React.useRef<HTMLDivElement>();
const prevTogglePromise = React.useRef<Promise<boolean>>(); // used to await subsequent toggle invocations
React.useEffect(
() => {
if (data) {
@ -46,8 +47,10 @@ const RichTextEditor: React.FC<RichTextEditorProps> = ({
onChange(savedData);
},
onReady: () => {
const undo = new Undo({ editor });
undo.initialize(data);
// FIXME: This throws an error and is not working
// const undo = new Undo({ editor });
// undo.initialize(data);
if (onReady) {
onReady();
}
@ -62,10 +65,20 @@ const RichTextEditor: React.FC<RichTextEditorProps> = ({
// Rerender editor only if changed from undefined to defined state
[data === undefined]
);
React.useEffect(() => {
const toggle = async () => {
if (editor.current?.readOnly) {
editor.current.readOnly.toggle(disabled);
// readOnly.toggle() by itself does not enqueue the events and will result in a broken output if invocations overlap
// Remove this logic when this is fixed in EditorJS
if (prevTogglePromise.current instanceof Promise) {
await prevTogglePromise.current;
}
prevTogglePromise.current = editor.current.readOnly.toggle(disabled);
}
};
toggle();
}, [disabled]);
return (