Rich Text custom label link Rendering

Hi, I am really enjoying the learning curve of prismic , being a noob struggling with minor transition issues.

I am trying to add custom styled component to the rich text field Link with specific label data. I got Link and a tag working with html serializer, any suggestions on how to approach resolve Link and Custom label to use custom component?

Here is my failed attempt.
if (type === ‘hyperlink’) {
let result = ‘’
const url = PrismicLink.url(element.data, linkResolver)
if (
element.data.link_type === ‘Document’ &&
element.data.label === ‘button-pill’
) {
result = (

{content}

)
} else {
const target = element.data.target
? { target: element.data.target, rel: ‘noopener’ }
: {}
result = (
<ButtonPill href={url} {…target} key={index}>
{content}

)
}
return result
}

1 Like

Hi Akash,

Thanks for posting! I’m so happy to hear that you’re enjoying working with Prismic. I think we can work through this issue together.

So, let me understand:

If your link_type === "Document" and the label === "button-bill" , you would like to render the <ButtonPill /> component above the content. Is that correct?

Could you send a GitHub Gist with your entire HTML serializer?

What error are you getting?

Thanks,
Sam

Hi Sam,
if your link_type === "Document" and the label === "button-bill" , you would like to render the <ButtonPill /> component above the content . Is that correct?

Yes
and one more option of replace label p tag with span.

currently I reverted back to the original reference from the docs.

much appreciate the support

if (element.type === 'paragraph' && element.label === 'span') {
result = {result}
} else {
return

{result}


}

if (element.linkTo) {
const url = PrismicLink.url(element.linkTo, linkResolver)
if (
element.linkTo.link_type === 'Document' &&
element.label === 'button-pill'
) {
result = (

{result}

)
} else {
const target = element.linkTo.target
? { target: element.linkTo.target, rel: 'noopener' }
: {}
result = (
<ButtonPill href={url} {...target}>
{result}

)
}
}

if (element.linkTo) {
const url = PrismicLink.url(element.linkTo, linkResolver)
if (
element.linkTo.link_type === 'Document' &&
element.label === 'button-pill'
) {
result = (

{result}

)
} else {
const target = element.linkTo.target
? { target: element.linkTo.target, rel: 'noopener' }
: {}
result = (
<ButtonPill href={url} {...target}>
{result}

)
}
}

currently I get

, how to remove the paragraph tags of the labeled text and use custom elements

ak

Hi Akash,

Thanks! I understand better now.

You can not add a label to a link like this. In the HTML serializer, the label just produces a span tag, and the span and the a are two separate elements, so your serializer will never find one element with both the label "button-pill" and a link. Also, the linkTo property is only available on images, if they have a link.

If you're not already using slices, I'd encourage you to think about converting your content to slices. You could create a <RichText /> slice for your text content, and a <ButtonPill /> slice for your button. Here's a tutorial on working with slices in Gatsby.

I hope that helps! Let me know if you have any more questions.

Sam

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.