Fix doublewrapping in formatDescription and add unit tests

Author: hasparus

package.json

@@ -17,8 +17,10 @@
     "postbuild": "next-sitemap",
     "prebuild": "tsx src/get-github-info.ts",
     "serve": "pnpx serve out",
-    "test": "playwright test",
+    "test": "playwright test && pnpm test:unit",
+    "test:e2e": "playwright test",
     "test:ui": "playwright test --ui",
+    "test:unit": "node --import=tsx --test 'src/**/*.test.tsx'",
     "validate:snippets": "node scripts/validate-snippets.js"
   },
   "dependencies": {

src/app/conf/2025/schedule/[id]/format-description.test.tsx

@@ -0,0 +1,52 @@
+import { it } from "node:test"
+import { strict as assert } from "node:assert"
+
+import { formatDescription } from "./format-description"
+
+it("does not double-wrap links", () => {
+  assert.equal(
+    formatDescription(`Check out Y! <a href="https://y.dev">https://y.dev</a>`),
+    `Check out Y! <a href="https://y.dev" rel="noopener noreferrer" target="_blank" class=" typography-link">y.dev</a>`,
+  )
+})
+
+it("enriches plain URLs", () => {
+  assert.equal(
+    formatDescription(`Visit https://example.com for more info`),
+    `Visit <a href="https://example.com" target="_blank" rel="noopener noreferrer" class="typography-link">example.com</a> for more info`,
+  )
+})
+
+it("adds attributes to existing links without URL content", () => {
+  assert.equal(
+    formatDescription(`<a href="https://example.com">Click here</a>`),
+    `<a href="https://example.com" rel="noopener noreferrer" target="_blank" class=" typography-link">Click here</a>`,
+  )
+})
+
+it("handles mixed content", () => {
+  assert.equal(
+    formatDescription(
+      `Check <a href="https://y.dev">Y site</a> and https://example.com`,
+    ),
+    `Check <a href="https://y.dev" rel="noopener noreferrer" target="_blank" class=" typography-link">Y site</a> and <a href="https://example.com" target="_blank" rel="noopener noreferrer" class="typography-link">example.com</a>`,
+  )
+})
+
+it("handles multiple URLs in one text", () => {
+  assert.equal(
+    formatDescription(
+      `Visit https://github.com and https://example.org for info`,
+    ),
+    `Visit <a href="https://github.com" target="_blank" rel="noopener noreferrer" class="typography-link">github.com</a> and <a href="https://example.org" target="_blank" rel="noopener noreferrer" class="typography-link">example.org</a> for info`,
+  )
+})
+
+it("handles existing link with existing class", () => {
+  assert.equal(
+    formatDescription(
+      `<a href="https://example.com" class="custom">Click here</a>`,
+    ),
+    `<a href="https://example.com" class="custom typography-link" rel="noopener noreferrer" target="_blank">Click here</a>`,
+  )
+})

src/app/conf/2025/schedule/[id]/format-description.tsx

@@ -1,45 +1,51 @@
-const URL_REGEX = /https?:\/\/[^\s]+/g
-const LINK_REGEX = /<a\s+([^>]*href\s*=\s*[^>]*)>/gi
+// Combined regex that matches either existing anchor tags OR standalone URLs
+const COMBINED_REGEX =
+  /(<a\s+[^>]*href\s*=\s*[^>]*>.*?<\/a>)|(https?:\/\/[^\s]+)/gi
 
 export function formatDescription(text: string): string {
-  // we coerce all existing anchor tags to have target="_blank" rel="noopener noreferrer" and typography-link class
-  const result = text.replace(LINK_REGEX, (_, attributes) => {
-    let attrs = attributes
-
-    if (!attrs.includes("target=")) {
-      attrs += ' target="_blank"'
-    }
-
-    if (!attrs.includes("rel=")) {
-      attrs += ' rel="noopener noreferrer"'
-    }
-
-    if (!attrs.includes("class=")) {
-      attrs += ' class="typography-link"'
-    } else if (!attrs.includes("typography-link")) {
-      attrs = attrs.replace(
-        /class\s*=\s*["']([^"']*)/gi,
-        'class="$1 typography-link',
+  return text.replace(COMBINED_REGEX, (match, anchorTag, standaloneUrl) => {
+    if (anchorTag) {
+      // Handle existing anchor tag
+      const linkMatch = anchorTag.match(
+        /<a\s+([^>]*href\s*=\s*[^>]*)>(.*?)<\/a>/i,
+      )
+      if (!linkMatch) return anchorTag
+
+      const [, attributes, content] = linkMatch
+      let attrs = attributes
+
+      if (!attrs.includes("rel=")) {
+        attrs += ' rel="noopener noreferrer"'
+      }
+
+      if (!attrs.includes("target=")) {
+        attrs += ' target="_blank"'
+      }
+
+      if (!attrs.includes("class=")) {
+        attrs += ' class=" typography-link"'
+      } else if (!attrs.includes("typography-link")) {
+        attrs = attrs.replace(
+          /class\s*=\s*["']([^"']*)/gi,
+          'class="$1 typography-link',
+        )
+      }
+
+      // Format URL content to show just domain
+      const urlContent = content.replace(
+        /https?:\/\/[^\s]+/g,
+        (url: string) => {
+          return url.replace(/^https?:\/\//, "")
+        },
       )
-    }
-
-    return `<a ${attrs}>`
-  })
-
-  // then we format plain URLs that are not already inside an anchor tag
-  return result.replace(URL_REGEX, (url, offset) => {
-    const beforeUrl = result.slice(0, offset)
-    const afterUrl = result.slice(offset + url.length)
-
-    const lastOpenTag = beforeUrl.lastIndexOf("<")
-    const lastCloseTag = beforeUrl.lastIndexOf(">")
-    const nextCloseTag = afterUrl.indexOf(">")
 
-    if (lastOpenTag > lastCloseTag && nextCloseTag !== -1) {
-      return url
+      return `<a ${attrs}>${urlContent}</a>`
+    } else if (standaloneUrl) {
+      // Handle standalone URL
+      const displayUrl = standaloneUrl.replace(/^https?:\/\//, "")
+      return `<a href="${standaloneUrl}" target="_blank" rel="noopener noreferrer" class="typography-link">${displayUrl}</a>`
     }
 
-    const displayUrl = url.replace(/^https?:\/\//, "")
-    return `<a href="${url}" target="_blank" rel="noopener noreferrer" class="typography-link">${displayUrl}</a>`
+    return match
   })
 }