Add markup logic for clickable links etc.

oslokommune · Aug 29, 2023 · add3c21 · add3c21
1 parent e156f46
commit add3c21
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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'),