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
  multiline?: boolean
  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

Property	Definition
`renderBlock`	A React functional component used to render each paragraph of text.
`propName`	The prop of the Brick component corresponding to this text.
`placeholder`	The placeholder to show when the text is empty.
`multiline`	Default: `true`. If set to `false` it prevents multiline text.
`allowedFeatures`	An array of allowed rich text features: the available features are of type `types.RichTextFeatures`
`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.Link,
    types.RichTextFeatures.UnorderedList,
    types.RichTextFeatures.Quote,
  ]}
  renderBold={({ children, attributes }) => (
    <b className="font-bold text-gray-900" {...attributes}>
      {children}
    </b>
  )}
/>

RichText

Properties#

Properties definition#

Usage example#

Properties

Properties definition

Usage example