Can I use this?

This feature is available since Webiny v5.39.0.

What you’ll learn
- how to customize the Lexical editor in Headless CMS

Overview
anchor

Webiny uses Lexical Editorexternal link 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 docsexternal link.

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
anchor

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 ToolbarStatic Rich Text Editor Toolbar
(click to enlarge)

Discover Actions
anchor

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 ActionsDiscover 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
anchor

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

apps/admin/src/App.tsx
Important!
The code snippet above shows the full process of applying Lexical editor customizations to your project. The following sections of this article will only focus on the Lexical config components, and the registration code will be omitted for brevity.

Replace an Action
anchor

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:

apps/admin/src/App.tsx

Remove an Action
anchor

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

apps/admin/src/App.tsx

Position an Action
anchor

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

apps/admin/src/App.tsx

Plugins
anchor

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

Add a Plugin
anchor

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

apps/admin/src/App.tsx

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

Replace a Plugin
anchor

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

apps/admin/src/App.tsx

Remove a Plugin
anchor

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

apps/admin/src/App.tsx

Position a Plugin
anchor

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

apps/admin/src/App.tsx

Built-in Plugins
anchor

ComponentNameDescription
FontColorPluginfontColorApply font color to the text.
ListPluginlistFormat the bullet and numbered lists.
CodeHighlightPlugincodeHighlightFormat code highlight.
TypographyPlugintypographyFormat and apply typography styles for the selected text block.
LinkPluginlinkFormat text to link.
FloatingLinkEditorPluginfloatingLinkEditorManage the form and position of the floating pop-up window where the user can edit the links.
ImagesPluginimagesInsert and edit an image.
QuotePluginquoteFormat the selected text block to quote. This plugin will create quoteblock html tag.

Nodes
anchor

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

Add a Node
anchor

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

apps/admin/src/App.tsx

Please check the official Lexical documentationexternal link for full example.

Replace a Node
anchor

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:

apps/admin/src/App.tsx

Remove a Node
anchor

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

apps/admin/src/App.tsx

Position a Node
anchor

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

apps/admin/src/App.tsx

Built-in Toolbar Actions
anchor

ComponentNameDescription
FontSizeActionfontSizeSet font size.
FontColorActionfontColorChange the font color of the text.
TypographyActiontypographyApply typography styles specified in the theme for the particular selected block of text. For example paragraph, header, list, etc.
BoldActionboldActionSet bold to the selected text.
ItalicActionitalicSet the italic style to the text.
UnderlineActionunderlineSet underline style to the text.
CodeHighlightActioncodeHighlightApply code highlight to the text.
NumberedListActionnumberedListConvert the header or paragraph text block into a numbered list.
BulletListActionbulletListConvert the header or paragraph text block into a bullet list.
ImageActionimageOpen File Manager where the user can select and insert one image at a time.
LinkActionlinkOpen a pop-up where the user can set the URL and convert the text to a link.
QuoteActionquoteConvert the selected text block to a quote.