Chats: format content, fixes #382, related #380

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') {
+    if (this.state.content.length < 1) return;
-      this.props.dispatch(sendChatMessage(chatId, this.state));
+    this.props.dispatch(sendChatMessage(chatId, this.state));
-      this.setState({ content: '' });
+    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();
     }
   }

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, '<br>');
+  }
+
   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() {