fix: share internal/external link logic with Media, Autolink and MDAST (#2686)

Soxasora · web-flow · commit cc80160aeeeb · 2025-12-19T17:34:12.000-06:00
diff --git a/components/editor/nodes/media.js b/components/editor/nodes/media.js
@@ -1,5 +1,5 @@
 import MediaOrLink from '@/components/media-or-link'
-import { IMGPROXY_URL_REGEXP, decodeProxyUrl } from '@/lib/url'
+import { IMGPROXY_URL_REGEXP, decodeProxyUrl, getLinkAttributes } from '@/lib/url'
 import { useState, useEffect } from 'react'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { $createLinkNode } from '@lexical/link'
@@ -39,9 +39,11 @@ export default function MediaComponent ({ src, srcSet, bestResSrc, width, height
       const parent = node.getParent()
       if (!parent) return
 
+      const { target, rel } = getLinkAttributes(url)
       const linkNode = $createLinkNode(url, {
         title: url,
-        rel: UNKNOWN_LINK_REL
+        target,
+        rel
       }).append($createTextNode(url))
 
       // If parent is a paragraph, directly replace the media node with the link
diff --git a/lib/lexical/exts/autolink.js b/lib/lexical/exts/autolink.js
@@ -2,7 +2,7 @@ import { defineExtension } from '@lexical/extension'
 import { $createItemMentionNode } from '@/lib/lexical/nodes/decorative/mentions/item'
 import { $createEmbedNode } from '@/lib/lexical/nodes/content/embed'
 import { $createMediaNode } from '@/lib/lexical/nodes/content/media'
-import { parseInternalLinks, parseEmbedUrl, ensureProtocol, isExternal } from '@/lib/url'
+import { parseInternalLinks, parseEmbedUrl, ensureProtocol, getLinkAttributes } from '@/lib/url'
 import { AutoLinkNode, $createLinkNode } from '@lexical/link'
 import { $isParagraphNode, $createTextNode } from 'lexical'
 
@@ -62,13 +62,12 @@ export const AutoLinkExtension = defineExtension({
         return
       }
 
-      const isHashLink = url?.startsWith('#')
-      const isInternalLink = isHashLink || !isExternal(url)
       // step 4: fallback to full link node
+      const { target, rel } = getLinkAttributes(url)
       const linkNode = $createLinkNode(url, {
         title: url,
-        target: isInternalLink ? '' : '_blank',
-        rel: isInternalLink ? '' : 'noopener nofollow noreferrer'
+        target,
+        rel
       }).append($createTextNode(url))
       node.replace(linkNode)
     })
diff --git a/lib/lexical/mdast/visitors/link.js b/lib/lexical/mdast/visitors/link.js
@@ -1,7 +1,7 @@
 import { $createTextNode } from 'lexical'
 import { $createLinkNode, $isLinkNode, $createAutoLinkNode, $isAutoLinkNode } from '@lexical/link'
 import { $isEmbedNode } from '@/lib/lexical/nodes/content/embed'
-import { isExternal } from '@/lib/url'
+import { getLinkAttributes } from '@/lib/url'
 
 // check if link is a "bare link" (text matches url)
 function isBareLink (mdastNode) {
@@ -26,12 +26,11 @@ export const MdastAutolinkVisitor = {
 export const MdastLinkVisitor = {
   testNode: 'link',
   visitNode ({ mdastNode, actions }) {
-    const isHashLink = mdastNode.url?.startsWith('#')
-    const isInternalLink = isHashLink || !isExternal(mdastNode.url)
-
-    // empty for hash links, use stored value or default to security attributes
-    const target = isInternalLink ? '' : (mdastNode.target ?? '_blank')
-    const rel = isInternalLink ? '' : (mdastNode.rel ?? 'noopener nofollow noreferrer')
+    // use stored values from mdast or defaults for external links
+    const { target, rel } = getLinkAttributes(mdastNode.url, {
+      target: mdastNode.target,
+      rel: mdastNode.rel
+    })
 
     const link = $createLinkNode(mdastNode.url, {
       title: mdastNode.title,
diff --git a/lib/url.js b/lib/url.js
@@ -27,6 +27,22 @@ export function isExternal (url) {
   return !url.startsWith(process.env.NEXT_PUBLIC_URL + '/') && !url.startsWith('/')
 }
 
+export function isHashLink (url) {
+  return url?.startsWith('#')
+}
+
+export function isInternalLink (url) {
+  return isHashLink(url) || !isExternal(url)
+}
+
+export function getLinkAttributes (url, { target, rel } = {}) {
+  const internal = isInternalLink(url)
+  return {
+    target: internal ? '' : (target ?? '_blank'),
+    rel: internal ? '' : (rel ?? 'noopener nofollow noreferrer')
+  }
+}
+
 export function removeTracking (value) {
   if (!value) return value
   const exprs = [
