Add/2793 hashlink autocompletion

blocks/autocompleters/index.js

@@ -1,3 +1,11 @@
+/**
+ * External dependencies
+ */
+import {
+	flatten,
+	sortBy,
+} from 'lodash';
+
 /**
  * Internal dependencies
  */
@@ -125,3 +133,57 @@ export function userAutocompleter() {
 		onSelect,
 	};
 }
+
+export function hashtagAutocompleter() {
+	const { Posts, Pages, Tags, Categories } = wp.api.collections;
+	const getOptions = () => {
+		return Promise.all( [
+			( new Posts() ).fetch().then( function( posts ) {
+				return posts.map( ( { link, title: { rendered: text }, slug } ) => ( {
+					link, text, icon: 'admin-post', keywords: [ text, slug ],
+				} ) );
+			} ),
+			( new Pages() ).fetch().then( function( pages ) {
+				return pages.map( ( { link, title: { rendered: text }, slug } ) => ( {
+					link, text, icon: 'admin-page', keywords: [ text, slug ],
+				} ) );
+			} ),
+			( new Tags() ).fetch().then( function( tags ) {
+				return tags.map( ( { link, name: text, slug, description } ) => ( {
+					link, text, icon: 'tag', keywords: [ text, description, slug ],
+				} ) );
+			} ),
+			( new Categories() ).fetch().then( function( categories ) {
+				return categories.map( ( { link, name: text, slug, description } ) => ( {
+					link, text, icon: 'category', keywords: [ text, description, slug ],
+				} ) );
+			} ),
+		] ).then( function( listOfLists ) {
+			const sortedLists = listOfLists.map( ( list ) => sortBy( list, 'text' ) );
+			return flatten( sortedLists ).map( ( { link, text, icon, keywords } ) => ( {
+				value: { link, text },
+				label: [
+					<BlockIcon key="icon" icon={ icon } />,
+					<span key="title" className="title">{ text }</span>,
+				],
+				keywords,
+			} ) );
+		} );
+	};
+
+	const allowNode = ( textNode ) => {
+		return textNode.parentElement.closest( 'a' ) === null;
+	};
+
+	const onSelect = ( { link, text } ) => {
+		return <a href={ link }>{ text }</a>;
+	};
+
+	return {
+		className: 'blocks-hashtag-autocomplete',
+		triggerPrefix: '#',
+		getOptions,
+		allowNode,
+		onSelect,
+	};
+}

blocks/autocompleters/style.scss

@@ -33,3 +33,9 @@
 		color: $blue-medium-300;
 	}
 } 
+
+.blocks-hashtag-autocomplete {
+	.title {
+		margin-left: 8px;
+	}
+}

blocks/library/paragraph/index.js

@@ -15,7 +15,7 @@ import { Autocomplete, PanelBody, PanelColor } from '@wordpress/components';
  */
 import './style.scss';
 import { registerBlockType, createBlock, setDefaultBlockName } from '../../api';
-import { blockAutocompleter, userAutocompleter } from '../../autocompleters';
+import { blockAutocompleter, userAutocompleter, hashtagAutocompleter } from '../../autocompleters';
 import AlignmentToolbar from '../../alignment-toolbar';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import BlockControls from '../../block-controls';
@@ -153,6 +153,7 @@ registerBlockType( 'core/paragraph', {
 			<Autocomplete key="editable" completers={ [
 				blockAutocompleter( { onReplace } ),
 				userAutocompleter(),
+				hashtagAutocompleter(),
 			] }>
 				{ ( { isExpanded, listBoxId, activeId } ) => (
 					<Editable