Emoji mention theme component

theme-component

(Kris) #1

This is a simple component that will automatically add an emoji (or other text, if you’d like) to a @mention in a post

40%20AM

Github repo: https://github.com/awesomerobot/discourse-emoji-mention

How do I install a Theme or Theme Component?

How to

To configure it, add items to the list in the format of @username, emoji (You can copy and paste emoji from https://getemoji.com/ or https://emojipedia.org/)

41%20AM

There’s also an option to show the emoji after the mention, instead of before.

That’s all it does!


(Diego Barreiro) #2

Would be possible to use this with custom emojis?
As we provide support from our community, it would be nice to add our logo before mentioning one of the staff


(Rafael dos Santos Silva) #3

Not using the current structure because the setting uses unicode for emojis.


(Diego Barreiro) #4

Mmm, and maybe it could be changed? :sweat_smile:


(Kris) #5

This component is kind of a super basic template on finding content in a post and appending something to it. There’s probably a way to grab existing emojis, but I don’t know it off the top of my head.

What would work is replacing the header.html file in the component with this, which would just append an image after a mention instead (that image could be a little logo).

<script type="text/discourse-plugin" version="0.8.18">
    $.expr[":"].contains = $.expr.createPseudo(function(arg) { // make case insensitive
        return function( elem ) {
            return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
        };
    }); 
    
    let emoji = {};
    
    settings.username_emoji.split('|').forEach(pair => {
        let split = pair.split(",");
        emoji[split[0].toLowerCase()] = split[1];
    });
    
    $.each(emoji, function (key, value){
        api.decorateCooked($elem => $elem.find("a.mention:contains(" + key + ")").append("<img src='" + value + "'>").addClass("with-image"));
    });
    
</script> 

Using a setting like this