add code to EmojiButton component

apps/app/tsconfig.json

@@ -21,7 +21,7 @@
     "next-env.d.ts",
     "config",
     "src"
-  ],
+, "_obsolete/src/components/PageEditor/EmojiPicker.tsx"  ],
   "ts-node": {
     "transpileOnly": true,
     "swc": true

packages/editor/src/components/CodeMirrorEditor/Toolbar/EmojiButton.tsx

@@ -1,22 +1,33 @@
 import React, { useState } from 'react';
 
-import { Picker } from 'emoji-mart';
+import { Modal } from 'reactstrap';
+
+import { getEmojiTranslation } from '~/components/Emoji/EmojiPickerHelper';
+
+import 'emoji-mart/css/emoji-mart.css';
 
 export const EmojiButton = (): JSX.Element => {
-  const [emojiState, setEmojiState] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const onClickEmojiButtonHandler = () => {
-    setEmojiState(!emojiState);
+    setIsOpen(!isOpen);
   };
 
+  const translation = getEmojiTranslation();
+
   return (
     <>
       <button type="button" className="btn btn-toolbar-button" onClick={onClickEmojiButtonHandler}>
         <span className="material-icons-outlined fs-6">emoji_emotions</span>
       </button>
-      {emojiState && (
-        <Picker />
-      )}
+      <Modal isOpen={isOpen} toggle={setIsOpen(false)}>
+        <Picker
+          onSelect={emoji => console.log(emoji)}
+          i18n={translation}
+          title={translation.title}
+          emojiTooltip
+        />
+      </Modal>
     </>
   );
 };