Add Custom Emoji Support

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

@@ -6,6 +6,7 @@ import { pictrsUri } from "../../env";
 import { i18n } from "../../i18next";
 import { UserService } from "../../services";
 import {
+  customEmojisLookup,
   isBrowser,
   markdownFieldCharacterLimit,
   markdownHelpUrl,
@@ -17,6 +18,7 @@ import {
   setupTribute,
   toast,
 } from "../../utils";
+import { EmojiPicker } from "./emoji-picker";
 import { Icon, Spinner } from "./icon";
 import { LanguageSelect } from "./language-select";
 
@@ -226,6 +228,7 @@ export class MarkdownTextArea extends Component<
             >
               <Icon icon="link" classes="icon-inline" />
             </button>
+            <EmojiPicker onEmojiClick={(e) => this.handleEmoji(this,e)}></EmojiPicker>
             <form className="btn btn-sm text-muted font-weight-bold">
               <label
                 htmlFor={`file-upload-${this.id}`}
@@ -328,6 +331,22 @@ export class MarkdownTextArea extends Component<
     );
   }
 
+  handleEmoji(i: MarkdownTextArea, e: any) {
+    let value = e.native;
+    if (value == null){
+      let emoji = customEmojisLookup.get(e.id)?.custom_emoji;
+      if (emoji){
+        value = `![${emoji.alt_text}](${emoji.image_url} "${emoji.shortcode}")`;
+      }
+    }
+    i.setState({
+      content: `${i.state.content ?? ""} ${value} `,
+    });
+    i.contentChange();
+    let textarea: any = document.getElementById(i.id);
+    autosize.update(textarea);
+  }
+
   handleImageUploadPaste(i: MarkdownTextArea, event: any) {
     let image = event.clipboardData.files[0];
     if (image) {