blockPluginConstructor

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