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

RT.removeFormat(VALUE, 'foo');
RT.removeFormat(VALUE, 'foo', 10);

//
// replace
//
RT.replace(VALUE, 'foo', 'bar');
RT.replace(VALUE, /foo/, 'bar');
RT.replace(VALUE, 'foo', match => `${match}bar`);
RT.replace(VALUE, /foo/, match => `${match}bar`);
RT.replace(VALUE, 'foo', (match, a, b) => `${match} ${a} ${b}`);

//
// slice
//
RT.slice(VALUE);
RT.slice(VALUE, 10);
RT.slice(VALUE, 10, 20);

//
// split
//
RT.split(VALUE);
RT.split(VALUE, 'foo');
RT.split(VALUE, 5);
RT.split(VALUE, 'foo', 10);
RT.split(VALUE, 5, 10);
RT.split(VALUE, undefined, 5);

//
// toHTMLString
//

RT.removeFormat(VALUE, 'foo', 10);

//
// replace
//
RT.replace(VALUE, 'foo', 'bar');
RT.replace(VALUE, /foo/, 'bar');
RT.replace(VALUE, 'foo', match => `${match}bar`);
RT.replace(VALUE, /foo/, match => `${match}bar`);
RT.replace(VALUE, 'foo', (match, a, b) => `${match} ${a} ${b}`);

//
// slice
//
RT.slice(VALUE);
RT.slice(VALUE, 10);
RT.slice(VALUE, 10, 20);

//
// split
//
RT.split(VALUE);
RT.split(VALUE, 'foo');
RT.split(VALUE, 5);
RT.split(VALUE, 'foo', 10);
RT.split(VALUE, 5, 10);
RT.split(VALUE, undefined, 5);

//
// toHTMLString
//
RT.toHTMLString({ value: VALUE });

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,
			} ) ) );
		}
	}

submitLink() {
		const { isActive, onChange, speak, value } = this.props;
		const { inputValue, opensInNewWindow, text } = this.state;
		const url = prependHTTP( inputValue );
		const linkText = text || inputValue;
		const format = createLinkFormat( {
			url,
			opensInNewWindow,
			text: linkText,
		} );

		if ( isCollapsed( value ) && ! isActive ) { // insert link
			const toInsert = applyFormat( create( { text: linkText } ), format, 0, linkText.length );
			const newAttributes = insert( value, toInsert );
			onChange( { ...newAttributes, needsSelectionUpdate: true } );
		} else if ( text !== getTextContent( slice( value ) ) ) { // edit text in selected link
			const toInsert = applyFormat( create( { text } ), format, 0, text.length );
			const newAttributes = insert( value, toInsert, value.start, value.end );
			onChange( { ...newAttributes, needsSelectionUpdate: true } );
		} else { // transform selected text into link
			const newAttributes = applyFormat( value, format );
			onChange( { ...newAttributes, needsSelectionUpdate: true } );
		}

		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' );
		}

const characterBefore = text.slice( start - 1, start );

			if ( ! /\s/.test( characterBefore ) ) {
				return record;
			}

			const trimmedTextBefore = text.slice( 0, start ).trim();
			const transformation = findTransform( prefixTransforms, ( { prefix } ) => {
				return trimmedTextBefore === prefix;
			} );

			if ( ! transformation ) {
				return record;
			}

			const content = valueToFormat( slice( record, start, text.length ) );
			const block = transformation.transform( content );

			onReplace( [ block ] );

			return record;
		},
		( record ) => {

submitLink( event ) {
		const { isActive, value, onChange, speak } = this.props;
		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();

componentDidUpdate( oldProps ) {
		if ( oldProps === this.props ) {
			return;
		}

		const { activeAttributes: { url, target } } = this.props;
		const opensInNewWindow = target === '_blank';

		this.setState( {
			inputValue: url || '',
			text: getTextContent( slice( this.props.value ) ),
			opensInNewWindow,
		} );
	}

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 } );
			}
		}

componentDidUpdate( prevProps, prevState ) {
		const { record, completers } = this.props;
		const { record: prevRecord } = prevProps;
		const { open: prevOpen } = prevState;

		if ( ( ! this.state.open ) !== ( ! prevOpen ) ) {
			this.toggleKeyEvents( ! ! this.state.open );
		}

		if ( isCollapsed( record ) ) {
			const text = deburr( getTextContent( slice( record, 0 ) ) );
			const prevText = deburr( getTextContent( slice( prevRecord, 0 ) ) );

			if ( text !== prevText ) {
				const textAfterSelection = getTextContent( slice( record, undefined, getTextContent( record ).length ) );
				const allCompleters = map( completers, ( completer, idx ) => ( { ...completer, idx } ) );
				const open = find( allCompleters, ( { triggerPrefix, allowContext } ) => {
					const index = text.lastIndexOf( triggerPrefix );

					if ( index === -1 ) {
						return false;
					}

					if ( allowContext && ! allowContext( text.slice( 0, index ), textAfterSelection ) ) {
						return false;
					}

if ( characterBefore !== ' ' ) {
			return;
		}

		const trimmedTextBefore = text.slice( 0, start ).trim();
		const prefixTransforms = getBlockTransforms( 'from' )
			.filter( ( { type } ) => type === 'prefix' );
		const transformation = findTransform( prefixTransforms, ( { prefix } ) => {
			return trimmedTextBefore === prefix;
		} );

		if ( ! transformation ) {
			return;
		}

		const content = valueToFormat( slice( value, start, text.length ) );
		const block = transformation.transform( content );

		onReplace( [ block ] );
		__unstableMarkAutomaticChange();
	}, [ onReplace, __unstableMarkAutomaticChange ] );