EditorJS initialisation fixes (#1789) (#1822)

* Fix editor initialising issue in update pages

* Fix translation editor error
This commit is contained in:
Wojciech Mista 2022-02-02 23:12:58 +01:00 committed by GitHub
parent a76c6a0e5f
commit f1575ac179
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 7 deletions

View file

@ -37,8 +37,8 @@ const RichTextEditor: React.FC<RichTextEditorProps> = ({
React.useEffect(
() => {
if (data !== undefined) {
editor.current = new EditorJS({
if (data !== undefined && !editor.current) {
const editorjs = new EditorJS({
data,
holder: editorContainer.current,
logLevel: "ERROR" as LogLevels,
@ -51,6 +51,8 @@ const RichTextEditor: React.FC<RichTextEditorProps> = ({
// const undo = new Undo({ editor });
// undo.initialize(data);
editor.current = editorjs;
if (onReady) {
onReady();
}
@ -60,7 +62,12 @@ const RichTextEditor: React.FC<RichTextEditorProps> = ({
});
}
return editor.current?.destroy;
return () => {
if (editor.current) {
editor.current.destroy();
}
editor.current = null;
};
},
// Rerender editor only if changed from undefined to defined state
[data === undefined]

View file

@ -67,18 +67,29 @@ const RichTextEditorContent: React.FC<RichTextEditorContentProps> = ({
const editorContainer = React.useRef<HTMLDivElement>();
React.useEffect(
() => {
if (data) {
editor.current = new EditorJS({
if (data !== undefined && !editor.current) {
const editorjs = new EditorJS({
data,
holder: editorContainer.current,
logLevel: "ERROR" as LogLevels,
onReady,
onReady: () => {
editor.current = editorjs;
if (onReady) {
onReady();
}
},
readOnly: true,
tools
});
}
return editor.current?.destroy;
return () => {
if (editor.current) {
editor.current.destroy();
}
editor.current = null;
};
},
// Rerender editor only if changed from undefined to defined state
[data === undefined]

View file

@ -226,6 +226,13 @@ const TranslationFields: React.FC<TranslationFieldsProps> = props => {
onDiscard={onDiscard}
onSubmit={data => onSubmit(field, data)}
/>
) : // FIXME
// For now this is the only way to fix the issue
// of initializing the editor with fetched data.
// Without this the editor doesn't get the saved data
// and is empty
disabled ? (
<Skeleton />
) : (
<TranslationFieldsRich
resetKey={richTextResetKey}