fix(richtext-lexical): remove undefined rel and target attributes in link HTML converter (#11754)

When converting lexical to HTML, links without "open in new tab" checked
were incorrectly rendering with rel=undefined and target=undefined
attributes. This fix ensures those attributes are only added when newTab
is true.

Fixes: #11752

Author: GermanJablo

packages/plugin-form-builder/src/utilities/lexical/converters/link.ts

@@ -15,17 +15,13 @@ export const LinkHTMLConverter: HTMLConverter<any> = {
       submissionData,
     })
 
-    const rel: string = node.fields.newTab ? ' rel="noopener noreferrer"' : ''
-    const target: string = node.fields.newTab ? ' target="_blank"' : ''
-
     let href: string =
       node.fields.linkType === 'custom' ? node.fields.url : node.fields.doc?.value?.id
 
     if (submissionData) {
       href = replaceDoubleCurlys(href, submissionData)
     }
-
-    return `<a href="${href}"${target}${rel}>${childrenText}</a>`
+    return `<a href="${href}"${node.fields.newTab ? ' rel="noopener noreferrer" target="_blank"' : ''}>${childrenText}</a>`
   },
   nodeTypes: ['link'],
 }

packages/richtext-lexical/src/features/converters/lexicalToHtml/async/converters/link.ts

@@ -16,10 +16,7 @@ export const LinkHTMLConverterAsync: (args: {
       })
     ).join('')
 
-    const rel: string | undefined = node.fields.newTab ? 'noopener noreferrer' : undefined
-    const target: string | undefined = node.fields.newTab ? '_blank' : undefined
-
-    return `<a${providedStyleTag} href="${node.fields.url}" rel=${rel} target=${target}>
+    return `<a${providedStyleTag} href="${node.fields.url}"${node.fields.newTab ? ' rel="noopener noreferrer" target="_blank"' : ''}>
         ${children}
       </a>`
   },
@@ -30,9 +27,6 @@ export const LinkHTMLConverterAsync: (args: {
       })
     ).join('')
 
-    const rel: string | undefined = node.fields.newTab ? 'noopener noreferrer' : undefined
-    const target: string | undefined = node.fields.newTab ? '_blank' : undefined
-
     let href: string = node.fields.url ?? ''
     if (node.fields.linkType === 'internal') {
       if (internalDocToHref) {
@@ -45,7 +39,7 @@ export const LinkHTMLConverterAsync: (args: {
       }
     }
 
-    return `<a${providedStyleTag} href="${href}" rel=${rel} target=${target}>
+    return `<a${providedStyleTag} href="${href}"${node.fields.newTab ? ' rel="noopener noreferrer" target="_blank"' : ''}>
         ${children}
       </a>`
   },

packages/richtext-lexical/src/features/converters/lexicalToHtml/sync/converters/link.ts

@@ -9,10 +9,7 @@ export const LinkHTMLConverter: (args: {
       nodes: node.children,
     }).join('')
 
-    const rel: string | undefined = node.fields.newTab ? 'noopener noreferrer' : undefined
-    const target: string | undefined = node.fields.newTab ? '_blank' : undefined
-
-    return `<a${providedStyleTag} href="${node.fields.url}" rel=${rel} target=${target}>
+    return `<a${providedStyleTag} href="${node.fields.url}"${node.fields.newTab ? ' rel="noopener noreferrer" target="_blank"' : ''}>
         ${children}
       </a>`
   },
@@ -21,9 +18,6 @@ export const LinkHTMLConverter: (args: {
       nodes: node.children,
     }).join('')
 
-    const rel: string | undefined = node.fields.newTab ? 'noopener noreferrer' : undefined
-    const target: string | undefined = node.fields.newTab ? '_blank' : undefined
-
     let href: string = node.fields.url ?? ''
     if (node.fields.linkType === 'internal') {
       if (internalDocToHref) {
@@ -36,7 +30,7 @@ export const LinkHTMLConverter: (args: {
       }
     }
 
-    return `<a${providedStyleTag} href="${href}" rel=${rel} target=${target}>
+    return `<a${providedStyleTag} href="${href}"${node.fields.newTab ? ' rel="noopener noreferrer" target="_blank"' : ''}>
         ${children}
       </a>`
   },

packages/richtext-lexical/src/features/link/server/index.ts

@@ -191,9 +191,6 @@ export const LinkFeature = createServerFeature<
                       showHiddenFields,
                     })
 
-                    const rel: string = node.fields.newTab ? ' rel="noopener noreferrer"' : ''
-                    const target: string = node.fields.newTab ? ' target="_blank"' : ''
-
                     let href: string = node.fields.url ?? ''
                     if (node.fields.linkType === 'internal') {
                       href =
@@ -202,7 +199,7 @@ export const LinkFeature = createServerFeature<
                           : String(node.fields.doc?.value?.id)
                     }
 
-                    return `<a href="${href}"${target}${rel}>${childrenText}</a>`
+                    return `<a href="${href}"${node.fields.newTab ? ' rel="noopener noreferrer" target="_blank"' : ''}>${childrenText}</a>`
                   },
                   nodeTypes: [AutoLinkNode.getType()],
                 },
@@ -240,15 +237,12 @@ export const LinkFeature = createServerFeature<
                   showHiddenFields,
                 })
 
-                const rel: string = node.fields.newTab ? ' rel="noopener noreferrer"' : ''
-                const target: string = node.fields.newTab ? ' target="_blank"' : ''
-
                 const href: string =
                   node.fields.linkType === 'custom'
                     ? escapeHTML(node.fields.url)
                     : (node.fields.doc?.value as string)
 
-                return `<a href="${href}"${target}${rel}>${childrenText}</a>`
+                return `<a href="${href}"${node.fields.newTab ? ' rel="noopener noreferrer" target="_blank"' : ''}>${childrenText}</a>`
               },
               nodeTypes: [LinkNode.getType()],
             },