fix: Fix emoji picker custom emoji bug (#2175)

* Make emoji picker insert custom emojis

* Close emoji picker after emoji is selected

src/shared/components/common/emoji-mart.tsx

@@ -1,4 +1,4 @@
-import { Component } from "inferno";
+import { Component, RefObject, createRef } from "inferno";
 import { getEmojiMart } from "../../markdown";
 
 interface EmojiMartProps {
@@ -7,21 +7,24 @@ interface EmojiMartProps {
 }
 
 export class EmojiMart extends Component<EmojiMartProps> {
+  div: RefObject<HTMLDivElement>;
+
   constructor(props: any, context: any) {
     super(props, context);
+
+    this.div = createRef();
+
     this.handleEmojiClick = this.handleEmojiClick.bind(this);
   }
+
   componentDidMount() {
-    const div: any = document.getElementById("emoji-picker");
-    if (div) {
-      div.appendChild(
-        getEmojiMart(this.handleEmojiClick, this.props.pickerOptions),
-      );
-    }
+    this.div.current?.appendChild(
+      getEmojiMart(this.handleEmojiClick, this.props.pickerOptions) as any,
+    );
   }
 
   render() {
-    return <div id="emoji-picker"></div>;
+    return <div id="emoji-picker" ref={this.div} />;
   }
 
   handleEmojiClick(e: any) {

src/shared/components/common/emoji-picker.tsx

@@ -77,5 +77,6 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
 
   handleEmojiClick(e: any) {
     this.props.onEmojiClick?.(e);
+    this.setState({ showPicker: false });
   }
 }

src/shared/components/common/markdown-textarea.tsx

@@ -89,6 +89,7 @@ export class MarkdownTextArea extends Component<
     super(props, context);
 
     this.handleLanguageChange = this.handleLanguageChange.bind(this);
+    this.handleEmoji = this.handleEmoji.bind(this);
 
     if (isBrowser()) {
       this.tribute = setupTribute();
@@ -163,9 +164,7 @@ export class MarkdownTextArea extends Component<
                 {this.getFormatButton("bold", this.handleInsertBold)}
                 {this.getFormatButton("italic", this.handleInsertItalic)}
                 {this.getFormatButton("link", this.handleInsertLink)}
-                <EmojiPicker
-                  onEmojiClick={e => this.handleEmoji(this, e)}
-                ></EmojiPicker>
+                <EmojiPicker onEmojiClick={this.handleEmoji}></EmojiPicker>
                 <label
                   htmlFor={`file-upload-${this.id}`}
                   className={classNames("mb-0", {
@@ -359,19 +358,19 @@ export class MarkdownTextArea extends Component<
     );
   }
 
-  handleEmoji(i: MarkdownTextArea, e: any) {
+  handleEmoji(e: any) {
     let value = e.native;
-    if (value === null) {
+    if (!value) {
       const emoji = customEmojisLookup.get(e.id)?.custom_emoji;
       if (emoji) {
         value = `![${emoji.alt_text}](${emoji.image_url} "emoji ${emoji.shortcode}")`;
       }
     }
-    i.setState({
-      content: `${i.state.content ?? ""} ${value} `,
+    this.setState({
+      content: `${this.state.content ?? ""} ${value} `,
     });
-    i.contentChange();
-    const textarea: any = document.getElementById(i.id);
+    this.contentChange();
+    const textarea: any = document.getElementById(this.id);
     autosize.update(textarea);
   }