Merge pull request #4797 from withspectrum/messages-lists

Add support for lists to messages

Author: brianlovin

shared/clients/draft-js/message/renderer.js

@@ -54,6 +54,20 @@ const messageRenderer = {
       children.map((child, index) => (
         <BlockQuote key={keys[index] || index}>{child}</BlockQuote>
       )),
+    'unordered-list-item': (children: Array<Node>, { keys }: KeysObj) => (
+      <ul key={keys.join('|')}>
+        {children.map((child, index) => (
+          <li key={keys[index]}>{child}</li>
+        ))}
+      </ul>
+    ),
+    'ordered-list-item': (children: Array<Node>, { keys }: KeysObj) => (
+      <ol key={keys.join('|')}>
+        {children.map((child, index) => (
+          <li key={keys[index]}>{child}</li>
+        ))}
+      </ol>
+    ),
   },
   entities: {
     LINK: (children: Array<Node>, data: DataObj, { key }: KeyObj) => (

shared/clients/draft-js/message/test/__snapshots__/renderer.test.js.snap

@@ -5,5 +5,7 @@ Array [
   "unstyled",
   "code-block",
   "blockquote",
+  "unordered-list-item",
+  "ordered-list-item",
 ]
 `;

src/components/message/style.js

@@ -251,6 +251,12 @@ export const Text = styled(Bubble)`
     text-decoration: underline;
     word-break: break-word;
   }
+
+  ul,
+  ol {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
 `;
 
 export const Emoji = styled(Bubble)`

src/reset.css.js

@@ -135,10 +135,6 @@ injectGlobal`
     margin-top: 16px;
   }
 
-  .markdown > *:first-of-type {
-    margin-top: 16px;
-  }
-
   .markdown img {
     margin-top: 16px;
     max-width: 100%;

src/views/thread/style.js

@@ -508,6 +508,7 @@ export const CommunityHeaderSubtitle = styled.span`
 export const ThreadSubtitle = styled(CommunityHeaderSubtitle)`
   font-size: 16px;
   margin-top: 8px;
+  margin-bottom: 16px;
   display: flex;
   line-height: 1.5;
   flex-wrap: wrap;