Insert @username for user mention autocomplete

[helen]

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.

Bringing this over from #4406:

I think that this feature should switch to inserting just @username, no link. Maybe a surrounding span at most. My reasoning for this is:

• Don’t break what exists.
• Links / other alterations to the mention text are better done at runtime for reasons including highlighting mentions for the current user and permalink changes.
• Usernames are much easier to programmatically process and target because they are unique and more efficient to query against (for instance, on my end we have a “shadow taxonomy” that associates mentions with users for future reference, and don’t highlight/link users that are no longer part of the site).
• The complication of changing display names and permalinks affecting existing content.
• Not yet having a tried-and-true method of altering what Gutenberg does.

One thing I didn’t try messing with in my first attempt at a Gutenberg PR was with what allowNode actually does. I don’t know if that needs changing.

[helen]

I don't really know why there are some Travis failures (it might be happening to everybody?) but this is now working. My understanding is that allowNode was making sure this didn't insert a link inside a link; since now it's a span, there are no restrictions that I can think of so it just returns true.

[ntwb]

@helen There are two ESLint errors:

autocompleters/index.js
  121:22  error  'textNode' is defined but never used                     no-unused-vars
  126:16  error  Unknown property 'class' found, use 'className' instead  react/no-unknown-property

It's severely obfuscated both locally and in the CI jobs amongst those JSDoc warnings, I'll update and/or create a new issue to address this

[pento]

This doesn't play nicely with TinyMCE, unfortunately. There are a couple of bugs I've noticed:

• Start a new paragraph
• Type @, select a username.
• Press space, continue typing.
• Switch to Code Editor, note that the extra typing is inside the <span>

Also, the <span> isn't automatically removed:

• Start a new paragraph
• Type @, select a username.
• Press Backspace until the @username is removed.
• Switch to Code editor, the <span> hasn't been removed. (Something, I think TinyMCE, is inserting U+FEFF inside the <span> after you delete the last character.)

@azaozz: Do you know how we can avoid these issues?

[helen]

@pento Nice catch on the span issue. I wonder if it has to do with TinyMCE retaining spans with a class name - I have a vague recollection of their removal being a common complaint during the spread of icon fonts.

I've pushed a commit that just removes the wrapping span, which is not really necessary anyway, was more like a nice-to-have/me not being able to figure out that I needed parens. Hoping to get this into the next release so we can deploy this on an internal site and start finding even more bugs :)

[pento]

Nice, looks good to me!

[mtias]

@helen thanks for the update. This makes sense to me because the @-username functionality should not be doing too much, as the main benefits are in how a server/network would handle notifications, etc. The important thing is we have an easily extendable mechanism for inline tokens, where people could supply their own arrays of items to be used in the auto-complete. There's more work to do here for this to be a solid API.