Create a brick

Add rich text

Add a RichText component to your custom brick for editable formatted text.

Estimated time: 2 minRaw Markdown

What you'll build

In this how-to, you'll extend the TextImage brick from the previous guide by adding a description field rendered with the React Bricks <RichText> component.

You'll:

add a description prop to the component interface
import RichText
render a <RichText> component below the existing <Text>
set a default value in the schema

At the end, editors will be able to edit formatted text below the title directly in the visual editor.

Start from the previous brick

After the previous guide, your TextImage brick should look like this:

import { Text, types } from 'react-bricks/rsc'
 
interface TextImageProps {
  title: types.TextValue
}
 
const TextImage: types.Brick<TextImageProps> = ({ title }) => {
  return (
    <Text
      propName="title"
      value={title}
      placeholder="Type a title..."
      renderBlock={({ children }) => (
        <h2 className="text-3xl font-extrabold">{children}</h2>
      )}
    />
  )
}
 
TextImage.schema = {
  name: 'text-image',
  label: 'Text Image',
 
  getDefaultProps: () => ({
    title: 'Thick as a brick',
  }),
}
 
export default TextImage

Now we'll add a rich-text description below the title.

Add the `description` prop

First, update the component interface to include a description field:

interface TextImageProps {
  title: types.TextValue
  description: types.TextValue
}

Then read both props from the component:

const TextImage: types.Brick<TextImageProps> = ({ title, description }) => {

Import and render `<RichText>`

Now import RichText from react-bricks/rsc if you're using Next.js with the App Router, or from react-bricks/astro if you're using Astro, and add it right after the existing <Text> component:

import { RichText, Text, types } from 'react-bricks/rsc'
 
interface TextImageProps {
  title: types.TextValue
  description: types.TextValue
}
 
const TextImage: types.Brick<TextImageProps> = ({ title, description }) => {
  return (
    <>
      <Text
        propName="title"
        value={title}
        placeholder="Type a title..."
        renderBlock={({ children }) => (
          <h2 className="text-3xl font-extrabold">{children}</h2>
        )}
      />
 
      <RichText
        propName="description"
        value={description}
        placeholder="Type a description..."
        renderBlock={({ children }) => (
          <p className="text-lg text-slate-600">{children}</p>
        )}
        allowedFeatures={[
          types.RichTextFeatures.Bold,
          types.RichTextFeatures.Link,
        ]}
      />
    </>
  )
}

Here:

propName="description" binds the editor to the description prop
value={description} passes the current rich-text value
renderBlock defines how each paragraph is rendered
allowedFeatures limits formatting to Bold and Link

Add the default value in the schema

To make the new field start with content, add description to getDefaultProps:

TextImage.schema = {
  name: 'text-image',
  label: 'Text Image',
 
  getDefaultProps: () => ({
    title: 'Thick as a brick',
    description: 'Another brick in the wall',
  }),
}

Final code

Your full TextImage.tsx file should now look like this:

import { RichText, Text, types } from 'react-bricks/rsc'
 
interface TextImageProps {
  title: types.TextValue
  description: types.TextValue
}
 
const TextImage: types.Brick<TextImageProps> = ({ title, description }) => {
  return (
    <>
      <Text
        propName="title"
        value={title}
        placeholder="Type a title..."
        renderBlock={({ children }) => (
          <h2 className="text-3xl font-extrabold">{children}</h2>
        )}
      />
 
      <RichText
        propName="description"
        value={description}
        placeholder="Type a description..."
        renderBlock={({ children }) => (
          <p className="text-lg text-slate-600">{children}</p>
        )}
        allowedFeatures={[
          types.RichTextFeatures.Bold,
          types.RichTextFeatures.Link,
        ]}
      />
    </>
  )
}
 
TextImage.schema = {
  name: 'text-image',
  label: 'Text Image',
 
  getDefaultProps: () => ({
    title: 'Thick as a brick',
    description: 'Another brick in the wall',
  }),
}
 
export default TextImage

Try it in the editor

Go back to the visual editor and add the Text Image brick again.

Now you'll have:

an editable title
a rich-text description underneath
basic formatting controls for bold and links

This is a great next step when a plain text field is not enough and editors need simple formatting options.

What's next

Your brick now supports both a simple text field and a rich-text field.

In the next how-tos, you can keep extending it by adding an image and sidebar controls.