feat: www gallery raw selection (#88)

* feat: www gallery raw selection

src/editors/Editor.jsx

@@ -44,17 +44,17 @@ export const Editor = ({
   );
 };
 Editor.defaultProps = {
-  learningContextId: null,
   blockId: null,
+  learningContextId: null,
   lmsEndpointUrl: null,
-  studioEndpointUrl: null,
   onClose: null,
+  studioEndpointUrl: null,
 };
 
 Editor.propTypes = {
-  learningContextId: PropTypes.string,
-  blockType: PropTypes.string.isRequired,
   blockId: PropTypes.string,
+  blockType: PropTypes.string.isRequired,
+  learningContextId: PropTypes.string,
   lmsEndpointUrl: PropTypes.string,
   onClose: PropTypes.func,
   studioEndpointUrl: PropTypes.string,

src/editors/EditorPage.jsx

@@ -27,17 +27,17 @@ export const EditorPage = ({
   </Provider>
 );
 EditorPage.defaultProps = {
-  onClose: null,
-  courseId: null,
   blockId: null,
+  courseId: null,
   lmsEndpointUrl: null,
+  onClose: null,
   studioEndpointUrl: null,
 };
 
 EditorPage.propTypes = {
-  courseId: PropTypes.string,
-  blockType: PropTypes.string.isRequired,
   blockId: PropTypes.string,
+  blockType: PropTypes.string.isRequired,
+  courseId: PropTypes.string,
   lmsEndpointUrl: PropTypes.string,
   onClose: PropTypes.func,
   studioEndpointUrl: PropTypes.string,

src/editors/containers/TextEditor/index.jsx

@@ -113,9 +113,9 @@ export const TextEditor = ({
 };
 TextEditor.defaultProps = {
   blockValue: null,
+  isRaw: null,
   lmsEndpointUrl: null,
   studioEndpointUrl: null,
-  isRaw: null,
 };
 TextEditor.propTypes = {
   onClose: PropTypes.func.isRequired,

src/editors/data/services/cms/mockApi.js

@@ -17,7 +17,8 @@ export const fetchBlockById = ({ blockId, studioEndpointUrl }) => mockPromise({
 // eslint-disable-next-line
 export const fetchStudioView = ({ blockId, studioEndpointUrl }) => mockPromise({
   data: {
-    data_editor: 'raw',
+    // The following is sent for 'raw' editors.
+    html: blockId.includes('mockRaw') ? 'data-editor="raw"' : '',
     data: '<p>Test prompt content</p>',
     display_name: 'My Text Prompt',
   },

src/editors/hooks.js

@@ -8,7 +8,7 @@ import * as module from './hooks';
 
 export const initializeApp = ({ dispatch, data }) => useEffect(
   () => dispatch(thunkActions.app.initialize(data)),
-  [],
+  [data],
 );
 
 export const navigateTo = (destination) => {

src/editors/hooks.test.jsx

@@ -53,7 +53,7 @@ describe('hooks', () => {
       hooks.initializeApp({ dispatch, data: fakeData });
       expect(dispatch).not.toHaveBeenCalledWith(fakeData);
       const [cb, prereqs] = useEffect.mock.calls[0];
-      expect(prereqs).toStrictEqual([]);
+      expect(prereqs).toStrictEqual([fakeData]);
       cb();
       expect(dispatch).toHaveBeenCalledWith(thunkActions.app.initialize(fakeData));
     });

www/src/Gallery.jsx

@@ -10,28 +10,50 @@ import { mockBlockIdByType } from '@edx/frontend-lib-content-components/editors/
 
 export const EditorGallery = () => {
   const [blockType, setBlockType] = React.useState('html');
+  const [mockRaw, setMockRaw] = React.useState(false);
+
   const blockIds = Object.keys(blockTypes).reduce((obj, blockTypeKey) => {
     const type = blockTypes[blockTypeKey];
-    return { ...obj, [type]: mockBlockIdByType(type) };
+    return { ...obj, [type]: [mockBlockIdByType(type), (mockRaw ? '-mockRaw' : '')].join('') };
   }, {});
   const courseId = 'library-v1:EDX+apmjoemaonmeonaoenan';
   const studioEndpointUrl = 'fake-studio-endpoint-url';
   const lmsEndpointUrl = 'https://courses.edx.org'; // this is hardcoded because that is where the image data is from.
-  const handleChange = (e) => setBlockType(e.target.value);
+
+  const handleBlockChange = (e) => setBlockType(e.target.value);
+  const handleRawChange = (e) => setMockRaw(e.target.value === 'true');
+
   return (
     <div className="gallery">
-      <Form.Group>
-        <Form.RadioSet
-          name="blockTypes"
-          onChange={handleChange}
-          value={blockType}
+      <div style={{ display: 'flex' }}>
+        <Form.Group>
+          <Form.RadioSet
+            name="blockTypes"
+            onChange={handleBlockChange}
+            value={blockType}
+          >
+            { Object.values(blockTypes).map((e) => (
+              <Form.Radio value={e}> {e} </Form.Radio>
+            ))}
+          </Form.RadioSet>
+        </Form.Group>
+        <Form.Group
+          style={{
+            display: blockType === 'html' || blockType === 'problem'
+              ? 'block'
+              : 'none',
+          }}
         >
-          { Object.values(blockTypes).map((e) => (
-            <Form.Radio value={e}> {e} </Form.Radio>
-          ))}
-
-        </Form.RadioSet>
-      </Form.Group>
+          <Form.RadioSet
+            name="raw"
+            onChange={handleRawChange}
+            value={mockRaw.toString()}
+          >
+            <Form.Radio value="false">visual</Form.Radio>
+            <Form.Radio value="true">raw</Form.Radio>
+          </Form.RadioSet>
+        </Form.Group>
+      </div>
       <EditorPage
         {...{
           blockId: blockIds[blockType],