💡TOOL: Add an autocomplete tool type

[jeremyVignelles]

1. Describe a problem. When typing a text, I'm used to the github workflow where I can type # to refer to an issue, @ to mention someone or : to open the emoji panel. These kind of interactions are widely used in modern forums/chat, but as far as I've seen, are not possible with editor.js right now.

2. Describe the solution you'd like. Mockups are welcome. Autocomplete tools would be triggered by typing its marker, and can be discarded using the escape key. The autocomplete tool API could look something like this : (10 seconds thinking, might need some adjustments)

class MentionTool {

    static get isAutocomplete() {
        return true;
    }

    static get trigger() {
        return '@';
    }

    complete(text) {
        return [
            {// Each auto complete item has a free form, and is given as-is to the makeListItem/itemSelected functions
               id: 16060815,
               text: "CodeX-Team",
               profilePicture: "https://avatars.githubusercontent.com/u/16060815?s=200&v=4"
            }
        ].filter(i => i.text.startsWith(text));
    }

    makeListItem(item) { // Creates a list item to show in the autocomplete list
         return `<img src="${item.profilePicture}" /> ${item.text}`;
    }

    itemSelected(selectedItem) { // Creates the code to put in the editor
          return `<a class="mention" href="/user/${selectedItem.id}">#${selectedItem.text}</a>`;
    } 
    
}

3. Are there any alternatives? There is the "inline tool" type, but you need to select a text and apply the inline tool, which breaks the natural flow of typing.

[zegenie]

I want to add a suggestion to allow the complete() method, or other methods to populate the list to be async, so that it can also be used for things like inline suggestions based on a server response, such as looking up related documents, linking to things and searching for users.

Apart from that, :+1: on this one.

[jeremyVignelles]

Indeed, I didn't make it clear, but ajax responses are indeed on top of the wishlist 😄

[Voloshchenko]

Hi, any news on this feature?

[ludusrusso]

I need it too!

[giuppidev]

I really need this solution too!

[thijskuilman]

I agree; this would be really useful!

[geekyayush]

Upvoting for this

[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!

[poojaramanigc]

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!

this is not working for me can you provide full working codesendbox link. i really want to implement this feature

[bettysteger]

this is not working for me can you provide full working codesendbox link. i really want to implement this feature

here you go: https://codesandbox.io/p/sandbox/editorjs-mentions-37fl8x

[artfxx]

https://zurb.com/playground/tribute?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library Add to same anchor element