DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Html Editor - Mentions

Our HtmlEditor allows end-users to insert "mentions" and reference others within text or conversation threads as demonstrated in this demo. With this feature, you can introduce functionality that emulates capabilities found in collaboration tools like Microsoft Teams.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

A "mention" is triggered by a marker. You are free to choose a "marker" of your choice (this demo uses the @ symbol to trigger a "mention"). User names are stored as items in a dataSource. Data can be retrieved from multiple data sources. When using multiple data sources, you must assign an unique marker to each.

To "mention" a user, simply enter the @ symbol and select the desired record from the "Mentions" drop-down user list. Like today's most popular collaboration tools, you can enter additional characters to filter the records displayed within the "Mentions" drop-down user list.