Skip to main content

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.
📌

For usage with Next /App Router, please read the React Server Components Guide.

Properties

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

interface RichTextProps {
propName: string
renderBlock: (props: RenderElementProps) => JSX.Element
placeholder: string
renderPlaceholder: React.FC
multiline?: boolean
softLineBreak?: boolean
allowedFeatures?: types.RichTextFeatures[]
metaFieldName?: 'title' | 'description' | 'language' // New in 3.3.0
customFieldName?: string // New in 3.3.0
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
propNameThe prop of the Brick component corresponding to this text.
renderBlockA React functional component used to render each paragraph of text.
placeholderThe placeholder to show when the text is empty.
renderPlaceholderA React functional component used to render the placeholder, if you need to change the default display.
multilineDefault: true. If set to false it prevents multiline text.
softLineBreakDefault: true. If set to false it prevents soft line breaks.
allowedFeaturesAn array of allowed rich text features: the available features are of type types.RichTextFeatures
metaFieldNameBind the text value to a page Meta field (2-way data binding)
customFieldNameBind the text value to a page Custom field (2-way data binding)
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.Subscript,
types.RichTextFeatures.Superscript,
types.RichTextFeatures.Link,
types.RichTextFeatures.UnorderedList,
types.RichTextFeatures.OrderedList,
types.RichTextFeatures.Quote,
types.RichTextFeatures.Heading1,
types.RichTextFeatures.Heading2,
types.RichTextFeatures.Heading3,
types.RichTextFeatures.Heading4,
types.RichTextFeatures.Heading5,
types.RichTextFeatures.Heading6,
]}
// Override default <b> tag for Bold style
renderBold={({ children, attributes }) => (
<b className="font-bold text-gray-900" {...attributes}>
{children}
</b>
)}
/>