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>
Duas coisas que me vêm à mente, não tenho certeza se são possíveis atualmente, mas o que eu adoraria ter:
A capacidade de usar isso para menções de grupo? Acabei de tentar para o meu grupo de administradores, mas não pareceu funcionar.
A capacidade de o usuário escolher seu próprio emoji em suas preferências e, em seguida, ele apareceria toda vez que fosse mencionado. Talvez pudesse até ser um benefício para dar a usuários mais engajados em níveis de confiança mais altos.
Editar:
A capacidade de usar isso para menções de grupo? Acabei de tentar para o meu grupo de administradores, mas não pareceu funcionar.
Descobri como fazer isso, mas não sei como fazer uma solicitação de PR, então, por enquanto, postarei o código abaixo:
common.scss adiciona .mention-group:after e .mention-group:before
Eu queria a capacidade de usar também SVGs personalizados como ícone ao lado de uma menção, algo que vi no Guilded para a equipe e que eu queria ter lá, mas não conseguia — mais um motivo pelo qual estou gostando tanto do Discourse é que posso realmente criar algo que funcione em vez de esperar que os desenvolvedores o adicionem.
Então, criei a seguinte solução. Não é infalível de forma alguma, provavelmente requer que o SVG que você carrega tenha uma variável SCSS que comece com svg e, ainda assim, parece funcionar o suficiente para mim agora
Se alguém quiser pegar este código e desenvolvê-lo, incorporá-lo para torná-lo mais sofisticado, ficaria grato!
Possíveis melhorias
Fazer com que funcione para todos os ícones SVG, ou seja, todos os do Discourse e todos os que são carregados e não começam com svg.
Limpar o código.
Melhorar o estilo, pois eu meio que criei o CSS para funcionar e pode não funcionar em todas as situações.
Independentemente disso, aqui está um exemplo de uma menção comigo usando o ícone personalizado que tenho para Defesa Emocional como ícone de menção da equipe:
Aqui está o código que adicionei:
header.html
// Adiciona ícones SVG como uma opção, desde que estejam incluídos nos assets e carregados
// Cria um objeto de todos os assets e itera para encontrar quais links têm o atributo data-emoji
// igual ao nome da variável do asset e, em seguida, adiciona o URL para ele
// converte o objeto em um array de chaves
const keys = Object.keys(settings.theme_uploads);
// imprime todas as chaves
console.log(keys);
// itera sobre o objeto
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 + "')");
}
);
});
Existe alguma maneira de o emoji aparecer apenas para o usuário escolhido? Se você tiver um usuário com o nome Taylor e TaylorLife, o emoji aparece para ambos.
