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();
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' );
}
}
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;
}
return /^\S*$/.test( text.slice( index + triggerPrefix.length ) );
} );
if ( ! open ) {
this.reset();
return;
}
const safeTrigger = escapeRegExp( open.triggerPrefix );
const match = text.match( new RegExp( `${ safeTrigger }(\\S*)$` ) );
const query = match && match[ 1 ];
const { open: wasOpen, suppress: wasSuppress, query: wasQuery } = this.state;
if ( open && ( ! wasOpen || open.idx !== wasOpen.idx || query !== wasQuery ) ) {
if ( open.isDebounced ) {
this.debouncedLoadOptions( open, query );
} else {
this.loadOptions( open, query );
}
}
// create a regular expression to filter the options
const search = open ? new RegExp( '(?:\\b|\\s|^)' + escapeRegExp( query ), 'i' ) : /./;
// filter the options we already have
const filteredOptions = open ? filterOptions( search, this.state[ 'options_' + open.idx ] ) : [];
// check if we should still suppress the popover
const suppress = ( open && wasSuppress === open.idx ) ? wasSuppress : undefined;
// update the state
if ( wasOpen || open ) {
this.setState( { selectedIndex: 0, filteredOptions, suppress, search, open, query } );
}
// announce the count of filtered options but only if they have loaded
if ( open && this.state[ 'options_' + open.idx ] ) {
this.announce( filteredOptions );
}
}
}
}