# 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

      myObject.addEventListener('eventName', (eventParameter1, eventParameter2) => {
        ...
      });

#### defaultMentionLookupCallback()

  The default mention lookup callback used to filter users in the suggestions overlay.

#### getAllowedTrailingCharacters()

  Gets the allowed trailing characters

  ##### Returns:

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

#### getMentionLookupCallback()

  Gets the current mention lookup callback function being used by quill-mentions to filter the users in the suggestions overlay.

  ##### Returns:

  the current function used to filter users in the suggestions overlay
  Type
    function

#### 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

      myObject.off();
      myObject.off('eventName');
      myObject.off('eventName', 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

      myObject.on('eventName', (eventParameter1, eventParameter2) => {
        ...
      });

#### 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

      myObject.one('eventName', (eventParameter1, eventParameter2) => {
       ...
      });

#### 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
  Deprecated:
    - for version 9.0. Use [removeEventListener] with fn specified

  ##### Returns:

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

  ##### Example

      myObject.removeEventListener();
      myObject.removeEventListener('eventName');
      myObject.removeEventListener('eventName', 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!'
        });

#### setMentionLookupCallback(callback)

  Sets the mention lookup callback function used by quill-mentions to filter the users in the suggestions overlay.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `callback` | function | A callback function that returns an array of users that displayed in the suggestions overlay.

  ##### Example

      WebViewer(...)
        .then(function(instance) {
          instance.mentions.setMentionLookupCallback(async (userData, searchTerm) => {
            const matches = [];
            userData.forEach((user) => {
              if (user.name === 'John Doe') {
                matches.push(user);
              }
            });
            return matches;
          });
        });

#### 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

      myObject.trigger('eventName');
      myObject.trigger('eventName', [eventParameter1, eventParameter2]);

### 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