Feature/text with links

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
 

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));
       },
     },

src/components/KpiDetails.vue

@@ -13,7 +13,11 @@
           {{ $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 +59,7 @@ export default {
   components: {
     PktButton,
     ProgressModal: () => import('@/components/modals/KPIProgressModal.vue'),
+    HTMLOutput: () => import('@/components/HTMLOutput.vue'),
     WidgetKpiProgressGraph,
     WidgetKpiProgressHistory,
     WidgetKpiProgressStats,

src/views/KeyResultHome.vue

@@ -16,9 +16,10 @@
             />
           </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 +145,7 @@ export default {
     PktButton,
     KeyResultDrawer: () => import('@/components/drawers/EditKeyResult.vue'),
     ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),
+    HTMLOutput: () => import('@/components/HTMLOutput.vue'),
   },
 
   beforeRouteUpdate: routerGuard,

src/views/ObjectiveHome.vue

@@ -20,9 +20,10 @@
           </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 +94,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 +107,7 @@ export default {
     WidgetObjectiveDetails,
     ProgressionChart,
     PktButton,
+    HTMLOutput,
     ObjectiveDrawer: () => import('@/components/drawers/EditObjective.vue'),
     KeyResultDrawer: () => import('@/components/drawers/EditKeyResult.vue'),
     ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),