markPluginConstructor

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

For a typical Mark plugin (bold, italic, highlight…), React Bricks provides the markPluginConstructor helper that allows you to create a new plugin very quickly.

It just accepts a simple MarkPlugin object:

type MarkPluginConstructor = (markPlugin: MarkPlugin) => RichTextPlugin

interface MarkPlugin {
  name: string
  label?: string
  hotKey?: string
  render: (props: RenderLeafProps) => 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.

Usage example

Here’s the code for React Bricks bold plugin, created using the markPluginConstructor

import React from 'react'
import { FaBold } from 'react-icons/fa'
import { markPluginConstructor } from 'react-bricks/frontend'

const plugin = markPluginConstructor({
  name: 'bold',
  hotKey: 'mod+b',
  render: (props: any) => <strong>{props.children}</strong>,
  icon: <FaBold />,
})

export default plugin