made nested bookstack links open in new tab

ui/src/components/application/ApplicationForm.vue

@@ -13,7 +13,7 @@ import Input from '@/components/ui/input/Input.vue';
 import Textarea from '@/components/ui/textarea/Textarea.vue';
 import { toTypedSchema } from '@vee-validate/zod';
 import { Form } from 'vee-validate';
-import { nextTick, onMounted, ref } from 'vue';
+import { nextTick, onMounted, ref, watch } from 'vue';
 import * as z from 'zod';
 import DateInput from '../form/DateInput.vue';
 import { ApplicationData } from '@shared/types/application';
@@ -90,14 +90,24 @@ const CoCString = ref<string>();
 
 async function onDialogToggle(state: boolean) {
   showCoC.value = state;
+}
 
-  if (state) {
-    await nextTick();
-    if (CoCbox.value && CoCString.value) {
-      CoCbox.value.innerHTML = CoCString.value;
-    }
+function enforceExternalLinks() {
+  if (!CoCbox.value) return;
+
+  const links = CoCbox.value.querySelectorAll("a");
+  links.forEach(a => {
+    a.setAttribute("target", "_blank");
+    a.setAttribute("rel", "noopener noreferrer");
+  });
 }
+
+watch(() => showCoC.value, async () => {
+  if (showCoC) {
+    await nextTick(); // wait for v-html to update
+    enforceExternalLinks();
   }
+});
 
 </script>
 
@@ -317,8 +327,8 @@ async function onDialogToggle(state: boolean) {
       <DialogContent class="sm:max-w-fit">
         <DialogHeader>
           <DialogTitle>Community Code of Conduct</DialogTitle>
-          <DialogDescription class="w-full max-h-[75vh]">
-            <div v-html="CoCString" class="bookstack-container w-full"></div>
+          <DialogDescription class="w-full max-h-[75vh] overflow-y-auto scrollbar-themed">
+            <div v-html="CoCString" ref="CoCbox" class="bookstack-container w-full"></div>
           </DialogDescription>
         </DialogHeader>
       </DialogContent>