feat: tinyMCE formatting and parsing (#311)

src/editors/containers/ProblemEditor/data/ReactStateOLXParser.js

@@ -188,6 +188,22 @@ class ReactStateOLXParser {
   addQuestion() {
     const { question } = this.editorObject;
     const questionObject = this.questionParser.parse(question);
+    /* Removes block tags like <p> or <h1> that surround the <label> format.
+      Block tags are required by tinyMCE but have adverse effect on css in studio.
+      */
+    questionObject.forEach((tag, ind) => {
+      const tagName = Object.keys(tag)[0];
+      let label = null;
+      tag[tagName].forEach(subTag => {
+        const subTagName = Object.keys(subTag)[0];
+        if (subTagName === 'label') {
+          label = subTag;
+        }
+      });
+      if (label) {
+        questionObject[ind] = label;
+      }
+    });
     return questionObject;
   }
 

src/editors/containers/ProblemEditor/data/mockData/editorTestData.js

@@ -52,7 +52,9 @@ export const dropdownWithFeedbackAndHints = {
 
 export const multipleChoiceWithFeedbackAndHints = {
   solution: '<p>You can add a solution</p>',
-  question: '<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for multiple choice with hints and feedback problems. Edit this component to replace this template with your own assessment.</p><label>Add the question text, or prompt, here. This text is required.</label><em>You can add an optional tip or note related to the prompt like this.</em>',
+  question: `<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for multiple choice with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
+    <p><label>Add the question text, or prompt, here. This text is required.</label></p>
+    <em>You can add an optional tip or note related to the prompt like this.</em>`,
   answers: {
     A: '<p>an incorrect answer</p>',
     B: '<p>the correct answer</p>',