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 {
  propName: string
  renderBlock: React.FC
  placeholder: string
  allowedFeatures?: types.RichTextFeatures[]
  renderBold?: React.FC
  renderItalic?: React.FC
  renderHighlight?: React.FC
  renderCode?: React.FC
  renderLink?: React.FC
  renderUL?: React.FC
  renderOL?: React.FC
  renderLI?: React.FC
}

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.
allowedFeaturesAn array of allowed rich text features: the available features are BOLD, ITALIC, CODE, HIGHLIGHT, LINK, UL, OL.

You find them on the exported 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.

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.OrderedList,
  ]}
/>