Experimental Link creation interface

packages/block-editor/README.md

@@ -302,6 +302,10 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inspector-controls/README.md>
 
+<a name="LinkControl" href="#LinkControl">#</a> **LinkControl**
+
+Undocumented declaration.
+
 <a name="MediaPlaceholder" href="#MediaPlaceholder">#</a> **MediaPlaceholder**
 
 _Related_

packages/block-editor/src/components/index.js

@@ -22,6 +22,7 @@ export { default as __experimentalGradientPickerControl } from './gradient-picke
 export { default as InnerBlocks } from './inner-blocks';
 export { default as InspectorAdvancedControls } from './inspector-advanced-controls';
 export { default as InspectorControls } from './inspector-controls';
+export { default as LinkControl } from './link-control';
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as MediaUpload } from './media-upload';
 export { default as MediaUploadCheck } from './media-upload/check';

packages/block-editor/src/components/link-control/README.md

@@ -0,0 +1,53 @@
+# Link Control
+
+### className
+
+- Type: `string`
+- Required: NO
+
+### defaultOpen
+
+- Type: `Boolean`
+- Required: No
+
+### fetchSearchSuggestions
+
+- Type: `Function`
+- Required: YES
+
+### currentLink
+
+- Type:
+- Required:
+
+### linkSettings
+
+- Type:
+- Required:
+
+## Event handlers
+
+### onClose
+
+- Type: `Function`
+- Required:
+
+### onKeyDown
+
+- Type: `Function`
+- Required:
+
+### onKeyPress
+
+- Type: `Function`
+- Required:
+
+### onLinkChange
+
+- Type: `Function`
+- Required:
+
+### onSettingChange
+
+- Type: `Function`
+- Required:

packages/block-editor/src/components/link-control/index.js

@@ -0,0 +1,199 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { isFunction, noop, startsWith } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	ExternalLink,
+	Popover,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+import {
+	useCallback,
+	useState,
+} from '@wordpress/element';
+
+import {
+	safeDecodeURI,
+	filterURLForDisplay,
+	isURL,
+	prependHTTP,
+	getProtocol,
+} from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import LinkControlSettingsDrawer from './settings-drawer';
+import LinkControlSearchItem from './search-item';
+import LinkControlInputSearch from './input-search';
+
+function LinkControl( { currentLink, className, fetchSearchSuggestions, onLinkChange, onSettingsChange = { noop }, currentSettings } ) {
+	// State
+	const [ inputValue, setInputValue ] = useState( '' );
+	const [ isEditingLink, setIsEditingLink ] = useState( true );
+
+	// Handlers
+	const onInputChange = ( value = '' ) => {
+		setInputValue( value );
+	};
+
+	const closeLinkUI = () => {
+		resetInput();
+	};
+
+	const resetInput = useCallback( () => {
+		setInputValue( '' );
+	} );
+
+	const onLinkSelect = ( suggestion ) => ( event ) => {
+		event.preventDefault();
+		event.stopPropagation();
+
+		setIsEditingLink( false );
+
+		if ( isFunction( onLinkChange ) ) {
+			onLinkChange( suggestion );
+		}
+	};
+
+	const onStartEditing = () => {
+		setIsEditingLink( true );
+	};
+
+	const handleDirectEntry = async ( value ) => {
+		let type = 'URL';
+
+		const protocol = getProtocol( value ) || '';
+
+		if ( protocol.includes( 'mailto' ) ) {
+			type = 'mailto';
+		}
+
+		if ( protocol.includes( 'tel' ) ) {
+			type = 'tel';
+		}
+
+		if ( startsWith( value, '#' ) ) {
+			type = 'internal';
+		}
+
+		return [ {
+			id: '1',
+			title: value,
+			url: type === 'URL' ? prependHTTP( value ) : value,
+			type,
+		} ];
+	};
+
+	const handleEntitySearch = async ( value ) => {
+		const results = await Promise.all( [
+			fetchSearchSuggestions( value ),
+			handleDirectEntry( value ),
+		] );
+
+		const couldBeURL = ! value.includes( ' ' );
+
+		// If it's potentially a URL search then concat on a URL search suggestion
+		// just for good measure. That way once the actual results run out we always
+		// have a URL option to fallback on.
+		return couldBeURL ? results[ 0 ].concat( results[ 1 ] ) : results[ 0 ];
+	};
+
+	// Effects
+	const getSearchHandler = useCallback( ( value ) => {
+		const protocol = getProtocol( value ) || '';
+		const isMailto = protocol.includes( 'mailto' );
+		const isInternal = startsWith( value, '#' );
+		const isTel = protocol.includes( 'tel' );
+
+		const handleManualEntry = isInternal || isMailto || isTel || isURL( value ) || value.includes( 'www.' );
+
+		return ( handleManualEntry ) ? handleDirectEntry( value ) : handleEntitySearch( value );
+	}, [ handleDirectEntry, fetchSearchSuggestions ] );
+
+	// Render Components
+	const renderSearchResults = ( { suggestionsListProps, buildSuggestionItemProps, suggestions, selectedSuggestion, isLoading } ) => {
+		const resultsListClasses = classnames( 'block-editor-link-control__search-results', {
+			'is-loading': isLoading,
+		} );
+
+		return (
+			<div className="block-editor-link-control__search-results-wrapper">
+				<div { ...suggestionsListProps } className={ resultsListClasses }>
+					{ suggestions.map( ( suggestion, index ) => (
+						<LinkControlSearchItem
+							key={ `${ suggestion.id }-${ suggestion.type }` }
+							itemProps={ buildSuggestionItemProps( suggestion, index ) }
+							suggestion={ suggestion }
+							onClick={ onLinkSelect( suggestion ) }
+							isSelected={ index === selectedSuggestion }
+							isURL={ suggestion.type.toLowerCase() === 'url' }
+							searchTerm={ inputValue }
+						/>
+					) ) }
+				</div>
+			</div>
+		);
+	};
+
+	return (
+		<Popover
+			className={ classnames( 'block-editor-link-control', className ) }
+			onClose={ closeLinkUI }
+			position="bottom center"
+			focusOnMount="firstElement"
+		>
+			<div className="block-editor-link-control__popover-inner">
+				<div className="block-editor-link-control__search">
+
+					{ ! isEditingLink && (
+						<div
+							className={ classnames( 'block-editor-link-control__search-item', {
+								'is-current': true,
+							} ) }
+						>
+							<span className="block-editor-link-control__search-item-header">
+
+								<ExternalLink
+									className="block-editor-link-control__search-item-title"
+									href={ currentLink.url }
+								>
+									{ currentLink.title }
+								</ExternalLink>
+								<span className="block-editor-link-control__search-item-info">{ filterURLForDisplay( safeDecodeURI( currentLink.url ) ) || '' }</span>
+							</span>
+
+							<Button isDefault onClick={ onStartEditing } className="block-editor-link-control__search-item-action block-editor-link-control__search-item-action--edit">
+								{ __( 'Change' ) }
+							</Button>
+						</div>
+					) }
+
+					{ isEditingLink && (
+						<LinkControlInputSearch
+							value={ inputValue }
+							onChange={ onInputChange }
+							onSelect={ onLinkSelect }
+							renderSuggestions={ renderSearchResults }
+							fetchSuggestions={ getSearchHandler }
+							onReset={ resetInput }
+						/>
+					) }
+
+					{ ! isEditingLink && (
+						<LinkControlSettingsDrawer settings={ currentSettings } onSettingChange={ onSettingsChange } />
+					) }
+				</div>
+			</div>
+		</Popover>
+	);
+}
+
+export default LinkControl;

