Emoji mention theme component

[awesomerobot (Kris)]

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

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/)

There’s also an option to show the emoji after the mention, instead of before.

That’s all it does!

[barreeeiroo (Diego Barreiro)]

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

[Falco]

@barreeeiroo

Would be possible to use this with custom emojis?

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

[barreeeiroo (Diego Barreiro)]

Mmm, and maybe it could be changed?

[awesomerobot (Kris)]

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

[jimkleiber]

Ich mag dieses Konzept wirklich!

Zwei Dinge, die mir einfallen, ich bin mir nicht sicher, ob sie derzeit möglich sind, aber ich würde sie gerne haben:

1. Die Möglichkeit, dies für Gruppen-Erwähnungen zu verwenden? Ich habe es gerade für meine Admin-Gruppe versucht, aber es schien nicht zu funktionieren.

2. Die Möglichkeit für den Benutzer, sein eigenes Emoji in seinen Einstellungen zu wählen, und es würde dann jedes Mal angezeigt werden, wenn er erwähnt wird. Vielleicht könnte es sogar ein Vorteil sein, den engagierteren Benutzern auf höheren Vertrauensstufen zu gewähren.

Bearbeiten:

1. Die Möglichkeit, dies für Gruppen-Erwähnungen zu verwenden? Ich habe es gerade für meine Admin-Gruppe versucht, aber es schien nicht zu funktionieren.

Ich habe herausgefunden, wie das geht, weiß aber nicht, wie ich eine PR-Anfrage stelle. Vorerst werde ich den Code unten posten:

common.scss fügt .mention-group:after und .mention-group:before hinzu

@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 fügt dies am Ende hinzu:

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

[jimkleiber]

Ich wollte die Möglichkeit haben, auch benutzerdefinierte SVGs als Symbol neben einer Erwähnung zu verwenden, etwas, das ich auf Guilded für das Personal gesehen habe und das ich dort haben wollte, aber nicht haben konnte – noch ein Grund, warum ich Discourse so sehr mag, ist, dass ich tatsächlich etwas zusammenbasteln kann, das funktionieren könnte, anstatt darauf zu hoffen und darauf zu warten, dass die Entwickler es hinzufügen.

Also habe ich die folgende Lösung zusammengebastelt. Sie ist keineswegs narrensicher, erfordert wahrscheinlich, dass die von Ihnen hochgeladene SVG eine SCSS-Variable hat, die mit svg beginnt, und dennoch scheint sie für mich jetzt gut genug zu funktionieren

Wenn jemand diesen Code nehmen und damit weitermachen möchte, ihn schicker machen möchte, wäre ich dankbar!

Mögliche Verbesserungen

1. Funktionieren für alle SVG-Icons, d. h. alle Discourse-Icons und alle, die von hochgeladen werden und nicht mit svg beginnen.
2. Den Code aufräumen.
3. Das Styling verbessern, da ich das CSS irgendwie zusammengebastelt habe, um zu funktionieren, und es möglicherweise nicht in allen Situationen funktioniert.

Unabhängig davon hier ein Beispiel für eine Erwähnung, bei der ich das benutzerdefinierte Symbol für Emotional Self-Defense als Symbol für die Erwähnung von Personal verwende:

Hier ist der Code, den ich hinzugefügt habe:

header.html

  // SVG-Icons als Option hinzufügen, solange sie in Assets enthalten und hochgeladen sind
  // Erstellt ein Objekt aller Assets und durchläuft es, um herauszufinden, welche Links das data-emoji-Attribut haben,
  // das dem Variablennamen des Assets entspricht, und fügt dann die URL dafür hinzu.

  // Objekt in Schlüssel-Array konvertieren
  const keys = Object.keys(settings.theme_uploads);

  // Alle Schlüssel ausgeben
  console.log(keys);

  // Über Objekt iterieren
  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;
  }
}

Dies erfordert auch, dass Sie:

1. Einen Ordner /assets erstellen
2. svg-Dateien im Ordner /assets hinzufügen, z. B. /assets/esd-heart.svg
3. Die Datei about.json aktualisieren, um mit etwas wie den folgenden auf diese Assets zu verweisen:

"assets": {
  	"svg_esd_heart": "assets/esd-heart.svg"
}

[Jongin]

Gibt es eine Möglichkeit, dass das Emoji nur für den ausgewählten Benutzer angezeigt wird? Wenn Sie einen Benutzer mit dem Namen Taylor und TaylorLife haben, wird das Emoji für beide angezeigt.