How to use the @wordpress/rich-text.registerFormatType function in @wordpress/rich-text

//
RT.join([VALUE, VALUE]);
RT.join([], VALUE);
RT.join([], 'foo');
RT.join([VALUE], 'foo');

//
// registerFormatType
//
RT.registerFormatType('foo', {
    tagName: 'span',
    className: 'foo',
    title: 'Foo',
    edit: () =&gt; <span>Hello World</span>,
});
RT.registerFormatType('foo', {
    tagName: 'span',
    className: null,
    title: 'Foo',
    keywords: ['foo', 'bar', 'baz'],
    object: false,
    attributes: {
        className: 'class',
        myFoo: 'data-my-foo',
    },
    edit(props) {
        return <span data-is-active="{props.isActive}">{props.value}</span>;
    },
});

//
// remove

/**
 * WordPress dependencies
 */
import { registerFormatType } from '@wordpress/rich-text';

/**
 * Internal dependencies
 */
import Edit from './edit';

// Register fake format.
registerFormatType( 'ol/attributions', {
	title: 'Attribution',
	tagName: 'a',
	className: 'attribution-anchor',
	edit: Edit,
} );

colorType === 'low' ? '' :
										highlightColor || textColor || ''

								onChange( createApplyFormat( value, colorType, defaultTextColor, defaultHighlightColor ), { withoutHistory: true } )
							} }
							isSmall
						/>
					
				
				}
			
		
	)
}

registerFormatType(
	'ugb/highlight', {
		title: __( 'Highlight Text', i18n ),
		tagName: 'span',
		className: 'ugb-highlight',
		edit: HighlightButton,
		attributes: {
			style: 'style',
		},
	}
)

domReady( () => {
	// Turn off EditorsKit features to prevent duplicates.
	if ( ! select( 'core/edit-post' ).isFeatureActive( 'disableEditorsKitColorsFormats' ) ) {
		dispatch( 'core/edit-post' ).toggleFeature( 'disableEditorsKitColorsFormats' )
	}

const unsubscribe = subscribe( () => {
	const underlineFormat = select( 'core/rich-text' ).getFormatType( 'core/underline' );
	if ( ! underlineFormat ) {
		return;
	}
	unsubscribe();
	const settings = unregisterFormatType( 'core/underline' );
	registerFormatType( 'wpcom/underline', {
		...settings,
		name: 'wpcom/underline',
		edit( { isActive, value, onChange } ) {
			const onToggle = () =>
				onChange(
					toggleFormat( value, {
						type: 'wpcom/underline',
						attributes: {
							style: 'text-decoration: underline;',
						},
					} )
				);

			return (

].forEach( ( { name, ...settings } ) => registerFormatType( name, settings ) );

].forEach( ( { name, settings } ) => {
		registerFormatType( name, settings );
	} );
}

if ( ! selectedBlock ) {
			return {};
		}
		return {
			blockId: selectedBlock.clientId,
			blockName: selectedBlock.name,
			isBlockJustified: 'justify' === get( selectedBlock, 'attributes.align' ),
		};
	} ),
	withDispatch( dispatch => ( {
		updateBlockAttributes: dispatch( 'core/editor' ).updateBlockAttributes,
	} ) ),
	ifCondition( props => 'core/paragraph' === props.blockName )
)( RichTextJustifyButton );

registerFormatType( 'wpcom/justify', {
	title: wpcomGutenberg.richTextToolbar.justify,
	tagName: 'p',
	className: null,
	edit: ConnectedRichTextJustifyButton,
} );

formats.keys().sort( ( a, b ) => ( a.priority > b.priority ) ? 1 : -1 ).forEach( ( modulePath ) => {
	const { name, settings } = formats( modulePath );
	registerFormatType( name, settings );
} );

* WordPress dependencies
 */
import { registerFormatType } from "@wordpress/rich-text";
import { Fragment } from "@wordpress/element";
import { doAction } from "@wordpress/hooks";

/**
 * Internal dependencies
 */
import EditComponent from "./edit-component";

/**
 * @see https://developer.wordpress.org/block-editor/tutorials/format-api/1-register-format/
 */

registerFormatType("wordlift/annotation", {
  /*
   * The `attributes` property is undocumented as basically the `WPFormat` class.
   *
   * Run this in the Developer Tools > Console to see what other formats return
   * as WPFormat:
   *  wp.data.select( 'core/rich-text' ).getFormatTypes();
   */
  attributes: { id: "id", class: "class", itemid: "itemid" },
  tagName: "span",
  className: "textannotation",
  title: "Annotation",
  edit: EditComponent
});