Skip to main content

RichTextExt

The RichTextExt component is an extensible version of the RichText component.

Unlike the normal RichTextExt, it uses a plugins system: it allows you to replace any part of a default plugin (not just the render function, but also the button icon, label, shortkey etc.) and to add a completely new plugin.

Note: for most use cases you should use the normal RichText, which is easier to use.

Properties

Here's the Typescript interface for the props of the RichTextExt component:

interface RichTextProps {
renderBlock: (props: RenderElementProps) => JSX.Element
propName: string
placeholder: string
multiline?: boolean
plugins?: types.RichTextPlugin[]
}

Properties definition

PropertyDefinition
renderBlockA React functional component used to render each paragraph of text.
propNameThe prop of the Brick component corresponding to this text.
placeholderThe placeholder to show when the text is empty.
multilineDefault: true. If set to false it prevents multiline text.
pluginsAn array of plugins extending the rich text functionality.

Change or create a plugin

The RichTextExt component allows you to change any part of an existing RichText plugin or provide your own plugins.

Let's see the interface of a RichText plugin:

interface RichTextPlugin {
type: 'Mark' | 'Block' | 'List'
name: string
isInline?: boolean
itemName?: string
label: string
hotKey?: string
renderElement?: (props: RenderElementProps) => JSX.Element
renderItemElement?: (props: RenderElementProps) => JSX.Element
renderLeaf?: (props: RenderLeafProps) => JSX.Element
toggle: (editor: Editor, plugins: RichTextPlugin[]) => void
button?: {
icon: React.ReactElement
isActive: (editor: Editor) => boolean
}
enhanceEditor?: (editor: Editor) => Editor
}

React Bricks underneath uses Slate as a rich text editor.
The RenderElementProps and RenderLeafProps are types from Slate. See Slate rendering docs

Plugin properties

PluginDefinition
typeA plugin can be of type "Mark" (a style like bold), "Block" (for example an heading) or "List" (for a list of items, like UL).
nameName of the plugin.
isInline?Is the element inline? For example for links.
itemName?Name of the items element in case of a list
labelDisplayed when you hover the button
hotKey?Hot key (shortcut) to apply this marker or block type
renderElement?The render function for a block plugin. The main arguments to be aware of are children (the actual text content), attributes (that must be spread on the top-level DOM element) and element which is an object whose type is the name of the plugin
renderItemElement?The render function for a single item of a list (think of a li element).
renderLeaf?The render function for a mark plugin (like bold or italic). The argument are children, attributes (see above) and leaf. Leaf is an object with truthy keys for applied markers (if (leaf.bold) {...})
toggleFunction to toggle the marker or block on the editor
buttonCustomize the default button for a plugin or configure the button for a new plugin, providing the icon (a ReactElement) and a isActive function
enhanceEditorFunction to enhance the Slate editor. You return an enhanced editor. Please, refer to Slate documentation. This is a very powerful option to customize the React Bricks RichText behavior.

Usage example

import { RichTextExt as RichText, plugins } from 'react-bricks/frontend'

const { bold, italic, unorderedList, link, quote } = plugins

return (
<RichText
renderBlock={(props: any) => (
<p
className={classNames(
'text-lg sm:text-xl text-center leading-7 sm:leading-8',
textColor
)}
{...props.attributes}
>
{props.children}
</p>
)}
placeholder="Type a text..."
propName="text"
plugins={[
bold,
italic,
unorderedList,
link,
{
...quote,
renderElement: ({ children }) => (
<div className="border-l-4 pl-4 border-pink-500 text-pink-500 text-xl">
{children}
</div>
),
hotKey: 'mod+opt+q',
},
]}
/>
)

Plugins helpers

For typical mark (bold, italic, highlight...) or block (heading, quote, etc.) plugins, React Bricks provides helpers that allow you to create a new plugin very quickly.