diff --git a/src/common/components/comment/__snapshots__/index.spec.tsx.snap b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
index fef12fed5b0..f3bbc4b0904 100644
--- a/src/common/components/comment/__snapshots__/index.spec.tsx.snap
+++ b/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"
     >
diff --git a/src/common/components/comment/index.spec.tsx b/src/common/components/comment/index.spec.tsx
index f3125074e2c..e4661696bf3 100644
--- a/src/common/components/comment/index.spec.tsx
+++ b/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();
 });
diff --git a/src/common/components/comment/index.tsx b/src/common/components/comment/index.tsx
index d236658b8f2..ba21a4ac9fe 100644
--- a/src/common/components/comment/index.tsx
+++ b/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" : ""}`}
diff --git a/src/common/components/editor-toolbar/index.tsx b/src/common/components/editor-toolbar/index.tsx
index f43a551f2ff..b8a502aadf0 100644
--- a/src/common/components/editor-toolbar/index.tsx
+++ b/src/common/components/editor-toolbar/index.tsx
@@ -1,26 +1,11 @@
-import React, { Component } from "react";
-import isEqual from "react-fast-compare";
-import axios from "axios";
-import { ActiveUser } from "../../store/active-user/types";
-import { User } from "../../store/users/types";
-import { Global } from "../../store/global/types";
+import { ThreeSpeakVideo } from "../../api/threespeak";
+import { useMappedStore } from "../../store/use-mapped-store";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useMountedState } from "react-use";
+import { v4 } from "uuid";
+import _c from "../../util/fix-class-names";
 import Tooltip from "../tooltip";
-import { EmojiPicker } from "../emoji-picker";
-import GifPicker from "../gif-picker";
-import Gallery from "../gallery";
-import Fragments from "../fragments";
-import AddImage from "../add-image";
-import AddImageMobile from "../add-image-mobile";
-import AddLink from "../add-link";
-import { uploadImage } from "../../api/misc";
-import { addImage } from "../../api/private-api";
-import { error } from "../feedback";
 import { _t } from "../../i18n";
