Test updater-test with new link anchor fix

.github/workflows/build-apps.yml

@@ -5,6 +5,7 @@ on:
   push:
     branches:
       - main
+      - pierremtb/fix/hook-into-markdown-generated-anchors
     tags:
       - 'v[0-9]+.[0-9]+.[0-9]+'
   schedule:
@@ -13,7 +14,8 @@ on:
   # Will checkout the last commit from the default branch (main as of 2023-10-04)
 
 env:
-  IS_RELEASE: ${{ github.ref_type == 'tag' }}
+  # IS_RELEASE: ${{ github.ref_type == 'tag' }}
+  IS_RELEASE: true
   IS_NIGHTLY: ${{ github.event_name == 'schedule' }}
 
 concurrency:
@@ -51,11 +53,11 @@ jobs:
         if: ${{ env.IS_NIGHTLY == 'true' }}
         run: yarn files:flip-to-nightly
 
-      - name: Set release version
-        if: ${{ env.IS_RELEASE == 'true' }}
-        run: |
-          export VERSION=${GITHUB_REF_NAME#v}
-          yarn files:set-version
+      # - name: Set release version
+      #   if: ${{ env.IS_RELEASE == 'true' }}
+      #   run: |
+      #     export VERSION=${GITHUB_REF_NAME#v}
+      #     yarn files:set-version
 
       - uses: actions/upload-artifact@v4
         with:

interface.d.ts

@@ -84,5 +84,6 @@ export interface IElectronAPI {
 declare global {
   interface Window {
     electron: IElectronAPI
+    openExternalLink: (e: React.MouseEvent<HTMLAnchorElement>) => void
   }
 }

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>

src/lib/markdown.ts

@@ -0,0 +1,51 @@
+import { MarkedOptions, Renderer, unescape } from '@ts-stack/markdown'
+import { openExternalBrowserIfDesktop } from './openWindow'
+
+/**
+ * Main goal of this custom renderer is to prevent links from changing the current location
+ * this is specially important for the desktop app.
+ */
+export class SafeRenderer extends Renderer {
+  constructor(options: MarkedOptions) {
+    super(options)
+
+    // Attach a global function for non-react anchor elements that need safe navigation
+    window.openExternalLink = (e: React.MouseEvent<HTMLAnchorElement>) => {
+      openExternalBrowserIfDesktop()(e)
+    }
+  }
+
+  // Extended from https://github.com/ts-stack/markdown/blob/c5c1925c1153ca2fe9051c356ef0ddc60b3e1d6a/packages/markdown/src/renderer.ts#L116
+  link(href: string, title: string, text: string): string {
+    if (this.options.sanitize) {
+      let prot: string
+
+      try {
+        prot = decodeURIComponent(unescape(href))
+          .replace(/[^\w:]/g, '')
+          .toLowerCase()
+      } catch (e) {
+        return text
+      }
+
+      if (
+        prot.indexOf('javascript:') === 0 ||
+        prot.indexOf('vbscript:') === 0 ||
+        prot.indexOf('data:') === 0
+      ) {
+        return text
+      }
+    }
+
+    let out =
+      '<a onclick="openExternalLink(event)" target="_blank" href="' + href + '"'
+
+    if (title) {
+      out += ' title="' + title + '"'
+    }
+
+    out += '>' + text + '</a>'
+
+    return out
+  }
+}