Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HtmlEditor - Mentions #7267

Open
DokaRus opened this issue Mar 13, 2019 · 10 comments

Comments

Projects
None yet
3 participants
@DokaRus
Copy link
Contributor

commented Mar 13, 2019

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

Mentions

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.

@DokaRus DokaRus self-assigned this Mar 13, 2019

@ZaHgO

This comment has been minimized.

Copy link

commented Mar 15, 2019

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

This comment has been minimized.

Copy link
Contributor Author

commented Mar 18, 2019

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

This comment has been minimized.

Copy link

commented Mar 18, 2019

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

This comment has been minimized.

Copy link

commented Mar 19, 2019

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

@DokaRus

This comment has been minimized.

Copy link
Contributor Author

commented Mar 20, 2019

@ZaHgO
Thank you for your feedback!

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

@DokaRus

This comment has been minimized.

Copy link
Contributor Author

commented Apr 3, 2019

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

This comment has been minimized.

Copy link

commented Apr 11, 2019

@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

This comment has been minimized.

Copy link
Contributor Author

commented Apr 18, 2019

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

This comment has been minimized.

Copy link

commented Apr 25, 2019

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

image

But copy pasting the displayExpr to itemTemplate fixes the problem:
image
image

@DokaRus

This comment has been minimized.

Copy link
Contributor Author

commented Apr 26, 2019

Thanks @ZaHgO !
I've updated the demo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.