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
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>
Two things that come to mind, not sure if currently possible but what I’d love to have:
The ability to use this for group mentions? I just tried it for my admins group but didn’t seem to work.
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:
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
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
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
Make it work for all SVG icons, meaning all the Discourse ones and all that are uploaded by don’t start with svg.
Clean up the code.
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:
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 + "')");
}
);
});
