Update MarkdownBlock.tsx

webview-ui/src/components/common/MarkdownBlock.tsx

@@ -34,14 +34,27 @@ const remarkUrlToLink = () => {
 
 			const parts = node.value.split(urlRegex)
 			const children: any[] = []
+			const cleanedMatches = matches.map((url: string) => url.replace(/[.,;:!?'"]+$/, ""))
 
 			parts.forEach((part: string, i: number) => {
 				if (part) {
 					children.push({ type: "text", value: part })
 				}
 
-				if (matches[i]) {
-					children.push({ type: "link", url: matches[i], children: [{ type: "text", value: matches[i] }] })
+				if (cleanedMatches[i]) {
+					const originalUrl = matches[i]
+					const cleanedUrl = cleanedMatches[i]
+					const removedPunctuation = originalUrl.substring(cleanedUrl.length)
+
+					children.push({
+						type: "link",
+						url: cleanedUrl,
+						children: [{ type: "text", value: cleanedUrl }],
+					})
+
+					if (removedPunctuation) {
+						children.push({ type: "text", value: removedPunctuation })
+					}
 				}
 			})
 

webview-ui/src/components/common/__tests__/MarkdownBlock.spec.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import MarkdownBlock from "../MarkdownBlock"
+import { vi } from "vitest"
+
+vi.mock("@src/utils/vscode", () => ({
+	vscode: {
+		postMessage: vi.fn(),
+	},
+}))
+
+vi.mock("@src/context/ExtensionStateContext", () => ({
+	useExtensionState: () => ({
+		theme: "dark",
+	}),
+}))
+
+describe("MarkdownBlock", () => {
+	it("should correctly handle URLs with trailing punctuation", async () => {
+		const markdown = "Check out this link: https://example.com."
+		render(<MarkdownBlock markdown={markdown} />)
+
+		await (async () => {
+			const linkElement = screen.getByRole("link")
+			expect(linkElement).toHaveAttribute("href", "https://example.com")
+			expect(linkElement.textContent).toBe("https://example.com.")
+		})
+	})
+})