-import { insertOrReplace, replace } from "../../util/input-util";
-import { getAccessToken } from "../../helper/user-token";
-import _c from "../../util/fix-class-names";
-import "./_index.scss";
-
 import {
   codeTagsSvg,
   emoticonHappyOutlineSvg,
@@ -39,35 +24,29 @@ import {
 } from "../../img/svg";
 import { VideoUpload } from "../video-upload-threespeak";
 import VideoGallery from "../video-gallery";
-import { ThreeSpeakVideo } from "../../api/threespeak";
-import { v4 } from "uuid";
+import { EmojiPicker } from "../emoji-picker";
+import GifPicker from "../gif-picker";
+import AddImageMobile from "../add-image-mobile";
+import { insertOrReplace, replace } from "../../util/input-util";
+import Gallery from "../gallery";
+import { getAccessToken } from "../../helper/user-token";
+import { uploadImage } from "../../api/misc";
+import { addImage } from "../../api/private-api";
+import { error } from "../feedback";
+import axios from "axios";
+import Fragments from "../fragments";
+import AddImage from "../add-image";
+import AddLink from "../add-link";
+import "./_index.scss";
 
 interface Props {
-  global: Global;
-  users: User[];
-  activeUser: ActiveUser | null;
   sm?: boolean;
-  showEmoji?: boolean;
-  showGif?: boolean;
   setVideoEncoderBeneficiary?: (video: any) => void;
   toggleNsfwC?: () => void;
   comment: boolean;
   setVideoMetadata?: (v: ThreeSpeakVideo) => void;
 }
 
-interface State {
-  gallery: boolean;
-  fragments: boolean;
-  image: boolean;
-  link: boolean;
-  mobileImage: boolean;
-  shGif: boolean;
-  showVideoUpload: boolean;
-  showVideoGallery: boolean;
-  isMounted: boolean;
-  toolbarId: string;
-}
-
 export const detectEvent = (eventType: string) => {
   const ev = new Event(eventType);
   window.dispatchEvent(ev);
@@ -78,143 +57,179 @@ export const toolbarEventListener = (event: Event, eventType: string) => {
   window.dispatchEvent(ev);
 };
 
-export class EditorToolbar extends Component<Props> {
-  state: State = {
-    gallery: false,
-    fragments: false,
-    image: false,
-    link: false,
-    mobileImage: false,
-    shGif: false,
-    showVideoUpload: false,
-    showVideoGallery: false,
-    isMounted: false,
-    toolbarId: v4()
-  };
+export function EditorToolbar({
+  sm,
+  comment,
+  setVideoMetadata,
+  setVideoEncoderBeneficiary,
+  toggleNsfwC
+}: Props) {
+  const { global, activeUser, users } = useMappedStore();
+
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  const [gallery, setGallery] = useState(false);
+  const [fragments, setFragments] = useState(false);
+  const [image, setImage] = useState(false);
+  const [link, setLink] = useState(false);
+  const [mobileImage, setMobileImage] = useState(false);
+  const [gif, setGif] = useState(false);
+  const [showVideoUpload, setShowVideoUpload] = useState(false);
+  const [showVideoGallery, setShowVideoGallery] = useState(false);
+
+  const toolbarId = useMemo(() => v4(), []);
+  const headers = useMemo(() => [...Array(3).keys()], []);
+
+  const isMounted = useMountedState();
+
+  useEffect(() => {
+    window.addEventListener("bold", bold);
+    window.addEventListener("italic", italic);
+    window.addEventListener("table", table);
+    window.addEventListener("link", () => setLink(true));
+    window.addEventListener("codeBlock", code);
+    window.addEventListener("blockquote", quote);
+    window.addEventListener("image", () => setImage(true));
+    window.addEventListener("customToolbarEvent", handleCustomToolbarEvent);
+
+    return () => {
+      window.removeEventListener("bold", bold);
+      window.removeEventListener("italic", italic);
+      window.removeEventListener("table", table);
+      window.removeEventListener("link", () => setLink(true));
+      window.removeEventListener("codeBlock", code);
+      window.removeEventListener("blockquote", quote);
+      window.removeEventListener("image", () => setImage(true));
+      window.removeEventListener("customToolbarEvent", handleCustomToolbarEvent);
+    };
+  }, []);
+
+  const getTargetEl = () => {
+    const root = rootRef.current;
+    if (!root || !root.parentElement) {
+      return null;
+    }
 
-  holder = React.createRef<HTMLDivElement>();
-  fileInput = React.createRef<HTMLInputElement>();
-  videoInput = React.createRef<HTMLInputElement>();
-
-  shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>): boolean {
-    return (
-      !isEqual(this.props.users, nextProps.users) ||
-      !isEqual(this.props.activeUser, nextProps.activeUser) ||
-      !isEqual(this.props.showEmoji, nextProps.showEmoji) ||
-      !isEqual(this.props.showGif, nextProps.showGif) ||
-      !isEqual(this.state, nextState)
-    );
-  }
-
-  toggleGallery = () => {
-    const { gallery } = this.state;
-    this.setState({ gallery: !gallery });
+    return root.parentElement.querySelector(".the-editor") as HTMLInputElement;
   };
 
-  toggleFragments = () => {
-    const { fragments } = this.state;
-    this.setState({ fragments: !fragments });
+  const insertText = (before: string, after: string = "") => {
+    const el = getTargetEl();
+    if (el) {
+      insertOrReplace(el, before, after);
+    }
+    return getTargetEl();
   };
 
-  toggleImage = (e?: React.MouseEvent<HTMLElement> | Event) => {
-    if (e) {
-      e.stopPropagation();
+  const replaceText = (find: string, rep: string) => {
+    const el = getTargetEl();
+    if (el) {
+      replace(el, find, rep);
     }
-    const { image } = this.state;
-    this.setState({ image: !image });
   };
 
-  toggleMobileImage = (e?: React.MouseEvent<HTMLElement>) => {
-    if (e) {
-      e.stopPropagation();
-    }
-    const { mobileImage } = this.state;
-    this.setState({ mobileImage: !mobileImage });
+  const bold = () => insertText("**", "**");
+  const italic = () => insertText("*", "*");
+  const header = (w: number) => insertText(`${"#".repeat(w)} `);
+  const code = () => insertText("<code>", "</code>");
+  const quote = () => insertText(">");
+  const ol = () => insertText("1. item1\n2. item2\n3. item3");
+  const ul = () => insertText("* item1\n* item2\n* item3");
+  const insertLink = (text: string, url: string) => insertText(`[${text}`, `](${url})`);
+  const insertImage = (text: string, url: string) => insertText(`![${text}`, `](${url})`);
+
+  const table = (e: React.MouseEvent<HTMLElement> | Event) => {
+    e.stopPropagation();
+    const t =
+      "\n|\tColumn 1\t|\tColumn 2\t|\tColumn 3\t|\n" +
+      "|\t------------\t|\t------------\t|\t------------\t|\n" +
+      "|\t     Text     \t|\t     Text     \t|\t     Text     \t|\n";
+    insertText(t);
+  };
+
+  const table1 = (e: React.MouseEvent<HTMLElement>) => {
+    e.stopPropagation();
+
+    const t = "\n|\tColumn 1\t|\n" + "|\t------------\t|\n" + "|\t     Text     \t|\n";
+    insertText(t);
+  };
+
+  const table2 = (e: React.MouseEvent<HTMLElement>) => {
+    e.stopPropagation();
+    const t =
+      "\n|\tColumn 1\t|\tColumn 2\t|\n" +
+      "|\t------------\t|\t------------\t|\n" +
+      "|\t     Text     \t|\t     Text     \t|\n";
+    insertText(t);
   };
 
-  toggleLink = (e?: React.MouseEvent<HTMLElement> | Event) => {
-    if (e) {
+  const fileInputChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    let files = [...(e.target.files as FileList)].filter((i) => checkFile(i.name)).filter((i) => i);
+
+    if (files.length > 0) {
       e.stopPropagation();
+      e.preventDefault();
     }
-    const { link } = this.state;
 
-    this.setState({ link: !link });
+    files.forEach((file) => upload(file));
+
+    // reset input
+    e.target.value = "";
   };
 
-  toggleGif = (e?: React.MouseEvent<HTMLElement>) => {
-    const { shGif } = this.state;
-    if (e) {
-      e.stopPropagation();
+  const upload = async (file: File) => {
+    const username = activeUser?.username!;
+
+    const tempImgTag = `![Uploading ${file.name} #${Math.floor(Math.random() * 99)}]()\n\n`;
+    insertText(tempImgTag);
+
+    let imageUrl: string;
+    try {
+      let token = getAccessToken(username);
+      if (token) {
+        const resp = await uploadImage(file, token);
+        imageUrl = resp.url;
+
+        if (global.usePrivate && imageUrl.length > 0) {
+          addImage(username, imageUrl).then();
+        }
+
+        const imgTag = imageUrl.length > 0 && `![](${imageUrl})\n\n`;
+
+        imgTag && replaceText(tempImgTag, imgTag);
+      } else {
+        error(_t("editor-toolbar.image-error-cache"));
+      }
+    } catch (e) {
+      if (axios.isAxiosError(e) && e.response?.status === 413) {
+        error(_t("editor-toolbar.image-error-size"));
+      } else {
+        error(_t("editor-toolbar.image-error"));
+      }
+      return;
     }
-    this.setState({ shGif: !shGif });
   };
 
-  componentDidMount() {
-    window.addEventListener("bold", this.bold);
-    window.addEventListener("italic", this.italic);
-    window.addEventListener("table", this.table);
-    window.addEventListener("link", this.toggleLink);
-    window.addEventListener("codeBlock", this.code);
-    window.addEventListener("blockquote", this.quote);
-    window.addEventListener("image", this.toggleImage);
-    window.addEventListener("customToolbarEvent", this.handleCustomToolbarEvent);
-    this.setState({
-      isMounted: true
-    });
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener("bold", this.bold);
-    window.removeEventListener("italic", this.italic);
-    window.removeEventListener("table", this.table);
-    window.removeEventListener("link", this.toggleLink);
-    window.removeEventListener("codeBlock", this.code);
-    window.removeEventListener("blockquote", this.quote);
-    window.removeEventListener("image", this.toggleImage);
-    window.removeEventListener("customToolbarEvent", this.handleCustomToolbarEvent);
-  }
-
-  handleCustomToolbarEvent = (e: Event) => {
+  const checkFile = (filename: string) =>
+    ["jpg", "jpeg", "gif", "png", "webp"].some((el) => filename.toLowerCase().endsWith(el));
+
+  const handleCustomToolbarEvent = (e: Event) => {
     const detail = (e as CustomEvent).detail;
     switch (detail.eventType) {
       case "paste":
-        this.onPaste(detail.event);
+        onPaste(detail.event);
         break;
       case "dragover":
-        this.onDragOver(detail.event);
+        onDragOver(detail.event);
         break;
       case "drop":
-        this.drop(detail.event);
+        drop(detail.event);
         break;
     }
   };
 
-  getTargetEl = (): HTMLInputElement | null => {
-    const holder = this.holder.current;
-    if (!holder || !holder.parentElement) {
-      return null;
-    }
-
-    return holder.parentElement.querySelector(".the-editor");
-  };
-
-  insertText = (before: string, after: string = "") => {
-    const el = this.getTargetEl();
-    if (el) {
-      insertOrReplace(el, before, after);
-    }
-    return this.getTargetEl();
-  };
-
-  replaceText = (find: string, rep: string) => {
-    const el = this.getTargetEl();
-    if (el) {
-      replace(el, find, rep);
-    }
-  };
-
-  onDragOver = (e: DragEvent) => {
-    const { activeUser } = this.props;
+  const onDragOver = (e: DragEvent) => {
     if (!activeUser) {
       return;
     }
@@ -228,8 +243,7 @@ export class EditorToolbar extends Component<Props> {
     }
   };
 
-  drop = (e: DragEvent) => {
-    const { activeUser } = this.props;
+  const drop = (e: DragEvent) => {
     if (!activeUser) {
       return;
     }
@@ -241,14 +255,14 @@ export class EditorToolbar extends Component<Props> {
       return;
     }
 
-    const files = [...e.dataTransfer.files].filter((i) => this.checkFile(i.name)).filter((i) => i);
+    const files = [...e.dataTransfer.files].filter((i) => checkFile(i.name)).filter((i) => i);
 
     if (files.length > 0) {
-      files.forEach((file) => this.upload(file));
+      files.forEach((file) => upload(file));
     }
   };
 
-  onPaste = (e: ClipboardEvent) => {
+  const onPaste = (e: ClipboardEvent) => {
     if (!e.clipboardData) {
       return;
     }
@@ -270,435 +284,266 @@ export class EditorToolbar extends Component<Props> {
       e.preventDefault();
 
       files.forEach((file) => {
-        if (file) this.upload(file).then();
+        if (file) upload(file).then();
       });
     }
   };
 
-  bold = () => {
-    this.insertText("**", "**");
-  };
-
-  italic = () => {
-    this.insertText("*", "*");
-  };
-
-  header = (w: number) => {
-    const h = "#".repeat(w);
-    this.insertText(`${h} `);
-  };
-
-  code = () => {
-    this.insertText("<code>", "</code>");
-  };
-
-  quote = () => {
-    this.insertText(">");
-  };
-
-  ol = () => {
-    this.insertText("1. item1\n2. item2\n3. item3");
-  };
-
-  ul = () => {
-    this.insertText("* item1\n* item2\n* item3");
-  };
-
-  link = (text: string, url: string) => {
-    this.insertText(`[${text}`, `](${url})`);
-  };
-
-  image = (text: string, url: string) => {
-    this.insertText(`![${text}`, `](${url})`);
-  };
-
-  table = (e: React.MouseEvent<HTMLElement> | Event) => {
-    e.stopPropagation();
-    const t =
-      "\n|\tColumn 1\t|\tColumn 2\t|\tColumn 3\t|\n" +
-      "|\t------------\t|\t------------\t|\t------------\t|\n" +
-      "|\t     Text     \t|\t     Text     \t|\t     Text     \t|\n";
-    this.insertText(t);
-  };
-
-  table1 = (e: React.MouseEvent<HTMLElement>) => {
-    e.stopPropagation();
-
-    const t = "\n|\tColumn 1\t|\n" + "|\t------------\t|\n" + "|\t     Text     \t|\n";
-    this.insertText(t);
-  };
-
-  table2 = (e: React.MouseEvent<HTMLElement>) => {
-    e.stopPropagation();
-    const t =
-      "\n|\tColumn 1\t|\tColumn 2\t|\n" +
-      "|\t------------\t|\t------------\t|\n" +
-      "|\t     Text     \t|\t     Text     \t|\n";
-    this.insertText(t);
-  };
-
-  fileInputChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
-    let files = [...(e.target.files as FileList)]
-      .filter((i) => this.checkFile(i.name))
-      .filter((i) => i);
-
-    if (files.length > 0) {
-      e.stopPropagation();
-      e.preventDefault();
-    }
-
-    files.forEach((file) => this.upload(file));
-
-    // reset input
-    e.target.value = "";
-  };
-
-  upload = async (file: File) => {
-    const { activeUser, global } = this.props;
-
-    const username = activeUser?.username!;
-
-    const tempImgTag = `![Uploading ${file.name} #${Math.floor(Math.random() * 99)}]()\n\n`;
-    this.insertText(tempImgTag);
-
-    let imageUrl: string;
-    try {
-      let token = getAccessToken(username);
-      if (token) {
-        const resp = await uploadImage(file, token);
-        imageUrl = resp.url;
-
-        if (global.usePrivate && imageUrl.length > 0) {
-          addImage(username, imageUrl).then();
-        }
-
-        const imgTag = imageUrl.length > 0 && `![](${imageUrl})\n\n`;
-
-        imgTag && this.replaceText(tempImgTag, imgTag);
-      } else {
-        error(_t("editor-toolbar.image-error-cache"));
-      }
-    } catch (e) {
-      if (axios.isAxiosError(e) && e.response?.status === 413) {
-        error(_t("editor-toolbar.image-error-size"));
-      } else {
-        error(_t("editor-toolbar.image-error"));
-      }
-      return;
-    }
-  };
-
-  checkFile = (filename: string) => {
-    const filenameLow = filename.toLowerCase();
-    return ["jpg", "jpeg", "gif", "png", "webp"].some((el) => filenameLow.endsWith(el));
-  };
-
-  render() {
-    const { gallery, fragments, image, link, mobileImage } = this.state;
-    const { global, sm, activeUser, showEmoji = true, showGif } = this.props;
-
-    return (
-      <>
-        <div className={_c(`editor-toolbar ${sm ? "toolbar-sm" : ""}`)} ref={this.holder}>
-          <Tooltip content={_t("editor-toolbar.bold")}>
-            <div className="editor-tool" onClick={this.bold}>
-              {formatBoldSvg}
+  return (
+    <>
+      <div className={_c(`editor-toolbar ${sm ? "toolbar-sm" : ""}`)} ref={rootRef}>
+        <Tooltip content={_t("editor-toolbar.bold")}>
+          <div className="editor-tool" onClick={bold}>
+            {formatBoldSvg}
+          </div>
+        </Tooltip>
+        <Tooltip content={_t("editor-toolbar.italic")}>
+          <div className="editor-tool" onClick={italic}>
+            {formatItalicSvg}
+          </div>
+        </Tooltip>
+        <Tooltip content={_t("editor-toolbar.header")}>
+          <div className="editor-tool" onClick={() => header(1)}>
+            {formatTitleSvg}
+            <div className="sub-tool-menu">
+              {headers.map((i) => (
+                <div
+                  key={i}
+                  className="sub-tool-menu-item"
+                  onClick={(e: React.MouseEvent<HTMLElement>) => {
+                    e.stopPropagation();
+                    header(i + 2);
+                  }}
+                >
+                  {`H${i + 2}`}
+                </div>
+              ))}
+            </div>
+          </div>
+        </Tooltip>
+        <div className="tool-separator" />
+        <Tooltip content={_t("editor-toolbar.code")}>
+          <div className="editor-tool" onClick={code}>
+            {codeTagsSvg}
+          </div>
+        </Tooltip>
+        <Tooltip content={_t("editor-toolbar.quote")}>
+          <div className="editor-tool" onClick={quote}>
+            {formatQuoteCloseSvg}
+          </div>
+        </Tooltip>
+        {global.usePrivate && (
+          <Tooltip content={_t("editor-toolbar.fragments")}>
+            <div className="editor-tool" onClick={() => setFragments(!fragments)}>
+              {textShortSvg}
             </div>
           </Tooltip>
-          <Tooltip content={_t("editor-toolbar.italic")}>
-            <div className="editor-tool" onClick={this.italic}>
-              {formatItalicSvg}
+        )}
+        <div className="tool-separator" />
+        <Tooltip content={_t("editor-toolbar.ol")}>
+          <div className="editor-tool" onClick={ol}>
+            {formatListNumberedSvg}
+          </div>
+        </Tooltip>
+        <Tooltip content={_t("editor-toolbar.ul")}>
+          <div className="editor-tool" onClick={ul}>
+            {formatListBulletedSvg}
+          </div>
+        </Tooltip>
+        <Tooltip content={_t("editor-toolbar.table")}>
+          <div className="editor-tool" onClick={table}>
+            {gridSvg}
+            <div className="sub-tool-menu">
+              <div className="sub-tool-menu-item" onClick={table}>
+                {_t("editor-toolbar.table-3-col")}
+              </div>
+              <div className="sub-tool-menu-item" onClick={table2}>
+                {_t("editor-toolbar.table-2-col")}
+              </div>
+              <div className="sub-tool-menu-item" onClick={table1}>
+                {_t("editor-toolbar.table-1-col")}
+              </div>
+            </div>
+          </div>
+        </Tooltip>
+        <div className="tool-separator" />
+        {activeUser && global.isMobile ? (
+          <Tooltip content={_t("editor-toolbar.image")}>
+            <div className="editor-tool" onClick={() => setMobileImage(!mobileImage)}>
+              {imageSvg}
             </div>
           </Tooltip>
-          <Tooltip content={_t("editor-toolbar.header")}>
-            <div
-              className="editor-tool"
-              onClick={() => {
-                this.header(1);
-              }}
-            >
-              {formatTitleSvg}
-              <div className="sub-tool-menu">
-                {[...Array(3).keys()].map((i) => (
+        ) : (
+          <Tooltip content={_t("editor-toolbar.image")}>
+            <div className="editor-tool" onClick={() => setImage(!image)}>
+              {imageSvg}
+
+              {activeUser && (
+                <div className="sub-tool-menu">
                   <div
-                    key={i}
                     className="sub-tool-menu-item"
                     onClick={(e: React.MouseEvent<HTMLElement>) => {
                       e.stopPropagation();
-                      this.header(i + 2);
+                      const el = fileInputRef.current?.click();
                     }}
                   >
-                    {`H${i + 2}`}
+                    {_t("editor-toolbar.upload")}
                   </div>
-                ))}
-              </div>
-            </div>
-          </Tooltip>
-          <div className="tool-separator" />
-          <Tooltip content={_t("editor-toolbar.code")}>
-            <div className="editor-tool" onClick={this.code}>
-              {codeTagsSvg}
-            </div>
-          </Tooltip>
-          <Tooltip content={_t("editor-toolbar.quote")}>
-            <div className="editor-tool" onClick={this.quote}>
-              {formatQuoteCloseSvg}
-            </div>
-          </Tooltip>
-          {global.usePrivate && (
-            <Tooltip content={_t("editor-toolbar.fragments")}>
-              <div className="editor-tool" onClick={this.toggleFragments}>
-                {textShortSvg}
-              </div>
-            </Tooltip>
-          )}
-          <div className="tool-separator" />
-          <Tooltip content={_t("editor-toolbar.ol")}>
-            <div className="editor-tool" onClick={this.ol}>
-              {formatListNumberedSvg}
-            </div>
-          </Tooltip>
-          <Tooltip content={_t("editor-toolbar.ul")}>
-            <div className="editor-tool" onClick={this.ul}>
-              {formatListBulletedSvg}
-            </div>
-          </Tooltip>
-          <Tooltip content={_t("editor-toolbar.table")}>
-            <div className="editor-tool" onClick={this.table}>
-              {gridSvg}
-              <div className="sub-tool-menu">
-                <div className="sub-tool-menu-item" onClick={this.table}>
-                  {_t("editor-toolbar.table-3-col")}
-                </div>
-                <div className="sub-tool-menu-item" onClick={this.table2}>
-                  {_t("editor-toolbar.table-2-col")}
-                </div>
-                <div className="sub-tool-menu-item" onClick={this.table1}>
-                  {_t("editor-toolbar.table-1-col")}
+                  {global.usePrivate && (
+                    <div
+                      className="sub-tool-menu-item"
+                      onClick={(e: React.MouseEvent<HTMLElement>) => {
+                        e.stopPropagation();
+                        setGallery(!gallery);
+                      }}
+                    >
+                      {_t("editor-toolbar.gallery")}
+                    </div>
+                  )}
                 </div>
-              </div>
+              )}
             </div>
           </Tooltip>
-          <div className="tool-separator" />
-          {(() => {
-            if (activeUser && global.isMobile) {
-              return (
-                <Tooltip content={_t("editor-toolbar.image")}>
-                  <div className="editor-tool" onClick={this.toggleMobileImage}>
-                    {imageSvg}
-                  </div>
-                </Tooltip>
-              );
-            }
-
-            return (
-              <Tooltip content={_t("editor-toolbar.image")}>
-                <div className="editor-tool" onClick={this.toggleImage}>
-                  {imageSvg}
-
-                  {activeUser && (
-                    <div className="sub-tool-menu">
+        )}
+        {!comment && (
+          <Tooltip content={_t("video-upload.upload-video")}>
+            <div className="editor-tool" role="none">
+              <VideoUpload
+                className="new-feature"
+                show={showVideoUpload}
+                setShow={(v) => setShowVideoUpload(v)}
+                setShowGallery={(v) => setShowVideoGallery(v)}
+              >
+                {videoSvg}
+                {activeUser && (
+                  <div className="sub-tool-menu">
+                    <div className="sub-tool-menu-item" onClick={() => setShowVideoUpload(true)}>
+                      {_t("video-upload.upload-video")}
+                    </div>
+                    {global.usePrivate && (
                       <div
                         className="sub-tool-menu-item"
                         onClick={(e: React.MouseEvent<HTMLElement>) => {
                           e.stopPropagation();
-                          const el = this.fileInput.current;
-                          if (el) {
-                            el.click();
-                          }
+                          setShowVideoGallery(true);
                         }}
                       >
-                        {_t("editor-toolbar.upload")}
-                      </div>
-                      {global.usePrivate && (
-                        <div
-                          className="sub-tool-menu-item"
-                          onClick={(e: React.MouseEvent<HTMLElement>) => {
-                            e.stopPropagation();
-                            this.toggleGallery();
-                          }}
-                        >
-                          {_t("editor-toolbar.gallery")}
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </div>
-              </Tooltip>
-            );
-          })()}
-          {!this.props.comment && (
-            <Tooltip content={_t("video-upload.upload-video")}>
-              <div className="editor-tool" role="none">
-                <VideoUpload
-                  className="new-feature"
-                  show={this.state.showVideoUpload}
-                  setShow={(v) => this.setState({ showVideoUpload: v })}
-                  setShowGallery={(v) => this.setState({ showVideoGallery: v })}
-                >
-                  {videoSvg}
-                  {activeUser && (
-                    <div className="sub-tool-menu">
-                      <div
-                        className="sub-tool-menu-item"
-                        onClick={() => this.setState({ showVideoUpload: true })}
-                      >
-                        {_t("video-upload.upload-video")}
+                        {_t("video-upload.video-gallery")}
                       </div>
-                      {global.usePrivate && (
-                        <div
-                          className="sub-tool-menu-item"
-                          onClick={(e: React.MouseEvent<HTMLElement>) => {
-                            e.stopPropagation();
-                            this.setState({ showVideoGallery: true });
-                          }}
-                        >
-                          {_t("video-upload.video-gallery")}
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </VideoUpload>
-                <VideoGallery
-                  showGallery={this.state.showVideoGallery}
-                  setShowGallery={(v) => this.setState({ showVideoGallery: v })}
-                  insertText={this.insertText}
-                  setVideoEncoderBeneficiary={this.props.setVideoEncoderBeneficiary}
-                  toggleNsfwC={this.props.toggleNsfwC}
-                  setVideoMetadata={this.props.setVideoMetadata}
-                />
-              </div>
-            </Tooltip>
-          )}
-          {this.state.isMounted && (
-            <Tooltip content={_t("editor-toolbar.emoji")}>
-              <div
-                className="editor-tool"
-                id={"editor-tool-emoji-picker-" + this.state.toolbarId}
-                role="none"
-              >
-                {emoticonHappyOutlineSvg}
-                {showEmoji && this.state.isMounted && (
-                  <EmojiPicker
-                    anchor={
-                      document.querySelector(
-                        "#editor-tool-emoji-picker-" + this.state.toolbarId
-                      )!! as HTMLElement
-                    }
-                    onSelect={(e) => this.insertText(e, "")}
-                  />
+                    )}
+                  </div>
                 )}
-              </div>
-            </Tooltip>
-          )}
-          <Tooltip content={_t("Gif")}>
-            <div className="editor-tool" role="none">
-              <div className="editor-tool-gif-icon" onClick={this.toggleGif}>
-                {gifIcon}
-              </div>
-              {this.state.shGif && (
-                <GifPicker
-                  shGif={true}
-                  changeState={(gifState) => {
-                    this.setState({ shGif: gifState });
-                  }}
-                  fallback={(e) => {
-                    this.insertText(e, "");
-                  }}
-                />
-              )}
+              </VideoUpload>
+              <VideoGallery
+                showGallery={showVideoGallery}
+                setShowGallery={(v) => setShowVideoGallery(v)}
+                insertText={insertText}
+                setVideoEncoderBeneficiary={setVideoEncoderBeneficiary}
+                toggleNsfwC={toggleNsfwC}
+                setVideoMetadata={setVideoMetadata}
+              />
             </div>
           </Tooltip>
-          <Tooltip content={_t("editor-toolbar.link")}>
-            <div className="editor-tool" onClick={this.toggleLink}>
-              {linkSvg}
+        )}
+        {isMounted() && (
+          <Tooltip content={_t("editor-toolbar.emoji")}>
+            <div className="editor-tool" id={"editor-tool-emoji-picker-" + toolbarId} role="none">
+              {emoticonHappyOutlineSvg}
+              <EmojiPicker
+                anchor={
+                  document.querySelector("#editor-tool-emoji-picker-" + toolbarId)!! as HTMLElement
+                }
+                onSelect={(e) => insertText(e, "")}
+              />
             </div>
           </Tooltip>
-        </div>
-        <input
-          onChange={this.fileInputChanged}
-          className="file-input"
-          ref={this.fileInput}
-          type="file"
-          accept="image/*"
-          multiple={true}
-          style={{ display: "none" }}
-        />
-        {gallery && activeUser && (
-          <Gallery
-            onHide={this.toggleGallery}
-            onPick={(url: string) => {
-              const fileName = "";
-              this.image(fileName, url);
-              this.toggleGallery();
-            }}
-          />
-        )}
-        {fragments && activeUser && (
-          <Fragments
-            onHide={this.toggleFragments}
-            onPick={(body: string) => {
-              this.insertText(body);
-              this.toggleFragments();
-            }}
-          />
         )}
-        {image && (
-          <AddImage
-            onHide={this.toggleImage}
-            onSubmit={(text: string, link: string) => {
-              this.image(text, link);
-              this.toggleImage();
-            }}
-          />
-        )}
-        {link && (
-          <AddLink
-            onHide={this.toggleLink}
-            onSubmit={(text: string, link: string) => {
-              this.link(text, link);
-              this.toggleLink();
-            }}
-          />
-        )}
-        {mobileImage && (
-          <AddImageMobile
-            global={global}
-            activeUser={activeUser}
-            onHide={this.toggleMobileImage}
-            onPick={(url) => {
-              const fileName = "";
-              this.image(fileName, url);
-              this.toggleMobileImage();
-            }}
-            onGallery={() => {
-              this.toggleMobileImage();
-              this.toggleGallery();
-            }}
-            onUpload={() => {
-              this.toggleMobileImage();
-              const el = this.fileInput.current;
-              if (el) el.click();
-            }}
-          />
-        )}
-      </>
-    );
-  }
+        <Tooltip content={_t("Gif")}>
+          <div className="editor-tool" role="none">
+            <div className="editor-tool-gif-icon" onClick={() => setGif(!gif)}>
+              {gifIcon}
+            </div>
+            {gif && (
+              <GifPicker
+                shGif={true}
+                changeState={(gifState) => setGif(gifState ?? false)}
+                fallback={(e) => insertText(e, "")}
+              />
+            )}
+          </div>
+        </Tooltip>
+        <Tooltip content={_t("editor-toolbar.link")}>
+          <div className="editor-tool" onClick={() => setLink(!link)}>
+            {linkSvg}
+          </div>
+        </Tooltip>
+      </div>
+      <input
+        onChange={fileInputChanged}
+        className="file-input"
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        multiple={true}
+        style={{ display: "none" }}
+      />
+      {gallery && activeUser && (
+        <Gallery
+          onHide={() => setGallery(false)}
+          onPick={(url: string) => {
+            const fileName = "";
+            insertImage(fileName, url);
+            setGallery(false);
+          }}
+        />
+      )}
+      {fragments && activeUser && (
+        <Fragments
+          onHide={() => setFragments(false)}
+          onPick={(body: string) => {
+            insertText(body);
+            setFragments(false);
+          }}
+        />
+      )}
+      {image && (
+        <AddImage
+          onHide={() => setImage(false)}
+          onSubmit={(text: string, link: string) => {
+            insertImage(text, link);
+            setImage(false);
+          }}
+        />
+      )}
+      {link && (
+        <AddLink
+          onHide={() => setLink(false)}
+          onSubmit={(text: string, link: string) => {
+            insertLink(text, link);
+            setLink(false);
+          }}
+        />
+      )}
+      {mobileImage && (
+        <AddImageMobile
+          global={global}
+          activeUser={activeUser}
+          onHide={() => setMobileImage(false)}
+          onPick={(url) => {
+            const fileName = "";
+            insertImage(fileName, url);
+            setMobileImage(false);
+          }}
+          onGallery={() => {
+            setMobileImage(false);
+            setGallery(!gallery);
+          }}
+          onUpload={() => {
+            setMobileImage(false);
+            const el = fileInputRef.current?.click();
+          }}
+        />
+      )}
+    </>
+  );
 }
-
-export default (props: Props) => {
-  const p: Props = {
-    global: props.global,
-    users: props.users,
-    activeUser: props.activeUser,
-    sm: props.sm,
-    showEmoji: props.showEmoji,
-    showGif: props.showGif,
-    setVideoEncoderBeneficiary: props.setVideoEncoderBeneficiary,
-    toggleNsfwC: props.toggleNsfwC,
-    comment: props.comment,
-    setVideoMetadata: props.setVideoMetadata
-  };
-  return <EditorToolbar {...p} />;
-};
diff --git a/src/common/components/emoji-picker/index.tsx b/src/common/components/emoji-picker/index.tsx
index 29891566783..a57a8e4de0a 100644
--- a/src/common/components/emoji-picker/index.tsx
+++ b/src/common/components/emoji-picker/index.tsx
@@ -39,6 +39,7 @@ export function EmojiPicker({ anchor, onSelect, position, isDisabled }: Props) {
   const isMounted = useMountedState();
 
   useEffect(() => {
+    console.log(anchor);
     if (anchor) {
       anchor.addEventListener("click", () => {
         (anchor as HTMLElement).style.position = "relative !important";
diff --git a/src/common/pages/submit/index.tsx b/src/common/pages/submit/index.tsx
index 264d4b5c860..84d87056496 100644
--- a/src/common/pages/submit/index.tsx
+++ b/src/common/pages/submit/index.tsx
@@ -18,7 +18,7 @@ import {
 import { postBodySummary, proxifyImageSrc } from "@ecency/render-helper";
 import useLocalStorage from "react-use/lib/useLocalStorage";
 import { PREFIX } from "../../util/local-storage";
-import EditorToolbar, { toolbarEventListener } from "../../components/editor-toolbar";
+import { EditorToolbar, toolbarEventListener } from "../../components/editor-toolbar";
 import useMount from "react-use/lib/useMount";
 import { handleFloatingContainer } from "../../components/floating-faq";
 import { useUnmount } from "react-use";