Fixed emoji picker, migrated editor toolbar to functional component

src/common/components/comment/__snapshots__/index.spec.tsx.snap

@@ -200,10 +200,26 @@ exports[`(1) Default render 1`] = `
           fill="currentColor"
         />
       </svg>
+      <div
+        className="sub-tool-menu"
+      >
+        <div
+          className="sub-tool-menu-item"
+          onClick={[Function]}
+        >
+          Upload
+        </div>
+        <div
+          className="sub-tool-menu-item"
+          onClick={[Function]}
+        >
+          Gallery
+        </div>
+      </div>
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-525d9194-2e44-4e7a-9e86-ef2e448c455a"
+      id="editor-tool-emoji-picker-819cbf44-a32a-4077-a426-e918846a334c"
       role="none"
       title="Emoji"
     >
@@ -549,10 +565,26 @@ exports[`(2) Cancellable, in progress 1`] = `
           fill="currentColor"
         />
       </svg>
+      <div
+        className="sub-tool-menu"
+      >
+        <div
+          className="sub-tool-menu-item"
+          onClick={[Function]}
+        >
+          Upload
+        </div>
+        <div
+          className="sub-tool-menu-item"
+          onClick={[Function]}
+        >
+          Gallery
+        </div>
+      </div>
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-1dfb459c-12aa-465e-b119-bf96521d112c"
+      id="editor-tool-emoji-picker-2baa82a6-c21a-4fe6-b80f-3c6b2a6a0b20"
       role="none"
       title="Emoji"
     >

src/common/components/comment/index.spec.tsx

@@ -2,11 +2,10 @@ import React from "react";
 
 import Comment from "./index";
 
-import { UiInstance, globalInstance, entryInstance1 } from "../../helper/test-helper";
-
-import renderer from "react-test-renderer";
+import { entryInstance1, globalInstance, UiInstance } from "../../helper/test-helper";
 
 import emojiData from "../../../../public/emoji.json";
+import { withStore } from "../../tests/with-store";
 
 jest.mock("../../api/misc", () => ({
   getEmojiData: () =>
@@ -41,13 +40,13 @@ const defProps = {
 it("(1) Default render", () => {
   const props = { ...defProps };
 
-  const component = renderer.create(<Comment {...props} />);
+  const component = withStore(<Comment {...props} />);
   expect(component.toJSON()).toMatchSnapshot();
 });
 
 it("(2) Cancellable, in progress", () => {
   const props = { ...{ inProgress: true, cancellable: true, defText: "foo" }, ...defProps };
 
-  const component = renderer.create(<Comment {...props} />);
+  const component = withStore(<Comment {...props} />);
   expect(component.toJSON()).toMatchSnapshot();
 });

src/common/components/comment/index.tsx

@@ -4,7 +4,7 @@ import { ActiveUser } from "../../store/active-user/types";
 import { Account } from "../../store/accounts/types";
 import { ToggleType, UI } from "../../store/ui/types";
 import { Entry } from "../../store/entries/types";
-import EditorToolbar, { detectEvent, toolbarEventListener } from "../editor-toolbar";
+import { detectEvent, EditorToolbar, toolbarEventListener } from "../editor-toolbar";
 import LoginRequired from "../login-required";
 import defaults from "../../constants/defaults.json";
 import { renderPostBody, setProxyBase } from "@ecency/render-helper";
@@ -238,7 +238,7 @@ export class Comment extends Component<Props, State> {
             !showEmoji && !showGif && this.setState({ showEmoji: true, showGif: true })
           }
         >
-          {EditorToolbar({ ...this.props, sm: true, showEmoji, comment: true })}
+          <EditorToolbar comment={true} {...this.props} sm={true} />
           <div className="comment-body" onKeyDown={this.handleShortcuts} ref={this.commentBodyRef}>
             <TextareaAutocomplete
               className={`the-editor accepts-emoji ${text?.length > 20 ? "expanded" : ""}`}