move selectEmoji function to EmojiButton component

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

@@ -52,29 +52,10 @@ 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 onClickEmojiButtonHandler={onClickEmojiButtonHandler} />
+      <Toolbar codeMirrorEditor={codeMirrorEditor} />
     </div>
   );
 };

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

@@ -1,25 +1,108 @@
-import React, { useState } from 'react';
+import React, { FC, useState } from 'react';
 
 import { Picker } from 'emoji-mart';
+import i18n from 'i18next';
 import { Modal } from 'reactstrap';
 
+
+import { useNextThemes } from '~/stores/use-next-themes';
+
+import type { UseCodeMirrorEditor } from 'src';
+
 import 'emoji-mart/css/emoji-mart.css';
 
-export const EmojiButton = (props: any): JSX.Element => {
+type Props = {
+  codeMirrorEditor: UseCodeMirrorEditor | undefined
+}
+
+type Translation = {
+  search: string
+  clear: string
+  notfound: string
+  skintext: string
+  categories: object
+  categorieslabel: string
+  skintones: object
+  title: string
+}
+
+const getEmojiTranslation = (): Translation => {
+
+  const categories = {};
+  [
+    'search',
+    'recent',
+    'smileys',
+    'people',
+    'nature',
+    'foods',
+    'activity',
+    'places',
+    'objects',
+    'symbols',
+    'flags',
+    'custom',
+  ].forEach((category) => {
+    categories[category] = i18n.t(`emoji.categories.${category}`);
+  });
+
+  const skintones = {};
+  (Array.from(Array(6).keys())).forEach((tone) => {
+    skintones[tone + 1] = i18n.t(`emoji.skintones.${tone + 1}`);
+  });
+
+  const translation = {
+    search: i18n.t('emoji.search'),
+    clear: i18n.t('emoji.clear'),
+    notfound: i18n.t('emoji.notfound'),
+    skintext: i18n.t('emoji.skintext'),
+    categories,
+    categorieslabel: i18n.t('emoji.categorieslabel'),
+    skintones,
+    title: i18n.t('emoji.title'),
+  };
+
+  return translation;
+};
+
+export const EmojiButton: FC<Props> = (props) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const { onClickEmojiButtonHandler } = props;
+  const { codeMirrorEditor } = props;
+
+  const { resolvedTheme } = useNextThemes();
+  const translation = getEmojiTranslation();
 
   const toggle = () => setIsOpen(!isOpen);
 
+  const selectEmoji = (emoji: { colons: string }): void => {
+    const view = codeMirrorEditor?.view;
+    const currentPos = view?.state.selection.main.head;
+
+    if (currentPos == null) {
+      return;
+    }
+
+    view?.dispatch({
+      changes: {
+        from: currentPos,
+        insert: emoji.colons,
+      },
+    });
+  };
+
   return (
     <>
       <button type="button" className="btn btn-toolbar-button" onClick={toggle}>
         <span className="material-icons-outlined fs-6">emoji_emotions</span>
       </button>
-      <Modal isOpen={isOpen} toggle={toggle}>
+      <Modal isOpen={isOpen} toggle={toggle} backdropClassName="emoji-picker-modal" fade={false}>
         <Picker
-          onSelect={(emoji: any) => onClickEmojiButtonHandler(emoji)}
+          onSelect={(emoji: any) => selectEmoji(emoji)}
+          i18n={translation}
+          title={translation.title}
+          emojiTooltip
+          theme={resolvedTheme}
         />
       </Modal>
     </>

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

@@ -7,17 +7,23 @@ import { TableButton } from './TableButton';
 import { TemplateButton } from './TemplateButton';
 import { TextFormatTools } from './TextFormatTools';
 
+import type { UseCodeMirrorEditor } from 'src';
+
 import styles from './Toolbar.module.scss';
 
-export const Toolbar = memo((props: any): JSX.Element => {
-  const { onClickEmojiButtonHandler } = props;
+type Props = {
+  codeMirrorEditor: UseCodeMirrorEditor | undefined
+}
+
+export const Toolbar = memo((props: Props): JSX.Element => {
+  const { codeMirrorEditor } = props;
 
   return (
     <div className={`d-flex gap-2 p-2 codemirror-editor-toolbar ${styles['codemirror-editor-toolbar']}`}>
       <AttachmentsDropup />
       <TextFormatTools />
       <EmojiButton
-        onClickEmojiButtonHandler={onClickEmojiButtonHandler}
+        codeMirrorEditor={codeMirrorEditor}
       />
       <TableButton />
       <DiagramButton />

packages/editor/vite.config.ts

@@ -52,6 +52,7 @@ export default defineConfig({
       },
       external: [
         'emoji-mart/css/emoji-mart.css',
+        '~/stores/use-next-themes',
       ],
     },
   },