From 36641b5bc09bdd5dadc5cb312b727d543baa8caa Mon Sep 17 00:00:00 2001 From: npeter83 Date: Sun, 19 Jul 2026 20:51:29 +0200 Subject: [PATCH] feat: linkify also catches www.* and bare domain.tld/path URLs The description linkifier only caught http(s):// URLs; extend it to www.* hosts and bare domain.tld/path URLs (both get an https:// href prefix), so links like www.amelielens.com and facebook.com/amelielensmusic become clickable too. A required path + letters-only TLD keep false positives (version numbers, file names) out; bare @handles and #hashtags stay plain (the platform is ambiguous). --- frontend/src/lib/linkify.tsx | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/frontend/src/lib/linkify.tsx b/frontend/src/lib/linkify.tsx index 2187c77..f607122 100644 --- a/frontend/src/lib/linkify.tsx +++ b/frontend/src/lib/linkify.tsx @@ -1,13 +1,20 @@ import { Fragment, type ReactNode } from "react"; -// A bare http(s) URL: greedy up to whitespace/<, but don't swallow a trailing sentence -// punctuation mark (so "…see https://x.com/y." links "https://x.com/y", not the dot). -const URL_RE = /(https?:\/\/[^\s<]+[^\s<.,!?;:)\]}"'])/g; +// Recognises three link shapes in plain text: +// 1. explicit http(s):// URLs +// 2. www.* bare hosts +// 3. domain.tld/path bare URLs — the required path AND a letters-only TLD keep false positives +// (version numbers like "3.2/x", file names like "index.html") from matching. +// The last matched char excludes trailing sentence punctuation, so "see foo.com/bar." links +// "foo.com/bar" and leaves the period. Bare @handles are intentionally NOT linked — the platform +// is ambiguous. +const URL_RE = + /((?:https?:\/\/|www\.)[^\s<]+[^\s<.,!?;:)\]}"']|[a-z0-9-]+(?:\.[a-z0-9-]+)*\.[a-z]{2,}\/[^\s<]*[^\s<.,!?;:)\]}"'])/gi; /** - * Turn bare http(s) URLs inside a plain-text string into clickable links that open in a new tab - * (with a safe rel). Everything else is returned as text, so it composes with `whitespace-pre-wrap` - * (line breaks preserved). Used for channel/video descriptions where links arrive as plain text. + * Turn bare URLs (http(s), www, or domain.tld/path) inside a plain-text string into links that open + * in a new tab (safe rel). Non-http matches get an https:// prefix on the href, but keep their + * original text. Everything else is returned as text, so it composes with `whitespace-pre-wrap`. */ export function linkify(text: string): ReactNode[] { const out: ReactNode[] = []; @@ -17,19 +24,20 @@ export function linkify(text: string): ReactNode[] { let m: RegExpExecArray | null; while ((m = URL_RE.exec(text)) !== null) { if (m.index > last) out.push({text.slice(last, m.index)}); - const url = m[0]; + const raw = m[0]; + const href = /^https?:\/\//i.test(raw) ? raw : `https://${raw}`; out.push( - {url} + {raw} , ); - last = m.index + url.length; + last = m.index + raw.length; } if (last < text.length) out.push({text.slice(last)}); return out;