Git Merge Request #327: Added autocomplete list to markdown editor for user mentions (merged)



Something went wrong. Please, merge manually

Checking if merge is possible...

Something went wrong. Please, merge manually

Shalitha Suranga wants to merge 7 commits from /u/shalithasuranga/allura/ to master, 2019-06-04

Fixes [#8282]

Hi. I have used some external files please advice how the licenses can be added.

Commit Date  
[d6ebf5] (gsoc19-c2) by Shalitha Suranga Shalitha Suranga

[#8282] Make autocomplete item filtering case insensitive

2019-06-03 16:04:17 Tree
[c8736a] by Shalitha Suranga Shalitha Suranga

[#8282] Display autocompletion when there is only one item in the list

2019-06-03 15:59:36 Tree
[07e725] by Shalitha Suranga Shalitha Suranga

[#8282] Check key name instead of keyCode

2019-06-03 15:41:58 Tree
[12157d] by Shalitha Suranga Shalitha Suranga

[#8282] Add comment lines and improve Regex for matching -

2019-06-02 14:27:47 Tree
[f1e83c] by Shalitha Suranga Shalitha Suranga

[#8282] Update licensing information

2019-06-02 13:34:51 Tree
[9003d7] by Shalitha Suranga Shalitha Suranga

Merge branch 'master' of into gsoc19-c2

2019-06-02 12:56:59 Tree
[6cf797] by Shalitha Suranga Shalitha Suranga

[#8282] Add autocomplete list support to markdown editor for user mentions

2019-05-25 15:49:55 Tree


  • Dave Brondsema

    Dave Brondsema - 2019-05-29

    If you add a new file that you wrote (is show-hint.css?) you should add the Apache License header like our other files have.

    If you add a new file that is from elsewhere like show-hint.js you need to include the license details at the top of the file, like you've done. It must be a compatible license (MIT is) Also add it to LICENSE and Allura/LICENSE following the pattern used in those files. And add it to rat-excludes.txt alphabetically. That file is used for for our licensing check, so we indicate that its ok that it doesn't have the Apache License header.

    What is keyCode == 50? a comment would be nice there. I figured out it means shift + 2 aka @. What about other keyboard layouts? Possible to check for @ more directly?

    If there is only one user on a project, pressing @ completes their name automatically. I guess that's ok if its the only option, but a little surprising.

    I like how it shows the user's full name and username. Is it possible to have it match on full name too? So I could type @ and then their full name and it would select that user? Right now it only works to match on their username. Not a big deal though.

    Nice that you are able to disable it within code sections.

    In the helper, some of that code dealing with words & lines & lists is pretty dense and not obvious to me what it's doing. Do you mind adding a few comments? Not every line, but a few would help to explain what its accomplishing.

    Might look nicer not as monospace.

    suggestion for followup work: might be good to also suggest names for anyone who has commented in the thread, and the creator (of the ticket for example, but consider other artifact types too)

    another followup idea: might be nice to style @foo in the editor, like links are blue and underline. Just a visual helper, not an actual link unless you click preview. However this might be quite hard or not practical, as it would rely on the codemirror markdown parsing to tokenize @foo so it has a span & class of its own.

    This is exciting!

    • Shalitha Suranga

      Hi Dave..

      Thanks for the feedback.


      Here are the information about newly added files

      usermentions-helper.js - Implemented, therefore Apache license header is added
      show-hint.js and show-hint.css has MIT license and taken from code mirror. Therefore I will do as you explained (adding to LICENSE and rat etc..)

      KeyCode == 50

      Yeah I am checking @ char. We can directly check KeyboardEvent.key == "@" also do you think it is better?

      Autocomplete single list item

      Yeah when there is only one item it will be autocompleted without showing the list (normal behaviour of codemirror and other applications I think) Do you think it is better to display the list in that situation also?

      Matching Full name

      Looks like current implementation matches the full name also since I use if(item.displayText.indexOf(curWord) != -1) displayText has the full name (eg: Admin User 1 (admin1)). WDYT?

      Comments in helper

      Yeah some lines bring confusions :) I will do the commenting

      Follow up works

      Since we have to some considerable stuff ahead for planned items for Gsoc Could we start follow up works eventually and later considering Gsoc timeline ?



      Last edit: Shalitha Suranga 2019-05-31
  • Shalitha Suranga

    Hi.. Dave

    I have updated licensing information, added some comment lines for better clarification into the user mentions helper and also improved regex. Please advice with above reply too


  • Dave Brondsema

    Dave Brondsema - 2019-06-03


    Licensing is looking good.

    KeyboardEvent.key == "@" is much clearer to me. If it is well-supported, I think its definitely better.

    Autocomplete on a single entry I think could be confusing when the project only has 1 admin (which many could). In that case, as soon as you type @ it expands to @someusername and you might have been wanting to type somethign completely different like @2pm. So I think the autocomplete dropdown would be nice to use still, so users can choose to autocomplete or not. It looks like the addon has a completeSingle setting which might handle this.

    For matching a full name, if there is a user with full name "John Doe" and username "john", then typing @ followed by Doe does not match his entry. I don't think this is a dealbreaker, but would be nice. Could be followup.

    For all the followup I suggested, yes, I meant that it could be done later. If you agree they make sense, you or I could make tickets for them and then you can go back to them as time allows. Some will be easier or harder, etc, so no need for them to be worked on right now. (I think supporting other usernames that are involved on the current thread, besides admin, would be most valuable - but still doesn't need to happen now).

  • Shalitha Suranga


    Nice. I did following modifications in source

    • KeyboardEvent.key == "@" is added instead keycode
    • completeSingle option is used to display list for one item
    • Text maching is set to case insensitive So "john" will match "John Doe"

    Yeah good idea to make tickets for follow up works. So we can remember the Todo follow up tasks.


  • Dave Brondsema

    Dave Brondsema - 2019-06-04

    I was doing some cross-browser testing and noticed in Edge that the keypress wasn't being detected. So I changed the check to handle both forms:

    if(event.key === "@" || (event.shiftKey && event.keyCode === 50 /* "2" key */)) {

    • Shalitha Suranga

      Hi.. Thanks 👍

  • Dave Brondsema

    Dave Brondsema - 2019-06-04
    • Status: open --> merged

Log in to post a comment.