diff --git a/api/mutations/directMessageThread/createDirectMessageThread.js b/api/mutations/directMessageThread/createDirectMessageThread.js
index 4b39981dcd..ab05c7710a 100644
--- a/api/mutations/directMessageThread/createDirectMessageThread.js
+++ b/api/mutations/directMessageThread/createDirectMessageThread.js
@@ -17,8 +17,8 @@ import type { FileUpload } from 'shared/types';
 import { events } from 'shared/analytics';
 import { trackQueue } from 'shared/bull/queues';
 import { isAuthedResolver as requireAuth } from '../../utils/permissions';
-import { messageTypeObj } from 'shared/draft-utils/process-message-content';
-import type { MessageType } from 'shared/draft-utils/process-message-content';
+import { messageTypeObj } from 'shared/draft-utils/message-types';
+import type { MessageType } from 'shared/draft-utils/message-types';
 
 export type CreateDirectMessageThreadInput = {
   input: {
diff --git a/api/mutations/message/addMessage.js b/api/mutations/message/addMessage.js
index 70fa21401c..e0d6030c68 100644
--- a/api/mutations/message/addMessage.js
+++ b/api/mutations/message/addMessage.js
@@ -22,7 +22,7 @@ import { validateRawContentState } from '../../utils/validate-draft-js-input';
 import processMessageContent, {
   messageTypeObj,
 } from 'shared/draft-utils/process-message-content';
-import type { MessageType } from 'shared/draft-utils/process-message-content';
+import type { MessageType } from 'shared/draft-utils/message-types';
 
 type Input = {
   message: {
diff --git a/api/mutations/message/editMessage.js b/api/mutations/message/editMessage.js
index 9303a7d1a9..c7aa471493 100644
--- a/api/mutations/message/editMessage.js
+++ b/api/mutations/message/editMessage.js
@@ -19,7 +19,7 @@ import { validateRawContentState } from '../../utils/validate-draft-js-input';
 import processMessageContent, {
   messageTypeObj,
 } from 'shared/draft-utils/process-message-content';
-import type { MessageType } from 'shared/draft-utils/process-message-content';
+import type { MessageType } from 'shared/draft-utils/message-types';
 
 type Args = {
   input: {
diff --git a/api/queries/thread/channel.js b/api/queries/thread/channel.js
index 16d7013ce4..12fb461368 100644
--- a/api/queries/thread/channel.js
+++ b/api/queries/thread/channel.js
@@ -2,5 +2,16 @@
 import type { GraphQLContext } from '../../';
 import type { DBThread } from 'shared/types';
 
-export default ({ channelId }: DBThread, _: any, { loaders }: GraphQLContext) =>
-  loaders.channel.load(channelId);
+export default async (root: DBThread, _: any, ctx: GraphQLContext) => {
+  const { channelId, id } = root;
+  const { loaders } = ctx;
+  const channel = await loaders.channel.load(channelId);
+  if (!channel) {
+    console.error(
+      'User queried thread of non-existent/deleted channel: ',
+      channelId
+    );
+    console.error('Thread queried: ', id);
+  }
+  return channel;
+};
diff --git a/api/queries/thread/community.js b/api/queries/thread/community.js
index 03eda41434..758156671d 100644
--- a/api/queries/thread/community.js
+++ b/api/queries/thread/community.js
@@ -2,8 +2,16 @@
 import type { GraphQLContext } from '../../';
 import type { DBThread } from 'shared/types';
 
-export default (
-  { communityId }: DBThread,
-  _: any,
-  { loaders }: GraphQLContext
-) => loaders.community.load(communityId);
+export default async (root: DBThread, _: any, ctx: GraphQLContext) => {
+  const { communityId, id } = root;
+  const { loaders } = ctx;
+  const community = await loaders.community.load(communityId);
+  if (!community) {
+    console.error(
+      'User queried thread of non-existent/deleted community: ',
+      communityId
+    );
+    console.error('Thread queried: ', id);
+  }
+  return community;
+};
diff --git a/flow-typed/npm/snarkdown_vx.x.x.js b/flow-typed/npm/snarkdown_vx.x.x.js
new file mode 100644
index 0000000000..96b404c0a3
--- /dev/null
+++ b/flow-typed/npm/snarkdown_vx.x.x.js
@@ -0,0 +1,53 @@
+// flow-typed signature: 8f063755e65f032485439ac4cefffded
+// flow-typed version: <<STUB>>/snarkdown_vx.x.x/flow_v0.66.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'snarkdown'
+ *
+ * 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 'snarkdown' {
+  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 'snarkdown/dist/snarkdown.es' {
+  declare module.exports: any;
+}
+
+declare module 'snarkdown/dist/snarkdown' {
+  declare module.exports: any;
+}
+
+declare module 'snarkdown/dist/snarkdown.umd' {
+  declare module.exports: any;
+}
+
+declare module 'snarkdown/src/index' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'snarkdown/dist/snarkdown.es.js' {
+  declare module.exports: $Exports<'snarkdown/dist/snarkdown.es'>;
+}
+declare module 'snarkdown/dist/snarkdown.js' {
+  declare module.exports: $Exports<'snarkdown/dist/snarkdown'>;
+}
+declare module 'snarkdown/dist/snarkdown.umd.js' {
+  declare module.exports: $Exports<'snarkdown/dist/snarkdown.umd'>;
+}
+declare module 'snarkdown/src/index.js' {
+  declare module.exports: $Exports<'snarkdown/src/index'>;
+}
diff --git a/package.json b/package.json
index 32c54a14e4..a3efcd5df5 100644
--- a/package.json
+++ b/package.json
@@ -194,6 +194,7 @@
     "slate": "^0.20.1",
     "slate-markdown": "0.1.1",
     "slugg": "^1.1.0",
+    "snarkdown": "^1.2.2",
     "stopword": "^0.1.13",
     "string-replace-to-array": "^1.0.3",
     "string-similarity": "^2.0.0",
@@ -293,4 +294,4 @@
     ]
   },
   "pre-commit": "lint:staged"
-}
\ No newline at end of file
+}
diff --git a/shared/clients/draft-js/utils/isShort.js b/shared/clients/draft-js/utils/isShort.js
index 588fc68017..25f822494d 100644
--- a/shared/clients/draft-js/utils/isShort.js
+++ b/shared/clients/draft-js/utils/isShort.js
@@ -1,14 +1,9 @@
 // @flow
-// Determine whether a DraftJS message is short
-import { toPlainText, toState } from '../../../draft-utils';
-
-import type { RawDraftContentState } from 'draft-js';
+import { toPlainText } from './plaintext';
 import type { MessageInfoType } from '../../../graphql/fragments/message/messageInfo';
 
 export const isShort = (message: MessageInfoType): boolean => {
   if (message.messageType === 'media') return false;
   const jsonBody = JSON.parse(message.content.body);
-  return (
-    jsonBody.blocks.length <= 1 && toPlainText(toState(jsonBody)).length <= 170
-  );
+  return jsonBody.blocks.length <= 1 && toPlainText(jsonBody).length <= 170;
 };
diff --git a/shared/clients/draft-js/utils/plaintext.js b/shared/clients/draft-js/utils/plaintext.js
new file mode 100644
index 0000000000..a533f86fc4
--- /dev/null
+++ b/shared/clients/draft-js/utils/plaintext.js
@@ -0,0 +1,9 @@
+// @flow
+import type { RawContentState } from 'draft-js';
+
+export const toPlainText = (raw: RawContentState) => {
+  return raw.blocks
+    .filter(block => block.type === 'unstyled')
+    .map(block => block.text)
+    .join('\n');
+};
diff --git a/shared/draft-utils/add-embeds-to-draft-js.js b/shared/draft-utils/add-embeds-to-draft-js.js
index b711233ecf..3e675451a6 100644
--- a/shared/draft-utils/add-embeds-to-draft-js.js
+++ b/shared/draft-utils/add-embeds-to-draft-js.js
@@ -34,7 +34,7 @@ export const addEmbedsToEditorState = (
     if (block.type !== 'unstyled') return;
 
     const embeds = getEmbedsFromText(block.text);
-    if (!embeds.length === 0) return;
+    if (embeds.length === 0) return;
 
     embeds.forEach(embed => {
       lastEntityKey++;
@@ -64,19 +64,6 @@ export const addEmbedsToEditorState = (
         type: 'embed',
       };
     });
-    // If this is the last block we need to add an empty block below the atomic block,
-    // otherwise users cannot remove the embed during editing
-    if (index === input.blocks.length - 1) {
-      newBlocks.push({
-        type: 'unstyled',
-        data: {},
-        text: ' ',
-        depth: 0,
-        entityRanges: [],
-        inlineStyleRanges: [],
-        key: genKey(),
-      });
-    }
   });
 
   return {
diff --git a/shared/draft-utils/message-types.js b/shared/draft-utils/message-types.js
new file mode 100644
index 0000000000..9506be4bef
--- /dev/null
+++ b/shared/draft-utils/message-types.js
@@ -0,0 +1,8 @@
+// @flow
+
+export const messageTypeObj = {
+  text: 'text',
+  media: 'media',
+  draftjs: 'draftjs',
+};
+export type MessageType = $Keys<typeof messageTypeObj>;
diff --git a/shared/draft-utils/process-message-content.js b/shared/draft-utils/process-message-content.js
index eff34835fa..6cdeb23735 100644
--- a/shared/draft-utils/process-message-content.js
+++ b/shared/draft-utils/process-message-content.js
@@ -2,13 +2,9 @@
 import { stateFromMarkdown } from 'draft-js-import-markdown';
 import { convertFromRaw, convertToRaw, EditorState } from 'draft-js';
 import { addEmbedsToEditorState } from './add-embeds-to-draft-js';
+import { messageTypeObj, type MessageType } from './message-types';
 
-export const messageTypeObj = {
-  text: 'text',
-  media: 'media',
-  draftjs: 'draftjs',
-};
-export type MessageType = $Keys<typeof messageTypeObj>;
+export { messageTypeObj };
 
 export default (type: MessageType, body: string): string => {
   let newBody = body;
diff --git a/shared/draft-utils/process-thread-content.js b/shared/draft-utils/process-thread-content.js
index 5e1679a680..1b21528ee5 100644
--- a/shared/draft-utils/process-thread-content.js
+++ b/shared/draft-utils/process-thread-content.js
@@ -3,12 +3,12 @@ import { stateFromMarkdown } from 'draft-js-import-markdown';
 import { convertFromRaw, convertToRaw, EditorState } from 'draft-js';
 import { addEmbedsToEditorState } from './add-embeds-to-draft-js';
 
-export default (type: 'TEXT' | 'DRAFTJS', body: string): string => {
+export default (type: 'TEXT' | 'DRAFTJS', body: ?string): string => {
   let newBody = body;
   if (type === 'TEXT') {
     // workaround react-mentions bug by replacing @[username] with @username
     // @see withspectrum/spectrum#4587
-    newBody = newBody.replace(/@\[([a-z0-9_-]+)\]/g, '@$1');
+    newBody = newBody ? newBody.replace(/@\[([a-z0-9_-]+)\]/g, '@$1') : '';
     newBody = JSON.stringify(
       convertToRaw(
         stateFromMarkdown(newBody, {
@@ -43,10 +43,10 @@ export default (type: 'TEXT' | 'DRAFTJS', body: string): string => {
 
   // Add automatic embeds to body
   try {
-    return JSON.stringify(addEmbedsToEditorState(JSON.parse(newBody)));
+    return JSON.stringify(addEmbedsToEditorState(JSON.parse(newBody || '')));
     // Ignore errors during automatic embed detection
   } catch (err) {
     console.error(err);
-    return newBody;
+    return newBody || '';
   }
 };
diff --git a/shared/draft-utils/test/__snapshots__/add-embeds-to-draft-js.test.js.snap b/shared/draft-utils/test/__snapshots__/add-embeds-to-draft-js.test.js.snap
new file mode 100644
index 0000000000..9136aa209e
--- /dev/null
+++ b/shared/draft-utils/test/__snapshots__/add-embeds-to-draft-js.test.js.snap
@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should add embeds 1`] = `
+Object {
+  "blocks": Array [
+    Object {
+      "data": Object {},
+      "depth": 0,
+      "entityRanges": Array [],
+      "inlineStyleRanges": Array [],
+      "key": "g0000",
+      "text": "https://simplecast.com/s/a1f11d11",
+      "type": "unstyled",
+    },
+    Object {
+      "data": Object {},
+      "depth": 0,
+      "entityRanges": Array [
+        Object {
+          "key": -Infinity,
+          "length": 1,
+          "offset": 0,
+        },
+      ],
+      "inlineStyleRanges": Array [],
+      "key": "0",
+      "text": " ",
+      "type": "atomic",
+    },
+  ],
+  "entityMap": Object {
+    "-Infinity": Object {
+      "data": Object {
+        "height": 200,
+        "src": "https://embed.simplecast.com/a1f11d11",
+        "url": "https://embed.simplecast.com/a1f11d11",
+      },
+      "mutability": "MUTABLE",
+      "type": "embed",
+    },
+  },
+}
+`;
diff --git a/shared/draft-utils/test/add-embeds-to-draft-js.test.js b/shared/draft-utils/test/add-embeds-to-draft-js.test.js
index 59dff64139..a148713256 100644
--- a/shared/draft-utils/test/add-embeds-to-draft-js.test.js
+++ b/shared/draft-utils/test/add-embeds-to-draft-js.test.js
@@ -1,5 +1,13 @@
 // @flow
-import { getEmbedsFromText } from '../add-embeds-to-draft-js';
+jest.mock('draft-js/lib/generateRandomKey', () => {
+  let last = 0;
+  const multiplier = Math.exp(24);
+  return () => Math.floor(last++ * multiplier).toString(32);
+});
+import {
+  getEmbedsFromText,
+  addEmbedsToEditorState,
+} from '../add-embeds-to-draft-js';
 
 describe('sites', () => {
   describe('<iframe>', () => {
@@ -357,3 +365,39 @@ describe('complex text', () => {
     ]);
   });
 });
+
+it('should not change anything if there are not embeds to add', () => {
+  const input = {
+    blocks: [
+      {
+        type: 'unstyled',
+        key: 'g0000',
+        data: {},
+        depth: 0,
+        inlineStyleRanges: [],
+        entityRanges: [],
+        text: 'Hello world!',
+      },
+    ],
+    entityMap: {},
+  };
+  expect(addEmbedsToEditorState(input)).toEqual(input);
+});
+
+it('should add embeds', () => {
+  const input = {
+    blocks: [
+      {
+        type: 'unstyled',
+        key: 'g0000',
+        data: {},
+        depth: 0,
+        inlineStyleRanges: [],
+        entityRanges: [],
+        text: 'https://simplecast.com/s/a1f11d11',
+      },
+    ],
+    entityMap: {},
+  };
+  expect(addEmbedsToEditorState(input)).toMatchSnapshot();
+});
diff --git a/shared/generate-meta-info.js b/shared/generate-meta-info.js
index 0c506a5427..833c6e97be 100644
--- a/shared/generate-meta-info.js
+++ b/shared/generate-meta-info.js
@@ -7,9 +7,9 @@
  * so it chokes on the Flow syntax.
  * More info: https://flow.org/en/docs/types/comments/
  */
-var draft = require('./draft-utils');
 var truncate = require('./truncate');
 var striptags = require('striptags');
+var toPlainText = require('./clients/draft-js/utils/plaintext').toPlainText;
 
 var DEFAULT_META = {
   title: 'Spectrum',
@@ -104,7 +104,7 @@ function generateMetaInfo(input /*: Input */) /*: Meta */ {
         data &&
         data.body &&
         (data.type === 'DRAFTJS'
-          ? draft.toPlainText(draft.toState(JSON.parse(data.body)))
+          ? toPlainText(JSON.parse(data.body))
           : data.body);
       return setDefault({
         title: data && data.title + ' · ' + data.communityName,
diff --git a/shared/graphql/mutations/message/sendMessage.js b/shared/graphql/mutations/message/sendMessage.js
index 324f94a524..7e0d09ffc5 100644
--- a/shared/graphql/mutations/message/sendMessage.js
+++ b/shared/graphql/mutations/message/sendMessage.js
@@ -2,13 +2,11 @@
 import gql from 'graphql-tag';
 import { graphql } from 'react-apollo';
 import { btoa } from 'b2a';
-import { stateFromMarkdown } from 'draft-js-import-markdown';
+import snarkdown from 'snarkdown';
 import messageInfoFragment from '../../fragments/message/messageInfo';
 import type { MessageInfoType } from '../../fragments/message/messageInfo';
 import { getThreadMessageConnectionQuery } from '../../queries/thread/getThreadMessageConnection';
-import processMessageContent, {
-  messageTypeObj,
-} from 'shared/draft-utils/process-message-content';
+import { messageTypeObj } from 'shared/draft-utils/message-types';
 
 export type SendMessageType = {
   data: {
@@ -29,12 +27,13 @@ export const sendMessageMutation = gql`
 
 const sendMessageOptions = {
   props: ({ ownProps, mutate }) => ({
-    sendMessage: (message, author) => {
+    sendMessage: async (message, author) => {
       const fakeId = Math.round(Math.random() * -1000000);
       return mutate({
         variables: {
           message: {
             ...message,
+            messageType: messageTypeObj.text,
             content: {
               body:
                 message.messageType === messageTypeObj.media
@@ -51,7 +50,7 @@ const sendMessageOptions = {
             messageType:
               message.messageType === messageTypeObj.media
                 ? messageTypeObj.media
-                : messageTypeObj.draftjs,
+                : 'optimistic',
             modifiedAt: '',
             author: {
               user: {
@@ -78,10 +77,7 @@ const sendMessageOptions = {
               body:
                 message.messageType === messageTypeObj.media
                   ? message.content.body
-                  : processMessageContent(
-                      messageTypeObj.text,
-                      message.content.body
-                    ),
+                  : snarkdown(message.content.body),
               __typename: 'MessageContent',
             },
             reactions: {
diff --git a/shared/notification-to-text.js b/shared/notification-to-text.js
index 673cb4b763..f2a8051683 100644
--- a/shared/notification-to-text.js
+++ b/shared/notification-to-text.js
@@ -1,7 +1,7 @@
 import sentencify from 'shared/sentencify';
 import sortByDate from 'shared/sort-by-date';
-import { toState, toPlainText } from 'shared/draft-utils';
-import { messageTypeObj } from 'shared/draft-utils/process-message-content';
+import { messageTypeObj } from 'shared/draft-utils/message-types';
+import { toPlainText } from 'shared/clients/draft-js/utils/plaintext';
 
 const sortThreads = (entities, currentUser) => {
   // filter out the current user's threads
@@ -114,10 +114,7 @@ const formatNotification = (
             let body = payload.content.body;
             if (typeof body === 'string')
               body = JSON.parse(payload.content.body);
-            return `"${toPlainText(toState(body)).replace(
-              /[ \n\r\v]+/g,
-              ' '
-            )}"`;
+            return `"${toPlainText(body).replace(/[ \n\r\v]+/g, ' ')}"`;
           }
 
           return `"${payload.content.body.replace(/[ \n\r\v]+/g, ' ')}"`;
@@ -158,7 +155,7 @@ const formatNotification = (
               body = JSON.parse(payload.content.body);
             return `${sender.payload.name} (@${
               sender.payload.username
-            }): ${toPlainText(toState(body))}`;
+            }): ${toPlainText(body)}`;
           }
 
           return `${sender.payload.name}: ${
@@ -175,7 +172,7 @@ const formatNotification = (
       href = `/thread/${message.threadId}`;
       body =
         message.messageType.toLowerCase() === messageTypeObj.draftjs
-          ? `${toPlainText(toState(JSON.parse(message.content.body)))}`
+          ? `${toPlainText(JSON.parse(message.content.body))}`
           : message.content.body;
       break;
     }
@@ -184,7 +181,7 @@ const formatNotification = (
       href = `/thread/${thread.id}`;
       body =
         thread.type.toLowerCase() === messageTypeObj.draftjs
-          ? `${toPlainText(toState(JSON.parse(thread.content.body)))}`
+          ? `${toPlainText(JSON.parse(thread.content.body))}`
           : thread.content.body;
       break;
     }
diff --git a/shared/types.js b/shared/types.js
index dc4d82a67c..bbcbe7ff8c 100644
--- a/shared/types.js
+++ b/shared/types.js
@@ -6,7 +6,7 @@
   attempt to use or update the types here
 
 */
-import type { MessageType } from 'shared/draft-utils/process-message-content';
+import type { MessageType } from 'shared/draft-utils/message-types';
 
 export type DBChannel = {
   communityId: string,
diff --git a/src/components/composer/inputs.js b/src/components/composer/inputs.js
index f0e84c1ab1..6c54c35309 100644
--- a/src/components/composer/inputs.js
+++ b/src/components/composer/inputs.js
@@ -15,11 +15,10 @@ 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,
+  body: ?string,
   changeBody: Function,
   changeTitle: Function,
   uploadFiles: Function,
@@ -32,6 +31,8 @@ type Props = {
 export default (props: Props) => {
   // $FlowIssue
   const [showPreview, setShowPreview] = React.useState(false);
+  // $FlowIssue
+  const [previewBody, setPreviewBody] = React.useState(null);
 
   const {
     title,
@@ -45,6 +46,26 @@ export default (props: Props) => {
     isEditing,
   } = props;
 
+  const onClick = (show: boolean) => {
+    setShowPreview(show);
+
+    if (show) {
+      setPreviewBody(null);
+      fetch('https://convert.spectrum.chat/from', {
+        method: 'POST',
+        body,
+      })
+        .then(res => {
+          if (res.status < 200 || res.status >= 300)
+            throw new Error('Oops, something went wrong');
+          return res.json();
+        })
+        .then(json => {
+          setPreviewBody(json);
+        });
+    }
+  };
+
   return (
     <InputsGrid isEditing={isEditing}>
       <SegmentedControl
@@ -58,10 +79,10 @@ export default (props: Props) => {
           background: '#FFF',
         }}
       >
-        <Segment selected={!showPreview} onClick={() => setShowPreview(false)}>
+        <Segment selected={!showPreview} onClick={() => onClick(false)}>
           Write
         </Segment>
-        <Segment selected={showPreview} onClick={() => setShowPreview(true)}>
+        <Segment selected={showPreview} onClick={() => onClick(true)}>
           Preview
         </Segment>
       </SegmentedControl>
@@ -70,9 +91,11 @@ export default (props: Props) => {
           /* $FlowFixMe */
           <RenderWrapper>
             <ThreadHeading>{title}</ThreadHeading>
-            <ThreadRenderer
-              body={JSON.parse(processThreadContent('TEXT', body))}
-            />
+            {previewBody === null ? (
+              <p>Loading...</p>
+            ) : (
+              <ThreadRenderer body={previewBody} />
+            )}
           </RenderWrapper>
         ) : (
           <Dropzone
@@ -99,7 +122,8 @@ export default (props: Props) => {
 
                 <MentionsInput
                   onChange={changeBody}
-                  value={body}
+                  value={body === null ? 'Loading...' : body}
+                  disabled={body === null}
                   style={ThreadDescription}
                   inputRef={bodyRef}
                   placeholder={'Add more thoughts here...'}
diff --git a/src/components/message/editingBody.js b/src/components/message/editingBody.js
index 06a8a8c3bc..7085a21f9a 100644
--- a/src/components/message/editingBody.js
+++ b/src/components/message/editingBody.js
@@ -1,7 +1,5 @@
 // @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';
@@ -28,20 +26,31 @@ type State = {
 
 const EditingChatInput = (props: Props) => {
   const initialState =
-    props.message.messageType === 'text'
-      ? props.message.content.body
-      : stateToMarkdown(
-          convertFromRaw(JSON.parse(props.message.content.body)),
-          {
-            gfm: true,
-          }
-          // NOTE(@mxstbr): draft-js-export-markdown sometimes appends an empty line at the end,
-          // which we really never want
-        ).replace(/\n$/, '');
+    props.message.messageType === 'text' ? props.message.content.body : null;
   // $FlowIssue
   const [text, setText] = React.useState(initialState);
   // $FlowIssue
   const [saving, setSaving] = React.useState(false);
+  let input = null;
+
+  // $FlowIssue
+  React.useEffect(
+    () => {
+      if (props.message.messageType === 'text') return;
+
+      setText(null);
+      fetch('https://convert.spectrum.chat/to', {
+        method: 'POST',
+        body: props.message.content.body,
+      })
+        .then(res => res.text())
+        .then(md => {
+          setText(md);
+          input && input.focus();
+        });
+    },
+    [props.message.id]
+  );
 
   const onChange = e => {
     const text = e.target.value;
@@ -103,11 +112,15 @@ const EditingChatInput = (props: Props) => {
       <EditorInput data-cy="edit-message-input">
         <Input
           dataCy="editing-chat-input"
-          placeholder="Your message here..."
-          value={text}
+          placeholder={text === null ? 'Loading...' : 'Your message here...'}
+          disabled={text === null}
+          value={text === null ? '' : text}
           onChange={onChange}
           onKeyDown={handleKeyPress}
-          inputRef={props.editorRef}
+          inputRef={ref => {
+            props.editorRef && props.editorRef(ref);
+            input = ref;
+          }}
           autoFocus
         />
       </EditorInput>
diff --git a/src/components/message/view.js b/src/components/message/view.js
index 4b70d6a8fb..aa4891c924 100644
--- a/src/components/message/view.js
+++ b/src/components/message/view.js
@@ -13,12 +13,11 @@ import {
 } from './style';
 import ThreadAttachment from './ThreadAttachment';
 import { messageRenderer } from 'shared/clients/draft-js/message/renderer';
-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';
 import type { MessageInfoType } from 'shared/graphql/fragments/message/messageInfo.js';
-import { messageTypeObj } from 'shared/draft-utils/process-message-content';
+import { messageTypeObj } from 'shared/draft-utils/message-types';
 
 type BodyProps = {
   openGallery: Function,
@@ -47,6 +46,14 @@ export const Body = (props: BodyProps) => {
     draftOnlyContainsEmoji(JSON.parse(message.content.body));
   const WrapperComponent = bubble ? Text : QuotedParagraph;
   switch (message.messageType) {
+    case 'optimistic':
+      return (
+        <div class="markdown">
+          <WrapperComponent me={me}>
+            <div dangerouslySetInnerHTML={{ __html: message.content.body }} />
+          </WrapperComponent>
+        </div>
+      );
     case messageTypeObj.text:
     default:
       return (
@@ -60,7 +67,9 @@ export const Body = (props: BodyProps) => {
     }
     case messageTypeObj.draftjs: {
       const parsed = JSON.parse(message.content.body);
-      const ids = getSpectrumThreadIds(toPlainText(toState(parsed)));
+      const ids = getSpectrumThreadIds(
+        parsed.blocks.map(block => block.text).join('\n')
+      );
       const uniqueIds = ids.filter((x, i, a) => a.indexOf(x) === i);
       return (
         <WrapperComponent me={me}>
diff --git a/src/views/thread/components/threadDetail.js b/src/views/thread/components/threadDetail.js
index debb1ed8e5..48bf01a57d 100644
--- a/src/views/thread/components/threadDetail.js
+++ b/src/views/thread/components/threadDetail.js
@@ -4,8 +4,6 @@ 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';
@@ -41,7 +39,7 @@ import { ErrorBoundary } from 'src/components/error';
 
 type State = {
   isEditing?: boolean,
-  body: string,
+  body: ?string,
   title: string,
   receiveNotifications?: boolean,
   isSavingEdit?: boolean,
@@ -98,9 +96,7 @@ class ThreadDetailPure extends React.Component<Props, State> {
 
     return this.setState({
       isEditing: false,
-      body: stateToMarkdown(convertFromRaw(parsedBody), {
-        gfm: true,
-      }),
+      body: '',
       title: thread.content.title,
       // We store this in the state to avoid having to JSON.parse on every render
       parsedBody,
@@ -197,13 +193,36 @@ 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,
+      body: null,
     });
 
+    fetch('https://convert.spectrum.chat/to', {
+      method: 'POST',
+      body: thread.content.body,
+    })
+      .then(res => {
+        if (res.status >= 300 || res.status < 200)
+          throw new Error('Oops, something went wrong.');
+        return res;
+      })
+      .then(res => res.text())
+      .then(md => {
+        this.setState({
+          body: md,
+        });
+      })
+      .catch(err => {
+        this.props.dispatch(addToastWithTimeout('error', err.message));
+        this.setState({
+          isEditing,
+          body: '',
+        });
+        this.props.toggleEdit();
+      });
+
+    this.props.toggleEdit();
+
     if (!isEditing) {
       track(events.THREAD_EDITED_INITED, {
         thread: transformations.analyticsThread(thread),
@@ -211,8 +230,6 @@ class ThreadDetailPure extends React.Component<Props, State> {
         community: transformations.analyticsCommunity(thread.community),
       });
     }
-
-    this.props.toggleEdit();
   };
 
   handleKeyPress = e => {
@@ -292,15 +309,17 @@ class ThreadDetailPure extends React.Component<Props, State> {
   uploadFiles = files => {
     const uploading = `![Uploading ${files[0].name}...]()`;
     let caretPos = this.bodyEditor.selectionStart;
+    const { body } = this.state;
+    if (!body) return;
 
     this.setState(
-      ({ body }) => ({
+      {
         isSavingEdit: true,
         body:
           body.substring(0, caretPos) +
           uploading +
-          body.substring(this.bodyEditor.selectionEnd, this.state.body.length),
-      }),
+          body.substring(this.bodyEditor.selectionEnd, body.length),
+      },
       () => {
         caretPos = caretPos + uploading.length;
         this.bodyEditor.selectionStart = caretPos;
@@ -318,6 +337,7 @@ class ThreadDetailPure extends React.Component<Props, State> {
         this.setState({
           isSavingEdit: false,
         });
+        if (!this.state.body) return;
         this.changeBody({
           target: {
             value: this.state.body.replace(
@@ -332,6 +352,7 @@ class ThreadDetailPure extends React.Component<Props, State> {
         this.setState({
           isSavingEdit: false,
         });
+        if (!this.state.body) return;
         this.changeBody({
           target: {
             value: this.state.body.replace(uploading, ''),
diff --git a/yarn.lock b/yarn.lock
index 8365e49add..4bd2435c18 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13273,6 +13273,11 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
+snarkdown@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/snarkdown/-/snarkdown-1.2.2.tgz#0cfe2f3012b804de120fc0c9f7791e869c59cc74"
+  integrity sha1-DP4vMBK4BN4SD8DJ93kehpxZzHQ=
+
 sockjs-client@1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.5.tgz#1bb7c0f7222c40f42adf14f4442cbd1269771a83"