fix: question field uses real placeholder instead of template. fixed blank question handling. TNL-10395, TNL-10411.

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

@@ -21,6 +21,10 @@ export const nonQuestionKeys = [
   '@_type',
   'formulaequationinput',
   'numericalresponse',
+  'stringresponse',
+  'multiplechoiceresponse',
+  'choiceresponse',
+  'optionresponse',
   'demandhint',
 ];
 

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);
+  });
 });

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: '',
+};

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();

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;

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;

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;

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;

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;

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;
   }`
 );