Add Custom Buttons to the lightning-input-rich-text Base Component (Beta)

You can add buttons to perform actions that you define, such as inserting an email template, applying formats, or adding a link to your FAQ. You can even open a popup from a custom button. Define a custom button using two new components together, nested in the lightning-input-rich-text component.
Note

Note

As a beta feature, Custom Buttons for lightning-input-rich-text is a preview and isn’t part of the “Services” under your master subscription agreement with Salesforce. Use this feature at your sole discretion, and make your purchase decisions only on the basis of generally available products and features. Salesforce doesn’t guarantee general availability of this feature within any particular time frame or at all, and we can discontinue it at any time. This feature is for evaluation purposes only, not for production use. It’s offered as is and isn’t supported, and Salesforce has no liability for any harm or damage arising out of or in connection with it. All restrictions, Salesforce reservation of rights, obligations concerning the Services, and terms for related Non-Salesforce Applications and Content apply equally to your use of this feature. You can provide feedback and suggestions for Custom Buttons for lightning-input-rich-text in the Lightning Components Development group in the Trailblazer Community.

Where: This change applies to Lightning Experience, Lightning communities, and the Salesforce app.

How: In your lightning-input-rich-text component, place a lightning-rich-text-toolbar-button-group component in a slot named toolbar to contain your custom buttons. Place a lightning-rich-text-toolbar-button component for each custom button inside the lightning-rich-text-toolbar-button-group component.

In the lightning-rich-text-toolbar-button component, display a utility icon on the button using the icon-name attribute, and specify onclick for your button’s action.

lightning-rich-text-toolbar-button provides the methods showPopup() and closePopup(), which you can use in your button handler to open and close a popup. Provide the content of the popup by nesting components inside lightning-rich-text-toolbar-button.

This example adds a custom button to apply the code-block style. The lightning-input-rich-text component doesn’t include code-block by default. The formats attribute must specify all the formats to allow in the rich text editor, including code-block.

<template>
    <lightning-input-rich-text formats="font, bold, italic, underline, strike,
    list, indent, align, link, image, clean, code, code-block, color, background, header">
        <lightning-rich-text-toolbar-button-group slot="toolbar" aria-label="First group">
            <lightning-rich-text-toolbar-button
                icon-name="utility:insert_tag_field"
                icon-alternative-text="Code Block"
                onclick={handleCodeBlockButtonClick}>
            </lightning-rich-text-toolbar-button>
        </lightning-rich-text-toolbar-button-group>
    </lightning-input-rich-text>
</template>

The button handler gets the format that’s currently applied, and then sets or unsets the code-block format using the setFormat() method.

import { LightningElement } from 'lwc';

export default class CustomButtonDemo extends LightningElement {
    handleCodeBlockButtonClick() {
        const inputRichText = this.template.querySelector('lightning-input-rich-text');
        let format = inputRichText.getFormat();

        // Set or unset code-block format based on format on current selection
        if (format['code-block']) {
            inputRichText.setFormat({ 'code-block': false });
        } else {
            inputRichText.setFormat({ 'code-block': true });
        }
    }
}