Autocomplete links to user posts

blocks/autocompleters/index.js

@@ -0,0 +1,132 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { createBlock, getBlockTypes } from '../api';
+import BlockIcon from '../block-icon';
+
+/**
+ * @typedef {Object} CompleterOption
+ * @property {Array.<Component>} label list of react components to render.
+ * @property {Array.<String>} keywords list of key words to search.
+ * @property {*} value the value that will be passed to onSelect.
+ */
+
+/**
+ * @callback FnGetOptions
+ * @returns {Promise.<Array.<CompleterOption>>} A promise that resolves to the list of completer options.
+ */
+
+/**
+ * @callback FnAllowNode
+ * @param {Node} textNode check if the completer can handle this text node.
+ * @returns {boolean} true if the completer can handle this text node.
+ */
+
+/**
+ * @callback FnAllowContext
+ * @param {Range} before the range before the auto complete trigger and query.
+ * @param {Range} range the range of the autocomplete trigger and query.
+ * @param {Range} after the range after the autocomplete trigger and query.
+ * @returns {boolean} true if the completer can handle these ranges.
+ */
+
+/**
+ * @callback FnOnSelect
+ * @param {*} value the value of the completer option.
+ * @param {Range} range the nodes included in the autocomplete trigger and query.
+ * @param {String} query the text value of the autocomplete query.
+ */
+
+/**
+ * @typedef {Object} Completer
+ * @property {?String} className A class to apply to the popup menu.
+ * @property {String} triggerPrefix the prefix that will display the menu.
+ * @property {FnGetOptions} getOptions get the block options in a resolved promise.
+ * @property {?FnAllowNode} allowNode filter the allowed text nodes in the autocomplete.
+ * @property {?FnAllowContext} allowContext filter the context under which the autocomplete activates.
+ * @property {FnOnSelect} onSelect
+ */
+
+/**
+ * Returns an "completer" definition for selecting from available blocks to replace the current one.
+ * The definition can be understood by the Autocomplete component.
+ *
+ * @param  {Function} onReplace  Callback to replace the current block.
+ * @returns {Completer}          Completer object used by the Autocomplete component.
+ */
+export function blockAutocompleter( { onReplace } ) {
+	const options = getBlockTypes().map( ( blockType ) => {
+		const { name, title, icon, keywords = [] } = blockType;
+		return {
+			value: name,
+			label: [
+				<BlockIcon key="icon" icon={ icon } />,
+				title,
+			],
+			keywords: [ ...keywords, title ],
+		};
+	} );
+
+	const getOptions = () => Promise.resolve( options );
+
+	const allowContext = ( before, range, after ) => {
+		return ! ( /\S/.test( before.toString() ) || /\S/.test( after.toString() ) );
+	};
+
+	const onSelect = ( blockName ) => {
+		onReplace( createBlock( blockName ) );
+	};
+
+	return {
+		className: 'blocks-block-autocomplete',
+		triggerPrefix: '/',
+		getOptions,
+		allowContext,
+		onSelect,
+	};
+}
+/**
+ * Returns a "completer" definition for inserting links to the posts of a user.
+ * The definition can be understood by the Autocomplete component.
+ *
+ * @returns {Completer} Completer object used by the Autocomplete component.
+ */
+export function userAutocompleter() {
+	const getOptions = () => {
+		return ( new wp.api.collections.Users() ).fetch().then( ( users ) => {
+			return users.map( ( user ) => {
+				return {
+					value: user,
+					label: [
+						<img key="avatar" alt="" src={ user.avatar_urls[ 24 ] } />,
+						<span key="name" className="name">{ user.name }</span>,
+						<span key="slug" className="slug">{ user.slug }</span>,
+					],
+					keywords: [ user.slug, user.name ],
+				};
+			} );
+		} );
+	};
+
+	const allowNode = ( textNode ) => {
+		return textNode.parentElement.closest( 'a' ) === null;
+	};
+
+	const onSelect = ( user, range ) => {
+		const mention = document.createElement( 'a' );
+		mention.href = user.link;
+		mention.textContent = '@' + user.name;
+		range.insertNode( mention );
+		range.setStartAfter( mention );
+		range.deleteContents();
+	};
+
+	return {
+		className: 'blocks-user-autocomplete',
+		triggerPrefix: '@',
+		getOptions,
+		allowNode,
+		onSelect,
+	};
+}

blocks/autocompleters/style.scss

@@ -0,0 +1,12 @@
+.blocks-block-autocomplete .dashicon {
+	margin-right: 8px;
+}
+
+.blocks-user-autocomplete img {
+	margin-right: 8px;
+}
+
+.blocks-user-autocomplete .slug {
+	margin-left: 8px;
+	color: $dark-gray-100;
+}

blocks/library/paragraph/index.js

@@ -8,17 +8,17 @@ import classnames from 'classnames';
  */
 import { __ } from '@wordpress/i18n';
 import { concatChildren } from '@wordpress/element';
-import { PanelBody } from '@wordpress/components';
+import { Autocomplete, PanelBody } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import { registerBlockType, createBlock, source, setDefaultBlockName } from '../../api';
+import { blockAutocompleter, userAutocompleter } from '../../autocompleters';
 import AlignmentToolbar from '../../alignment-toolbar';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import BlockControls from '../../block-controls';
-import BlockAutocomplete from '../../block-autocomplete';
 import Editable from '../../editable';
 import InspectorControls from '../../inspector-controls';
 import ToggleControl from '../../inspector-controls/toggle-control';
@@ -152,7 +152,10 @@ registerBlockType( 'core/paragraph', {
 					</PanelBody>
 				</InspectorControls>
 			),
-			<BlockAutocomplete key="editable" onReplace={ onReplace }>
+			<Autocomplete key="editable" completers={ [
+				blockAutocompleter( { onReplace } ),
+				userAutocompleter(),
+			] }>
 				<Editable
 					tagName="p"
 					className={ classnames( 'wp-block-paragraph', className, {
@@ -183,8 +186,8 @@ registerBlockType( 'core/paragraph', {
 					onMerge={ mergeBlocks }
 					onReplace={ onReplace }
 					placeholder={ placeholder || __( 'New Paragraph' ) }
-				/>
-			</BlockAutocomplete>,
+			/>
+			</Autocomplete>,
 		];
 	},