From 720342f5b98d489686475618cd006fa0b849206b Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Mon, 8 May 2023 14:49:44 +0200
Subject: [PATCH] Render wagtial rich text fields as html

---
 client/src/components/ui/ItCheckbox.vue              | 12 ++++++------
 .../assignmentEvaluationPage/EvaluationContainer.vue |  1 +
 .../assignmentEvaluationPage/EvaluationSummary.vue   |  7 ++++---
 .../assignmentEvaluationPage/EvaluationTask.vue      |  2 +-
 .../assignment/AssignmentIntroductionView.vue        | 12 ++++++++++--
 .../assignment/AssignmentTaskView.vue                |  6 +++++-
 6 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/client/src/components/ui/ItCheckbox.vue b/client/src/components/ui/ItCheckbox.vue
index 8d4a8b34..42a9fe93 100644
--- a/client/src/components/ui/ItCheckbox.vue
+++ b/client/src/components/ui/ItCheckbox.vue
@@ -55,12 +55,12 @@ const input = (e: Event) => {
         @input="input"
       />
       <div class="ml-4 flex-col">
-        <div v-if="checkboxItem.label">
-          {{ checkboxItem.label }}
-        </div>
-        <div v-if="checkboxItem.subtitle" class="text-gray-900">
-          {{ checkboxItem.subtitle }}
-        </div>
+        <div v-if="checkboxItem.label" v-html="checkboxItem.label"></div>
+        <div
+          v-if="checkboxItem.subtitle"
+          class="text-gray-900"
+          v-html="checkboxItem.subtitle"
+        ></div>
       </div>
     </label>
   </div>
diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue
index fa60b39a..461bcb46 100644
--- a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue
+++ b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue
@@ -121,6 +121,7 @@ const dueDate = computed(() =>
           :assignment="props.assignment"
           :assignment-completion="props.assignmentCompletion"
           :due-date="dueDate"
+          @edit-task="editTask"
         ></EvaluationSummary>
       </section>
     </div>
diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue
index 751a2608..3b5d9f3b 100644
--- a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue
+++ b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue
@@ -130,9 +130,10 @@ const grade = computed(() => pointsToGrade(userPoints.value, maxPoints.value));
             </div>
           </div>
 
-          <div class="default-wagtail-rich-text mb-2 font-bold">
-            {{ task.value.description }}
-          </div>
+          <div
+            class="default-wagtail-rich-text mb-2 font-bold"
+            v-html="task.value.description"
+          ></div>
 
           <section class="mb-4">
             <div
diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue
index c3bc3d2f..3eaa40e6 100644
--- a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue
+++ b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue
@@ -80,7 +80,7 @@ const evaluateAssignmentCompletionDebounced = useDebounceFn(
       {{ task.value.title }}
     </div>
 
-    <h3 class="mb-8">{{ task.value.description }}</h3>
+    <h3 class="default-wagtail-rich-text mb-8" v-html="task.value.description"></h3>
 
     <fieldset>
       <div>
diff --git a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue
index 7e8bf7eb..d4b0de61 100644
--- a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue
+++ b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue
@@ -14,7 +14,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 <template>
   <h3 class="mt-8">{{ $t("assignment.initialSituationTitle") }}</h3>
-  <p class="text-large">{{ props.assignment.starting_position }}</p>
+  <p
+    class="default-wagtail-rich-text text-large"
+    v-if="props.assignment.starting_position"
+    v-html="props.assignment.starting_position"
+  ></p>
 
   <h3 class="mt-8">{{ $t("assignment.taskDefinitionTitle") }}</h3>
   <p class="text-large">
@@ -55,7 +59,11 @@ const props = withDefaults(defineProps<Props>(), {
   </p>
 
   <h3 class="mt-8">{{ $t("assignment.assessmentTitle") }}</h3>
-  <p class="text-large">{{ props.assignment.evaluation_description }}</p>
+  <p
+    class="default-wagtail-rich-text text-large"
+    v-html="props.assignment.evaluation_description"
+    v-if="props.assignment.evaluation_description"
+  ></p>
   <a :href="props.assignment.evaluation_document_url" class="text-large underline">
     {{ $t("assignment.showAssessmentDocument") }}
   </a>
diff --git a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentTaskView.vue b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentTaskView.vue
index 31224d3a..e1a43322 100644
--- a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentTaskView.vue
+++ b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentTaskView.vue
@@ -112,7 +112,11 @@ const completionStatus = computed(() => {
         ></ItCheckbox>
       </div>
       <div v-if="block.type === 'user_text_input'">
-        <p class="text-large pb-4">{{ block.value.text }}</p>
+        <p
+          class="text-large pb-4"
+          v-html="block.value.text"
+          v-if="block.value.text"
+        ></p>
         <ItTextarea
           :model-value="(getBlockData(block.id) as string) ?? ''"
           :cy-key="`user-text-input-${index}`"