fix: tinymce render outside of editors (#1254)

openedx · Sep 5, 2024 · dcf05cd · dcf05cd
1 parent 34f0bf5
commit dcf05cd
Show file tree

Hide file tree

Showing 36 changed files with 339 additions and 175 deletions.
diff --git a/...editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx b/...editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx
@@ -25,6 +25,9 @@ const AnswerOption = ({
   intl,
   // redux
   problemType,
+  images,
+  isLibrary,
+  learningContextId,
 }) => {
   const dispatch = useDispatch();
   const removeAnswer = hooks.removeAnswer({ answer, dispatch });
@@ -47,6 +50,11 @@ const AnswerOption = ({
           setContent={setAnswerTitle}
           placeholder={intl.formatMessage(messages.answerTextboxPlaceholder)}
           id={`answer-${answer.id}`}
+          {...{
+            images,
+            isLibrary,
+            learningContextId,
+          }}
         />
       );
     }
@@ -106,6 +114,11 @@ const AnswerOption = ({
             setSelectedFeedback={setSelectedFeedback}
             setUnselectedFeedback={setUnselectedFeedback}
             intl={intl}
+            {...{
+              images,
+              isLibrary,
+              learningContextId,
+            }}
           />
         </Collapsible.Body>
       </div>
@@ -135,10 +148,16 @@ AnswerOption.propTypes = {
   intl: intlShape.isRequired,
   // redux
   problemType: PropTypes.string.isRequired,
+  images: PropTypes.shape({}).isRequired,
+  learningContextId: PropTypes.string.isRequired,
+  isLibrary: PropTypes.bool.isRequired,
 };
 
 export const mapStateToProps = (state) => ({
   problemType: selectors.problem.problemType(state),
+  images: selectors.app.images(state),
+  isLibrary: selectors.app.isLibrary(state),
+  learningContextId: selectors.app.learningContextId(state),
 });
 
 export const mapDispatchToProps = {};

diff --git a/...rs/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.jsx b/...rs/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.jsx
@@ -10,12 +10,18 @@ jest.mock('../../../../../data/redux', () => ({
   default: jest.fn(),
   selectors: {
     problem: {
-      answers: jest.fn(state => ({ answers: state })),
       problemType: jest.fn(state => ({ problemType: state })),
     },
+    app: {
+      images: jest.fn(state => ({ images: state })),
+      isLibrary: jest.fn(state => ({ isLibrary: state })),
+      learningContextId: jest.fn(state => ({ learningContextId: state })),
+    },
   },
   thunkActions: {
-    video: jest.fn(),
+    video: {
+      importTranscripts: jest.fn(),
+    },
   },
 }));
 
@@ -49,6 +55,9 @@ describe('AnswerOption', () => {
     intl: { formatMessage },
     // redux
     problemType: 'multiplechoiceresponse',
+    images: {},
+    isLibrary: false,
+    learningContextId: 'course+org+run',
   };
   describe('render', () => {
     test('snapshot: renders correct option with feedback', () => {
@@ -72,5 +81,20 @@ describe('AnswerOption', () => {
         mapStateToProps(testState).problemType,
       ).toEqual(selectors.problem.problemType(testState));
     });
+    test('images from app.images', () => {
+      expect(
+        mapStateToProps(testState).images,
+      ).toEqual(selectors.app.images(testState));
+    });
+    test('learningContextId from app.learningContextId', () => {
+      expect(
+        mapStateToProps(testState).learningContextId,
+      ).toEqual(selectors.app.learningContextId(testState));
+    });
+    test('isLibrary from app.isLibrary', () => {
+      expect(
+        mapStateToProps(testState).isLibrary,
+      ).toEqual(selectors.app.isLibrary(testState));
+    });
   });
 });
diff --git a/...emEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap b/...emEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap
@@ -30,6 +30,9 @@ exports[`AnswerOption render snapshot: renders correct option with feedback 1`]
       error={false}
       errorMessage={null}
       id="answer-A"
+      images={{}}
+      isLibrary={false}
+      learningContextId="course+org+run"
       placeholder="Enter an answer"
       setContent={[Function]}
       value="Answer 1"
@@ -44,11 +47,14 @@ exports[`AnswerOption render snapshot: renders correct option with feedback 1`]
             "title": "Answer 1",
           }
         }
+        images={{}}
         intl={
           {
             "formatMessage": [Function],
           }
         }
+        isLibrary={false}
+        learningContextId="course+org+run"
         problemType="multiplechoiceresponse"
         setSelectedFeedback={[Function]}
         setUnselectedFeedback={[Function]}
@@ -121,11 +127,14 @@ exports[`AnswerOption render snapshot: renders correct option with numeric input
             "title": "Answer 1",
           }
         }
+        images={{}}
         intl={
           {
             "formatMessage": [Function],
           }
         }
+        isLibrary={false}
+        learningContextId="course+org+run"
         problemType="numericalresponse"
         setSelectedFeedback={[Function]}
         setUnselectedFeedback={[Function]}
@@ -213,11 +222,14 @@ exports[`AnswerOption render snapshot: renders correct option with numeric input
             "unselectedFeedback": "unselected feedback",
           }
         }
+        images={{}}
         intl={
           {
             "formatMessage": [Function],
           }
         }
+        isLibrary={false}
+        learningContextId="course+org+run"
         problemType="numericalresponse"
         setSelectedFeedback={[Function]}
         setUnselectedFeedback={[Function]}
@@ -276,6 +288,9 @@ exports[`AnswerOption render snapshot: renders correct option with selected unse
       error={false}
       errorMessage={null}
       id="answer-A"
+      images={{}}
+      isLibrary={false}
+      learningContextId="course+org+run"
       placeholder="Enter an answer"
       setContent={[Function]}
       value="Answer 1"
@@ -291,11 +306,14 @@ exports[`AnswerOption render snapshot: renders correct option with selected unse
             "unselectedFeedback": "unselected feedback",
           }
         }
