Custom Buttons in Lightning Input Rich Text

How often have you wanted to use a standard component but discovered that it only met a portion of the requirements, giving you only two options: use the standard component as is and ignore the additional requirements, or create a similar component yourself from scratch, which takes more time.

There is a good possibility that this won't happen with the lightning-input-rich-text component, as it provide a very high flexibility. First, by attributes, such as the option for removing standard buttons, and then we also have the ability to add our own custom buttons inside the toolbar. 

To add a custom button inside rich text component all we need to add inside the standard lightning-rich-text element is:

1.lightning-rich-text-toolbar-button-group

2.lightning-rich-text-toolbar-button - per each button that you need

In the example that follows, I've disabled all but one of the default buttons (text format), and I've added a custom icon for adding merge field. 

<lightning-input-rich-text 
        value={richTextValue} 
        onchange={contentAddedHandler} 
        disabled-categories="FORMAT_BODY,ALIGN_TEXT,INSERT_CONTENT,REMOVE_FORMATTING">

        <lightning-rich-text-toolbar-button-group 
            slot="toolbar" 
            aria-label="Template Button Group">
            <lightning-rich-text-toolbar-button
                icon-name="utility:merge_field"
                icon-alternative-text="Add Merge Field" 
                onclick={addMergeField}>
            </lightning-rich-text-toolbar-button>
            
        </lightning-rich-text-toolbar-button-group>
    </lightning-input-rich-text>

Although the complexity of such an addition depends on the buttons we add and their logic, adopting this strategy allows us to avoid having to create such a component from scratch, which saves us a lot of time and work. We can use the standard component and incorporate our own special logic.

Full code in git: https://github.com/liron50/input-rich-text-demo