diff --git a/api/mutations/thread/editThread.js b/api/mutations/thread/editThread.js
index 089a34e18d..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';
@@ -7,6 +8,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 +85,8 @@ export default requireAuth(async (_: any, args: Input, ctx: GraphQLContext) => {
     );
   }
 
+  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
@@ -130,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: {
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 || {}));
diff --git a/cypress/integration/thread/action_bar_spec.js b/cypress/integration/thread/action_bar_spec.js
index 643b0bcb26..c8b1d9d175 100644
--- a/cypress/integration/thread/action_bar_spec.js
+++ b/cypress/integration/thread/action_bar_spec.js
@@ -189,8 +189,8 @@ 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="thread-editor-title-input"]')
+      cy.get('[data-cy="rich-text-editor"]').should('be.visible');
+      cy.get('[data-cy="composer-title-input"]')
         .clear()
         .type(title);
       cy.get('[data-cy="save-thread-edit-button"]').click();
@@ -201,8 +201,8 @@ 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="thread-editor-title-input"]')
+      cy.get('[data-cy="rich-text-editor"]').should('be.visible');
+      cy.get('[data-cy="composer-title-input"]')
         .clear()
         .type(originalTitle);
       cy.get('[data-cy="save-thread-edit-button"]').click();
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 4324d02a86..9f5ac9c709 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..9ba5957568 100644
--- a/shared/clients/draft-js/message/types.js
+++ b/shared/clients/draft-js/message/types.js
@@ -6,8 +6,10 @@ export type KeyObj = {
 
 export type KeysObj = {
   keys: string[],
+  data?: Object,
 };
 
 export type DataObj = {
-  url: string,
+  url?: string,
+  href?: string,
 };
diff --git a/shared/clients/draft-js/thread/renderer.js b/shared/clients/draft-js/thread/renderer.js
new file mode 100644
index 0000000000..75362ead5d
--- /dev/null
+++ b/shared/clients/draft-js/thread/renderer.js
@@ -0,0 +1,172 @@
+// @flow
+import React from 'react';
+import Highlight, { defaultProps } from 'prism-react-renderer';
+import { Line, Paragraph, BlockQuote } from 'src/components/message/style';
+import {
+  AspectRatio,
+  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';
+
+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 hasStringElements = (arr: Array<mixed> | mixed) => {
+  if (Array.isArray(arr)) return arr.some(elem => hasStringElements(elem));
+
+  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) => (
+      <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) => {
+      // If the children are text, render a paragraph
+      if (hasStringElements(children)) {
+        return children.map((child, index) => (
+          <Paragraph key={keys[index]}>{child}</Paragraph>
+        ));
+      }
+
+      return children;
+    },
+    'code-block': (children: Array<any>, { 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>, { keys }: KeysObj) =>
+      children.map((child, index) => <h1 key={keys[index]}>{child}</h1>),
+    'header-two': (children: Array<Node>, { keys }: KeysObj) =>
+      children.map((child, index) => <h2 key={keys[index]}>{child}</h2>),
+    '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('|')}>
+        {children.map((child, index) => (
+          <li key={keys[index]}>{child}</li>
+        ))}
+      </ul>
+    ),
+    'ordered-list-item': (children: Array<Node>, { keys }: KeysObj) => (
+      <ol key={keys.join('|')}>
+        {children.map((child, index) => (
+          <li key={keys[index]}>{child}</li>
+        ))}
+      </ol>
+    ),
+  },
+  entities: {
+    LINK: (children: Array<Node>, data: DataObj, { key }: KeyObj) => (
+      <a key={key} href={data.url || data.href} target="_blank">
+        {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} />
+    ),
+  },
+  decorators: [mentionsDecorator, linksDecorator],
+};
+
+export default threadRenderer;
diff --git a/src/components/composer/index.js b/src/components/composer/index.js
index 76ca385564..6a14cd1f60 100644
--- a/src/components/composer/index.js
+++ b/src/components/composer/index.js
@@ -7,14 +7,12 @@ 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';
 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';
@@ -66,26 +64,7 @@ import {
 } from './utils';
 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"
-    />
-  );
-};
+import Inputs from './inputs';
 
 type State = {
   title: string,
@@ -277,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
@@ -293,10 +272,9 @@ class ComposerWithData extends Component<Props, State> {
     return this.closeComposer();
   }
 
-  handleKeyPress = e => {
+  handleGlobalKeyPress = 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
@@ -305,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();
   };
 
@@ -675,77 +656,17 @@ class ComposerWithData extends Component<Props, State> {
               </RequiredSelector>
             )}
           </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>
