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>
Dos cosas que se me ocurren, no estoy seguro si son posibles actualmente pero me encantaría tener:
¿La capacidad de usar esto para menciones de grupo? Acabo de intentarlo para mi grupo de administradores pero no pareció funcionar.
La capacidad para que el usuario elija su propio emoji en sus preferencias y luego se mostraría cada vez que se le mencionara. Incluso podría ser un beneficio para dar a los usuarios más comprometidos en niveles de confianza más altos.
Editar:
¿La capacidad de usar esto para menciones de grupo? Acabo de intentarlo para mi grupo de administradores pero no pareció funcionar.
Descubrí cómo hacerlo pero no sé cómo hacer una solicitud de PR, así que por ahora, solo publicaré el código a continuación:
common.scss agrega .mention-group:after y .mention-group:before
Quería la capacidad de usar también SVG personalizados como icono junto a una mención, algo que he visto en Guilded para el personal y que quería tener allí pero no podía tener; otra razón por la que me gusta tanto Discourse es que realmente puedo hackear algo que funcione en lugar de esperar a que los desarrolladores lo añadan.
Así que hackeé la siguiente solución. No es infalible, probablemente requiere que el SVG que subas tenga una variable SCSS que comience con svg y, sin embargo, parece funcionar lo suficiente para mí ahora
Si alguien quiere tomar este código y desarrollarlo, incorporarlo para hacerlo más elegante, ¡estaré agradecido!
Posibles mejoras
Hacer que funcione para todos los iconos SVG, es decir, todos los de Discourse y todos los que se suben y no empiezan con svg.
Limpiar el código.
Mejorar el estilo, ya que he hackeado un poco el CSS para que funcione y puede que no funcione en todas las situaciones.
Sin embargo, aquí tienes un ejemplo de una mención conmigo usando el icono personalizado que tengo para Defensa Emocional Personal como icono de mención del personal:
Aquí está el código que añadí:
header.html
// Añade iconos SVG como opción, siempre que estén incluidos en los assets y subidos
// Crea un objeto de todos los assets e itera para encontrar qué enlaces tienen el atributo data-emoji
// igual al nombre de la variable del asset y luego añade la URL correspondiente
// convierte el objeto en un array de claves
const keys = Object.keys(settings.theme_uploads);
// imprime todas las claves
console.log(keys);
// itera sobre el 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 + "')");
}
);
});
¿Hay alguna forma de que el emoji solo aparezca para el usuario elegido? Si tienes un usuario con el nombre Taylor y TaylorLife, el emoji aparece para ambos.
