Incorrect RTLabelNode type

Describe your question/issue in detail

I am trying to use a custom label to render a third party widget within a RichTextField. This works great but I get a type error when trying to access props.node.text. In my testing this has always been present and is required for my component.

Full snippet

const props = defineProps(getRichTextComponentProps('label'))
const rawWidgetText: string = props.node.text

Impacted feature

Custom labels for RichTextFields

What steps have you taken to resolve this issue already?

N/A

Errors

Property 'text' does not exist on type 'RTLabelNode'.

Your Role

Web Developer

Steps to reproduce

Attempt to access defineProps(getRichTextComponentProps('label')).node.text in a typescript project.

Hi @starsky, sorry for the delay getting back to you!

I confirmed this property is present, but it's hidden because it's part of our internal rich-text serialization mechanism. That being said, it should be safe-ish to use. You should be able to get proper typing this way:

import type { RTLabelNode } from '@prismicio/client'

defineProps<{ node: RTLabelNode & { text?: string } }>()

Can you tell us more about what you need to use the text property for so we can better understand your use case and why <slot> didn't work for you?

Hi @lihbr

Thanks for the reply!

We wanted a way for content users to input an id to be used for a GiveButter widget. GiveButter use a custom tag like this (simplified) <givebutter-widget :id="props.node.text"></givebutter-widget>.
So we thought a nice way to do this would be to use a ‘givebutter’ label which renders the id appropriately.

That's really clever, love it!

I'll see what we can do regarding the rich text typing with my colleagues. Also, simplifying that kind of workflow is definitely something we want to work on so hopefully we'll have a more integrated way of enabling that kind of widgets within rich text fields :slight_smile:

1 Like

Thank you! Something that would be really helpful is being able to create this sort of ‘widget’ label globally for all RichTextFields. I understand why this is difficult with the current architecture of RichTextFields but maybe something to consider? :)

1 Like