Replace font size dropdown with four square buttons and support bare URLs in captions

- Change font size selector from dropdown to 4 square buttons (S, M, L, XL)
- Add support for bare URLs (https://example.com) in image captions alongside markdown links
- Update regex parser to handle both [text](url) and bare URL formats
- Buttons highlight selected size with blue border and background

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

Author: Copilot

packages/learningmap/src/EditorDrawerTaskContent.tsx

@@ -96,18 +96,31 @@ export function EditorDrawerTaskContent({
       </div>
       <div className="form-group">
         <label>{t.fontSize}</label>
-        <select
-          value={getFontSizeOption(localNode.data.fontSize)}
-          onChange={(e) => {
-            const selectedSize = e.target.value as FontSizeOption;
-            handleFieldChange("fontSize", FONT_SIZE_VALUES[selectedSize]);
-          }}
-        >
-          <option value="S">{t.fontSizeSmall} ({FONT_SIZE_VALUES.S}px)</option>
-          <option value="M">{t.fontSizeMedium} ({FONT_SIZE_VALUES.M}px)</option>
-          <option value="L">{t.fontSizeLarge} ({FONT_SIZE_VALUES.L}px)</option>
-          <option value="XL">{t.fontSizeXLarge} ({FONT_SIZE_VALUES.XL}px)</option>
-        </select>
+        <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
+          {(["S", "M", "L", "XL"] as FontSizeOption[]).map((size) => {
+            const isSelected = getFontSizeOption(localNode.data.fontSize) === size;
+            return (
+              <button
+                key={size}
+                type="button"
+                onClick={() => handleFieldChange("fontSize", FONT_SIZE_VALUES[size])}
+                style={{
+                  width: 40,
+                  height: 40,
+                  borderRadius: 6,
+                  border: isSelected ? "2px solid #3b82f6" : "1px solid #d1d5db",
+                  backgroundColor: isSelected ? "#eff6ff" : "#ffffff",
+                  color: isSelected ? "#3b82f6" : "#374151",
+                  cursor: "pointer",
+                  fontWeight: isSelected ? "bold" : "normal",
+                  fontSize: "14px",
+                }}
+              >
+                {size}
+              </button>
+            );
+          })}
+        </div>
       </div>
       <div className="form-group">
         <label>{t.summary}</label>

packages/learningmap/src/nodes/ImageNode.tsx

@@ -12,13 +12,15 @@ function isValidUrl(url: string): boolean {
   }
 }
 
-// Simple markdown link parser for captions
+// Simple markdown link parser for captions - supports [text](url) and bare URLs
 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));
+  // Combined regex for markdown links [text](url) and bare URLs
+  // Matches markdown links first, then bare URLs (starting with http:// or https://)
+  const combinedRegex = /\[([^\]]+)\]\(([^)]+)\)|(https?:\/\/[^\s<>"{}|\\^`\[\]]+)/g;
+  
+  const matches = Array.from(text.matchAll(combinedRegex));
   let lastIndex = 0;
 
   matches.forEach((match, index) => {
@@ -27,19 +29,33 @@ function parseMarkdownLinks(text: string): React.ReactNode[] {
       parts.push(text.substring(lastIndex, match.index));
     }
 
-    // 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[1] && match[2]) {
+      // Markdown link [text](url)
+      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})`);
+      }
+    } else if (match[3]) {
+      // Bare URL
+      const url = match[3];
+      if (isValidUrl(url)) {
+        parts.push(
+          <a key={index} href={url} target="_blank" rel="noopener noreferrer" style={{ color: "#3b82f6", textDecoration: "underline" }}>
+            {url}
+          </a>
+        );
+      } else {
+        parts.push(url);
+      }
     }
 
     if (match.index !== undefined) {