add vue-3-sanitize and linkifyjs to allow safe link formatting in notes

fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutNotes.vue

@@ -3,30 +3,31 @@
     <Card>
       <template #title>{{ $t('workouts.NOTES') }}</template>
       <template #content>
-        {{ notes && notes !== '' ? notes : $t('workouts.NO_NOTES') }}
+        <span v-html="notes !== '' ? $sanitize(linkifyStr(notes, { target: '_blank' })) : $t('workouts.NO_NOTES')" />
       </template>
     </Card>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { toRefs, withDefaults } from 'vue'
+import linkifyStr from 'linkify-string'
+import { toRefs, withDefaults } from 'vue'
 
-  interface Props {
-    notes?: string | null
-  }
-  const props = withDefaults(defineProps<Props>(), {
-    notes: () => null,
-  })
+interface Props {
+  notes?: string | null
+}
+const props = withDefaults(defineProps<Props>(), {
+  notes: () => null,
+})
 
-  const { notes } = toRefs(props)
+const { notes } = toRefs(props)
 </script>
 
 <style lang="scss" scoped>
-  #workout-note {
-    ::v-deep(.card-content) {
-      font-style: italic;
-      white-space: pre-wrap;
-    }
+#workout-note {
+  ::v-deep(.card-content) {
+    font-style: italic;
+    white-space: pre-wrap;
   }
+}
 </style>

fittrackee_client/src/main.ts

@@ -14,6 +14,7 @@ import {
 } from 'chart.js'
 import ChartDataLabels from 'chartjs-plugin-datalabels'
 import { createApp } from 'vue'
+import Vue3Sanitize from "vue-3-sanitize"
 import VueFullscreen from 'vue-fullscreen'
 
 import './registerServiceWorker'
@@ -47,6 +48,7 @@ const app = createApp(App)
   .use(store)
   .use(router)
   .use(VueFullscreen, { name: 'VFullscreen' })
+  .use(Vue3Sanitize, { allowedTags: ['a'] })
   .directive('click-outside', clickOutsideDirective)
 
 customComponents.forEach((component) => {

fittrackee_client/src/vue-3-sanitize.d.ts

@@ -0,0 +1 @@
+declare module 'vue-3-sanitize';