Merge pull request #5776 from weseek/feat/gw7750-set-emojiPicker-position-relative-to-cursor

feat: gw7750 set emoji picker position relative to cursor

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

@@ -695,7 +695,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
         <div className="text-left">
           <div className="mb-2 d-none d-md-block">
             <EmojiPicker
-              onClose={() => this.setState({ isEmojiPickerShown: false })}
+              onClose={() => this.setState({ isEmojiPickerShown: false, emojiSearchText: null })}
               emojiSearchText={emojiSearchText}
               emojiPickerHelper={this.emojiPickerHelper}
               isOpen={this.state.isEmojiPickerShown}

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

@@ -1,12 +1,11 @@
 import React, { FC } from 'react';
 
 import { Picker } from 'emoji-mart';
-import i18n from 'i18next';
 import { Modal } from 'reactstrap';
 
 import { isDarkMode } from '~/client/util/color-scheme';
 
-import EmojiPickerHelper from './EmojiPickerHelper';
+import EmojiPickerHelper, { getEmojiTranslation } from './EmojiPickerHelper';
 
 type Props = {
   onClose: () => void,
@@ -44,56 +43,17 @@ const EmojiPicker: FC<Props> = (props: Props) => {
   };
 
 
-  const getEmojiTranslation = () => {
-
-    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;
-  };
-
   const translation = getEmojiTranslation();
   const theme = isDarkMode() ? 'dark' : 'light';
 
   return (
-    <Modal isOpen={isOpen} toggle={onClose} onOpened={searchEmoji}>
+    <Modal isOpen={isOpen} toggle={onClose} onOpened={searchEmoji} fade={false}>
       <Picker
         onSelect={selectEmoji}
         i18n={translation}
         title={translation.title}
         emojiTooltip
-        style={{ position: 'absolute' }}
+        style={emojiPickerHelper.setStyle()}
         theme={theme}
       />
     </Modal>

packages/app/src/components/PageEditor/EmojiPickerHelper.ts

@@ -1,3 +1,7 @@
+import { CSSProperties } from 'react';
+
+import i18n from 'i18next';
+
 export default class EmojiPickerHelper {
 
 editor;
@@ -9,8 +13,27 @@ constructor(editor) {
   this.pattern = /:[^:\s]+/;
 }
 
+setStyle = ():CSSProperties => {
+  const offset = 20;
+  const emojiPickerHeight = 420;
+  const cursorPos = this.editor.cursorCoords(true);
+  const editorPos = this.editor.getWrapperElement().getBoundingClientRect();
+  // Emoji Picker bottom position exceed editor's bottom position
+  if (cursorPos.bottom + emojiPickerHeight > editorPos.bottom) {
+    return {
+      top: editorPos.bottom - emojiPickerHeight,
+      left: cursorPos.left + offset,
+      position: 'fixed',
+    };
+  }
+  return {
+    top: cursorPos.top + offset,
+    left: cursorPos.left + offset,
+    position: 'fixed',
+  };
+}
 
-getSearchCursor() {
+getSearchCursor =() => {
   const currentPos = this.editor.getCursor();
   const sc = this.editor.getSearchCursor(this.pattern, currentPos, { multiline: false });
   return sc;
@@ -21,7 +44,7 @@ addEmojiOnSearch = (emoji) => {
   const currentPos = this.editor.getCursor();
   const sc = this.getSearchCursor();
   if (sc.findPrevious()) {
-    sc.replace(emoji.colons, this.editor.getTokenAt(currentPos).string);
+    sc.replace(`${emoji.colons} `, this.editor.getTokenAt(currentPos).string);
     this.editor.focus();
     this.editor.refresh();
   }
@@ -32,7 +55,7 @@ addEmojiOnSearch = (emoji) => {
 addEmoji = (emoji) => {
   const currentPos = this.editor.getCursor();
   const doc = this.editor.getDoc();
-  doc.replaceRange(emoji.colons, currentPos);
+  doc.replaceRange(`${emoji.colons} `, currentPos);
   this.editor.focus();
   this.editor.refresh();
 }
@@ -60,3 +83,42 @@ getEmoji = () => {
 }
 
 }
+
+export const getEmojiTranslation = () => {
+
+  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;
+};