From 8dc11ee34dedd32bbfd97fdfa6219618c3f8961c Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Fri, 12 Dec 2025 11:06:00 -0500
Subject: [PATCH] made nested bookstack links open in new tab

---
 .../application/ApplicationForm.vue           | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/application/ApplicationForm.vue b/ui/src/components/application/ApplicationForm.vue
index 927d870..5ad43b9 100644
--- a/ui/src/components/application/ApplicationForm.vue
+++ b/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,15 +90,25 @@ 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>
 
 <template>
@@ -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>