refactor: use common emoji-picker

packages/client/src/tiptap/menus/emoji/constants.ts

@@ -1,171 +0,0 @@
-export const EXPRESSIONES = [
-  '😀',
-  '😃',
-  '😄',
-  '😁',
-  '😆',
-  '😅',
-  '😂',
-  '🤣',
-  '🥲',
-  '😊',
-  '😇',
-  '🙂',
-  '🙃',
-  '😉',
-  '😌',
-  '😍',
-  '🥰',
-  '😘',
-  '😗',
-  '😙',
-  '😚',
-  '😋',
-  '😛',
-  '😝',
-  '😜',
-  '🤪',
-  '🤨',
-  '🧐',
-  '🤓',
-  '😎',
-  '🥸',
-  '🤩',
-  '🥳',
-  '😏',
-  '😒',
-  '😞',
-  '😔',
-  '😟',
-  '😕',
-  '🙁',
-  '😣',
-  '😖',
-  '😫',
-  '😩',
-  '🥺',
-  '😢',
-  '😭',
-  '😤',
-  '😠',
-  '😡',
-  '🤬',
-  '🤯',
-  '😳',
-  '🥵',
-  '🥶',
-  '😱',
-  '😨',
-  '😰',
-  '😥',
-  '😓',
-  '🤗',
-  '🤔',
-  '🤭',
-  '🤫',
-  '🤥',
-  '😶',
-  '😐',
-  '😑',
-  '😬',
-  '🙄',
-  '😯',
-  '😦',
-  '😧',
-  '😮',
-  '😲',
-  '🥱',
-  '😴',
-  '🤤',
-  '😪',
-  '😵',
-  '🤐',
-  '🥴',
-  '🤢',
-  '🤮',
-  '🤧',
-  '😷',
-  '🤒',
-  '🤕',
-  '🤑',
-  '🤠',
-  '😈',
-  '👿',
-  '👹',
-  '👺',
-  '🤡',
-  '💩',
-  '👻',
-  '💀',
-  '☠️',
-  '👽',
-  '👾',
-  '🤖',
-  '🎃',
-  '😺',
-  '😸',
-  '😹',
-  '😻',
-  '😼',
-  '😽',
-  '🙀',
-  '😿',
-  '😾',
-];
-
-export const GESTURES = [
-  '👋',
-  '🤚',
-  '🖐',
-  '✋',
-  '🖖',
-  '👌',
-  '🤌',
-  '🤏',
-  '✌️',
-  '🤞',
-  '🤟',
-  '🤘',
-  '🤙',
-  '👈',
-  '👉',
-  '👆',
-  '🖕',
-  '👇',
-  '☝️',
-  '👍',
-  '👎',
-  '✊',
-  '👊',
-  '🤛',
-  '🤜',
-  '👏',
-  '🙌',
-  '👐',
-  '🤲',
-  '🤝',
-  '🙏',
-  '✍️',
-  '💅',
-  '🤳',
-  '💪',
-  '🦾',
-  '🦵',
-  '🦿',
-  '🦶',
-  '👣',
-  '👂',
-  '🦻',
-  '👃',
-  '🫀',
-  '🫁',
-  '🧠',
-  '🦷',
-  '🦴',
-  '👀',
-  '👁',
-  '👅',
-  '👄',
-  '💋',
-  '🩸',
-];

packages/client/src/tiptap/menus/emoji/index.module.scss

@@ -1,24 +0,0 @@
-.wrap {
-  height: 300px;
-  overflow: auto;
-}
-
-.listWrap {
-  display: flex;
-  width: 320px;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  flex-wrap: wrap;
-
-  > li {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 32px;
-    height: 32px;
-    padding: 4px;
-    font-size: 24px;
-    cursor: pointer;
-  }
-}

packages/client/src/tiptap/menus/emoji/index.tsx

@@ -1,63 +1,22 @@
 import React, { useCallback } from 'react';
 import { Editor } from '@tiptap/core';
-import { Popover, Button, Typography } from '@douyinfe/semi-ui';
+import { Button } from '@douyinfe/semi-ui';
 import { Tooltip } from 'components/tooltip';
 import { IconEmoji } from 'components/icons';
-import { EXPRESSIONES, GESTURES } from './constants';
+import { EmojiPicker } from 'components/emoji-picker';
-import styles from './index.module.scss';
-
-const { Title } = Typography;
-
-const LIST = [
-  {
-    title: '表情',
-    data: EXPRESSIONES,
-  },
-  {
-    title: '手势',
-    data: GESTURES,
-  },
-];
 
 export const Emoji: React.FC<{ editor: Editor }> = ({ editor }) => {
   const setEmoji = useCallback((emoji) => {
-    return () => {
+    const { selection } = editor.state;
-      const transaction = editor.state.tr.insertText(emoji);
+    const { $anchor } = selection;
-      editor.view.dispatch(transaction);
+    return editor.chain().insertContentAt($anchor.pos, emoji).run();
-    };
   }, []);
 
   return (
-    <Popover
+    <EmojiPicker onSelectEmoji={setEmoji}>
-      showArrow
+      <Tooltip content="插入表情">
-      zIndex={10000}
+        <Button theme={'borderless'} type="tertiary" icon={<IconEmoji />} />
-      trigger="click"
+      </Tooltip>
-      content={
+    </EmojiPicker>
-        <div className={styles.wrap}>
-          {LIST.map((item, index) => {
-            return (
-              <div key={item.title} className={styles.sectionWrap}>
-                <Title heading={6} style={{ margin: `${index === 0 ? 0 : 16}px 0 6px` }}>
-                  {item.title}
-                </Title>
-                <ul className={styles.listWrap}>
-                  {(item.data || []).map((ex) => (
-                    <li key={ex} onClick={setEmoji(ex)}>
-                      {ex}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            );
-          })}
-        </div>
-      }
-    >
-      <span>
-        <Tooltip content="插入表情">
-          <Button theme={'borderless'} type="tertiary" icon={<IconEmoji />} />
-        </Tooltip>
-      </span>
-    </Popover>
   );
 };