Issue with opening links in new tab within BlockContent block
4 replies
Last updated: Jun 9, 2021
S
Hi! I'm having some issues opening new links in a new tab within the BlockContent block. Here's my serializer.js snippet
Is there something I'm missing?
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>
}
}
}
}Jun 5, 2021, 5:10 PM
S
I tried that and it didn't work 🙁
Jun 8, 2021, 10:59 PM
S
Here's what my
blockContent.jsfile 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
R
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
blankwas set to true on the
linkobject 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
R
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
blankwas set to true on the
linkobject 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
The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.