open markdown links in new window/tab (#6229)

## Summary

Changes links in markdown snippets (What's New popup, node info sidebar)
to open the link in a new tab/window rather than directly navigating and
potentially losing unsaved work.



https://github.com/user-attachments/assets/24331bba-e31a-484c-bc11-12cf61805c98



Fixes https://github.com/Comfy-Org/ComfyUI_frontend/issues/6223.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6229-open-markdown-links-in-new-window-tab-2956d73d365081edbb1efb21cd0e2ab2)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: GitHub Action <action@github.com>

src/platform/updates/components/WhatsNewPopup.vue

@@ -64,11 +64,11 @@
 </template>
 
 <script setup lang="ts">
-import { marked } from 'marked'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { formatVersionAnchor } from '@/utils/formatUtil'
+import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
 
 import type { ReleaseNote } from '../common/releaseService'
 import { useReleaseStore } from '../common/releaseStore'
@@ -108,17 +108,13 @@ const changelogUrl = computed(() => {
   return baseUrl
 })
 
-// Format release content for display using marked
 const formattedContent = computed(() => {
   if (!latestRelease.value?.content) {
     return `<p>${t('whatsNewPopup.noReleaseNotes')}</p>`
   }
 
   try {
-    // Use marked to parse markdown to HTML
-    return marked(latestRelease.value.content, {
-      gfm: true // Enable GitHub Flavored Markdown
-    })
+    return renderMarkdownToHtml(latestRelease.value.content)
   } catch (error) {
     console.error('Error parsing markdown:', error)
     // Fallback to plain text with line breaks

src/utils/markdownRendererUtil.ts

@@ -29,6 +29,12 @@ export function createMarkdownRenderer(baseUrl?: string): Renderer {
     const titleAttr = title ? ` title="${title}"` : ''
     return `<img src="${src}" alt="${text}"${titleAttr} />`
   }
+  renderer.link = ({ href, title, tokens, text }) => {
+    // For autolinks (bare URLs), tokens may be undefined, so fall back to text
+    const linkText = tokens ? renderer.parser.parseInline(tokens) : text
+    const titleAttr = title ? ` title="${title}"` : ''
+    return `<a href="${href}" ${titleAttr} target="_blank" rel="noopener noreferrer">${linkText}</a>`
+  }
   return renderer
 }
 
@@ -39,7 +45,8 @@ export function renderMarkdownToHtml(
   if (!markdown) return ''
 
   let html = marked.parse(markdown, {
-    renderer: createMarkdownRenderer(baseUrl)
+    renderer: createMarkdownRenderer(baseUrl),
+    gfm: true // Enable GitHub Flavored Markdown (including autolinks)
   }) as string
 
   if (baseUrl) {
@@ -48,6 +55,6 @@ export function renderMarkdownToHtml(
 
   return DOMPurify.sanitize(html, {
     ADD_TAGS: ALLOWED_TAGS,
-    ADD_ATTR: ALLOWED_ATTRS
+    ADD_ATTR: [...ALLOWED_ATTRS, 'target', 'rel']
   })
 }