Merge pull request #646 from avantifellows/latex

latex editor and rendering setup for question texts

package.json

@@ -24,7 +24,9 @@
     "debounce": "^1.2.1",
     "deep-eql": "^4.0.0",
     "dom-to-image": "^2.6.0",
+    "katex": "^0.16.9",
     "lodash.clonedeep": "^4.5.0",
+    "mathlive": "^0.98.6",
     "mixpanel-browser": "^2.41.0",
     "offline-js": "^0.7.19",
     "plyr": "^3.6.3",
@@ -61,6 +63,8 @@
     "jest-canvas-mock": "^2.3.1",
     "jest-mock-axios": "^4.4.0",
     "jest-transform-stub": "^2.0.0",
+    "less": "^4.2.0",
+    "less-loader": "^7.3.0",
     "postcss": "^7.0.35",
     "sass": "^1.26.11",
     "sass-loader": "^10.0.2",

src/assets/locales/en.js

@@ -68,6 +68,7 @@ export default {
       },
       buttons: {
         add_option: "Add option",
+        submit_math: "Add",
       },
       dropdown: {
         question: "Question",
@@ -84,6 +85,7 @@ export default {
         add_image: "Image",
         edit_image: "Edit",
       },
+      add_math: "Math"
     },
     dialog: {
       delete_option: {
@@ -451,6 +453,11 @@ export default {
             enabled: "Update or delete the image in this question",
             disabled: "Cannot update the image in a published plio",
           },
+          add_math: {
+            enabled: "Add a math equation to your question",
+            disabled: "Cannot add a math equation in a published plio",
+          },
+          close_math_editor: "Close the math editor",
           question_type_picker: {
             disabled:
               "Cannot change the question type once a plio is published",

src/assets/locales/hi.js

@@ -69,6 +69,7 @@ export default {
       },
       buttons: {
         add_option: "विकल्प जोड़ें",
+        submit_math: "सबमिट",
       },
       dropdown: {
         question: "सवाल",
@@ -85,6 +86,7 @@ export default {
         add_image: "चित्र",
         edit_image: "बदलें",
       },
+      add_math: "गणित",
     },
     dialog: {
       delete_option: {
@@ -456,6 +458,11 @@ export default {
               "प्लायो के प्रकाशित होने के बाद चित्र को हटाना या बदलना मना है",
             enabled: "सवाल के चित्र को हटाने या बदलने के लिए क्लिक करें",
           },
+          add_math: {
+            enabled: "सवाल में गणित जोड़ने के लिए क्लिक करें",
+            disabled: "प्लायो के प्रकाशित होने के बाद आप सवाल में गणित नहीं जोड़ सकते",
+          },
+          close_math_editor: "गणित एडिटर बंद करें",
           question_type_picker: {
             disabled:
               "प्लायो के प्रकाशित होने के बाद आप किसी सवाल का प्रकार नहीं बदल सकते",

src/components/Editor/ItemEditor.vue

@@ -1,4 +1,19 @@
 <template>
+  <div class="relative w-full">
+    <math-field-popup
+      v-if="showMathEditorPopup"
+      @mathSubmitted="mathTextSubmitted"
+      :showMathEditorPopup="showMathEditorPopup"
+      :isInteractionDisabled="isInteractionDisabled"
+      :originText="textToSendToMathField"
+      :originTextSelectionStart="textAreaSelectionStartToSendToMathField"
+      @closeSignal="() => {
+        mathEditorTarget = null
+        mathEditorSelectedOptionIndex = null
+        showMathEditorPopup = false
+      }"
+    ></math-field-popup>
+
   <!-- big box -->
   <div
     class="flex flex-col w-full h-full rounded-md main-container relative"
@@ -121,22 +136,42 @@
           :maxHeightLimit="questionTextboxHeightLimit"
           data-test="questionText"
         ></Textarea>
-        <!-- add image to item button -->
-        <span
-          v-tooltip="{ content: addImageButtonTooltip, placement: 'left' }"
-          class="my-auto"
-        >
-          <icon-button
-            class="rounded-md w-12 h-12 disabled:opacity-50 my-auto group border pt-1"
-            orientation="vertical"
-            :iconConfig="addImageButtonIconConfig"
-            :titleConfig="addImageButtonTitleConfig"
-            :buttonClass="addImageButtonClass"
-            :isDisabled="isInteractionDisabled"
-            @click="showImageUploaderBox"
-            data-test="questionImage"
-          ></icon-button>
-        </span>
+
+        <!-- Buttons -->
+        <div class="flex flex-col justify-center">
+          <!-- add image to item button -->
+          <span
+            v-tooltip="{ content: addImageButtonTooltip, placement: 'left' }"
+            class="my-auto"
+          >
+            <icon-button
+              class="rounded-md w-12 h-12 disabled:opacity-50 my-auto group border pt-1"
+              orientation="vertical"
+              :iconConfig="addImageButtonIconConfig"
+              :titleConfig="addImageButtonTitleConfig"
+              :buttonClass="addImageButtonClass"
+              :isDisabled="isInteractionDisabled"
+              @click="showImageUploaderBox"
+              data-test="questionImage"
+            ></icon-button>
+          </span>
+          <!-- add math to item button  -->
+          <span
+            v-tooltip="{ content: addMathButtonTooltip, placement: 'left' }"
+            class="my-auto"
+          >
+            <icon-button
+              class="rounded-md w-12 h-12 disabled:opacity-50 my-auto group border pt-1"
+              orientation="vertical"
+              :iconConfig="addMathButtonIconConfig"
+              :titleConfig="addMathButtonTitleConfig"
+              :buttonClass="addMathButtonClass"
+              :isDisabled="isInteractionDisabled"
+              @click="() => openMathFieldPopup('questionText')"
+              data-test="questionMath"
+            ></icon-button>
+          </span>
+        </div>
       </div>
 
       <!-- time input HH : MM : SS : mmm -->
@@ -154,20 +189,42 @@
 
       <!-- input field for entering options  -->
       <div v-if="areOptionsVisible" data-test="options">
-        <input-text
+        <div
           v-for="(option, optionIndex) in options"
-          class="p-2"
-          v-model:value="options[optionIndex]"
-          :placeholder="$t('editor.item_editor.option_input.placeholder')"
-          :title="getOptionInputTitle(optionIndex)"
+          class="flex items-end flex-row w-full"
           :key="optionIndex"
-          :startIcon="getCorrectOptionIconConfig(optionIndex)"
-          :endIcon="getDeleteOptionIconConfig"
-          :boxStyling="getOptionBoxStyling(optionIndex)"
-          @start-icon-selected="updateCorrectAnswer(optionIndex)"
-          @end-icon-selected="deleteOption(optionIndex)"
-          data-test="option"
-        ></input-text>
+        >
+          <input-text
+            class="p-2 w-full"
+            v-model:value="options[optionIndex]"
+            :placeholder="$t('editor.item_editor.option_input.placeholder')"
+            :title="getOptionInputTitle(optionIndex)"
+            :startIcon="getCorrectOptionIconConfig(optionIndex)"
+            :endIcon="getDeleteOptionIconConfig"
+            :boxStyling="getOptionBoxStyling(optionIndex)"
+            @start-icon-selected="updateCorrectAnswer(optionIndex)"
+            @end-icon-selected="deleteOption(optionIndex)"
+            data-test="option"
+            :ref="`optionText_index_${optionIndex}`"
+          ></input-text>
+          <!-- add math to option text button  -->
+          <span
+            v-tooltip="{ content: addMathButtonTooltip, placement: 'left' }"
+            class="p-2"
+          >
+            <icon-button
+              class="rounded-md w-12 h-12 disabled:opacity-50 my-auto group border pt-1"
+              orientation="vertical"
+              :iconConfig="addMathButtonIconConfig"
+              :titleConfig="addMathButtonTitleConfig"
+              :buttonClass="addMathButtonClass"
+              :isDisabled="isInteractionDisabled"
+              @click="() => openMathFieldPopup('optionText', optionIndex)"
+              data-test="questionMath"
+            ></icon-button>
+          </span>
+        </div>
+
       </div>
 
       <!-- add option button -->
@@ -224,6 +281,7 @@
       </div>
     </div>
   </div>
+  </div>
 </template>
 
 <script>
@@ -240,6 +298,7 @@ import {
   convertISOTimeToSeconds,
 } from "@/services/Functional/Utilities/Generic.js";
 import { useToast } from "vue-toastification";
+import MathFieldPopup from "@/components/Editor/MathFieldPopup.vue";
 
 export default {
   name: "ItemEditor",
@@ -324,9 +383,23 @@ export default {
         iconClass:
           "w-6 h-6 text-primary group-hover:text-white group-disabled:text-primary",
       },
+      addMathButtonClass: "bg-white hover:bg-primary disabled:bg-white focus:ring-primary",
+      addMathButtonIconConfig: {
+        // icon config for add math button
+        enabled: true,
+        iconName: "add-math",
+        iconClass:
+          "w-6 h-6 text-primary group-hover:text-white group-disabled:text-primary",
+      },
       // set containing the question types which support options
       questionTypesSupportingOptions: new Set(["mcq", "checkbox"]),
       toast: useToast(),
+
+      // whether to show the question text math editor or not. Math editor for 
+      // options is not yet present and will be controlled by different variable
+      showMathEditorPopup: false,
+      mathEditorTarget: null, // "questionText" or "optionText"
+      mathEditorSelectedOptionIndex: null, // the index of the option against whose math editor button was clicked
     };
   },
 
@@ -386,8 +459,42 @@ export default {
     TimeInput,
     Textarea,
     QuestionTypeDropdown,
+    MathFieldPopup
   },
   methods: {
+    mathTextSubmitted(e) {
+      if (
+        this.mathEditorTarget == null ||
+        (
+          this.mathEditorTarget == 'optionText' &&
+          this.mathEditorSelectedOptionIndex == null
+        )
+      ) {
+        console.error('Invalid math editor target or option index')
+        return
+      }
+
+      if (this.mathEditorTarget == 'questionText')
+        this.questionText = e
+      
+      else if (
+        this.mathEditorTarget == 'optionText' &&
+        this.mathEditorSelectedOptionIndex != null
+      )
+        this.options[this.mathEditorSelectedOptionIndex] = e
+      
+        this.mathEditorTarget = null
+        this.mathEditorSelectedOptionIndex = null
+        this.showMathEditorPopup = false
+    },
+    openMathFieldPopup(
+      target, // : "questionText" | "optionText"
+      optionIndex = null
+    ) {
+      this.mathEditorTarget = target;
+      this.mathEditorSelectedOptionIndex = optionIndex;
+      this.showMathEditorPopup = true;
+    },
     getImageSource: GenericUtilities.getImageSource,
     showImageUploaderBox() {
       // to show or hide the image uploader dialog box
@@ -540,6 +647,22 @@ export default {
   },
 
   computed: {
+    textToSendToMathField() {
+      // returns the text to be sent to the math field
+      if (this.mathEditorTarget == "questionText") return this.questionText;
+      if (this.mathEditorSelectedOptionIndex != null && this.mathEditorTarget == "optionText")
+        return this.options[this.mathEditorSelectedOptionIndex];
+      return "";
+    },
+    textAreaSelectionStartToSendToMathField() {
+      if (this.mathEditorTarget == "questionText") return this.$refs.questionText.getSelectionStart();
+
+      if (this.mathEditorSelectedOptionIndex != null && this.mathEditorTarget == "optionText") {
+        return this.$refs[`optionText_index_${this.mathEditorSelectedOptionIndex}`][0].getSelectionStart();
+      }
+
+      return 0
+    },
     correctOptionIcon() {
       if (this.isQuestionTypeMCQ) return "check-circle-regular";
       return "check-square-regular";
@@ -558,6 +681,17 @@ export default {
         ? this.$t("tooltip.editor.item_editor.buttons.question_type_picker.disabled")
         : this.$t("tooltip.editor.item_editor.buttons.question_type_picker.enabled");
     },
+    addMathButtonTooltip() {
+      return this.isInteractionDisabled
+        ? this.$t("tooltip.editor.item_editor.buttons.add_math.disabled")
+        : this.$t("tooltip.editor.item_editor.buttons.add_math.enabled");
+    },
+    addMathButtonTitleConfig() {
+      return {
+        value: this.$t("editor.item_editor.add_math"),
+        class: "text-xs group-hover:text-white group-disabled:text-black text-black font-normal",
+      }
+    },
     addImageButtonTooltip() {
       if (!this.isQuestionImagePresent) {
         return this.isInteractionDisabled