Apryse WebViewer

Class: MentionsManager

UI. MentionsManager

new MentionsManager()

Extends

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

removeEventListener( [type] [, fn])

Remove a handler of the given event name and namespace (if given) or with a function reference
Parameters:
Name Type Argument Description
type string | number <optional>
 The name of the event to remove the handler of with an optional namespace.
fn function <optional>
 The handler associated with this event to be removed. If fn is undefined, all the handlers of the given event namespace will be removed. If you are not passing in this parameter then a namespace must be used with the event name.
Inherited From:
Returns:
Returns the object that 'removeEventListener' is being called on
Type
object
Example
myObject.removeEventListener('eventName.namespace');
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:
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)