@automattic/editor-autocompleter

Editor Autocompleter

Autocompleters for the Gutenberg editor. Provides:

• User completor (@name)
• Tag completer (#tag)
• Cross-post completer (+xpost)

The completers require Gutenberg to function but are independant of WordPress. A data source (local or remote) needs to be supplied.

Matches are highlighted within the autocompleter.

Usage

npm install @automattic/isolated-block-editor" --save

Then include in your code with something like this:

import { tagCompleter, xpostCompleter, userCompleter } from '@automattic/editor-autocompleter';
import '@automattic/editor-autocompleter/dist/style.scss';
import apiFetch from '@wordpress/api-fetch';

function tagFetcher( search: string ) {
	return apiFetch( { path: '/api/tags?s=' + encodeURIComponent( search ) } );
}

function userFetcher( search: string ) {
	return apiFetch( { path: '/api/user?s=' + encodeURIComponent( search ) } );
}

function xpostFetcher( search: string ) {
	return apiFetch( { path: '/api/xpost?s=' + encodeURIComponent( search ) } );
}

function addCompleters( completers = [] ) {
	// Add tag completer
	completers.push( tagCompleter( tagFetcher, true ) );

	// Add xpost completer
	completers.push( xpostCompleter( xpostFetcher ) );

	// Override the standard user completer with a custom one
	return completers
		.filter( ( filter ) => filter.name !== 'users' )
		.concat( [ userCompleter( useUserFetcher ) ] );
}

addFilter(
	'editor.Autocomplete.completers',
	'my-program/autocompleters',
	addCompleters
);

Each autocompleter takes a 'fetcher' and an optional isRemote flag. The fetcher is a function that returns either a promise (i.e. from a remote API call), or a plain array of values.

If the isRemote flag is set to true then a loading indicator will be shown if the returned data is not immediate.

Releasing

To make a release, ensure you are on the trunk branch. Do not update the version number in package.json - the release process will do this for you. Then run:

GITHUB_TOKEN=<TOKEN> yarn dist