Attachment Modal: Support Emoji Tooltip, fix layout and pasting from clipboard (#1093)

src/components/middle/composer/AttachmentModal.tsx

@@ -9,6 +9,7 @@ import { getFileExtension } from '../../common/helpers/documentInfo';
 import captureEscKeyListener from '../../../util/captureEscKeyListener';
 import usePrevious from '../../../hooks/usePrevious';
 import useMentionTooltip from './hooks/useMentionTooltip';
+import useEmojiTooltip from './hooks/useEmojiTooltip';
 import useLang from '../../../hooks/useLang';
 
 import Button from '../../ui/Button';
@@ -16,6 +17,7 @@ import Modal from '../../ui/Modal';
 import File from '../../common/File';
 import MessageInput from './MessageInput';
 import MentionTooltip from './MentionTooltip';
+import EmojiTooltip from './EmojiTooltip.async';
 
 import './AttachmentModal.scss';
 
@@ -23,9 +25,12 @@ export type OwnProps = {
   attachments: ApiAttachment[];
   caption: string;
   canSuggestMembers?: boolean;
+  canSuggestEmoji?: boolean;
   currentUserId?: number;
   groupChatMembers?: ApiChatMember[];
   usersById?: Record<number, ApiUser>;
+  recentEmojis: string[];
+  addRecentEmoji: AnyToVoidFunction;
   onCaptionUpdate: (html: string) => void;
   onSend: () => void;
   onClear: () => void;
@@ -38,7 +43,9 @@ const AttachmentModal: FC<OwnProps> = ({
   groupChatMembers,
   currentUserId,
   usersById,
+  recentEmojis,
   onCaptionUpdate,
+  addRecentEmoji,
   onSend,
   onClear,
 }) => {
@@ -59,6 +66,15 @@ const AttachmentModal: FC<OwnProps> = ({
     currentUserId,
     usersById,
   );
+  const {
+    isEmojiTooltipOpen, closeEmojiTooltip, filteredEmojis, insertEmoji,
+  } = useEmojiTooltip(
+    isOpen,
+    caption,
+    recentEmojis,
+    EDITABLE_INPUT_MODAL_ID,
+    onCaptionUpdate,
+  );
 
   useEffect(() => (isOpen ? captureEscKeyListener(onClear) : undefined), [isOpen, onClear]);
 
@@ -144,6 +160,13 @@ const AttachmentModal: FC<OwnProps> = ({
           filteredChatMembers={mentionFilteredMembers}
           usersById={usersById}
         />
+        <EmojiTooltip
+          isOpen={isEmojiTooltipOpen}
+          emojis={filteredEmojis}
+          onClose={closeEmojiTooltip}
+          onEmojiSelect={insertEmoji}
+          addRecentEmoji={addRecentEmoji}
+        />
         <MessageInput
           id="caption-input-text"
           html={caption}

src/components/middle/composer/Composer.scss

@@ -256,7 +256,7 @@
     padding-top: calc(1rem - var(--border-width));
     padding-bottom: calc(1rem - var(--border-width));
     overflow: hidden;
-    line-height: 1.5rem;
+    line-height: 1.375rem;
 
     &.overflown {
       overflow-y: auto;
@@ -276,7 +276,7 @@
 
   .placeholder-text {
     position: absolute;
-    bottom: 1rem;
+    bottom: .9375rem;
     color: var(--color-placeholders);
     pointer-events: none;
 
@@ -318,6 +318,8 @@
     min-height: 3.5rem;
     max-height: 26rem;
     line-height: 1.3125;
+    padding-top: calc(1.15625rem - var(--border-width));
+    padding-bottom: calc(1.15625rem - var(--border-width));
 
     @media (max-width: 600px) {
       height: 2.875rem;
@@ -359,13 +361,14 @@
 
 #caption-input-text {
   .form-control {
+    height: 3.25rem;
     min-height: 3.25rem;
     max-height: 15rem;
   }
 
   .placeholder-text {
-    bottom: 1rem;
+    bottom: .8125rem;
-    left: 1rem;
+    left: .90625rem;
   }
 }
 

src/components/middle/composer/Composer.tsx

@@ -301,9 +301,9 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
     setHtml,
   );
 
-  const insertTextAndUpdateCursor = useCallback((text: string) => {
+  const insertTextAndUpdateCursor = useCallback((text: string, inputId: string = EDITABLE_INPUT_ID) => {
     const selection = window.getSelection()!;
-    const messageInput = document.getElementById(EDITABLE_INPUT_ID)!;
+    const messageInput = document.getElementById(inputId)!;
     const newHtml = renderText(text, ['escape_html', 'emoji_html', 'br_html'])
       .join('')
       .replace(/\u200b+/g, '\u200b');
@@ -679,7 +679,9 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
         groupChatMembers={groupChatMembers}
         currentUserId={currentUserId}
         usersById={usersById}
+        recentEmojis={recentEmojis}
         onCaptionUpdate={setHtml}
+        addRecentEmoji={addRecentEmoji}
         onSend={shouldSchedule ? openCalendar : handleSend}
         onClear={handleClearAttachment}
       />

src/components/middle/composer/hooks/useClipboardPaste.ts

@@ -8,7 +8,7 @@ const CLIPBOARD_ACCEPTED_TYPES = ['image/png', 'image/jpeg', 'image/gif'];
 const MAX_MESSAGE_LENGTH = 4096;
 
 export default (
-  insertTextAndUpdateCursor: (text: string) => void,
+  insertTextAndUpdateCursor: (text: string, inputId?: string) => void,
   setAttachments: StateHookSetter<ApiAttachment[]>,
   editedMessage: ApiMessage | undefined,
 ) => {
@@ -43,7 +43,7 @@ export default (
       }
 
       if (pastedText) {
-        insertTextAndUpdateCursor(pastedText);
+        insertTextAndUpdateCursor(pastedText, input ? input.id : undefined);
       }
     }
 

src/components/middle/composer/hooks/useEmojiTooltip.ts

@@ -56,7 +56,7 @@ export default function useEmojiTooltip(
   }, []);
 
   useEffect(() => {
-    if (!html || !emojiIds.length) {
+    if (!isAllowed || !html || !emojiIds.length) {
       unmarkIsOpen();
       return;
     }
@@ -82,7 +82,7 @@ export default function useEmojiTooltip(
     } else {
       unmarkIsOpen();
     }
-  }, [emojiIds, html, markIsOpen, recentEmojis, unmarkIsOpen]);
+  }, [emojiIds, html, isAllowed, markIsOpen, recentEmojis, unmarkIsOpen]);
 
   const insertEmoji = useCallback((textEmoji: string) => {
     const atIndex = html.lastIndexOf(':');