From 80f2689cc283f9507fd7eec0d8f58beec683fdc3 Mon Sep 17 00:00:00 2001
From: Ken Clary <kclary@edx.org>
Date: Fri, 27 Jan 2023 15:52:13 -0500
Subject: [PATCH] fix: question field uses real placeholder instead of
 template. fixed blank question handling. TNL-10395, TNL-10411.

---
 .../containers/ProblemEditor/data/OLXParser.js   |  4 ++++
 .../ProblemEditor/data/OLXParser.test.js         |  7 +++++++
 .../ProblemEditor/data/mockData/olxTestData.js   |  9 +++++++++
 src/editors/containers/ProblemEditor/hooks.js    |  1 +
 .../data/constants/basicOlxTemplates/dropdown.js | 15 +++++++--------
 .../constants/basicOlxTemplates/multiSelect.js   | 16 ++++++++--------
 .../data/constants/basicOlxTemplates/numeric.js  |  9 ++++-----
 .../constants/basicOlxTemplates/singleSelect.js  | 12 ++++++------
 .../constants/basicOlxTemplates/textInput.js     | 10 +++++-----
 src/editors/data/constants/tinyMCEStyles.js      | 14 ++++++++++++++
 10 files changed, 65 insertions(+), 32 deletions(-)

diff --git a/src/editors/containers/ProblemEditor/data/OLXParser.js b/src/editors/containers/ProblemEditor/data/OLXParser.js
index de2761735..6b8899589 100644
--- a/src/editors/containers/ProblemEditor/data/OLXParser.js
+++ b/src/editors/containers/ProblemEditor/data/OLXParser.js
@@ -21,6 +21,10 @@ export const nonQuestionKeys = [
   '@_type',
   'formulaequationinput',
   'numericalresponse',
+  'stringresponse',
+  'multiplechoiceresponse',
+  'choiceresponse',
+  'optionresponse',
   'demandhint',
 ];
 
diff --git a/src/editors/containers/ProblemEditor/data/OLXParser.test.js b/src/editors/containers/ProblemEditor/data/OLXParser.test.js
index eade6422f..b75c4bdf7 100644
--- a/src/editors/containers/ProblemEditor/data/OLXParser.test.js
+++ b/src/editors/containers/ProblemEditor/data/OLXParser.test.js
@@ -10,6 +10,7 @@ import {
   advancedProblemOlX,
   multipleProblemOlX,
   blankProblemOLX,
+  blankQuestionOLX,
 } from './mockData/olxTestData';
 import { ProblemTypeKeys } from '../../../data/constants/problem';
 
@@ -153,4 +154,10 @@ describe('Check OLXParser for question parsing', () => {
     const question = olxparser.parseQuestions('numericalresponse');
     expect(question).toEqual(numericInputWithFeedbackAndHintsOLXException.question);
   });
+  test('Test OLX with no question content should have empty string for question', () => {
+    const olxparser = new OLXParser(blankQuestionOLX.rawOLX);
+    const problemType = olxparser.getProblemType();
+    const question = olxparser.parseQuestions(problemType);
+    expect(question).toBe(blankQuestionOLX.question);
+  });
 });
