šŸ‘‹ Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Issue with opening links in new tab within BlockContent block

4 replies
Last updated: Jun 9, 2021
Hi! I'm having some issues opening new links in a new tab within the BlockContent block. Here's my serializer.js snippet

const serializers = {
  types: {
    mainImage: Figure,
    Image: Figure,
    code: ({node = {}})=> {
    const {code, language} = node 
      if(!code) {
        return null;
      }
    return (
      <SyntaxHighlighter language={language || 'text'}>{code}</SyntaxHighlighter>
    )
  },
  marks: {
    internalLink: ({mark, children}) => {
      const {slug = {}} = mark
      const href = `/post/${slug.current}`
      return <a href={href}>{children}</a>
    },
    link: ({mark, children}) => {
      // Read <https://css-tricks.com/use-target_blank/>
      const { blank, href } = mark
      return blank ?
      <a href={href}>{children}</a>
        : <a href={href} target="_blank" rel="noopener noreferrer">{children}</a>
      }

    }
  }
}
Is there something I'm missing?
Jun 5, 2021, 5:10 PM
I tried that and it didn't work šŸ™
Jun 8, 2021, 10:59 PM
Here's what my
blockContent.js
file looks like:

marks: {
        // Decorators usually describe a single property ā€“ e.g. a typographic
        // preference or highlighting by editors.
        decorators: [{title: 'Strong', value: 'strong'}, {title: 'Emphasis', value: 'em'}, {title: 'Code', value: 'code'}, { "title": "Strike", "value": "strike-through" }],
        // Annotations can be any object structure ā€“ e.g. a link or a footnote.
        annotations: [
          {
            name: 'link',
            type: 'object',
            title: 'External link',
            fields: [
              {
                name: 'href',
                type: 'url',
                title: 'URL'
              },
              {
                title: 'Open in a New Tab',
                name: 'blank',
                type: 'boolean'
              }
            ]
          },
          {
            name: 'internalLink',
            type: 'object',
            title: 'Internal link',
            fields: [
              {
                name: 'reference',
                type: 'reference',
                title: 'Reference',
                to: [
                  { type: 'post' },
                ]
              }
            ]
          },
        ]
      },
    
    },
Jun 8, 2021, 11:14 PM
Hmm, I would double check your code against this guide . I was able to get
target='_blank'
to work by a)double checking that the boolean
blank
was set to true on the
link
object in portable text and b) changing your ternary as mentioned before:
return blank ? <a href={href} target="_blank" rel="noopener">{children}</a> : <a href={href}>{children}</a>
Jun 9, 2021, 4:49 PM
Hmm, I would double check your code against this guide . I was able to get
target='_blank'
to work by a)double checking that the boolean
blank
was set to true on the
link
object in portable text and b) changing your ternary as mentioned before:
return blank ? <a href={href} target="_blank" rel="noopener">{children}</a> : <a href={href}>{children}</a>
Jun 9, 2021, 4:49 PM

Sanityā€“ build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?