This is a simple component that will automatically add an emoji (or other text, if you’d like) to a @mention in a post
Github repo: https://github.com/awesomerobot/discourse-emoji-mention
Installing a theme or theme component
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/)
There’s also an option to show the emoji after the mention, instead of before.
That’s all it does!
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
Not using the current structure because the setting uses unicode for emojis.
Mmm, and maybe it could be changed? 
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
Мне очень нравится эта идея!
Две вещи приходят на ум, не уверен, что это сейчас возможно, но я бы хотел иметь:
Возможность использовать это для упоминаний групп? Я только что попробовал для своей группы администраторов, но, похоже, не сработало.
Возможность для пользователя выбрать свой собственный эмодзи в настройках, и тогда он будет отображаться каждый раз, когда его упоминают. Возможно, это даже могло бы стать привилегией для более активных пользователей с высоким уровнем доверия.
Редактирование:
- Возможность использовать это для упоминаний групп? Я только что попробовал для своей группы администраторов, но, похоже, не сработало.
Я понял, как это сделать, но не знаю, как отправить запрос на изменение (PR), поэтому пока просто опубликую код ниже:
common.scss добавляет .mention-group:after и .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 добавляет это в конец:
$.each(emoji, function(key, value) {
api.decorateCooked($elem =>
$elem
.find("a.mention-group:contains(" + key + ")")
.attr("data-emoji", value)
.addClass("with-emoji")
);
});
Я хотел бы иметь возможность использовать пользовательские SVG-изображения в качестве иконки рядом с упоминанием. Я видел подобное на Guilded для сотрудников, и мне тоже хотелось бы иметь такую возможность, но у меня не получалось. И это ещё одна причина, по которой мне так нравится Discourse: здесь я могу самостоятельно собрать что-то рабочее, вместо того чтобы надеяться и ждать, пока разработчики добавят эту функцию.
Поэтому я собрал следующее решение. Оно далеко не идеальное: вероятно, загружаемый вами SVG-файл должен иметь переменную SCSS, начинающуюся с svg. Тем не менее, на данный момент этого достаточно для моей задачи 
Если кто-то захочет взять этот код, доработать его и сделать ещё лучше, я буду очень признателен!
Возможные улучшения:
svg.В любом случае, вот пример упоминания с использованием моей пользовательской иконки для «Эмоциональной самозащиты» в качестве иконки упоминания сотрудника:
Вот код, который я добавил:
header.html
// Добавить SVG-иконки как опцию, при условии, что они включены в assets и загружены
// Создает объект всех ассетов и перебирает их, чтобы найти ссылки, у которых атрибут data-emoji
// равен имени переменной ассета, а затем добавляет для них URL
// преобразовать объект в массив ключей
const keys = Object.keys(settings.theme_uploads);
// вывести все ключи
console.log(keys);
// перебрать объект
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;
}
}
Это также требует от вас:
/assets.svg в папку /assets, например /assets/esd-heart.svg.about.json, чтобы добавить ссылки на эти ассеты, например:"assets": {
"svg_esd_heart": "assets/esd-heart.svg"
}
Есть ли способ, чтобы эмодзи отображался только для выбранного пользователя? Если у вас есть пользователи с именами Taylor и TaylorLife, эмодзи появляется для обоих.
Похоже, это официальный компонент темы 
Ссылка на GitHub перенаправляет в репозиторий Discourse, и он указан в файле official.txt в репозитории all-the-themes. Можно ли обновить ссылки в первом сообщении (OP)? Тогда скрипт update_from_meta в том репозитории сможет распознать компонент как официальный и не будет пытаться добавить его в файл сторонних компонентов. Он был удалён из third-party.txt в декабре после того, как по ошибке был добавлен в ходе предыдущего обновления. Изменение URL репозитория могло бы предотвратить повторение этого.
Кроме того, было бы неплохо добавить тег official и первое сообщение с типичными элементами для официального компонента.