Open updater toast changelog links externally (#4970)

* fix: Hook into markdown-generated anchors to avoid e.g breaking the desktop app

* add comment

* Disable eslint on copied line from ts-stack

---------

Co-authored-by: marc2332 <mespinsanz@gmail.com>

src/components/ToastUpdate.test.tsx

@@ -150,4 +150,31 @@ describe('ToastUpdate tests', () => {
     expect(restartButton).toBeEnabled()
     expect(dismissButton).toBeEnabled()
   })
+
+  test('Happy path: external links render correctly', () => {
+    const releaseNotesWithBreakingChanges = `
+## Some markdown release notes
+- [Zoo](https://zoo.dev/)
+`
+    const onRestart = vi.fn()
+    const onDismiss = vi.fn()
+
+    render(
+      <ToastUpdate
+        onRestart={onRestart}
+        onDismiss={onDismiss}
+        version={testData.version}
+        releaseNotes={releaseNotesWithBreakingChanges}
+      />
+    )
+
+    // Locators and other constants
+    const zooDev = screen.getByText('Zoo', {
+      selector: 'a',
+    })
+
+    expect(zooDev).toHaveAttribute('href', 'https://zoo.dev/')
+    expect(zooDev).toHaveAttribute('target', '_blank')
+    expect(zooDev).toHaveAttribute('onClick')
+  })
 })

src/components/ToastUpdate.tsx

@@ -1,8 +1,9 @@
 import toast from 'react-hot-toast'
 import { ActionButton } from './ActionButton'
 import { openExternalBrowserIfDesktop } from 'lib/openWindow'
-import { Marked } from '@ts-stack/markdown'
+import { escape, Marked, MarkedOptions, unescape } from '@ts-stack/markdown'
 import { getReleaseUrl } from 'routes/Settings'
+import { SafeRenderer } from 'lib/markdown'
 
 export function ToastUpdate({
   version,
@@ -19,6 +20,14 @@ export function ToastUpdate({
     ?.toLocaleLowerCase()
     .includes('breaking')
 
+  const markedOptions: MarkedOptions = {
+    gfm: true,
+    breaks: true,
+    sanitize: true,
+    unescape,
+    escape,
+  }
+
   return (
     <div className="inset-0 z-50 grid place-content-center rounded bg-chalkboard-110/50 shadow-md">
       <div className="max-w-3xl min-w-[35rem] p-8 rounded bg-chalkboard-10 dark:bg-chalkboard-90">
@@ -58,9 +67,8 @@ export function ToastUpdate({
               className="parsed-markdown py-2 px-4 mt-2 border-t border-chalkboard-30 dark:border-chalkboard-60 max-h-60 overflow-y-auto"
               dangerouslySetInnerHTML={{
                 __html: Marked.parse(releaseNotes, {
-                  gfm: true,
-                  breaks: true,
-                  sanitize: true,
+                  renderer: new SafeRenderer(markedOptions),
+                  ...markedOptions,
                 }),
               }}
             ></div>