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.