rich-text Insert Hyperlink no target option

[ayanmta]

Hi ,
when we specify the link via insert hyperlink on rich text option
it lacks the option to specify the target="_blank" or target="_self"
i this this could be a very useful feature to leverage

[ayanmta]

kindly find the image of current state which lacks the target option

[tinycoding5]

You can resolve this issue using render options.

const renderOptions = {
  renderNode: {
    [INLINES.HYPERLINK]: (node: Inline, children: React.ReactNode) => {
       return (
             <a href={node.data.uri}>{children}</a>
        )
    }
  }
}

[ayanmta]

@tinycoding5
but if have 5 hyperlinks in one rich text editor
i want two links to have target "_self " and others target "_blank"

this code you provided will apply for all links the same behaviour but i want a each link to be micro managed for target

[tinycoding5]

In this case, you can create new contentful.
For example, the url contentful has the name, href, target short string properties.
After that, you can add this contentful as an EMBEDDED entry.
After that, in renderOption, you can add that.
After review the response, you can parse that in front end

[maximilliangeorge]

For anyone trying to do this using vanilla js and not react:

import { INLINES } from '@contentful/rich-text-types'

const renderOptions = {
      renderNode: {
        [INLINES.HYPERLINK]: (node: any, next: any) => {
           return `<a target="_blank" href=${ node.data.uri }>${ next(node.content) }</a>`
        }
    }
}

documentToHtmlString(json, renderOptions)

[MrX8503]

Would love to see this feature. It would allow authors to choose which links open in a new tab/window and improve UX.