Merge pull request #5246 from habibayman/feat/integrate-new-RTE

feat(texteditor): completely replace old with new TipTap editor 🎉

Author: marcellamaki

contentcuration/contentcuration/dev_urls.py

@@ -8,7 +8,6 @@
 from django.urls import include
 from django.urls import path
 from django.urls import re_path
-from django.views.generic import TemplateView
 from drf_yasg import openapi
 from drf_yasg.views import get_schema_view
 from rest_framework import permissions
@@ -76,10 +75,3 @@ def file_server(request, storage_path=None):
     re_path(r"^api-auth/", include("rest_framework.urls", namespace="rest_framework")),
     re_path(r"^content/(?P<storage_path>.+)$", file_server),
 ]
-
-urlpatterns += [
-    re_path(
-        r"^editor-dev(?:/.*)?$",
-        TemplateView.as_view(template_name="contentcuration/editor_dev.html"),
-    ),
-]

contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.spec.js

@@ -4,8 +4,7 @@ import { AssessmentItemToolbarActions } from '../../constants';
 import AnswersEditor from './AnswersEditor';
 import { AssessmentItemTypes } from 'shared/constants';
 
-jest.mock('shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue');
-jest.mock('shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue');
+jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue');
 
 const clickNewAnswerBtn = async wrapper => {
   await wrapper.findComponent('[data-test="newAnswerBtn"]').trigger('click');
@@ -302,33 +301,37 @@ describe('AnswersEditor', () => {
     });
   });
 
