diff --git a/src/components/middle/composer/AttachmentModal.tsx b/src/components/middle/composer/AttachmentModal.tsx index 96975070..538106ba 100644 --- a/src/components/middle/composer/AttachmentModal.tsx +++ b/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; + recentEmojis: string[]; + addRecentEmoji: AnyToVoidFunction; onCaptionUpdate: (html: string) => void; onSend: () => void; onClear: () => void; @@ -38,7 +43,9 @@ const AttachmentModal: FC = ({ groupChatMembers, currentUserId, usersById, + recentEmojis, onCaptionUpdate, + addRecentEmoji, onSend, onClear, }) => { @@ -59,6 +66,15 @@ const AttachmentModal: FC = ({ 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 = ({ filteredChatMembers={mentionFilteredMembers} usersById={usersById} /> + = ({ 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 = ({ groupChatMembers={groupChatMembers} currentUserId={currentUserId} usersById={usersById} + recentEmojis={recentEmojis} onCaptionUpdate={setHtml} + addRecentEmoji={addRecentEmoji} onSend={shouldSchedule ? openCalendar : handleSend} onClear={handleClearAttachment} /> diff --git a/src/components/middle/composer/hooks/useClipboardPaste.ts b/src/components/middle/composer/hooks/useClipboardPaste.ts index c916504e..3fa81a34 100644 --- a/src/components/middle/composer/hooks/useClipboardPaste.ts +++ b/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, editedMessage: ApiMessage | undefined, ) => { @@ -43,7 +43,7 @@ export default ( } if (pastedText) { - insertTextAndUpdateCursor(pastedText); + insertTextAndUpdateCursor(pastedText, input ? input.id : undefined); } } diff --git a/src/components/middle/composer/hooks/useEmojiTooltip.ts b/src/components/middle/composer/hooks/useEmojiTooltip.ts index fe319c37..a561356a 100644 --- a/src/components/middle/composer/hooks/useEmojiTooltip.ts +++ b/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(':');