Lexical Editor

Overview

Webiny uses Lexical Editor to allow users to create rich text content quickly. Lexical Editor is created by Meta, it’s open source, and very customizable. To learn more about how Lexical Editor works, check the official docs.

In this article, we’ll cover the Lexical Editor configuration for the Headless CMS Rich Text field. The configuration includes toolbar actions, plugins, and Lexical nodes.

Toolbar

Headless CMS uses a static toolbar, which is always visible, unlike the Page Builder, which uses a floating toolbar. Webiny ships with a set of default actions, but you can add new actions, replace existing actions, or remove them completely.

Static Rich Text Editor Toolbar

(click to enlarge)

Discover Actions

When working with actions, you must know their names to be able to target them via code. The easiest way to discover existing actions is to use the React Dev Tools plugin for your browser, and inspect the toolbar action element. From there, you can look at the Fragment key value.

Discover Toolbar Actions

(click to enlarge)

We’ve also attached a table of known action names at the bottom of the article, for your convenience.

Add an Action

To add a new toolbar action, use the <ToolbarAction> component and mount it within your Admin app.

Replace an Action

To replace an existing action with a new action element, reference the existing action by name, and pass a new element via the element prop:

Remove an Action

To remove an action, reference the existing action by name, and pass a remove prop to the <ToolbarAction> element:

Position an Action

To position an existing or a new custom action, use before or after props on the <ToolbarAction> element:

Plugins

Plugins allow you to hook into the Lexical editor state and develop custom functionality, show custom UI, etc. Please read the official docs for more information about the Lexical plugins.

Add a Plugin

To add a new Lexical plugin, you need to use the <Plugin> component and mount it within your Admin app.

Please refer to the @webiny/lexical-editor package on our Github, for real life examples of plugins.

Replace a Plugin

To replace an existing plugin with a new plugin, reference the existing plugin by name, and pass a new element via the element prop:

Remove a Plugin

To remove a plugin, reference the existing plugin by name, and pass a remove prop to the <Plugin> element:

Position a Plugin

To position an existing or a custom plugin, use before or after props on the <Plugin> element:

Built-in Plugins

Nodes

Please read the official docs to learn what nodes are and why they’re important.

Add a Node

To add a new Lexical node, use the <Node> component and mount it within your Admin app.

Please check the official Lexical documentation for full example.

Replace a Node

To replace your custom Lexical node with a new node, reference the existing node by name, and pass a new node class via the node prop:

Remove a Node

To remove a node, reference the existing node by name, and pass a remove prop to the <Node> element:

Position a Node

To position your nodes, you can use before and after props on the <Node> element:

Built-in Toolbar Actions