diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx index 6898ebc79..5239eb2c7 100644 --- a/ui/src/components/comment-form.tsx +++ b/ui/src/components/comment-form.tsx @@ -230,11 +230,14 @@ export class CommentForm extends Component { } 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 a65ead462..912d8e589 100644 --- a/ui/src/components/post-form.tsx +++ b/ui/src/components/post-form.tsx @@ -383,11 +383,14 @@ export class PostForm extends Component { } 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 fd23bf9ea..21a7fef83 100644 --- 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