fix: answer text flipped (#379)

This fixes a bug where an answer text was flipped in terms of the character order when typing (TNL-10980). One of the prop names of the TinyMceWidget that is imported in course-authoring had to be changed, so this goes together with https://github.com/openedx/frontend-app-course-authoring/pull/575.

src/editors/sharedComponents/TinyMceWidget/__snapshots__/index.test.jsx.snap

@@ -28,6 +28,7 @@ exports[`TinyMceWidget snapshots ImageUploadModal is not rendered 1`] = `
     editorConfig={
       Object {
         "clearSelection": [MockFunction hooks.selectedImage.clearSelection],
+        "content": undefined,
         "editorContentHtml": undefined,
         "editorRef": Object {
           "current": Object {
@@ -42,13 +43,18 @@ exports[`TinyMceWidget snapshots ImageUploadModal is not rendered 1`] = `
             },
           ],
         },
+        "initializeEditor": undefined,
         "isLibrary": true,
         "lmsEndpointUrl": "sOmEvaLue.cOm",
+        "minHeight": undefined,
         "openImgModal": [MockFunction modal.openModal],
         "openSourceCodeModal": [MockFunction modal.openModal],
+        "placeholder": undefined,
         "selection": "hooks.selectedImage.selection",
-        "setSelection": [MockFunction hooks.selectedImage.setSelection],
+        "setEditorRef": undefined,
+        "setSelection": undefined,
         "studioEndpointUrl": "sOmEoThERvaLue.cOm",
+        "updateContent": [Function],
       }
     }
     id="sOMeiD"
@@ -99,6 +105,7 @@ exports[`TinyMceWidget snapshots SourcecodeModal is not rendered 1`] = `
     editorConfig={
       Object {
         "clearSelection": [MockFunction hooks.selectedImage.clearSelection],
+        "content": undefined,
         "editorContentHtml": undefined,
         "editorRef": Object {
           "current": Object {
@@ -113,13 +120,18 @@ exports[`TinyMceWidget snapshots SourcecodeModal is not rendered 1`] = `
             },
           ],
         },
+        "initializeEditor": undefined,
         "isLibrary": false,
         "lmsEndpointUrl": "sOmEvaLue.cOm",
+        "minHeight": undefined,
         "openImgModal": [MockFunction modal.openModal],
         "openSourceCodeModal": [MockFunction modal.openModal],
+        "placeholder": undefined,
         "selection": "hooks.selectedImage.selection",
-        "setSelection": [MockFunction hooks.selectedImage.setSelection],
+        "setEditorRef": undefined,
+        "setSelection": undefined,
         "studioEndpointUrl": "sOmEoThERvaLue.cOm",
+        "updateContent": [Function],
       }
     }
     id="sOMeiD"
@@ -181,6 +193,7 @@ exports[`TinyMceWidget snapshots renders as expected with default behavior 1`] =
     editorConfig={
       Object {
         "clearSelection": [MockFunction hooks.selectedImage.clearSelection],
+        "content": undefined,
         "editorContentHtml": undefined,
         "editorRef": Object {
           "current": Object {
@@ -195,13 +208,18 @@ exports[`TinyMceWidget snapshots renders as expected with default behavior 1`] =
             },
           ],
         },
+        "initializeEditor": undefined,
         "isLibrary": false,
         "lmsEndpointUrl": "sOmEvaLue.cOm",
+        "minHeight": undefined,
         "openImgModal": [MockFunction modal.openModal],
         "openSourceCodeModal": [MockFunction modal.openModal],
+        "placeholder": undefined,
         "selection": "hooks.selectedImage.selection",
-        "setSelection": [MockFunction hooks.selectedImage.setSelection],
+        "setEditorRef": undefined,
+        "setSelection": undefined,
         "studioEndpointUrl": "sOmEoThERvaLue.cOm",
+        "updateContent": [Function],
       }
     }
     id="sOMeiD"

src/editors/sharedComponents/TinyMceWidget/index.jsx

@@ -27,6 +27,26 @@ import ImageUploadModal from '../ImageUploadModal';
 import SourceCodeModal from '../SourceCodeModal';
 import * as hooks from './hooks';
 
+const editorConfigDefaultProps = {
+  setEditorRef: undefined,
+  placeholder: undefined,
+  initializeEditor: undefined,
+  setSelection: undefined,
+  updateContent: undefined,
+  content: undefined,
+  minHeight: undefined,
+};
+
+const editorConfigPropTypes = {
+  setEditorRef: PropTypes.func,
+  placeholder: PropTypes.any,
+  initializeEditor: PropTypes.func,
+  setSelection: PropTypes.func,
+  updateContent: PropTypes.func,
+  content: PropTypes.any,
+  minHeight: PropTypes.any,
+};
+
 export const TinyMceWidget = ({
   editorType,
   editorRef,
@@ -38,8 +58,8 @@ export const TinyMceWidget = ({
   isLibrary,
   lmsEndpointUrl,
   studioEndpointUrl,
-  updateContent,
-  ...props
+  onChange,
+  ...editorConfig
 }) => {
   const { isImgOpen, openImgModal, closeImgModal } = hooks.imgModalToggle();
   const { isSourceCodeOpen, openSourceCodeModal, closeSourceCodeModal } = hooks.sourceCodeModalToggle(editorRef);
@@ -70,7 +90,7 @@ export const TinyMceWidget = ({
       <Editor
         id={id}
         disabled={disabled}
-        onEditorChange={updateContent}
+        onEditorChange={onChange}
         {
           ...hooks.editorConfig({
             openImgModal,
@@ -83,7 +103,7 @@ export const TinyMceWidget = ({
             images: imagesRef,
             editorContentHtml,
             ...imageSelection,
-            ...props,
+            ...editorConfig,
           })
         }
       />
@@ -100,7 +120,9 @@ TinyMceWidget.defaultProps = {
   id: null,
   disabled: false,
   editorContentHtml: undefined,
-  updateContent: () => ({}),
+  updateContent: undefined,
+  onChange: () => ({}),
+  ...editorConfigDefaultProps,
 };
 TinyMceWidget.propTypes = {
   editorType: PropTypes.string,
@@ -113,6 +135,8 @@ TinyMceWidget.propTypes = {
   disabled: PropTypes.bool,
   editorContentHtml: PropTypes.string,
   updateContent: PropTypes.func,
+  onChange: PropTypes.func,
+  ...editorConfigPropTypes,
 };
 
 export const mapStateToProps = (state) => ({