# Class: MentionsManager

## UI. MentionsManager

#### new MentionsManager()

### Extends

- Core.EventHandler

### Methods

#### addEventListener(type, fn [, options])

  Add a handler to the given event name

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `type` | string | number |  | The name of the event to listen to
  `fn` | function |  | The handler to be called when the event is triggered
  `options` | object | <optional> | Optional options object for addEventListener ###### Properties
  Name | Type | Description
  --- | --- | ---
  `once` | boolean | If true then the handler will be called only once

  Inherited From:
    - Core.EventHandler#addEventListener

  ##### Returns:

  Returns the object that 'addEventListener' is being called on
  Type
    object

  ##### Example

      annotManager.addEventListener('annotationChanged', (annotations, action) => {
        ...
      });

#### getAllowedTrailingCharacters()

  Gets the allowed trailing characters

  ##### Returns:

  An array of trailing characters, or '*'
  Type
    Array.<string> | '*'

#### getUserData()

  Gets the user data

  ##### Returns:

  An array of user data
  Type
    Array.<UI.MentionsManager.UserData>

#### off( [type] [, fn])

  Remove a handler of the given event name

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `type` | string | number | <optional> | The name of the event to remove the handler of. If type is undefined, all the handlers of the object will be removed
  `fn` | function | <optional> | The handler associated with this event to be removed. If fn is undefined, all the handlers of the given event name will be removed

  Inherited From:
    - Core.EventHandler#off
  Deprecated:
    - Since version 8.0. Use removeEventListener instead.

  ##### Returns:

  Returns the object that 'off' is being called on
  Type
    object

  ##### Example

      annotManager.off();
      annotManager.off('annotationChanged');
      annotManager.off('annotationChanged', fn);

#### on(type, fn)

  Add a handler to the given event name

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `type` | string | number | The name of the event to listen to
  `fn` | function | The handler to be called when the event is triggered

  Inherited From:
    - Core.EventHandler#on
  Deprecated:
    - Since version 8.0. Use addEventListener instead.

  ##### Returns:

  Returns the object that 'on' is being called on
  Type
    object

  ##### Example

      annotManager.on('annotationChanged', (annotations, action) => {
        ...
      });

#### one(type, fn)

  Same as 'on' except the handler will be called only once

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `type` | string | number | The name of the event to listen to
  `fn` | function | The handler to be called when the event is triggered

  Inherited From:
    - Core.EventHandler#one
  Deprecated:
    - Since version 8.0. Use addEventListener with {'once': true} as options instead.

  ##### Returns:

  Returns the object that 'one' is being called on
  Type
    object

  ##### Example

      annotManager.one('annotationChanged', (annotations, action) => {
       ...
      });

#### removeEventListener( [type] [, fn])

  Remove a handler of the given event name

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `type` | string | number | <optional> | The name of the event to remove the handler of. If type is undefined, all the handlers of the object will be removed
  `fn` | function | <optional> | The handler associated with this event to be removed. If fn is undefined, all the handlers of the given event name will be removed

  Inherited From:
    - Core.EventHandler#removeEventListener

  ##### Returns:

  Returns the object that 'removeEventListener' is being called on
  Type
    object

  ##### Example

      annotManager.removeEventListener();
      annotManager.removeEventListener('annotationChanged');
      annotManager.removeEventListener('annotationChanged', fn);

#### setAllowedTrailingCharacters(chars)

  Sets the characters that can follow a mention, while not invalidating it By default, a mention can only be followed by a space, or is located at the end of the string

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `chars` | Array.<string> | '*' | An array of characters. If `*` is passed, then a mention can be followed by any characters

  ##### Example

      WebViewer(...)
        .then(function(instance) {
          instance.mentions.setUserData([
            {
              value: 'John Doe',
            },
          ]);
           // this is considered as a mention, because `@John Doe` is at the end of the string
          'Hello, @John Doe'
           // this is considered as a mention, because `@John Doe` is followed by a space
          'Hello, @John Doe How are you?'
           // this is NOT considered as a mention, because `@John Doe` is followed by a comma
          '@John Doe, Hello!'
           instance.mentions.setAllowedTrailingCharacters([' ', ',']);
           // this is now considered as a mention, because comma is an allowed trailing character
          '@John Doe, Hello!'
        });

#### setUserData(userData)

  Sets the user data that will be displayed in the suggestions overlay when an @ is entered in the textarea.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `userData` | Array.<UI.MentionsManager.UserData> | An array of user data

  ##### Example

      WebViewer(...)
        .then(function(instance) {
          instance.mentions.setUserData([
            {
              value: 'John Doe',
            },
            {
              value: 'Jane Doe',
              email: 'jDoe@gmail.com'
            }
          ]);
        });

#### trigger(type [, data])

  Calls the handlers of the event name with given data

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `type` | string | number |  | event name of which the handlers will be called.
  `data` | * | <optional> | data that will be passed to the handlers. If data is an array, it will be spread and then passed to the handlers

  Inherited From:
    - Core.EventHandler#trigger

  ##### Returns:

  Returns the object that 'trigger' is being called on
  Type
    object

  ##### Example

      annotManager.trigger('annotationChanged');
      annotManager.trigger('annotationChanged', [[annotation], 'add', {}]);

### Type Definitions

#### Mention

  ##### Type:

  - Object

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `email` | string | The email of the mentioned person. This is passed from setUserData.
  `value` | string | The value(display name) of the mentioned person. This is passed from setUserData.
  `type` | string | The type of the mentioned person. This is passed from setUserData.
  `id` | string | The id of the mentioned person. This is passed from setUserData.
  `annotId` | string | The id of the annotation in which the contents contain the mentions.

#### UserData

  ##### Type:

  - Object.<string, string>

  ##### Properties:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `value` | string |  | The display name of the user, which will be displayed in the suggestion overlay.
  `id` | string | <optional> | The unique id of the user. Default to `value`.
  `email` | string | <optional> | The email of the user, which will be displayed under `value` in the suggestion overlay, if present.

### Events

#### mentionChanged

  Triggered when a mention or mentions have been changed (added, deleted, modified). Attach like instance.mentions.on('mentionChanged', callback)

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `mentions` | UI.MentionsManager.Mention | The mentions that were changed
  `action` | 'add' | 'modify' | 'delete' | The action that occurred (add, delete, modify)

#### Search results