Merge branch 'main' of https://github.com/openedx/frontend-lib-content-components into mashal-m/react-upgrade-to-v17

Author: mashal-m

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: edx/.github/.github/workflows/lockfileversion-check-v3.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master

package-lock.json

@@ -67,6 +67,9 @@
     "@codemirror/lint": "^6.2.1",
     "@codemirror/state": "^6.0.0",
     "@codemirror/view": "^6.0.0",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.1",
     "@edx/browserslist-config": "^1.1.1",
     "@reduxjs/toolkit": "^1.8.1",
     "@tinymce/tinymce-react": "^3.14.0",

package.json

@@ -28,6 +28,18 @@ export const nonQuestionKeys = [
   'textline',
 ];
 
+export const richTextFormats = [
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'div',
+  'p',
+  'pre',
+];
+
 export const responseKeys = [
   'multiplechoiceresponse',
   'numericalresponse',
@@ -62,57 +74,52 @@ export const stripNonTextTags = ({ input, tag }) => {
 
 export class OLXParser {
   constructor(olxString) {
-    this.problem = {};
-    this.questionData = {};
-    this.richTextProblem = {};
-    const richTextOptions = {
+    // There are two versions of the parsed XLM because the fields using tinymce require the order
+    // of the parsed data and spacing values to be preserved. However, all the other widgets need
+    // the data grouped by the wrapping tag. Examples of the parsed format can be found here:
+    // https://github.com/NaturalIntelligence/fast-xml-parser/blob/master/docs/v4/2.XMLparseOptions.md
+    const baseParserOptions = {
       ignoreAttributes: false,
-      alwaysCreateTextNode: true,
       numberParseOptions: {
         leadingZeros: false,
         hex: false,
       },
-      preserveOrder: true,
       processEntities: false,
     };
+
+    // Base Parser
+    this.problem = {};
     const parserOptions = {
-      ignoreAttributes: false,
+      ...baseParserOptions,
       alwaysCreateTextNode: true,
-      numberParseOptions: {
-        leadingZeros: false,
-        hex: false,
-      },
-      processEntities: false,
     };
     const builderOptions = {
-      ignoreAttributes: false,
-      numberParseOptions: {
-        leadingZeros: false,
-        hex: false,
-      },
-      processEntities: false,
+      ...baseParserOptions,
+    };
+    const parser = new XMLParser(parserOptions);
+    this.builder = new XMLBuilder(builderOptions);
+    this.parsedOLX = parser.parse(olxString);
+    if (_.has(this.parsedOLX, 'problem')) {
+      this.problem = this.parsedOLX.problem;
+    }
+
+    // Parser with `preservedOrder: true` and `trimValues: false`
+    this.richTextProblem = [];
+    const richTextOptions = {
+      ...baseParserOptions,
+      alwaysCreateTextNode: true,
+      preserveOrder: true,
+      trimValues: false,
     };
     const richTextBuilderOptions = {
-      ignoreAttributes: false,
-      numberParseOptions: {
-        leadingZeros: false,
-        hex: false,
-      },
+      ...baseParserOptions,
       preserveOrder: true,
-      processEntities: false,
+      trimValues: false,
     };
-    // There are two versions of the parsed XLM because the fields using tinymce require the order
-    // of the parsed data to be preserved. However, all the other widgets need the data grouped by
-    // the wrapping tag.
     const richTextParser = new XMLParser(richTextOptions);
-    const parser = new XMLParser(parserOptions);
-    this.builder = new XMLBuilder(builderOptions);
     this.richTextBuilder = new XMLBuilder(richTextBuilderOptions);
-    this.parsedOLX = parser.parse(olxString);
     this.richTextOLX = richTextParser.parse(olxString);
     if (_.has(this.parsedOLX, 'problem')) {
-      this.problem = this.parsedOLX.problem;
-      this.questionData = this.richTextOLX[0].problem;
       this.richTextProblem = this.richTextOLX[0].problem;
     }
   }
@@ -462,7 +469,7 @@ export class OLXParser {
    * @return {string} string of OLX
    */
   parseQuestions(problemType) {
-    const problemArray = _.get(this.questionData[0], problemType) || this.questionData;
+    const problemArray = _.get(this.richTextProblem[0], problemType) || this.richTextProblem;
 
     const questionArray = [];
     problemArray.forEach(tag => {
@@ -478,7 +485,7 @@ export class OLXParser {
         */
         tag[tagName].forEach(subTag => {
           const subTagName = Object.keys(subTag)[0];
-          if (subTagName === 'label' || subTagName === 'description') {
+          if (subTagName === 'label' || subTagName === 'description' || richTextFormats.includes(subTagName)) {
             questionArray.push(subTag);
           }
         });
@@ -503,11 +510,13 @@ export class OLXParser {
         if (objKeys.includes('demandhint')) {
           const currentDemandHint = obj.demandhint;
           currentDemandHint.forEach(hint => {
-            const hintValue = this.richTextBuilder.build(hint.hint);
-            hintsObject.push({
-              id: hintsObject.length,
-              value: hintValue,
-            });
+            if (Object.keys(hint).includes('hint')) {
+              const hintValue = this.richTextBuilder.build(hint.hint);
+              hintsObject.push({
+                id: hintsObject.length,
+                value: hintValue,
+              });
+            }
           });
         }
       });
@@ -526,21 +535,17 @@ export class OLXParser {
   getSolutionExplanation(problemType) {
     if (!_.has(this.problem, `${problemType}.solution`) && !_.has(this.problem, 'solution')) { return null; }
     const [problemBody] = this.richTextProblem.filter(section => Object.keys(section).includes(problemType));
-    let { solution } = problemBody[problemType].pop();
-    const { div } = solution[0];
-    if (solution.length === 1 && div) {
-      div.forEach((block) => {
-        const [key] = Object.keys(block);
-        const [value] = block[key];
-        if ((key === 'p' || key === 'h2')
-          && (_.get(value, '#text', null) === 'Explanation')
-        ) {
-          div.shift();
+    const [solutionBody] = problemBody[problemType].filter(section => Object.keys(section).includes('solution'));
+    const [divBody] = solutionBody.solution.filter(section => Object.keys(section).includes('div'));
+    const solutionArray = [];
+    if (divBody && divBody.div) {
+      divBody.div.forEach(tag => {
+        if (_.get(Object.values(tag)[0][0], '#text', null) !== 'Explanation') {
+          solutionArray.push(tag);
         }
       });
-      solution = div;
     }
-    const solutionString = this.richTextBuilder.build(solution);
+    const solutionString = this.richTextBuilder.build(solutionArray);
     return solutionString;
   }
 

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

@@ -1,7 +1,6 @@
 import { OLXParser } from './OLXParser';
 import {
   checkboxesOLXWithFeedbackAndHintsOLX,
-  getCheckboxesOLXWithFeedbackAndHintsOLX,
   dropdownOLXWithFeedbackAndHintsOLX,
   numericInputWithFeedbackAndHintsOLX,
   textInputWithFeedbackAndHintsOLX,
@@ -21,6 +20,7 @@ import {
   labelDescriptionQuestionOLX,
   htmlEntityTestOLX,
   numberParseTestOLX,
+  solutionExplanationTest,
 } from './mockData/olxTestData';
 import { ProblemTypeKeys } from '../../../data/constants/problem';
 
@@ -261,50 +261,55 @@ describe('OLXParser', () => {
       const problemType = olxparser.getProblemType();
       const question = olxparser.parseQuestions(problemType);
       it('should return an empty string for question', () => {
-        expect(question).toBe(blankQuestionOLX.question);
+        expect(question.trim()).toBe(blankQuestionOLX.question);
       });
     });
     describe('given a simple problem olx', () => {
       const question = textInputOlxParser.parseQuestions('stringresponse');
       it('should return a string of HTML', () => {
-        expect(question).toEqual(textInputWithFeedbackAndHintsOLX.question);
+        expect(question.trim()).toEqual(textInputWithFeedbackAndHintsOLX.question);
       });
     });
     describe('given olx with html entities', () => {
       const olxparser = new OLXParser(htmlEntityTestOLX.rawOLX);
       const problemType = olxparser.getProblemType();
       const question = olxparser.parseQuestions(problemType);
       it('should not encode html entities', () => {
-        expect(question).toEqual(htmlEntityTestOLX.question);
+        expect(question.trim()).toEqual(htmlEntityTestOLX.question);
       });
     });
     describe('given olx with styled content', () => {
       const olxparser = new OLXParser(styledQuestionOLX.rawOLX);
       const problemType = olxparser.getProblemType();
       const question = olxparser.parseQuestions(problemType);
       it('should pase/build correct styling', () => {
-        expect(question).toBe(styledQuestionOLX.question);
+        expect(question.trim()).toBe(styledQuestionOLX.question);
       });
     });
     describe('given olx with label and description tags inside response tag', () => {
       const olxparser = new OLXParser(labelDescriptionQuestionOLX.rawOLX);
       const problemType = olxparser.getProblemType();
       const question = olxparser.parseQuestions(problemType);
       it('should append the label/description to the question', () => {
-        expect(question).toBe(labelDescriptionQuestionOLX.question);
+        expect(question.trim()).toBe(labelDescriptionQuestionOLX.question);
       });
     });
   });
   describe('getSolutionExplanation()', () => {
     describe('for checkbox questions', () => {
       test('should parse text in p tags', () => {
-        const { rawOLX } = getCheckboxesOLXWithFeedbackAndHintsOLX();
-        const olxparser = new OLXParser(rawOLX);
+        const olxparser = new OLXParser(checkboxesOLXWithFeedbackAndHintsOLX.rawOLX);
         const problemType = olxparser.getProblemType();
         const explanation = olxparser.getSolutionExplanation(problemType);
-        const expected = getCheckboxesOLXWithFeedbackAndHintsOLX().solutionExplanation;
+        const expected = checkboxesOLXWithFeedbackAndHintsOLX.solutionExplanation;
         expect(explanation.replace(/\s/g, '')).toBe(expected.replace(/\s/g, ''));
       });
     });
+    it('should parse text with proper spacing', () => {
+      const olxparser = new OLXParser(solutionExplanationTest.rawOLX);
+      const problemType = olxparser.getProblemType();
+      const explanation = olxparser.getSolutionExplanation(problemType);
+      expect(explanation).toBe(solutionExplanationTest.solutionExplanation);
+    });
   });
 });