From 4776206bb84b4f00a473591fe7ff2c7d78576b4b Mon Sep 17 00:00:00 2001
From: Reto Aebersold <aeby@substyle.ch>
Date: Wed, 1 Nov 2023 14:27:53 +0100
Subject: [PATCH] feat: Rich-text component for ext. link handling

---
 .../components/mediaLibrary/OverviewCard.vue  |  5 +--
 client/src/components/ui/RichText.vue         | 32 +++++++++++++++++++
 .../EvaluationSummary.vue                     | 20 +++++++-----
 .../EvaluationTask.vue                        |  8 ++---
 .../circlePage/CircleOverview.vue             |  9 ++----
 .../LearningContentPage.vue                   | 20 +-----------
 .../assignment/AssignmentIntroductionView.vue | 20 ++++++------
 .../AssignmentSubmissionResponses.vue         | 11 ++++---
 .../assignment/AssignmentTaskView.vue         |  7 +++-
 .../blocks/PlaceholderBlock.vue               | 10 +++---
 .../blocks/RichTextBlock.vue                  | 15 ++++-----
 .../mediaLibrary/MediaLibraryContentPage.vue  | 21 ++++++------
 client/src/utils/dom.ts                       | 14 ++++++++
 13 files changed, 113 insertions(+), 79 deletions(-)
 create mode 100644 client/src/components/ui/RichText.vue
 create mode 100644 client/src/utils/dom.ts

