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.
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?
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.
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
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? :)