Mention Support in JavaScript Markdown Editor Control

18 Nov 20181 minute to read

By integrating the Mention control with the Markdown Editor, users can effortlessly mention or tag other users or objects from a suggested list. This eliminates the need to manually type out names or identifying information, improving both efficiency and accuracy.

Enabling Mention in JavaScript Markdown Editor

To enable the Mention functionality within the Markdown Editor, set the target property of the Mention control to the ID of the textarea element inside the editor. When specifying the target, ensure that you append the suffix _editable-content to the ID. This configuration allows users to mention or tag others from the suggested list while editing text.

When a user types the @ symbol followed by a character, the Markdown Editor displays a list of suggestions. Users can select an item from the list by either clicking on it or typing the desired name.

Configuring Mention Properties

The Syncfusion Mention control provides several customizable properties to enhance the tagging experience:

  • allowSpaces - Allow to continue search action if user enter space after mention character while searching.
  • suggestionCount - Defines the maximum number of items displayed in the suggestion list.
  • itemTemplate - Customizes the appearance of items in the suggestion list.

Example: Implementing Mention in Markdown Editor

The following example demonstrates how to enable Mention support in the Markdown Editor.