Rich Text custom label link Rendering

Developing with Prismic
1

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
6

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

7

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

12

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

13

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