diff --git a/web/components/messaging/send-message-button.tsx b/web/components/messaging/send-message-button.tsx index 0df7f1be..2661e753 100644 --- a/web/components/messaging/send-message-button.tsx +++ b/web/components/messaging/send-message-button.tsx @@ -1,21 +1,22 @@ import clsx from 'clsx' -import { User } from 'common/user' -import { Button } from 'web/components/buttons/button' -import { useRouter } from 'next/router' -import { BiEnvelope } from 'react-icons/bi' -import { useSortedPrivateMessageMemberships } from 'web/hooks/use-private-messages' -import { usePrivateUser } from 'web/hooks/use-user' -import { findKey } from 'lodash' -import { useState } from 'react' -import { Modal, MODAL_CLASS } from 'web/components/layout/modal' -import { Col } from 'web/components/layout/col' -import { api } from 'web/lib/api' -import { useTextEditor } from 'web/components/widgets/editor' -import { MAX_COMMENT_LENGTH } from 'common/comment' -import { CommentInputTextArea } from 'web/components/comments/comment-input' -import { Title } from 'web/components/widgets/title' -import { Row } from 'web/components/layout/row' -import { firebaseLogin } from 'web/lib/firebase/users' +import {User} from 'common/user' +import {Button} from 'web/components/buttons/button' +import {useRouter} from 'next/router' +import {BiEnvelope} from 'react-icons/bi' +import {useSortedPrivateMessageMemberships} from 'web/hooks/use-private-messages' +import {usePrivateUser} from 'web/hooks/use-user' +import {findKey} from 'lodash' +import {useEffect, useState} from 'react' +import {Modal, MODAL_CLASS} from 'web/components/layout/modal' +import {Col} from 'web/components/layout/col' +import {api} from 'web/lib/api' +import {useTextEditor} from 'web/components/widgets/editor' +import {MAX_COMMENT_LENGTH} from 'common/comment' +import {CommentInputTextArea} from 'web/components/comments/comment-input' +import {Title} from 'web/components/widgets/title' +import {Row} from 'web/components/layout/row' +import {firebaseLogin} from 'web/lib/firebase/users' +import {useT} from 'web/lib/locale' export const SendMessageButton = (props: { toUser: User @@ -28,6 +29,7 @@ export const SendMessageButton = (props: { const privateUser = usePrivateUser() const channelMemberships = useSortedPrivateMessageMemberships(currentUser?.id) const { memberIdsByChannelId } = channelMemberships + const t = useT() const [openComposeModal, setOpenComposeModal] = useState(false) const [error, setError] = useState('') @@ -52,9 +54,18 @@ export const SendMessageButton = (props: { key: `compose-new-message-${toUser.id}`, size: 'sm', max: MAX_COMMENT_LENGTH, - placeholder: 'Say something...', + // placeholder: t('send_message.placeholder', '...'), }) + useEffect(() => { + if (openComposeModal && editor) { + // Focus the editor after a short delay to ensure the modal is fully rendered + setTimeout(() => { + editor.commands.focus() + }, 100) + } + }, [openComposeModal, editor]) + const sendMessage = async () => { if (!editor) return setSubmitting(true) @@ -99,13 +110,13 @@ export const SendMessageButton = (props: { ) : ( )} - Message {toUser.name} + {t('send_message.title', 'Message')} {toUser.name}