-  // describe('on answer text update', () => {
-  //   beforeEach(async () => {
-  //     wrapper = mount(AnswersEditor, {
-  //       propsData: {
-  //         questionKind: AssessmentItemTypes.SINGLE_SELECTION,
-  //         answers: [
-  //           { answer: 'Mayonnaise (I mean you can, but...)', correct: true, order: 1 },
-  //           { answer: 'Peanut butter', correct: false, order: 2 },
-  //         ],
-  //         openAnswerIdx: 1,
-  //       },
-  //     });
-
-  //     // only one editor is rendered at a time => "wrapper.find"
-  //     wrapper.findComponent({ name: 'MarkdownEditor' }).vm.$emit('update', 'European butter');
-  //     await wrapper.vm.$nextTick();
-  //   });
-
-  //   it('emits update event with a payload containing updated answers', () => {
-  //     expect(wrapper.emitted().update).toBeTruthy();
-  //     expect(wrapper.emitted().update.length).toBe(1);
-  //     expect(wrapper.emitted().update[0][0]).toEqual([
-  //       { answer: 'Mayonnaise (I mean you can, but...)', correct: true, order: 1 },
-  //       { answer: 'European butter', correct: false, order: 2 },
-  //     ]);
-  //   });
-  // });
+  describe('on answer text update', () => {
+    beforeEach(async () => {
+      wrapper = mount(AnswersEditor, {
+        propsData: {
+          questionKind: AssessmentItemTypes.SINGLE_SELECTION,
+          answers: [
+            { answer: 'Mayonnaise (I mean you can, but...)', correct: true, order: 1 },
+            { answer: 'Peanut butter', correct: false, order: 2 },
+          ],
+          openAnswerIdx: 1,
+        },
+      });
+
+      const editors = wrapper.findAllComponents({ name: 'RichTextEditor' });
+      editors.at(1).vm.$emit('update', 'European butter');
+
+      await wrapper.vm.$nextTick();
+    });
+
+    it('emits update event with a payload containing updated answers', () => {
+      expect(wrapper.emitted().update).toBeTruthy();
+      expect(wrapper.emitted().update.length).toBe(1);
+
+      const emittedAnswers = JSON.parse(JSON.stringify(wrapper.emitted().update[0][0]));
+
+      expect(emittedAnswers).toEqual([
+        { answer: 'Mayonnaise (I mean you can, but...)', correct: true, order: 1 },
+        { answer: 'European butter', correct: false, order: 2 },
+      ]);
+    });
+  });
 
   describe('on correct answer change', () => {
     beforeEach(async () => {

contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue

@@ -25,7 +25,7 @@
           <div :class="indicatorClasses(answer)"></div>
           <VCardText :class="{ 'pb-0': !isAnswerOpen(answerIdx) }">
             <VLayout align-top>
-              <VFlex xs1>
+              <VFlex shrink>
                 <!--
                   VRadio cannot be used without VRadioGroup like VCheckbox but it can
                   be solved by wrapping each VRadio to VRadioGroup
@@ -52,7 +52,7 @@
                 />
               </VFlex>
 
-              <VFlex xs7>
+              <VFlex xs10>
                 <keep-alive :max="5">
                   <!-- Input question shows a text field with type of `number` -->
                   <div v-if="isInputQuestion">
@@ -73,29 +73,22 @@
                   </div>
 
                   <div v-else>
-                    <!-- <MarkdownEditor
-                      v-if="isAnswerOpen(answerIdx)"
+                    <!-- ?? analyticsLabel="Answer" -->
+                    <TipTapEditor
+                      v-model="answer.answer"
                       class="editor"
-                      analyticsLabel="Answer"
-                      :markdown="answer.answer"
-                      :handleFileUpload="handleFileUpload"
-                      :getFileUpload="getFileUpload"
-                      :imagePreset="imagePreset"
+                      :mode="isAnswerOpen(answerIdx) ? 'edit' : 'view'"
                       @update="updateAnswerText($event, answerIdx)"
                       @minimize="emitClose"
+                      @open-editor="emitOpen(answerIdx)"
                     />
-                    <MarkdownViewer
-                      v-else
-                      :markdown="answer.answer"
-                    /> -->
-                    <TipTapEditor v-model="answer.answer" />
                   </div>
                 </keep-alive>
               </VFlex>
 
               <VSpacer />
 
-              <VFlex>
+              <VFlex shrink>
                 <AssessmentItemToolbar
                   :iconActionsConfig="toolbarIconActions"
                   :canMoveUp="!isAnswerFirst(answerIdx)"
@@ -128,17 +121,13 @@
 
 <script>
 
-  /* eslint-disable */
-
   import AssessmentItemToolbar from '../AssessmentItemToolbar';
   import { AssessmentItemToolbarActions } from '../../constants';
   import { floatOrIntRegex, getCorrectAnswersIndices, mapCorrectAnswers } from '../../utils';
   import { AssessmentItemTypes } from 'shared/constants';
   import { swapElements } from 'shared/utils/helpers';
   import Checkbox from 'shared/views/form/Checkbox';
 
-  import MarkdownEditor from 'shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor';
-  import MarkdownViewer from 'shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer';
   import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
 
   const updateAnswersOrder = answers => {
@@ -154,8 +143,6 @@
     name: 'AnswersEditor',
     components: {
       AssessmentItemToolbar,
-      MarkdownEditor,
-      MarkdownViewer,
       Checkbox,
       TipTapEditor,
     },
@@ -179,20 +166,6 @@
         type: Number,
         default: 0,
       },
-      // Inject function to handle file uploads
-      handleFileUpload: {
-        type: Function,
-        default: () => {},
-      },
-      // Inject function to get file upload object
-      getFileUpload: {
-        type: Function,
-        default: () => {},
-      },
-      imagePreset: {
-        type: String,
-        default: null,
-      },
     },
     data() {
       return {
@@ -290,7 +263,7 @@
           if (
             !this.shouldHaveOneCorrectAnswer &&
             JSON.stringify([...newIndices].sort()) ===
-              JSON.stringify([...this.correctAnswersIndices].sort())
+            JSON.stringify([...this.correctAnswersIndices].sort())
           ) {
             return;
           }
@@ -429,9 +402,12 @@
       numberFieldErrorLabel: 'Answer must be a number',
     },
   };
+
 </script>
 
+
 <style lang="scss" scoped>
+
   $exercise-answer-correct: #4caf50;
   $exercise-answer-wrong: #ef5350;
 
@@ -484,4 +460,5 @@
   ::v-deep .no-border.v-text-field > .v-input__control > .v-input__slot::after {
     border-style: none;
   }
+
 </style>

contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.spec.js

@@ -5,8 +5,7 @@ import { assessmentItemKey } from '../../utils';
 import AssessmentEditor from './AssessmentEditor';
 import { AssessmentItemTypes, ValidationErrors, DELAYED_VALIDATION } from 'shared/constants';
 
-jest.mock('shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue');
-jest.mock('shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue');
+jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue');
 
 const NODE_ID = 'node-id';
 const ITEM1 = {
@@ -184,10 +183,18 @@ describe('AssessmentEditor', () => {
 
     expect(items.length).toBe(4);
 
-    expect(items.at(0).html()).toContain(ITEM1.question);
-    expect(items.at(1).html()).toContain(ITEM2.question);
-    expect(items.at(2).html()).toContain(ITEM3.question);
-    expect(items.at(3).html()).toContain(ITEM4.question);
+    expect(items.at(0).findComponent({ name: 'RichTextEditor' }).props('value')).toBe(
+      ITEM1.question,
+    );
+    expect(items.at(1).findComponent({ name: 'RichTextEditor' }).props('value')).toBe(
+      ITEM2.question,
+    );
+    expect(items.at(2).findComponent({ name: 'RichTextEditor' }).props('value')).toBe(
+      ITEM3.question,
+    );
+    expect(items.at(3).findComponent({ name: 'RichTextEditor' }).props('value')).toBe(
+      ITEM4.question,
+    );
   });
 
   it('renders items as closed', () => {

contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue

@@ -27,7 +27,8 @@
           <VCardText>
             <VLayout align-start>
               <VFlex
-                xs1
+                :style="{ 'margin-right': '1.5rem' }"
+                shrink
                 mt-2
               >
                 {{ idx + 1 }}
@@ -45,7 +46,7 @@
 
               <VFlex
                 v-else
-                xs10
+                xs11
               >
                 <AssessmentItemEditor
                   :item="item"

contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.spec.js

@@ -7,8 +7,7 @@ import { AssessmentItemTypes, ValidationErrors } from 'shared/constants';
 
 const store = factory();
 
-jest.mock('shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue');
-jest.mock('shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue');
+jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue');
 
 const listeners = {
   update: jest.fn(),
@@ -34,8 +33,7 @@ const openQuestion = async wrapper => {
 };
 
 const updateQuestion = async (wrapper, newQuestionText) => {
-  // only one editor is rendered at a time => "wrapper.find"
-  wrapper.findComponent({ name: 'MarkdownEditor' }).vm.$emit('update', newQuestionText);
+  wrapper.findComponent({ name: 'RichTextEditor' }).vm.$emit('update', newQuestionText);
   await wrapper.vm.$nextTick();
 };
 
@@ -63,13 +61,16 @@ describe('AssessmentItemEditor', () => {
       listeners,
     });
 
-    expect(wrapper.html()).toContain('Exercise 2 - Question 2');
+    // Find the first RichTextEditor component, which is used for the question.
+    const questionEditor = wrapper.findComponent({ name: 'RichTextEditor' });
+    expect(questionEditor.exists()).toBe(true);
 
-    // expect(wrapper.html()).toContain('Mayonnaise (I mean you can, but...)');
-    // expect(wrapper.html()).toContain('Peanut butter');
+    // Assert that it received the correct `value` prop.
+    expect(questionEditor.props('value')).toBe('Exercise 2 - Question 2');
 
-    // expect(wrapper.html()).toContain("It's not healthy");
-    // expect(wrapper.html()).toContain('Tasty!');
+    // Check that the child editor components also exist.
+    expect(wrapper.findComponent({ name: 'AnswersEditor' }).exists()).toBe(true);
+    expect(wrapper.findComponent({ name: 'HintsEditor' }).exists()).toBe(true);
   });
 
   describe('on question text update', () => {