From f1575ac1799aa88ae85815309d7d146d87398cbb Mon Sep 17 00:00:00 2001
From: Wojciech Mista <wojciech.mista@saleor.io>
Date: Wed, 2 Feb 2022 23:12:58 +0100
Subject: [PATCH] EditorJS initialisation fixes (#1789) (#1822)

* Fix editor initialising issue in update pages

* Fix translation editor error
---
 .../RichTextEditor/RichTextEditor.tsx         | 13 ++++++++++---
 .../RichTextEditor/RichTextEditorContent.tsx  | 19 +++++++++++++++----
 .../TranslationFields/TranslationFields.tsx   |  7 +++++++
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/components/RichTextEditor/RichTextEditor.tsx b/src/components/RichTextEditor/RichTextEditor.tsx
index 51ff957b3..6342bfc40 100644
--- a/src/components/RichTextEditor/RichTextEditor.tsx
+++ b/src/components/RichTextEditor/RichTextEditor.tsx
@@ -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]
diff --git a/src/components/RichTextEditor/RichTextEditorContent.tsx b/src/components/RichTextEditor/RichTextEditorContent.tsx
index 5d7add6d3..acdf68b15 100644
--- a/src/components/RichTextEditor/RichTextEditorContent.tsx
+++ b/src/components/RichTextEditor/RichTextEditorContent.tsx
@@ -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]
diff --git a/src/translations/components/TranslationFields/TranslationFields.tsx b/src/translations/components/TranslationFields/TranslationFields.tsx
index 861de1037..04637699b 100644
--- a/src/translations/components/TranslationFields/TranslationFields.tsx
+++ b/src/translations/components/TranslationFields/TranslationFields.tsx
@@ -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}