fix(notion): open article links in new tabs

__tests__/components/NotionLink.test.js

@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/react'
+import NotionLink, {
+  shouldOpenNotionLinkInNewTab
+} from '@/components/NotionLink'
+
+describe('NotionLink', () => {
+  it('opens external http links in a new tab', () => {
+    render(<NotionLink href='https://example.com'>Example</NotionLink>)
+
+    const link = screen.getByRole('link', { name: 'Example' })
+    expect(link).toHaveAttribute('href', 'https://example.com')
+    expect(link).toHaveAttribute('target', '_blank')
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+  })
+
+  it('preserves existing rel tokens when forcing a new tab', () => {
+    render(
+      <NotionLink href='https://example.com' rel='nofollow sponsored'>
+        Example
+      </NotionLink>
+    )
+
+    const link = screen.getByRole('link', { name: 'Example' })
+    expect(link).toHaveAttribute('rel', expect.stringContaining('nofollow'))
+    expect(link).toHaveAttribute('rel', expect.stringContaining('sponsored'))
+    expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'))
+    expect(link).toHaveAttribute('rel', expect.stringContaining('noreferrer'))
+  })
+
+  it('keeps mailto links in the current tab by default', () => {
+    render(<NotionLink href='mailto:test@example.com'>Mail</NotionLink>)
+
+    const link = screen.getByRole('link', { name: 'Mail' })
+    expect(link).toHaveAttribute('href', 'mailto:test@example.com')
+    expect(link).not.toHaveAttribute('target')
+    expect(link).not.toHaveAttribute('rel')
+  })
+
+  it('keeps explicit blank targets and adds safe rel tokens', () => {
+    render(
+      <NotionLink href='mailto:test@example.com' target='_blank'>
+        Mail
+      </NotionLink>
+    )
+
+    const link = screen.getByRole('link', { name: 'Mail' })
+    expect(link).toHaveAttribute('target', '_blank')
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+  })
+})
+
+describe('shouldOpenNotionLinkInNewTab', () => {
+  it('returns true for explicit blank targets and http links', () => {
+    expect(
+      shouldOpenNotionLinkInNewTab('mailto:test@example.com', '_blank')
+    ).toBe(true)
+    expect(shouldOpenNotionLinkInNewTab('https://example.com')).toBe(true)
+    expect(shouldOpenNotionLinkInNewTab('http://example.com')).toBe(true)
+  })
+
+  it('returns false for non-http links without an explicit target', () => {
+    expect(shouldOpenNotionLinkInNewTab('/posts/demo')).toBe(false)
+    expect(shouldOpenNotionLinkInNewTab('#section-1')).toBe(false)
+    expect(shouldOpenNotionLinkInNewTab('mailto:test@example.com')).toBe(false)
+  })
+})

components/NotionLink.js

@@ -0,0 +1,36 @@
+const EXTERNAL_HTTP_LINK = /^https?:\/\//i
+
+const mergeRelValues = (...values) => {
+  const rel = new Set()
+
+  values
+    .filter(Boolean)
+    .join(' ')
+    .split(/\s+/)
+    .filter(Boolean)
+    .forEach(token => rel.add(token))
+
+  return rel.size > 0 ? Array.from(rel).join(' ') : undefined
+}
+
+export const shouldOpenNotionLinkInNewTab = (href, target) => {
+  if (target === '_blank') {
+    return true
+  }
+
+  return typeof href === 'string' && EXTERNAL_HTTP_LINK.test(href)
+}
+
+const NotionLink = ({ href, target, rel, ...props }) => {
+  const shouldOpenInNewTab = shouldOpenNotionLinkInNewTab(href, target)
+  const normalizedTarget = shouldOpenInNewTab ? '_blank' : target
+  const normalizedRel = shouldOpenInNewTab
+    ? mergeRelValues(rel, 'noopener noreferrer')
+    : rel
+
+  return (
+    <a {...props} href={href} target={normalizedTarget} rel={normalizedRel} />
+  )
+}
+
+export default NotionLink

components/NotionPage.js

@@ -1,5 +1,6 @@
 import { siteConfig } from '@/lib/config'
 import { compressImage, mapImgUrl } from '@/lib/db/notion/mapImage'
+import NotionLink from '@/components/NotionLink'
 import { isBrowser, loadExternalResource } from '@/lib/utils'
 import mediumZoom from '@fisch0920/medium-zoom'
 import 'katex/dist/katex.min.css'
@@ -122,7 +123,8 @@ const NotionPage = ({ post, className }) => {
   return (
     <div
       id='notion-article'
-      className={`mx-auto overflow-hidden ${className || ''}`}>
+      className={`mx-auto overflow-hidden ${className || ''}`}
+    >
       <NotionRenderer
         recordMap={post?.blockMap}
         mapPageUrl={mapPageUrl}
@@ -131,6 +133,7 @@ const NotionPage = ({ post, className }) => {
           Code,
           Collection,
           Equation,
+          Link: NotionLink,
           Modal,
           Pdf,
           Tweet
@@ -143,7 +146,6 @@ const NotionPage = ({ post, className }) => {
   )
 }
 
-
 /**
  * 页面的数据库链接禁止跳转，只能查看
  */