As we saw, the RichTextExt can be extended using a plugin system.

For a typical Block or List plugin (heading, quote, unordered list...), React Bricks provides the blockPluginConstructor helper that allows you to create a new plugin very quickly.

It just accepts a simple BlockPlugin object:

type BlockPluginConstructor = (blockPlugin: BlockPlugin) => RichTextPlugin
interface BlockPlugin {
name: string
isInline?: boolean
itemName?: string
label?: string
hotKey?: string
render: (props: RenderElementProps) => JSX.Element
renderItem?: (props: RenderElementProps) => JSX.Element
icon: React.ReactElement

For the meaning of the arguments, you can see the interface for a RichTextPlugin. The icon is the button's icon. If you set an itemName React Bricks will create a List plugin, otherwise a Block one.

Usage example

Here's the code for React Bricks h1 plugin, created using the blockPluginConstructor

import React from 'react'
import { MdLooksOne } from 'react-icons/md'
import { blockPluginConstructor } from 'react-bricks/frontend'
const plugin = blockPluginConstructor({
name: 'h1',
hotKey: 'mod+shift+1',
render: (props: any) => <h1>{props.children}</h1>,
icon: <MdLooksOne />,
export default plugin