Custom keyboard shortcut

[abhi3315]

I have registered a custom format type which I can apply from the toolbar. But I want to register a custom keyboard shortcut to apply the custom format type.

How can I achieve this.

[devfle]

Hi @abhi3315,

you could use the RichTextShortcut component from the block-editor package inside of your format types edit function.

The component: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/rich-text/shortcut.js#L12

Example from core/bold format type: https://github.com/WordPress/gutenberg/blob/trunk/packages/format-library/src/bold/index.js#L33

Code-Example:

import { registerFormatType, toggleFormat } from '@wordpress/rich-text';
import { RichTextToolbarButton, RichTextShortcut } from '@wordpress/block-editor';

const MyCustomButton = ( { isActive, onChange, value } ) => {

    const onToggle = () => {
        onChange(
             toggleFormat( value, {
                  type: 'my-custom-format/sample-output',
                  title: 'Sample output',
              } )
        );
    }

    return (
        <>
	    <RichTextShortcut
	         type="primary"
	         character="a"
	         onUse={onToggle}
            />
           <RichTextToolbarButton
                icon="editor-code"
                title="Sample output"
                onClick={onToggle}
                isActive={ isActive }
           />
       </>
    );
};

registerFormatType( 'my-custom-format/sample-output', {
    title: 'Sample output',
    tagName: 'samp',
    className: null,
    edit: MyCustomButton,
} );

[abhi3315]

@devfle Thanks, It did work.