Squashed commit of the following:

commit 9112fea
Author: saltrafael <oversaid_logodaedaly@slmail.me>
Date:   Mon Oct 25 15:03:59 2021 -0300

    Add Emote Selector and Emote Comment creation ability

commit cb8e790
Author: saltrafael <oversaid_logodaedaly@slmail.me>
Date:   Mon Oct 25 12:54:54 2021 -0300

    Add new emote menu

commit ba894b1
Author: saltrafael <oversaid_logodaedaly@slmail.me>
Date:   Mon Oct 25 12:26:11 2021 -0300

    Refactor form-field

ui/component/commentCreate/emote-selector.jsx

@@ -0,0 +1,64 @@
+// @flow
+import React from 'react';
+import emoji from 'emoji-dictionary';
+import Button from 'component/button';
+import OptimizedImage from 'component/optimizedImage';
+import * as EMOTES from 'constants/emotes';
+
+const OLD_QUICK_EMOJIS = [
+  emoji.getUnicode('rocket'),
+  emoji.getUnicode('jeans'),
+  emoji.getUnicode('fire'),
+  emoji.getUnicode('heart'),
+  emoji.getUnicode('open_mouth'),
+];
+
+type Props = { commentValue: string, setCommentValue: (string) => void };
+
+export default function EmoteSelector(props: Props) {
+  const { commentValue, setCommentValue } = props;
+
+  function addEmoteToComment(emote: string) {
+    setCommentValue(
+      commentValue + (commentValue && commentValue.charAt(commentValue.length - 1) !== ' ' ? ` ${emote} ` : `${emote} `)
+    );
+  }
+
+  return (
+    <div className="emote__selector">
+      <div className="emotes-list">
+        <div className="emotes-list--row">
+          <div className="emotes-list--row-title">{__('Old')}</div>
+          <div className="emotes-list--row-items">
+            {OLD_QUICK_EMOJIS.map((emoji) => (
+              <Button
+                key={emoji}
+                label={emoji}
+                button="alt"
+                className="button--file-action"
+                onClick={() => addEmoteToComment(emoji)}
+              />
+            ))}
+          </div>
+        </div>
+
+        <div className="emotes-list--row">
+          <div className="emotes-list--row-title">{__('Global')}</div>
+          <div className="emotes-list--row-items">
+            {Object.keys(EMOTES).map((emote) => (
+              <Button
+                key={String(emote)}
+                title={`:${emote.toLowerCase()}:`}
+                button="alt"
+                className="button--file-action"
+                onClick={() => addEmoteToComment(`:${emote.toLowerCase()}:`)}
+              >
+                <OptimizedImage src={String(EMOTES[emote])} />
+              </Button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

ui/component/commentCreate/view.jsx

@@ -17,6 +17,7 @@ import FilePrice from 'component/filePrice';
 import I18nMessage from 'component/i18nMessage';
 import Icon from 'component/common/icon';
 import OptimizedImage from 'component/optimizedImage';
+import EmoteSelector from './emote-selector';
 import React from 'react';
 import SelectChannel from 'component/selectChannel';
 import type { ElementRef } from 'react';
@@ -119,6 +120,7 @@ export function CommentCreate(props: Props) {
   const [deletedComment, setDeletedComment] = React.useState(false);
   const [pauseQuickSend, setPauseQuickSend] = React.useState(false);
   const [disableReviewButton, setDisableReviewButton] = React.useState();
+  const [showEmotes, setShowEmotes] = React.useState(false);
 
   const selectedMentionIndex =
     commentValue.indexOf('@', selectionIndex) === selectionIndex
@@ -208,12 +210,6 @@ export function CommentCreate(props: Props) {
     window.removeEventListener('keydown', altEnterListener);
   }
 
-  function handleSubmit() {
-    if (activeChannelClaim && commentValue.length) {
-      handleCreateComment();
-    }
-  }
-
   function handleSupportComment() {
     if (!activeChannelClaim) return;
 
@@ -421,7 +417,6 @@ export function CommentCreate(props: Props) {
 
   return (
     <Form
-      onSubmit={handleSubmit}
       className={classnames('comment__create', {
         'comment__create--reply': isReply,
         'comment__create--nested-reply': isNested,
@@ -461,6 +456,8 @@ export function CommentCreate(props: Props) {
         </div>
       ) : (
         <>
+        {showEmotes && <EmoteSelector commentValue={commentValue} setCommentValue={setCommentValue} />}
+
           {!advancedEditor && (
             <ChannelMentionSuggestions
               uri={uri}
@@ -490,6 +487,7 @@ export function CommentCreate(props: Props) {
               !SIMPLE_SITE && (isReply ? undefined : advancedEditor ? __('Simple Editor') : __('Advanced Editor'))
             }
             quickActionHandler={() => !SIMPLE_SITE && setAdvancedEditor(!advancedEditor)}
+            openEmoteMenu={() => setShowEmotes(!showEmotes)}
             onFocus={onTextareaFocus}
             onBlur={onTextareaBlur}
             placeholder={__('Say something about this...')}
@@ -571,6 +569,12 @@ export function CommentCreate(props: Props) {
                   : __('Comment --[button to submit something]--')
               }
               requiresAuth
+              onClick={() => {
+                if (activeChannelClaim && commentValue.length) {
+                  handleCreateComment();
+                  setShowEmotes(false);
+                }
+              }}
             />
           )
         )}