feat: render field descriptions as sanitized HTML (#38)

* feat: render field descriptions as sanitized HTML

Replace the manual HTML-escaping + mini-markdown parser in FieldHelpText
with DOMPurify sanitization so admins can write raw HTML in field
descriptions. Only safe tags (a, p, br, strong, em, ul, ol, li, span,
code) and attributes (href, target, rel) are allowed. All links are
forced to target="_blank" with rel="noopener noreferrer".

Adds the field-description-html CSS class and Tailwind styles for links
and block-level element spacing (paragraphs, lists).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: use dedicated DOMPurify instance to avoid global side effects

Create a separate DOMPurify instance for FieldHelpText so the
afterSanitizeAttributes hook doesn't affect other DOMPurify consumers
(e.g. TeamRosterView).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>

Author: 3 people

modules/team-tracker/client/components/FieldDefinitionManager.vue

@@ -255,7 +255,7 @@ async function toggleVisibility(field) {
                   v-model="editHelpText"
                   rows="2"
                   class="block w-full rounded border-gray-300 dark:border-gray-600 shadow-sm text-xs bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
-                  placeholder="Help text (optional) — supports **bold** and [links](https://...)"
+                  placeholder="Help text (optional) — supports HTML (e.g., <a href=&quot;...&quot;>links</a>, <strong>bold</strong>)"
                   @keyup.escape="editingFieldId = null"
                 ></textarea>
               </div>
@@ -340,7 +340,7 @@ async function toggleVisibility(field) {
               v-model="newFieldHelpText"
               rows="2"
               class="block w-full rounded border-gray-300 shadow-sm text-sm focus:ring-primary-500 focus:border-primary-500"
-              placeholder="Guidance shown to users when filling in this field. Supports **bold** and [links](https://...)."
+              placeholder="Guidance shown to users when filling in this field. Supports HTML (e.g., <a href=&quot;...&quot;>links</a>, <strong>bold</strong>)."
             ></textarea>
           </div>
           <!-- Allowed values for constrained type -->

modules/team-tracker/client/components/FieldHelpText.vue

@@ -1,5 +1,14 @@
 <script setup>
 import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
+import DOMPurify from 'dompurify'
+
+const purify = DOMPurify(window)
+purify.addHook('afterSanitizeAttributes', (node) => {
+  if (node.tagName === 'A') {
+    node.setAttribute('target', '_blank')
+    node.setAttribute('rel', 'noopener noreferrer')
+  }
+})
 
 const props = defineProps({
   text: { type: String, default: null },
@@ -15,27 +24,12 @@ const sizeClasses = computed(() =>
   props.size === 'xs' ? 'h-3 w-3' : 'h-3.5 w-3.5'
 )
 
-/**
- * Render a minimal inline-markdown subset to HTML:
- *   **bold** -> <strong>
- *   [text](url) -> <a>
- * Escapes HTML entities first to prevent XSS.
- */
 const renderedHtml = computed(() => {
   if (!props.text) return ''
-  let s = props.text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-
-  // **bold**
-  s = s.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-  // [text](url) — only allow http(s) URLs
-  s = s.replace(/\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" class="text-primary-600 dark:text-primary-400 underline">$1</a>')
-  // Newlines to <br>
-  s = s.replace(/\n/g, '<br>')
-  return s
+  return purify.sanitize(props.text, {
+    ALLOWED_TAGS: ['a', 'p', 'br', 'strong', 'em', 'ul', 'ol', 'li', 'span', 'code'],
+    ALLOWED_ATTR: ['href', 'target', 'rel']
+  })
 })
 
 function updatePosition() {
@@ -90,7 +84,7 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside, true))
         class="fixed z-[100] max-w-xs w-72 p-3 text-sm text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg"
         :style="{ top: popoverPos.top + 'px', left: popoverPos.left + 'px' }"
       >
-        <div v-html="renderedHtml" class="leading-relaxed [&_strong]:font-semibold"></div>
+        <div v-html="renderedHtml" class="field-description-html leading-relaxed [&_strong]:font-semibold [&_a]:text-primary-600 dark:[&_a]:text-primary-400 [&_a]:underline [&_a:hover]:text-primary-700 dark:[&_a:hover]:text-primary-300 [&_p]:mt-2 [&_p:first-child]:mt-0 [&_ul]:mt-2 [&_ul]:ml-4 [&_ul]:list-disc [&_ol]:mt-2 [&_ol]:ml-4 [&_ol]:list-decimal [&_li]:mt-1"></div>
       </div>
     </Teleport>
   </span>