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

Property	Definition
propName	The prop of the Brick component corresponding to this text.
renderBlock	A React functional component used to render each paragraph of text.
placeholder	The placeholder to show when the text is empty.
renderPlaceholder	A React functional component used to render the placeholder, if you need to change the default display.
multiline	Default: true. If set to false it prevents multiline text.
softLineBreak	Default: true. If set to false it prevents soft line breaks.
allowedFeatures	An array of allowed rich text features: the available features are of type types.RichTextFeatures
metaFieldName	Bind the text value to a page Meta field (2-way data binding)
customFieldName	Bind the text value to a page Custom field (2-way data binding)
renderBold	The optional render function for the BOLD marker.
renderItalic	The optional render function for the ITALIC marker.
renderCode	The optional render function for the CODE marker.
renderHighlight	The optional render function for the HIGHLIGHT marker.
renderLink	The 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).
renderUL	The optional render function for Unordered Lists.
renderOL	The optional render function for Ordered Lists.
renderLI	The optional render function for List Items.
renderH1..H6	The optional render function for Headings.
renderQuote	The 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>
  )}
/>