RichText

The RichText component allows the user to edit a multiline rich text.

It is very flexible, as it allows you to:

  • Choose the allowed rich text features (Bold, Italic, Code, Highlight, Link).
  • Provide your own components to render each marker.

Properties

Here's the Typescript interface for the props of the RichText component:

interface RichTextProps {
renderBlock: (props: RenderElementProps) => JSX.Element
placeholder: string
propName: string
allowedFeatures?: types.RichTextFeatures[]
renderBold?: (props: RenderLeafProps) => JSX.Element
renderItalic?: (props: RenderLeafProps) => JSX.Element
renderHighlight?: (props: RenderLeafProps) => JSX.Element
renderCode?: (props: RenderLeafProps) => JSX.Element
renderLink?: (props: RenderLinkElementProps) => JSX.Element
renderUL?: (props: RenderElementProps) => JSX.Element
renderOL?: (props: RenderElementProps) => JSX.Element
renderLI?: (props: RenderElementProps) => JSX.Element
renderH1?: (props: RenderElementProps) => JSX.Element
renderH2?: (props: RenderElementProps) => JSX.Element
renderH3?: (props: RenderElementProps) => JSX.Element
renderH4?: (props: RenderElementProps) => JSX.Element
renderH5?: (props: RenderElementProps) => JSX.Element
renderH6?: (props: RenderElementProps) => JSX.Element
renderQuote?: (props: RenderElementProps) => JSX.Element
}

Properties definition

PropertyDefinition
renderBlockA React functional component used to render each paragraph of text.
propNameThe prop of the Brick component corresponding to this text.
placeholderThe placeholder to show when the text is empty.
allowedFeaturesAn array of allowed rich text features: the available features are of type types.RichTextFeatures
renderBoldThe optional render function for the BOLD marker.
renderItalicThe optional render function for the ITALIC marker.
renderCodeThe optional render function for the CODE marker.
renderHighlightThe optional render function for the HIGHLIGHT marker.
renderLinkThe optional render function for the LINK marker.

Warning: this render function will override the default React Bricks Link component (which uses the configured renderLocalLink for local links and a <a> tag for external links).
renderULThe optional render function for Unordered Lists.
renderOLThe optional render function for Ordered Lists.
renderLIThe optional render function for List Items.
renderH1..H6The optional render function for Headings.
renderQuoteThe optional render function for Quote.

Usage example

<RichText
renderBlock={(props: any) => (
<p className="text-lg sm:text-xl text-center" {...props.attributes}>
{props.children}
</p>
)}
placeholder="Type a text..."
propName="text"
allowedFeatures={[
types.RichTextFeatures.Bold,
types.RichTextFeatures.Italic,
types.RichTextFeatures.Code,
types.RichTextFeatures.Highlight,
types.RichTextFeatures.Link,
types.RichTextFeatures.UnorderedList,
types.RichTextFeatures.Quote,
]}
renderBold={({ children, attributes }) => (
<b className="font-bold text-gray-900" {...attributes}>
{children}
</b>
)}
/>