packages/block-editor/src/components/link-control/input-search.js

@@ -0,0 +1,69 @@
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	IconButton,
+} from '@wordpress/components';
+import {
+	LEFT,
+	RIGHT,
+	UP,
+	DOWN,
+	BACKSPACE,
+	ENTER,
+} from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import {
+	URLInput,
+} from '../';
+
+const LinkControlInputSearch = ( { value, onChange, onSelect, renderSuggestions, fetchSuggestions, onReset } ) => {
+	const stopPropagation = ( event ) => {
+		event.stopPropagation();
+	};
+
+	const stopPropagationRelevantKeys = ( event ) => {
+		if ( [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf( event.keyCode ) > -1 ) {
+			// Stop the key event from propagating up to ObserveTyping.startTypingInTextField.
+			stopPropagation( event );
+		}
+	};
+
+	return (
+		<form>
+			<URLInput
+				className="block-editor-link-control__search-input"
+				value={ value }
+				onChange={ onChange }
+				onKeyDown={ ( event, suggestion ) => {
+					stopPropagationRelevantKeys( event );
+					if ( event.keyCode === ENTER ) {
+						onSelect( suggestion )( event );
+					}
+				} }
+				onKeyPress={ stopPropagation }
+				placeholder={ __( 'Search or type url' ) }
+				renderSuggestions={ renderSuggestions }
+				fetchLinkSuggestions={ fetchSuggestions }
+				handleURLSuggestions={ true }
+			/>
+
+			<IconButton
+				disabled={ ! value.length }
+				type="reset"
+				label={ __( 'Reset' ) }
+				icon="no-alt"
+				className="block-editor-link-control__search-reset"
+				onClick={ onReset }
+			/>
+
+		</form>
+	);
+};
+
+export default LinkControlInputSearch;

packages/block-editor/src/components/link-control/search-item.js

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import TextHighlight from './text-highlight';
+
+/**
+ * WordPress dependencies
+ */
+import { safeDecodeURI } from '@wordpress/url';
+import { __ } from '@wordpress/i18n';
+
+import {
+	Icon,
+} from '@wordpress/components';
+
+export const LinkControlSearchItem = ( { itemProps, suggestion, isSelected = false, onClick, isURL = false, searchTerm = '' } ) => {
+	return (
+		<button
+			{ ...itemProps }
+			onClick={ onClick }
+			className={ classnames( 'block-editor-link-control__search-item', {
+				'is-selected': isSelected,
+				'is-url': isURL,
+				'is-entity': ! isURL,
+			} ) }
+		>
+			{ isURL && (
+				<Icon className="block-editor-link-control__search-item-icon" icon="admin-site-alt3" />
+			) }
+			<span className="block-editor-link-control__search-item-header">
+				<span className="block-editor-link-control__search-item-title">
+					<TextHighlight text={ suggestion.title } highlight={ searchTerm } />
+				</span>
+				<span aria-hidden={ ! isURL } className="block-editor-link-control__search-item-info">
+					{ ! isURL && ( safeDecodeURI( suggestion.url ) || '' ) }
+					{ isURL && (
+						__( 'Press ENTER to add this link' )
+					) }
+				</span>
+			</span>
+			{ suggestion.type && (
+				<span className="block-editor-link-control__search-item-type">{ suggestion.type }</span>
+			) }
+		</button>
+	);
+};
+
+export default LinkControlSearchItem;
+