+        images={{}}
         intl={
           {
             "formatMessage": [Function],
           }
         }
+        isLibrary={false}
+        learningContextId="course+org+run"
         problemType="choiceresponse"
         setSelectedFeedback={[Function]}
         setUnselectedFeedback={[Function]}

diff --git a/...ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.jsx b/...ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.jsx
@@ -12,12 +12,18 @@ export const FeedbackBox = ({
   problemType,
   setSelectedFeedback,
   setUnselectedFeedback,
+  images,
+  isLibrary,
+  learningContextId,
   // injected
   intl,
 }) => {
   const props = {
     answer,
     intl,
+    images,
+    isLibrary,
+    learningContextId,
   };
 
   return ((problemType === ProblemTypeKeys.MULTISELECT) ? (
@@ -61,6 +67,9 @@ FeedbackBox.propTypes = {
   setAnswer: PropTypes.func.isRequired,
   setSelectedFeedback: PropTypes.func.isRequired,
   setUnselectedFeedback: PropTypes.func.isRequired,
+  images: PropTypes.shape({}).isRequired,
+  learningContextId: PropTypes.string.isRequired,
+  isLibrary: PropTypes.bool.isRequired,
   intl: intlShape.isRequired,
 };
 

diff --git a/...emEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.test.jsx b/...emEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.test.jsx
@@ -8,6 +8,9 @@ const answerWithFeedback = {
   selectedFeedback: 'some feedback',
   unselectedFeedback: 'unselectedFeedback',
   problemType: 'sOMepRObleM',
+  images: {},
+  isLibrary: false,
+  learningContextId: 'course+org+run',
 };
 
 const props = {

diff --git a/...lemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackControl.jsx b/...lemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackControl.jsx
@@ -15,6 +15,9 @@ const FeedbackControl = ({
   answer,
   intl,
   type,
+  images,
+  isLibrary,
+  learningContextId,
 }) => (
   <Form.Group>
     <Form.Label className="mb-3">
@@ -31,6 +34,11 @@ const FeedbackControl = ({
       value={feedback}
       setContent={onChange}
       placeholder={intl.formatMessage(messages.feedbackPlaceholder)}
+      {...{
+        images,
+        isLibrary,
+        learningContextId,
+      }}
     />
   </Form.Group>
 );
@@ -41,6 +49,9 @@ FeedbackControl.propTypes = {
   labelMessageBoldUnderline: PropTypes.string.isRequired,
   answer: answerOptionProps.isRequired,
   type: PropTypes.string.isRequired,
+  images: PropTypes.shape({}).isRequired,
+  learningContextId: PropTypes.string.isRequired,
+  isLibrary: PropTypes.bool.isRequired,
   intl: intlShape.isRequired,
 };
 

diff --git a/...itor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackControl.test.jsx b/...itor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackControl.test.jsx
@@ -18,6 +18,9 @@ const props = {
   onChange: jest.fn(),
   labelMessage: 'msg',
   labelMessageBoldUnderline: 'msg',
+  images: {},
+  isLibrary: false,
+  learningContextId: 'course+org+run',
 };
 
 describe('FeedbackControl component', () => {

diff --git a/.../EditProblemView/AnswerWidget/components/Feedback/__snapshots__/FeedbackBox.test.jsx.snap b/.../EditProblemView/AnswerWidget/components/Feedback/__snapshots__/FeedbackBox.test.jsx.snap
@@ -9,6 +9,9 @@ exports[`FeedbackBox component renders as expected with a multi select problem 1
       {
         "correct": true,
         "id": "A",
+        "images": {},
+        "isLibrary": false,
+        "learningContextId": "course+org+run",
         "problemType": "sOMepRObleM",
         "selectedFeedback": "some feedback",
         "title": "Answer 1",
@@ -39,6 +42,9 @@ exports[`FeedbackBox component renders as expected with a multi select problem 1
       {
         "correct": true,
         "id": "A",
+        "images": {},
+        "isLibrary": false,
+        "learningContextId": "course+org+run",
         "problemType": "sOMepRObleM",
         "selectedFeedback": "some feedback",
         "title": "Answer 1",
@@ -76,6 +82,9 @@ exports[`FeedbackBox component renders as expected with a numeric input problem
       {
         "correct": true,
         "id": "A",
+        "images": {},
+        "isLibrary": false,
+        "learningContextId": "course+org+run",
         "problemType": "sOMepRObleM",
         "selectedFeedback": "some feedback",
         "title": "Answer 1",
@@ -113,6 +122,9 @@ exports[`FeedbackBox component renders as expected with default props 1`] = `
       {
         "correct": true,
         "id": "A",
+        "images": {},
+        "isLibrary": false,
+        "learningContextId": "course+org+run",
         "problemType": "sOMepRObleM",
         "selectedFeedback": "some feedback",
         "title": "Answer 1",

diff --git a/...tProblemView/AnswerWidget/components/Feedback/__snapshots__/FeedbackControl.test.jsx.snap b/...tProblemView/AnswerWidget/components/Feedback/__snapshots__/FeedbackControl.test.jsx.snap
@@ -29,6 +29,9 @@ exports[`FeedbackControl component renders 1`] = `
     error={false}
     errorMessage={null}
     id="undefinedFeedback-A"
+    images={{}}
+    isLibrary={false}
+    learningContextId="course+org+run"
     placeholder={null}
     setContent={[MockFunction]}
     value="feedback"

diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/hooks.js b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/hooks.js
@@ -42,22 +42,22 @@ export const setAnswerTitle = ({
   dispatch(actions.problem.updateAnswer({ id: answer.id, hasSingleAnswer, title }));
 };
 
-export const setSelectedFeedback = ({ answer, hasSingleAnswer, dispatch }) => (e) => {
-  if (e.target) {
+export const setSelectedFeedback = ({ answer, hasSingleAnswer, dispatch }) => (value) => {
+  if (value) {
     dispatch(actions.problem.updateAnswer({
       id: answer.id,
       hasSingleAnswer,
-      selectedFeedback: e.target.value,
+      selectedFeedback: value,
     }));
   }
 };
 
-export const setUnselectedFeedback = ({ answer, hasSingleAnswer, dispatch }) => (e) => {
-  if (e.target) {
+export const setUnselectedFeedback = ({ answer, hasSingleAnswer, dispatch }) => (value) => {
+  if (value) {
     dispatch(actions.problem.updateAnswer({
       id: answer.id,
       hasSingleAnswer,
-      unselectedFeedback: e.target.value,
+      unselectedFeedback: value,
     }));
   }
 };

diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/hooks.test.js b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/hooks.test.js
@@ -130,12 +130,12 @@ describe('Answer Options Hooks', () => {
       const answer = { id: 'A' };
       const hasSingleAnswer = false;
       const dispatch = useDispatch();
-      const e = { target: { value: 'string' } };
-      module.setSelectedFeedback({ answer, hasSingleAnswer, dispatch })(e);
+      const value = 'string';
+      module.setSelectedFeedback({ answer, hasSingleAnswer, dispatch })(value);
       expect(dispatch).toHaveBeenCalledWith(actions.problem.updateAnswer({
         id: answer.id,
         hasSingleAnswer,
-        selectedFeedback: e.target.value,
+        selectedFeedback: value,
       }));
     });
   });
@@ -144,12 +144,12 @@ describe('Answer Options Hooks', () => {
       const answer = { id: 'A' };
       const hasSingleAnswer = false;
       const dispatch = useDispatch();
-      const e = { target: { value: 'string' } };
-      module.setUnselectedFeedback({ answer, hasSingleAnswer, dispatch })(e);
+      const value = 'string';
+      module.setUnselectedFeedback({ answer, hasSingleAnswer, dispatch })(value);
       expect(dispatch).toHaveBeenCalledWith(actions.problem.updateAnswer({
         id: answer.id,
         hasSingleAnswer,
-        unselectedFeedback: e.target.value,
+        unselectedFeedback: value,
       }));
     });
   });

diff --git a/...blemEditor/components/EditProblemView/ExplanationWidget/__snapshots__/index.test.jsx.snap b/...blemEditor/components/EditProblemView/ExplanationWidget/__snapshots__/index.test.jsx.snap
@@ -22,13 +22,21 @@ exports[`SolutionWidget render snapshot: renders correct default 1`] = `
       id="authoring.problemEditor.solutionwidget.solutionDescriptionText"
     />
   </div>
-  <[object Object]
+  <TinyMceWidget
+    disabled={false}
     editorContentHtml="This is my solution"
+    editorRef={null}
     editorType="solution"
     id="solution"
+    images={{}}
+    isLibrary={false}
+    learningContextId="course+org+run"
+    lmsEndpointUrl=""
     minHeight={150}
+    onChange={[Function]}
     placeholder="Enter your explanation"
     setEditorRef={[MockFunction prepareEditorRef.setEditorRef]}
+    studioEndpointUrl=""
   />
 </div>
 `;