diff --git a/.babelrc b/.babelrc
index 92a64c2a4..ed21974ac 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,6 +1,6 @@
 {
   "presets": [
-    ["es2015", {modules: false}]
+    ["es2015", {"modules": false}]
   ],
   "plugins": [
     "transform-class-properties",
diff --git a/.gitignore b/.gitignore
index 6f3ac70b8..6f3104629 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,6 +30,7 @@ plugins/*
 !plugins/talk-plugin-author-menu
 !plugins/talk-plugin-comment-content
 !plugins/talk-plugin-deep-reply-count
+!plugins/talk-plugin-downvote
 !plugins/talk-plugin-facebook-auth
 !plugins/talk-plugin-featured-comments
 !plugins/talk-plugin-flag-details
@@ -52,14 +53,17 @@ plugins/*
 !plugins/talk-plugin-remember-sort
 !plugins/talk-plugin-respect
 !plugins/talk-plugin-slack-notifications
+!plugins/talk-plugin-sort-most-downvoted
 !plugins/talk-plugin-sort-most-liked
 !plugins/talk-plugin-sort-most-loved
 !plugins/talk-plugin-sort-most-replied
 !plugins/talk-plugin-sort-most-respected
+!plugins/talk-plugin-sort-most-upvoted
 !plugins/talk-plugin-sort-newest
 !plugins/talk-plugin-sort-oldest
 !plugins/talk-plugin-subscriber
 !plugins/talk-plugin-toxic-comments
+!plugins/talk-plugin-upvote
 !plugins/talk-plugin-viewing-options
 !plugins/talk-plugin-rich-text
 
diff --git a/client/coral-embed-stream/src/actions/stream.js b/client/coral-embed-stream/src/actions/stream.js
index bc31c90e9..0f43ffe10 100644
--- a/client/coral-embed-stream/src/actions/stream.js
+++ b/client/coral-embed-stream/src/actions/stream.js
@@ -71,16 +71,19 @@ export const setActiveTab = tab => dispatch => {
   dispatch({ type: actions.SET_ACTIVE_TAB, tab });
 };
 
+// @Deprecated
 export const addCommentBoxTag = tag => ({
   type: actions.ADD_COMMENT_BOX_TAG,
   tag,
 });
 
+// @Deprecated
 export const removeCommentBoxTag = idx => ({
   type: actions.REMOVE_COMMENT_BOX_TAG,
   idx,
 });
 
+// @Deprecated
 export const clearCommentBoxTags = () => ({
   type: actions.CLEAR_COMMENT_BOX_TAGS,
 });
diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.js b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
index 6165d126b..5df119fbc 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
@@ -16,7 +16,7 @@ import mapValues from 'lodash/mapValues';
 import get from 'lodash/get';
 
 import LoadMore from './LoadMore';
-import { getEditableUntilDate } from './util';
+import { getEditableUntilDate } from '../util';
 import { findCommentWithId } from '../../../graphql/utils';
 import CommentContent from 'coral-framework/components/CommentContent';
 import Slot from 'coral-framework/components/Slot';
diff --git a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
index 65937b3ce..a65950d7d 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
@@ -18,14 +18,8 @@ class CommentForm extends React.Component {
     charCountEnable: PropTypes.bool.isRequired,
     maxCharCount: PropTypes.number,
 
-    // DOM ID for form input that edits comment body
-    bodyInputId: PropTypes.string,
-
-    // screen reader label for input that edits comment body
-    bodyLabel: PropTypes.string,
-
-    // Placeholder for input that edits comment body
-    bodyPlaceholder: PropTypes.string,
+    // Unique identifier for this form
+    id: PropTypes.string,
 
     // render at start of button container (useful for extra buttons)
     buttonContainerStart: PropTypes.node,
@@ -37,15 +31,15 @@ class CommentForm extends React.Component {
     submitButtonCStyle: PropTypes.string,
 
     // return whether the submit button should be enabled for the provided
-    // comment ({ body }) (for reasons other than charCount)
+    // input (for reasons other than charCount)
     submitEnabled: PropTypes.func,
 
     // className to add to buttons
     submitButtonClassName: PropTypes.string,
     cancelButtonClassName: PropTypes.string,
 
-    body: PropTypes.string.isRequired,
-    onBodyChange: PropTypes.func.isRequired,
+    input: PropTypes.object.isRequired,
+    onInputChange: PropTypes.func.isRequired,
     onSubmit: PropTypes.func.isRequired,
     onCancel: PropTypes.func,
     state: PropTypes.string,
@@ -53,13 +47,12 @@ class CommentForm extends React.Component {
     registerHook: PropTypes.func,
     unregisterHook: PropTypes.func,
     isReply: PropTypes.bool,
+    isEdit: PropTypes.bool,
     root: PropTypes.object.isRequired,
     comment: PropTypes.object,
   };
   static get defaultProps() {
     return {
-      bodyLabel: t('comment_box.comment'),
-      bodyPlaceholder: t('comment_box.comment'),
       submitText: t('comment_box.post'),
       submitButtonCStyle: 'darkGrey',
       submitEnabled: () => true,
@@ -90,20 +83,20 @@ class CommentForm extends React.Component {
       cancelButtonClassName,
       submitButtonClassName,
       charCountEnable,
-      body,
+      input,
       loadingState,
       comment,
       root,
     } = this.props;
 
-    const length = body.length;
+    const length = input.body.length;
     const isRespectingMaxCount = length =>
       charCountEnable && maxCharCount && length > maxCharCount;
     const disableSubmitButton =
       !length ||
-      body.trim().length === 0 ||
+      input.body.trim().length === 0 ||
       isRespectingMaxCount(length) ||
-      !submitEnabled({ body }) ||
+      !submitEnabled(input) ||
       loadingState === 'loading';
     const disableCancelButton = loadingState === 'loading';
     const disableTextArea = loadingState === 'loading';
@@ -113,17 +106,16 @@ class CommentForm extends React.Component {
         <DraftArea
           root={root}
           comment={comment}
-          id={this.props.bodyInputId}
-          label={this.props.bodyLabel}
-          value={body}
-          placeholder={this.props.bodyPlaceholder}
-          onChange={this.props.onBodyChange}
+          id={this.props.id}
+          input={input}
+          onInputChange={this.props.onInputChange}
           disabled={disableTextArea}
           charCountEnable={this.props.charCountEnable}
           maxCharCount={this.props.maxCharCount}
           registerHook={this.props.registerHook}
           unregisterHook={this.props.unregisterHook}
           isReply={this.props.isReply}
+          isEdit={this.props.isEdit}
         />
         <div className={cn(styles.buttonContainer, `${name}-button-container`)}>
           {this.props.buttonContainerStart}
diff --git a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
index 7150a124d..60bf18b40 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
@@ -13,17 +13,17 @@ import styles from './DraftArea.css';
  */
 export default class DraftArea extends React.Component {
   renderCharCount() {
-    const { value, maxCharCount } = this.props;
+    const { input, maxCharCount } = this.props;
 
     const className = cn(
       styles.charCount,
       'talk-plugin-commentbox-char-count',
       {
         [`${styles.charMax} talk-plugin-commentbox-char-max`]:
-          value.length > maxCharCount,
+          input.body.length > maxCharCount,
       }
     );
-    const remaining = maxCharCount - value.length;
+    const remaining = maxCharCount - input.body.length;
 
     return (
       <div className={className}>
@@ -32,18 +32,30 @@ export default class DraftArea extends React.Component {
     );
   }
 
+  getLabel() {
+    if (this.props.isEdit) {
+      return t('edit_comment.body_input_label');
+    }
+    return this.props.isReply ? t('comment_box.reply') : t('comment.comment');
+  }
+
+  getPlaceholder() {
+    if (this.props.isEdit) {
+      return '';
+    }
+    return this.getLabel();
+  }
+
   render() {
     const {
-      value,
-      placeholder,
+      input,
       id,
       disabled,
-      rows,
-      label,
       charCountEnable,
       maxCharCount,
-      onChange,
+      onInputChange,
       isReply,
+      isEdit,
       registerHook,
       unregisterHook,
       root,
@@ -51,31 +63,30 @@ export default class DraftArea extends React.Component {
     } = this.props;
 
     return (
-      <div>
+      <div id={id}>
         <div
           className={cn(styles.container, 'talk-plugin-commentbox-container')}
         >
-          <label htmlFor={id} className="screen-reader-text" aria-hidden={true}>
-            {label}
-          </label>
           <Slot
             fill="draftArea"
             defaultComponent={DraftAreaContent}
             className={styles.content}
             passthrough={{
+              id,
               root,
               comment,
               registerHook,
               unregisterHook,
-              value,
-              placeholder,
-              id,
-              onChange,
-              rows,
+              input,
+              onInputChange,
               disabled,
               isReply,
+              isEdit,
+              placeholder: this.getPlaceholder(),
+              label: this.getLabel(),
             }}
           />
+          {/* Is this slot here legitimate? (kiwi) */}
           <Slot fill="commentInputArea" />
         </div>
         {charCountEnable && maxCharCount > 0 && this.renderCharCount()}
@@ -84,23 +95,17 @@ export default class DraftArea extends React.Component {
   }
 }
 
-DraftArea.defaultProps = {
-  rows: 3,
-};
-
 DraftArea.propTypes = {
   charCountEnable: PropTypes.bool,
   maxCharCount: PropTypes.number,
   id: PropTypes.string,
-  value: PropTypes.string,
-  placeholder: PropTypes.string,
-  label: PropTypes.string,
-  onChange: PropTypes.func,
+  input: PropTypes.object,
+  onInputChange: PropTypes.func,
   disabled: PropTypes.bool,
-  rows: PropTypes.number,
   root: PropTypes.object.isRequired,
   comment: PropTypes.object,
   registerHook: PropTypes.func,
   unregisterHook: PropTypes.func,
   isReply: PropTypes.bool,
+  isEdit: PropTypes.bool,
 };
diff --git a/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js b/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
index 50a481f6f..74e59f795 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
@@ -3,36 +3,49 @@ import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './DraftAreaContent.css';
 
-const DraftAreaContent = ({
-  value,
-  placeholder,
-  id,
-  onChange,
-  rows,
-  disabled,
-}) => (
-  <textarea
-    className={cn(styles.content, 'talk-plugin-commentbox-textarea')}
-    value={value}
-    placeholder={placeholder}
-    id={id}
-    onChange={e => onChange(e.target.value)}
-    rows={rows}
-    disabled={disabled}
-  />
-);
-
-DraftAreaContent.defaultProps = {
-  rows: 3,
-};
+class DraftAreaContent extends React.Component {
+  render() {
+    const {
+      input,
+      id,
+      onInputChange,
+      disabled,
+      label,
+      placeholder,
+    } = this.props;
+    const inputId = `${id}-textarea`;
+    return (
+      <div>
+        <label
+          htmlFor={inputId}
+          className="screen-reader-text"
+          aria-hidden={true}
+        >
+          {label}
+        </label>
+        <textarea
+          id={inputId}
+          className={cn(styles.content, 'talk-plugin-commentbox-textarea')}
+          value={input.body}
+          placeholder={placeholder}
+          onChange={e => onInputChange({ body: e.target.value })}
+          rows={3}
+          disabled={disabled}
+        />
+      </div>
+    );
+  }
+}
 
 DraftAreaContent.propTypes = {
   id: PropTypes.string,
-  value: PropTypes.string,
+  input: PropTypes.object,
   placeholder: PropTypes.string,
-  onChange: PropTypes.func,
+  label: PropTypes.string,
+  onInputChange: PropTypes.func,
   disabled: PropTypes.bool,
-  rows: PropTypes.number,
+  isEdit: PropTypes.bool,
+  isReply: PropTypes.bool,
 };
 
 export default DraftAreaContent;
diff --git a/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js b/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
index 5e3e97382..00f8ebe17 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
@@ -1,12 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { notifyForNewCommentStatus } from '../helpers';
 import CommentForm from '../containers/CommentForm';
 import styles from './Comment.css';
 import { CountdownSeconds } from './CountdownSeconds';
-import { getEditableUntilDate } from './util';
-import { can } from 'coral-framework/services/perms';
 
 import { Icon } from 'coral-ui';
 import t from 'coral-framework/services/i18n';
@@ -15,187 +12,83 @@ import t from 'coral-framework/services/i18n';
  * Renders a Comment's body in such a way that the end-user can edit it and save changes
  */
 class EditableCommentContent extends React.Component {
-  static propTypes = {
-    // show notification to the user (e.g. for errors)
-    notify: PropTypes.func.isRequired,
-    root: PropTypes.object.isRequired,
-    // comment that is being edited
-    comment: PropTypes.shape({
-      id: PropTypes.string,
-      body: PropTypes.string,
-      editing: PropTypes.shape({
-        edited: PropTypes.bool,
-
-        // ISO8601
-        editableUntil: PropTypes.string,
-      }),
-    }).isRequired,
-
-    // logged in user
-    currentUser: PropTypes.shape({
-      id: PropTypes.string.isRequired,
-    }),
-    charCountEnable: PropTypes.bool,
-    maxCharCount: PropTypes.number,
-
-    // edit a comment, passed {{ body }}
-    editComment: PropTypes.func,
-
-    // called when editing should be stopped
-    stopEditing: PropTypes.func,
-  };
-
-  unmounted = false;
-
-  constructor(props) {
-    super(props);
-    this.editWindowExpiryTimeout = null;
-    this.state = {
-      body: props.comment.body,
-      loadingState: '',
-      // data: {@object} contains data that might be useful for plugins, metadata, etc
-      data: {},
-    };
-  }
-  componentDidMount() {
-    const editableUntil = getEditableUntilDate(this.props.comment);
-    const now = new Date();
-    const editWindowRemainingMs = editableUntil && editableUntil - now;
-    if (editWindowRemainingMs > 0) {
-      this.editWindowExpiryTimeout = setTimeout(() => {
-        this.forceUpdate();
-      }, editWindowRemainingMs);
-    }
-  }
-  componentWillUnmount() {
-    this.unmounted = true;
-    if (this.editWindowExpiryTimeout) {
-      this.editWindowExpiryTimeout = clearTimeout(this.editWindowExpiryTimeout);
-    }
-  }
-
-  handleBodyChange = (body, data) => {
-    this.setState(state => ({
-      body,
-      data: {
-        ...state.data,
-        ...data,
-      },
-    }));
-  };
-
-  handleSubmit = async () => {
-    if (!can(this.props.currentUser, 'INTERACT_WITH_COMMUNITY')) {
-      this.props.notify('error', t('error.NOT_AUTHORIZED'));
-      return;
-    }
-
-    this.setState({ loadingState: 'loading' });
-
-    const { editComment, stopEditing } = this.props;
-    if (typeof editComment !== 'function') {
-      return;
-    }
-
-    let input = {
-      body: this.state.body,
-      ...this.state.data,
-    };
-
-    let response;
-
-    try {
-      response = await editComment(input);
-      if (!this.unmounted) {
-        this.setState({ loadingState: 'success' });
-      }
-      const status = response.data.editComment.comment.status;
-      notifyForNewCommentStatus(this.props.notify, status);
-      if (typeof stopEditing === 'function') {
-        stopEditing();
-      }
-    } catch (error) {
-      this.setState({ loadingState: 'error' });
-    }
-  };
-
-  getEditableUntil = (props = this.props) => {
-    return getEditableUntilDate(props.comment);
-  };
-
-  isEditWindowExpired = (props = this.props) => {
-    return this.getEditableUntil(props) - new Date() < 0;
-  };
-
-  isSubmitEnabled = comment => {
-    // should be disabled if user hasn't actually changed their
-    // original comment
+  renderButtonContainerStart() {
     return (
-      comment.body !== this.props.comment.body && !this.isEditWindowExpired()
+      <div className={styles.buttonContainerLeft}>
+        <span className={styles.editWindowRemaining}>
+          {this.props.editWindowExpired ? (
+            <span>
+              {t('edit_comment.edit_window_expired')}
+              <span>
+                &nbsp;<a className={styles.link} onClick={this.props.onCancel}>
+                  {t('edit_comment.edit_window_expired_close')}
+                </a>
+              </span>
+            </span>
+          ) : (
+            <span>
+              <Icon name="timer" className={styles.timerIcon} />{' '}
+              {t('edit_comment.edit_window_timer_prefix')}
+              <CountdownSeconds
+                until={this.props.editableUntil}
+                classNameForMsRemaining={remainingMs =>
+                  remainingMs <= 10 * 1000 ? styles.editWindowAlmostOver : ''
+                }
+              />
+            </span>
+          )}
+        </span>
+      </div>
     );
-  };
+  }
 
   render() {
     const id = `edit-draft_${this.props.comment.id}`;
     return (
       <div className={styles.editCommentForm}>
         <CommentForm
+          isEdit
           root={this.props.root}
           comment={this.props.comment}
-          defaultValue={this.props.comment.body}
-          bodyInputId={id}
           charCountEnable={this.props.charCountEnable}
           maxCharCount={this.props.maxCharCount}
-          submitEnabled={this.isSubmitEnabled}
-          body={this.state.body}
-          onBodyChange={this.handleBodyChange}
-          onSubmit={this.handleSubmit}
+          submitEnabled={this.props.submitEnabled}
+          input={this.props.input}
+          onInputChange={this.props.onInputChange}
+          onSubmit={this.props.onSubmit}
+          onCancel={this.props.onCancel}
+          loadingState={this.props.loadingState}
+          registerHook={this.props.registerHook}
+          unregisterHook={this.props.unregisterHook}
+          buttonContainerStart={this.renderButtonContainerStart()}
+          submitButtonClassName={styles.button}
+          cancelButtonClassName={styles.button}
           bodyLabel={t('edit_comment.body_input_label')}
           bodyPlaceholder=""
           submitText={<span>{t('edit_comment.save_button')}</span>}
           submitButtonCStyle="green"
-          onCancel={this.props.stopEditing}
-          submitButtonClassName={styles.button}
-          cancelButtonClassName={styles.button}
-          loadingState={this.state.loadingState}
-          buttonContainerStart={
-            <div className={styles.buttonContainerLeft}>
-              <span className={styles.editWindowRemaining}>
-                {this.isEditWindowExpired() ? (
-                  <span>
-                    {t('edit_comment.edit_window_expired')}
-                    {typeof this.props.stopEditing === 'function' ? (
-                      <span>
-                        &nbsp;<a
-                          className={styles.link}
-                          onClick={this.props.stopEditing}
-                        >
-                          {t('edit_comment.edit_window_expired_close')}
-                        </a>
-                      </span>
-                    ) : null}
-                  </span>
-                ) : (
-                  <span>
-                    <Icon name="timer" className={styles.timerIcon} />{' '}
-                    {t('edit_comment.edit_window_timer_prefix')}
-                    <CountdownSeconds
-                      until={this.getEditableUntil()}
-                      classNameForMsRemaining={remainingMs =>
-                        remainingMs <= 10 * 1000
-                          ? styles.editWindowAlmostOver
-                          : ''
-                      }
-                    />
-                  </span>
-                )}
-              </span>
-            </div>
-          }
+          id={id}
         />
       </div>
     );
   }
 }
 
+EditableCommentContent.propTypes = {
+  charCountEnable: PropTypes.bool,
+  submitEnabled: PropTypes.func,
+  maxCharCount: PropTypes.number,
+  root: PropTypes.object.isRequired,
+  comment: PropTypes.object.isRequired,
+  input: PropTypes.object.isRequired,
+  registerHook: PropTypes.func.isRequired,
+  unregisterHook: PropTypes.func.isRequired,
+  onInputChange: PropTypes.func,
+  onSubmit: PropTypes.func,
+  onCancel: PropTypes.func,
+  loadingState: PropTypes.string,
+  editWindowExpired: PropTypes.bool,
+  editableUntil: PropTypes.object,
+};
+
 export default EditableCommentContent;
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
index 928bb098a..dca7fadaa 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
@@ -16,7 +16,6 @@ import { nest } from '../../../graphql/utils';
 
 const slots = [
   'streamQuestionArea',
-  'commentInputArea',
   'commentInputDetailArea',
   'commentInfoBar',
   'commentActions',
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
index de0551141..57b5a2f17 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
@@ -7,10 +7,24 @@ import Slot from 'coral-framework/components/Slot';
 import { connect } from 'react-redux';
 import CommentForm from '../containers/CommentForm';
 import { notifyForNewCommentStatus } from '../helpers';
+import withHooks from '../hocs/withHooks';
+import { compose } from 'recompose';
+import once from 'lodash/once';
 
 // TODO: (kiwi) Need to adapt CSS classes post refactor to match the rest.
 export const name = 'talk-plugin-commentbox';
 
+// @Deprecated
+const showOldTagsWarningOnce = once(() => {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn(
+      'Using `addTags` and `removeTags` is deprecated. Please switch to `onInputChange` and `input` instead'
+    );
+  }
+});
+
+const initialInput = { body: '', tags: [] };
+
 /**
  * Container for posting a new Comment
  */
@@ -19,14 +33,8 @@ class CommentBox extends React.Component {
     super(props);
 
     this.state = {
-      body: '',
       loadingState: '',
-      // data: {@object} contains data that might be useful for plugins
-      data: {},
-      hooks: {
-        preSubmit: [],
-        postSubmit: [],
-      },
+      input: initialInput,
     };
   }
 
@@ -56,29 +64,38 @@ class CommentBox extends React.Component {
       return;
     }
 
+    // @Deprecated
+    const deprecatedTags = this.props.tags || [];
+    if (deprecatedTags.length) {
+      showOldTagsWarningOnce();
+    }
+    const tags = this.state.input.tags || [];
+
     let input = {
       asset_id: assetId,
       parent_id: parentId,
-      body: this.state.body,
-      tags: this.props.tags,
-      ...this.state.data,
+      ...this.state.input,
+      tags: [...deprecatedTags, ...tags],
     };
 
     // Execute preSubmit Hooks
-    this.state.hooks.preSubmit.forEach(hook =>
-      hook(input, this.handleBodyChange)
-    );
+    this.props.forEachHook('preSubmit', hook => {
+      const result = hook(input);
+      if (result) {
+        input = result;
+      }
+    });
     this.setState({ loadingState: 'loading' });
 
     postComment(input, 'comments')
       .then(({ data }) => {
-        this.setState({ loadingState: 'success', body: '' });
+        this.setState({ loadingState: 'success', input: initialInput });
         const postedComment = data.createComment.comment;
         const actions = data.createComment.actions;
 
         // Execute postSubmit Hooks
-        this.state.hooks.postSubmit.forEach(hook =>
-          hook(data, this.handleBodyChange)
+        this.props.forEachHook('postSubmit', hook =>
+          hook(data, this.handleInputChange)
         );
 
         notifyForNewCommentStatus(notify, postedComment.status, actions);
@@ -92,62 +109,32 @@ class CommentBox extends React.Component {
       });
   };
 
-  handleBodyChange = (body, data) => {
+  handleInputChange = input => {
     this.setState(state => ({
-      body,
-      data: {
-        ...state.data,
-        ...data,
+      input: {
+        ...state.input,
+        ...input,
       },
     }));
   };
 
-  registerHook = (hookType = '', hook = () => {}) => {
-    if (typeof hook !== 'function') {
-      return console.warn(
-        `Hooks must be functions. Please check your ${hookType} hooks`
-      );
-    } else if (typeof hookType === 'string') {
-      this.setState(state => ({
-        hooks: {
-          ...state.hooks,
-          [hookType]: [...state.hooks[hookType], hook],
-        },
-      }));
-
-      return {
-        hookType,
-        hook,
-      };
-    } else {
-      return console.warn(
-        'hookTypes must be a string. Please check your hooks'
-      );
-    }
-  };
-
-  unregisterHook = hookData => {
-    const { hookType, hook } = hookData;
-
-    this.setState(state => {
-      let newHooks = state.hooks[newHooks];
-      const idx = state.hooks[hookType].indexOf(hook);
-
-      if (idx !== -1) {
-        newHooks = [
-          ...state.hooks[hookType].slice(0, idx),
-          ...state.hooks[hookType].slice(idx + 1),
-        ];
-      }
-
-      return {
-        hooks: {
-          ...state.hooks,
-          [hookType]: newHooks,
-        },
-      };
-    });
-  };
+  renderButtonContainerStart() {
+    const { root, isReply, registerHook, unregisterHook } = this.props;
+    return (
+      <Slot
+        fill="commentInputDetailArea"
+        passthrough={{
+          root,
+          registerHook: registerHook,
+          unregisterHook: unregisterHook,
+          isReply,
+          input: this.state.input,
+          onInputChange: this.handleInputChange,
+        }}
+        inline
+      />
+    );
+  }
 
   render() {
     const {
@@ -157,6 +144,8 @@ class CommentBox extends React.Component {
       parentId,
       comment,
       root,
+      registerHook,
+      unregisterHook,
     } = this.props;
     let { onCancel } = this.props;
 
@@ -178,27 +167,15 @@ class CommentBox extends React.Component {
           root={root}
           comment={comment}
           defaultValue={this.props.defaultValue}
-          bodyLabel={isReply ? t('comment_box.reply') : t('comment.comment')}
           maxCharCount={maxCharCount}
           charCountEnable={this.props.charCountEnable}
-          bodyPlaceholder={t('comment.comment')}
-          bodyInputId={id}
-          body={this.state.body}
-          registerHook={this.registerHook}
-          unregisterHook={this.unregisterHook}
+          id={id}
+          input={this.state.input}
+          registerHook={registerHook}
+          unregisterHook={unregisterHook}
           isReply={isReply}
-          buttonContainerStart={
-            <Slot
-              fill="commentInputDetailArea"
-              passthrough={{
-                registerHook: this.registerHook,
-                unregisterHook: this.unregisterHook,
-                isReply,
-              }}
-              inline
-            />
-          }
-          onBodyChange={this.handleBodyChange}
+          buttonContainerStart={this.renderButtonContainerStart()}
+          onInputChange={this.handleInputChange}
           loadingState={this.state.loadingState}
           onCancel={onCancel}
           onSubmit={this.handleSubmit}
@@ -225,6 +202,9 @@ CommentBox.propTypes = {
   tags: PropTypes.array,
   root: PropTypes.object.isRequired,
   comment: PropTypes.object,
+  registerHook: PropTypes.func.isRequired,
+  unregisterHook: PropTypes.func.isRequired,
+  forEachHook: PropTypes.func.isRequired,
 };
 
 CommentBox.fragments = CommentForm.fragments;
@@ -233,4 +213,9 @@ const mapStateToProps = state => ({
   tags: state.stream.commentBoxTags,
 });
 
-export default connect(mapStateToProps, null)(CommentBox);
+const enhance = compose(
+  withHooks(['preSubmit', 'postSubmit']),
+  connect(mapStateToProps, null)
+);
+
+export default enhance(CommentBox);
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
index f68c41dda..61738758d 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
@@ -17,9 +17,17 @@ class DraftAreaContainer extends React.Component {
   }
 
   async initValue() {
-    const value = await this.context.pymSessionStorage.getItem(this.getPath());
-    if (value && this.props.onChange) {
-      this.props.onChange(value);
+    const input = await this.context.pymSessionStorage.getItem(this.getPath());
+    if (input && this.props.onInputChange) {
+      let parsed = '';
+
+      // Older version saved a normal string, catch those and ignore them.
+      try {
+        parsed = JSON.parse(input);
+      } catch (_e) {}
+      if (typeof parsed === 'object') {
+        this.props.onInputChange(parsed);
+      }
     }
   }
 
@@ -27,14 +35,13 @@ class DraftAreaContainer extends React.Component {
     return `${STORAGE_PATH}_${this.props.id}`;
   };
 
-  onChange = (body, data) => {
-    this.props.onChange && this.props.onChange(body, data);
-  };
-
   componentWillReceiveProps(nextProps) {
-    if (this.props.value !== nextProps.value) {
-      if (nextProps.value) {
-        this.context.pymSessionStorage.setItem(this.getPath(), nextProps.value);
+    if (this.props.input !== nextProps.input) {
+      if (nextProps.input) {
+        this.context.pymSessionStorage.setItem(
+          this.getPath(),
+          JSON.stringify(nextProps.input)
+        );
       } else {
         this.context.pymSessionStorage.removeItem(this.getPath());
       }
@@ -46,18 +53,16 @@ class DraftAreaContainer extends React.Component {
       <DraftArea
         root={this.props.root}
         comment={this.props.comment}
-        value={this.props.value}
-        placeholder={this.props.placeholder}
+        input={this.props.input}
         id={this.props.id}
-        onChange={this.onChange}
-        rows={this.props.rows}
+        onInputChange={this.props.onInputChange}
         disabled={this.props.disabled}
         charCountEnable={this.props.charCountEnable}
         maxCharCount={this.props.maxCharCount}
-        label={this.props.label}
         registerHook={this.props.registerHook}
         unregisterHook={this.props.unregisterHook}
         isReply={this.props.isReply}
+        isEdit={this.props.isEdit}
       />
     );
   }
@@ -73,20 +78,18 @@ DraftAreaContainer.propTypes = {
   charCountEnable: PropTypes.bool,
   maxCharCount: PropTypes.number,
   id: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  placeholder: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
+  input: PropTypes.object.isRequired,
+  onInputChange: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
-  rows: PropTypes.number,
-  label: PropTypes.string.isRequired,
   registerHook: PropTypes.func,
   unregisterHook: PropTypes.func,
   isReply: PropTypes.bool,
+  isEdit: PropTypes.bool,
   root: PropTypes.object.isRequired,
   comment: PropTypes.object,
 };
 
-const slots = ['draftArea'];
+const slots = ['draftArea', 'commentInputArea'];
 
 export default withFragments({
   root: gql`
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/EditableCommentContent.js b/client/coral-embed-stream/src/tabs/stream/containers/EditableCommentContent.js
index f48f3ca16..b494f57d3 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/EditableCommentContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/EditableCommentContent.js
@@ -1,11 +1,150 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+
+import { notifyForNewCommentStatus } from '../helpers';
+import { getEditableUntilDate } from '../util';
+import { can } from 'coral-framework/services/perms';
+import t from 'coral-framework/services/i18n';
+
 import EditableCommentContent from '../components/EditableCommentContent';
 import CommentForm from './CommentForm';
+import withHooks from '../hocs/withHooks';
+import { compose } from 'recompose';
 
-const EditableCommentContentContainer = props => (
-  <EditableCommentContent {...props} />
-);
+/**
+ * Renders a Comment's body in such a way that the end-user can edit it and save changes
+ */
+class EditableCommentContentContainer extends React.Component {
+  unmounted = false;
+  editWindowExpiryTimeout = null;
+  state = {
+    loadingState: '',
+    submitEnabled: false,
+    input: {
+      body: this.props.comment.body,
+    },
+  };
+
+  componentDidMount() {
+    const editableUntil = getEditableUntilDate(this.props.comment);
+    const now = new Date();
+    const editWindowRemainingMs = editableUntil && editableUntil - now;
+    if (editWindowRemainingMs > 0) {
+      this.editWindowExpiryTimeout = setTimeout(() => {
+        this.forceUpdate();
+      }, editWindowRemainingMs);
+    }
+  }
+
+  componentWillUnmount() {
+    this.unmounted = true;
+    if (this.editWindowExpiryTimeout) {
+      this.editWindowExpiryTimeout = clearTimeout(this.editWindowExpiryTimeout);
+    }
+  }
+
+  handleInputChange = input => {
+    this.setState(state => ({
+      submitEnabled: true,
+      input: {
+        ...state.input,
+        ...input,
+      },
+    }));
+  };
+
+  handleSubmit = async () => {
+    if (!can(this.props.currentUser, 'INTERACT_WITH_COMMUNITY')) {
+      this.props.notify('error', t('error.NOT_AUTHORIZED'));
+      return;
+    }
+
+    this.setState({ loadingState: 'loading' });
+
+    const { editComment, stopEditing } = this.props;
+    if (typeof editComment !== 'function') {
+      return;
+    }
+
+    let input = this.state.input;
+
+    // Execute preSubmit Hooks
+    this.props.forEachHook('preSubmit', hook => {
+      const result = hook(input);
+      if (result) {
+        input = result;
+      }
+    });
+
+    let response;
+    try {
+      response = await editComment(input);
+      // Execute postSubmit Hooks
+      this.props.forEachHook('postSubmit', hook =>
+        hook(response, this.handleInputChange)
+      );
+
+      if (!this.unmounted) {
+        this.setState({ loadingState: 'success' });
+      }
+      const status = response.data.editComment.comment.status;
+      notifyForNewCommentStatus(this.props.notify, status);
+      if (typeof stopEditing === 'function') {
+        stopEditing();
+      }
+    } catch (error) {
+      this.setState({ loadingState: 'error' });
+    }
+  };
+
+  getEditableUntil = (props = this.props) => {
+    return getEditableUntilDate(props.comment);
+  };
+
+  isEditWindowExpired = (props = this.props) => {
+    return this.getEditableUntil(props) - new Date() < 0;
+  };
+
+  isSubmitEnabled = () => this.state.submitEnabled;
+
+  render() {
+    return (
+      <EditableCommentContent
+        charCountEnable={this.props.charCountEnable}
+        submitEnabled={this.isSubmitEnabled}
+        maxCharCount={this.props.maxCharCount}
+        root={this.props.root}
+        comment={this.props.comment}
+        input={this.state.input}
+        onInputChange={this.handleInputChange}
+        onSubmit={this.handleSubmit}
+        onCancel={this.props.stopEditing}
+        loadingState={this.state.loadingState}
+        editWindowExpired={this.isEditWindowExpired()}
+        editableUntil={this.getEditableUntil()}
+        registerHook={this.props.registerHook}
+        unregisterHook={this.props.unregisterHook}
+      />
+    );
+  }
+}
+
+EditableCommentContentContainer.propTypes = {
+  notify: PropTypes.func.isRequired,
+  root: PropTypes.object.isRequired,
+  comment: PropTypes.object.isRequired,
+  currentUser: PropTypes.object,
+  charCountEnable: PropTypes.bool,
+  maxCharCount: PropTypes.number,
+  editComment: PropTypes.func,
+  stopEditing: PropTypes.func,
+  registerHook: PropTypes.func.isRequired,
+  unregisterHook: PropTypes.func.isRequired,
+  forEachHook: PropTypes.func.isRequired,
+};
 
 EditableCommentContentContainer.fragments = CommentForm.fragments;
 
-export default EditableCommentContentContainer;
+const enhance = compose(withHooks(['preSubmit', 'postSubmit']));
+
+export default enhance(EditableCommentContentContainer);
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
index 9687a9370..0a7a1951c 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
@@ -367,6 +367,7 @@ const LOAD_MORE_QUERY = gql`
 `;
 
 const slots = [
+  'commentInputDetailArea',
   'streamTabs',
   'streamTabsPrepend',
   'streamTabPanes',
diff --git a/client/coral-embed-stream/src/tabs/stream/hocs/withHooks.js b/client/coral-embed-stream/src/tabs/stream/hocs/withHooks.js
new file mode 100644
index 000000000..bde0e75b2
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/stream/hocs/withHooks.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import hoistStatics from 'recompose/hoistStatics';
+
+/**
+ * WithHooks provides a property `hooks` to the wrapped component.
+ */
+export default hooks =>
+  hoistStatics(WrappedComponent => {
+    class WithHooks extends React.Component {
+      hooks = hooks.reduce((map, key) => {
+        map[key] = [];
+        return map;
+      }, {});
+
+      registerHook = (hookType = '', hook) => {
+        if (typeof hook !== 'function') {
+          return console.warn(
+            `Hooks must be functions. Please check your ${hookType} hooks`
+          );
+        }
+        if (!hooks.includes(hookType)) {
+          throw new Error(`Unknown hookType ${hookType}`);
+        }
+
+        this.hooks[hookType].push(hook);
+        return {
+          hookType,
+          hook,
+        };
+      };
+
+      unregisterHook = hookData => {
+        const { hookType, hook } = hookData;
+        const idx = this.hooks[hookType].indexOf(hook);
+        if (idx !== -1) {
+          this.hooks[hookType].splice(idx, 1);
+        }
+      };
+
+      forEachHook = (hookType, callback) => {
+        this.hooks[hookType].forEach(callback);
+      };
+
+      render() {
+        return (
+          <WrappedComponent
+            {...this.props}
+            registerHook={this.registerHook}
+            unregisterHook={this.unregisterHook}
+            forEachHook={this.forEachHook}
+          />
+        );
+      }
+    }
+
+    return WithHooks;
+  });
diff --git a/client/coral-embed-stream/src/tabs/stream/components/util.js b/client/coral-embed-stream/src/tabs/stream/util.js
similarity index 100%
rename from client/coral-embed-stream/src/tabs/stream/components/util.js
rename to client/coral-embed-stream/src/tabs/stream/util.js
diff --git a/docs/_config.yml b/docs/_config.yml
index f524fed0a..7ad46eac3 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -146,10 +146,12 @@ sidebar:
           url: /customizing-plugins-coral-ui/
     - title: API
       children:
-        - title: Server Plugins
-          url: /reference/server/
-        - title: GraphQL
-          url: /reference/graphql/
+        - title: GraphQL Overview
+          url: /api/overview/
+        - title: GraphQL Reference
+          url: /api/graphql/
+        - title: Server Plugin API
+          url: /api/server/
     - title: Migrating
       children:
         - title: Migrating to v4.0.0
diff --git a/docs/public/_redirects b/docs/public/_redirects
index 8ff90c80f..617eb6adc 100644
--- a/docs/public/_redirects
+++ b/docs/public/_redirects
@@ -1 +1,3 @@
-/ /talk/
\ No newline at end of file
+/ /talk/
+/talk/reference/server/ /talk/api/server/
+/talk/reference/graphql/ /talk/api/graphql/
\ No newline at end of file
diff --git a/docs/source/reference/graphql.md b/docs/source/api/graphql.md
similarity index 50%
rename from docs/source/reference/graphql.md
rename to docs/source/api/graphql.md
index 100dca502..792f2b240 100644
--- a/docs/source/reference/graphql.md
+++ b/docs/source/api/graphql.md
@@ -1,9 +1,15 @@
 ---
-title: GraphQL API
-permalink: /reference/graphql/
+title: GraphQL API Reference
+permalink: /api/graphql/
 ---
 
 We provide all services that Talk can provide via the GraphQL API documented
 below. For a primer about GraphQL, visit http://graphql.org/.
 
+If you're already familiar with GraphQL, visit
+[GraphQL API Overview](/talk/api/overview/) to see how to
+interact with Talk's GraphQL endpoint.
+
+# GraphQL Schema
+
 {% graphqldocs ../../client/coral-framework/graphql/introspection.json %}
\ No newline at end of file
diff --git a/docs/source/api/overview.md b/docs/source/api/overview.md
new file mode 100644
index 000000000..2ede397cd
--- /dev/null
+++ b/docs/source/api/overview.md
@@ -0,0 +1,196 @@
+---
+title: GraphQL API Overview
+permalink: /api/overview/
+---
+
+We provide all services that Talk can provide via the GraphQL API documented
+on our [GraphQL API Reference](/talk/api/graphql/). If you've never heard
+about GraphQL before, visit http://graphql.org/ to learn the basics first.
+
+## Development
+
+During development mode (when Talk has `NODE_ENV=development`) Talk will enable
+the GraphiQL IDE at the following route:
+
+    ${ROOT_URL}api/v1/graph/iql
+
+This is pretty powerful, as it lets you explore the API documentation on the
+sidebar as well as send off requests.
+
+## Making your first request
+
+To learn a bit about how to interact with Talk, we'll query for comments on a
+page of Talk. I have Talk running locally, (If you don't and want to, checkout
+our [Talk Quickstart](/talk/)).
+
+The GraphQL endpoint we have can be used with any HTTP client available, but our
+examples below will use the common `curl` tool:
+
+```sh
+curl --request POST \
+  --url http://localhost:3000/api/v1/graph/ql \
+  --header 'Content-Type: application/json' \
+  --data '{"query":"query GetComments($url: String!) { asset(url: $url) { title url comments { nodes { body user { username } } } }}","variables":{"url":"http://localhost:3000/"},"operationName":"GetComments"}'
+```
+
+When you unpack that, it's really quite simple. We're executing a `POST` request
+to the `/api/v1/graph/ql` route of the local Talk server with the GraphQL
+request we want to make. It's composed of the `query`, `variables`, and
+`operationName`.
+
+```graphql
+query GetComments($url: String!) {
+  asset(url: $url) {
+    title
+    url
+    comments {
+      nodes {
+        body
+        user {
+          username
+        }
+      }
+    }
+  }
+}
+```
+
+The query itself is quite straightforward, we are grabbing the asset with the
+specified `$url`, and grabbing it's title and the comments also (You can also
+look at our [GraphQL API Reference](/talk/api/graphql/) for our entire schema).
+
+We can then also specify our variables to the query being executed (in this
+case, the url for the page where we have comments on our local install of Talk):
+
+```json
+{
+    "url": "http://localhost:3000/"
+}
+```
+
+It's also sometimes common to have multiple queries within a query, which is
+where the `operationName` comes into play, where we simply specify the named
+query that we want to execute (in this case, `GetComments`).
+
+To get a deeper understanding of GraphQL queries, read up on
+[GraphQL Queries and Mutations](http://graphql.org/learn/queries/).
+
+## Understanding the response
+
+Once you completed the above GraphQL query with `curl`, you'll get a response
+sort of like this:
+
+```json
+{
+  "data": {
+    "asset": {
+      "title": "Coral Talk",
+      "url": "http://localhost:3000/",
+      "comments": {
+        "nodes": [
+          {
+            "body": "Second comment!",
+            "user": {
+              "username": "wyattjoh"
+            }
+          },
+          {
+            "body": "First comment!",
+            "user": {
+              "username": "wyattjoh"
+            }
+          }
+        ]
+      }
+    }
+  }
+}
+```
+
+All of the parameters you requested should be available under the `data`
+property. Any errors that you get would appear in a `errors` array at the top
+level, like this:
+
+```json
+{
+  "data": {
+    "asset": null
+  },
+  "errors": [
+    {
+      "message": "asset_url is invalid",
+      "locations": [
+        {
+          "line": 2,
+          "column": 3
+        }
+      ],
+      "path": [
+        "asset"
+      ]
+    }
+  ]
+}
+```
+
+You should know that any property that is marked with a `!` is considered
+required, and non-nullable, which means you can always guarantee on it being
+there in your request if there were no errors.
+
+## Authorizing a request
+
+Some queries you may notice seem to return `null` or an error of
+`NOT_AUTHORIZED`. It's likely the case that you are making a request to a
+route that requires authorization. You can perform authorization a few ways in
+Talk:
+
+1. As a [Bearer Token](#Bearer-Token)
+2. As a [Query Parameter](#Query-Parameter)
+3. As a [Cookie](#Cookie)
+
+Essentially, you need to get access to a JWT token that you can use to authorize
+your requests. Generating one is simple, you can use the CLI tools in Talk to do
+that.
+
+```sh
+# first, find your user account
+./bin/cli users list
+
+# then, create a token for that account
+./bin/cli token create ${USER_ID} example-token
+```
+
+Where `USER_ID` is the ID of your user account you found using the `users list`
+command.
+
+Once you have your access token, you can substitute it as `${TOKEN}` in your
+`curl` request as follows:
+
+### Bearer Token
+
+```sh
+curl --request POST \
+  --url http://localhost:3000/api/v1/graph/ql \
+  --header 'Content-Type: application/json' \
+  --header "Authorization: Bearer ${TOKEN}"
+  --data '{"query":"query GetComments($url: String!) { asset(url: $url) { title url comments { nodes { body user { username } } } }}","variables":{"url":"http://localhost:3000/"},"operationName":"GetComments"}'
+```
+
+### Query Parameter
+
+```sh
+curl --request POST \
+  --url http://localhost:3000/api/v1/graph/ql?access_token=${TOKEN} \
+  --header 'Content-Type: application/json' \
+  --data '{"query":"query GetComments($url: String!) { asset(url: $url) { title url comments { nodes { body user { username } } } }}","variables":{"url":"http://localhost:3000/"},"operationName":"GetComments"}'
+```
+
+### Cookie
+
+```sh
+curl --request POST \
+  --url http://localhost:3000/api/v1/graph/ql \
+  --header 'Content-Type: application/json' \
+  --cookie "authorization=${TOKEN}"
+  --data '{"query":"query GetComments($url: String!) { asset(url: $url) { title url comments { nodes { body user { username } } } }}","variables":{"url":"http://localhost:3000/"},"operationName":"GetComments"}'
+```
\ No newline at end of file
diff --git a/docs/source/reference/server.md b/docs/source/api/server.md
similarity index 99%
rename from docs/source/reference/server.md
rename to docs/source/api/server.md
index 93b9ee69f..614c7b2ed 100644
--- a/docs/source/reference/server.md
+++ b/docs/source/api/server.md
@@ -1,6 +1,6 @@
 ---
 title: Server Plugin API
-permalink: /reference/server/
+permalink: /api/server/
 toc: true
 class: configuration
 ---
diff --git a/docs/themes/coral/scripts/graphqldocs.js b/docs/themes/coral/scripts/graphqldocs.js
index 4e755f1f6..b3997252e 100644
--- a/docs/themes/coral/scripts/graphqldocs.js
+++ b/docs/themes/coral/scripts/graphqldocs.js
@@ -3,7 +3,7 @@
 const path = require('path');
 const fs = require('fs');
 const { stripIndent } = require('common-tags');
-const docs = fs.readFileSync(
+const docsScript = fs.readFileSync(
   require.resolve('graphql-docs/dist/graphql-docs.min.js'),
   { encoding: 'utf8' }
 );
@@ -16,7 +16,7 @@ hexo.extend.tag.register('graphqldocs', args => {
     <div id="graphql-docs"></div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js" integrity="sha256-oj3q2t3QPvtdjo4M5gZfrAXyHEfTfvYdfRL2jA2ZfOY=" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js" integrity="sha256-sqgMIZkGTh7B/tF2nSyXc+tGBYCsfWiTl2II167jrOQ=" crossorigin="anonymous"></script>
-    <script>${docs}</script>
+    <script>${docsScript}</script>
     <script>
         function fetcher() {
             return new Promise(function(resolve) {
diff --git a/graph/schema.js b/graph/schema.js
index dff5da13a..e8119a6ab 100644
--- a/graph/schema.js
+++ b/graph/schema.js
@@ -1,5 +1,6 @@
 const {
   makeExecutableSchema,
+  addResolveFunctionsToSchema,
   addSchemaLevelResolveFunction,
 } = require('graphql-tools');
 const debug = require('debug')('talk:graph:schema');
@@ -10,7 +11,10 @@ const plugins = require('../services/plugins');
 const resolvers = require('./resolvers');
 const typeDefs = require('./typeDefs');
 
-const schema = makeExecutableSchema({ typeDefs, resolvers });
+const schema = makeExecutableSchema({ typeDefs });
+
+// Add the resolvers to the schema
+addResolveFunctionsToSchema(schema, resolvers);
 
 // Plugin to the schema level resolvers to provide an before/after hook.
 decorateWithHooks(schema, plugins.get('server', 'hooks'));
diff --git a/graph/typeDefs.js b/graph/typeDefs.js
index 46bc62dce..4781cab06 100644
--- a/graph/typeDefs.js
+++ b/graph/typeDefs.js
@@ -1,10 +1,6 @@
-// TODO: Adjust `RootQuery.asset(id: ID, url: String)` to instead be
-// `RootQuery.asset(id: ID, url: String!)` because we'll always need the url, if
-// this change is done now everything will likely break on the front end.
-
 const fs = require('fs');
 const path = require('path');
-const { mergeStrings } = require('gql-merge');
+const { mergeStrings } = require('@coralproject/gql-merge');
 const debug = require('debug')('talk:graph:typeDefs');
 const plugins = require('../services/plugins');
 
diff --git a/package.json b/package.json
index 93b9d0205..a807d3321 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
   },
   "homepage": "https://github.com/coralproject/talk#readme",
   "dependencies": {
+    "@coralproject/gql-merge": "^0.1.0",
     "@coralproject/graphql-anywhere-optimized": "^0.1.0",
     "accepts": "^1.3.4",
     "apollo-client": "^1.9.1",
@@ -103,10 +104,10 @@
     "exports-loader": "^0.6.4",
     "express": "4.16.0",
     "express-static-gzip": "^0.3.1",
+    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^0.11.2",
     "form-data": "^2.3.1",
     "fs-extra": "^4.0.1",
-    "gql-merge": "^0.0.4",
     "graphql": "^0.10.1",
     "graphql-ast-tools": "0.2.3",
     "graphql-docs": "0.2.0",
@@ -125,6 +126,7 @@
     "inquirer": "^3.2.2",
     "inquirer-autocomplete-prompt": "^0.12.1",
     "ioredis": "3.1.4",
+    "ip": "^1.1.5",
     "joi": "^13.0.0",
     "jsonwebtoken": "^8.0.0",
     "jwt-decode": "^2.2.0",
@@ -142,6 +144,7 @@
     "morgan": "^1.9.0",
     "ms": "^2.0.0",
     "murmurhash-js": "^1.0.0",
+    "name-all-modules-plugin": "^1.0.1",
     "node-emoji": "^1.8.1",
     "node-fetch": "^1.7.2",
     "nodemailer": "^2.6.4",
@@ -194,6 +197,7 @@
     "url-search-params": "^0.9.0",
     "uuid": "^3.1.0",
     "webpack": "^3.10.0",
+    "webpack-manifest-plugin": "^2.0.0-rc.2",
     "webpack-sources": "^1.0.1",
     "yaml-loader": "^0.4.0",
     "yamljs": "^0.2.10"
@@ -213,22 +217,18 @@
     "enzyme-adapter-react-15": "^1.0.0",
     "eslint": "^4.5.0",
     "eslint-plugin-mocha": "^4.11.0",
-    "extract-text-webpack-plugin": "^3.0.2",
     "husky": "^0.14.3",
     "identity-obj-proxy": "^3.0.0",
-    "ip": "^1.1.5",
     "jest": "^21.2.1",
     "jest-junit": "^3.6.0",
     "lint-staged": "^7.0.0",
     "mocha": "^3.1.2",
     "mocha-junit-reporter": "^1.12.1",
-    "name-all-modules-plugin": "^1.0.1",
     "nightwatch": "^0.9.16",
     "nodemon": "^1.11.0",
     "selenium-standalone": "^6.11.0",
     "sinon": "^3.2.1",
     "sinon-chai": "^2.13.0",
-    "webpack-manifest-plugin": "^2.0.0-rc.2",
     "yaml-lint": "^1.0.0"
   },
   "engines": {
diff --git a/plugin-api/alpha/client/actions/index.js b/plugin-api/alpha/client/actions/index.js
index 9ef89f11b..653f6bf71 100644
--- a/plugin-api/alpha/client/actions/index.js
+++ b/plugin-api/alpha/client/actions/index.js
@@ -1,6 +1,8 @@
 export {
   addCommentClassName,
   removeCommentClassName,
+  // @Deprecated
   addCommentBoxTag as addTag,
+  // @Deprecated
   removeCommentBoxTag as removeTag,
 } from 'coral-embed-stream/src/actions/stream';
diff --git a/plugin-api/alpha/client/selectors/index.js b/plugin-api/alpha/client/selectors/index.js
index 214a07d0c..c094b7ac1 100644
--- a/plugin-api/alpha/client/selectors/index.js
+++ b/plugin-api/alpha/client/selectors/index.js
@@ -1,3 +1,18 @@
-export const commentBoxTagsSelector = state => state.stream.commentBoxTags;
+import once from 'lodash/once';
+
+// @Deprecated
+const showOldTagsWarningOnce = once(() => {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn(
+      '`commentBoxTagsSelector` is deprecated. Please switch to `input.tags` instead'
+    );
+  }
+});
+
+export const commentBoxTagsSelector = state => {
+  showOldTagsWarningOnce();
+  return state.stream.commentBoxTags;
+};
+
 export const commentClassNamesSelector = state =>
   state.stream.commentClassNames;
diff --git a/plugins/talk-plugin-akismet/client/components/CheckSpamHook.js b/plugins/talk-plugin-akismet/client/components/CheckSpamHook.js
index 056f28eef..83378d248 100644
--- a/plugins/talk-plugin-akismet/client/components/CheckSpamHook.js
+++ b/plugins/talk-plugin-akismet/client/components/CheckSpamHook.js
@@ -15,8 +15,11 @@ export default class CheckSpamHook extends React.Component {
       // If we haven't check the spam yet, make sure to include `checkSpam=true` in the mutation.
       // Otherwise post comment without checking the spam.
       if (!this.checked) {
-        input.checkSpam = true;
         this.checked = true;
+        return {
+          ...input,
+          checkSpam: true,
+        };
       }
     });
 
diff --git a/plugins/talk-plugin-downvote/client/.eslintrc.json b/plugins/talk-plugin-downvote/client/.eslintrc.json
new file mode 100644
index 000000000..9fe56bd14
--- /dev/null
+++ b/plugins/talk-plugin-downvote/client/.eslintrc.json
@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}
diff --git a/plugins/talk-plugin-downvote/client/components/DownvoteButton.css b/plugins/talk-plugin-downvote/client/components/DownvoteButton.css
new file mode 100644
index 000000000..71090306b
--- /dev/null
+++ b/plugins/talk-plugin-downvote/client/components/DownvoteButton.css
@@ -0,0 +1,39 @@
+.container {
+  display: inline-block;
+}
+
+.button {
+  color: #2a2a2a;
+  margin: 5px 10px 5px 0px;
+  background: none;
+  padding: 0px;
+  border: none;
+  font-size: inherit;
+  vertical-align: middle;
+
+  &:hover {
+    color: #767676;
+    cursor: pointer;
+  }
+
+  &.downvoted {
+    color: #cc0000;
+
+    &:hover {
+      color: #ff3232;
+      cursor: pointer;
+    }
+  }
+}
+
+.icon {
+  font-size: 12px;
+  padding: 0 3px;
+}
+
+@media (max-width: 425px) {
+  .label {
+    display: none;
+  }
+}
+
diff --git a/plugins/talk-plugin-downvote/client/components/DownvoteButton.js b/plugins/talk-plugin-downvote/client/components/DownvoteButton.js
new file mode 100644
index 000000000..2bf34260b
--- /dev/null
+++ b/plugins/talk-plugin-downvote/client/components/DownvoteButton.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import Icon from './Icon';
+import styles from './DownvoteButton.css';
+import { withReaction } from 'plugin-api/beta/client/hocs';
+import cn from 'classnames';
+
+const plugin = 'talk-plugin-downvote';
+
+class DownvoteButton extends React.Component {
+  handleClick = () => {
+    const {
+      postReaction,
+      deleteReaction,
+      showSignInDialog,
+      alreadyReacted,
+      user,
+    } = this.props;
+
+    // If the current user does not exist, trigger sign in dialog.
+    if (!user) {
+      showSignInDialog();
+      return;
+    }
+
+    if (alreadyReacted) {
+      deleteReaction();
+    } else {
+      postReaction();
+    }
+  };
+
+  render() {
+    const { count, alreadyReacted } = this.props;
+    return (
+      <div className={cn(styles.container, `${plugin}-container`)}>
+        <button
+          className={cn(
+            styles.button,
+            {
+              [`${
+                styles.downvoted
+              } talk-plugin-downvote-downvoted`]: alreadyReacted,
+            },
+            `${plugin}-button`
+          )}
+          onClick={this.handleClick}
+        >
+          <Icon className={cn(styles.icon, `${plugin}-icon`)} />
+          <span className={cn(`${plugin}-count`)}>{count > 0 && count}</span>
+        </button>
+      </div>
+    );
+  }
+}
+
+export default withReaction('downvote')(DownvoteButton);
diff --git a/plugins/talk-plugin-downvote/client/components/Icon.js b/plugins/talk-plugin-downvote/client/components/Icon.js
new file mode 100644
index 000000000..56f43029d
--- /dev/null
+++ b/plugins/talk-plugin-downvote/client/components/Icon.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import cn from 'classnames';
+
+// @TODO change icon when we deprecate FA
+export default ({ className }) => (
+  <i
+    className={cn('fa', 'fa-arrow-circle-down', className)}
+    aria-hidden="true"
+  />
+);
diff --git a/plugins/talk-plugin-downvote/client/index.js b/plugins/talk-plugin-downvote/client/index.js
new file mode 100644
index 000000000..dc60178db
--- /dev/null
+++ b/plugins/talk-plugin-downvote/client/index.js
@@ -0,0 +1,7 @@
+import DownvoteButton from './components/DownvoteButton';
+
+export default {
+  slots: {
+    commentReactions: [DownvoteButton],
+  },
+};
diff --git a/plugins/talk-plugin-downvote/index.js b/plugins/talk-plugin-downvote/index.js
new file mode 100644
index 000000000..c0e29c5ef
--- /dev/null
+++ b/plugins/talk-plugin-downvote/index.js
@@ -0,0 +1,2 @@
+const { getReactionConfig } = require('../../plugin-api/beta/server');
+module.exports = getReactionConfig('downvote');
diff --git a/plugins/talk-plugin-downvote/package.json b/plugins/talk-plugin-downvote/package.json
new file mode 100644
index 000000000..440d18b6a
--- /dev/null
+++ b/plugins/talk-plugin-downvote/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@coralproject/talk-plugin-downvote",
+  "pluginName": "talk-plugin-downvote",
+  "version": "0.0.1",
+  "description": "Downvote comments",
+  "main": "index.js",
+  "author": "The Coral Project Team <coral@mozillafoundation.org>",
+  "license": "Apache-2.0"
+}
diff --git a/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.js b/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.js
index 97916b900..fec42fc9e 100644
--- a/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.js
+++ b/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.js
@@ -1,47 +1,27 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './OffTopicCheckbox.css';
 
 import { t } from 'plugin-api/beta/client/services';
 
 export default class OffTopicCheckbox extends React.Component {
-  label = 'OFF_TOPIC';
-
-  componentDidMount() {
-    this.clearTagsHook = this.props.registerHook('postSubmit', () => {
-      const idx = this.props.tags.indexOf(this.label);
-      this.props.removeTag(idx);
-    });
-  }
-
-  componentWillUnmount() {
-    this.props.unregisterHook(this.clearTagsHook);
-  }
-
-  handleChange = e => {
-    const { addTag, removeTag } = this.props;
-    if (e.target.checked) {
-      addTag(this.label);
-    } else {
-      const idx = this.props.tags.indexOf(this.label);
-      removeTag(idx);
-    }
-  };
-
   render() {
-    const checked = this.props.tags.indexOf(this.label) >= 0;
     return (
       <div className={styles.offTopic}>
-        {!this.props.isReply ? (
-          <label className={styles.offTopicLabel}>
-            <input
-              type="checkbox"
-              onChange={this.handleChange}
-              checked={checked}
-            />
-            {t('off_topic')}
-          </label>
-        ) : null}
+        <label className={styles.offTopicLabel}>
+          <input
+            type="checkbox"
+            onChange={this.props.onChange}
+            checked={this.props.checked}
+          />
+          {t('off_topic')}
+        </label>
       </div>
     );
   }
 }
+
+OffTopicCheckbox.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  checked: PropTypes.bool.isRequired,
+};
diff --git a/plugins/talk-plugin-offtopic/client/containers/OffTopicCheckbox.js b/plugins/talk-plugin-offtopic/client/containers/OffTopicCheckbox.js
index e8c07bee3..a9d6c4914 100644
--- a/plugins/talk-plugin-offtopic/client/containers/OffTopicCheckbox.js
+++ b/plugins/talk-plugin-offtopic/client/containers/OffTopicCheckbox.js
@@ -1,14 +1,34 @@
-import { bindActionCreators } from 'redux';
-import { addTag, removeTag } from 'plugin-api/alpha/client/actions';
-import { commentBoxTagsSelector } from 'plugin-api/alpha/client/selectors';
-import { connect } from 'plugin-api/beta/client/hocs';
+import React from 'react';
+import PropTypes from 'prop-types';
 import OffTopicCheckbox from '../components/OffTopicCheckbox';
+import { excludeIf } from 'plugin-api/beta/client/hocs';
 
-const mapStateToProps = state => ({
-  tags: commentBoxTagsSelector(state),
-});
+const OFF_TOPIC_TAG = 'OFF_TOPIC';
+class OffTopicCheckboxContainer extends React.Component {
+  handleChange = e => {
+    const { input, onInputChange } = this.props;
+    if (e.target.checked && !input.tags.includes(OFF_TOPIC_TAG)) {
+      onInputChange({ tags: [...input.tags, OFF_TOPIC_TAG] });
+    } else {
+      const idx = input.tags.indexOf(OFF_TOPIC_TAG);
+      if (idx !== -1) {
+        onInputChange({
+          tags: [...input.tags.slice(0, idx), ...input.tags.slice(0, idx)],
+        });
+      }
+    }
+  };
 
-const mapDispatchToProps = dispatch =>
-  bindActionCreators({ addTag, removeTag }, dispatch);
+  render() {
+    const checked = this.props.input.tags.includes(OFF_TOPIC_TAG);
+    return <OffTopicCheckbox checked={checked} onChange={this.handleChange} />;
+  }
+}
 
-export default connect(mapStateToProps, mapDispatchToProps)(OffTopicCheckbox);
+OffTopicCheckboxContainer.propTypes = {
+  input: PropTypes.object.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  isReply: PropTypes.bool,
+};
+
+export default excludeIf(props => props.isReply)(OffTopicCheckboxContainer);
diff --git a/plugins/talk-plugin-profile-settings/README.md b/plugins/talk-plugin-profile-settings/README.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/plugins/talk-plugin-respect/client/Icon.js b/plugins/talk-plugin-respect/client/Icon.js
index 8b45615aa..9af30b86a 100644
--- a/plugins/talk-plugin-respect/client/Icon.js
+++ b/plugins/talk-plugin-respect/client/Icon.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
+// @TODO change icon when we deprecate FA
 export default ({ className }) => (
   <i className={cn('fa', 'fa-handshake-o', className)} aria-hidden="true" />
 );
diff --git a/plugins/talk-plugin-rich-text/README.md b/plugins/talk-plugin-rich-text/README.md
index 109759274..a69e5c8dc 100644
--- a/plugins/talk-plugin-rich-text/README.md
+++ b/plugins/talk-plugin-rich-text/README.md
@@ -6,6 +6,7 @@ plugin:
     name: talk-plugin-rich-text
     provides:
         - Client
+        - Server
 ---
 
 Enables secure rich text support server-side.
@@ -13,11 +14,11 @@ Enables secure rich text support server-side.
 ## Installation
 
 Add `"talk-plugin-rich-text"` to the `plugins.json` in your Talk installation.
-Remember to add this in the `server` property since this plugin only covers the
-server side. To add frontend support consider using
-[talk-plugin-rich-text-pell](/talk/plugin/talk-plugin-rich-text-pell).
+This plugin provides a server and a client side implementation.
 
-## How does this work?
+## Server implementation
+
+### How does this work?
 
 This plugin uses the `comment.metadata` field to store the `richTextBody`. By
 adding `richTextBody` to the schema we can later on resolve it as part of the
@@ -27,23 +28,49 @@ the capabilities of our plugin framework. We encourage you to see the files and
 check how easy is to build plugins! If you have any feedback, please let us
 know.
 
-## Configuration
+### Configuration
 
 There is a `config.js` in the root folder. This file contains the recommended
 settings.
 
-### `highlightLinks`
+#### `highlightLinks`
 
 A `boolean` to highlight links.  Set it to `false` to turn it off.
 
-### `linkify`
+#### `linkify`
 
 Settings for highlighting links. These will only apply if `higlightLinks` is set to `true`.
 
-### `dompurify`
+#### `dompurify`
 
 Rules to sanitize html input.  We use [DOMPurify] (https://github.com/cure53/DOMPurify) to prevent web attacks and XSS. Here is the complete list of [settings] (https://github.com/cure53/DOMPurify)
 
-## `jsdom`
+#### `jsdom`
 
 In order to run html in the server we need [jsdom](https://github.com/jsdom/jsdom). Usually you wouldn’t need to modify this settings. 
+
+## Client implementation
+
+### How does this work?
+
+This plugin contains 2 important components:
+
+- The Editor (`./components/Editor.js`)
+- The Comment Content Renderer (`./components/CommentContent.js`)
+
+The editor component utilizes the [contentEditable](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content) and execCommand API. 
+
+If you check our `index.js` you will notice that we inject this editor in the
+`commentBox` slot. We do this to replace the core comment box with this one. 
+
+Now, in order to render the new styled comments we need a comment renderer. For
+this task we will have to replace our core comment renderer by using the
+`commentContent` slot.
+
+If you are not familiar with GraphQL `client/index.js` will look complicated,
+but fear not! With those functions we specify what to expect from the server
+schema, how to perform optimistic updates and how keep the client store updated
+with the latest changes.
+
+We encourage you to see the files and check how easy is to build plugins! If you
+have any feedback, please let us know.
diff --git a/plugins/talk-plugin-rich-text/client/.eslintrc.json b/plugins/talk-plugin-rich-text/client/.eslintrc.json
new file mode 100644
index 000000000..c8a6db18a
--- /dev/null
+++ b/plugins/talk-plugin-rich-text/client/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "@coralproject/eslint-config-talk/client"
+}
diff --git a/plugins/talk-plugin-rich-text/client/components/Button.css b/plugins/talk-plugin-rich-text/client/components/Button.css
new file mode 100644
index 000000000..f9f1ba186
--- /dev/null
+++ b/plugins/talk-plugin-rich-text/client/components/Button.css
@@ -0,0 +1,20 @@
+.button > i {
+  vertical-align: middle;
+}
+
+.button {
+  background-color: transparent;
+  padding: 3px;
+  border: none;
+  color: #4e4e4e;
+  margin-right: 3px;
+}
+
+.button:hover{
+  cursor: pointer;
+  border-radius: 3px;
+  background-color: #eae8e8;
+}
+.icon {
+  font-size: 20px;
+}
diff --git a/plugins/talk-plugin-rich-text/client/components/Button.js b/plugins/talk-plugin-rich-text/client/components/Button.js
new file mode 100644
index 000000000..330e3d993
--- /dev/null
+++ b/plugins/talk-plugin-rich-text/client/components/Button.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './Button.css';
+import { Icon, BareButton } from 'plugin-api/beta/client/components/ui';
+import cn from 'classnames';
+
+class Button extends React.Component {
+  render() {
+    const { className, icon, title, onClick } = this.props;
+    return (
+      <BareButton
+        className={cn(className, styles.button)}
+        title={title}
+        onClick={onClick}
+      >
+        <Icon className={styles.icon} name={icon} />
+      </BareButton>
+    );
+  }
+}
+
+Button.propTypes = {
+  icon: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  title: PropTypes.string,
+  onClick: PropTypes.func,
+};
+
+export default Button;
diff --git a/plugins/talk-plugin-rich-text/client/components/CommentContent.css b/plugins/talk-plugin-rich-text/client/components/CommentContent.css
new file mode 100644
index 000000000..c473ba310
--- /dev/null
+++ b/plugins/talk-plugin-rich-text/client/components/CommentContent.css
@@ -0,0 +1,15 @@
+.content {
+  blockquote {
+    background-color: #F6F6F6;
+    padding: 10px;
+    margin: 20px 0px 20px 10px;
+    font-style: italic;
+    border-radius: 2px;
+    &::after {
+      content: none;
+    }
+    &::before {
+      content: none;
+    }
+  }
+}
diff --git a/plugins/talk-plugin-rich-text/client/components/CommentContent.js b/plugins/talk-plugin-rich-text/client/components/CommentContent.js
new file mode 100644
index 000000000..2cf481830
--- /dev/null
+++ b/plugins/talk-plugin-rich-text/client/components/CommentContent.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { PLUGIN_NAME } from '../constants';
+import cn from 'classnames';
+import styles from './CommentContent.css';
+
+class CommentContent extends React.Component {
+  render() {
+    const { comment } = this.props;
+    const className = cn(`${PLUGIN_NAME}-text`, styles.content);
+    return comment.richTextBody ? (
+      <div
+        className={className}
+        dangerouslySetInnerHTML={{ __html: comment.richTextBody }}
+      />
+    ) : (
+      <div className={className}>{comment.body}</div>
+    );
+  }
+}
+
+CommentContent.propTypes = {
+  comment: PropTypes.object.isRequired,
+};
+
+export default CommentContent;
diff --git a/plugins/talk-plugin-rich-text/client/components/Editor.css b/plugins/talk-plugin-rich-text/client/components/Editor.css
new file mode 100644
index 000000000..eabc1ee94
--- /dev/null
+++ b/plugins/talk-plugin-rich-text/client/components/Editor.css
@@ -0,0 +1,18 @@
+.contentEditable {
+  composes: content from "./CommentContent.css";
+  background: #fff;
+  border: solid 1px #bbb;
+  min-height: 120px;
+  box-sizing: border-box;
+  outline: 0;
+  overflow-y: auto;
+  width: 100%;
+  padding: 10px;
+  font-style: unset;
+}
+
+.placeholder {
+  position: absolute;
+  margin: 12px 0 0 12px;
+  color: #bbb;
+}
diff --git a/plugins/talk-plugin-rich-text/client/components/Editor.js b/plugins/talk-plugin-rich-text/client/components/Editor.js
new file mode 100644
index 000000000..5c1497f00
--- /dev/null
+++ b/plugins/talk-plugin-rich-text/client/components/Editor.js
@@ -0,0 +1,147 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './Editor.css';
+import cn from 'classnames';
+import { PLUGIN_NAME } from '../constants';
+import { htmlNormalizer } from '../utils';
+import ContentEditable from 'react-contenteditable';
+import Toolbar from './Toolbar';
+import Button from './Button';
+import bowser from 'bowser';
+
+class Editor extends React.Component {
+  ref = null;
+  handleRef = ref => (this.ref = ref);
+
+  handleChange = evt => {
+    this.props.onInputChange({
+      body: this.ref.htmlEl.innerText,
+      richTextBody: evt.target.value,
+    });
+  };
+
+  getHTML(props = this.props) {
+    if (props.input.richTextBody) {
+      return props.input.richTextBody;
+    }
+    return (
+      (props.isEdit && (props.comment.richTextBody || props.comment.body)) || ''
+    );
+  }
+
+  componentDidMount() {
+    if (this.props.registerHook) {
+      this.normalizeHook = this.props.registerHook('preSubmit', input => {
+        if (input.richTextBody) {
+          return {
+            ...input,
+            richTextBody: htmlNormalizer(input.richTextBody),
+          };
+        }
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.unregisterHook(this.normalizeHook);
+  }
+
+  getCurrentTagName() {
+    const sel = window.getSelection();
+    const range = sel.getRangeAt(0);
+    if (range.startContainer.nodeName !== '#text') {
+      return range.startContainer.nodeName;
+    }
+    return range.startContainer.parentNode.tagName;
+  }
+
+  formatBold = () => {
+    document.execCommand('bold');
+    this.ref.htmlEl.focus();
+  };
+
+  formatItalic = () => {
+    document.execCommand('italic');
+    this.ref.htmlEl.focus();
+  };
+
+  formatBlockquote = () => {
+    const currentTag = this.getCurrentTagName();
+    if (currentTag === 'BLOCKQUOTE') {
+      document.execCommand('outdent');
+    } else {
+      if (bowser.msie) {
+        document.execCommand('indent');
+      } else {
+        document.execCommand('formatBlock', false, 'blockquote');
+      }
+    }
+    this.ref.htmlEl.focus();
+  };
+
+  outdentOnEnter = e => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      setTimeout(() => {
+        document.execCommand('outdent');
+      });
+    }
+  };
+
+  render() {
+    const inputId = `${this.props.id}-rte`;
+    return (
+      <div className={cn(styles.root, `${PLUGIN_NAME}-container`)}>
+        <label
+          htmlFor={inputId}
+          className="screen-reader-text"
+          aria-hidden={true}
+        >
+          {this.props.label}
+        </label>
+        <Toolbar>
+          <Button icon="format_bold" title="bold" onClick={this.formatBold} />
+          <Button
+            icon="format_italic"
+            title="italic"
+            onClick={this.formatItalic}
+          />
+          <Button
+            icon="format_quote"
+            title="quote"
+            onClick={this.formatBlockquote}
+          />
+        </Toolbar>
+        {!this.props.input.body && (
+          <div className={styles.placeholder}>{this.props.placeholder}</div>
+        )}
+        <ContentEditable
+          id={inputId}
+          onKeyPress={this.outdentOnEnter}
+          className={styles.contentEditable}
+          ref={this.handleRef}
+          html={this.getHTML()}
+          disabled={false}
+          onChange={this.handleChange}
+        />
+      </div>
+    );
+  }
+}
+
+Editor.propTypes = {
+  input: PropTypes.object,
+  placeholder: PropTypes.string,
+  onInputChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  comment: PropTypes.object,
+  classNames: PropTypes.object,
+  registerHook: PropTypes.func,
+  unregisterHook: PropTypes.func,
+  isReply: PropTypes.bool,
+  isEdit: PropTypes.bool,
+  id: PropTypes.string,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+};
+
+export default Editor;
diff --git a/plugins/talk-plugin-rich-text/client/components/Toolbar.css b/plugins/talk-plugin-rich-text/client/components/Toolbar.css
new file mode 100644
index 000000000..f4880f432
--- /dev/null
+++ b/plugins/talk-plugin-rich-text/client/components/Toolbar.css
@@ -0,0 +1,7 @@
+.toolbar {
+  user-select: none;
+  padding: 5px 10px;
+  border-top: 1px solid #bbb;
+  border-left: 1px solid #bbb;
+  border-right: 1px solid #bbb;
+}
diff --git a/plugins/talk-plugin-rich-text/client/components/Toolbar.js b/plugins/talk-plugin-rich-text/client/components/Toolbar.js
new file mode 100644
index 000000000..f3112e813
--- /dev/null
+++ b/plugins/talk-plugin-rich-text/client/components/Toolbar.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './Toolbar.css';
+import cn from 'classnames';
+
+class Toolbar extends React.Component {
+  render() {
+    const { className, ...rest } = this.props;
+    return <div className={cn(className, styles.toolbar)} {...rest} />;
+  }
+}
+
+Toolbar.propTypes = {
+  className: PropTypes.string,
+};
+
+export default Toolbar;
diff --git a/plugins/talk-plugin-rich-text/client/constants.js b/plugins/talk-plugin-rich-text/client/constants.js
new file mode 100644
index 000000000..25725cacf
--- /dev/null
+++ b/plugins/talk-plugin-rich-text/client/constants.js
@@ -0,0 +1 @@
+export const PLUGIN_NAME = 'talk-plugin-rich-text';
diff --git a/plugins/talk-plugin-rich-text/client/containers/CommentContent.js b/plugins/talk-plugin-rich-text/client/containers/CommentContent.js
new file mode 100644
index 000000000..b1b320a99
--- /dev/null
+++ b/plugins/talk-plugin-rich-text/client/containers/CommentContent.js
@@ -0,0 +1,12 @@
+import { gql } from 'react-apollo';
+import { withFragments } from 'plugin-api/beta/client/hocs';
+import CommentContent from '../components/CommentContent';
+
+export default withFragments({
+  comment: gql`
+    fragment TalkPluginRichText_CommentContent_comment on Comment {
+      body
+      richTextBody
+    }
+  `,
+})(CommentContent);
diff --git a/plugins/talk-plugin-rich-text/client/containers/Editor.js b/plugins/talk-plugin-rich-text/client/containers/Editor.js
new file mode 100644
index 000000000..7283fec37
--- /dev/null
+++ b/plugins/talk-plugin-rich-text/client/containers/Editor.js
@@ -0,0 +1,12 @@
+import { gql } from 'react-apollo';
+import { withFragments } from 'plugin-api/beta/client/hocs';
+import Editor from '../components/Editor';
+
+export default withFragments({
+  comment: gql`
+    fragment TalkPluginRichText_Editor_comment on Comment {
+      body
+      richTextBody
+    }
+  `,
+})(Editor);
diff --git a/plugins/talk-plugin-rich-text/client/index.js b/plugins/talk-plugin-rich-text/client/index.js
new file mode 100644
index 000000000..6eb7a8c95
--- /dev/null
+++ b/plugins/talk-plugin-rich-text/client/index.js
@@ -0,0 +1,70 @@
+import Editor from './containers/Editor';
+import CommentContent from './containers/CommentContent';
+import { gql } from 'react-apollo';
+
+export default {
+  slots: {
+    draftArea: [Editor],
+    commentContent: [CommentContent],
+    adminCommentContent: [CommentContent],
+    userDetailCommentContent: [CommentContent],
+  },
+  fragments: {
+    CreateCommentResponse: gql`
+      fragment TalkRichText_CreateCommentResponse on CreateCommentResponse {
+        comment {
+          richTextBody
+        }
+      }
+    `,
+    EditCommentResponse: gql`
+      fragment TalkRichText_EditCommentResponse on EditCommentResponse {
+        comment {
+          richTextBody
+        }
+      }
+    `,
+  },
+  mutations: {
+    PostComment: ({ variables: { input } }) => {
+      return {
+        optimisticResponse: {
+          createComment: {
+            comment: {
+              richTextBody: input.richTextBody,
+            },
+          },
+        },
+      };
+    },
+    EditComment: ({ variables: { id, edit } }) => {
+      return {
+        optimisticResponse: {
+          editComment: {
+            comment: {
+              richTextBody: edit.richTextBody,
+            },
+          },
+        },
+        update: proxy => {
+          const editCommentFragment = gql`
+            fragment TalkRichText_EditComment on Comment {
+              richTextBody
+            }
+          `;
+
+          const fragmentId = `Comment_${id}`;
+
+          proxy.writeFragment({
+            fragment: editCommentFragment,
+            id: fragmentId,
+            data: {
+              __typename: 'Comment',
+              richTextBody: edit.richTextBody,
+            },
+          });
+        },
+      };
+    },
+  },
+};
diff --git a/plugins/talk-plugin-rich-text/client/utils.js b/plugins/talk-plugin-rich-text/client/utils.js
new file mode 100644
index 000000000..4f49b3654
--- /dev/null
+++ b/plugins/talk-plugin-rich-text/client/utils.js
@@ -0,0 +1,21 @@
+export function htmlNormalizer(htmlInput) {
+  let str = htmlInput;
+  // We are normalizing the input from contenteditable of each browser, also removing unnecesary html tags
+  // https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content#Differences_in_markup_generation
+
+  // Old browsers uses `p` normalize to `div` instead.
+  str = str
+    .replace(/<p>/g, '<div>') // IE and old browsers outputs <p> instead of <div>s
+    .replace(/<\/p>/g, '</div>'); // IE and old browsers outputs <p> instead of <div>s
+
+  // Harmonize all to <b> tag.
+  str = str
+    .replace(/<strong>/g, '<b>') // IE
+    .replace(/<\/strong>/g, '</b>'); // IE
+
+  // Harmonize all to <i> tag.
+  str = str
+    .replace(/<em>/g, '<i>') // IE
+    .replace(/<\/em>/g, '</i>'); // IE
+  return str;
+}
diff --git a/plugins/talk-plugin-rich-text/package.json b/plugins/talk-plugin-rich-text/package.json
index e933626f6..31388e584 100644
--- a/plugins/talk-plugin-rich-text/package.json
+++ b/plugins/talk-plugin-rich-text/package.json
@@ -9,6 +9,7 @@
   "dependencies": {
     "dompurify": "^1.0.3",
     "jsdom": "^11.6.2",
-    "linkifyjs": "^2.1.5"
+    "linkifyjs": "^2.1.5",
+    "react-contenteditable": "^2.0.7"
   }
 }
diff --git a/plugins/talk-plugin-rich-text/server/config.js b/plugins/talk-plugin-rich-text/server/config.js
index 8d0fc87d3..347502d08 100644
--- a/plugins/talk-plugin-rich-text/server/config.js
+++ b/plugins/talk-plugin-rich-text/server/config.js
@@ -13,7 +13,10 @@ const config = {
 
   // TODO: move to admin eventually
   // Super strict rules to make sure users only submit the tags they are allowed
-  dompurify: { ALLOWED_TAGS: ['b', 'i', 'blockquote', 'br'] },
+  dompurify: {
+    ALLOWED_TAGS: ['b', 'i', 'blockquote', 'br', 'div'],
+    ALLOWED_ATTR: [],
+  },
 
   // Secure config for jsdom even when DOMPurify creates a document without a browsing context
   jsdom: {
diff --git a/plugins/talk-plugin-sort-most-downvoted/client/.eslintrc.json b/plugins/talk-plugin-sort-most-downvoted/client/.eslintrc.json
new file mode 100644
index 000000000..c8a6db18a
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-downvoted/client/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "@coralproject/eslint-config-talk/client"
+}
diff --git a/plugins/talk-plugin-sort-most-downvoted/client/index.js b/plugins/talk-plugin-sort-most-downvoted/client/index.js
new file mode 100644
index 000000000..fb6ad544c
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-downvoted/client/index.js
@@ -0,0 +1,19 @@
+import translations from './translations.yml';
+import { createSortOption } from 'talk-plugin-viewing-options/client/api/factories';
+import { t } from 'plugin-api/beta/client/services';
+
+const SortOption = createSortOption(
+  () => t('talk-plugin-sort-most-downvoted.label'),
+  { sortBy: 'DOWNVOTES', sortOrder: 'DESC' }
+);
+
+/**
+ * This plugin depends on talk-plugin-viewing-options.
+ */
+
+export default {
+  translations,
+  slots: {
+    viewingOptionsSort: [SortOption],
+  },
+};
diff --git a/plugins/talk-plugin-sort-most-downvoted/client/translations.yml b/plugins/talk-plugin-sort-most-downvoted/client/translations.yml
new file mode 100644
index 000000000..3bff2eed7
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-downvoted/client/translations.yml
@@ -0,0 +1,3 @@
+en:
+  talk-plugin-sort-most-downvoted:
+    label: Most downvoted first
diff --git a/plugins/talk-plugin-sort-most-downvoted/index.js b/plugins/talk-plugin-sort-most-downvoted/index.js
new file mode 100644
index 000000000..f053ebf79
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-downvoted/index.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/plugins/talk-plugin-sort-most-downvoted/package.json b/plugins/talk-plugin-sort-most-downvoted/package.json
new file mode 100644
index 000000000..5f79e0de9
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-downvoted/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@coralproject/talk-plugin-sort-most-downvoted",
+  "pluginName": "talk-plugin-sort-most-downvoted",
+  "version": "0.0.1",
+  "description": "Sort by most downvotes",
+  "main": "index.js",
+  "author": "The Coral Project Team <coral@mozillafoundation.org>",
+  "license": "Apache-2.0"
+}
diff --git a/plugins/talk-plugin-sort-most-upvoted/client/.eslintrc.json b/plugins/talk-plugin-sort-most-upvoted/client/.eslintrc.json
new file mode 100644
index 000000000..c8a6db18a
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-upvoted/client/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "@coralproject/eslint-config-talk/client"
+}
diff --git a/plugins/talk-plugin-sort-most-upvoted/client/index.js b/plugins/talk-plugin-sort-most-upvoted/client/index.js
new file mode 100644
index 000000000..26744b6d6
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-upvoted/client/index.js
@@ -0,0 +1,19 @@
+import translations from './translations.yml';
+import { createSortOption } from 'talk-plugin-viewing-options/client/api/factories';
+import { t } from 'plugin-api/beta/client/services';
+
+const SortOption = createSortOption(
+  () => t('talk-plugin-sort-most-upvoted.label'),
+  { sortBy: 'UPVOTES', sortOrder: 'DESC' }
+);
+
+/**
+ * This plugin depends on talk-plugin-viewing-options.
+ */
+
+export default {
+  translations,
+  slots: {
+    viewingOptionsSort: [SortOption],
+  },
+};
diff --git a/plugins/talk-plugin-sort-most-upvoted/client/translations.yml b/plugins/talk-plugin-sort-most-upvoted/client/translations.yml
new file mode 100644
index 000000000..7b3c7c29f
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-upvoted/client/translations.yml
@@ -0,0 +1,3 @@
+en:
+  talk-plugin-sort-most-upvoted:
+    label: Most upvoted first
diff --git a/plugins/talk-plugin-sort-most-upvoted/index.js b/plugins/talk-plugin-sort-most-upvoted/index.js
new file mode 100644
index 000000000..f053ebf79
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-upvoted/index.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/plugins/talk-plugin-sort-most-upvoted/package.json b/plugins/talk-plugin-sort-most-upvoted/package.json
new file mode 100644
index 000000000..221e22c22
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-upvoted/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@coralproject/talk-plugin-sort-most-upvoted",
+  "pluginName": "talk-plugin-sort-most-upvoted",
+  "version": "0.0.1",
+  "description": "Sort by most upvotes",
+  "main": "index.js",
+  "author": "The Coral Project Team <coral@mozillafoundation.org>",
+  "license": "Apache-2.0"
+}
diff --git a/plugins/talk-plugin-toxic-comments/client/components/CheckToxicityHook.js b/plugins/talk-plugin-toxic-comments/client/components/CheckToxicityHook.js
index 4331e006b..814c107cc 100644
--- a/plugins/talk-plugin-toxic-comments/client/components/CheckToxicityHook.js
+++ b/plugins/talk-plugin-toxic-comments/client/components/CheckToxicityHook.js
@@ -15,8 +15,11 @@ export default class CheckToxicityHook extends React.Component {
       // If we haven't check the toxicity yet, make sure to include `checkToxicity=true` in the mutation.
       // Otherwise post comment without checking the toxicity.
       if (!this.checked) {
-        input.checkToxicity = true;
         this.checked = true;
+        return {
+          ...input,
+          checkToxicity: true,
+        };
       }
     });
 
diff --git a/plugins/talk-plugin-upvote/client/.eslintrc.json b/plugins/talk-plugin-upvote/client/.eslintrc.json
new file mode 100644
index 000000000..9fe56bd14
--- /dev/null
+++ b/plugins/talk-plugin-upvote/client/.eslintrc.json
@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}
diff --git a/plugins/talk-plugin-upvote/client/components/Icon.js b/plugins/talk-plugin-upvote/client/components/Icon.js
new file mode 100644
index 000000000..1b34c40cd
--- /dev/null
+++ b/plugins/talk-plugin-upvote/client/components/Icon.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import cn from 'classnames';
+
+// @TODO change icon when we deprecate FA
+export default ({ className }) => (
+  <i className={cn('fa', 'fa-arrow-circle-up', className)} aria-hidden="true" />
+);
diff --git a/plugins/talk-plugin-upvote/client/components/UpvoteButton.css b/plugins/talk-plugin-upvote/client/components/UpvoteButton.css
new file mode 100644
index 000000000..56caa60b1
--- /dev/null
+++ b/plugins/talk-plugin-upvote/client/components/UpvoteButton.css
@@ -0,0 +1,39 @@
+.container {
+  display: inline-block;
+}
+
+.button {
+  color: #2a2a2a;
+  margin: 5px 10px 5px 0px;
+  background: none;
+  padding: 0px;
+  border: none;
+  font-size: inherit;
+  vertical-align: middle;
+
+  &:hover {
+    color: #767676;
+    cursor: pointer;
+  }
+
+  &.upvoted {
+    color: #008000;
+
+    &:hover {
+      color: #66b266;
+      cursor: pointer;
+    }
+  }
+}
+
+.icon {
+  font-size: 12px;
+  padding: 0 3px;
+}
+
+@media (max-width: 425px) {
+  .label {
+    display: none;
+  }
+}
+
diff --git a/plugins/talk-plugin-upvote/client/components/UpvoteButton.js b/plugins/talk-plugin-upvote/client/components/UpvoteButton.js
new file mode 100644
index 000000000..c0db1fe01
--- /dev/null
+++ b/plugins/talk-plugin-upvote/client/components/UpvoteButton.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import Icon from './Icon';
+import styles from './UpvoteButton.css';
+import { withReaction } from 'plugin-api/beta/client/hocs';
+import cn from 'classnames';
+
+const plugin = 'talk-plugin-upvote';
+
+class UpvoteButton extends React.Component {
+  handleClick = () => {
+    const {
+      postReaction,
+      deleteReaction,
+      showSignInDialog,
+      alreadyReacted,
+      user,
+    } = this.props;
+
+    // If the current user does not exist, trigger sign in dialog.
+    if (!user) {
+      showSignInDialog();
+      return;
+    }
+
+    if (alreadyReacted) {
+      deleteReaction();
+    } else {
+      postReaction();
+    }
+  };
+
+  render() {
+    const { count, alreadyReacted } = this.props;
+    return (
+      <div className={cn(styles.container, `${plugin}-container`)}>
+        <button
+          className={cn(
+            styles.button,
+            {
+              [`${styles.upvoted} talk-plugin-upvote-upvoted`]: alreadyReacted,
+            },
+            `${plugin}-button`
+          )}
+          onClick={this.handleClick}
+        >
+          <Icon className={cn(styles.icon, `${plugin}-icon`)} />
+          <span className={cn(`${plugin}-count`)}>{count > 0 && count}</span>
+        </button>
+      </div>
+    );
+  }
+}
+
+export default withReaction('upvote')(UpvoteButton);
diff --git a/plugins/talk-plugin-upvote/client/index.js b/plugins/talk-plugin-upvote/client/index.js
new file mode 100644
index 000000000..fd81298da
--- /dev/null
+++ b/plugins/talk-plugin-upvote/client/index.js
@@ -0,0 +1,7 @@
+import UpvoteButton from './components/UpvoteButton';
+
+export default {
+  slots: {
+    commentReactions: [UpvoteButton],
+  },
+};
diff --git a/plugins/talk-plugin-upvote/index.js b/plugins/talk-plugin-upvote/index.js
new file mode 100644
index 000000000..119537ab3
--- /dev/null
+++ b/plugins/talk-plugin-upvote/index.js
@@ -0,0 +1,2 @@
+const { getReactionConfig } = require('../../plugin-api/beta/server');
+module.exports = getReactionConfig('upvote');
diff --git a/plugins/talk-plugin-upvote/package.json b/plugins/talk-plugin-upvote/package.json
new file mode 100644
index 000000000..bf32d911a
--- /dev/null
+++ b/plugins/talk-plugin-upvote/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@coralproject/talk-plugin-upvote",
+  "pluginName": "talk-plugin-upvote",
+  "version": "0.0.1",
+  "description": "Upvote comments",
+  "main": "index.js",
+  "author": "The Coral Project Team <coral@mozillafoundation.org>",
+  "license": "Apache-2.0"
+}
diff --git a/routes/index.js b/routes/index.js
index 143ceefd8..489a5e8b5 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -13,6 +13,7 @@ const staticMiddleware = require('express-static-gzip');
 const { DISABLE_STATIC_SERVER } = require('../config');
 const { passport } = require('../services/passport');
 const { MOUNT_PATH } = require('../url');
+const url = require('url');
 const context = require('../middleware/context');
 
 const router = express.Router();
@@ -31,8 +32,8 @@ if (!DISABLE_STATIC_SERVER) {
   /**
    * Redirect old embed calls.
    */
-  const oldEmbed = path.resolve(MOUNT_PATH, 'embed.js');
-  const newEmbed = path.resolve(MOUNT_PATH, 'static/embed.js');
+  const oldEmbed = url.resolve(MOUNT_PATH, 'embed.js');
+  const newEmbed = url.resolve(MOUNT_PATH, 'static/embed.js');
   router.get('/embed.js', (req, res) => {
     console.warn(
       `deprecation warning: ${oldEmbed} will be phased out soon, please replace calls from ${oldEmbed} to ${newEmbed}`
@@ -132,9 +133,9 @@ if (process.env.NODE_ENV !== 'production') {
   router.get('/', async (req, res, next) => {
     try {
       await SetupService.isAvailable();
-      return res.redirect('/admin/install');
+      return res.redirect(url.resolve(MOUNT_PATH, 'admin/install'));
     } catch (e) {
-      return res.redirect('/admin');
+      return res.redirect(url.resolve(MOUNT_PATH, 'admin'));
     }
   });
 }
diff --git a/services/mailer/templates.js b/services/mailer/templates.js
index 59bcdda5a..d6871dd20 100644
--- a/services/mailer/templates.js
+++ b/services/mailer/templates.js
@@ -1,5 +1,5 @@
 const path = require('path');
-const fs = require('fs-extra');
+const fs = require('fs');
 const { get, set, template } = require('lodash');
 
 // load all the templates as strings
@@ -9,20 +9,20 @@ const templates = {
 };
 
 // Registers a template with the given filename and format.
-templates.register = async (filename, name, format) => {
+templates.register = (filename, name, format) => {
   // Check to see if this template was already registered.
   if (get(templates.registered, [name, format], null) !== null) {
     return;
   }
 
-  const file = await fs.readFile(filename, 'utf8');
+  const file = fs.readFileSync(filename, 'utf8');
   const view = template(file);
 
   set(templates.registered, [name, format], view);
 };
 
 // load the templates per request during development
-templates.render = async (name, format = 'txt', context) => {
+templates.render = (name, format = 'txt', context) => {
   // Check to see if the template is a registered template (provided by a plugin
   // ) and prefer that first.
   let view = get(templates.registered, [name, format], null);
@@ -44,7 +44,7 @@ templates.render = async (name, format = 'txt', context) => {
     'templates',
     [name, format, 'ejs'].join('.')
   );
-  const file = await fs.readFile(filename, 'utf8');
+  const file = fs.readFileSync(filename, 'utf8');
   view = template(file);
 
   if (process.env.NODE_ENV === 'production') {
diff --git a/yarn.lock b/yarn.lock
index 786086d39..342529006 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -80,6 +80,19 @@
     eslint-plugin-react "^7.5.1"
     prettier "^1.10.2"
 
+"@coralproject/gql-format@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@coralproject/gql-format/-/gql-format-0.1.0.tgz#76a0f9a672076482f665781d0c09e39e14f70491"
+  dependencies:
+    graphql "0.9.2"
+
+"@coralproject/gql-merge@^0.1.0":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@coralproject/gql-merge/-/gql-merge-0.1.2.tgz#3e5c79e1da71eb713a4eb3df16f64eaa3de2bad5"
+  dependencies:
+    "@coralproject/gql-format" "^0.1.0"
+    graphql "0.9.2"
+
 "@coralproject/graphql-anywhere-optimized@^0.1.0":
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/@coralproject/graphql-anywhere-optimized/-/graphql-anywhere-optimized-0.1.6.tgz#073b33764c04788b0290788da9ebf0ed21af6437"
@@ -1354,7 +1367,7 @@ bluebird@3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.0.tgz#791420d7f551eea2897453a8a77653f96606d67c"
 
-bluebird@^3.0.6, bluebird@^3.1.1, bluebird@^3.2.2, bluebird@^3.3.4, bluebird@^3.4.0, bluebird@^3.4.6, bluebird@^3.5.0, bluebird@^3.5.1:
+bluebird@^3.0.6, bluebird@^3.1.1, bluebird@^3.2.2, bluebird@^3.3.4, bluebird@^3.4.0, bluebird@^3.5.0, bluebird@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
 
@@ -4284,29 +4297,6 @@ got@^6.7.1:
     unzip-response "^2.0.1"
     url-parse-lax "^1.0.0"
 
-gql-format@^0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/gql-format/-/gql-format-0.0.4.tgz#8237de7647de37f00aba2d0073abf6087e2da119"
-  dependencies:
-    commander "^2.9.0"
-    graphql "^0.7.2"
-
-gql-merge@^0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/gql-merge/-/gql-merge-0.0.4.tgz#1cb1d4cc8bb8768172cf08a45c5a4fbd0ecedc9f"
-  dependencies:
-    commander "^2.9.0"
-    gql-format "^0.0.4"
-    gql-utils "^0.0.2"
-    graphql "^0.7.2"
-
-gql-utils@^0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/gql-utils/-/gql-utils-0.0.2.tgz#962b3c1b34bf965a45d2564a93d3072921f61e86"
-  dependencies:
-    bluebird "^3.4.6"
-    glob "^7.1.1"
-
 graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
@@ -4382,18 +4372,18 @@ graphql-tools@^0.10.1:
   optionalDependencies:
     "@types/graphql" "^0.8.5"
 
+graphql@0.9.2:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.9.2.tgz#2cb5c635de13f790a77c5879649cb401b1589386"
+  dependencies:
+    iterall "1.0.3"
+
 graphql@^0.10.0, graphql@^0.10.1, graphql@^0.10.3:
   version "0.10.5"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.10.5.tgz#c9be17ca2bdfdbd134077ffd9bbaa48b8becd298"
   dependencies:
     iterall "^1.1.0"
 
-graphql@^0.7.2:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.7.2.tgz#cc894a32823399b8a0cb012b9e9ecad35cd00f72"
-  dependencies:
-    iterall "1.0.2"
-
 growl@1.9.2:
   version "1.9.2"
   resolved "https://registry.yarnpkg.com/growl/-/growl-1.9.2.tgz#0ea7743715db8d8de2c5ede1775e1b45ac85c02f"
@@ -5567,9 +5557,9 @@ istanbul-reports@^1.1.2:
   dependencies:
     handlebars "^4.0.3"
 
-iterall@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.0.2.tgz#41a2e96ce9eda5e61c767ee5dc312373bb046e91"
+iterall@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.0.3.tgz#e0b31958f835013c323ff0b10943829ac69aa4b7"
 
 iterall@^1.1.0, iterall@^1.1.1:
   version "1.1.3"
@@ -9190,6 +9180,10 @@ react-broadcast@^0.6.2:
     invariant "^2.2.1"
     prop-types "^15.6.0"
 
+react-contenteditable@^2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/react-contenteditable/-/react-contenteditable-2.0.7.tgz#a8d1c1d7b9a393f336c5ecdb74e5e336d786676b"
+
 react-dom@>=0.14.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"