fix image resize (#299)

Description:
This is a bug where the image resizing in text editor and problem editor was completely broken. Putting in a text value when the aspect ratio lock was enabled would change both values but not to the size you wanted. If you disabled the lock, not just one but both values would change.

This is a problem that mostly affects images that are rectangular, not square. There's an example image below which is one that caused problems on prod.

Main fixes:
when I keep the image ratio locked, I can change one value (like width) and the other will jump to the proportionate value, but rounded to full pixels.
when I unlock the aspect ratio and change a value, then click save on the image dimension modal, only the one value will change, which will stretch the image in whatever direction. This is reflected in the tinymce image and then the updated value will appear when I reopen the image dimension modal. It is not possible to reset the image to the original dimensions any longer. The new values are saved.
The image dimensions in the edit image settings modal should always reflect the actual dimensions of the image when I look at it e.g. in the course outline. (Otherwise I may click save and the image is squished.)
There was a problem with deselecting an image: when you edit image dimensions and then save or press cancel, the "edit image" button will not disappear, but the image is not selected anymore. When you do not click anything else but immediately click on this button, sometimes (at least the second or third time you do this) this will throw an error. I fixed it so it will just open the default "select image" modal.
Other requirements:
Resizing the image means that when I open the dimensions update, I see the new dimensions.
Images in the editor are now displayed with the correct dimensions, proportional or stretched, if those dimensions don't exceed the size of the editor.
A known smaller bug emerging from this is that when you have more than one instance of the same image in the same editor, you cannot get or set its dimensions correctly. I believe I have gotten it into the following state: When you click one of the copies, you will either get the correct dimensions of the selected copy, or if not, it will display the original image dimensions. When you edit the dimensions, the correct copy of the image will be updated.
Out of Scope:
This cannot handle more than one instance of the same image properly. There will be a separate bug issue for this.
Sometimes, when you edit image dimensions and then reopen the image dimension modal, the dimensions will be null and thus just not appear in the modal - randomly. This is a bug as well.

Author: jesperhodge

.eslintrc.js

@@ -10,6 +10,7 @@ const config = createConfig('eslint', {
     'react-hooks/rules-of-hooks': 2,
     'react-hooks/exhaustive-deps': 'off',
     'no-promise-executor-return': 'off',
+    'no-param-reassign': ['error', { props: false }],
     radix: 'off',
   },
 });

src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/__snapshots__/index.test.jsx.snap

@@ -23,12 +23,12 @@ exports[`SolutionWidget render snapshot: renders correct default 1`] = `
     />
   </div>
   <[object Object]
+    editorContentHtml="This is my question"
     editorType="solution"
     id="solution"
     minHeight={150}
     placeholder="Enter your explanation"
     setEditorRef={[MockFunction prepareEditorRef.setEditorRef]}
-    textValue="This is my question"
   />
 </div>
 `;

src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.jsx

@@ -28,7 +28,7 @@ export const ExplanationWidget = ({
         id="solution"
         editorType="solution"
         editorRef={editorRef}
-        textValue={settings?.solutionExplanation}
+        editorContentHtml={settings?.solutionExplanation}
         setEditorRef={setEditorRef}
         minHeight={150}
         placeholder={intl.formatMessage(messages.placeholder)}

src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/__snapshots__/index.test.jsx.snap

@@ -14,12 +14,12 @@ exports[`QuestionWidget render snapshot: renders correct default 1`] = `
     />
   </div>
   <[object Object]
+    editorContentHtml="This is my question"
     editorType="question"
     id="question"
     minHeight={150}
     placeholder="Enter your question"
     setEditorRef={[MockFunction prepareEditorRef.setEditorRef]}
-    textValue="This is my question"
   />
 </div>
 `;

src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx

@@ -25,7 +25,7 @@ export const QuestionWidget = ({
         id="question"
         editorType="question"
         editorRef={editorRef}
-        textValue={question}
+        editorContentHtml={question}
         setEditorRef={setEditorRef}
         minHeight={150}
         placeholder={intl.formatMessage(messages.placeholder)}

src/editors/containers/ProblemEditor/components/EditProblemView/hooks.js

@@ -124,7 +124,7 @@ export const checkForSettingDiscrepancy = ({ problem, ref, openSaveWarningModal
   const problemSettings = reactSettingsParser.getSettings();
   const rawOlxSettings = reactSettingsParser.parseRawOlxSettings();
   let isMismatched = false;
-  // console.log(rawOlxSettings);
+
   Object.entries(rawOlxSettings).forEach(([key, value]) => {
     if (value !== problemSettings[key]) {
       isMismatched = true;

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

@@ -36,6 +36,7 @@ exports[`TextEditor snapshots block failed to load, Toast is shown 1`] = `
       />
     </Toast>
     <[object Object]
+      editorContentHtml="eDiTablE Text"
       editorRef={
         Object {
           "current": Object {
@@ -48,7 +49,6 @@ exports[`TextEditor snapshots block failed to load, Toast is shown 1`] = `
       initializeEditor={[MockFunction args.intializeEditor]}
       minHeight={500}
       setEditorRef={[MockFunction hooks.prepareEditorRef.setEditorRef]}
-      textValue="eDiTablE Text"
     />
   </div>
 </EditorContainer>
@@ -194,6 +194,7 @@ exports[`TextEditor snapshots renders as expected with default behavior 1`] = `
       />
     </Toast>
     <[object Object]
+      editorContentHtml="eDiTablE Text"
       editorRef={
         Object {
           "current": Object {
@@ -206,7 +207,6 @@ exports[`TextEditor snapshots renders as expected with default behavior 1`] = `
       initializeEditor={[MockFunction args.intializeEditor]}
       minHeight={500}
       setEditorRef={[MockFunction hooks.prepareEditorRef.setEditorRef]}
-      textValue="eDiTablE Text"
     />
   </div>
 </EditorContainer>

src/editors/containers/TextEditor/index.jsx

@@ -48,7 +48,7 @@ export const TextEditor = ({
       <TinyMceWidget
         editorType="text"
         editorRef={editorRef}
-        textValue={blockValue ? blockValue.data.data : ''}
+        editorContentHtml={blockValue ? blockValue.data.data : ''}
         setEditorRef={setEditorRef}
         minHeight={500}
         height="100%"

src/editors/data/constants/tinyMCEStyles.js

@@ -198,7 +198,6 @@ const getStyles = () => (
   }
   .mce-content-body img {
       max-width: 100%;
-      height: auto;
   }
   .mce-content-body pre {
     margin: 1em 0;

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

@@ -6,6 +6,7 @@ exports[`ExpandableTextArea snapshots renders as expected with default behavior
     className="expandable-mce error"
   >
     <TinyMceWidget
+      editorContentHtml="text"
       editorRef={
         Object {
           "current": null,
@@ -14,7 +15,6 @@ exports[`ExpandableTextArea snapshots renders as expected with default behavior
       editorType="expandable"
       placeholder={null}
       setEditorRef={[Function]}
-      textValue="text"
       updateContent={[MockFunction]}
     />
   </div>
@@ -27,6 +27,7 @@ exports[`ExpandableTextArea snapshots renders error message 1`] = `
     className="expandable-mce error"
   >
     <TinyMceWidget
+      editorContentHtml="text"
       editorRef={
         Object {
           "current": null,
@@ -35,7 +36,6 @@ exports[`ExpandableTextArea snapshots renders error message 1`] = `
       editorType="expandable"
       placeholder={null}
       setEditorRef={[Function]}
-      textValue="text"
       updateContent={[MockFunction]}
     />
   </div>