Forum Discussion

pp_01's avatar
pp_01
Mentor
11 months ago

Automatically loading of user's "@" handle in the reply box when the Reply button is clicked.

Hi. I have a query regarding @Mentions. When we click on the Reply button on any content page is there any way to automatically populate the OOB reply box with the @ handle of the user to whom we are replying? For example here - 

 

 

 

The current functionality is that we have to type '@' and then the suggestion for that username comes up. Can this be automated or if a button be added to the above options which if clicked will add the mention directly in the box?

1. I would like to know if I can achieve this by customizing an already existing Admin setting in the community, or if an admin setting can be added for it.

2. Or doing something like that will require a customization of the OOB reply box component or functionality.

3. If it is achievable by changing the OOB functionality then what steps should be followed and would it be a good approach? Please let me know. Thanks in advance.

  • Akenefick's avatar
    Akenefick
    Genius
    11 months ago

    Hi pp_01 

    I don't believe this is possible with any out of the box admin settings. You could add this JavaScript as a custom component to the Forum Topic Page. When a reply button is clicked it will grab that messages' id and make an API call to get the author info. Then it adds the mention to the reply editor.

    <@liaAddScript>
;(function($){

    var replyButtons = document.querySelectorAll('.reply-action-link');
    var ed;

    for (var i = 0; i < replyButtons.length; i++) {
        replyButtons[i].addEventListener("click", (event) => {
            var reply = event.target;
            var message = reply.closest(".lia-message-view-wrapper");
            var messageId = message.getAttribute("data-lia-message-uid");
            var url = "/api/2.0/search?q=SELECT%20author.id,%20author.login%20FROM%20messages%20WHERE%20id%20=%27" + messageId + "%27"

            tinymce.on('addeditor', function(e) {
                ed = e.editor;
                
                    async function fetchAuthor() {
                    const response = await fetch(url);
                    const resp = await response.json();
                    console.log(resp)
                    var atMention = '<p><li-user login="' + resp.data.items[0].author.login + '" uid="' + resp.data.items[0].author.id + '"></li-user>&nbsp;</p>'

                    ed.execCommand('mceInsertContent', false, atMention);
					var bm = ed.selection.getBookmark();
                    ed.selection.moveToBookmark(bm);
                }

                fetchAuthor()

            })
            
            

        })
    }

})(LITHIUM.jQuery);
</@liaAddScript>