[Inline Tool] Mentions

[neSpecc]

Design: zpl.io/aBN4oBp

Config items:

Array of {title, image?, url?, id?}

[mydearxym]

is there still a plan to support mentions feature?

[zsoflin]

Yes, is this still planned? Unfortunately, mentions are necessary in order for me to switch from Quill :)

[SammyVimes]

Can you share the designs of mentions plugin? I want to implement it (I need it for my pet project and I'd be happy to share implementation with community)

[neSpecc]

@SammyVimes here is a draft:

Try to use Inline Tools API. If you will need some methods that we does not provide, write us.

[SammyVimes]

@neSpecc I guess mentions tool should listen for every input change (in case of new character is @) unlike other tools. I hope that will not affect performance too much 😃

[Steve1820]

@SammyVimes Did you end up implemented this?

Let me know if I can help.

[ckissi]

@SammyVimes @Steve1820 I'm curious too. It would be great to have it.

[GuruM]

@SammyVimes @Steve1820 @ckissi yeah I'm going to attempt this now but would love to know if anyone has been able to do it. I saw https://github.com/mydearxym/editor-mention but I couldn't get that working.

[akshayrathodar]

Yes, is this still planned? Unfortunately, mentions are necessary in order for me to switch from Quill :)

i created the plugin for same for my own use

[aromero86]

@akshayrathodar this plugin is public? thanks

[akshayrathodar]

this plugin is public? thanks

no but i can help you regard this or can share you my code

[Ruubber]

@akshayrathodar
Hello.
I need to implement the mention function. Can you please share the code?
Thank you!

[aromero86]

@akshayrathodar it would be nice have an starting point. I would be very grateful if you could share your code. Of course, if something interesting comes from there, I would go to the EditorJS community

no but i can help you regard this or can share you my code

[romainhe]

@akshayrathodar Hi, can you share your code ? I've the same needs. Thx

[kennyd98]

@akshayrathodar Hi, I will also appreciate if you share me the code. Thank you.

[akshayrathodar]

https://github.com/akshayrathodar/editor-js-audio

[jeremyVignelles]

If I understand this issue properly, the workflow would be:

1. Type the name of the person you want to mention
2. Click on the inline tool
3. The mention is now linked.

I don't find this workflow optimal, and I think we need a new kind of tool to tackle this issue, so I created #1623

[russelshane]

This might be the one you're looking for, although, it needs a backend that has a search functionality, should be easy if you already have a backend API running:

@mrpritchett/editorjs-mentions

[Fennec-hub]

@neSpecc

I think I can create a plugin for handling suggestions like mentions, hashtags and emojis ..., they all follow more or less the same logic, I looked into the Inline Tools API, it doesn't provide any method to listen to text change or any kind of keyup event, there is only the checkstate method that triggers only when a selection is made.

If you can give some insight on how to achieve the following, I'll be glad to start working on this plugin and share the result.

1. A way to detect text input changes ideally onkeyup event
2. Get the current word at the caret position ideally with a Range object

And the workflow should be:

1. Detect text change (keyup event listener)
2. Get the current word at the caret position with a Range object
3. Check for some starting key characters (@ for mention, # for hashtags, : for emojis ...)
4. Call an API endpoint for a list of suggestions
5. Display a drop down menu with the suggestions list
6. Replace the current word with the selected suggestion and the surrounding tags (, ....);

I tried a work around by getting the current focused block element from api.blocks and add a keyup listener but it's hacky and not viable solution.

[icastillejogomez]

Some updates here? I need this implementation I help if needed

[geekyayush]

Hey man, have you created such plugin?

[akshayrathodar]

Sure, will do that. actually need to check that project which is in my old laptop. will check . please ping me on +919429076228 (whatsapp) . if i will forgot.

…

On Fri, Jan 27, 2023 at 11:23 AM Ruubber ***@***.***> wrote: @akshayrathodar <https://github.com/akshayrathodar> Hello. I need to implement the mention function. Can you please share the code? Thank you! — Reply to this email directly, view it on GitHub <#1880 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMLYS5726OTOC7F66OODQU3WUNPEHANCNFSM6AAAAAAQJ6ESZU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[Ruubber]

@akshayrathodar
Thank you!!
How can I share the code with you?
Can I contact you on whats app?

[akshayrathodar]

https://github.com/akshayrathodar/editor-js-audio Please check some module i hv created

[samandar-boymurodov]

Hi, do you know if this feature has been implemented?

[davidpawar]

I would need a similar feature. I need to have replacer elements, which the user can place in certain location inside his text.

e.g.

Writing a reply mail.

Dear [Contact Person],
we will send you the items to [Destination]

[bettysteger]

I hope i can help someone with this: https://gist.github.com/bettysteger/d8f660030849ae85211d51d93e736a3b

My solution of getting this to work:

1. Listening to paragraphs for inputting @
2. Replace @ with <a rel="tag">@</a> and select the new anchor tag to trigger the custom mention inline tool
3. Mention inline tool opens up an user list, where you can search and select the user to tag!

Inline output will be <a href="#${user.id}" rel="tag">${user.name}</a>.

Feedback is highly appreciated!

[Hesesses]

Hello,

Is there any timeline for this feature? We are consider editorjs for our upcoming project

[akshayrathodar]

Check this repo. may be it will help you. https://github.com/akshayrathodar/editor-js-audio

[akshayrathodar]

Here you can check zip for @editor.js