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

const VALUE: RT.Value = {
    formats: [],
    replacements: [],
    text: '',
};

const FORMAT: RT.Format = {
    type: 'foo',
};

//
// applyFormat
//
RT.applyFormat(VALUE, FORMAT);
RT.applyFormat(VALUE, FORMAT, 10);
RT.applyFormat(VALUE, FORMAT, 10, 20);

//
// concat
//
RT.concat();
RT.concat(VALUE);
RT.concat(VALUE, VALUE);
RT.concat(VALUE, VALUE, VALUE);

//
// create
//
RT.create();
RT.create({ text: 'Hello World!' });
RT.create({ html: '<p>Hello World!</p><p>' });
RT.create({ element: document.createElement('div') });</p>

const VALUE: RT.Value = {
    formats: [],
    replacements: [],
    text: '',
};

const FORMAT: RT.Format = {
    type: 'foo',
};

//
// applyFormat
//
RT.applyFormat(VALUE, FORMAT);
RT.applyFormat(VALUE, FORMAT, 10);
RT.applyFormat(VALUE, FORMAT, 10, 20);

//
// concat
//
RT.concat();
RT.concat(VALUE);
RT.concat(VALUE, VALUE);
RT.concat(VALUE, VALUE, VALUE);

//
// create
//
RT.create();
RT.create({ text: 'Hello World!' });
RT.create({ html: '<p>Hello World!</p><p>' });</p>

setLinkTarget( opensInNewWindow ) {
		const { activeAttributes: { url = '' }, value, onChange } = this.props;

		this.setState( { opensInNewWindow } );

		// Apply now if URL is not being edited.
		if ( ! isShowingInput( this.props, this.state ) ) {
			const selectedText = getTextContent( slice( value ) );

			onChange( applyFormat( value, createLinkFormat( {
				url,
				opensInNewWindow,
				text: selectedText,
			} ) ) );
		}
	}

// Highlight.
	if ( colorType === 'highlight' ) {
		return applyFormat(
			textValue,
			{
				type: 'ugb/highlight',
				attributes: {
					style: ( textColor ? `color: ${ textColor };` : '' ) +
						( highlightColor ? `background-color: ${ highlightColor }` : '' ),
				},
			}
		)
	}

	// Low Highlight.
	return applyFormat(
		textValue,
		{
			type: 'ugb/highlight',
			attributes: {
				style: ( textColor ? `color: ${ textColor };` : '' ) +
					( highlightColor ? `background: linear-gradient(to bottom, transparent 50%, ${ highlightColor } 50%)` : '' ),
			},
		}
	)
}

const indexBefore = textBefore.lastIndexOf( BACKTICK );

			if ( indexBefore === -1 ) {
				return record;
			}

			const startIndex = indexBefore;
			const endIndex = start - 2;

			if ( startIndex === endIndex ) {
				return record;
			}

			record = remove( record, startIndex, startIndex + 1 );
			record = remove( record, endIndex, endIndex + 1 );
			record = applyFormat( record, { type: 'code' }, startIndex, endIndex );

			return record;
		},
	];

onChange={ ( color ) => {
									if ( color ) {
										onChange( applyFormat( value, {
											type: name,
											attributes: {
												style: `color:${ color }`,
											},
										} ) );

										return;
									}

									onChange( removeFormat( value, name ) );
								} }
							/>

const { inputValue, opensInNewWindow } = this.state;
		const url = prependHTTP( inputValue );
		const selectedText = getTextContent( slice( value ) );
		const format = createLinkFormat( {
			url,
			opensInNewWindow,
			text: selectedText,
		} );

		event.preventDefault();

		if ( isCollapsed( value ) && ! isActive ) {
			const toInsert = applyFormat( create( { text: url } ), format, 0, url.length );
			onChange( insert( value, toInsert ) );
		} else {
			onChange( applyFormat( value, format ) );
		}

		this.resetState();

		if ( ! isValidHref( url ) ) {
			speak( __( 'Warning: the link has been inserted but may have errors. Please test it.' ), 'assertive' );
		} else if ( isActive ) {
			speak( __( 'Link edited.' ), 'assertive' );
		} else {
			speak( __( 'Link inserted.' ), 'assertive' );
		}
	}

addLink() {
			const { value, onChange } = this.props;
			const text = getTextContent( slice( value ) );

			if ( text && isURL( text ) ) {
				onChange( applyFormat( value, { type: name, attributes: { url: text } } ) );
			} else {
				this.setState( { addingLink: true } );
			}
		}