Gutenberg Line Break Format

line-break.js

/**
 * Format: line break
 *
 * Adds a line break option to any Rich Text editor that adds a <br> tag
 */

const { __ } = wp.i18n;
const { insertObject, registerFormatType } = wp.richText;
const { RichTextToolbarButton } = wp.blockEditor;

const toolbarIcon = 'editor-break';

const name = 'paragon/format-line-break';

registerFormatType(
	name,
	{
		title: __( 'Line Break' ),
		tagName: 'br',
		className: null,
		keywords: [ 'icon', 'font awesome' ],
		edit: ( { isObjectActive, onChange, onFocus, value } ) => {
			return (
				<RichTextToolbarButton
					icon={ toolbarIcon }
					title={ __( 'Line Break' ) }
					isActive={ isObjectActive }
					onClick={ () => {
						onChange(
							insertObject( value, {
								type: name,
								attributes: {
									'data-rich-text-line-break': 'true',
								},
							} )
						);
						onFocus();
					} }
				/>
			);
		},
	}
);