From 11000670f93c9490ef152fb83196dec774ebab70 Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Tue, 12 Feb 2019 13:51:03 +0100
Subject: [PATCH 01/35] Create first prototype thread renderer

---
 shared/clients/draft-js/thread/renderer.js | 64 ++++++++++++++++++++++
 src/components/composer/index.js           | 12 ++--
 2 files changed, 71 insertions(+), 5 deletions(-)
 create mode 100644 shared/clients/draft-js/thread/renderer.js

diff --git a/shared/clients/draft-js/thread/renderer.js b/shared/clients/draft-js/thread/renderer.js
new file mode 100644
index 0000000000..393a2b6c42
--- /dev/null
+++ b/shared/clients/draft-js/thread/renderer.js
@@ -0,0 +1,64 @@
+// @flow
+import React from 'react';
+import { Line, Paragraph, BlockQuote } from 'src/components/message/style';
+import type { Node } from 'react';
+import type { KeyObj, KeysObj, DataObj } from '../message/types';
+
+const threadRenderer = {
+  inline: {
+    BOLD: (children: Array<Node>, { key }: KeyObj) => (
+      <span style={{ fontWeight: 700 }} key={key}>
+        {children}
+      </span>
+    ),
+    ITALIC: (children: Array<Node>, { key }: KeyObj) => (
+      <em key={key}>{children}</em>
+    ),
+    CODE: (children: Array<Node>, { key }: KeyObj) => (
+      <code key={key}>{children}</code>
+    ),
+  },
+  blocks: {
+    unstyled: (children: Array<Node>, { keys }: KeysObj) =>
+      children.map((child, index) => (
+        <Paragraph key={keys[index] || index}>{child}</Paragraph>
+      )),
+    'code-block': (children: Array<Node>, { keys }: KeysObj) => (
+      <Line key={keys.join('|')}>
+        {children.map((child, i) => [child, <br key={i} />])}
+      </Line>
+    ),
+    blockquote: (children: Array<Node>, { keys }: KeysObj) =>
+      children.map((child, index) => (
+        <BlockQuote key={keys[index] || index}>{child}</BlockQuote>
+      )),
+    'header-one': (children: Array<Node>) =>
+      children.map(child => <h1>{child}</h1>),
+    'header-two': (children: Array<Node>) =>
+      children.map(child => <h2>{child}</h2>),
+    'unordered-list-item': (children: Array<Node>, { depth, keys }) => (
+      <ul key={keys.join('|')}>
+        {children.map((child, index) => (
+          <li key={keys[index]}>{child}</li>
+        ))}
+      </ul>
+    ),
+    'ordered-list-item': (children: Array<Node>, { depth, keys }) => (
+      <ol key={keys.join('|')}>
+        {children.map((child, index) => (
+          <li key={keys[index]}>{child}</li>
+        ))}
+      </ol>
+    ),
+  },
+  entities: {
+    LINK: (children: Array<Node>, data: DataObj, { key }: KeyObj) => (
+      <a key={key} href={data.url} target="_blank">
+        {children}
+      </a>
+    ),
+  },
+  // decorators: [mentionsDecorator, linksDecorator],
+};
+
+export default threadRenderer;
diff --git a/src/components/composer/index.js b/src/components/composer/index.js
index 76ca385564..8d1ea7d56e 100644
--- a/src/components/composer/index.js
+++ b/src/components/composer/index.js
@@ -9,6 +9,7 @@ import debounce from 'debounce';
 import queryString from 'query-string';
 import { KeyBindingUtil } from 'draft-js';
 import Dropzone from 'react-dropzone';
+import redraft from 'redraft';
 import Icon from '../icons';
 import processThreadContent from 'shared/draft-utils/process-thread-content';
 import { ThreadHeading } from 'src/views/thread/style';
@@ -64,6 +65,7 @@ import {
   sortChannels,
   getDefaultActiveChannel,
 } from './utils';
+import threadRenderer from 'shared/clients/draft-js/thread/renderer';
 import { events, track } from 'src/helpers/analytics';
 import { ESC, ENTER } from 'src/helpers/keycodes';
 
