From 9c2344afd9f3314f8b2ca389f58dca9e3f2e2973 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Wed, 25 Feb 2026 02:52:29 +0100
Subject: [PATCH] fix: render markdown links as <a> tags and convert newlines
 to <br> in Lexical text nodes

---
 components/PayloadRichText.tsx | 46 ++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/components/PayloadRichText.tsx b/components/PayloadRichText.tsx
index 9e4dabb8..70f50e4b 100644
--- a/components/PayloadRichText.tsx
+++ b/components/PayloadRichText.tsx
@@ -45,6 +45,52 @@ const jsxConverters: JSXConverters = {
       );
     }
 
+    // Handle markdown-style links [text](url) from MDX migration
+    if (text && /\[([^\]]+)\]\(([^)]+)\)/.test(text)) {
+      const parts: React.ReactNode[] = [];
+      const remaining = text;
+      let key = 0;
+      const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+      let match;
+      let lastIndex = 0;
+      while ((match = linkRegex.exec(remaining)) !== null) {
+        if (match.index > lastIndex) {
+          parts.push(<span key={key++}>{remaining.slice(lastIndex, match.index)}</span>);
+        }
+        parts.push(
+          <a
+            key={key++}
+            href={match[2]}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary underline decoration-primary/30 hover:decoration-primary transition-colors"
+          >
+            {match[1]}
+          </a>,
+        );
+        lastIndex = match.index + match[0].length;
+      }
+      if (lastIndex < remaining.length) {
+        parts.push(<span key={key++}>{remaining.slice(lastIndex)}</span>);
+      }
+      return <>{parts}</>;
+    }
+
+    // Handle newlines in text nodes — convert to <br> for proper line breaks
+    if (text && text.includes('\n')) {
+      const lines = text.split('\n');
+      return (
+        <>
+          {lines.map((line: string, i: number) => (
+            <span key={i}>
+              {line}
+              {i < lines.length - 1 && <br />}
+            </span>
+          ))}
+        </>
+      );
+    }
+
     if (node.format === 1) return <strong>{text}</strong>;
     if (node.format === 2) return <em>{text}</em>;
     return <span>{text}</span>;