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’s value (strictly needed only for RSC, but it’s avisable to always provide it for server componenents 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

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.