@@ -701,12 +703,12 @@ class ComposerWithData extends Component<Props, State> {
               /* $FlowFixMe */
               <div style={{ padding: '0 32px' }}>
                 <ThreadHeading>{this.state.title}</ThreadHeading>
-                {/* $FlowFixMe */}
-                <PreviewEditor
-                  state={toState(
-                    JSON.parse(processThreadContent('TEXT', this.state.body))
+                <div className="markdown">
+                  {redraft(
+                    JSON.parse(processThreadContent('TEXT', this.state.body)),
+                    threadRenderer
                   )}
-                />
+                </div>
               </div>
             ) : (
               <Dropzone

From dd5a254c02f825d1b97cf55f43b56e496b38fcfd Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Tue, 12 Feb 2019 14:02:46 +0100
Subject: [PATCH 02/35] Create ThreadRenderer component

---
 src/components/composer/index.js       | 12 +++++-------
 src/components/threadRenderer/index.js | 14 ++++++++++++++
 2 files changed, 19 insertions(+), 7 deletions(-)
 create mode 100644 src/components/threadRenderer/index.js

diff --git a/src/components/composer/index.js b/src/components/composer/index.js
index 8d1ea7d56e..2a2886c46a 100644
--- a/src/components/composer/index.js
+++ b/src/components/composer/index.js
@@ -9,13 +9,13 @@ import debounce from 'debounce';
 import queryString from 'query-string';
 import { KeyBindingUtil } from 'draft-js';
 import Dropzone from 'react-dropzone';
-import redraft from 'redraft';
 import Icon from '../icons';
 import processThreadContent from 'shared/draft-utils/process-thread-content';
 import { ThreadHeading } from 'src/views/thread/style';
 import Editor from 'src/components/rich-text-editor';
 import Image from 'src/components/rich-text-editor/Image';
 import { SegmentedControl, Segment } from 'src/components/segmentedControl';
+import ThreadRenderer from '../threadRenderer';
 import { closeComposer } from '../../actions/composer';
 import { changeActiveThread } from '../../actions/dashboardFeed';
 import { addToastWithTimeout } from '../../actions/toasts';
@@ -65,7 +65,6 @@ import {
   sortChannels,
   getDefaultActiveChannel,
 } from './utils';
-import threadRenderer from 'shared/clients/draft-js/thread/renderer';
 import { events, track } from 'src/helpers/analytics';
 import { ESC, ENTER } from 'src/helpers/keycodes';
 
@@ -703,12 +702,11 @@ class ComposerWithData extends Component<Props, State> {
               /* $FlowFixMe */
               <div style={{ padding: '0 32px' }}>
                 <ThreadHeading>{this.state.title}</ThreadHeading>
-                <div className="markdown">
-                  {redraft(
-                    JSON.parse(processThreadContent('TEXT', this.state.body)),
-                    threadRenderer
+                <ThreadRenderer
+                  body={JSON.parse(
+                    processThreadContent('TEXT', this.state.body)
                   )}
-                </div>
+                />
               </div>
             ) : (
               <Dropzone
diff --git a/src/components/threadRenderer/index.js b/src/components/threadRenderer/index.js
new file mode 100644
index 0000000000..33f27d14ce
--- /dev/null
+++ b/src/components/threadRenderer/index.js
@@ -0,0 +1,14 @@
+// @flow
+// Renders a thread body to React elements
+import React from 'react';
+import redraft from 'redraft';
+import threadRenderer from 'shared/clients/draft-js/thread/renderer';
+import type { RawDraftContentState } from 'draft-js';
+
+type Props = {
+  body: RawDraftContentState,
+};
+
+export default (props: Props) => (
+  <div className="markdown">{redraft(props.body, threadRenderer)}</div>
+);

From 1e1f16792faabf09e0923671d069f23512bba6ca Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Tue, 12 Feb 2019 14:17:00 +0100
Subject: [PATCH 03/35] Add embed support to thread renderer

---
 shared/clients/draft-js/thread/renderer.js | 68 +++++++++++++++++++---
 src/components/threadRenderer/index.js     |  7 ++-
 2 files changed, 65 insertions(+), 10 deletions(-)

diff --git a/shared/clients/draft-js/thread/renderer.js b/shared/clients/draft-js/thread/renderer.js
index 393a2b6c42..e691302caa 100644
--- a/shared/clients/draft-js/thread/renderer.js
+++ b/shared/clients/draft-js/thread/renderer.js
@@ -1,9 +1,56 @@
 // @flow
 import React from 'react';
 import { Line, Paragraph, BlockQuote } from 'src/components/message/style';
+import {
+  AspectRatio,
+  EmbedContainer,
+  EmbedComponent,
+} from 'src/components/rich-text-editor/style';
 import type { Node } from 'react';
 import type { KeyObj, KeysObj, DataObj } from '../message/types';
 
+type EmbedProps = {
+  aspectRatio?: string,
+  src: string,
+  width?: string | number,
+  height?: string | number,
+};
+
+const Embed = (props: EmbedProps) => {
+  const { aspectRatio, src, width = '100%', height = 200 } = props;
+
+  if (!src) return null;
+
+  // if an aspect ratio is passed in, we need to use the EmbedComponent which does some trickery with padding to force an aspect ratio. Otherwise we should just use a regular iFrame
+  if (aspectRatio && aspectRatio !== undefined) {
+    return (
+      <AspectRatio ratio={aspectRatio}>
+        <EmbedComponent
+          title={`iframe-${src}`}
+          width={width}
+          height={height}
+          allowFullScreen={true}
+          frameBorder="0"
+          src={src}
+        />
+      </AspectRatio>
+    );
+  } else {
+    return (
+      <EmbedContainer>
+        <iframe
+          title={`iframe-${src}`}
+          width={width}
+          height={height}
+          allowFullScreen={true}
+          frameBorder="0"
+          src={src}
+        />
+      </EmbedContainer>
+    );
+  }
+};
+
 const threadRenderer = {
   inline: {
     BOLD: (children: Array<Node>, { key }: KeyObj) => (
@@ -19,14 +66,18 @@ const threadRenderer = {
     ),
   },
   blocks: {
-    unstyled: (children: Array<Node>, { keys }: KeysObj) =>
-      children.map((child, index) => (
-        <Paragraph key={keys[index] || index}>{child}</Paragraph>
-      )),
+    unstyled: (children: Array<Node>, { keys }: KeysObj) => {
+      // If the children are text, render a paragraph
+      if (children.some(child => typeof child === 'string')) {
+        return children.map((child, index) => (
+          <Paragraph key={keys[index] || index}>{child}</Paragraph>
+        ));
+      }
+
+      return children;
+    },
     'code-block': (children: Array<Node>, { keys }: KeysObj) => (
-      <Line key={keys.join('|')}>
-        {children.map((child, i) => [child, <br key={i} />])}
-      </Line>
+      <Line key={keys.join('|')}>{children}</Line>
     ),
     blockquote: (children: Array<Node>, { keys }: KeysObj) =>
       children.map((child, index) => (
@@ -57,6 +108,9 @@ const threadRenderer = {
         {children}
       </a>
     ),
+    embed: (children: Array<Node>, data: Object, { key }: KeyObj) => (
+      <Embed key={key} {...data} />
+    ),
   },
   // decorators: [mentionsDecorator, linksDecorator],
 };
diff --git a/src/components/threadRenderer/index.js b/src/components/threadRenderer/index.js
index 33f27d14ce..06e25bd29d 100644
--- a/src/components/threadRenderer/index.js
+++ b/src/components/threadRenderer/index.js
@@ -9,6 +9,7 @@ type Props = {
   body: RawDraftContentState,
 };
 
-export default (props: Props) => (
-  <div className="markdown">{redraft(props.body, threadRenderer)}</div>
-);
+export default (props: Props) =>
+  console.log(props.body) || (
+    <div className="markdown">{redraft(props.body, threadRenderer)}</div>
+  );

From fd1473f8a9b42b79225f39c5d0b300e6bf9566a5 Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Tue, 12 Feb 2019 14:18:27 +0100
Subject: [PATCH 04/35] Add support for links and mentions back

---
 shared/clients/draft-js/thread/renderer.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/shared/clients/draft-js/thread/renderer.js b/shared/clients/draft-js/thread/renderer.js
index e691302caa..ed73a5e1c8 100644
--- a/shared/clients/draft-js/thread/renderer.js
+++ b/shared/clients/draft-js/thread/renderer.js
@@ -6,6 +6,8 @@ import {
   EmbedContainer,
   EmbedComponent,
 } from 'src/components/rich-text-editor/style';
+import mentionsDecorator from '../mentions-decorator';
+import linksDecorator from '../links-decorator';
 import type { Node } from 'react';
 import type { KeyObj, KeysObj, DataObj } from '../message/types';
 
@@ -112,7 +114,7 @@ const threadRenderer = {
       <Embed key={key} {...data} />
     ),
   },
-  // decorators: [mentionsDecorator, linksDecorator],
+  decorators: [mentionsDecorator, linksDecorator],
 };
 
 export default threadRenderer;

From ce5a93626f7656a0f062d6d01eaf7e98502d76dd Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Tue, 12 Feb 2019 14:21:53 +0100
Subject: [PATCH 05/35] Fix paragraph rendering and render h3s

---
 shared/clients/draft-js/thread/renderer.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/shared/clients/draft-js/thread/renderer.js b/shared/clients/draft-js/thread/renderer.js
index ed73a5e1c8..74d9348305 100644
--- a/shared/clients/draft-js/thread/renderer.js
+++ b/shared/clients/draft-js/thread/renderer.js
@@ -53,6 +53,14 @@ const Embed = (props: EmbedProps) => {
   }
 };
 
+const hasStringElements = (arr: Array<mixed>) => {
+  return arr.some(elem => {
+    if (Array.isArray(elem)) return hasStringElements(elem);
+
+    return typeof elem === 'string';
+  });
+};
+
 const threadRenderer = {
   inline: {
     BOLD: (children: Array<Node>, { key }: KeyObj) => (
@@ -70,10 +78,8 @@ const threadRenderer = {
   blocks: {
     unstyled: (children: Array<Node>, { keys }: KeysObj) => {
       // If the children are text, render a paragraph
-      if (children.some(child => typeof child === 'string')) {
-        return children.map((child, index) => (
-          <Paragraph key={keys[index] || index}>{child}</Paragraph>
-        ));
+      if (hasStringElements(children)) {
+        return <Paragraph key={keys.join('|')}>{children}</Paragraph>;
       }
 
       return children;
@@ -89,6 +95,8 @@ const threadRenderer = {
       children.map(child => <h1>{child}</h1>),
     'header-two': (children: Array<Node>) =>
       children.map(child => <h2>{child}</h2>),
+    'header-three': (children: Array<Node>) =>
+      children.map(child => <h3>{child}</h3>),
     'unordered-list-item': (children: Array<Node>, { depth, keys }) => (
       <ul key={keys.join('|')}>
         {children.map((child, index) => (

From 84f9ec07804294a1beba5d5bc25990127a83467a Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Tue, 12 Feb 2019 14:23:25 +0100
Subject: [PATCH 06/35] Code cleanup

---
 shared/clients/draft-js/thread/renderer.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/shared/clients/draft-js/thread/renderer.js b/shared/clients/draft-js/thread/renderer.js
index 74d9348305..0e85a69853 100644
--- a/shared/clients/draft-js/thread/renderer.js
+++ b/shared/clients/draft-js/thread/renderer.js
@@ -53,12 +53,10 @@ const Embed = (props: EmbedProps) => {
   }
 };
 
-const hasStringElements = (arr: Array<mixed>) => {
-  return arr.some(elem => {
-    if (Array.isArray(elem)) return hasStringElements(elem);
+const hasStringElements = (arr: Array<mixed> | mixed) => {
+  if (Array.isArray(arr)) return arr.some(elem => hasStringElements(elem));
 
-    return typeof elem === 'string';
-  });
+  return typeof arr === 'string';
 };
 
 const threadRenderer = {

From 0cb6f952fcf3c8ff4fc25398ccc9a5be5b086cfe Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Tue, 12 Feb 2019 14:23:54 +0100
Subject: [PATCH 07/35] Flowtype keys

---
 shared/clients/draft-js/thread/renderer.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/shared/clients/draft-js/thread/renderer.js b/shared/clients/draft-js/thread/renderer.js
index 0e85a69853..00f00138ee 100644
--- a/shared/clients/draft-js/thread/renderer.js
+++ b/shared/clients/draft-js/thread/renderer.js
@@ -95,14 +95,14 @@ const threadRenderer = {
       children.map(child => <h2>{child}</h2>),
     'header-three': (children: Array<Node>) =>
       children.map(child => <h3>{child}</h3>),
-    'unordered-list-item': (children: Array<Node>, { depth, keys }) => (
+    '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>, { depth, keys }) => (
+    'ordered-list-item': (children: Array<Node>, { keys }: KeysObj) => (
       <ol key={keys.join('|')}>
         {children.map((child, index) => (
           <li key={keys[index]}>{child}</li>

From 61be799661afa087ff5679a26c981b2ab7ec4ff7 Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Tue, 12 Feb 2019 14:25:30 +0100
Subject: [PATCH 08/35] Fix codeblock styling

---
 src/reset.css.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/reset.css.js b/src/reset.css.js
index 7d0d223501..d2ce8dc444 100644
--- a/src/reset.css.js
+++ b/src/reset.css.js
@@ -226,6 +226,8 @@ injectGlobal`
   .markdown pre {
     margin: 16px 0;
     display: block;
+    border-radius: 4px;
+    background-color: #f5f8fc;
   }
 
   .markdown pre code {
@@ -233,6 +235,9 @@ injectGlobal`
     display: block;
     white-space: pre-wrap;
     position: relative;
+    margin: 0;
+    border: none;
+    background: none;
   }
 
   .markdown div[data-block='true'] {

From 3fbd4675b9ada7bfda5235588e87a7f31d35b8e1 Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Tue, 12 Feb 2019 14:25:54 +0100
Subject: [PATCH 09/35] Remove console.log

---
 src/components/threadRenderer/index.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/threadRenderer/index.js b/src/components/threadRenderer/index.js
index 06e25bd29d..33f27d14ce 100644
--- a/src/components/threadRenderer/index.js
+++ b/src/components/threadRenderer/index.js
@@ -9,7 +9,6 @@ type Props = {
   body: RawDraftContentState,
 };
 
-export default (props: Props) =>
-  console.log(props.body) || (
-    <div className="markdown">{redraft(props.body, threadRenderer)}</div>
-  );
+export default (props: Props) => (
+  <div className="markdown">{redraft(props.body, threadRenderer)}</div>
+);

From 3c079df1bc09e4cad8f1e1b2a525339860d48b6b Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Tue, 12 Feb 2019 14:32:51 +0100
Subject: [PATCH 10/35] Render images

---
 shared/clients/draft-js/thread/renderer.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/shared/clients/draft-js/thread/renderer.js b/shared/clients/draft-js/thread/renderer.js
index 00f00138ee..35a1396ef1 100644
--- a/shared/clients/draft-js/thread/renderer.js
+++ b/shared/clients/draft-js/thread/renderer.js
@@ -116,6 +116,11 @@ const threadRenderer = {
         {children}
       </a>
     ),
+    IMAGE: (
+      children: Array<Node>,
+      data: { src?: string, alt?: string },
+      { key }: KeyObj
+    ) => <img key={key} src={data.src} alt={data.alt} />,
     embed: (children: Array<Node>, data: Object, { key }: KeyObj) => (
       <Embed key={key} {...data} />
     ),

From 0695e1709971205d5e65903e46a3ff7f8286fa24 Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Tue, 12 Feb 2019 14:37:36 +0100
Subject: [PATCH 11/35] Delete rich-text-editor import from composer

---
 src/components/composer/index.js       | 22 ----------------------
 src/components/threadRenderer/index.js |  7 ++++---
 2 files changed, 4 insertions(+), 25 deletions(-)

diff --git a/src/components/composer/index.js b/src/components/composer/index.js
index 2a2886c46a..ec1287ad66 100644
--- a/src/components/composer/index.js
+++ b/src/components/composer/index.js
@@ -12,8 +12,6 @@ import Dropzone from 'react-dropzone';
 import Icon from '../icons';
 import processThreadContent from 'shared/draft-utils/process-thread-content';
 import { ThreadHeading } from 'src/views/thread/style';
-import Editor from 'src/components/rich-text-editor';
-import Image from 'src/components/rich-text-editor/Image';
 import { SegmentedControl, Segment } from 'src/components/segmentedControl';
 import ThreadRenderer from '../threadRenderer';
 import { closeComposer } from '../../actions/composer';
@@ -68,26 +66,6 @@ import {
 import { events, track } from 'src/helpers/analytics';
 import { ESC, ENTER } from 'src/helpers/keycodes';
 
-const PreviewEditor = (props: { state: Object }) => {
-  // $FlowIssue
-  const [state, setState] = React.useState(props.state);
-
-  const onChange = change => {
-    setState(change);
-  };
-
-  return (
-    <Editor
-      readOnly
-      state={state}
-      onChange={onChange}
-      placeholder=""
-      version={2}
-      editorKey="preview-editor"
-    />
-  );
-};
-
 type State = {
   title: string,
   body: string,
diff --git a/src/components/threadRenderer/index.js b/src/components/threadRenderer/index.js
index 33f27d14ce..06e25bd29d 100644
--- a/src/components/threadRenderer/index.js
+++ b/src/components/threadRenderer/index.js
@@ -9,6 +9,7 @@ type Props = {
   body: RawDraftContentState,
 };
 
-export default (props: Props) => (
-  <div className="markdown">{redraft(props.body, threadRenderer)}</div>
-);
+export default (props: Props) =>
+  console.log(props.body) || (
+    <div className="markdown">{redraft(props.body, threadRenderer)}</div>
+  );

From 9520f0c45d5eb610b30f079b65045d33dd9612e5 Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Tue, 12 Feb 2019 14:40:49 +0100
Subject: [PATCH 12/35] Use ThreadRenderer in ThreadDetail

---
 src/views/thread/components/threadDetail.js | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/views/thread/components/threadDetail.js b/src/views/thread/components/threadDetail.js
index 211fdec7d8..b9f5258e8e 100644
--- a/src/views/thread/components/threadDetail.js
+++ b/src/views/thread/components/threadDetail.js
@@ -14,7 +14,7 @@ import deleteThreadMutation from 'shared/graphql/mutations/thread/deleteThread';
 import editThreadMutation from 'shared/graphql/mutations/thread/editThread';
 import pinThreadMutation from 'shared/graphql/mutations/community/pinCommunityThread';
 import type { GetThreadType } from 'shared/graphql/queries/thread/getThread';
-import Editor from 'src/components/rich-text-editor';
+import ThreadRenderer from 'src/components/threadRenderer';
 import { toJSON, toState } from 'shared/draft-utils';
 import Textarea from 'react-textarea-autosize';
 import ActionBar from './actionBar';
@@ -91,7 +91,7 @@ class ThreadDetailPure extends React.Component<Props, State> {
 
     return this.setState({
       isEditing: false,
-      body: toState(JSON.parse(thread.content.body)),
+      body: JSON.parse(thread.content.body),
       title: thread.content.title,
       flyoutOpen: false,
       receiveNotifications: thread.receiveNotifications,
@@ -399,16 +399,7 @@ class ThreadDetailPure extends React.Component<Props, State> {
             </Link>
           </ThreadSubtitle>
 
-          {/* $FlowFixMe */}
-          <Editor
-            readOnly={!this.state.isEditing}
-            state={body}
-            onChange={this.changeBody}
-            editorKey="thread-detail"
-            placeholder="Write more thoughts here..."
-            editorRef={editor => (this.bodyEditor = editor)}
-            version={2}
-          />
+          <ThreadRenderer body={body} />
         </ThreadContent>
 
         <ErrorBoundary fallbackComponent={null}>

From 806858c4307ffeb21ade7c4cd90b1cb82d6c3010 Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Tue, 12 Feb 2019 14:42:00 +0100
Subject: [PATCH 13/35] Delete unused rich-text-editor and
 draft-js-plugins-editor components

---
 .../draft-js-plugins-editor/index.js          |  97 ------
 src/components/rich-text-editor/Embed.js      | 159 ----------
 src/components/rich-text-editor/Image.js      |  63 ----
 .../rich-text-editor/LanguageSelect.js        |  62 ----
 src/components/rich-text-editor/container.js  | 283 ------------------
 src/components/rich-text-editor/index.js      |  11 -
 src/components/rich-text-editor/toolbar.js    | 103 -------
 7 files changed, 778 deletions(-)
 delete mode 100644 src/components/draft-js-plugins-editor/index.js
 delete mode 100644 src/components/rich-text-editor/Embed.js
 delete mode 100644 src/components/rich-text-editor/Image.js
 delete mode 100644 src/components/rich-text-editor/LanguageSelect.js
 delete mode 100644 src/components/rich-text-editor/container.js
 delete mode 100644 src/components/rich-text-editor/index.js
 delete mode 100644 src/components/rich-text-editor/toolbar.js

diff --git a/src/components/draft-js-plugins-editor/index.js b/src/components/draft-js-plugins-editor/index.js
deleted file mode 100644
index 205b4593d8..0000000000
--- a/src/components/draft-js-plugins-editor/index.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/* @flow
- *
- * This is a wrapper around the vanilla draft-js-plugins-editor package that renders
- * a fallback vanilla text input on Android because DraftJS doesn't have Android support
- *
- */
-import React from 'react';
-import DraftEditor from 'draft-js-plugins-editor';
-import debounce from 'debounce';
-import Textarea from 'react-textarea-autosize';
-import { isAndroid, toPlainText, fromPlainText } from 'shared/draft-utils';
-import type DraftEditorProps from 'draft-js/lib/DraftEditorProps';
-
-type Props = {
-  ...$Exact<DraftEditorProps>,
-  plugins?: Array<Object>,
-  decorators?: Array<Object>,
-  defaultKeyBindings?: boolean,
-  defaultBlockRenderMap?: boolean,
-  editorRef?: Function,
-};
-
-type FallbackState = {
-  value: string,
-};
-
-class AndroidFallbackInput extends React.Component<Props, FallbackState> {
-  constructor(props) {
-    super(props);
-
-    this.syncChanges = debounce(this.syncChanges, 100);
-    this.state = {
-      value: '',
-    };
-  }
-
-  componentWillReceiveProps(next: Props) {
-    const curr = this.props;
-    if (next.editorState !== curr.editorState) {
-      this.setState({
-        value: toPlainText(next.editorState),
-      });
-    }
-  }
-
-  // NOTE: This is debounced in the constructor
-  // This syncs the changes made to the plaintext input with the rest of the app
-  // Because that's an expensive operation we debounce it
-  syncChanges = () => {
-    this.props.onChange(fromPlainText(this.state.value));
-  };
-
-  onChange = (evt: SyntheticInputEvent<>) => {
-    const { value } = evt.target;
-    this.setState({
-      value,
-    });
-
-    this.syncChanges();
-  };
-
-  render() {
-    const {
-      editorState,
-      editorRef,
-      stripPastedStyles,
-      customStyleMap,
-      handleReturn,
-      editorKey,
-      ...rest
-    } = this.props;
-    return (
-      <div className="DraftEditor-root">
-        <div className="DraftEditor-editorContainer">
-          <Textarea
-            {...rest}
-            value={this.state.value}
-            onChange={this.onChange}
-            className={'DraftEditor-content ' + (this.props.className || '')}
-            style={{ width: '100%', fontSize: '14px' }}
-            ref={this.props.editorRef}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-class CustomDraftJSPluginsEditor extends React.Component<Props> {
-  render() {
-    if (!isAndroid() || this.props.readOnly)
-      return <DraftEditor {...this.props} ref={this.props.editorRef} />;
-    return <AndroidFallbackInput {...this.props} />;
-  }
-}
-
-export default CustomDraftJSPluginsEditor;
diff --git a/src/components/rich-text-editor/Embed.js b/src/components/rich-text-editor/Embed.js
deleted file mode 100644
index fbe8adb761..0000000000
--- a/src/components/rich-text-editor/Embed.js
+++ /dev/null
@@ -1,159 +0,0 @@
-// Taken from https://github.com/vacenz/last-draft-js-plugins/blob/1a913e15ef5225b8a4e2253b282af3a5c382e7b0/draft-js-embed-plugin/src/embed/index.js
-// slightly adapted to work with arbitrary data passed from the entity
-import { Entity, EditorState, AtomicBlockUtils } from 'draft-js';
-import React, { Component } from 'react';
-import isURL from 'validator/lib/isURL';
-import { AspectRatio, EmbedContainer, EmbedComponent } from './style';
-import {
-  FRAMER_URLS,
-  FIGMA_URLS,
-  IFRAME_TAG,
-  YOUTUBE_URLS,
-  VIMEO_URLS,
-  CODEPEN_URLS,
-  CODESANDBOX_URLS,
-} from '../../helpers/regexps';
-import addProtocolToString from 'shared/normalize-url';
-
-// Taken from https://github.com/vacenz/last-draft-js-plugins/blob/master/draft-js-embed-plugin/src/modifiers/addEmbed.js
-// adapted to pass additional attrs onto the iframe
-export const addEmbed = (editorState, attrs) => {
-  const urlType = 'embed';
-  const entityKey = Entity.create(urlType, 'IMMUTABLE', {
-    src: (attrs && attrs.url) || null,
-    aspectRatio: attrs && attrs.aspectRatio,
-    width: attrs && attrs.width,
-    height: attrs && attrs.height,
-  });
-  const newEditorState = AtomicBlockUtils.insertAtomicBlock(
-    editorState,
-    entityKey,
-    ' '
-  );
-  return EditorState.forceSelection(
-    newEditorState,
-    editorState.getCurrentContent().getSelectionAfter()
-  );
-};
-
-export const parseEmbedUrl = incomingUrl => {
-  const isIframeTag = incomingUrl.match(IFRAME_TAG);
-  if (isIframeTag)
-    return {
-      url: IFRAME_TAG.exec(incomingUrl)[2],
-    };
-
-  const url = addProtocolToString(incomingUrl);
-
-  const isFigmaUrl = url.match(FIGMA_URLS);
-  if (isFigmaUrl)
-    return {
-      url: `https://www.figma.com/embed?embed_host=spectrum&url=${url}`,
-      aspectRatio: '56.25%', // 16:9 aspect ratio
-    };
-
-  const isYouTubeUrl = url.match(YOUTUBE_URLS);
-  if (isYouTubeUrl)
-    return {
-      url: `https://www.youtube.com/embed/${YOUTUBE_URLS.exec(url)[1]}`,
-      aspectRatio: '56.25%', // 16:9 aspect ratio
-    };
-
-  const isVimeoUrl = url.match(VIMEO_URLS);
-  if (isVimeoUrl)
-    return {
-      url: `https://player.vimeo.com/video/${VIMEO_URLS.exec(url)[1]}`,
-      aspectRatio: '56.25%', // 16:9 aspect ratio
-    };
-
-  const isFramerUrl = url.match(FRAMER_URLS);
-  if (isFramerUrl) {
-    return {
-      url,
-      width: 600,
-      height: 800,
-    };
-  }
-
-  const isCodePenUrl = url.match(CODEPEN_URLS);
-  if (isCodePenUrl) {
-    return {
-      url,
-      height: 300,
-    };
-  }
-
-  const isCodeSandboxUrl = url.match(CODESANDBOX_URLS);
-  if (isCodeSandboxUrl) {
-    return {
-      url,
-      height: 500,
-    };
-  }
-
-  if (!isURL(url)) return null;
-
-  return {
-    url,
-  };
-};
-
-export default class Embed extends Component {
-  render() {
-    const { block, theme = {}, ...otherProps } = this.props;
-    // leveraging destructuring to omit certain properties from props
-    const {
-      blockProps, // eslint-disable-line no-unused-vars
-      customStyleMap, // eslint-disable-line no-unused-vars
-      customStyleFn, // eslint-disable-line no-unused-vars
-      decorator, // eslint-disable-line no-unused-vars
-      forceSelection, // eslint-disable-line no-unused-vars
-      offsetKey, // eslint-disable-line no-unused-vars
-      selection, // eslint-disable-line no-unused-vars
-      tree, // eslint-disable-line no-unused-vars
-      contentState,
-      blockStyleFn,
-      ...elementProps
-    } = otherProps;
-    const entity = block.getEntityAt(0);
-    const data = contentState.getEntity(entity).getData();
-    const { aspectRatio, src, width = '100%', height = 200, ...rest } = data;
-
-    if (!src) return null;
-
-    // if an aspect ratio is passed in, we need to use the EmbedComponent which does some trickery with padding to force an aspect ratio. Otherwise we should just use a regular iFrame
-    if (aspectRatio && aspectRatio !== undefined) {
-      return (
-        <AspectRatio ratio={aspectRatio}>
-          <EmbedComponent
-            title={`iframe-${src}`}
-            {...elementProps}
-            width={width}
-            height={height}
-            allowFullScreen={true}
-            frameBorder="0"
-            {...rest}
-            src={src}
-            className={theme.embedStyles.embed}
-          />
-        </AspectRatio>
-      );
-    } else {
-      return (
-        <EmbedContainer>
-          <iframe
-            title={`iframe-${src}`}
-            {...elementProps}
-            width={width}
-            height={height}
-            allowFullScreen={true}
-            frameBorder="0"
-            {...rest}
-            src={src}
-            className={theme.embedStyles.embed}
-          />
-        </EmbedContainer>
-      );
-    }
-  }
-}
diff --git a/src/components/rich-text-editor/Image.js b/src/components/rich-text-editor/Image.js
deleted file mode 100644
index 35a2f38d69..0000000000
--- a/src/components/rich-text-editor/Image.js
+++ /dev/null
@@ -1,63 +0,0 @@
-// @flow
-import theme from 'shared/theme';
-import React from 'react';
-import styled, { css, keyframes } from 'styled-components';
-
-const blinkBorder = keyframes`
-  0% {
-    border-color: transparent;
-  }
-  49% {
-    border-color: transparent;
-  }
-  50% {
-    border-color: black;
-  }
-  100% {
-    border-color: black;
-  }
-`;
-
-export const ImageContainer = styled.div`
-  position: relative;
-  margin: 12px 0;
-  pointer-events: none;
-`;
-
-const Img = styled.img`
-  ${props =>
-    props.active &&
-    css`
-      /* Pretend like there's a cursor next to the image when active */
-      box-shadow: inset -1px 0 0 #000;
-      animation: ${blinkBorder} 1s infinite;
-    `} max-width: 100%;
-`;
-
-type ImageProps = Object;
-
-const Image = (props: ImageProps) => {
-  const {
-    block, // eslint-disable-line no-unused-vars
-    theme, // eslint-disable-line no-unused-vars
-    blockProps, // eslint-disable-line no-unused-vars
-    customStyleMap, // eslint-disable-line no-unused-vars
-    customStyleFn, // eslint-disable-line no-unused-vars
-    decorator, // eslint-disable-line no-unused-vars
-    forceSelection, // eslint-disable-line no-unused-vars
-    offsetKey, // eslint-disable-line no-unused-vars
-    selection, // eslint-disable-line no-unused-vars
-    tree, // eslint-disable-line no-unused-vars
-    contentState, // eslint-disable-line no-unused-vars
-    ...elementProps
-  } = props;
-  const active = props.blockProps.isFocused;
-  const { src, alt } = contentState.getEntity(block.getEntityAt(0)).getData();
-  return (
-    <ImageContainer>
-      <Img src={src} alt={alt} active={active} {...elementProps} />
-    </ImageContainer>
-  );
-};
-
-export default Image;
diff --git a/src/components/rich-text-editor/LanguageSelect.js b/src/components/rich-text-editor/LanguageSelect.js
deleted file mode 100644
index 1aec160c02..0000000000
--- a/src/components/rich-text-editor/LanguageSelect.js
+++ /dev/null
@@ -1,62 +0,0 @@
-// @flow
-import React from 'react';
-import styled from 'styled-components';
-
-type LanguageSelectOptions = {
-  options: Array<{ value: string, label: string }>,
-  onChange: (selectedValue: string) => void,
-  selectedValue: string,
-  selectedLabel: string,
-};
-
-const SwitcherContainer = styled.div`
-  position: absolute;
-  text-align: right;
-  bottom: -28px;
-  right: 0;
-`;
-
-const Switcher = styled.div`
-  display: inline-block;
-  font-family: sans-serif;
-  color: #ccc;
-  letter-spacing: 0.05em;
-  font-size: 12px;
-  padding: 0.3em;
-  cursor: pointer;
-  position: relative;
-`;
-
-const SwitcherSelect = styled.select`
-  position: absolute;
-  top: 0;
-  cursor: pointer;
-  opacity: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-`;
-
-const renderLanguageSelect = ({
-  options,
-  onChange,
-  selectedValue,
-  selectedLabel,
-}: LanguageSelectOptions) => (
-  <SwitcherContainer>
-    <Switcher>
-      <SwitcherSelect value={selectedValue} onChange={onChange}>
-        {options.map(({ label, value }) => (
-          <option key={value} value={value}>
-            {label}
-          </option>
-        ))}
-      </SwitcherSelect>
-      <div>
-        {selectedLabel || 'Select language...'} {String.fromCharCode(9662)}
-      </div>
-    </Switcher>
-  </SwitcherContainer>
-);
-
-export { renderLanguageSelect };
diff --git a/src/components/rich-text-editor/container.js b/src/components/rich-text-editor/container.js
deleted file mode 100644
index c61fc99162..0000000000
--- a/src/components/rich-text-editor/container.js
+++ /dev/null
@@ -1,283 +0,0 @@
-// @flow
-import React from 'react';
-import DraftEditor from '../draft-js-plugins-editor';
-import { composeDecorators } from 'draft-js-plugins-editor';
-import createImagePlugin from 'draft-js-image-plugin';
-import createFocusPlugin from 'draft-js-focus-plugin';
-import createBlockDndPlugin from 'draft-js-drag-n-drop-plugin';
-import createMarkdownPlugin from 'draft-js-markdown-plugin';
-import createEmbedPlugin from 'draft-js-embed-plugin';
-import createLinkifyPlugin from 'draft-js-linkify-plugin';
-import Prism from 'prismjs';
-import 'prismjs/components/prism-java';
-import 'prismjs/components/prism-scala';
-import 'prismjs/components/prism-go';
-import 'prismjs/components/prism-sql';
-import 'prismjs/components/prism-bash';
-import 'prismjs/components/prism-c';
-import 'prismjs/components/prism-cpp';
-import 'prismjs/components/prism-kotlin';
-import 'prismjs/components/prism-perl';
-import 'prismjs/components/prism-ruby';
-import 'prismjs/components/prism-swift';
-import createPrismPlugin from 'draft-js-prism-plugin';
-import createCodeEditorPlugin from 'draft-js-code-editor-plugin';
-import OutsideClickHandler from 'src/components/outsideClickHandler';
-import Icon from 'src/components/icons';
-import { IconButton } from 'src/components/buttons';
-import mentionsDecorator from 'shared/clients/draft-js/mentions-decorator/index.web.js';
-import linksDecorator from 'shared/clients/draft-js/links-decorator/index.web.js';
-import { isAndroid } from 'shared/draft-utils';
-import MediaInput from 'src/components/mediaInput';
-import Image from './Image';
-import Embed, { addEmbed, parseEmbedUrl } from './Embed';
-import { renderLanguageSelect } from './LanguageSelect';
-import SideToolbar from './toolbar';
-import {
-  Wrapper,
-  MediaRow,
-  ComposerBase,
-  Expander,
-  Action,
-  EmbedUI,
-  customStyleMap,
-  customStyleFn,
-} from './style';
-
-type Props = {
-  state: Object,
-  onChange: Function,
-  focus?: boolean,
-  readOnly?: boolean,
-  editorRef?: any => void,
-  placeholder?: string,
-  className?: string,
-  style?: Object,
-  version?: 2,
-  isOpen: boolean,
-};
-
-type State = {
-  plugins: Array<mixed>,
-  addEmbed: (Object, string) => mixed,
-  addImage: (Object, string, ?Object) => mixed,
-  inserting: boolean,
-  embedding: boolean,
-  embedUrl: string,
-};
-
-class Editor extends React.Component<Props, State> {
-  editor: any;
-
-  constructor(props: Props) {
-    super(props);
-
-    const pluginState = this.getPluginState(props);
-
-    this.state = {
-      ...pluginState,
-      inserting: false,
-      embedding: false,
-      embedUrl: '',
-    };
-  }
-
-  componentDidUpdate(prev: Props) {
-    if (prev.readOnly !== this.props.readOnly) {
-      this.setState({
-        ...this.getPluginState(this.props),
-      });
-    }
-  }
-
-  getPluginState = (props: Props) => {
-    const focusPlugin = createFocusPlugin();
-    const dndPlugin = createBlockDndPlugin();
-    const linkifyPlugin = createLinkifyPlugin({
-      target: '_blank',
-    });
-    const embedPlugin = createEmbedPlugin({
-      EmbedComponent: Embed,
-    });
-    const prismPlugin = createPrismPlugin({
-      prism: Prism,
-    });
-    const codePlugin = createCodeEditorPlugin();
-
-    const decorator = composeDecorators(
-      focusPlugin.decorator,
-      dndPlugin.decorator
-    );
-
-    const imagePlugin = createImagePlugin({
-      decorator,
-      imageComponent: Image,
-    });
-
-    return {
-      plugins: [
-        imagePlugin,
-        prismPlugin,
-        embedPlugin,
-        createMarkdownPlugin({
-          renderLanguageSelect: props.readOnly
-            ? () => null
-            : renderLanguageSelect,
-        }),
-        codePlugin,
-        linkifyPlugin,
-        dndPlugin,
-        focusPlugin,
-      ],
-      addImage: imagePlugin.addImage,
-      addEmbed: addEmbed,
-    };
-  };
-
-  changeEmbedUrl = (evt: SyntheticInputEvent<HTMLInputElement>) => {
-    this.setState({
-      embedUrl: evt.target.value,
-    });
-  };
-
-  addEmbed = (evt: ?SyntheticUIEvent<>) => {
-    evt && evt.preventDefault();
-
-    const { state, onChange } = this.props;
-    onChange(this.state.addEmbed(state, parseEmbedUrl(this.state.embedUrl)));
-    this.closeToolbar();
-  };
-
-  addImages = (files: FileList) => {
-    const { addImage } = this.state;
-    const { state, onChange } = this.props;
-    // Add images to editorState
-    // eslint-disable-next-line
-    for (var i = 0, file; (file = files[i]); i++) {
-      onChange(addImage(state, window.URL.createObjectURL(file), { file }));
-    }
-  };
-
-  addImage = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    this.addImages(e.target.files);
-    this.closeToolbar();
-  };
-
-  handleDroppedFiles = (_: any, files: FileList) => {
-    this.addImages(files);
-  };
-
-  toggleToolbarDisplayState = () => {
-    const { inserting } = this.state;
-
-    this.setState({
-      inserting: !inserting,
-      embedding: false,
-    });
-  };
-
-  closeToolbar = () => {
-    this.setState({
-      embedUrl: '',
-      embedding: false,
-      inserting: false,
-    });
-  };
-
-  toggleEmbedInputState = () => {
-    const { embedding } = this.state;
-
-    this.setState({
-      embedding: !embedding,
-      inserting: false,
-    });
-  };
-
-  render() {
-    const {
-      state,
-      onChange,
-      className,
-      style,
-      editorRef,
-      focus,
-      version,
-      placeholder,
-      readOnly,
-      isOpen,
-      ...rest
-    } = this.props;
-    const { embedding, inserting } = this.state;
-
-    return (
-      <ComposerBase
-        data-cy="rich-text-editor"
-        className={`markdown ${className || ''}`}
-        focus={focus}
-        isOpen={isOpen}
-      >
-        <DraftEditor
-          editorState={state}
-          onChange={onChange}
-          plugins={this.state.plugins}
-          handleDroppedFiles={this.handleDroppedFiles}
-          editorRef={editor => {
-            this.editor = editor;
-            if (editorRef) editorRef(editor);
-          }}
-          readOnly={readOnly}
-          placeholder={!readOnly && placeholder}
-          spellCheck={true}
-          autoCapitalize="sentences"
-          autoComplete="on"
-          autoCorrect="on"
-          stripPastedStyles={true}
-          decorators={[mentionsDecorator, linksDecorator]}
-          customStyleMap={customStyleMap}
-          customStyleFn={customStyleFn}
-          {...rest}
-        />
-        {!readOnly && !isAndroid() && (
-          <OutsideClickHandler onOutsideClick={this.closeToolbar}>
-            <SideToolbar editorState={state} editorRef={this.editor}>
-              <Expander inserting={inserting}>
-                <IconButton
-                  glyph={'inserter'}
-                  onClick={this.toggleToolbarDisplayState}
-                />
-                <Action>
-                  <MediaInput
-                    onChange={this.addImage}
-                    multiple
-                    tipLocation={'right'}
-                  />
-                </Action>
-                <Action embedding={embedding}>
-                  <EmbedUI onSubmit={this.addEmbed} embedding={embedding}>
-                    <label htmlFor="embed-input">
-                      <Icon
-                        glyph={'embed'}
-                        tipText={'Embed a URL'}
-                        onClick={this.toggleEmbedInputState}
-                      />
-                      <input
-                        id="embed-input"
-                        type="url"
-                        placeholder="Enter a URL to embed"
-                        value={this.state.embedUrl}
-                        onChange={this.changeEmbedUrl}
-                      />
-                    </label>
-                    <button onClick={this.addEmbed}>Embed</button>
-                  </EmbedUI>
-                </Action>
-              </Expander>
-            </SideToolbar>
-          </OutsideClickHandler>
-        )}
-      </ComposerBase>
-    );
-  }
-}
-
-export default Editor;
diff --git a/src/components/rich-text-editor/index.js b/src/components/rich-text-editor/index.js
deleted file mode 100644
index 264167603c..0000000000
--- a/src/components/rich-text-editor/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-// @flow
-import React from 'react';
-import Loadable from 'react-loadable';
-import { LoadingThreadContent } from '../loading';
-/* prettier-ignore */
-const RichTextEditor = Loadable({
-  loader: () => import('./container'/* webpackChunkName: "RichTextEditor" */),
-  loading: ({ isLoading }) => isLoading && <LoadingThreadContent />,
-});
-
-export default RichTextEditor;
diff --git a/src/components/rich-text-editor/toolbar.js b/src/components/rich-text-editor/toolbar.js
deleted file mode 100644
index cb2d80e135..0000000000
--- a/src/components/rich-text-editor/toolbar.js
+++ /dev/null
@@ -1,103 +0,0 @@
-// @flow
-// This file was copy-and-pasted from the draft-js-side-toolbar-plugin and adapted
-// for our codebase.
-import React from 'react';
-import type { ChildrenArray, Node } from 'react';
-import { findDOMNode } from 'react-dom';
-// $FlowIssue
-import DraftOffsetKey from 'draft-js/lib/DraftOffsetKey';
-import { SideToolbarWrapper } from './style';
-
-type EditorState = Object; // Draft.js editor state
-type EditorRef = any; // A reference to the editor DOM node
-
-type Props = {
-  editorState: EditorState,
-  children: ChildrenArray<Node>,
-  editorRef: EditorRef,
-};
-
-type ToolbarPosition = {
-  top?: number,
-  left?: number,
-};
-
-type State = {
-  position: ?ToolbarPosition,
-};
-
-export default class Toolbar extends React.Component<Props, State> {
-  state = {
-    position: {},
-  };
-
-  componentDidMount() {
-    this.setPosition(this.props.editorState, this.props.editorRef);
-  }
-
-  componentDidUpdate() {
-    this.setPosition(this.props.editorState, this.props.editorRef);
-  }
-
-  setPosition = (editorState: EditorState, editorRef: EditorRef) => {
-    if (!editorRef) return;
-
-    const selection = editorState.getSelection();
-    const currentContent = editorState.getCurrentContent();
-    const currentBlock = currentContent.getBlockForKey(selection.getStartKey());
-    if (!currentBlock) return;
-    const offsetKey = DraftOffsetKey.encode(currentBlock.getKey(), 0, 0);
-    if (!offsetKey) return;
-    // NOTE(@juliankrispel): Need to wait on tick to make sure the DOM node has been create by Draft.js
-    setTimeout(() => {
-      const node = document.querySelectorAll(
-        `[data-offset-key="${offsetKey}"]`
-      )[0];
-      if (!node) return;
-      const top = node.getBoundingClientRect().top;
-      const scrollY =
-        window.scrollY == null ? window.pageYOffset : window.scrollY;
-      let editor;
-      // NOTE(@mxstbr): For some reason this is called directly after you publish
-      // a thread, but then the editor doesn't exist anymore so findDOMNode throws
-      // an error "Cannot find unmounted DOM node".
-      // See https://github.com/withspectrum/spectrum/issues/1636
-      try {
-        editor = findDOMNode(editorRef);
-      } catch (err) {
-        return;
-      }
-      if (!editor || typeof editor.getBoundingClientRect !== 'function') return;
-      const topPosition = top + scrollY;
-      const leftPosition = editor.getBoundingClientRect().left - 48;
-      // If the position hasn't changed, don't re-render
-      if (
-        this.state.position &&
-        topPosition === this.state.position.top &&
-        leftPosition === this.state.position.left
-      )
-        return;
-      this.setState({
-        position: {
-          top: topPosition,
-          left: leftPosition,
-        },
-      });
-    }, 0);
-  };
-
-  render() {
-    const { editorState } = this.props;
-    const { position } = this.state;
-    if (editorState) {
-      // const selection = editorState.getSelection();
-      // const content = editorState.getCurrentContent();
-      // if (!selection.getHasFocus() && !content.hasText()) return null;
-    }
-    return (
-      <SideToolbarWrapper style={position}>
-        {this.props.children}
-      </SideToolbarWrapper>
-    );
-  }
-}

From 243347f04dcccb4694f9993fbb25a4f67f714c2b Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Tue, 12 Feb 2019 16:09:44 +0100
Subject: [PATCH 14/35] Move thread composer inputs to separate component

---
 api/mutations/thread/editThread.js          |   5 +
 src/components/composer/index.js            |  78 ++------------
 src/components/composer/inputs.js           | 106 ++++++++++++++++++++
 src/views/thread/components/threadDetail.js |   2 +-
 4 files changed, 122 insertions(+), 69 deletions(-)
 create mode 100644 src/components/composer/inputs.js

diff --git a/api/mutations/thread/editThread.js b/api/mutations/thread/editThread.js
index 089a34e18d..e4b6ab33ac 100644
--- a/api/mutations/thread/editThread.js
+++ b/api/mutations/thread/editThread.js
@@ -7,6 +7,7 @@ import { getThreads, editThread } from '../../models/thread';
 import { getUserPermissionsInCommunity } from '../../models/usersCommunities';
 import { getUserPermissionsInChannel } from '../../models/usersChannels';
 import { isAuthedResolver as requireAuth } from '../../utils/permissions';
+import processThreadContent from 'shared/draft-utils/process-thread-content';
 import { events } from 'shared/analytics';
 import { trackQueue } from 'shared/bull/queues';
 import {
@@ -83,6 +84,10 @@ export default requireAuth(async (_: any, args: Input, ctx: GraphQLContext) => {
     );
   }
 
+  if (input.content.body) {
+    input.content.body = processThreadContent('TEXT', input.content.body);
+  }
+
   /*
     When threads are sent to the client, all image urls are signed and proxied
     via imgix. If a user edits the thread, we have to restore all image upload
diff --git a/src/components/composer/index.js b/src/components/composer/index.js
index ec1287ad66..fa07819c73 100644
--- a/src/components/composer/index.js
+++ b/src/components/composer/index.js
@@ -65,6 +65,7 @@ import {
 } from './utils';
 import { events, track } from 'src/helpers/analytics';
 import { ESC, ENTER } from 'src/helpers/keycodes';
+import Inputs from './inputs';
 
 type State = {
   title: string,
@@ -655,74 +656,15 @@ class ComposerWithData extends Component<Props, State> {
             )}
           </Dropdowns>
           <ThreadInputs>
-            <SegmentedControl
-              css={{
-                marginRight: 0,
-                marginLeft: 0,
-                marginTop: 0,
-                marginBottom: '32px',
-              }}
-            >
-              <Segment
-                selected={!this.state.preview}
-                onClick={() => this.setState({ preview: false })}
-              >
-                Write
-              </Segment>
-              <Segment
-                selected={this.state.preview}
-                onClick={() => this.setState({ preview: true })}
-              >
-                Preview
-              </Segment>
-            </SegmentedControl>
-            {preview ? (
-              /* $FlowFixMe */
-              <div style={{ padding: '0 32px' }}>
-                <ThreadHeading>{this.state.title}</ThreadHeading>
-                <ThreadRenderer
-                  body={JSON.parse(
-                    processThreadContent('TEXT', this.state.body)
-                  )}
-                />
-              </div>
-            ) : (
-              <Dropzone
-                accept={['image/gif', 'image/jpeg', 'image/png', 'video/mp4']}
-                disableClick
-                multiple={false}
-                onDropAccepted={this.uploadFiles}
-              >
-                {({ getRootProps, getInputProps, isDragActive }) => (
-                  <DropzoneWrapper
-                    {...getRootProps({
-                      refKey: 'innerRef',
-                    })}
-                  >
-                    <input {...getInputProps()} />
-                    <Textarea
-                      data-cy="composer-title-input"
-                      onChange={this.changeTitle}
-                      style={ThreadTitle}
-                      value={this.state.title}
-                      placeholder={'What‘s on your mind?'}
-                      autoFocus={!threadSliderIsOpen}
-                    />
-
-                    <MentionsInput
-                      onChange={this.changeBody}
-                      value={this.state.body}
-                      style={ThreadDescription}
-                      inputRef={editor => (this.bodyEditor = editor)}
-                      placeholder={'Add more thoughts here...'}
-                      className={'threadComposer'}
-                      dataCy="rich-text-editor"
-                    />
-                    <DropImageOverlay visible={isDragActive} />
-                  </DropzoneWrapper>
-                )}
-              </Dropzone>
-            )}
+            <Inputs
+              title={this.state.title}
+              body={this.state.body}
+              changeBody={this.changeBody}
+              changeTitle={this.changeTitle}
+              uploadFiles={this.uploadFiles}
+              autoFocus={!threadSliderIsOpen}
+              bodyRef={ref => (this.bodyEditor = ref)}
+            />
           </ThreadInputs>
 
           {networkDisabled && (
diff --git a/src/components/composer/inputs.js b/src/components/composer/inputs.js
new file mode 100644
index 0000000000..2c74e3b614
--- /dev/null
+++ b/src/components/composer/inputs.js
@@ -0,0 +1,106 @@
+// @flow
+import React from 'react';
+import Textarea from 'react-textarea-autosize';
+import Dropzone from 'react-dropzone';
+import {
+  ThreadInputs,
+  DropzoneWrapper,
+  ThreadTitle,
+  ThreadDescription,
+  DropImageOverlay,
+} from './style';
+import { ThreadHeading } from 'src/views/thread/style';
+import { SegmentedControl, Segment } from 'src/components/segmentedControl';
+import MentionsInput from 'src/components/mentionsInput';
+import ThreadRenderer from '../threadRenderer';
+import processThreadContent from 'shared/draft-utils/process-thread-content';
+
+type Props = {
+  title: string,
+  body: string,
+  changeBody: Function,
+  changeTitle: Function,
+  uploadFiles: Function,
+  autoFocus?: boolean,
+  bodyRef?: Function,
+};
+
+export default (props: Props) => {
+  // $FlowIssue
+  const [showPreview, setShowPreview] = React.useState(false);
+
+  const {
+    title,
+    body,
+    uploadFiles,
+    autoFocus,
+    changeBody,
+    changeTitle,
+    bodyRef,
+  } = props;
+
+  return (
+    <ThreadInputs>
+      <SegmentedControl
+        css={{
+          marginRight: 0,
+          marginLeft: 0,
+          marginTop: 0,
+          marginBottom: '32px',
+        }}
+      >
+        <Segment selected={!showPreview} onClick={() => setShowPreview(false)}>
+          Write
+        </Segment>
+        <Segment selected={showPreview} onClick={() => setShowPreview(true)}>
+          Preview
+        </Segment>
+      </SegmentedControl>
+      {showPreview ? (
+        /* $FlowFixMe */
+        <div style={{ padding: '0 32px' }}>
+          <ThreadHeading>{title}</ThreadHeading>
+          <ThreadRenderer
+            body={JSON.parse(processThreadContent('TEXT', body))}
+          />
+        </div>
+      ) : (
+        <Dropzone
+          accept={['image/gif', 'image/jpeg', 'image/png', 'video/mp4']}
+          disableClick
+          multiple={false}
+          onDropAccepted={uploadFiles}
+        >
+          {({ getRootProps, getInputProps, isDragActive }) => (
+            <DropzoneWrapper
+              {...getRootProps({
+                refKey: 'innerRef',
+              })}
+            >
+              <input {...getInputProps()} />
+              <Textarea
+                data-cy="composer-title-input"
+                onChange={changeTitle}
+                style={ThreadTitle}
+                value={title}
+                placeholder={'What‘s on your mind?'}
+                autoFocus={autoFocus}
+              />
+
+              <MentionsInput
+                onChange={changeBody}
+                value={body}
+                style={ThreadDescription}
+                inputRef={props.bodyRef}
+                placeholder={'Add more thoughts here...'}
+                className={'threadComposer'}
+                dataCy="rich-text-editor"
+              />
+              <DropImageOverlay visible={isDragActive} />
+            </DropzoneWrapper>
+          )}
+        </Dropzone>
+      )}
+    </ThreadInputs>
+  );
+};
diff --git a/src/views/thread/components/threadDetail.js b/src/views/thread/components/threadDetail.js
index b9f5258e8e..05198ca7b1 100644
--- a/src/views/thread/components/threadDetail.js
+++ b/src/views/thread/components/threadDetail.js
@@ -399,7 +399,7 @@ class ThreadDetailPure extends React.Component<Props, State> {
             </Link>
           </ThreadSubtitle>
 
-          <ThreadRenderer body={body} />
+          {isEditing ? <div>Edit</div> : <ThreadRenderer body={body} />}
         </ThreadContent>
 
         <ErrorBoundary fallbackComponent={null}>

From 9cbdc26d6d3743d9b64f188accdc791c9c5be9a2 Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Tue, 12 Feb 2019 16:09:59 +0100
Subject: [PATCH 15/35] Remove console.log

---
 src/components/threadRenderer/index.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/threadRenderer/index.js b/src/components/threadRenderer/index.js
index 06e25bd29d..33f27d14ce 100644
--- a/src/components/threadRenderer/index.js
+++ b/src/components/threadRenderer/index.js
@@ -9,7 +9,6 @@ type Props = {
   body: RawDraftContentState,
 };
 
-export default (props: Props) =>
-  console.log(props.body) || (
-    <div className="markdown">{redraft(props.body, threadRenderer)}</div>
-  );
+export default (props: Props) => (
+  <div className="markdown">{redraft(props.body, threadRenderer)}</div>
+);

From 4ba6a6b561089bd39924f1790d0a3326dfc4426f Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Tue, 12 Feb 2019 17:13:45 +0100
Subject: [PATCH 16/35] Make plaintext thread editing work!!!

---
 src/views/thread/components/threadDetail.js | 151 ++++++++++----------
 1 file changed, 74 insertions(+), 77 deletions(-)

diff --git a/src/views/thread/components/threadDetail.js b/src/views/thread/components/threadDetail.js
index 05198ca7b1..fea8f35dc7 100644
--- a/src/views/thread/components/threadDetail.js
+++ b/src/views/thread/components/threadDetail.js
@@ -4,6 +4,8 @@ import compose from 'recompose/compose';
 import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
+import { convertFromRaw } from 'draft-js';
+import { stateToMarkdown } from 'draft-js-export-markdown';
 import { timeDifference } from 'shared/time-difference';
 import { convertTimestampToDate } from 'shared/time-formatting';
 import { openModal } from 'src/actions/modals';
@@ -19,6 +21,7 @@ import { toJSON, toState } from 'shared/draft-utils';
 import Textarea from 'react-textarea-autosize';
 import ActionBar from './actionBar';
 import ConditionalWrap from 'src/components/conditionalWrap';
+import ThreadEditInputs from 'src/components/composer/inputs';
 import { withCurrentUser } from 'src/components/withCurrentUser';
 import {
   UserHoverProfile,
@@ -39,12 +42,13 @@ import { ErrorBoundary } from 'src/components/error';
 
 type State = {
   isEditing?: boolean,
-  body?: any,
-  title?: string,
+  body: string,
+  title: string,
   receiveNotifications?: boolean,
   isSavingEdit?: boolean,
   flyoutOpen?: ?boolean,
   error?: ?string,
+  parsedBody: ?Object,
   isLockingThread: boolean,
   isPinningThread: boolean,
 };
@@ -65,7 +69,8 @@ class ThreadDetailPure extends React.Component<Props, State> {
     isLockingThread: false,
     isPinningThread: false,
     isEditing: false,
-    body: null,
+    parsedBody: null,
+    body: '',
     title: '',
     receiveNotifications: false,
     isSavingEdit: false,
@@ -89,10 +94,14 @@ class ThreadDetailPure extends React.Component<Props, State> {
       community: transformations.analyticsCommunity(thread.community),
     });
 
+    const parsedBody = JSON.parse(thread.content.body);
+
     return this.setState({
       isEditing: false,
-      body: JSON.parse(thread.content.body),
+      body: stateToMarkdown(convertFromRaw(parsedBody)),
       title: thread.content.title,
+      // We store this in the state to avoid having to JSON.parse on every render
+      parsedBody,
       flyoutOpen: false,
       receiveNotifications: thread.receiveNotifications,
       isSavingEdit: false,
@@ -186,6 +195,9 @@ class ThreadDetailPure extends React.Component<Props, State> {
 
     this.setState({
       isEditing: !isEditing,
+      // Reset body and title state
+      body: stateToMarkdown(convertFromRaw(JSON.parse(thread.content.body))),
+      title: thread.content.title,
     });
 
     if (!isEditing) {
@@ -215,27 +227,14 @@ class ThreadDetailPure extends React.Component<Props, State> {
       isSavingEdit: true,
     });
 
-    const jsonBody = toJSON(body);
-
     const content = {
       title: title.trim(),
-      body: JSON.stringify(jsonBody),
+      body,
     };
 
-    // Get the images
-    const filesToUpload = Object.keys(jsonBody.entityMap)
-      .filter(
-        key =>
-          jsonBody.entityMap[key].type.toLowerCase() === 'image' &&
-          jsonBody.entityMap[key].data.file &&
-          jsonBody.entityMap[key].data.file.constructor === File
-      )
-      .map(key => jsonBody.entityMap[key].data.file);
-
     const input = {
       threadId,
       content,
-      filesToUpload,
     };
 
     editThread(input)
@@ -275,9 +274,9 @@ class ThreadDetailPure extends React.Component<Props, State> {
     });
   };
 
-  changeBody = state => {
+  changeBody = evt => {
     this.setState({
-      body: state,
+      body: evt.target.value,
     });
   };
 
@@ -328,12 +327,6 @@ class ThreadDetailPure extends React.Component<Props, State> {
       isPinningThread,
     } = this.state;
 
-    // if there is no body it means the user is switching threads or the thread
-    // hasnt loaded yet - we need this body for the editor, otherwise the
-    // thread view will crash. If no body exists we return null to wait for
-    // the body to be set in state after the thread loads.
-    if (!body) return null;
-
     const createdAt = new Date(thread.createdAt).getTime();
     const timestamp = convertTimestampToDate(createdAt);
 
@@ -344,62 +337,66 @@ class ThreadDetailPure extends React.Component<Props, State> {
     return (
       <ThreadWrapper innerRef={this.props.innerRef}>
         <ThreadContent isEditing={isEditing}>
-          {/* $FlowFixMe */}
-          <ErrorBoundary fallbackComponent={null}>
-            <ConditionalWrap
-              condition={!!thread.author.user.username}
-              wrap={() => (
-                <UserHoverProfile username={thread.author.user.username}>
-                  <ThreadByline author={thread.author} />
-                </UserHoverProfile>
-              )}
-            >
-              <ThreadByline author={thread.author} />
-            </ConditionalWrap>
-          </ErrorBoundary>
-
           {isEditing ? (
-            <Textarea
-              onChange={this.changeTitle}
-              style={ThreadTitle}
-              value={this.state.title}
-              placeholder={'A title for your thread...'}
-              ref={c => {
-                this.titleTextarea = c;
-              }}
+            <ThreadEditInputs
+              uploadFiles={() => {}}
+              title={this.state.title}
+              body={this.state.body}
               autoFocus
-              data-cy="thread-editor-title-input"
+              bodyRef={ref => (this.bodyEditor = ref)}
+              changeBody={this.changeBody}
+              changeTitle={this.changeTitle}
             />
           ) : (
-            <ThreadHeading>{thread.content.title}</ThreadHeading>
+            <React.Fragment>
+              {/* $FlowFixMe */}
+              <ErrorBoundary fallbackComponent={null}>
+                <ConditionalWrap
+                  condition={!!thread.author.user.username}
+                  wrap={() => (
+                    <UserHoverProfile username={thread.author.user.username}>
+                      <ThreadByline author={thread.author} />
+                    </UserHoverProfile>
+                  )}
+                >
+                  <ThreadByline author={thread.author} />
+                </ConditionalWrap>
+              </ErrorBoundary>
+
+              <ThreadHeading>{thread.content.title}</ThreadHeading>
+
+              <ThreadSubtitle>
+                <CommunityHoverProfile id={thread.community.id}>
+                  <Link to={`/${thread.community.slug}`}>
+                    {thread.community.name}
+                  </Link>
+                </CommunityHoverProfile>
+                <span>&nbsp;/&nbsp;</span>
+                <ChannelHoverProfile id={thread.channel.id}>
+                  <Link to={`/${thread.community.slug}/${thread.channel.slug}`}>
+                    {thread.channel.name}
+                  </Link>
+                </ChannelHoverProfile>
+                <span>&nbsp;·&nbsp;</span>
+                <Link to={'/' + getThreadLink(thread)}>
+                  {timestamp}
+                  {thread.modifiedAt && (
+                    <React.Fragment>
+                      {' '}
+                      (Edited{' '}
+                      {timeDifference(
+                        Date.now(),
+                        editedTimestamp
+                      ).toLowerCase()}
+                      )
+                    </React.Fragment>
+                  )}
+                </Link>
+              </ThreadSubtitle>
+
+              <ThreadRenderer body={JSON.parse(thread.content.body)} />
+            </React.Fragment>
           )}
-
-          <ThreadSubtitle>
-            <CommunityHoverProfile id={thread.community.id}>
-              <Link to={`/${thread.community.slug}`}>
-                {thread.community.name}
-              </Link>
-            </CommunityHoverProfile>
-            <span>&nbsp;/&nbsp;</span>
-            <ChannelHoverProfile id={thread.channel.id}>
-              <Link to={`/${thread.community.slug}/${thread.channel.slug}`}>
-                {thread.channel.name}
-              </Link>
-            </ChannelHoverProfile>
-            <span>&nbsp;·&nbsp;</span>
-            <Link to={'/' + getThreadLink(thread)}>
-              {timestamp}
-              {thread.modifiedAt && (
-                <React.Fragment>
-                  {' '}
-                  (Edited{' '}
-                  {timeDifference(Date.now(), editedTimestamp).toLowerCase()})
-                </React.Fragment>
-              )}
-            </Link>
-          </ThreadSubtitle>
-
-          {isEditing ? <div>Edit</div> : <ThreadRenderer body={body} />}
         </ThreadContent>
 
         <ErrorBoundary fallbackComponent={null}>

From 68c5f4745e52199655a319435209c2d93ab4e7c5 Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Tue, 12 Feb 2019 17:16:44 +0100
Subject: [PATCH 17/35] Remove draftjs CSS

---
 src/reset.css.js | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/reset.css.js b/src/reset.css.js
index d2ce8dc444..d987b31100 100644
--- a/src/reset.css.js
+++ b/src/reset.css.js
@@ -393,15 +393,6 @@ injectGlobal`
   }
 `;
 
-// NOTE(@mxstbr): This is necessary to make sure the placeholder is aligned
-// and stuff like that. We have to import the raw CSS file and inject it with
-// styled-components to make sure it works when we SSR.
-/* eslint-disable import/first */
-/* eslint-disable import/no-webpack-loader-syntax */
-// $FlowIssue
-import draftGlobalCSS from '!!raw-loader!draft-js/dist/Draft.css';
-// $FlowIssue
-injectGlobal`${draftGlobalCSS}`;
 // $FlowIssue
 import prismGlobalCSS from '!!raw-loader!./components/rich-text-editor/prism-theme.css';
 // $FlowIssue

From 4bc03b730287081436df33f5b7341de60fd587af Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Tue, 12 Feb 2019 17:18:56 +0100
Subject: [PATCH 18/35] Remove unnecessary conversion to draftjs for emoji
 messages'

---
 src/components/message/view.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/message/view.js b/src/components/message/view.js
index 7125c5881b..5e0fe53749 100644
--- a/src/components/message/view.js
+++ b/src/components/message/view.js
@@ -11,7 +11,6 @@ import {
   QuotedParagraph,
 } from './style';
 import { messageRenderer } from 'shared/clients/draft-js/message/renderer.web';
-import { toPlainText, toState } from 'shared/draft-utils';
 import { draftOnlyContainsEmoji } from 'shared/only-contains-emoji';
 import { Byline, Name, Username } from './style';
 import { isShort } from 'shared/clients/draft-js/utils/isShort';
@@ -44,6 +43,7 @@ export const Body = (props: BodyProps) => {
       return <Image onClick={openGallery} src={message.content.body} />;
     }
     case 'draftjs': {
+      const parsed = JSON.parse(message.content.body);
       return (
         <WrapperComponent me={me}>
           {message.parent && showParent && (
@@ -52,10 +52,10 @@ export const Body = (props: BodyProps) => {
           )}
           {emojiOnly ? (
             <Emoji>
-              {toPlainText(toState(JSON.parse(message.content.body)))}
+              {parsed && Array.isArray(parsed.blocks) && parsed.blocks[0].text}
             </Emoji>
           ) : (
-            redraft(JSON.parse(message.content.body), messageRenderer)
+            redraft(parsed, messageRenderer)
           )}
         </WrapperComponent>
       );

From 6728ea75afeef0c78654670cd32002475c40c53f Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Tue, 12 Feb 2019 17:32:11 +0100
Subject: [PATCH 19/35] Remove usage of KeyBindingUtil from thread composer

---
 src/components/composer/index.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/composer/index.js b/src/components/composer/index.js
index fa07819c73..338f3643be 100644
--- a/src/components/composer/index.js
+++ b/src/components/composer/index.js
@@ -7,7 +7,6 @@ import { withRouter } from 'react-router';
 import { connect } from 'react-redux';
 import debounce from 'debounce';
 import queryString from 'query-string';
-import { KeyBindingUtil } from 'draft-js';
 import Dropzone from 'react-dropzone';
 import Icon from '../icons';
 import processThreadContent from 'shared/draft-utils/process-thread-content';
@@ -275,8 +274,7 @@ class ComposerWithData extends Component<Props, State> {
 
   handleKeyPress = e => {
     const esc = e.keyCode === ESC;
-    const cmdEnter =
-      e.keyCode === ENTER && KeyBindingUtil.hasCommandModifier(e);
+    const cmdEnter = e.keyCode === ENTER && e.metaKey;
 
     if (esc) {
       // Community/channel view

From 51f3d3a6a4a841b2be20afb8f52a1b7695aa1c78 Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Tue, 12 Feb 2019 17:37:37 +0100
Subject: [PATCH 20/35] Remove unused imports to draft-utils

---
 src/components/message/editingBody.js       | 2 +-
 src/views/thread/components/threadDetail.js | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/message/editingBody.js b/src/components/message/editingBody.js
index c944ac1f14..84672d5303 100644
--- a/src/components/message/editingBody.js
+++ b/src/components/message/editingBody.js
@@ -4,7 +4,7 @@ import { stateToMarkdown } from 'draft-js-export-markdown';
 import type { MessageInfoType } from 'shared/graphql/fragments/message/messageInfo.js';
 import { Input } from '../chatInput/style';
 import { EditorInput, EditActions } from './style';
-import { toPlainText, toState, toJSON } from 'shared/draft-utils';
+import { toState } from 'shared/draft-utils';
 import { TextButton, Button } from 'src/components/buttons';
 import type { Dispatch } from 'redux';
 import { addToastWithTimeout } from 'src/actions/toasts';
diff --git a/src/views/thread/components/threadDetail.js b/src/views/thread/components/threadDetail.js
index fea8f35dc7..1362342aa7 100644
--- a/src/views/thread/components/threadDetail.js
+++ b/src/views/thread/components/threadDetail.js
@@ -17,7 +17,6 @@ import editThreadMutation from 'shared/graphql/mutations/thread/editThread';
 import pinThreadMutation from 'shared/graphql/mutations/community/pinCommunityThread';
 import type { GetThreadType } from 'shared/graphql/queries/thread/getThread';
 import ThreadRenderer from 'src/components/threadRenderer';
-import { toJSON, toState } from 'shared/draft-utils';
 import Textarea from 'react-textarea-autosize';
 import ActionBar from './actionBar';
 import ConditionalWrap from 'src/components/conditionalWrap';

From c4f92cdf0c61841bfb7a2792e6efc9a52b2a8ebf Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Tue, 12 Feb 2019 17:39:14 +0100
Subject: [PATCH 21/35] Remove last usage of draft-utils/index.js in src/

---
 src/components/message/editingBody.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/message/editingBody.js b/src/components/message/editingBody.js
index 84672d5303..2cbbdc4685 100644
--- a/src/components/message/editingBody.js
+++ b/src/components/message/editingBody.js
@@ -1,10 +1,10 @@
 // @flow
 import * as React from 'react';
+import { convertFromRaw } from 'draft-js';
 import { stateToMarkdown } from 'draft-js-export-markdown';
 import type { MessageInfoType } from 'shared/graphql/fragments/message/messageInfo.js';
 import { Input } from '../chatInput/style';
 import { EditorInput, EditActions } from './style';
-import { toState } from 'shared/draft-utils';
 import { TextButton, Button } from 'src/components/buttons';
 import type { Dispatch } from 'redux';
 import { addToastWithTimeout } from 'src/actions/toasts';
@@ -31,7 +31,7 @@ const EditingChatInput = (props: Props) => {
     props.message.messageType === 'text'
       ? props.message.content.body
       : stateToMarkdown(
-          toState(JSON.parse(props.message.content.body)).getCurrentContent(),
+          convertFromRaw(JSON.parse(props.message.content.body)),
           {
             gfm: true,
           }

From 7ab795c4342583820e2133ac51a53e9d299b528c Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Wed, 13 Feb 2019 15:30:18 +0100
Subject: [PATCH 22/35] Add syntax highlighting back

---
 flow-typed/npm/prism-react-renderer_vx.x.x.js | 214 ++++++++++++++++++
 package.json                                  |   1 +
 shared/clients/draft-js/message/types.js      |   1 +
 shared/clients/draft-js/thread/renderer.js    |  43 +++-
 src/reset.css.js                              |  77 +------
 yarn.lock                                     |   5 +
 6 files changed, 266 insertions(+), 75 deletions(-)
 create mode 100644 flow-typed/npm/prism-react-renderer_vx.x.x.js

diff --git a/flow-typed/npm/prism-react-renderer_vx.x.x.js b/flow-typed/npm/prism-react-renderer_vx.x.x.js
new file mode 100644
index 0000000000..b37a4f1ad0
--- /dev/null
+++ b/flow-typed/npm/prism-react-renderer_vx.x.x.js
@@ -0,0 +1,214 @@
+// flow-typed signature: 3987fe684d034fe6822d30ca25b56da6
+// flow-typed version: <<STUB>>/prism-react-renderer_vx.x.x/flow_v0.66.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'prism-react-renderer'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'prism-react-renderer' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'prism-react-renderer/es/components/Highlight' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/es/defaultProps' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/es/index' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/es/types' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/es/utils/normalizeTokens' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/es/utils/themeToDict' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/es/vendor/prism/includeLangs' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/es/vendor/prism/index' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/es/vendor/prism/prism-core' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/lib/components/Highlight' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/lib/defaultProps' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/lib/index' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/lib/types' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/lib/utils/normalizeTokens' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/lib/utils/themeToDict' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/lib/vendor/prism/includeLangs' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/lib/vendor/prism/index' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/lib/vendor/prism/prism-core' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/themes/dracula' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/themes/duotoneDark' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/themes/duotoneLight' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/themes/nightOwl' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/themes/oceanicNext' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/themes/shadesOfPurple' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/themes/ultramin' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/themes/vsDark' {
+  declare module.exports: any;
+}
+
+declare module 'prism-react-renderer/themes/vsDarkPlus' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'prism-react-renderer/es/components/Highlight.js' {
+  declare module.exports: $Exports<'prism-react-renderer/es/components/Highlight'>;
+}
+declare module 'prism-react-renderer/es/defaultProps.js' {
+  declare module.exports: $Exports<'prism-react-renderer/es/defaultProps'>;
+}
+declare module 'prism-react-renderer/es/index.js' {
+  declare module.exports: $Exports<'prism-react-renderer/es/index'>;
+}
+declare module 'prism-react-renderer/es/types.js' {
+  declare module.exports: $Exports<'prism-react-renderer/es/types'>;
+}
+declare module 'prism-react-renderer/es/utils/normalizeTokens.js' {
+  declare module.exports: $Exports<'prism-react-renderer/es/utils/normalizeTokens'>;
+}
+declare module 'prism-react-renderer/es/utils/themeToDict.js' {
+  declare module.exports: $Exports<'prism-react-renderer/es/utils/themeToDict'>;
+}
+declare module 'prism-react-renderer/es/vendor/prism/includeLangs.js' {
+  declare module.exports: $Exports<'prism-react-renderer/es/vendor/prism/includeLangs'>;
+}
+declare module 'prism-react-renderer/es/vendor/prism/index.js' {
+  declare module.exports: $Exports<'prism-react-renderer/es/vendor/prism/index'>;
+}
+declare module 'prism-react-renderer/es/vendor/prism/prism-core.js' {
+  declare module.exports: $Exports<'prism-react-renderer/es/vendor/prism/prism-core'>;
+}
+declare module 'prism-react-renderer/lib/components/Highlight.js' {
+  declare module.exports: $Exports<'prism-react-renderer/lib/components/Highlight'>;
+}
+declare module 'prism-react-renderer/lib/defaultProps.js' {
+  declare module.exports: $Exports<'prism-react-renderer/lib/defaultProps'>;
+}
+declare module 'prism-react-renderer/lib/index.js' {
+  declare module.exports: $Exports<'prism-react-renderer/lib/index'>;
+}
+declare module 'prism-react-renderer/lib/types.js' {
+  declare module.exports: $Exports<'prism-react-renderer/lib/types'>;
+}
+declare module 'prism-react-renderer/lib/utils/normalizeTokens.js' {
+  declare module.exports: $Exports<'prism-react-renderer/lib/utils/normalizeTokens'>;
+}
+declare module 'prism-react-renderer/lib/utils/themeToDict.js' {
+  declare module.exports: $Exports<'prism-react-renderer/lib/utils/themeToDict'>;
+}
+declare module 'prism-react-renderer/lib/vendor/prism/includeLangs.js' {
+  declare module.exports: $Exports<'prism-react-renderer/lib/vendor/prism/includeLangs'>;
+}
+declare module 'prism-react-renderer/lib/vendor/prism/index.js' {
+  declare module.exports: $Exports<'prism-react-renderer/lib/vendor/prism/index'>;
+}
+declare module 'prism-react-renderer/lib/vendor/prism/prism-core.js' {
+  declare module.exports: $Exports<'prism-react-renderer/lib/vendor/prism/prism-core'>;
+}
+declare module 'prism-react-renderer/themes/dracula.js' {
+  declare module.exports: $Exports<'prism-react-renderer/themes/dracula'>;
+}
+declare module 'prism-react-renderer/themes/duotoneDark.js' {
+  declare module.exports: $Exports<'prism-react-renderer/themes/duotoneDark'>;
+}
+declare module 'prism-react-renderer/themes/duotoneLight.js' {
+  declare module.exports: $Exports<'prism-react-renderer/themes/duotoneLight'>;
+}
+declare module 'prism-react-renderer/themes/nightOwl.js' {
+  declare module.exports: $Exports<'prism-react-renderer/themes/nightOwl'>;
+}
+declare module 'prism-react-renderer/themes/oceanicNext.js' {
+  declare module.exports: $Exports<'prism-react-renderer/themes/oceanicNext'>;
+}
+declare module 'prism-react-renderer/themes/shadesOfPurple.js' {
+  declare module.exports: $Exports<'prism-react-renderer/themes/shadesOfPurple'>;
+}
+declare module 'prism-react-renderer/themes/ultramin.js' {
+  declare module.exports: $Exports<'prism-react-renderer/themes/ultramin'>;
+}
+declare module 'prism-react-renderer/themes/vsDark.js' {
+  declare module.exports: $Exports<'prism-react-renderer/themes/vsDark'>;
+}
+declare module 'prism-react-renderer/themes/vsDarkPlus.js' {
+  declare module.exports: $Exports<'prism-react-renderer/themes/vsDarkPlus'>;
+}
diff --git a/package.json b/package.json
index 2f2b5684dd..f952f60342 100644
--- a/package.json
+++ b/package.json
@@ -146,6 +146,7 @@
     "passport-google-oauth2": "^0.1.6",
     "passport-twitter": "^1.0.4",
     "pre-commit": "^1.2.2",
+    "prism-react-renderer": "^0.1.5",
     "prismjs": "^1.15.0",
     "query-string": "5.1.1",
     "raf": "^3.4.0",
diff --git a/shared/clients/draft-js/message/types.js b/shared/clients/draft-js/message/types.js
index f4da3006f4..7e8b0dc017 100644
--- a/shared/clients/draft-js/message/types.js
+++ b/shared/clients/draft-js/message/types.js
@@ -6,6 +6,7 @@ export type KeyObj = {
 
 export type KeysObj = {
   keys: string[],
+  data?: Object,
 };
 
 export type DataObj = {
diff --git a/shared/clients/draft-js/thread/renderer.js b/shared/clients/draft-js/thread/renderer.js
index 35a1396ef1..43b0ed581a 100644
--- a/shared/clients/draft-js/thread/renderer.js
+++ b/shared/clients/draft-js/thread/renderer.js
@@ -1,5 +1,6 @@
 // @flow
 import React from 'react';
+import Highlight, { defaultProps } from 'prism-react-renderer';
 import { Line, Paragraph, BlockQuote } from 'src/components/message/style';
 import {
   AspectRatio,
@@ -59,6 +60,24 @@ const hasStringElements = (arr: Array<mixed> | mixed) => {
   return typeof arr === 'string';
 };
 
+const getStringElements = (arr: Array<mixed>): Array<string> => {
+  return arr
+    .map(elem => {
+      if (Array.isArray(elem)) return getStringElements(elem);
+      if (typeof elem === 'string') return elem;
+      // Handle React elements being passed as array elements
+      // $FlowIssue
+      if (elem.props && elem.props.children)
+        return getStringElements(elem.props.children);
+      return null;
+    })
+    .filter(Boolean)
+    .reduce((final, elem) => {
+      if (Array.isArray(elem)) return [...final, ...elem];
+      return [...final, elem];
+    }, []);
+};
+
 const threadRenderer = {
   inline: {
     BOLD: (children: Array<Node>, { key }: KeyObj) => (
@@ -82,9 +101,27 @@ const threadRenderer = {
 
       return children;
     },
-    'code-block': (children: Array<Node>, { keys }: KeysObj) => (
-      <Line key={keys.join('|')}>{children}</Line>
-    ),
+    'code-block': (children: Array<mixed>, { keys, data }: KeysObj) =>
+      console.log(getStringElements(children)) || (
+        <Highlight
+          {...defaultProps}
+          code={getStringElements(children).join('\n')}
+          language={Array.isArray(data) && data[0].language}
+          theme={undefined}
+        >
+          {({ className, style, tokens, getLineProps, getTokenProps }) => (
+            <Line className={className} style={style}>
+              {tokens.map((line, i) => (
+                <div {...getLineProps({ line, key: i })}>
+                  {line.map((token, key) => (
+                    <span {...getTokenProps({ token, key })} />
+                  ))}
+                </div>
+              ))}
+            </Line>
+          )}
+        </Highlight>
+      ),
     blockquote: (children: Array<Node>, { keys }: KeysObj) =>
       children.map((child, index) => (
         <BlockQuote key={keys[index] || index}>{child}</BlockQuote>
diff --git a/src/reset.css.js b/src/reset.css.js
index d987b31100..7c0d842a41 100644
--- a/src/reset.css.js
+++ b/src/reset.css.js
@@ -1,5 +1,10 @@
 // @flow
 import { injectGlobal } from 'styled-components';
+// $FlowIssue
+import prismGlobalCSS from '!!raw-loader!./components/rich-text-editor/prism-theme.css';
+
+// $FlowIssue
+injectGlobal`${prismGlobalCSS}`;
 
 injectGlobal`
   * {
@@ -324,76 +329,4 @@ injectGlobal`
     text-transform: lowercase;
     font-variant: small-caps;
   }
-
-  .hljs {
-    display: block;
-    background: white;
-    padding: 0.5em;
-    color: #333333;
-    overflow-x: auto;
-  }
-
-  .hljs-comment,
-  .hljs-meta {
-    color: #969896;
-  }
-
-  .hljs-string,
-  .hljs-variable,
-  .hljs-template-variable,
-  .hljs-strong,
-  .hljs-emphasis,
-  .hljs-quote {
-    color: #df5000;
-  }
-
-  .hljs-keyword,
-  .hljs-selector-tag,
-  .hljs-type {
-    color: #a71d5d;
-  }
-
-  .hljs-literal,
-  .hljs-symbol,
-  .hljs-bullet,
-  .hljs-attribute {
-    color: #0086b3;
-  }
-
-  .hljs-section,
-  .hljs-name {
-    color: #63a35c;
-  }
-
-  .hljs-tag {
-    color: #333333;
-  }
-
-  .hljs-title,
-  .hljs-attr,
-  .hljs-selector-id,
-  .hljs-selector-class,
-  .hljs-selector-attr,
-  .hljs-selector-pseudo {
-    color: #795da3;
-  }
-
-  .hljs-addition {
-    color: #55a532;
-    background-color: #eaffea;
-  }
-
-  .hljs-deletion {
-    color: #bd2c00;
-    background-color: #ffecec;
-  }
-
-  .hljs-link {
-    text-decoration: underline;
-  }
 `;
-
-// $FlowIssue
-import prismGlobalCSS from '!!raw-loader!./components/rich-text-editor/prism-theme.css';
-// $FlowIssue
-injectGlobal`${prismGlobalCSS}`;
diff --git a/yarn.lock b/yarn.lock
index 5e6973a3f4..304ba29db7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11498,6 +11498,11 @@ prettyjson@^1.1.2:
     colors "^1.1.2"
     minimist "^1.2.0"
 
+prism-react-renderer@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-0.1.5.tgz#1475ced5cfc7f47b7c1611e1cf649b32df2eb1f2"
+  integrity sha512-OoFeWfTYwXP9bdsJItDKK2hCnGZ78AGHism6up7wzBxBuO/0Hcn3nvA8K2LJOb5UxYjXqMOedNhHQuU7ypDdnw==
+
 prismjs@^1.15.0, prismjs@^1.6.0:
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.15.0.tgz#8801d332e472091ba8def94976c8877ad60398d9"

From c2277d5d683f13d25043b742014e8ea982d58462 Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Mon, 18 Feb 2019 15:16:55 +0100
Subject: [PATCH 23/35] remove console.log

---
 shared/clients/draft-js/thread/renderer.js | 41 +++++++++++-----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/shared/clients/draft-js/thread/renderer.js b/shared/clients/draft-js/thread/renderer.js
index 43b0ed581a..174ccff89f 100644
--- a/shared/clients/draft-js/thread/renderer.js
+++ b/shared/clients/draft-js/thread/renderer.js
@@ -101,27 +101,26 @@ const threadRenderer = {
 
       return children;
     },
-    'code-block': (children: Array<mixed>, { keys, data }: KeysObj) =>
-      console.log(getStringElements(children)) || (
-        <Highlight
-          {...defaultProps}
-          code={getStringElements(children).join('\n')}
-          language={Array.isArray(data) && data[0].language}
-          theme={undefined}
-        >
-          {({ className, style, tokens, getLineProps, getTokenProps }) => (
-            <Line className={className} style={style}>
-              {tokens.map((line, i) => (
-                <div {...getLineProps({ line, key: i })}>
-                  {line.map((token, key) => (
-                    <span {...getTokenProps({ token, key })} />
-                  ))}
-                </div>
-              ))}
-            </Line>
-          )}
-        </Highlight>
-      ),
+    'code-block': (children: Array<mixed>, { keys, data }: KeysObj) => (
+      <Highlight
+        {...defaultProps}
+        code={getStringElements(children).join('\n')}
+        language={Array.isArray(data) && data[0].language}
+        theme={undefined}
+      >
+        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+          <Line className={className} style={style}>
+            {tokens.map((line, i) => (
+              <div {...getLineProps({ line, key: i })}>
+                {line.map((token, key) => (
+                  <span {...getTokenProps({ token, key })} />
+                ))}
+              </div>
+            ))}
+          </Line>
+        )}
+      </Highlight>
+    ),
     blockquote: (children: Array<Node>, { keys }: KeysObj) =>
       children.map((child, index) => (
         <BlockQuote key={keys[index] || index}>{child}</BlockQuote>

From 8ceab44686482dc328870f6734138792846ed947 Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Thu, 21 Feb 2019 11:10:21 +0100
Subject: [PATCH 24/35] Fix old links

---
 shared/clients/draft-js/thread/renderer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/shared/clients/draft-js/thread/renderer.js b/shared/clients/draft-js/thread/renderer.js
index 174ccff89f..b117f63c36 100644
--- a/shared/clients/draft-js/thread/renderer.js
+++ b/shared/clients/draft-js/thread/renderer.js
@@ -148,7 +148,7 @@ const threadRenderer = {
   },
   entities: {
     LINK: (children: Array<Node>, data: DataObj, { key }: KeyObj) => (
-      <a key={key} href={data.url} target="_blank">
+      <a key={key} href={data.url || data.href} target="_blank">
         {children}
       </a>
     ),

From 7f400040543fd0b264b99c80e9a4a0af9e501bb4 Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Thu, 21 Feb 2019 11:13:45 +0100
Subject: [PATCH 25/35] Fix e2e test

---
 cypress/integration/thread/action_bar_spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/thread/action_bar_spec.js b/cypress/integration/thread/action_bar_spec.js
index 643b0bcb26..45a1481b2c 100644
--- a/cypress/integration/thread/action_bar_spec.js
+++ b/cypress/integration/thread/action_bar_spec.js
@@ -189,7 +189,7 @@ describe('action bar renders', () => {
       cy.get('[data-cy="thread-dropdown-edit"]').click();
       cy.get('[data-cy="save-thread-edit-button"]').should('be.visible');
       const title = 'Some new thread';
-      cy.get('[data-cy="rich-text-editor"].markdown').should('be.visible');
+      cy.get('[data-cy="rich-text-editor"]').should('be.visible');
       cy.get('[data-cy="thread-editor-title-input"]')
         .clear()
         .type(title);
@@ -201,7 +201,7 @@ describe('action bar renders', () => {
       cy.get('[data-cy="thread-dropdown-edit"]').click();
       cy.get('[data-cy="save-thread-edit-button"]').should('be.visible');
       const originalTitle = 'The first thread! 🎉';
-      cy.get('[data-cy="rich-text-editor"].markdown').should('be.visible');
+      cy.get('[data-cy="rich-text-editor"]').should('be.visible');
       cy.get('[data-cy="thread-editor-title-input"]')
         .clear()
         .type(originalTitle);

From 138246831537443127adbd6737e036ab1976d950 Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Thu, 21 Feb 2019 11:20:16 +0100
Subject: [PATCH 26/35] Fix flow

---
 shared/clients/draft-js/message/types.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/shared/clients/draft-js/message/types.js b/shared/clients/draft-js/message/types.js
index 7e8b0dc017..9ba5957568 100644
--- a/shared/clients/draft-js/message/types.js
+++ b/shared/clients/draft-js/message/types.js
@@ -10,5 +10,6 @@ export type KeysObj = {
 };
 
 export type DataObj = {
-  url: string,
+  url?: string,
+  href?: string,
 };

From c2de592058edab1cc39eb257d5080e3777d10c46 Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Thu, 21 Feb 2019 14:22:00 +0100
Subject: [PATCH 27/35] Fix data-cy selector in action bar spec

---
 cypress/integration/thread/action_bar_spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/thread/action_bar_spec.js b/cypress/integration/thread/action_bar_spec.js
index 45a1481b2c..c8b1d9d175 100644
--- a/cypress/integration/thread/action_bar_spec.js
+++ b/cypress/integration/thread/action_bar_spec.js
@@ -190,7 +190,7 @@ describe('action bar renders', () => {
       cy.get('[data-cy="save-thread-edit-button"]').should('be.visible');
       const title = 'Some new thread';
       cy.get('[data-cy="rich-text-editor"]').should('be.visible');
-      cy.get('[data-cy="thread-editor-title-input"]')
+      cy.get('[data-cy="composer-title-input"]')
         .clear()
         .type(title);
       cy.get('[data-cy="save-thread-edit-button"]').click();
@@ -202,7 +202,7 @@ describe('action bar renders', () => {
       cy.get('[data-cy="save-thread-edit-button"]').should('be.visible');
       const originalTitle = 'The first thread! 🎉';
       cy.get('[data-cy="rich-text-editor"]').should('be.visible');
-      cy.get('[data-cy="thread-editor-title-input"]')
+      cy.get('[data-cy="composer-title-input"]')
         .clear()
         .type(originalTitle);
       cy.get('[data-cy="save-thread-edit-button"]').click();

From 24255b8b33fa2e4972945ea072b7b3a8523b1604 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Thu, 21 Feb 2019 11:43:50 -0700
Subject: [PATCH 28/35] Polish editor layout in editing mode

---
 src/components/composer/inputs.js           |  7 ++--
 src/components/composer/style.js            | 19 +++++++++--
 src/components/globals/index.js             |  4 +--
 src/components/threadComposer/style.js      |  2 +-
 src/reset.css.js                            |  6 ++++
 src/views/thread/components/threadDetail.js |  2 +-
 src/views/thread/style.js                   | 37 +++++++++++++++++----
 7 files changed, 61 insertions(+), 16 deletions(-)

diff --git a/src/components/composer/inputs.js b/src/components/composer/inputs.js
index 2c74e3b614..5958341890 100644
--- a/src/components/composer/inputs.js
+++ b/src/components/composer/inputs.js
@@ -8,6 +8,7 @@ import {
   ThreadTitle,
   ThreadDescription,
   DropImageOverlay,
+  RenderWrapper,
 } from './style';
 import { ThreadHeading } from 'src/views/thread/style';
 import { SegmentedControl, Segment } from 'src/components/segmentedControl';
@@ -46,7 +47,7 @@ export default (props: Props) => {
           marginRight: 0,
           marginLeft: 0,
           marginTop: 0,
-          marginBottom: '32px',
+          marginBottom: '24px',
         }}
       >
         <Segment selected={!showPreview} onClick={() => setShowPreview(false)}>
@@ -58,12 +59,12 @@ export default (props: Props) => {
       </SegmentedControl>
       {showPreview ? (
         /* $FlowFixMe */
-        <div style={{ padding: '0 32px' }}>
+        <RenderWrapper>
           <ThreadHeading>{title}</ThreadHeading>
           <ThreadRenderer
             body={JSON.parse(processThreadContent('TEXT', body))}
           />
-        </div>
+        </RenderWrapper>
       ) : (
         <Dropzone
           accept={['image/gif', 'image/jpeg', 'image/png', 'video/mp4']}
diff --git a/src/components/composer/style.js b/src/components/composer/style.js
index 0da99dd9bf..51de1ede7f 100644
--- a/src/components/composer/style.js
+++ b/src/components/composer/style.js
@@ -8,6 +8,10 @@ export const DropzoneWrapper = styled.div`
   padding: 0 32px;
   position: relative;
   height: 100%;
+
+  @media (max-width: 768px) {
+    padding: 0 24px;
+  }
 `;
 
 export const DropImageOverlay = (props: { visible: boolean }) => {
@@ -228,7 +232,6 @@ export const OptionalSelector = styled(Selector)`
 export const ThreadInputs = styled(FlexCol)`
   position: relative;
   grid-area: body;
-  overflow-y: scroll;
   padding: 32px;
   padding-top: 8px;
   margin-left: -32px;
@@ -236,6 +239,10 @@ export const ThreadInputs = styled(FlexCol)`
   width: calc(100% + 64px);
   background-color: ${theme.bg.default};
   z-index: ${zIndex.composer};
+
+  @media (max-width: 768px) {
+    padding-top: 0;
+  }
 `;
 
 export const ThreadTitle = {
@@ -261,7 +268,7 @@ export const ThreadDescription = {
   fontWeight: '400',
   width: '100%',
   display: 'inline-block',
-  lineHeight: '1.5',
+  lineHeight: '1.4',
   outline: 'none',
   border: '0',
   boxShadow: 'none',
@@ -286,3 +293,11 @@ export const DisabledWarning = styled.div`
   background: ${props => hexa(props.theme.warn.default, 0.1)};
   color: ${theme.warn.default};
 `;
+
+export const RenderWrapper = styled.div`
+  padding: 0 32px;
+
+  @media (max-width: 768px) {
+    padding: 0 24px;
+  }
+`;
diff --git a/src/components/globals/index.js b/src/components/globals/index.js
index c6e71ddaa0..784272d0e7 100644
--- a/src/components/globals/index.js
+++ b/src/components/globals/index.js
@@ -242,7 +242,7 @@ export const H1 = styled.h1`
   color: ${theme.text.default};
   font-weight: 900;
   font-size: 1.5rem;
-  line-height: 1.25;
+  line-height: 1.3;
   margin: 0;
   padding: 0;
 `;
@@ -252,7 +252,7 @@ export const H2 = styled.h2`
   ${fontStack};
   font-weight: 700;
   font-size: 1.25rem;
-  line-height: 1.25;
+  line-height: 1.3;
   margin: 0;
   padding: 0;
 `;
diff --git a/src/components/threadComposer/style.js b/src/components/threadComposer/style.js
index cd834274bc..3620923787 100644
--- a/src/components/threadComposer/style.js
+++ b/src/components/threadComposer/style.js
@@ -267,7 +267,7 @@ export const ThreadDescription = {
   width: '100%',
   height: 'calc(100% - 132px)',
   display: 'inline-block',
-  lineHeight: '1.5',
+  lineHeight: '1.4',
   padding: '0 24px 24px 24px',
   outline: 'none',
   border: '0',
diff --git a/src/reset.css.js b/src/reset.css.js
index 7c0d842a41..38ed4eb134 100644
--- a/src/reset.css.js
+++ b/src/reset.css.js
@@ -329,4 +329,10 @@ injectGlobal`
     text-transform: lowercase;
     font-variant: small-caps;
   }
+
+  .threadComposer textarea {
+    line-height: 1.5;
+    /* account for bottom save bar when editing */
+    height: calc(100% + 52px)!important;
+  }
 `;
diff --git a/src/views/thread/components/threadDetail.js b/src/views/thread/components/threadDetail.js
index 1362342aa7..ef5576acf6 100644
--- a/src/views/thread/components/threadDetail.js
+++ b/src/views/thread/components/threadDetail.js
@@ -334,7 +334,7 @@ class ThreadDetailPure extends React.Component<Props, State> {
       : null;
 
     return (
-      <ThreadWrapper innerRef={this.props.innerRef}>
+      <ThreadWrapper isEditing={isEditing} innerRef={this.props.innerRef}>
         <ThreadContent isEditing={isEditing}>
           {isEditing ? (
             <ThreadEditInputs
diff --git a/src/views/thread/style.js b/src/views/thread/style.js
index da74186c57..50761c2f6f 100644
--- a/src/views/thread/style.js
+++ b/src/views/thread/style.js
@@ -98,9 +98,13 @@ export const Input = styled(FlexRow)`
 `;
 
 export const Detail = styled(Column)`
-  flex: auto;
+  flex: 1 0 auto;
   margin: 0;
+  height: 100%;
   max-width: 100%;
+  max-height: 100%;
+  position: relative;
+  overflow-y: scroll;
 `;
 
 export const ChatInputWrapper = styled(FlexCol)`
@@ -144,13 +148,33 @@ export const ThreadWrapper = styled(FlexCol)`
   font-size: 16px;
   flex: none;
   min-width: 320px;
+
+  ${props =>
+    props.isEditing &&
+    css`
+      height: 100%;
+      max-height: 100%;
+      position: relative;
+      display: block;
+      overflow: hidden;
+      overflow-y: scroll;
+    `}
 `;
 
 export const ThreadContent = styled.div`
-  padding: ${props => (props.isEditing ? '32px 32px 32px 64px' : '32px')};
+  height: 100%;
+  padding: ${props => (props.isEditing ? '0' : '32px')};
+
+  ${props =>
+    props.isEditing &&
+    css`
+      max-height: calc(100% - 52px);
+      overflow: hidden;
+      overflow-y: scroll;
+    `}
 
   @media (max-width: 1024px) {
-    padding: ${props => (props.isEditing ? '16px 16px 16px 48px' : '16px')};
+    padding: ${props => (props.isEditing ? '0' : '16px')};
   }
 `;
 
@@ -396,7 +420,7 @@ export const ThreadDescription = {
   fontWeight: '500',
   width: '100%',
   display: 'inline-block',
-  lineHeight: '1.5',
+  lineHeight: '1.4',
   padding: '0',
   outline: 'none',
   border: '0',
@@ -603,7 +627,7 @@ export const ActionBarContainer = styled.div`
 
   @media (max-width: 768px) {
     margin: 0;
-    margin-top: 16px;
+    margin-top: 0;
     border-radius: 0;
     border-left: 0;
     border-right: 0;
@@ -618,9 +642,8 @@ export const WatercoolerActionBarContainer = styled(ActionBarContainer)`
 
 export const FixedBottomActionBarContainer = styled(ActionBarContainer)`
   z-index: 1;
-  bottom: 0;
-  position: sticky;
   width: 100%;
+  position: sticky;
 `;
 
 export const FollowButton = styled(Button)`

From 95eb3585450fecaabd849d23f5b8563a55f35d46 Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Fri, 22 Feb 2019 08:59:28 +0100
Subject: [PATCH 29/35] Clean up block rendering

---
 shared/clients/draft-js/thread/renderer.js | 55 ++++++++++++----------
 1 file changed, 30 insertions(+), 25 deletions(-)

diff --git a/shared/clients/draft-js/thread/renderer.js b/shared/clients/draft-js/thread/renderer.js
index b117f63c36..5cafcbaa85 100644
--- a/shared/clients/draft-js/thread/renderer.js
+++ b/shared/clients/draft-js/thread/renderer.js
@@ -96,41 +96,46 @@ const threadRenderer = {
     unstyled: (children: Array<Node>, { keys }: KeysObj) => {
       // If the children are text, render a paragraph
       if (hasStringElements(children)) {
-        return <Paragraph key={keys.join('|')}>{children}</Paragraph>;
+        return children.map((child, index) => (
+          <Paragraph key={keys[index]}>{child}</Paragraph>
+        ));
       }
 
       return children;
     },
-    'code-block': (children: Array<mixed>, { keys, data }: KeysObj) => (
-      <Highlight
-        {...defaultProps}
-        code={getStringElements(children).join('\n')}
-        language={Array.isArray(data) && data[0].language}
-        theme={undefined}
-      >
-        {({ className, style, tokens, getLineProps, getTokenProps }) => (
-          <Line className={className} style={style}>
-            {tokens.map((line, i) => (
-              <div {...getLineProps({ line, key: i })}>
-                {line.map((token, key) => (
-                  <span {...getTokenProps({ token, key })} />
-                ))}
-              </div>
-            ))}
-          </Line>
-        )}
-      </Highlight>
-    ),
+    'code-block': (children: Array<mixed>, { keys, data }: KeysObj) => {
+      return children.map((child, index) => (
+        <Highlight
+          {...defaultProps}
+          code={getStringElements(child).join('\n')}
+          language={Array.isArray(data) && data[0].language}
+          theme={undefined}
+          key={keys[index]}
+        >
+          {({ className, style, tokens, getLineProps, getTokenProps }) => (
+            <Line className={className} style={style}>
+              {tokens.map((line, i) => (
+                <div {...getLineProps({ line, key: i })}>
+                  {line.map((token, key) => (
+                    <span {...getTokenProps({ token, key })} />
+                  ))}
+                </div>
+              ))}
+            </Line>
+          )}
+        </Highlight>
+      ));
+    },
     blockquote: (children: Array<Node>, { keys }: KeysObj) =>
       children.map((child, index) => (
         <BlockQuote key={keys[index] || index}>{child}</BlockQuote>
       )),
-    'header-one': (children: Array<Node>) =>
-      children.map(child => <h1>{child}</h1>),
+    'header-one': (children: Array<Node>, { keys }: KeysObj) =>
+      children.map((child, index) => <h1 key={keys[index]}>{child}</h1>),
     'header-two': (children: Array<Node>) =>
-      children.map(child => <h2>{child}</h2>),
+      children.map((child, index) => <h2 key={keys[index]}>{child}</h2>),
     'header-three': (children: Array<Node>) =>
-      children.map(child => <h3>{child}</h3>),
+      children.map((child, index) => <h3 key={keys[index]}>{child}</h3>),
     'unordered-list-item': (children: Array<Node>, { keys }: KeysObj) => (
       <ul key={keys.join('|')}>
         {children.map((child, index) => (

From 0fa35d2f35c759e8287597b6f1d1681e0505d972 Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Fri, 22 Feb 2019 08:59:28 +0100
Subject: [PATCH 30/35] Clean up block rendering

---
 shared/clients/draft-js/thread/renderer.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/shared/clients/draft-js/thread/renderer.js b/shared/clients/draft-js/thread/renderer.js
index 5cafcbaa85..75362ead5d 100644
--- a/shared/clients/draft-js/thread/renderer.js
+++ b/shared/clients/draft-js/thread/renderer.js
@@ -103,7 +103,7 @@ const threadRenderer = {
 
       return children;
     },
-    'code-block': (children: Array<mixed>, { keys, data }: KeysObj) => {
+    'code-block': (children: Array<any>, { keys, data }: KeysObj) => {
       return children.map((child, index) => (
         <Highlight
           {...defaultProps}
@@ -132,9 +132,9 @@ const threadRenderer = {
       )),
     'header-one': (children: Array<Node>, { keys }: KeysObj) =>
       children.map((child, index) => <h1 key={keys[index]}>{child}</h1>),
-    'header-two': (children: Array<Node>) =>
+    'header-two': (children: Array<Node>, { keys }: KeysObj) =>
       children.map((child, index) => <h2 key={keys[index]}>{child}</h2>),
-    'header-three': (children: Array<Node>) =>
+    'header-three': (children: Array<Node>, { keys }: KeysObj) =>
       children.map((child, index) => <h3 key={keys[index]}>{child}</h3>),
     'unordered-list-item': (children: Array<Node>, { keys }: KeysObj) => (
       <ul key={keys.join('|')}>

From c990991489e2cee372a3c4f4628021cdeb8d817b Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Fri, 22 Feb 2019 09:08:17 +0100
Subject: [PATCH 31/35] Log GraphQL error stack trace in development

---
 api/utils/create-graphql-error-formatter.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/api/utils/create-graphql-error-formatter.js b/api/utils/create-graphql-error-formatter.js
index fd44d47315..6d1bcef947 100644
--- a/api/utils/create-graphql-error-formatter.js
+++ b/api/utils/create-graphql-error-formatter.js
@@ -32,6 +32,10 @@ const errorPath = error => {
 const logGraphQLError = (req, error) => {
   debug('---GraphQL Error---');
   debug(error);
+  error &&
+    error.extensions &&
+    error.extensions.exception &&
+    debug(error.extensions.exception.stacktrace.join('\n'));
   if (req) {
     debug(collectQueries(req.body.query));
     debug('variables', JSON.stringify(req.body.variables || {}));

From 8a1989c6ba76dd97e367e4423f199d8a014bc40a Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Fri, 22 Feb 2019 09:08:41 +0100
Subject: [PATCH 32/35] Fix deleting thread body on edit

---
 api/mutations/thread/editThread.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/api/mutations/thread/editThread.js b/api/mutations/thread/editThread.js
index e4b6ab33ac..fd6630db97 100644
--- a/api/mutations/thread/editThread.js
+++ b/api/mutations/thread/editThread.js
@@ -1,4 +1,5 @@
 // @flow
+const debug = require('debug')('api:mutations:edit-thread');
 import type { GraphQLContext } from '../../';
 import type { EditThreadInput } from '../../models/thread';
 import UserError from '../../utils/UserError';
@@ -84,9 +85,7 @@ export default requireAuth(async (_: any, args: Input, ctx: GraphQLContext) => {
     );
   }
 
-  if (input.content.body) {
-    input.content.body = processThreadContent('TEXT', input.content.body);
-  }
+  input.content.body = processThreadContent('TEXT', input.content.body || '');
 
   /*
     When threads are sent to the client, all image urls are signed and proxied
@@ -135,6 +134,7 @@ export default requireAuth(async (_: any, args: Input, ctx: GraphQLContext) => {
     });
   }
 
+  debug('store new body to database:', initialBody);
   const newInput = Object.assign({}, input, {
     ...input,
     content: {

From 34bd8667913fa82067e117e84c0e848a72c01b47 Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Fri, 22 Feb 2019 09:19:54 +0100
Subject: [PATCH 33/35] Clean up cmd+esc handling

---
 src/components/composer/index.js            | 10 +++++++---
 src/components/composer/inputs.js           |  3 +++
 src/views/thread/components/threadDetail.js |  7 +++++++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/composer/index.js b/src/components/composer/index.js
index 338f3643be..43db6d92da 100644
--- a/src/components/composer/index.js
+++ b/src/components/composer/index.js
@@ -256,12 +256,12 @@ class ComposerWithData extends Component<Props, State> {
     this.handleIncomingProps(this.props);
     track(events.THREAD_CREATED_INITED);
     // $FlowIssue
-    document.addEventListener('keydown', this.handleKeyPress, false);
+    document.addEventListener('keydown', this.handleGlobalKeyPress, false);
   }
 
   componentWillUnmount() {
     // $FlowIssue
-    document.removeEventListener('keydown', this.handleKeyPress, false);
+    document.removeEventListener('keydown', this.handleGlobalKeyPress, false);
     const { postWasPublished } = this.state;
 
     // if a post was published, in this session, clear redux so that the next
@@ -272,7 +272,7 @@ class ComposerWithData extends Component<Props, State> {
     return this.closeComposer();
   }
 
-  handleKeyPress = e => {
+  handleGlobalKeyPress = e => {
     const esc = e.keyCode === ESC;
     const cmdEnter = e.keyCode === ENTER && e.metaKey;
 
@@ -283,7 +283,10 @@ class ComposerWithData extends Component<Props, State> {
       this.activateLastThread();
       return;
     }
+  };
 
+  handleKeyPress = e => {
+    const cmdEnter = e.keyCode === ENTER && e.metaKey;
     if (cmdEnter) return this.publishThread();
   };
 
@@ -662,6 +665,7 @@ class ComposerWithData extends Component<Props, State> {
               uploadFiles={this.uploadFiles}
               autoFocus={!threadSliderIsOpen}
               bodyRef={ref => (this.bodyEditor = ref)}
+              onKeyDown={this.handleKeyPress}
             />
           </ThreadInputs>
 
diff --git a/src/components/composer/inputs.js b/src/components/composer/inputs.js
index 5958341890..1e5bf66d45 100644
--- a/src/components/composer/inputs.js
+++ b/src/components/composer/inputs.js
@@ -24,6 +24,7 @@ type Props = {
   uploadFiles: Function,
   autoFocus?: boolean,
   bodyRef?: Function,
+  onKeyDown?: Function,
 };
 
 export default (props: Props) => {
@@ -38,6 +39,7 @@ export default (props: Props) => {
     changeBody,
     changeTitle,
     bodyRef,
+    onKeyDown,
   } = props;
 
   return (
@@ -96,6 +98,7 @@ export default (props: Props) => {
                 placeholder={'Add more thoughts here...'}
                 className={'threadComposer'}
                 dataCy="rich-text-editor"
+                onKeyDown={onKeyDown}
               />
               <DropImageOverlay visible={isDragActive} />
             </DropzoneWrapper>
diff --git a/src/views/thread/components/threadDetail.js b/src/views/thread/components/threadDetail.js
index ef5576acf6..bcb7d5a0bd 100644
--- a/src/views/thread/components/threadDetail.js
+++ b/src/views/thread/components/threadDetail.js
@@ -36,6 +36,7 @@ import {
 } from '../style';
 import { track, events, transformations } from 'src/helpers/analytics';
 import getThreadLink from 'src/helpers/get-thread-link';
+import { ESC, ENTER } from 'src/helpers/keycodes';
 import type { Dispatch } from 'redux';
 import { ErrorBoundary } from 'src/components/error';
 
@@ -210,6 +211,11 @@ class ThreadDetailPure extends React.Component<Props, State> {
     this.props.toggleEdit();
   };
 
+  handleKeyPress = e => {
+    const cmdEnter = e.keyCode === ENTER && e.metaKey;
+    if (cmdEnter) return this.saveEdit();
+  };
+
   saveEdit = () => {
     const { dispatch, editThread, thread } = this.props;
     const { title, body } = this.state;
@@ -345,6 +351,7 @@ class ThreadDetailPure extends React.Component<Props, State> {
               bodyRef={ref => (this.bodyEditor = ref)}
               changeBody={this.changeBody}
               changeTitle={this.changeTitle}
+              onKeyDown={this.handleKeyPress}
             />
           ) : (
             <React.Fragment>

From 9589812eeb18e41e3f1148d21b4db162f8e2db63 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Fri, 22 Feb 2019 11:48:39 -0700
Subject: [PATCH 34/35] Layout and overflow fixes abound

---
 src/components/composer/index.js         |  23 +++--
 src/components/composer/inputs.js        | 108 ++++++++++++-----------
 src/components/composer/style.js         |  49 +++++-----
 src/components/segmentedControl/index.js |   8 +-
 4 files changed, 96 insertions(+), 92 deletions(-)

diff --git a/src/components/composer/index.js b/src/components/composer/index.js
index 43db6d92da..6a14cd1f60 100644
--- a/src/components/composer/index.js
+++ b/src/components/composer/index.js
@@ -656,18 +656,17 @@ class ComposerWithData extends Component<Props, State> {
               </RequiredSelector>
             )}
           </Dropdowns>
-          <ThreadInputs>
-            <Inputs
-              title={this.state.title}
-              body={this.state.body}
-              changeBody={this.changeBody}
-              changeTitle={this.changeTitle}
-              uploadFiles={this.uploadFiles}
-              autoFocus={!threadSliderIsOpen}
-              bodyRef={ref => (this.bodyEditor = ref)}
-              onKeyDown={this.handleKeyPress}
-            />
-          </ThreadInputs>
+
+          <Inputs
+            title={this.state.title}
+            body={this.state.body}
+            changeBody={this.changeBody}
+            changeTitle={this.changeTitle}
+            uploadFiles={this.uploadFiles}
+            autoFocus={!threadSliderIsOpen}
+            bodyRef={ref => (this.bodyEditor = ref)}
+            onKeyDown={this.handleKeyPress}
+          />
 
           {networkDisabled && (
             <DisabledWarning>
diff --git a/src/components/composer/inputs.js b/src/components/composer/inputs.js
index 1e5bf66d45..111fe655e7 100644
--- a/src/components/composer/inputs.js
+++ b/src/components/composer/inputs.js
@@ -9,6 +9,7 @@ import {
   ThreadDescription,
   DropImageOverlay,
   RenderWrapper,
+  InputsGrid,
 } from './style';
 import { ThreadHeading } from 'src/views/thread/style';
 import { SegmentedControl, Segment } from 'src/components/segmentedControl';
@@ -43,13 +44,16 @@ export default (props: Props) => {
   } = props;
 
   return (
-    <ThreadInputs>
+    <InputsGrid>
       <SegmentedControl
         css={{
-          marginRight: 0,
-          marginLeft: 0,
-          marginTop: 0,
-          marginBottom: '24px',
+          margin: '0',
+          position: 'sticky',
+          top: '0',
+          left: '0',
+          right: '0',
+          zIndex: '9999',
+          background: '#FFF',
         }}
       >
         <Segment selected={!showPreview} onClick={() => setShowPreview(false)}>
@@ -59,52 +63,54 @@ export default (props: Props) => {
           Preview
         </Segment>
       </SegmentedControl>
-      {showPreview ? (
-        /* $FlowFixMe */
-        <RenderWrapper>
-          <ThreadHeading>{title}</ThreadHeading>
-          <ThreadRenderer
-            body={JSON.parse(processThreadContent('TEXT', body))}
-          />
-        </RenderWrapper>
-      ) : (
-        <Dropzone
-          accept={['image/gif', 'image/jpeg', 'image/png', 'video/mp4']}
-          disableClick
-          multiple={false}
-          onDropAccepted={uploadFiles}
-        >
-          {({ getRootProps, getInputProps, isDragActive }) => (
-            <DropzoneWrapper
-              {...getRootProps({
-                refKey: 'innerRef',
-              })}
-            >
-              <input {...getInputProps()} />
-              <Textarea
-                data-cy="composer-title-input"
-                onChange={changeTitle}
-                style={ThreadTitle}
-                value={title}
-                placeholder={'What‘s on your mind?'}
-                autoFocus={autoFocus}
-              />
+      <ThreadInputs>
+        {showPreview ? (
+          /* $FlowFixMe */
+          <RenderWrapper>
+            <ThreadHeading>{title}</ThreadHeading>
+            <ThreadRenderer
+              body={JSON.parse(processThreadContent('TEXT', body))}
+            />
+          </RenderWrapper>
+        ) : (
+          <Dropzone
+            accept={['image/gif', 'image/jpeg', 'image/png', 'video/mp4']}
+            disableClick
+            multiple={false}
+            onDropAccepted={uploadFiles}
+          >
+            {({ getRootProps, getInputProps, isDragActive }) => (
+              <DropzoneWrapper
+                {...getRootProps({
+                  refKey: 'innerRef',
+                })}
+              >
+                <input {...getInputProps()} />
+                <Textarea
+                  data-cy="composer-title-input"
+                  onChange={changeTitle}
+                  style={ThreadTitle}
+                  value={title}
+                  placeholder={'What‘s on your mind?'}
+                  autoFocus={autoFocus}
+                />
 
-              <MentionsInput
-                onChange={changeBody}
-                value={body}
-                style={ThreadDescription}
-                inputRef={props.bodyRef}
-                placeholder={'Add more thoughts here...'}
-                className={'threadComposer'}
-                dataCy="rich-text-editor"
-                onKeyDown={onKeyDown}
-              />
-              <DropImageOverlay visible={isDragActive} />
-            </DropzoneWrapper>
-          )}
-        </Dropzone>
-      )}
-    </ThreadInputs>
+                <MentionsInput
+                  onChange={changeBody}
+                  value={body}
+                  style={ThreadDescription}
+                  inputRef={props.bodyRef}
+                  placeholder={'Add more thoughts here...'}
+                  className={'threadComposer'}
+                  dataCy="rich-text-editor"
+                  onKeyDown={onKeyDown}
+                />
+                <DropImageOverlay visible={isDragActive} />
+              </DropzoneWrapper>
+            )}
+          </Dropzone>
+        )}
+      </ThreadInputs>
+    </InputsGrid>
   );
 };
diff --git a/src/components/composer/style.js b/src/components/composer/style.js
index 51de1ede7f..aed129bf66 100644
--- a/src/components/composer/style.js
+++ b/src/components/composer/style.js
@@ -5,13 +5,12 @@ import Icon from '../icons';
 import { hexa, Shadow, FlexRow, FlexCol, zIndex, Tooltip } from '../globals';
 
 export const DropzoneWrapper = styled.div`
-  padding: 0 32px;
-  position: relative;
+  position: sticky;
   height: 100%;
-
-  @media (max-width: 768px) {
-    padding: 0 24px;
-  }
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom 0;
 `;
 
 export const DropImageOverlay = (props: { visible: boolean }) => {
@@ -25,10 +24,10 @@ export const DropImageOverlay = (props: { visible: boolean }) => {
 
 export const DropImageOverlayWrapper = styled.div`
   position: absolute;
-  top: 0;
-  left: 16px;
-  right: 16px;
+  top: -32px;
   bottom: 0;
+  left: -32px;
+  right: -32px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -99,6 +98,8 @@ export const Container = styled(FlexCol)`
   flex: auto;
   overflow: hidden;
   height: ${props => (props.isSlider ? '100vh' : 'calc(100vh - 48px)')};
+  position: relative;
+  z-index: ${zIndex.composer};
 
   @media (max-width: 768px) {
     grid-template-rows: 48px 64px 1fr 64px;
@@ -125,7 +126,7 @@ export const ButtonRow = styled(FlexRow)`
 export const Actions = styled(FlexCol)`
   background: ${theme.bg.wash};
   border-top: 2px solid ${theme.bg.border};
-  padding: 8px 32px 8px 16px;
+  padding: 8px 16px;
   border-radius: 0;
   align-self: stretch;
   display: flex;
@@ -134,15 +135,14 @@ export const Actions = styled(FlexCol)`
   align-items: center;
   position: relative;
   grid-area: footer;
-  z-index: ${zIndex.composer};
 
   @media (max-width: 768px) {
     padding: 8px;
     z-index: ${zIndex.chrome + 1};
     border-radius: 0;
     border: 0;
-    box-shadow: none;
-    background-color: transparent;
+    background: ${theme.bg.wash};
+    border-top: 1px solid ${theme.bg.border};
 
     > ${ButtonRow} {
       width: 100%;
@@ -170,7 +170,7 @@ export const Dropdowns = styled(FlexRow)`
   grid-area: header;
   background-color: ${theme.bg.wash};
   box-shadow: ${Shadow.low} ${props => hexa(props.theme.bg.reverse, 0.15)};
-  z-index: ${zIndex.composer};
+  z-index: 9999;
   grid-area: header;
 
   span {
@@ -231,17 +231,14 @@ export const OptionalSelector = styled(Selector)`
 
 export const ThreadInputs = styled(FlexCol)`
   position: relative;
-  grid-area: body;
   padding: 32px;
-  padding-top: 8px;
-  margin-left: -32px;
-  margin-right: -32px;
-  width: calc(100% + 64px);
+  padding-bottom: 0;
   background-color: ${theme.bg.default};
   z-index: ${zIndex.composer};
+  height: 100%;
 
   @media (max-width: 768px) {
-    padding-top: 0;
+    padding: 24px;
   }
 `;
 
@@ -294,10 +291,12 @@ export const DisabledWarning = styled.div`
   color: ${theme.warn.default};
 `;
 
-export const RenderWrapper = styled.div`
-  padding: 0 32px;
+export const RenderWrapper = styled.div``;
 
-  @media (max-width: 768px) {
-    padding: 0 24px;
-  }
+export const InputsGrid = styled.div`
+  display: grid;
+  grid-template-rows: 48px 1fr;
+  grid-area: body;
+  overflow: hidden;
+  overflow-y: scroll;
 `;
diff --git a/src/components/segmentedControl/index.js b/src/components/segmentedControl/index.js
index f3cd08e993..caa4a0667c 100644
--- a/src/components/segmentedControl/index.js
+++ b/src/components/segmentedControl/index.js
@@ -7,7 +7,7 @@ export const SegmentedControl = styled(FlexRow)`
   align-self: stretch;
   margin: 0 32px;
   margin-top: 16px;
-  border-bottom: 2px solid ${theme.bg.border};
+  border-bottom: 1px solid ${theme.bg.border};
   align-items: stretch;
   min-height: 48px;
   ${props => props.css};
@@ -34,8 +34,8 @@ export const Segment = styled(FlexRow)`
     props.selected ? props.theme.text.default : props.theme.text.alt};
   cursor: pointer;
   position: relative;
-  top: 2px;
-  border-bottom: 2px solid
+  top: 1px;
+  border-bottom: 1px solid
     ${props => (props.selected ? props.theme.text.default : 'transparent')};
 
   .icon {
@@ -45,7 +45,7 @@ export const Segment = styled(FlexRow)`
   ${props =>
     props.selected &&
     css`
-      border-bottom: 2px solid ${theme.bg.reverse};
+      border-bottom: 1px solid ${theme.bg.reverse};
     `};
 
   &:hover {

From 36a0f966fe0b29aaaa4371e773dc778852723747 Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Mon, 25 Feb 2019 09:03:47 +0100
Subject: [PATCH 35/35] Show fenced code blocks on thread edit

---
 src/views/thread/components/threadDetail.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/views/thread/components/threadDetail.js b/src/views/thread/components/threadDetail.js
index bcb7d5a0bd..c2bf589634 100644
--- a/src/views/thread/components/threadDetail.js
+++ b/src/views/thread/components/threadDetail.js
@@ -98,7 +98,9 @@ class ThreadDetailPure extends React.Component<Props, State> {
 
     return this.setState({
       isEditing: false,
-      body: stateToMarkdown(convertFromRaw(parsedBody)),
+      body: stateToMarkdown(convertFromRaw(parsedBody), {
+        gfm: true,
+      }),
       title: thread.content.title,
       // We store this in the state to avoid having to JSON.parse on every render
       parsedBody,
@@ -196,7 +198,9 @@ class ThreadDetailPure extends React.Component<Props, State> {
     this.setState({
       isEditing: !isEditing,
       // Reset body and title state
-      body: stateToMarkdown(convertFromRaw(JSON.parse(thread.content.body))),
+      body: stateToMarkdown(convertFromRaw(JSON.parse(thread.content.body)), {
+        gfm: true,
+      }),
       title: thread.content.title,
     });