Use twemoji style for emoji picker.

diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx
index 6898ebc79fb2f7466bf86547f873f2cecd6491b7..5239eb2c7a10660182154a1dd7f91b305ca367b7 100644 (file)
--- a/ui/src/components/comment-form.tsx
+++ b/ui/src/components/comment-form.tsx
@@ -230,11 +230,14 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
   }
 
   setupEmojiPicker() {
-    emojiPicker.on('emoji', emoji => {
+    emojiPicker.on('emoji', twemojiHtmlStr => {
       if (this.state.commentForm.content == null) {
         this.state.commentForm.content = '';
       }
-      let shortName = `:${emojiShortName[emoji]}:`;
+      var el = document.createElement('div');
+      el.innerHTML = twemojiHtmlStr;
+      let nativeUnicode = (el.childNodes[0] as HTMLElement).getAttribute('alt');
+      let shortName = `:${emojiShortName[nativeUnicode]}:`;
       this.state.commentForm.content += shortName;
       this.setState(this.state);
     });

diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx
index a65ead4620c5246f0c9c02b1fcd160c8954fc6fa..912d8e5896157c89ae6e9be9925b08b10b2849c0 100644 (file)
--- a/ui/src/components/post-form.tsx
+++ b/ui/src/components/post-form.tsx
@@ -383,11 +383,14 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
   }
 
   setupEmojiPicker() {
-    emojiPicker.on('emoji', emoji => {
+    emojiPicker.on('emoji', twemojiHtmlStr => {
       if (this.state.postForm.body == null) {
         this.state.postForm.body = '';
       }
-      let shortName = `:${emojiShortName[emoji]}:`;
+      var el = document.createElement('div');
+      el.innerHTML = twemojiHtmlStr;
+      let nativeUnicode = (el.childNodes[0] as HTMLElement).getAttribute('alt');
+      let shortName = `:${emojiShortName[nativeUnicode]}:`;
       this.state.postForm.body += shortName;
       this.setState(this.state);
     });

diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index fd23bf9ea251748838613334bac56827dad7c21f..21a7fef83e83987fb5101d8b1531a5e8ff9bc5a9 100644 (file)
--- a/ui/src/utils.ts
+++ b/ui/src/utils.ts
@@ -91,7 +91,7 @@ export const themes = [
 
 export const emojiPicker = new EmojiButton({
   // Use the emojiShortName from native
-  // style: 'twemoji',
+  style: 'twemoji',
   theme: 'dark',
   position: 'auto-start',
   // TODO i18n