EditorJS initialisation fixes (#1789) (#1822)

* Fix editor initialising issue in update pages

* Fix translation editor error

src/components/RichTextEditor/RichTextEditor.tsx

@@ -37,8 +37,8 @@ const RichTextEditor: React.FC<RichTextEditorProps> = ({
 
   React.useEffect(
     () => {
-      if (data !== undefined) {
+      if (data !== undefined && !editor.current) {
-        editor.current = new EditorJS({
+        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]

src/components/RichTextEditor/RichTextEditorContent.tsx

@@ -67,18 +67,29 @@ const RichTextEditorContent: React.FC<RichTextEditorContentProps> = ({
   const editorContainer = React.useRef<HTMLDivElement>();
   React.useEffect(
     () => {
-      if (data) {
+      if (data !== undefined && !editor.current) {
-        editor.current = new EditorJS({
+        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]

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}