From f82cd963c0379fa8cfdc74c2c110a5b1f50be229 Mon Sep 17 00:00:00 2001
From: "Anne M. P" <annemerete.pettersen@origo.oslo.kommune.no>
Date: Tue, 29 Aug 2023 11:39:36 +0200
Subject: [PATCH 1/3] Add markup logic for clickable links etc.

---
 src/components/HTMLOutput.vue | 6 ++++++
 src/components/KpiDetails.vue | 3 ++-
 src/views/KeyResultHome.vue   | 5 ++---
 src/views/ObjectiveHome.vue   | 6 +++---
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/HTMLOutput.vue b/src/components/HTMLOutput.vue
index 0c3bdf07d..ee94f023b 100644
--- a/src/components/HTMLOutput.vue
+++ b/src/components/HTMLOutput.vue
@@ -25,6 +25,12 @@ export default {
       deep: true,
       immediate: true,
       async handler(html) {
+        dompurify.addHook('afterSanitizeAttributes', function (node) {
+          // set all elements owning target to target=_blank
+          if ('target' in node) {
+            node.setAttribute('target', '_blank');
+          }
+        });
         this.sanitizedHtml = await dompurify.sanitize(marked(html));
       },
     },
diff --git a/src/components/KpiDetails.vue b/src/components/KpiDetails.vue
index 46e74f270..6c0176668 100644
--- a/src/components/KpiDetails.vue
+++ b/src/components/KpiDetails.vue
@@ -13,7 +13,7 @@
           {{ $t('kpi.newValue') }}
         </pkt-button>
       </div>
-      <p v-if="kpi.description" class="pkt-txt-14-light">{{ kpi.description }}</p>
+      <HTML-output v-if="kpi.description" class="pkt-txt-14-light" :html="kpi.description" />
     </header>
 
     <widget-kpi-progress-graph :kpi="kpi" :progress="progress" :goals="goals" />
@@ -55,6 +55,7 @@ export default {
   components: {
     PktButton,
     ProgressModal: () => import('@/components/modals/KPIProgressModal.vue'),
+    HTMLOutput: () => import('@/components/HTMLOutput.vue'),
     WidgetKpiProgressGraph,
     WidgetKpiProgressHistory,
     WidgetKpiProgressStats,
diff --git a/src/views/KeyResultHome.vue b/src/views/KeyResultHome.vue
index dbb3f7996..05258c86d 100644
--- a/src/views/KeyResultHome.vue
+++ b/src/views/KeyResultHome.vue
@@ -16,9 +16,7 @@
             />
           </div>
         </div>
-        <p v-if="activeKeyResult.description" class="description">
-          {{ activeKeyResult.description }}
-        </p>
+        <HTML-output v-if="activeKeyResult.description" :html="activeKeyResult.description" />
       </header>
 
       <archived-restore
@@ -144,6 +142,7 @@ export default {
     PktButton,
     KeyResultDrawer: () => import('@/components/drawers/EditKeyResult.vue'),
     ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),
+    HTMLOutput: () => import('@/components/HTMLOutput.vue'),
   },
 
   beforeRouteUpdate: routerGuard,
diff --git a/src/views/ObjectiveHome.vue b/src/views/ObjectiveHome.vue
index 04599b30e..9c0b61033 100644
--- a/src/views/ObjectiveHome.vue
+++ b/src/views/ObjectiveHome.vue
@@ -20,9 +20,7 @@
           </div>
         </div>
         <div class="objective__description">
-          <p v-if="activeObjective.description" class="description">
-            {{ activeObjective.description }}
-          </p>
+          <HTML-output v-if="activeObjective.description" :html="activeObjective.description" />
           <div
             v-if="hasEditRights && !activeObjective.archived"
             data-mode="dark"
@@ -93,6 +91,7 @@ import WidgetObjectiveDetails from '@/components/widgets/WidgetObjectiveDetails.
 import WidgetWeights from '@/components/widgets/WidgetWeights.vue';
 import ProgressionChart from '@/components/ProgressionChart.vue';
 import { PktButton } from '@oslokommune/punkt-vue2';
+import HTMLOutput from '@/components/HTMLOutput.vue';
 
 export default {
   name: 'ObjectiveHome',
@@ -105,6 +104,7 @@ export default {
     WidgetObjectiveDetails,
     ProgressionChart,
     PktButton,
+    HTMLOutput,
     ObjectiveDrawer: () => import('@/components/drawers/EditObjective.vue'),
     KeyResultDrawer: () => import('@/components/drawers/EditKeyResult.vue'),
     ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),

From 028613b8bf4c088c1318e097cbaaad648d38c730 Mon Sep 17 00:00:00 2001
From: "Anne M. P" <annemerete.pettersen@origo.oslo.kommune.no>
Date: Tue, 29 Aug 2023 13:08:46 +0200
Subject: [PATCH 2/3] Linting

---
 src/components/KpiDetails.vue | 6 +++++-
 src/views/KeyResultHome.vue   | 5 ++++-
 src/views/ObjectiveHome.vue   | 5 ++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/KpiDetails.vue b/src/components/KpiDetails.vue
index 6c0176668..ee6e4be6d 100644
--- a/src/components/KpiDetails.vue
+++ b/src/components/KpiDetails.vue
@@ -13,7 +13,11 @@
           {{ $t('kpi.newValue') }}
         </pkt-button>
       </div>
-      <HTML-output v-if="kpi.description" class="pkt-txt-14-light" :html="kpi.description" />
+      <HTML-output
+        v-if="kpi.description"
+        class="pkt-txt-14-light"
+        :html="kpi.description"
+      />
     </header>
 
     <widget-kpi-progress-graph :kpi="kpi" :progress="progress" :goals="goals" />
diff --git a/src/views/KeyResultHome.vue b/src/views/KeyResultHome.vue
index 05258c86d..7c7c1a77e 100644
--- a/src/views/KeyResultHome.vue
+++ b/src/views/KeyResultHome.vue
@@ -16,7 +16,10 @@
             />
           </div>
         </div>
-        <HTML-output v-if="activeKeyResult.description" :html="activeKeyResult.description" />
+        <HTML-output
+          v-if="activeKeyResult.description"
+          :html="activeKeyResult.description"
+        />
       </header>
 
       <archived-restore
diff --git a/src/views/ObjectiveHome.vue b/src/views/ObjectiveHome.vue
index 9c0b61033..bf47ebd79 100644
--- a/src/views/ObjectiveHome.vue
+++ b/src/views/ObjectiveHome.vue
@@ -20,7 +20,10 @@
           </div>
         </div>
         <div class="objective__description">
-          <HTML-output v-if="activeObjective.description" :html="activeObjective.description" />
+          <HTML-output
+            v-if="activeObjective.description"
+            :html="activeObjective.description"
+          />
           <div
             v-if="hasEditRights && !activeObjective.archived"
             data-mode="dark"

From aa5f08a7b39c58563f253a668fa26b510f6c5efb Mon Sep 17 00:00:00 2001
From: "Anne M. P" <annemerete.pettersen@origo.oslo.kommune.no>
Date: Tue, 5 Sep 2023 15:53:23 +0200
Subject: [PATCH 3/3] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ce3b887d0..6ef04d10d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ All notable changes to this project will be documented in this file. The format
 
 - Organization, department and product details are now edited from within the
   current item's about page.
+- Made links clickable in the description of objects, key results and goals.
 
 ## [3.9.0] 2023-09-01