fix: intermittent raw loading error (#109)

As sometimes the html components are rendered downstream before the block is loaded, we need to handle the case of no block value being provided to the raw editor at the time of first render. Subsequent thunk actions will trigger re-renders to display the block.

src/editors/containers/TextEditor/__snapshots__/index.test.jsx.snap

@@ -45,7 +45,7 @@ exports[`TextEditor snapshots ImageUploadModal is not rendered 1`] = `
         Object {
           "blockValue": Object {
             "data": Object {
-              "some": "eDiTablE Text",
+              "data": "eDiTablE Text",
             },
           },
           "clearSelection": [MockFunction hooks.selectedImage.clearSelection],
@@ -135,7 +135,7 @@ exports[`TextEditor snapshots block failed to load, Toast is shown 1`] = `
         Object {
           "blockValue": Object {
             "data": Object {
-              "some": "eDiTablE Text",
+              "data": "eDiTablE Text",
             },
           },
           "clearSelection": [MockFunction hooks.selectedImage.clearSelection],
@@ -228,6 +228,13 @@ exports[`TextEditor snapshots loaded, raw editor 1`] = `
           },
         }
       }
+      text={
+        Object {
+          "data": Object {
+            "data": "eDiTablE Text",
+          },
+        }
+      }
     />
   </div>
 </EditorContainer>
@@ -373,7 +380,7 @@ exports[`TextEditor snapshots renders as expected with default behavior 1`] = `
         Object {
           "blockValue": Object {
             "data": Object {
-              "some": "eDiTablE Text",
+              "data": "eDiTablE Text",
             },
           },
           "clearSelection": [MockFunction hooks.selectedImage.clearSelection],

src/editors/containers/TextEditor/components/RawEditor/__snapshots__/index.test.jsx.snap

@@ -22,7 +22,7 @@ exports[`RawEditor renders as expected with default behavior 1`] = `
         },
       }
     }
-    value="sOmErAwHtml"
+    value="eDiTablE Text"
   />
 </div>
 `;

src/editors/containers/TextEditor/components/RawEditor/index.jsx

@@ -12,21 +12,27 @@ export const RawEditor = ({
     <Alert variant="danger">
       You are using the raw HTML editor.
     </Alert>
-    <CodeEditor
-      innerRef={editorRef}
-      value={text}
-    />
+    { text && text.data.data ? (
+      <CodeEditor
+        innerRef={editorRef}
+        value={text.data.data}
+      />
+    ) : null}
+
   </div>
 );
 RawEditor.defaultProps = {
   editorRef: null,
+  text: null,
 };
 RawEditor.propTypes = {
   editorRef: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.shape({ current: PropTypes.any }),
   ]),
-  text: PropTypes.string.isRequired,
+  text: PropTypes.shape({
+    data: PropTypes.shape({ data: PropTypes.string }),
+  }),
 };
 
 export default RawEditor;

src/editors/containers/TextEditor/components/RawEditor/index.test.jsx

@@ -10,7 +10,7 @@ describe('RawEditor', () => {
         value: 'Ref Value',
       },
     },
-    text: 'sOmErAwHtml',
+    text: { data: { data: 'eDiTablE Text' } },
   };
   test('renders as expected with default behavior', () => {
     expect(shallow(<RawEditor {...props} />)).toMatchSnapshot();

src/editors/containers/TextEditor/index.jsx

@@ -63,7 +63,7 @@ export const TextEditor = ({
       return (
         <RawEditor
           editorRef={editorRef}
-          text={blockValue.data.data}
+          text={blockValue}
         />
       );
     }

src/editors/containers/TextEditor/index.test.jsx

@@ -84,7 +84,7 @@ describe('TextEditor', () => {
   const props = {
     onClose: jest.fn().mockName('props.onClose'),
     // redux
-    blockValue: { data: { some: 'eDiTablE Text' } },
+    blockValue: { data: { data: 'eDiTablE Text' } },
     lmsEndpointUrl: 'sOmEvaLue.cOm',
     studioEndpointUrl: 'sOmEoThERvaLue.cOm',
     blockFailed: false,