-
-
Notifications
You must be signed in to change notification settings - Fork 952
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adds user suggestions in comment section (#4094)
* Adds user suggestions in comment section * Uses codemirror and show-hint addon to show autocomplete users * Use markdown mode with show hint over multiple different textarea * Adds API and selenium tests for user mentions * Modify some logics for showing user suggestions * Using async method for showing hint Fixes #2964 Co-authored-by: Michal Čihař <michal@cihar.com>
- Loading branch information
Showing
17 changed files
with
11,685 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| (function (CodeMirror) { | ||
| var currentRequest = null; | ||
|
|
||
| function getUserList(usernameSearch, from, to, callback) { | ||
| currentRequest = $.ajax({ | ||
| type: 'GET', | ||
| url: `/api/users/?username=${usernameSearch}`, | ||
| dataType: 'json', | ||
| beforeSend : function() { | ||
| if (currentRequest !== null) { | ||
| currentRequest.abort(); | ||
| } | ||
| }, | ||
| success: function (data) { | ||
| var userMentionList = data.results.map(function(user) { | ||
| return { | ||
| text: user.username, | ||
| displayText: `${user.full_name} (${user.username})` | ||
| } | ||
| }); | ||
| callback({ | ||
| list: userMentionList, | ||
| from: from, | ||
| to: to | ||
| }); | ||
| }, | ||
| error: function (jqXHR, textStatus, errorThrown) { | ||
| console.error(errorThrown); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| CodeMirror.registerHelper('hint', 'userSuggestions', function (editor, callback) { | ||
| var cur = editor.getCursor(); | ||
| var curLine = editor.getLine(cur.line); | ||
|
|
||
| var end = cur.ch; | ||
| var start = curLine.lastIndexOf('@') + 1; | ||
| // Extract the current word from the current line using 'start' / 'end' value pair | ||
| var curWord = start !== end && curLine.slice(start, end); | ||
|
|
||
| if(curWord && curWord.length > 2) { | ||
| // If there is current word set, We can filter out users from the | ||
| // main list and display them | ||
| getUserList( | ||
| curWord, | ||
| CodeMirror.Pos(cur.line, start), | ||
| CodeMirror.Pos(cur.line, end), | ||
| callback | ||
| ); | ||
| } | ||
| }); | ||
|
|
||
| CodeMirror.hint.userSuggestions.async = true; | ||
|
|
||
|
|
||
| $('textarea.codemirror-markdown').each(function(idx) { | ||
|
|
||
| var codemirror = CodeMirror.fromTextArea( | ||
| this, | ||
| { | ||
| mode: 'text/x-markdown', | ||
| theme: 'weblate', | ||
| lineNumbers: false, | ||
| } | ||
| ); | ||
|
|
||
| codemirror.on('change', function (cm, event) { | ||
| cm.save() | ||
| }); | ||
|
|
||
| codemirror.on('keydown', function (cm, event) { | ||
| if(event.key === '@') { | ||
| CodeMirror.showHint(cm, CodeMirror.hint.userSuggestions, { | ||
| completeSingle: false | ||
| }); | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| // Add weblate bootstrap styling on the textarea | ||
| $('.CodeMirror').addClass('form-control'); | ||
| $('.CodeMirror textarea').addClass('form-control'); | ||
|
|
||
|
|
||
| }) (CodeMirror); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| .CodeMirror-hints { | ||
| position: absolute; | ||
| z-index: 10; | ||
| overflow: hidden; | ||
| list-style: none; | ||
|
|
||
| margin: 0; | ||
| padding: 2px; | ||
|
|
||
| -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2); | ||
| -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2); | ||
| box-shadow: 2px 3px 5px rgba(0,0,0,.2); | ||
| border-radius: 3px; | ||
| border: 1px solid silver; | ||
|
|
||
| background: white; | ||
| font-size: 90%; | ||
| font-family: monospace; | ||
|
|
||
| max-height: 20em; | ||
| overflow-y: auto; | ||
| } | ||
|
|
||
| .CodeMirror-hint { | ||
| margin: 0; | ||
| padding: 0 4px; | ||
| border-radius: 2px; | ||
| white-space: pre; | ||
| color: black; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| li.CodeMirror-hint-active { | ||
| background: #08f; | ||
| color: white; | ||
| } |
Oops, something went wrong.