create onClickEmojiButtonHandler function

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

@@ -52,10 +52,29 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
 
   }, [codeMirrorEditor, indentSize]);
 
+  const onClickEmojiButtonHandler = (emoji : { colons: string}) => {
+    const view = codeMirrorEditor?.view;
+    const currentPos = view?.state.selection.main.head;
+
+    console.log(currentPos);
+
+    if (currentPos == null) {
+      return;
+    }
+
+    view?.dispatch({
+      changes: {
+        from: currentPos,
+        insert: emoji.colons,
+      },
+    });
+  };
+
+
   return (
     <div className="flex-expand-vert">
       <CodeMirrorEditorContainer ref={containerRef} />
-      <Toolbar />
+      <Toolbar onClickEmojiButtonHandler={onClickEmojiButtonHandler} />
     </div>
   );
 };

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

@@ -5,9 +5,11 @@ import { Modal } from 'reactstrap';
 
 import 'emoji-mart/css/emoji-mart.css';
 
-export const EmojiButton = (): JSX.Element => {
+export const EmojiButton = (props: any): JSX.Element => {
   const [isOpen, setIsOpen] = useState(false);
 
+  const { onClickEmojiButtonHandler } = props;
+
   const toggle = () => setIsOpen(!isOpen);
 
   return (
@@ -17,7 +19,7 @@ export const EmojiButton = (): JSX.Element => {
       </button>
       <Modal isOpen={isOpen} toggle={toggle}>
         <Picker
-          onSelect={emoji => console.log(emoji)}
+          onSelect={(emoji: any) => onClickEmojiButtonHandler(emoji)}
         />
       </Modal>
     </>

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

@@ -9,12 +9,16 @@ import { TextFormatTools } from './TextFormatTools';
 
 import styles from './Toolbar.module.scss';
 
-export const Toolbar = memo((): JSX.Element => {
+export const Toolbar = memo((props: any): JSX.Element => {
+  const { onClickEmojiButtonHandler } = props;
+
   return (
     <div className={`d-flex gap-2 p-2 codemirror-editor-toolbar ${styles['codemirror-editor-toolbar']}`}>
       <AttachmentsDropup />
       <TextFormatTools />
-      <EmojiButton />
+      <EmojiButton
+        onClickEmojiButtonHandler={onClickEmojiButtonHandler}
+      />
       <TableButton />
       <DiagramButton />
       <TemplateButton />