feat: code improvement

https://youtrack.weseek.co.jp/issue/GW-7732
- Move emoji mart css to EmojiPicker component
- Prevent to show emoji picker on delete emoji colons
- Enable emoji tooltip
- Change emoji data and set to apple

packages/app/src/client/util/markdown-it/emoji-mart-data.ts

@@ -1,4 +1,4 @@
-import data from 'emoji-mart/data/all.json';
+import data from 'emoji-mart/data/apple.json';
 import { Emoji } from 'emoji-mart';
 
 const DEFAULT_EMOJI_SIZE = 24;
@@ -15,7 +15,6 @@ const getEmojiSkinTone = async(emoji) => {
   [...Array(6).keys()].forEach((index) => {
     if (index > 0) {
       const elem = Emoji({
-        set: 'apple',
         emoji,
         skin: index + 1,
         size: DEFAULT_EMOJI_SIZE,
@@ -40,7 +39,6 @@ const getNativeEmoji = async(emojis) => {
     const emojiName = emoji[0];
     const hasSkinVariation = emoji[1].skin_variations;
     const elem = Emoji({
-      set: 'apple',
       emoji: emojiName,
       size: DEFAULT_EMOJI_SIZE,
     });

packages/app/src/client/util/markdown-it/emoji.js

@@ -8,7 +8,6 @@ export default class EmojiConfigurer {
 
   configure(md) {
     emojiMartData().then((data) => {
-      console.log(data);
       md.use(require('markdown-it-emoji-mart'), { defs: data });
     });
   }

packages/app/src/components/PageEditor/CodeMirrorEditor.jsx

@@ -12,7 +12,6 @@ import * as loadScript from 'simple-load-script';
 import * as loadCssSync from 'load-css-file';
 
 import { createValidator } from '@growi/codemirror-textlint';
-import 'emoji-mart/css/emoji-mart.css';
 import EmojiPicker from './EmojiPicker';
 import EmojiPickerHelper from './EmojiPickerHelper';
 import InterceptorManager from '~/services/interceptor-manager';
@@ -570,7 +569,16 @@ export default class CodeMirrorEditor extends AbstractEditor {
     }
 
     this.updateCheatsheetStates(null, value);
-    this.emojiPickerHandler();
+
+    /**
+     * Prevent emoji picker to show on delete emoji colons
+     */
+    editor.on('keydown', (editor, ev) => {
+      if (ev.key !== 'Backspace') {
+        this.emojiPickerHandler();
+      }
+    });
+
   }
 
   /**

packages/app/src/components/PageEditor/EmojiPicker.tsx

@@ -1,4 +1,5 @@
 import React, { FC, useRef, useEffect } from 'react';
+import 'emoji-mart/css/emoji-mart.css';
 import { Picker } from 'emoji-mart';
 import EmojiPickerHelper, { getEmojiTranslation } from './EmojiPickerHelper';
 
@@ -49,6 +50,7 @@ const EmojiPicker: FC<Props> = (props: Props) => {
     else {
       emojiPickerHelper.addEmoji(emoji);
     }
+    props.close();
   };
 
   const translation = getEmojiTranslation();
@@ -56,7 +58,7 @@ const EmojiPicker: FC<Props> = (props: Props) => {
   return (
     <div className="overlay">
       <div ref={emojiPickerContainer}>
-        <Picker autoFocus onSelect={selectEmoji} i18n={translation} title={translation.title} />
+        <Picker autoFocus onSelect={selectEmoji} i18n={translation} title={translation.title} emojiTooltip />
       </div>
     </div>
   );