RichText

The RichText component enables content editors to edit a multiline rich text.

It is similar to the Text component, but it allows you to select which rich text features editors can use, such as bold, italic, link, highlight, quote, code, headings (H1..H6), ordered list, unordered list, superscript, and subscript.

You can also customize the default render function for each style.

Required properties:

• propName: the name of the prop
• value: prop value. It is strictly required only for RSC, but we recommend always providing it for Server Components compatibility.
• renderBlock: the render function for this text (not strictly required, defaults to a simple <span> if omitted)
• allowedFeatures: the available rich-text features (none by default)

Usage example

// from 'react-bricks/rsc' for usage with server components
import { types, RichText, Link } from 'react-bricks/frontend'

interface MyBrickProps {
  description: types.TextValue
}

const MyBrick: types.Brick<MyBrickProps> = ({ description }) => (
  ...
  <RichText
    propName="description"
    value={description}
    renderBlock={({ children }) => (
      <p className="text-lg text-gray-600">{children}</p>
    )}
    placeholder="Type a description..."

    allowedFeatures={[
      types.RichTextFeatures.Bold,
      types.RichTextFeatures.Italic,
      types.RichTextFeatures.Link,
      //types.RichTextFeatures.Highlight,
      //types.RichTextFeatures.Heading1,
      //types.RichTextFeatures.Heading2,
      //types.RichTextFeatures.Heading3,
      //types.RichTextFeatures.Heading4,
      //types.RichTextFeatures.Heading5,
      //types.RichTextFeatures.Heading6,
      //types.RichTextFeatures.Code,
      //types.RichTextFeatures.Quote,
      //types.RichTextFeatures.OrderedList,
      //types.RichTextFeatures.UnorderedList,
      //types.RichTextFeatures.Subscript,
      //types.RichTextFeatures.Superscript,
    ]}

    // Override default <b> tag for Bold style
    renderBold={({ children }) => (
      <b className="text-pink-500">
        {children}
      </b>
    )}

    // Override rendering for Links
    renderLink={({ children, href, target, rel }) => (
      <Link
        href={href}
        target={target}
        rel={rel}
        className="text-sky-500 hover:text-sky-600 transition-colors"
      >
        {children}
      </Link>
    )}
  />
  ...
)

MyBrick.schema = { ... }

export default MyBrick

Practical how-to

For step-by-step examples, see Add rich text and Customize rich text styles.

Multi-line

By default, the RichText component allows multiple lines of text. You can modify this behavior with these props:

• multiline (default: true): if false, prevents the content editor from creating multiple lines with the Enter key
• softLineBreak (default: true): if false, disables the soft line break (<br />)

Bind to Meta data or Custom fields

Typically, a RichText component is used to save a text value for the current block in the page.

You can also bind it to a page’s custom field or meta field by using customFieldName or metaFieldName instead of propName. This creates a two-way data binding between the visual editing component and the values in the sidebar controls of the “Page” tab. For custom fields, you can opt to save the value as plain text using the customFieldPlainText prop.

Properties

Here’s the Typescript interface for the RichText component props:

// For every RichText usage
interface BaseRichTextProps {
  renderBlock?: (props: { children: React.ReactNode }) => JSX.Element
  placeholder?: string
  renderPlaceholder?: (props: { children: React.ReactNode }) => JSX.Element
  multiline?: boolean
  softLineBreak?: boolean
  allowedFeatures?: types.RichTextFeatures[]
  renderBold?: (props: { children: React.ReactNode }) => JSX.Element
  renderItalic?: (props: { children: React.ReactNode }) => JSX.Element
  renderHighlight?: (props: { children: React.ReactNode }) => JSX.Element
  renderCode?: (props: { children: React.ReactNode }) => JSX.Element
  rendersSub?: (props: { children: React.ReactNode }) => JSX.Element
  renderSup?: (props: { children: React.ReactNode }) => JSX.Element
  renderLink?: (props: { href: string, target?: string. rel?: string }) => JSX.Element
  renderUL?: (props: { children: React.ReactNode }) => JSX.Element
  renderOL?: (props: { children: React.ReactNode }) => JSX.Element
  renderLI?: (props: { children: React.ReactNode }) => JSX.Element
  renderH1?: (props: { children: React.ReactNode }) => JSX.Element
  renderH2?: (props: { children: React.ReactNode }) => JSX.Element
  renderH3?: (props: { children: React.ReactNode }) => JSX.Element
  renderH4?: (props: { children: React.ReactNode }) => JSX.Element
  renderH5?: (props: { children: React.ReactNode }) => JSX.Element
  renderH6?: (props: { children: React.ReactNode }) => JSX.Element
  renderQuote?: (props: { children: React.ReactNode }) => JSX.Element
}

// Usage with propName (usual case)
interface RichTextPropsWithPropName extends BaseRichTextProps {
  propName: string
  value?: types.TextValue
  metaFieldName?: never
  customFieldName?: never
  customFieldPlainText?: never
}

interface RichTextPropsWithMetaFieldName extends BaseRichTextProps {
  propName?: never
  value?: never
  metaFieldName: 'title' | 'description' | 'language'
  customFieldName?: never
  customFieldPlainText?: never
}

interface RichTextPropsWithCustomFieldName extends BaseRichTextProps {
  propName?: never
  value?: never
  metaFieldName?: never
  customFieldName: string
  customFieldPlainText?: boolean
}

/**
 * Props for RichText component
 */
type RichTextProps =
  | RichTextPropsWithPropName
  | RichTextPropsWithMetaFieldName
  | RichTextPropsWithCustomFieldName

Properties definition

Property	Definition
propName	The prop of the Brick component corresponding to this text.
value	The value of the prop for this rich text. Required for Server Components, but always recommended for RSC compatibility
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, for custom display.
multiline	Default: true. If false it prevents multiline text.
softLineBreak	Default: true. If false it prevents soft line breaks.
allowedFeatures	An array of allowed rich text features: the available features are of type types.RichTextFeatures
metaFieldName	Binds the text value to a page Meta field (two-way data binding)
customFieldName	Binds the text value to a page Custom field (two-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 overrides 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.
renderSub	The optional render function for Subscript.
renderSup	The optional render function for Superscript.

Usage with Server Components

When working with Server Components, you need to import from 'react-bricks/rsc':

import { types, RichText, Link } from 'react-bricks/rsc'

Create custom plugins

To enhance the RichText component’s default functionality, such as adding an emoji button, you can use the RichTextExt component. This component is designed to be extended with custom plugins.

With RichTextExt, you can develop sophisticated rich text features, including those requiring configuration popups with custom fields. For more information, see the Extensible RichText documentation.