From 2a5f6795d349ab2010379801afe2455a25c927a2 Mon Sep 17 00:00:00 2001
From: Raymond Zhou <56318341+rayzhou-bit@users.noreply.github.com>
Date: Fri, 21 Apr 2023 08:42:10 -0700
Subject: [PATCH] feat: tinyMCE formatting and parsing (#311)

---
 .../ProblemEditor/data/ReactStateOLXParser.js    | 16 ++++++++++++++++
 .../data/mockData/editorTestData.js              |  4 +++-
 .../TinyMceWidget/pluginConfig.js                |  3 +++
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/editors/containers/ProblemEditor/data/ReactStateOLXParser.js b/src/editors/containers/ProblemEditor/data/ReactStateOLXParser.js
index 4e926b99e..91891e798 100644
--- a/src/editors/containers/ProblemEditor/data/ReactStateOLXParser.js
+++ b/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;
   }
 
diff --git a/src/editors/containers/ProblemEditor/data/mockData/editorTestData.js b/src/editors/containers/ProblemEditor/data/mockData/editorTestData.js
index 1bc41d712..a96230c46 100644
--- a/src/editors/containers/ProblemEditor/data/mockData/editorTestData.js
+++ b/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>',
diff --git a/src/editors/sharedComponents/TinyMceWidget/pluginConfig.js b/src/editors/sharedComponents/TinyMceWidget/pluginConfig.js
index a127a9732..967224662 100644
--- a/src/editors/sharedComponents/TinyMceWidget/pluginConfig.js
+++ b/src/editors/sharedComponents/TinyMceWidget/pluginConfig.js
@@ -14,6 +14,7 @@ const pluginConfig = ({ isLibrary, placeholder, editorType }) => {
   const quickToolbar = editorType === 'expandable' ? plugins.quickbars : '';
   const inline = editorType === 'expandable';
   const toolbar = editorType !== 'expandable';
+  const defaultFormat = (editorType === 'question' || editorType === 'expandable') ? 'div' : 'p';
 
   return (
     StrictDict({
@@ -93,6 +94,8 @@ const pluginConfig = ({ isLibrary, placeholder, editorType }) => {
         convert_urls: false,
         placeholder,
         inline,
+        block_formats: 'Header 1=h1;Header 2=h2;Header 3=h3;Header 4=h4;Header 5=h5;Header 6=h6;Div=div;Paragraph=p;Preformatted=pre',
+        forced_root_block: defaultFormat,
       },
     })
   );