-                {/* $FlowFixMe */}
-                <PreviewEditor
-                  state={toState(
-                    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>
-            )}
-          </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
new file mode 100644
index 0000000000..111fe655e7
--- /dev/null
+++ b/src/components/composer/inputs.js
@@ -0,0 +1,116 @@
+// @flow
+import React from 'react';
+import Textarea from 'react-textarea-autosize';
+import Dropzone from 'react-dropzone';
+import {
+  ThreadInputs,
+  DropzoneWrapper,
+  ThreadTitle,
+  ThreadDescription,
+  DropImageOverlay,
+  RenderWrapper,
+  InputsGrid,
+} 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,
+  onKeyDown?: Function,
+};
+
+export default (props: Props) => {
+  // $FlowIssue
+  const [showPreview, setShowPreview] = React.useState(false);
+
+  const {
+    title,
+    body,
+    uploadFiles,
+    autoFocus,
+    changeBody,
+    changeTitle,
+    bodyRef,
+    onKeyDown,
+  } = props;
+
+  return (
+    <InputsGrid>
+      <SegmentedControl
+        css={{
+          margin: '0',
+          position: 'sticky',
+          top: '0',
+          left: '0',
+          right: '0',
+          zIndex: '9999',
+          background: '#FFF',
+        }}
+      >
+        <Segment selected={!showPreview} onClick={() => setShowPreview(false)}>
+          Write
+        </Segment>
+        <Segment selected={showPreview} onClick={() => setShowPreview(true)}>
+          Preview
+        </Segment>
+      </SegmentedControl>
+      <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>
+    </InputsGrid>
+  );
+};
diff --git a/src/components/composer/style.js b/src/components/composer/style.js
index 0da99dd9bf..aed129bf66 100644
--- a/src/components/composer/style.js
+++ b/src/components/composer/style.js
@@ -5,9 +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%;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom 0;
 `;
 
 export const DropImageOverlay = (props: { visible: boolean }) => {
@@ -21,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;
@@ -95,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;
@@ -121,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;
@@ -130,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%;
@@ -166,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 {
@@ -227,15 +231,15 @@ 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;
-  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: 24px;
+  }
 `;
 
 export const ThreadTitle = {
@@ -261,7 +265,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 +290,13 @@ export const DisabledWarning = styled.div`
   background: ${props => hexa(props.theme.warn.default, 0.1)};
   color: ${theme.warn.default};
 `;
+
+export const RenderWrapper = styled.div``;
+
+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/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/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/message/editingBody.js b/src/components/message/editingBody.js
index 79304ee823..6e6ce73a4b 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 { toPlainText, toState, toJSON } 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,
           }
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>
       );
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>
-    );
-  }
-}
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 {
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/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>
+);
diff --git a/src/reset.css.js b/src/reset.css.js
index 7d0d223501..38ed4eb134 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`
   * {
@@ -226,6 +231,8 @@ injectGlobal`
   .markdown pre {
     margin: 16px 0;
     display: block;
+    border-radius: 4px;
+    background-color: #f5f8fc;
   }
 
   .markdown pre code {
@@ -233,6 +240,9 @@ injectGlobal`
     display: block;
     white-space: pre-wrap;
     position: relative;
+    margin: 0;
+    border: none;
+    background: none;
   }
 
   .markdown div[data-block='true'] {
@@ -320,84 +330,9 @@ injectGlobal`
     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;
+  .threadComposer textarea {
+    line-height: 1.5;
+    /* account for bottom save bar when editing */
+    height: calc(100% + 52px)!important;
   }
 `;
-
-// 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
-injectGlobal`${prismGlobalCSS}`;
diff --git a/src/views/thread/components/threadDetail.js b/src/views/thread/components/threadDetail.js
index 211fdec7d8..c2bf589634 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';
@@ -14,11 +16,11 @@ 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 { toJSON, toState } from 'shared/draft-utils';
+import ThreadRenderer from 'src/components/threadRenderer';
 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,
@@ -34,17 +36,19 @@ 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';
 
 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,16 @@ 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: toState(JSON.parse(thread.content.body)),
+      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,
       flyoutOpen: false,
       receiveNotifications: thread.receiveNotifications,
       isSavingEdit: false,
@@ -186,6 +197,11 @@ class ThreadDetailPure extends React.Component<Props, State> {
 
     this.setState({
       isEditing: !isEditing,
+      // Reset body and title state
+      body: stateToMarkdown(convertFromRaw(JSON.parse(thread.content.body)), {
+        gfm: true,
+      }),
+      title: thread.content.title,
     });
 
     if (!isEditing) {
@@ -199,6 +215,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;
@@ -215,27 +236,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 +283,9 @@ class ThreadDetailPure extends React.Component<Props, State> {
     });
   };
 
-  changeBody = state => {
+  changeBody = evt => {
     this.setState({
-      body: state,
+      body: evt.target.value,
     });
   };
 
@@ -328,12 +336,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);
 
@@ -342,73 +344,69 @@ class ThreadDetailPure extends React.Component<Props, State> {
       : null;
 
     return (
-      <ThreadWrapper innerRef={this.props.innerRef}>
+      <ThreadWrapper isEditing={isEditing} 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}
+              onKeyDown={this.handleKeyPress}
             />
           ) : (
-            <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>
-
-          {/* $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}
-          />
         </ThreadContent>
 
         <ErrorBoundary fallbackComponent={null}>
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)`
diff --git a/yarn.lock b/yarn.lock
index 16831cbdad..63588fb766 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11493,6 +11493,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"