Warning
You're browsing the documentation for an old version of Webiny. Consider upgrading your project to Webiny 5.39.x.
Can I use this?

This feature is available since Webiny v5.37.0.

What you’ll learn
- how to customize the Lexical editor in Page Builder

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 Heading and Paragraph elements of the Page Builder page editor. The configuration includes toolbar actions, plugins, and Lexical nodes.

Heading Element
anchor

Heading element is used for adding headings. It has its own actions, plugins and nodes, which are separated from the Paragraph element, and thus, have a separate namespace with configuration components.

Toolbar
anchor

Page Builder uses a floating toolbar, which is only visible when you select some text in the editor. Webiny ships with a set of default actions, but you can add new actions, replace existing actions, or remove them completely.

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 <Heading.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 <Heading.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 <Heading.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 <Heading.Plugin> component and mount it within your Admin app.

apps/admin/src/App.tsx

In the example above, we created a floating link popup to enable users to edit links. You can refer to our example repositoryexternal link for a step-by-step guide on building this plugin.

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 <Heading.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 <Heading.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 <Heading.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 <Heading.Node> element:

apps/admin/src/App.tsx

Position a Node
anchor

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

apps/admin/src/App.tsx

Paragraph Element
anchor

The Paragraph element is used for writing the main page content. The configuration API is identical to that of the Heading element. The only difference is that it has its own component namespace, so instead of LexicalEditorConfig.Heading, you need to use the LexicalEditorConfig.Paragraph namespace. Everything else is the same, so you can refer to the Heading element for the code samples and API descriptions.

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.