Devextreme: HtmlEditor - Mentions

[DokaRus]

The Problem

Rich editors used in forums and messengers allow their users to mention a person in a discussion, note, or thread. However, the HtmlEditor does not support this feature.

The Proposed Solution

The mention module is a special text autocomplete module with the following features:

• Data can be loaded from a remote source
• Mentions are activated when a user types a specific prefix
• Autocomplete items can be customized

We plan to implement the following API for mentions:

mentions: [{  
  dataSource: Array, DataSourceConfig, 
  marker: string, // "@" 
  minSearchLength: Number, // 0
  searchTimeout: Number, // 500 
  itemTemplate: template, 
  searchExpr: getter, getter[],
  displayExpr: getter,
  valueExpr: getter 
  template: template 
}] 

Mention a person from a list

mentions: [{  
  dataSource: ["James Brown", "John Silver"], 
  marker: "@" 
}] 

Use different markers to mention persons from different lists

mentions: [{  
  dataSource: ["James Brown", "John Silver"], 
  marker: "@" 
}, { 
  dataSource: [{ name: "John Adams", team: "internal", id: 1 }, { name: "Jane Smith", team: "R&D", id: 2 }], 
  marker: "#",
  // Additional configuration is required because the data source contains objects 
  searchExpr: ["name", "team"],
  displayExpr: ({name, team }) => `${name} (${team})`,
  valueExpr: "id", 
  template: ({ value, id }) => `<a href="mydomain.com/users/${id}">${value}</a>`  
}] 

UI Design

Try It

jQuery demo

We Need Your Feedback

Take a Quick Poll

Do you find mentions in the HtmlEditor useful?

Get Notified of Updates

Subscribe to this thread or to our Facebook and Twitter accounts for updates on this topic.

[ZaHgO]

This is just amazing!

marker can be any string or just a single character?
Could marker be optionally an array?
Can you add a headerTemplate and a footerTemplate?

[DokaRus]

marker can be any string or just a single character?
Could marker be optionally an array?

We consider using a single character marker at the moment. Could you describe your use cases in greater detail so we can use it in our further development?

Can you add a headerTemplate and a footerTemplate?

We'll think about the possibility of implementing it in the future.

[ZaHgO]

We´re thinking about mentioning all sort of things. It would be hard for users to learn a diferent marker for each and we may run out of markers.

Using !s for services, !ss for service requests (_solicitud de servicio_ in spanish), !u for units and !c for trucks (_camiones_ in spanish) instead of $, %, & and +. We could use only letters (without the ! prefix), but that may unexpectedly trigger the popup multiple times when writting normal text.

EDIT:
I figured out that I could implement it using a larger minSearchLength and a custom dataSource to search for the objects of the right type, then implement a template with lots of if's.

[Shiko1st]

Great feature!
Will it be available in plain text editors?

[DokaRus]

@ZaHgO
Thank you for your feedback!

@Shiko1st
No, we'll implement it for HtmlEditor only.

[DokaRus]

With the 19.1 Sprint 4 pre-release, we've added a base implementation of the Mention module.
It allows the use of several markers with different data and item templates.
You can try it right now.
With the next sprint we are planning to add filtering, the mention template and small enhancements to detect when the Mention suggestion list is expected to appear. For example, this will help to avoid mentioning someone while you type an email: alan@.

[ZaHgO]

@DokaRus the demo looks great.
One thing that I found annoying is that once the popup apears I cannot continue typing. Also the popup should never appear on top of the text. It seems to my that the popup padding is a bit too much.
There is a bug when you change the format of the text and then click the cIear button the mentions disappears.
itemTemplate and displayExpr are working as expected and provide a great deal of control.

[DokaRus]

One thing that I found annoying is that once the popup apears I cannot continue typing. Also the popup should never appear on top of the text.

Demo prevents typing to avoid confusing related to filtering that is not implemented. We've added filtering at the last sprint so this issue will be resolved with the next package update.

It seems to my that the popup padding is a bit too much.

Fixed

Also the popup should never appear on top of the text.

Sure. We'll fix it. I've created a new ticket in the our SC. You can subscribe to it to get a notification once we have any result.

There is a bug when you change the format of the text and then click the cIear button the mentions disappears.

Thanks, we'll check it. I've created an another ticket, so you can track it too.

[ZaHgO]

In the demo if you change the version to 19.1.2-beta then the second Html Editor shows in the popup HTML code:

But copy pasting the displayExpr to itemTemplate fixes the problem:

[DokaRus]

Thanks @ZaHgO !
I've updated the demo

[penleychan]

Is there a way to do server side fetch and filter with this component, instead of loading all the object into the datasource?

[DokaRus]

@penleychan
Mentions accept our DataSource instance or DataSource config with the whole specter of its features like paging, sorting, etc. You can use CustomStore to implement custom data access logic.
If you need our further technical assistance, create a new ticket in our SC. Our Support Team will be happy to help you.

[dxbykov]

Thank you to everybody who gave us feedback on this feature. It's available in the v19.1 release. I'm closing this thread. In the case of bugs or questions, feel free to create new GitHub issues or tickets in our Support Center.

[kingsanu]

When this feature will be availalbe?

[ZaHgO]

When this feature will be availalbe?

It's already available: https://js.devexpress.com/Demos/WidgetsGallery/Demo/HtmlEditor/Mentions/Vue/Light/