diff --git a/frontend/src/components/descriptionLinks.dom.test.tsx b/frontend/src/components/descriptionLinks.dom.test.tsx new file mode 100644 index 00000000..a8d06356 --- /dev/null +++ b/frontend/src/components/descriptionLinks.dom.test.tsx @@ -0,0 +1,43 @@ +// @vitest-environment jsdom +// +// E28 review C6: a link at the end of a sentence lost the punctuation after it — the trailing +// `.,;:!?)]` was trimmed off the href and then dropped from the text too — and a URL whose own path +// ends in a balanced ")" (a Wikipedia article) was cut short and broken. +import { afterEach, describe, expect, it, vi } from "vitest"; +import { cleanup, render } from "@testing-library/react"; +import type { TFunction } from "i18next"; + +import { renderDescription } from "./descriptionLinks"; + +afterEach(cleanup); + +function shown(text: string) { + const { container } = render( +
+ {renderDescription(text, { + currentId: "x", + onSeek: vi.fn(), + onLoadVideo: vi.fn(), + t: ((k: string) => k) as unknown as TFunction, + })} +
, + ); + return { + text: container.textContent, + hrefs: [...container.querySelectorAll("a")].map((a) => a.getAttribute("href")), + }; +} + +describe("a link in a description", () => { + it("keeps the punctuation after it in the text, out of the link", () => { + const r = shown("See https://example.com/page. And (https://example.org/x), too!"); + expect(r.text).toBe("See https://example.com/page. And (https://example.org/x), too!"); + expect(r.hrefs).toEqual(["https://example.com/page", "https://example.org/x"]); + }); + + it("keeps a balanced parenthesis that belongs to the address", () => { + const r = shown("Read https://en.wikipedia.org/wiki/Mercury_(planet)."); + expect(r.hrefs).toEqual(["https://en.wikipedia.org/wiki/Mercury_(planet)"]); + expect(r.text).toBe("Read https://en.wikipedia.org/wiki/Mercury_(planet)."); + }); +}); diff --git a/frontend/src/components/descriptionLinks.tsx b/frontend/src/components/descriptionLinks.tsx index afcb51e5..31973922 100644 --- a/frontend/src/components/descriptionLinks.tsx +++ b/frontend/src/components/descriptionLinks.tsx @@ -53,6 +53,22 @@ function parseYouTube(url: string): { id: string; start: number | null } | null return { id, start: parseStart(u.searchParams.get("t") || u.searchParams.get("start")) }; } +/** The address inside a matched URL: sentence punctuation after it is not part of it, but a ")" that + * closes a "(" of its own is (a Wikipedia article's "Mercury_(planet)"). */ +function trimUrl(raw: string): string { + let end = raw.length; + for (;;) { + const c = raw[end - 1]; + if (c && ".,;:!?]".includes(c)) end--; + else if (c === ")") { + const body = raw.slice(0, end); + if (body.split(")").length > body.split("(").length) end--; + else break; + } else break; + } + return raw.slice(0, end); +} + export function renderDescription( text: string, opts: { @@ -74,7 +90,9 @@ export function renderDescription( .trim(); for (const chunk of clean.split(URL_RE)) { if (/^https?:\/\//.test(chunk)) { - const href = chunk.replace(/[.,;:!?)\]]+$/, ""); + const href = trimUrl(chunk); + // What was trimmed is the sentence's, not the link's: it stays in the text, after the link. + const tail = chunk.slice(href.length); const yt = parseYouTube(href); if (yt) { const sameVideo = yt.id === opts.currentId; @@ -98,6 +116,7 @@ export function renderDescription( , ); } + if (tail) out.push({tail}); continue; } // Plain text: pull out emails, hashtags and bare timestamps.