Address code review feedback: improve security and code quality

- Extract font size mapping logic to avoid duplication
- Use matchAll instead of exec for regex parsing
- Add URL validation to prevent XSS attacks in image captions

Co-authored-by: mikebarkmin <2592379+mikebarkmin@users.noreply.github.com>

Author: Copilot

packages/learningmap/src/fontSizes.ts

@@ -11,13 +11,18 @@ export const FONT_SIZE_VALUES: Record<FontSizeOption, number> = {
 
 export const DEFAULT_FONT_SIZE: FontSizeOption = "M";
 
+// Helper function to map numeric value to closest font size option
+function mapNumericToOption(value: number): FontSizeOption {
+  if (value <= 10) return "S";
+  if (value <= 14) return "M";
+  if (value <= 18) return "L";
+  return "XL";
+}
+
 export function getFontSizeValue(size?: number | FontSizeOption): number {
   if (typeof size === "number") {
     // Convert old numeric values to closest size
-    if (size <= 10) return FONT_SIZE_VALUES.S;
-    if (size <= 14) return FONT_SIZE_VALUES.M;
-    if (size <= 18) return FONT_SIZE_VALUES.L;
-    return FONT_SIZE_VALUES.XL;
+    return FONT_SIZE_VALUES[mapNumericToOption(size)];
   }
   if (size && size in FONT_SIZE_VALUES) {
     return FONT_SIZE_VALUES[size as FontSizeOption];
@@ -27,9 +32,5 @@ export function getFontSizeValue(size?: number | FontSizeOption): number {
 
 export function getFontSizeOption(value?: number): FontSizeOption {
   if (!value) return DEFAULT_FONT_SIZE;
-  // Find closest match
-  if (value <= 10) return "S";
-  if (value <= 14) return "M";
-  if (value <= 18) return "L";
-  return "XL";
+  return mapNumericToOption(value);
 }

packages/learningmap/src/nodes/ImageNode.tsx

@@ -1,26 +1,51 @@
 import { Node, NodeResizer } from "@xyflow/react";
 import { ImageNodeData } from "../types";
 
+// Validate URL to prevent XSS attacks
+function isValidUrl(url: string): boolean {
+  try {
+    const parsedUrl = new URL(url);
+    // Only allow http, https, and mailto protocols
+    return ['http:', 'https:', 'mailto:'].includes(parsedUrl.protocol);
+  } catch {
+    return false;
+  }
+}
+
 // Simple markdown link parser for captions
 function parseMarkdownLinks(text: string): React.ReactNode[] {
   const parts: React.ReactNode[] = [];
   const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+  
+  // Use matchAll instead of exec to avoid potential infinite loops
+  const matches = Array.from(text.matchAll(linkRegex));
   let lastIndex = 0;
-  let match;
 
-  while ((match = linkRegex.exec(text)) !== null) {
+  matches.forEach((match, index) => {
     // Add text before the link
-    if (match.index > lastIndex) {
+    if (match.index !== undefined && match.index > lastIndex) {
       parts.push(text.substring(lastIndex, match.index));
     }
-    // Add the link
-    parts.push(
-      <a key={match.index} href={match[2]} target="_blank" rel="noopener noreferrer" style={{ color: "#3b82f6", textDecoration: "underline" }}>
-        {match[1]}
-      </a>
-    );
-    lastIndex = match.index + match[0].length;
-  }
+    
+    // Add the link only if URL is valid
+    const linkText = match[1];
+    const linkUrl = match[2];
+    
+    if (isValidUrl(linkUrl)) {
+      parts.push(
+        <a key={index} href={linkUrl} target="_blank" rel="noopener noreferrer" style={{ color: "#3b82f6", textDecoration: "underline" }}>
+          {linkText}
+        </a>
+      );
+    } else {
+      // If URL is invalid, just show the text
+      parts.push(`[${linkText}](${linkUrl})`);
+    }
+    
+    if (match.index !== undefined) {
+      lastIndex = match.index + match[0].length;
+    }
+  });
 
   // Add remaining text
   if (lastIndex < text.length) {