From 120ec89e16c74acc0cb9e39f40291f150821c679 Mon Sep 17 00:00:00 2001 From: Helen Hou-Sandi Date: Fri, 12 Jan 2018 14:32:30 -0500 Subject: [PATCH 1/6] Insert `@username` for user mention autocomplete Rather than inserting a static link and the display name, both of which may change over time and lead to stale content, follow the pattern of existing user mentions in WordPress projects and insert a plaintext mention using the username. --- blocks/autocompleters/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/autocompleters/index.js b/blocks/autocompleters/index.js index 4be6140eceb8e5..624f407d2ef997 100644 --- a/blocks/autocompleters/index.js +++ b/blocks/autocompleters/index.js @@ -96,7 +96,7 @@ export function blockAutocompleter( { onReplace } ) { }; } /** - * Returns a "completer" definition for inserting links to the posts of a user. + * Returns a "completer" definition for inserting a user mention. * The definition can be understood by the Autocomplete component. * * @returns {Completer} Completer object used by the Autocomplete component. @@ -123,7 +123,7 @@ export function userAutocompleter() { }; const onSelect = ( user ) => { - return { '@' + user.name }; + return { '@' + user.slug }; }; return { From 47acfd9a688ad1d3998cccd1023f416c07538306 Mon Sep 17 00:00:00 2001 From: Helen Hou-Sandi Date: Fri, 12 Jan 2018 16:58:24 -0500 Subject: [PATCH 2/6] Wrap user mention in a span Avoids a syntax error and may come in handy. --- blocks/autocompleters/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/autocompleters/index.js b/blocks/autocompleters/index.js index 624f407d2ef997..7501247a2f5e0e 100644 --- a/blocks/autocompleters/index.js +++ b/blocks/autocompleters/index.js @@ -123,7 +123,7 @@ export function userAutocompleter() { }; const onSelect = ( user ) => { - return { '@' + user.slug }; + return { '@' + user.slug }; }; return { From 2e4e5bb72082eb229f721bb7a0c814648332e1e4 Mon Sep 17 00:00:00 2001 From: Helen Hou-Sandi Date: Fri, 12 Jan 2018 16:59:04 -0500 Subject: [PATCH 3/6] Allow insertion into any node Since this no longer inserts a link, it should be usable in any kind of node. --- blocks/autocompleters/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/autocompleters/index.js b/blocks/autocompleters/index.js index 7501247a2f5e0e..08f7d7d8233eaa 100644 --- a/blocks/autocompleters/index.js +++ b/blocks/autocompleters/index.js @@ -119,7 +119,7 @@ export function userAutocompleter() { }; const allowNode = ( textNode ) => { - return textNode.parentElement.closest( 'a' ) === null; + true; }; const onSelect = ( user ) => { From 63ce70b86cbf5a318711afae1455bf86d839c908 Mon Sep 17 00:00:00 2001 From: Helen Hou-Sandi Date: Fri, 12 Jan 2018 17:49:07 -0500 Subject: [PATCH 4/6] You have to actually return values, turns out. --- blocks/autocompleters/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/autocompleters/index.js b/blocks/autocompleters/index.js index 08f7d7d8233eaa..b69a0fa29686a6 100644 --- a/blocks/autocompleters/index.js +++ b/blocks/autocompleters/index.js @@ -119,7 +119,7 @@ export function userAutocompleter() { }; const allowNode = ( textNode ) => { - true; + return true; }; const onSelect = ( user ) => { From b254965235a9c32b15b21271144a1e17496d8674 Mon Sep 17 00:00:00 2001 From: Helen Hou-Sandi Date: Sat, 13 Jan 2018 00:02:29 -0500 Subject: [PATCH 5/6] Fix linting errors --- blocks/autocompleters/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/autocompleters/index.js b/blocks/autocompleters/index.js index b69a0fa29686a6..bf7bac7d76b5fe 100644 --- a/blocks/autocompleters/index.js +++ b/blocks/autocompleters/index.js @@ -118,12 +118,12 @@ export function userAutocompleter() { } ); }; - const allowNode = ( textNode ) => { + const allowNode = () => { return true; }; const onSelect = ( user ) => { - return { '@' + user.slug }; + return { '@' + user.slug }; }; return { From 05e594b6c53cf7e1f7293a05cdfba57f5f923379 Mon Sep 17 00:00:00 2001 From: Helen Hou-Sandi Date: Tue, 16 Jan 2018 11:25:05 -0500 Subject: [PATCH 6/6] Remove wrapping span from user mention. This caused problems where TinyMCE would not delete the empty span and you would essentially be stuck inside it forever after and never know without looking at the HTML. --- blocks/autocompleters/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/autocompleters/index.js b/blocks/autocompleters/index.js index bf7bac7d76b5fe..fb7d8d799f6fba 100644 --- a/blocks/autocompleters/index.js +++ b/blocks/autocompleters/index.js @@ -123,7 +123,7 @@ export function userAutocompleter() { }; const onSelect = ( user ) => { - return { '@' + user.slug }; + return ( '@' + user.slug ); }; return {