Improve message rendering (#739)

zulip · Jun 25, 2017 · 8898fd8 · 8898fd8
1 parent f1b916c
commit 8898fd8
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 19 deletions.
diff --git a/src/html/HtmlNodeTag.js b/src/html/HtmlNodeTag.js
@@ -14,11 +14,8 @@ import HtmlTagPre from './tags/HtmlTagPre';
 import HtmlTagStrong from './tags/HtmlTagStrong';
 import HtmlTagItalic from './tags/HtmlTagItalic';
 import HtmlTagDiv from './tags/HtmlTagDiv';
-import HtmlTagBr from './tags/HtmlTagBr';
 import { getEmojiUrl } from '../utils/url';
 
-// br', 'blockquote',
-
 const specialTags = {
   'span': HtmlTagSpan,
   'p': HtmlTagSpan,
@@ -41,7 +38,6 @@ const specialTags = {
   'tr': HtmlTagDiv,
   'th': HtmlTagDiv,
   'td': HtmlTagDiv,
-  'br': HtmlTagBr,
 };
 
 const stylesFromClassNames = (classNames = '', styleObj) =>

diff --git a/src/html/HtmlNodeText.js b/src/html/HtmlNodeText.js
@@ -12,6 +12,6 @@ type Props = {
 export default ({ data, cascadingTextStyle }: Props) => (
   <RawLabel
     style={cascadingTextStyle}
-    text={entities.decodeHTML(data).replace(/\n$/, '')}
+    text={entities.decodeHTML(data).replace(/\n/, '')}
   />
 );
diff --git a/src/html/HtmlStyles.js b/src/html/HtmlStyles.js
@@ -3,21 +3,25 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   ul: {
+    width: '100%',
     flexDirection: 'column',
     paddingTop: 4,
     paddingBottom: 4,
   },
   ol: {
     flexDirection: 'column',
   },
+  li: {
+    flexDirection: 'row',
+    marginBottom: 4,
+  },
   div: {
     flexWrap: 'wrap',
   },
   p: {
   },
-  li: {
-    flexDirection: 'row',
-    marginBottom: 4,
+  br: {
+    width: '100%',
   },
   span: {
   },

diff --git a/src/html/tags/HtmlTagBr.js b/src/html/tags/HtmlTagBr.js
diff --git a/src/html/tags/HtmlTagLi.js b/src/html/tags/HtmlTagLi.js
@@ -8,15 +8,18 @@ import renderHtmlChildren from '../renderHtmlChildren';
 const BULLET = '\u2022';
 
 const customStyles = StyleSheet.create({
-  liText: {
+  text: {
+    flexWrap: 'wrap',
     flex: 1,
+    width: '100%',
+    flexDirection: 'row',
   }
 });
 
 export default ({ style, ...restProps }) => (
-  <View style={style}>
+  <View style={[styles.li, style]}>
     <HtmlNodeText style={styles.bullet} data={BULLET} />
-    <View style={customStyles.liText}>
+    <View style={customStyles.text}>
       {renderHtmlChildren({ ...restProps })}
     </View>
   </View>

diff --git a/src/message/MessageFull.js b/src/message/MessageFull.js
@@ -21,10 +21,13 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     marginLeft: 8,
   },
-  messageContentWrapper: {
+  contentWrapper: {
     flexDirection: 'row',
     alignItems: 'flex-start',
-    justifyContent: 'space-between'
+    justifyContent: 'space-between',
+  },
+  inner: {
+    flex: 1,
   },
 });
 
@@ -72,9 +75,9 @@ class MessageFull extends React.PureComponent {
             timestamp={message.timestamp}
             twentyFourHourTime={twentyFourHourTime}
           />
-          <View style={styles.messageContentWrapper}>
+          <View style={styles.contentWrapper}>
             <TouchableWithoutFeedback onLongPress={onLongPress}>
-              <View>
+              <View style={styles.inner}>
                 {children}
               </View>
             </TouchableWithoutFeedback>