Fix empty rich text editor not loading (#1904)

* Fix empty rich text editor not loading

* Fix static rich text font size

* Add cleanup function

* Update snapshots

src/components/RichTextEditor/RichTextEditor.stories.tsx

@@ -7,6 +7,7 @@ import React from "react";
 
 import * as fixtures from "./fixtures.json";
 import { RichTextEditorProps } from "./RichTextEditor";
+import RichTextEditorContent from "./RichTextEditorContent";
 
 export const data: OutputData = fixtures.richTextEditor;
 
@@ -25,4 +26,5 @@ storiesOf("Generics / Rich text editor", module)
   .addDecorator(Decorator)
   .add("default", () => <RichTextEditor {...props} />)
   .add("disabled", () => <RichTextEditor {...props} disabled={true} />)
-  .add("error", () => <RichTextEditor {...props} error={true} />);
+  .add("error", () => <RichTextEditor {...props} error={true} />)
+  .add("static", () => <RichTextEditorContent {...props} />);

src/components/RichTextEditor/RichTextEditor.tsx

@@ -6,6 +6,7 @@ import React from "react";
 
 import { RichTextEditorContentProps, tools } from "./RichTextEditorContent";
 import useStyles from "./styles";
+import { clean } from "./utils";
 
 export type RichTextEditorChange = (data: OutputData) => void;
 export interface RichTextEditorProps extends RichTextEditorContentProps {
@@ -33,12 +34,11 @@ const RichTextEditor: React.FC<RichTextEditorProps> = ({
   const editor = React.useRef<EditorJS>();
   const editorContainer = React.useRef<HTMLDivElement>();
   const togglePromiseQueue = React.useRef(PromiseQueue()); // used to await subsequent toggle invocations
-  const initialMount = React.useRef(true);
 
   React.useEffect(
     () => {
       if (data !== undefined && !editor.current) {
-        const editorjs = new EditorJS({
+        editor.current = new EditorJS({
           data,
           holder: editorContainer.current,
           logLevel: "ERROR" as LogLevels,
@@ -51,21 +51,16 @@ const RichTextEditor: React.FC<RichTextEditorProps> = ({
             // const undo = new Undo({ editor });
             // undo.initialize(data);
 
-            editor.current = editorjs;
-
             if (onReady) {
               onReady();
             }
           },
-          readOnly: disabled,
           tools
         });
       }
 
       return () => {
-        if (editor.current) {
+        clean(editor.current);
-          editor.current.destroy();
-        }
         editor.current = null;
       };
     },
@@ -96,11 +91,7 @@ const RichTextEditor: React.FC<RichTextEditorProps> = ({
       }
     };
 
-    if (!initialMount.current) {
+    toggle();
-      toggle();
-    } else {
-      initialMount.current = false;
-    }
   }, [disabled]);
 
   return (

src/components/RichTextEditor/RichTextEditorContent.tsx

@@ -15,6 +15,7 @@ import createGenericInlineTool from "editorjs-inline-tool";
 import React from "react";
 
 import useStyles from "./styles";
+import { clean } from "./utils";
 
 export interface RichTextEditorContentProps {
   className?: string;
@@ -85,9 +86,7 @@ const RichTextEditorContent: React.FC<RichTextEditorContentProps> = ({
       }
 
       return () => {
-        if (editor.current) {
+        clean(editor.current);
-          editor.current.destroy();
-        }
         editor.current = null;
       };
     },
@@ -97,7 +96,7 @@ const RichTextEditorContent: React.FC<RichTextEditorContentProps> = ({
 
   return (
     <div
-      className={classNames(classes.editor, className)}
+      className={classNames(classes.editor, classes.rootStatic, className)}
       ref={editorContainer}
     />
   );

src/components/RichTextEditor/styles.ts

@@ -102,10 +102,15 @@ const useStyles = makeStyles(
         boxShadow: `inset 0px 0px 0 2px ${theme.palette.primary.main}`
       },
       rootDisabled: {
-        ...theme.overrides.MuiOutlinedInput.root["&$disabled"]["& fieldset"]
+        ...theme.overrides.MuiOutlinedInput.root["&$disabled"]["& fieldset"],
+        background: theme.palette.background.default,
+        color: theme.palette.saleor.main[4]
       },
       rootError: {
         borderColor: theme.palette.error.main
+      },
+      rootStatic: {
+        fontSize: theme.typography.body1.fontSize
       }
     };
   },

src/components/RichTextEditor/utils.ts

@@ -0,0 +1,9 @@
+import EditorJS from "@editorjs/editorjs";
+
+export async function clean(editor: EditorJS) {
+  if (editor) {
+    // Prevents race conditions
+    await editor.isReady;
+    editor.destroy();
+  }
+}

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -13151,6 +13151,25 @@ exports[`Storyshots Generics / Rich text editor error 1`] = `
 </div>
 `;
 
+exports[`Storyshots Generics / Rich text editor static 1`] = `
+<div
+  style="padding:24px"
+>
+  <div
+    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
+    style="margin:auto;overflow:visible;position:relative;width:400px"
+  >
+    <div
+      class="MuiCardContent-root-id"
+    >
+      <div
+        class="RichTextEditor-editor-id RichTextEditor-rootStatic-id"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Generics / Save filter tab default 1`] = `
 <div
   style="padding:24px"

src/utils/richText/useRichText.ts

@@ -3,6 +3,10 @@ import { RichTextEditorChange } from "@saleor/components/RichTextEditor";
 import isEqual from "lodash/isEqual";
 import { MutableRefObject, useEffect, useRef, useState } from "react";
 
+const emptyContent: OutputData = {
+  blocks: []
+};
+
 function useRichText(opts: {
   initial: string | null;
   triggerChange: () => void;
@@ -12,7 +16,7 @@ function useRichText(opts: {
 
   useEffect(() => {
     if (opts.initial === null) {
-      data.current = { blocks: [] };
+      data.current = emptyContent;
       setLoaded(true);
       return;
     }