Mention - In editor

Note: This component is designed for internal Atlassian development.

External contributors will be able to use this component but will not be able to submit issues.

Using Mentions in AK Editor

To use Mention in @atlaskit/editor-core, check the 'Editor with mentions' section in editor-core, then follow these steps for a more involved tutorial:

Option 1: Instantiate a `MentionResource`

You can choose to instantiate the existing MentionResource that have defaults in place.

Ensure you plug in the mentionNameResolver to resolve names that have been pre-selected in the Editor (else they will show up as @Unknown). You will need a backing service to search and resolve names.

  import { MentionResource, MentionProvider } from '@atlaskit/mention';

  const EditorWithMentions = () => {
    const mentionProvider = new MentionResource({
      url:
        'https://atlassian-product-url.net/get-users', // URL to search users
      productId: 'atlassian-product',
      mentionNameResolver: {
        lookupName: async (id: string) => {
          const resolved = await resolveUser(id); // custom function to resolve IDs to names
          return resolved;
        },
        cacheName: (id: string, name: string) =>
          this.mentionNames.set(id, { id, name, status: MentionNameStatus.OK }), // cache your resolved IDs
      },
    });

    return(
      <Editor
        mentionProvider={Promise.resolve(mentionResourceProvider)} // Plug in your Mentions provider
      />
    )
  }

Option 2: Extend and instantiate an `AbstractMentionResource`

Extend the AbstractMentionResource to provide a more customized mentions experience.

Mention With Editor

Option 3: Extend and instantiate a `SmartMentionResource`

The Smart Mention Resource is now available to use at @atlassian/smart-mention-resource

This is only available for internal use.