Add Support Text Link

package.json

@@ -28,6 +28,7 @@
   "license": "MIT",
   "dependencies": {
     "@cfaester/enzyme-adapter-react-18": "^0.8.0",
+    "autolinker": "^4.1.5",
     "bcryptjs": "^2.4.3",
     "bluebird": "^3.7.2",
     "cors": "^2.8.5",

src/Components/LinkifiedText/LinkifiedText.js

@@ -0,0 +1,67 @@
+import Autolinker from 'autolinker';
+
+/**
+ * Component that automatically converts URLs and email addresses in text into clickable links.
+ * Uses Autolinker.js for robust parsing (handles trailing punctuation, etc.).
+ *
+ * @param {Object} props
+ * @param {string} props.children The text content to linkify.
+ */
+export default function LinkifiedText({ children }) {
+  if (typeof children !== 'string') {
+    return <>{children}</>;
+  }
+
+  const matches = Autolinker.parse(children, {
+    urls: true,
+    email: true,
+  });
+
+  if (matches.length === 0) {
+    return <>{children}</>;
+  }
+
+  const elements = [];
+  let lastIndex = 0;
+
+  matches.forEach((match, index) => {
+    const offset = match.getOffset();
+    const matchedText = match.getMatchedText();
+
+    // Add text before the match
+    if (offset > lastIndex) {
+      elements.push(children.substring(lastIndex, offset));
+    }
+
+    const type = match.getType();
+    const url = type === 'url' ? match.getUrl() : `mailto:${match.getEmail()}`;
+
+    // Truncate display text if it's too long (> 50 chars)
+    const displayText = matchedText.length > 50
+      ? `${matchedText.substring(0, 50)}...`
+      : matchedText;
+
+    elements.push(
+      <a
+        key={`link-${index}`}
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-blue-400 hover:text-blue-300 underline underline-offset-2 break-all"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {displayText}
+      </a>
+    );
+
+    lastIndex = offset + matchedText.length;
+  });
+
+  // Add remaining text
+  if (lastIndex < children.length) {
+    elements.push(children.substring(lastIndex));
+  }
+
+  return <>{elements}</>;
+}
+

src/Pages/Events/Calendar/EventPopup.js

@@ -21,6 +21,7 @@ import {
   getRegistrationCta,
   pillColors,
 } from './calendarUtils';
+import LinkifiedText from '../../../Components/LinkifiedText/LinkifiedText';
 
 export function EventPopup({ event, onClose, isAdminView, user }) {
   const popupRef = useRef(null);
@@ -215,7 +216,7 @@ export function EventPopup({ event, onClose, isAdminView, user }) {
 
           {event.description && (
             <p className="pt-1 text-sm leading-relaxed text-slate-300">
-              {event.description}
+              <LinkifiedText>{event.description}</LinkifiedText>
             </p>
           )}
         </div>

src/Pages/Events/EventAttendeesDashboard.js

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { Link, Redirect, useParams } from 'react-router-dom';
 import { getEventByID, getEventRegistrationByRequestId, getEventRegistrations } from '../../APIFunctions/SCEvents';
 import { useSCE } from '../../Components/context/SceContext';
+import LinkifiedText from '../../Components/LinkifiedText/LinkifiedText';
 
 function formatDateTime(dateValue) {
   if (!dateValue) return 'N/A';
@@ -20,10 +21,10 @@ function SummaryCard({ label, value }) {
 }
 
 function AnswerValue({ value }) {
-  if (Array.isArray(value)) return <span>{value.join(', ') || 'N/A'}</span>;
+  if (Array.isArray(value)) return <span><LinkifiedText>{value.join(', ') || 'N/A'}</LinkifiedText></span>;
   if (value === null || value === undefined || value === '') return <span>N/A</span>;
-  if (typeof value === 'object') return <span>{JSON.stringify(value)}</span>;
-  return <span>{String(value)}</span>;
+  if (typeof value === 'object') return <span><LinkifiedText>{JSON.stringify(value)}</LinkifiedText></span>;
+  return <span><LinkifiedText>{String(value)}</LinkifiedText></span>;
 }
 
 export default function EventAttendeesDashboard() {