diff --git a/app/soapbox/features/chats/components/chat_box.js b/app/soapbox/features/chats/components/chat_box.js index 0f1de7dbb..40123ca25 100644 --- a/app/soapbox/features/chats/components/chat_box.js +++ b/app/soapbox/features/chats/components/chat_box.js @@ -40,11 +40,24 @@ class ChatBox extends ImmutablePureComponent { content: '', } - handleKeyDown = (e) => { + sendMessage = () => { const { chatId } = this.props; - if (e.key === 'Enter') { - this.props.dispatch(sendChatMessage(chatId, this.state)); - this.setState({ content: '' }); + if (this.state.content.length < 1) return; + this.props.dispatch(sendChatMessage(chatId, this.state)); + this.setState({ content: '' }); + } + + insertLine = () => { + const { content } = this.state; + this.setState({ content: content + '\n' }); + } + + handleKeyDown = (e) => { + if (e.key === 'Enter' && e.shiftKey) { + this.insertLine(); + e.preventDefault(); + } else if (e.key === 'Enter') { + this.sendMessage(); e.preventDefault(); } } diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js index 3888d9222..e2fe305bd 100644 --- a/app/soapbox/features/chats/components/chat_message_list.js +++ b/app/soapbox/features/chats/components/chat_message_list.js @@ -7,6 +7,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import { Map as ImmutableMap, List as ImmutableList } from 'immutable'; import emojify from 'soapbox/features/emoji/emoji'; import classNames from 'classnames'; +import { escape } from 'lodash'; const makeEmojiMap = record => record.get('emojis', ImmutableList()).reduce((map, emoji) => { return map.set(`:${emoji.get('shortcode')}:`, emoji); @@ -76,9 +77,16 @@ class ChatMessageList extends ImmutablePureComponent { this.scrollToBottom(); } + parsePendingContent = content => { + return escape(content).replace(/(?:\r\n|\r|\n)/g, '
'); + } + parseContent = chatMessage => { + const content = chatMessage.get('content') || ''; + const pending = chatMessage.get('pending', false); + const formatted = pending ? this.parsePendingContent(content) : content; const emojiMap = makeEmojiMap(chatMessage); - return emojify(chatMessage.get('content') || '', emojiMap.toJS()); + return emojify(formatted, emojiMap.toJS()); } render() {