Override formatting toolbar button with your own custom button

[julian]

As part of the creation of the Tenor GIF plugin, I needed to add a button to the composer toolbar:

Normally, this is fairly straightforward. filter:composer.formatting is called, and caught with this listener:

plugin.registerFormatting = function (payload, callback) {
	payload.options.push({ name: 'gif', className: 'fa fa-tenor-gif', title: 'Insert GIF' });
	callback(null, payload);
};

The className denotes a class name (of course), and if you use fa and and corresponding fa-* class, you can select from hundreds of possible icons. Unfortunately for me, there was no "gif" icon, nor one for Tenor GIF.

So I had to set out to make my own. To do this, you'll see that above, I set the class fa-tenor-gif. This maps to nothing, since the icon doesn't exist. However, it does provide a nice easy way to find and style the button itself.

Then in my stylesheet, I simply added this styling to create my button via CSS pseudo-elements:

.fa-tenor-gif::before {
	content: 'GIF';
	font-size: 1rem;
	font-family: sans;
	background: #333;
	color: #fff;
	padding: 0.25rem 0.5rem;
	border-radius: 0.5em;
	position: relative;
	top: -0.2rem;
}

I wanted to go for a "badge-like" icon, since the text "GIF" fairly easily indicates what its purpose is for, hence the dark background, light text, and slight border radius.

If you wanted to do something else, like replace the icon with a picture of your own, then you might want to look into using background-image, but that is outside of the scope of this tutorial