diff --git a/package-lock.json b/package-lock.json index aed8e5dc2..032ae5a10 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index f29f25df4..69bbb607d 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/RichTextEditor/RichTextEditor.tsx b/src/components/RichTextEditor/RichTextEditor.tsx index addc34fb6..f3186edff 100644 --- a/src/components/RichTextEditor/RichTextEditor.tsx +++ b/src/components/RichTextEditor/RichTextEditor.tsx @@ -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 = ({ const [isFocused, setFocus] = React.useState(false); const editor = React.useRef(); const editorContainer = React.useRef(); + const prevTogglePromise = React.useRef>(); // used to await subsequent toggle invocations + React.useEffect( () => { if (data) { @@ -46,8 +47,10 @@ const RichTextEditor: React.FC = ({ 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 = ({ // Rerender editor only if changed from undefined to defined state [data === undefined] ); + React.useEffect(() => { - if (editor.current?.readOnly) { - editor.current.readOnly.toggle(disabled); - } + const toggle = async () => { + if (editor.current?.readOnly) { + // 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 (