<commit_before># ui-mention
Facebook-like @mentions for text inputs built around composability

## Contribute

0. `npm install`
0. `npm install -g gulp bower`
0. `bower install`
0. `gulp [watch]`
0. Compiling the example code: `gulp example [watch]`

## Usage

For now, you should create a child-directive to customize (API probably going to change)

```js
.directive('myMention', function($http){
  return {
    require: 'uiMention',
    link($scope, $element, $attrs, uiMention) {
      /**
       * Converts a choice object to a human-readable string
       *
       * @param  {mixed|object} choice The choice to be rendered
       * @return {string}              Human-readable string version of choice
       */
       uiMention.label = function(choice) {
         return `${choice.first_name} ${choice.last_name}`;
       };

      /**
       * Retrieves choices
       *
       * @param  {regex.exec()} match    The trigger-text regex match object
       * @return {array[choice]|Promise} The list of possible choices
       */
      uiMention.findChoices = function(match, mentions) {
        return $http.get(...).then(...);
      };
    }
  };
});
```
You have to build the HTML yourself:
```html
<div class="ui-mention-container">
  <textarea ng-model="data" ui-mention my-mention></textarea>
  <div class="ui-mention-highlight"></div>
</div>
<ul class=dropdown" ng-if="$mention.choices.length">
  <li ng-repeat="choice in $mention.choices"
    ng-class="{active:$mention.activeChoice==choice}"
    ng-click="$mention.select(choice)">
    {{::choice.first_name}} {{::choice.last_name}}
  </li>
</ul>
```
And the CSS:
```scss
.ui-mention-container {
  position: relative;
  [ui-mention] {
    min-height: 100px;
    background: none;
    position: relative;
    z-index: 2;
  }<commit_msg>Prevent scrollbar for autogrow<commit_after># ui-mention
Facebook-like @mentions for text inputs built around composability

## Contribute

0. `npm install`
0. `npm install -g gulp bower`
0. `bower install`
0. `gulp [watch]`
0. Compiling the example code: `gulp example [watch]`

## Usage

For now, you should create a child-directive to customize (API probably going to change)

```js
.directive('myMention', function($http){
  return {
    require: 'uiMention',
    link($scope, $element, $attrs, uiMention) {
      /**
       * Converts a choice object to a human-readable string
       *
       * @param  {mixed|object} choice The choice to be rendered
       * @return {string}              Human-readable string version of choice
       */
       uiMention.label = function(choice) {
         return `${choice.first_name} ${choice.last_name}`;
       };

      /**
       * Retrieves choices
       *
       * @param  {regex.exec()} match    The trigger-text regex match object
       * @return {array[choice]|Promise} The list of possible choices
       */
      uiMention.findChoices = function(match, mentions) {
        return $http.get(...).then(...);
      };
    }
  };
});
```
You have to build the HTML yourself:
```html
<div class="ui-mention-container">
  <textarea ng-model="data" ui-mention my-mention></textarea>
  <div class="ui-mention-highlight"></div>
</div>
<ul class=dropdown" ng-if="$mention.choices.length">
  <li ng-repeat="choice in $mention.choices"
    ng-class="{active:$mention.activeChoice==choice}"
    ng-click="$mention.select(choice)">
    {{::choice.first_name}} {{::choice.last_name}}
  </li>
</ul>
```
And the CSS:
```scss
.ui-mention-container {
  position: relative;
  [ui-mention] {
    min-height: 100px;
    background: none;
    position: relative;
    z-index: 2;
    box-sizing: content-box; // Prevent scrollbar for autogrow
  }
{'fraction_non_alphanumeric': 0.14953779227841218, 'fraction_numerical': 0.004893964110929853, 'mean_word_length': 3.003264417845484, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1105409', 'n_tokens_mistral': 1224, 'n_tokens_neox': 1175, 'n_words': 319}