Render wagtial rich text fields as html

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>

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>

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

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>

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>

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}`"