diff --git a/src/editors/containers/ProblemEditor/data/mockData/olxTestData.js b/src/editors/containers/ProblemEditor/data/mockData/olxTestData.js
index 5cae017f9..af19a8d1c 100644
--- a/src/editors/containers/ProblemEditor/data/mockData/olxTestData.js
+++ b/src/editors/containers/ProblemEditor/data/mockData/olxTestData.js
@@ -577,3 +577,12 @@ export const multipleProblemOlX = {
 export const blankProblemOLX = {
   rawOLX: '<problem></problem>',
 };
+export const blankQuestionOLX = {
+  rawOLX: `<problem>
+  <stringresponse type="ci">
+    <additional_answer />
+    <textline size="20"/>
+  </stringresponse>
+</problem>`,
+  question: '',
+};
diff --git a/src/editors/containers/ProblemEditor/hooks.js b/src/editors/containers/ProblemEditor/hooks.js
index e118c8072..8369ca6a6 100644
--- a/src/editors/containers/ProblemEditor/hooks.js
+++ b/src/editors/containers/ProblemEditor/hooks.js
@@ -26,6 +26,7 @@ export const problemEditorConfig = ({
     menubar: false,
     branding: false,
     min_height: 150,
+    placeholder: 'Enter your question',
   },
   onFocusOut: () => {
     const content = editorRef.current.getContent();
diff --git a/src/editors/data/constants/basicOlxTemplates/dropdown.js b/src/editors/data/constants/basicOlxTemplates/dropdown.js
index 06a3cf835..4988b43e2 100644
--- a/src/editors/data/constants/basicOlxTemplates/dropdown.js
+++ b/src/editors/data/constants/basicOlxTemplates/dropdown.js
@@ -1,13 +1,12 @@
 /* eslint-disable */
 export const dropdown = `<problem>
-<optionresponse>
-  <p>Enter your question</p>
-<optioninput>
-    <option correct="True"></option>
-    <option correct="False"></option>
-    <option correct="False"></option>
-  </optioninput>
-</optionresponse>
+  <optionresponse>
+    <optioninput>
+      <option correct="True"></option>
+      <option correct="False"></option>
+      <option correct="False"></option>
+    </optioninput>
+  </optionresponse>
 </problem>`
 
 export default dropdown;
diff --git a/src/editors/data/constants/basicOlxTemplates/multiSelect.js b/src/editors/data/constants/basicOlxTemplates/multiSelect.js
index 5497b318f..a743ae684 100644
--- a/src/editors/data/constants/basicOlxTemplates/multiSelect.js
+++ b/src/editors/data/constants/basicOlxTemplates/multiSelect.js
@@ -1,12 +1,12 @@
 /* eslint-disable */
  const multiSelect= `<problem>
-<choiceresponse>
-<p>Enter your question</p>
-<checkboxgroup>
-    <choice correct="true"></choice>
-    <choice correct="false"></choice>
-    <choice correct="false"></choice>
-  </checkboxgroup>
-</choiceresponse>
+  <choiceresponse>
+    <checkboxgroup>
+      <choice correct="true"></choice>
+      <choice correct="false"></choice>
+      <choice correct="false"></choice>
+    </checkboxgroup>
+  </choiceresponse>
 </problem>`
+
 export default multiSelect;
\ No newline at end of file
diff --git a/src/editors/data/constants/basicOlxTemplates/numeric.js b/src/editors/data/constants/basicOlxTemplates/numeric.js
index 1f7947cb3..dfaae48a0 100644
--- a/src/editors/data/constants/basicOlxTemplates/numeric.js
+++ b/src/editors/data/constants/basicOlxTemplates/numeric.js
@@ -1,10 +1,9 @@
 /* eslint-disable */
 export const numeric = `<problem>
-<numericalresponse>
-<p>Enter your question</p>
-<responseparam type="tolerance" default="5"/>
-  <formulaequationinput/>
-</numericalresponse>
+  <numericalresponse>
+    <responseparam type="tolerance" default="5"/>
+    <formulaequationinput/>
+  </numericalresponse>
 </problem>`
 
 export default numeric;
\ No newline at end of file
diff --git a/src/editors/data/constants/basicOlxTemplates/singleSelect.js b/src/editors/data/constants/basicOlxTemplates/singleSelect.js
index 6794ae60a..08daf32d0 100644
--- a/src/editors/data/constants/basicOlxTemplates/singleSelect.js
+++ b/src/editors/data/constants/basicOlxTemplates/singleSelect.js
@@ -1,12 +1,12 @@
 /* eslint-disable */
 export const singleSelect = `<problem>
-<multiplechoiceresponse>
-<p>Enter your question</p>
+  <multiplechoiceresponse>
     <choicegroup>
-        <choice correct="true"></choice>
-        <choice correct="false"></choice>
-        <choice correct="false"></choice>
+      <choice correct="true"></choice>
+      <choice correct="false"></choice>
+      <choice correct="false"></choice>
     </choicegroup>
-</multiplechoiceresponse>
+  </multiplechoiceresponse>
 </problem>`
+
 export default singleSelect;
\ No newline at end of file
diff --git a/src/editors/data/constants/basicOlxTemplates/textInput.js b/src/editors/data/constants/basicOlxTemplates/textInput.js
index 07eafc813..a1ece7a16 100644
--- a/src/editors/data/constants/basicOlxTemplates/textInput.js
+++ b/src/editors/data/constants/basicOlxTemplates/textInput.js
@@ -1,9 +1,9 @@
 /* eslint-disable */
 const textInput =`<problem>
-<stringresponse type="ci">
-<p>Enter your question</p>
-<additional_answer />
-  <textline size="20"/>
-</stringresponse>
+  <stringresponse type="ci">
+    <additional_answer />
+    <textline size="20"/>
+  </stringresponse>
 </problem>`
+
 export default textInput;
\ No newline at end of file
diff --git a/src/editors/data/constants/tinyMCEStyles.js b/src/editors/data/constants/tinyMCEStyles.js
index d201a86fd..77ec9c66a 100644
--- a/src/editors/data/constants/tinyMCEStyles.js
+++ b/src/editors/data/constants/tinyMCEStyles.js
@@ -212,6 +212,20 @@ const getStyles = () => (
       background: none;
       color: #3c3c3c;
       padding: 0;
+  }
+  .mce-content-body[data-mce-placeholder] {
+    position: relative;
+  }
+  .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+    color: rgba(34, 47, 62, 0.7);
+    content: attr(data-mce-placeholder);
+    position: absolute;
+  }
+  .mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
+    margin: 1em 0;
+  }
+  .mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before {
+    margin: 1em 0;
   }`
 );