diff --git a/client/src/components/mediaLibrary/OverviewCard.vue b/client/src/components/mediaLibrary/OverviewCard.vue
index fe592f57..0edda822 100644
--- a/client/src/components/mediaLibrary/OverviewCard.vue
+++ b/client/src/components/mediaLibrary/OverviewCard.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import RichText from "@/components/ui/RichText.vue";
+
 export interface Props {
   title: string;
   description: string;
@@ -18,8 +20,7 @@ withDefaults(defineProps<Props>(), {
   <div class="flex flex-col justify-between bg-white p-8 pb-4 lg:flex-row lg:pb-8">
     <div class="mb-4 lg:mb-0">
       <h3 class="mb-4">{{ title }}</h3>
-      <!-- eslint-disable vue/no-v-html -->
-      <p class="default-wagtail-rich-text mb-4" v-html="description"></p>
+      <RichText class="mb-4" :content="description" />
       <a
         v-if="externalLink"
         :href="link"
diff --git a/client/src/components/ui/RichText.vue b/client/src/components/ui/RichText.vue
new file mode 100644
index 00000000..5e8378dd
--- /dev/null
+++ b/client/src/components/ui/RichText.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { setExternalLinksToOpenInNewTab } from "@/utils/dom";
+
+const props = withDefaults(
+  defineProps<{
+    content?: string;
+    openLinksInNewTab?: boolean;
+  }>(),
+  {
+    content: "",
+    openLinksInNewTab: false,
+  }
+);
+
+const updatedContent = computed(() => {
+  if (!props.openLinksInNewTab || !props.content) return props.content;
+
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(props.content, "text/html");
+  const anchors = doc.querySelectorAll("a");
+
+  setExternalLinksToOpenInNewTab(anchors);
+
+  return doc.body.innerHTML;
+});
+</script>
+
+<template>
+  <!-- eslint-disable vue/no-v-html -->
+  <section class="default-wagtail-rich-text" v-html="updatedContent"></section>
+</template>
diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue
index e0de6449..52e20e80 100644
--- a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue
+++ b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationSummary.vue
@@ -16,6 +16,7 @@ import { useMutation } from "@urql/vue";
 import dayjs, { Dayjs } from "dayjs";
 import * as log from "loglevel";
 import { computed, reactive } from "vue";
+import RichText from "@/components/ui/RichText.vue";
 
 const props = defineProps<{
   assignmentUser: CourseSessionUser;
@@ -188,10 +189,11 @@ const evaluationUser = computed(() => {
             </div>
           </div>
 
-          <div
-            class="default-wagtail-rich-text mb-2 font-bold"
-            v-html="task.value.description"
-          ></div>
+          <RichText
+            class="mb-2 font-bold"
+            :content="task.value.description"
+            open-links-in-new-tab
+          />
 
           <section class="mb-4">
             <div
@@ -199,12 +201,14 @@ const evaluationUser = computed(() => {
                 subTaskByPoints(task, evaluationForTask(task).points)?.value.title
               "
             ></div>
-            <p
-              class="default-wagtail-rich-text"
-              v-html="
+
+            <RichText
+              :content="
                 subTaskByPoints(task, evaluationForTask(task).points)?.value.description
               "
-            ></p>
+              open-links-in-new-tab
+            />
+
             <div class="text-sm text-gray-800">
               {{ evaluationForTask(task).points }} Punkte
             </div>
diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue
index f2c273dc..7beda376 100644
--- a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue
+++ b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationTask.vue
@@ -13,6 +13,7 @@ import { useMutation } from "@urql/vue";
 import { useDebounceFn } from "@vueuse/core";
 import * as log from "loglevel";
 import { computed } from "vue";
+import RichText from "@/components/ui/RichText.vue";
 
 const props = defineProps<{
   assignmentUser: CourseSessionUser;
@@ -114,11 +115,10 @@ const evaluateAssignmentCompletionDebounced = useDebounceFn(
           />
           <label :for="String(index)" class="ml-4 block">
             <div>{{ subTask.value.title }}</div>
-            <div
+            <RichText
               v-if="subTask.value.description"
-              class="default-wagtail-rich-text"
-              v-html="subTask.value.description"
-            ></div>
+              :content="subTask.value.description"
+            />
             <div class="text-sm text-gray-800">{{ subTask.value.points }} Punkte</div>
           </label>
         </div>
diff --git a/client/src/pages/learningPath/circlePage/CircleOverview.vue b/client/src/pages/learningPath/circlePage/CircleOverview.vue
index fe468913..b822194e 100644
--- a/client/src/pages/learningPath/circlePage/CircleOverview.vue
+++ b/client/src/pages/learningPath/circlePage/CircleOverview.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
 import type { CircleType } from "@/types";
+import RichText from "@/components/ui/RichText.vue";
 
 defineProps<{
   circle: CircleType;
@@ -14,13 +15,7 @@ const emit = defineEmits(["closemodal"]);
   <ItFullScreenModal :show="show" @closemodal="emit('closemodal')">
     <div v-if="circle" class="container-medium">
       <h2 data-cy="lc-title">{{ $t("a.Übersicht") }}: Circle «{{ circle.title }}»</h2>
-
-      <!-- eslint-disable vue/no-v-html -->
-      <div
-        v-if="circle.goals"
-        class="default-wagtail-rich-text my-4"
-        v-html="circle.goals"
-      ></div>
+      <RichText v-if="circle.goals" class="my-4" :content="circle.goals" />
     </div>
   </ItFullScreenModal>
 </template>
diff --git a/client/src/pages/learningPath/learningContentPage/LearningContentPage.vue b/client/src/pages/learningPath/learningContentPage/LearningContentPage.vue
index 9ab03bef..59e58cea 100644
--- a/client/src/pages/learningPath/learningContentPage/LearningContentPage.vue
+++ b/client/src/pages/learningPath/learningContentPage/LearningContentPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import LearningContentParent from "@/pages/learningPath/learningContentPage/LearningContentParent.vue";
 import * as log from "loglevel";
-import { computed, getCurrentInstance, onUpdated } from "vue";
+import { computed } from "vue";
 import { useCourseDataWithCompletion } from "@/composables";
 import { stringifyParse } from "@/utils/utils";
 
@@ -20,24 +20,6 @@ const learningContent = computed(() =>
 const circle = computed(() => {
   return courseData.findCircle(props.circleSlug);
 });
-
-onUpdated(() => {
-  const vueInstance = getCurrentInstance();
-  if (vueInstance) {
-    // VBV-489: open external links in new tab
-    const rootElement: HTMLElement = vueInstance.proxy?.$el;
-    const anchors = rootElement.querySelectorAll("a");
-    anchors.forEach((anchor: HTMLAnchorElement) => {
-      if (
-        /^https?:\/\//i.test(anchor.href) &&
-        !anchor.href.includes(window.location.hostname)
-      ) {
-        anchor.setAttribute("target", "_blank");
-        anchor.setAttribute("rel", "noopener noreferrer");
-      }
-    });
-  }
-});
 </script>
 
 <template>
diff --git a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue
index 1473f79e..f6c1ac16 100644
--- a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue
+++ b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue
@@ -4,6 +4,7 @@ import type { Assignment } from "@/types";
 import { useRouteQuery } from "@vueuse/router";
 import log from "loglevel";
 import dayjs from "dayjs";
+import RichText from "@/components/ui/RichText.vue";
 
 interface Props {
   assignment: Assignment;
@@ -20,12 +21,12 @@ const step = useRouteQuery("step");
 </script>
 
 <template>
-  <!-- eslint-disable vue/no-v-html -->
-  <p
+  <RichText
     v-if="props.assignment.intro_text"
-    class="default-wagtail-rich-text text-large"
-    v-html="props.assignment.intro_text"
-  ></p>
+    class="text-large"
+    :content="props.assignment.intro_text"
+    open-links-in-new-tab
+  />
 
   <h3 class="mb-4 mt-8">{{ $t("assignment.taskDefinitionTitle") }}</h3>
   <p class="text-large">
@@ -74,11 +75,12 @@ const step = useRouteQuery("step");
     "
   >
     <h3 class="mb-4 mt-8">{{ $t("a.Bewertung") }}</h3>
-    <p
+    <RichText
       v-if="props.assignment.evaluation_description"
-      class="default-wagtail-rich-text text-large"
-      v-html="props.assignment.evaluation_description"
-    ></p>
+      class="text-large"
+      :content="props.assignment.evaluation_description"
+      open-links-in-new-tab
+    />
     <p v-if="props.assignment.evaluation_document_url">
       <a
         :href="props.assignment.evaluation_document_url"
diff --git a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionResponses.vue b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionResponses.vue
index da9fc215..33ba611b 100644
--- a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionResponses.vue
+++ b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionResponses.vue
@@ -6,6 +6,7 @@ import type {
   AssignmentTaskCompletionData,
   UserDataText,
 } from "@/types";
+import RichText from "@/components/ui/RichText.vue";
 
 const props = defineProps<{
   assignment: Assignment;
@@ -19,7 +20,6 @@ const emit = defineEmits<{
 }>();
 </script>
 <template>
-  <!-- eslint-disable vue/no-v-html -->
   <div
     v-for="task in props.assignment.tasks ?? []"
     :key="task.id"
@@ -36,10 +36,11 @@ const emit = defineEmits<{
       </button>
     </div>
     <div v-for="taskBlock in task.value.content" :key="taskBlock.id">
-      <p
-        class="default-wagtail-rich-text pt-6 text-base font-bold"
-        v-html="taskBlock.value.text"
-      ></p>
+      <RichText
+        class="pt-6 text-base font-bold"
+        :content="taskBlock.value.text"
+        open-links-in-new-tab
+      />
       <p
         v-if="
           props.assignmentCompletionData &&
diff --git a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentTaskView.vue b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentTaskView.vue
index 37108815..6dbf6537 100644
--- a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentTaskView.vue
+++ b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentTaskView.vue
@@ -16,6 +16,7 @@ import { useDebounceFn } from "@vueuse/core";
 import log from "loglevel";
 import { computed, reactive } from "vue";
 import AttachmentSection from "@/pages/learningPath/learningContentPage/assignment/AttachmentSection.vue";
+import RichText from "@/components/ui/RichText.vue";
 
 const props = defineProps<{
   assignmentId: string;
@@ -123,7 +124,11 @@ const taskFileInfo = computed(() => {
   <div class="flex flex-col space-y-10">
     <div v-for="(block, index) in props.task.value.content" :key="block.id">
       <div v-if="block.type === 'explanation'">
-        <p class="default-wagtail-rich-text text-large" v-html="block.value.text"></p>
+        <RichText
+          class="text-large"
+          :content="block.value.text"
+          open-links-in-new-tab
+        />
       </div>
 
       <div v-if="block.type === 'user_confirmation'">
diff --git a/client/src/pages/learningPath/learningContentPage/blocks/PlaceholderBlock.vue b/client/src/pages/learningPath/learningContentPage/blocks/PlaceholderBlock.vue
index 42c9a121..bf8e7afb 100644
--- a/client/src/pages/learningPath/learningContentPage/blocks/PlaceholderBlock.vue
+++ b/client/src/pages/learningPath/learningContentPage/blocks/PlaceholderBlock.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import LearningContentSimpleLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue";
 import type { LearningContent } from "@/types";
+import RichText from "@/components/ui/RichText.vue";
 
 const props = defineProps<{
   content: LearningContent;
@@ -12,13 +13,12 @@ const props = defineProps<{
     :title="props.content.title"
     :learning-content="props.content"
   >
-    <!-- eslint-disable vue/no-v-html -->
     <div class="container-medium">
-      <p
+      <RichText
         v-if="props.content.description"
-        class="default-wagtail-rich-text my-4"
-        v-html="props.content.description"
-      ></p>
+        class="my-4"
+        :content="props.content.description"
+      />
     </div>
   </LearningContentSimpleLayout>
 </template>
diff --git a/client/src/pages/learningPath/learningContentPage/blocks/RichTextBlock.vue b/client/src/pages/learningPath/learningContentPage/blocks/RichTextBlock.vue
index 1e796cf2..a9f71691 100644
--- a/client/src/pages/learningPath/learningContentPage/blocks/RichTextBlock.vue
+++ b/client/src/pages/learningPath/learningContentPage/blocks/RichTextBlock.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import LearningContentSimpleLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue";
 import type { LearningContentRichText } from "@/types";
+import RichText from "@/components/ui/RichText.vue";
 
 const props = defineProps<{
   content: LearningContentRichText;
@@ -14,17 +15,13 @@ const props = defineProps<{
   >
     <!-- eslint-disable vue/no-v-html -->
     <div class="container-medium">
-      <p
+      <RichText
         v-if="props.content.description"
-        class="default-wagtail-rich-text my-4"
-        v-html="props.content.description"
-      ></p>
+        class="my-4"
+        :content="props.content.description"
+      />
 
-      <div
-        v-if="props.content.text"
-        class="default-wagtail-rich-text my-4"
-        v-html="props.content.text"
-      ></div>
+      <RichText v-if="props.content.text" class="my-4" :content="props.content.text" />
     </div>
   </LearningContentSimpleLayout>
 </template>
diff --git a/client/src/pages/mediaLibrary/MediaLibraryContentPage.vue b/client/src/pages/mediaLibrary/MediaLibraryContentPage.vue
index d94e9401..d7d182ee 100644
--- a/client/src/pages/mediaLibrary/MediaLibraryContentPage.vue
+++ b/client/src/pages/mediaLibrary/MediaLibraryContentPage.vue
@@ -3,6 +3,7 @@ import { useMediaLibraryStore } from "@/stores/mediaLibrary";
 import * as log from "loglevel";
 import { computed } from "vue";
 import type { MediaLibraryCategoryPage, MediaLibraryContentPage } from "@/types";
+import RichText from "@/components/ui/RichText.vue";
 
 const props = defineProps<{
   categorySlug: string;
@@ -47,11 +48,11 @@ const mediaCategory = computed(() => {
         <div class="flex justify-between md:flex-col lg:flex-row">
           <div class="lg:w-6/12">
             <h1 class="mb-4 lg:mb-8" data-cy="hf-title">{{ mediaCategory.title }}</h1>
-            <!-- eslint-disable vue/no-v-html -->
-            <p
-              class="default-wagtail-rich-text text-large"
-              v-html="mediaCategory.description"
-            ></p>
+            <RichText
+              class="text-large"
+              :content="mediaCategory.description"
+              open-links-in-new-tab
+            ></RichText>
           </div>
           <div>
             <img
@@ -64,11 +65,11 @@ const mediaCategory = computed(() => {
       </div>
     </div>
     <div class="container-large">
-      <!-- eslint-disable vue/no-v-html -->
-      <section
-        class="default-wagtail-rich-text mb-20 mt-8 lg:w-2/3"
-        v-html="mediaCategory.body"
-      ></section>
+      <RichText
+        class="mb-20 mt-8 lg:w-2/3"
+        :content="mediaCategory.body"
+        open-links-in-new-tab
+      />
     </div>
   </div>
 </template>
diff --git a/client/src/utils/dom.ts b/client/src/utils/dom.ts
new file mode 100644
index 00000000..0d61d171
--- /dev/null
+++ b/client/src/utils/dom.ts
@@ -0,0 +1,14 @@
+export const setExternalLinksToOpenInNewTab = (
+  anchors: NodeListOf<HTMLAnchorElement>
+) => {
+  const httpRegex = /^https?:\/\//i;
+  anchors.forEach((anchor: HTMLAnchorElement) => {
+    if (
+      httpRegex.test(anchor.href) &&
+      !anchor.href.includes(window.location.hostname)
+    ) {
+      anchor.setAttribute("target", "_blank");
+      anchor.setAttribute("rel", "noopener noreferrer");
+    }
+  });
+};