Emoji mention theme component

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!

29 Likes

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

1 Like

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

1 Like

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

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

11 Likes

I really like this concept!

Two things that come to mind, not sure if currently possible but what I’d love to have:

  1. The ability to use this for group mentions? I just tried it for my admins group but didn’t seem to work.

  2. The ability for the user to choose their own emoji in their preferences and then it would show every time they’re mentioned. Maybe it could even be a perk to give to more engaged users at higher trust levels.

Edit:

  1. The ability to use this for group mentions? I just tried it for my admins group but didn’t seem to work.

I figured out how to do this but don’t know how to do a PR request so for now, I’ll just post the code below:

common.scss adds .mention-group:after and .mention-group:before

@if $show-after-mention == "true" {
  .mention:after,
  .mention-group:after {
    content: attr(data-emoji);
    display: inline;
  }
} @else {
  .mention:before,
  .mention-group:after {
    content: attr(data-emoji);
    display: inline;
  }
}

header.html adds this to the end:

$.each(emoji, function(key, value) {
  api.decorateCooked($elem =>
    $elem
      .find("a.mention-group:contains(" + key + ")")
      .attr("data-emoji", value)
      .addClass("with-emoji")
  );
});
1 Like

I wanted the ability to also use custom SVGs as the icon next to a mention, something that I’ve seen on Guilded for the staff and something I wanted to have there but couldn’t have—yet another reason why I’m liking Discourse so much is that I can actually hack together something that may work instead of hoping and waiting the devs will add it.

So I hacked together the following solution. It’s not foolproof by any means, probably requires the SVG you upload to have a SCSS variable that starts with svg and yet it seems to work enough for me now :slight_smile:

If someone wants to take this code and run with it, incorporate it to make it fancier, I’d be grateful!

Possible things to improve

  1. Make it work for all SVG icons, meaning all the Discourse ones and all that are uploaded by don’t start with svg.
  2. Clean up the code.
  3. Improve the styling, as I’ve kinda hacked together the CSS to work and may not work in all situations.

Regardless, here’s an example of a mention with me using the custom icon I have for Emotional Self-Defense as the staff mention icon:

image

Here’s the code I added:

header.html

  // Add SVG icons as an option, as long as they're included in assets and uploaded
  // Creates an object of all the assets and iterates to find which links have the data-emoji
  // attribute equaling the asset variable name then adds the URL for it

  // convert object to key's array
  const keys = Object.keys(settings.theme_uploads);

  // print all keys
  console.log(keys);

  // iterate over object
  keys.forEach((key, index) => {
      console.log(`${key}: ${settings.theme_uploads[key]}`);
      api.decorateCooked($elem => {
        var url = settings.theme_uploads[key];
        console.log("key: " + key);
        console.log("index: " + index);
        console.log("url: " + url);
        console.log(JSON.stringify(settings.theme_uploads));
        $elem
          .find("a[data-emoji^='" + key + "']")
          .css("--svg-icon", "url('" + url + "')");
        }
      );    
  });

common.scss

@if $show-after-mention == "true" {
  [data-emoji^="svg"]:after {
    content: 'hey ';
    color: transparent;
    height:5px;
    width:15px;
    background: var(--svg-icon) no-repeat center;
    background-size: contain;
    display: inline;
  }
} @else {
  [data-emoji^="svg"]:before {
    content: 'hey ';
    color: transparent;
    height:5px;
    width:15px;
    background: var(--svg-icon) no-repeat center;
    background-size: contain;
    display: inline;
  }
}

This also requires you to:

  1. Create an /assets folder
  2. Add svg files in the /assets folder, like /assets/esd-heart.svg
  3. Update the about.json file to link to those assets with something like:
"assets": {
  	"svg_esd_heart": "assets/esd-heart.svg"
}
1 Like

Is there any way for the emoji to only appear for the chosen user? If you have a user with the name Taylor and TaylorLife, the emoji appears for both