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 7c0007dc9..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,17 +53,19 @@ 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
-!plugins/talk-plugin-rich-text-pell
 
 **/node_modules/*
 yarn-error.log
diff --git a/README.md b/README.md
index 31e285607..6bdb7fda0 100644
--- a/README.md
+++ b/README.md
@@ -16,15 +16,19 @@ From getting up and running, to advanced configuration, to how to scale Talk, ou
 
 ## Product Guide
 
-Learn more about Talk, including a deep dive into features for commenters and moderators, and FAQs in our [Talk Product Guide](https:/docs.coralproject.net/talk/how-talk-works).
+Learn more about Talk, including a deep dive into features for commenters and moderators, and FAQs in our [Talk Product Guide](https://docs.coralproject.net/talk/how-talk-works).
 
-## Relevant Links
+## Pre-Launch Guide
 
+You’ve installed Talk on your server, and you’re preparing to launch it on your site. The real community work starts now, before you go live. You have a unique opportunity pre-launch to set your community up for success. Read our [Talk Community Guide](https://blog.coralproject.net/youve-installed-talk-now-what/).
+
+## More Resources
+
+- [Talk Product Roadmap](https://www.pivotaltracker.com/n/projects/1863625)
 - [Our Blog](https://blog.coralproject.net/)
 - [Community Forums](https://community.coralproject.net/)
 - [Community Guides for Journalism](https://guides.coralproject.net/)
 - [More About Us](https://coralproject.net/)
-- [Talk Roadmap](https://www.pivotaltracker.com/n/projects/1863625)
 
 ## End-to-End Testing
 
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/reducers/configure.js b/client/coral-embed-stream/src/reducers/configure.js
index 41d87f8d8..48b28ec72 100644
--- a/client/coral-embed-stream/src/reducers/configure.js
+++ b/client/coral-embed-stream/src/reducers/configure.js
@@ -8,7 +8,7 @@ const initialState = {
   errors: {},
 };
 
-export default function config(state = initialState, action) {
+export default function configure(state = initialState, action) {
   switch (action.type) {
     case actions.UPDATE_PENDING: {
       let next = state;
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 191490914..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',
@@ -465,7 +466,6 @@ const mapStateToProps = state => ({
   activeStreamTab: state.stream.activeTab,
   previousStreamTab: state.stream.previousTab,
   commentClassNames: state.stream.commentClassNames,
-  pluginConfig: state.config.plugin_config,
   sortOrder: state.stream.sortOrder,
   sortBy: state.stream.sortBy,
 });
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/client/coral-embed/src/Stream.js b/client/coral-embed/src/Stream.js
index fc8c0d5e7..d0ada6080 100644
--- a/client/coral-embed/src/Stream.js
+++ b/client/coral-embed/src/Stream.js
@@ -161,6 +161,14 @@ export default class Stream {
     );
   }
 
+  enablePluginsDebug() {
+    this.pym.sendMessage('enablePluginsDebug');
+  }
+
+  disablePluginsDebug() {
+    this.pym.sendMessage('disablePluginsDebug');
+  }
+
   login(token) {
     this.pym.sendMessage('login', token);
   }
diff --git a/client/coral-embed/src/StreamInterface.js b/client/coral-embed/src/StreamInterface.js
index 4c6e29970..1e54dd155 100644
--- a/client/coral-embed/src/StreamInterface.js
+++ b/client/coral-embed/src/StreamInterface.js
@@ -7,6 +7,10 @@ export default class StreamInterface {
     return this._stream.emitter.on(eventName, callback);
   }
 
+  off(eventName, callback) {
+    return this._stream.emitter.off(eventName, callback);
+  }
+
   login(token) {
     return this._stream.login(token);
   }
@@ -18,4 +22,12 @@ export default class StreamInterface {
   remove() {
     return this._stream.remove();
   }
+
+  enablePluginsDebug() {
+    return this._stream.enablePluginsDebug();
+  }
+
+  disablePluginsDebug() {
+    return this._stream.disablePluginsDebug();
+  }
 }
diff --git a/client/coral-framework/actions/config.js b/client/coral-framework/actions/config.js
index dd1522333..859fac4d5 100644
--- a/client/coral-framework/actions/config.js
+++ b/client/coral-framework/actions/config.js
@@ -1,6 +1,18 @@
-import { MERGE_CONFIG } from '../constants/config';
+import {
+  MERGE_CONFIG,
+  ENABLE_PLUGINS_DEBUG,
+  DISABLE_PLUGINS_DEBUG,
+} from '../constants/config';
 
 export const mergeConfig = config => ({
   type: MERGE_CONFIG,
   config,
 });
+
+export const enablePluginsDebug = () => ({
+  type: ENABLE_PLUGINS_DEBUG,
+});
+
+export const disablePluginsDebug = () => ({
+  type: DISABLE_PLUGINS_DEBUG,
+});
diff --git a/client/coral-framework/components/Slot.css b/client/coral-framework/components/Slot.css
index 6a95d79ad..69bfe937e 100644
--- a/client/coral-framework/components/Slot.css
+++ b/client/coral-framework/components/Slot.css
@@ -3,5 +3,36 @@
 }
 
 .debug {
-  background-color: coral;
+  background-color: #e2e2e2;
+  border-style: dotted solid;
+  border-width: 2px;
+  border: dotted 2px coral;
+  padding: 2px;
+  margin: 1px;
+  position: relative; 
+}
+
+.debug::before {
+  content: attr(data-slot-name);
+  display: inline-block;
+  position: absolute;
+
+  background: #000;
+  color: #FFF;
+  padding: 5px;
+  border-radius: 5px;
+  opacity: 0;
+  transition: 0.3s;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 999!important;
+  white-space: pre-wrap;
+  min-height: 16px;
+  top: 50%;
+  left: 0;
+}
+
+.debug:hover::before {
+  opacity: 1;
+  top: 100%;
 }
\ No newline at end of file
diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js
index a2f90161f..048c4da80 100644
--- a/client/coral-framework/components/Slot.js
+++ b/client/coral-framework/components/Slot.js
@@ -30,6 +30,7 @@ class Slot extends React.Component {
           className,
           `talk-slot-${kebabCase(fill)}`
         )}
+        data-slot-name={fill}
       >
         {children}
       </Component>
diff --git a/client/coral-framework/constants/config.js b/client/coral-framework/constants/config.js
index bf846af1d..b18b67387 100644
--- a/client/coral-framework/constants/config.js
+++ b/client/coral-framework/constants/config.js
@@ -1,3 +1,5 @@
 const prefix = `TALK_FRAMEWORK`;
 
 export const MERGE_CONFIG = `${prefix}_MERGE_CONFIG`;
+export const ENABLE_PLUGINS_DEBUG = `${prefix}_ENABLE_PLUGINS_DEBUG`;
+export const DISABLE_PLUGINS_DEBUG = `${prefix}_DISABLE_PLUGINS_DEBUG`;
diff --git a/client/coral-framework/hocs/withSlotElements.js b/client/coral-framework/hocs/withSlotElements.js
index a4b39c907..9b432ade8 100644
--- a/client/coral-framework/hocs/withSlotElements.js
+++ b/client/coral-framework/hocs/withSlotElements.js
@@ -83,6 +83,13 @@ const createHOC = ({
         }
 
         if (changes.length === 1 && changes[0] === 'reduxState') {
+          // If config changed, we'll have to rerender everything.
+          // Should only happen during development as this is
+          // usually static.
+          if (this.props.reduxState.config !== next.reduxState.config) {
+            return true;
+          }
+
           const prevChildrenKeys = this.getSlotElements(this.props).map(
             child => child.key
           );
diff --git a/client/coral-framework/reducers/config.js b/client/coral-framework/reducers/config.js
index f7aebd9e2..b063f9b97 100644
--- a/client/coral-framework/reducers/config.js
+++ b/client/coral-framework/reducers/config.js
@@ -1,10 +1,30 @@
-import { MERGE_CONFIG } from '../constants/config';
+import {
+  MERGE_CONFIG,
+  ENABLE_PLUGINS_DEBUG,
+  DISABLE_PLUGINS_DEBUG,
+} from '../constants/config';
 import { LOGOUT } from '../constants/auth';
 
 const initialState = {};
 
 export default function config(state = initialState, action) {
   switch (action.type) {
+    case ENABLE_PLUGINS_DEBUG:
+      return {
+        ...state,
+        plugins_config: {
+          ...state.plugins_config,
+          debug: true,
+        },
+      };
+    case DISABLE_PLUGINS_DEBUG:
+      return {
+        ...state,
+        plugins_config: {
+          ...state.plugins_config,
+          debug: false,
+        },
+      };
     case LOGOUT:
       return {
         ...state,
diff --git a/client/coral-framework/services/bootstrap.js b/client/coral-framework/services/bootstrap.js
index 691404369..e0bfbb950 100644
--- a/client/coral-framework/services/bootstrap.js
+++ b/client/coral-framework/services/bootstrap.js
@@ -25,7 +25,11 @@ import { createIntrospection } from 'coral-framework/services/introspection';
 import introspectionData from 'coral-framework/graphql/introspection.json';
 import coreReducers from '../reducers';
 import { checkLogin as checkLoginAction } from '../actions/auth';
-import { mergeConfig } from '../actions/config';
+import {
+  mergeConfig,
+  enablePluginsDebug,
+  disablePluginsDebug,
+} from '../actions/config';
 import { setAuthToken, logout } from '../actions/auth';
 
 /**
@@ -62,8 +66,19 @@ function initExternalConfig({ store, pym, inIframe }) {
   }
   return new Promise(resolve => {
     pym.sendMessage('getConfig');
-    pym.onMessage('config', config => {
-      store.dispatch(mergeConfig(JSON.parse(config)));
+    pym.onMessage('config', rawConfig => {
+      const config = JSON.parse(rawConfig);
+      if (config.plugin_config) {
+        // @Deprecated
+        if (process.env.NODE_ENV !== 'production') {
+          console.warn(
+            'Deprecation Warning: `config.plugin_config` will be phased out soon, please replace `config.plugin_config  with `config.plugins_config`'
+          );
+        }
+        config.plugins_config = config.plugin_config;
+        delete config.plugin_config;
+      }
+      store.dispatch(mergeConfig(config));
       resolve();
     });
   });
@@ -215,6 +230,14 @@ export async function createContext({
     pym.onMessage('logout', () => {
       store.dispatch(logout());
     });
+
+    pym.onMessage('enablePluginsDebug', () => {
+      store.dispatch(enablePluginsDebug());
+    });
+
+    pym.onMessage('disablePluginsDebug', () => {
+      store.dispatch(disablePluginsDebug());
+    });
   }
 
   const preInitList = [];
diff --git a/client/coral-framework/services/plugins.js b/client/coral-framework/services/plugins.js
index 4c09c1047..bb16fc5e7 100644
--- a/client/coral-framework/services/plugins.js
+++ b/client/coral-framework/services/plugins.js
@@ -11,7 +11,7 @@ import values from 'lodash/values';
 import { getDisplayName } from 'coral-framework/helpers/hoc';
 import camelize from '../helpers/camelize';
 
-// This is returned for pluginConfig when it is empty.
+// This is returned for pluginsConfig when it is empty.
 const emptyConfig = {};
 
 // Memoize the warnings so we only show them once.
@@ -73,10 +73,10 @@ function addMetaDataToSlotComponents(plugins) {
  * query datas are only passed to the component if it is defined in `component.fragments`.
  */
 function getSlotComponentProps(component, reduxState, props, queryData) {
-  const pluginConfig = get(reduxState, 'config.plugin_config') || emptyConfig;
+  const pluginsConfig = get(reduxState, 'config.plugins_config') || emptyConfig;
   return {
     ...props,
-    config: pluginConfig,
+    config: pluginsConfig,
     ...(component.fragments
       ? pick(queryData, Object.keys(component.fragments))
       : withWarnings(component, queryData)),
@@ -125,15 +125,16 @@ class PluginsService {
    * Returns React Elements for given slot.
    */
   getSlotElements(slot, reduxState, props = {}, options = {}) {
-    const pluginConfig = get(reduxState, 'config.plugin_config') || emptyConfig;
+    const pluginsConfig =
+      get(reduxState, 'config.plugins_config') || emptyConfig;
     const { size = 0 } = options;
     const { queryData, rest } = splitProps(props);
 
     const isDisabled = component => {
       if (
-        pluginConfig &&
-        pluginConfig[component.talkPluginName] &&
-        pluginConfig[component.talkPluginName].disable_components
+        pluginsConfig &&
+        pluginsConfig[component.talkPluginName] &&
+        pluginsConfig[component.talkPluginName].disable_components
       ) {
         return true;
       }
diff --git a/config.js b/config.js
index b24c5dfc9..48f554680 100644
--- a/config.js
+++ b/config.js
@@ -53,7 +53,7 @@ const CONFIG = {
     process.env.TALK_LOGGING_LEVEL
   )
     ? process.env.TALK_LOGGING_LEVEL
-    : 'info',
+    : process.env.NODE_ENV === 'test' ? 'fatal' : 'info',
 
   // REVISION_HASH when using the docker build will contain the build hash that
   // it was built at.
diff --git a/docs/_config.yml b/docs/_config.yml
index 2a6fa2725..506bd2542 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -136,6 +136,10 @@ sidebar:
           url: /plugins-directory/
         - title: Plugin Recipes
           url: /plugin-recipes/
+        - title: Slots and Plugins
+          url: /slots-and-plugins/
+        - title: Plugins API
+          url: /plugins-api/
     - title: Tutorials
       children:
         - title: Creating a Basic Plugin
@@ -144,10 +148,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/04-06-slots-and-plugins.md b/docs/source/04-06-slots-and-plugins.md
new file mode 100644
index 000000000..907c85862
--- /dev/null
+++ b/docs/source/04-06-slots-and-plugins.md
@@ -0,0 +1,169 @@
+---
+title: Slots and Plugins
+permalink: /slots-and-plugins/
+---
+
+Plugins make use of **"slots"** in order to change Talk's interface.
+
+By default, Talk has various plugins provided by default. We can see this in `plugins.default.json`: 
+
+```json
+{
+  "server": [
+    "talk-plugin-auth",
+    "talk-plugin-featured-comments",
+    "talk-plugin-offtopic",
+    "talk-plugin-respect"
+  ],
+  "client": [
+    "talk-plugin-auth",
+    "talk-plugin-author-menu",
+    "talk-plugin-comment-content",
+    "talk-plugin-featured-comments",
+    "talk-plugin-flag-details",
+    "talk-plugin-ignore-user",
+    "talk-plugin-member-since",
+    "talk-plugin-moderation-actions",
+    "talk-plugin-offtopic",
+    "talk-plugin-permalink",
+    "talk-plugin-respect",
+    "talk-plugin-sort-most-replied",
+    "talk-plugin-sort-most-respected",
+    "talk-plugin-sort-newest",
+    "talk-plugin-sort-oldest",
+    "talk-plugin-viewing-options",
+    "talk-plugin-profile-settings"
+  ]
+}
+```
+
+Let's only focus on the plugins which are listed under `client` - these are the plugins that use *slots* to inject certain functionality into the Talk UI.
+
+For example, if we look at the Respect plugin (`talk-plugin-respect`), we can see its `client/index.js` looks like this:
+
+
+```js
+import RespectButton from './RespectButton';
+import translations from './translations.yml';
+
+export default {
+  translations,
+  slots: {
+    commentReactions: [RespectButton],
+  },
+};
+
+```
+
+Inside the `slots` property, we specify which **slots** the plugin will use. Above we are saying that the `RespectButton` component is being injected into the slot `commentReactions`.
+
+Slots can receive an Array of components, so we can use one plugin or many for one slot.
+
+### Anatomy of the Slot Component
+
+In Talk core, we have 32 slots available for us to use. The component `Slot` has a `fill` property where we establish the name of the slot. It looks like this:
+
+
+```js
+<Slot 
+  fill="commentReactions"
+	{...props}
+/>
+```
+
+You won't have to use this to build plugins, but it's helpful to find where to embed your plugin.
+
+### Slot List
+
+* `adminCommentDetailArea`
+* `adminCommentMoreDetails`
+* `adminCommentLabels`
+* `adminModerationSettings`
+* `adminStreamSettings`
+* `adminTechSettings`
+* `adminCommentInfoBar`
+* `adminCommentContent`
+* `adminSideActions`
+* `adminModeration`
+* `adminModerationIndicator`
+
+* `commentInputDetailArea`
+* `commentAvatar`
+* `commentAuthorName`
+* `commentAuthorTags`
+* `commentTimestamp`
+* `commentInfoBar`
+* `commentContent`
+* `commentReactions`
+* `commentActions`
+* `commentInputArea`
+
+* `draftArea`
+* `streamSettings`
+* `historyCommentTimestamp`
+* `profileSections`
+* `embed`
+* `stream`
+* `streamFilter`
+* `streamQuestionArea`
+* `login`
+* `userProfile`
+* `userDetailCommentContent`
+
+### Where should I insert my plugin?
+
+The first thing we should consider is what components will be affected by our plugin's functionality. For example, if we want to add functionality to all the comments that are rendered in a total list of comments, we would use the component `Comment`.
+
+The slots that are able to add functionality to comments start with `comment`, like `commentContent`, or `commentReactions`, as you can see above.
+
+### Disabling plugins via `plugins_config`
+
+Typically, you will manage plugins via your `plugins.json` file. If you want to remove a plugin, you would simply delete it there. However, we can also do this directly with the `plugins_config`.
+
+Let's look at our example article, `views/article.ejs`. Here we see we have the Talk embed, and within the embed, we can also send a configuration object. To disable a plugin visually, we can pass `true` to the property `disable_components`. Like so:
+
+
+```js 
+plugins_config: {
+  'talk-plugin-love': {
+    disable_components: true,
+   },
+}
+```
+
+### Sending information to slots and plugins
+
+
+Inside our `plugins_config`, we can also send properities and our plugins will receive them. For example, if we send this:
+
+```js 
+plugins_config: {
+  test: 'data'
+}
+```
+
+The plugin will receive a config object with the properties we've passed. If we do a `console.log` with `this.props`, we would see:
+
+```js
+config: {test: 'data'}
+```
+
+### Debugging slots and plugins
+
+
+You can debug slots and plugins simply by passing the `debug` property with value `true`:
+
+
+```js 
+plugins_config: {
+  debug: true
+}
+```
+
+This will turn on a visual aid to show you all of Talk's available slots and their names. Just move your mouse around!
+
+### Slot ClassNames
+
+Slots autogenerate their classes with the prefix `talk-slot`, followed by the name of the slot in kebab case.
+
+For example, the class autogenerated for the slot `commentContent` is `talk-slot-comment-content`.
diff --git a/docs/source/05-03-Plugins-API.md b/docs/source/04-07-plugins-api.md
similarity index 99%
rename from docs/source/05-03-Plugins-API.md
rename to docs/source/04-07-plugins-api.md
index c15b040cd..2f12fccf5 100644
--- a/docs/source/05-03-Plugins-API.md
+++ b/docs/source/04-07-plugins-api.md
@@ -1,4 +1,7 @@
-# Plugins API
+---
+title: Plugins API
+permalink: /plugins-api/
+---
 We created a set of utilities to make it easier to create and add functionality to plugins.
 Feel free to check all the utilities here:  `talk/plugin-api`.
 
diff --git a/docs/source/_data/plugins.yml b/docs/source/_data/plugins.yml
index 35883ee8f..1b8dcc1c5 100644
--- a/docs/source/_data/plugins.yml
+++ b/docs/source/_data/plugins.yml
@@ -13,8 +13,6 @@
     - default
 - name: talk-plugin-comment-content
   description: Linkifies comment content that contains links.
-  tags:
-    - default
 - name: talk-plugin-deep-reply-count
   description: Enables deep reply count graph edge including all decendant replies.
 - name: talk-plugin-facebook-auth
@@ -79,8 +77,6 @@
     - notifications
 - name: talk-plugin-offtopic
   description: Allows users to mark a comment as off-topic when they create it.
-  tags:
-    - default
 - name: talk-plugin-permalink
   description: Shows a Link button on comments for direct-linking to a comment.
   tags:
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/context.js b/graph/context.js
index 52bb7fdfc..e9ac7ea61 100644
--- a/graph/context.js
+++ b/graph/context.js
@@ -42,6 +42,32 @@ const decorateContextPlugins = (context, contextPlugins) => {
   );
 };
 
+/**
+ * Some pieces of the Context are quite complex to setup, using multiple merges
+ * and other lodash functions. This proxies that access such that it is only
+ * loaded if it is used. Helpful for a query that only uses a loader, and not a
+ * mutator.
+ *
+ * @param {Object} ctx the graph proxy
+ * @param {Function} loader the loadable component that should be proxied
+ */
+const createLazyContextLoader = (ctx, loader) =>
+  new Proxy(
+    { loaded: false, data: null },
+    {
+      get: (obj, prop) => {
+        if (obj.loaded) {
+          return obj.data[prop];
+        }
+
+        obj.data = loader(ctx);
+        obj.loaded = true;
+
+        return obj.data[prop];
+      },
+    }
+  );
+
 /**
  * Stores the request context.
  */
@@ -61,16 +87,18 @@ class Context {
     this.connectors = connectors;
 
     // Create the loaders.
-    this.loaders = loaders(this);
+    this.loaders = createLazyContextLoader(this, loaders);
 
     // Create the mutators.
-    this.mutators = mutators(this);
+    this.mutators = createLazyContextLoader(this, mutators);
 
     // Decorate the plugin context.
-    this.plugins = decorateContextPlugins(this, contextPlugins);
+    this.plugins = createLazyContextLoader(this, () =>
+      decorateContextPlugins(this, contextPlugins)
+    );
 
     // Bind the publish/subscribe to the context.
-    this.pubsub = getBroker();
+    this.pubsub = createLazyContextLoader(this, () => getBroker());
 
     // Bind the parent context.
     this.parent = ctx;
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/middleware/staticTemplate.js b/middleware/staticTemplate.js
index b7d01feb4..01503cca0 100644
--- a/middleware/staticTemplate.js
+++ b/middleware/staticTemplate.js
@@ -13,6 +13,25 @@ const {
 
 const { RECAPTCHA_PUBLIC, WEBSOCKET_LIVE_URI } = require('../config');
 
+// Grab TALK_CLIENT_* environment variables.
+const TALK_CLIENT = /^TALK_CLIENT_/i;
+
+// TALK_CLIENT_ENV is all the environment keys that are loaded at runtime.
+const TALK_CLIENT_ENV = Object.keys(process.env)
+  .filter(key => TALK_CLIENT.test(key))
+  .reduce(
+    (env, key) => {
+      env[key] = process.env[key];
+      return env;
+    },
+    {
+      TALK_RECAPTCHA_PUBLIC: RECAPTCHA_PUBLIC,
+      LIVE_URI: WEBSOCKET_LIVE_URI,
+      STATIC_URL,
+      STATIC_ORIGIN,
+    }
+  );
+
 // TEMPLATE_LOCALS stores the static data that is provided as a `text/json` on
 // to the client from the template.
 const TEMPLATE_LOCALS = {
@@ -20,12 +39,8 @@ const TEMPLATE_LOCALS = {
   BASE_PATH,
   MOUNT_PATH,
   STATIC_URL,
-  data: {
-    TALK_RECAPTCHA_PUBLIC: RECAPTCHA_PUBLIC,
-    LIVE_URI: WEBSOCKET_LIVE_URI,
-    STATIC_URL,
-    STATIC_ORIGIN,
-  },
+  TALK_CLIENT_ENV,
+  data: TALK_CLIENT_ENV,
 };
 
 // attachStaticLocals will attach the locals to the response only.
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/plugin-api/beta/client/selectors/index.js b/plugin-api/beta/client/selectors/index.js
index 97e4623e4..605711dbc 100644
--- a/plugin-api/beta/client/selectors/index.js
+++ b/plugin-api/beta/client/selectors/index.js
@@ -1 +1,2 @@
-export const pluginConfigSelector = state => state.config.pluginConfig;
+export const pluginsConfigSelector = state => state.config.plugins_config;
+export const staticConfigSelector = state => state.config.static;
diff --git a/plugins.default.json b/plugins.default.json
index 066c94478..ca17c79d8 100644
--- a/plugins.default.json
+++ b/plugins.default.json
@@ -2,19 +2,16 @@
   "server": [
     "talk-plugin-auth",
     "talk-plugin-featured-comments",
-    "talk-plugin-offtopic",
     "talk-plugin-respect"
   ],
   "client": [
     "talk-plugin-auth",
     "talk-plugin-author-menu",
-    "talk-plugin-comment-content",
     "talk-plugin-featured-comments",
     "talk-plugin-flag-details",
     "talk-plugin-ignore-user",
     "talk-plugin-member-since",
     "talk-plugin-moderation-actions",
-    "talk-plugin-offtopic",
     "talk-plugin-permalink",
     "talk-plugin-respect",
     "talk-plugin-sort-most-replied",
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-google-auth/README.md b/plugins/talk-plugin-google-auth/README.md
index edf0b9488..f68b56c32 100644
--- a/plugins/talk-plugin-google-auth/README.md
+++ b/plugins/talk-plugin-google-auth/README.md
@@ -11,7 +11,7 @@ plugin:
         - Client
 ---
 
-Enables sign-in via Facebook via the server side passport middleware.
+Enables sign-in via Google+ via the server side passport middleware.
 
 You will need to enable the Google+ API in the dashboard and create credentials
 for a new OAuth client ID web application. The authorized JavaScript origin
@@ -26,4 +26,4 @@ Configuration:
   the [Google API Console](https://console.developers.google.com/apis/).
 - `TALK_GOOGLE_CLIENT_SECRET` (**required**) - The Google OAuth2 client ID for
   your Google login web app. You can learn more about getting a Google Client
-  ID at the [Google API Console](https://console.developers.google.com/apis/).
\ No newline at end of file
+  ID at the [Google API Console](https://console.developers.google.com/apis/).
diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
index 272202d9c..c4603d090 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
@@ -45,9 +45,9 @@ export default class ModerationActions extends React.Component {
             )}
           </span>
           {menuVisible && (
-            <Menu className="talk-plugin-modetarion-actions-menu">
+            <Menu className="talk-plugin-moderation-actions-menu">
               <Slot
-                className="talk-plugin-modetarion-actions-slot"
+                className="talk-plugin-moderation-actions-slot"
                 fill="moderationActions"
                 passthrough={slotPassthrough}
               />
diff --git a/plugins/talk-plugin-notifications/README.md b/plugins/talk-plugin-notifications/README.md
index 0ce1b61a8..58293fee7 100644
--- a/plugins/talk-plugin-notifications/README.md
+++ b/plugins/talk-plugin-notifications/README.md
@@ -15,7 +15,8 @@ anything. You need to enable one of the `talk-plugin-notifications-category-*` p
 
 Configuration:
 
-- `DISABLE_REQUIRE_EMAIL_VERIFICATIONS` - When `TRUE`, it will disable the verification email check before sending notifications for those emails. **Note that organizations implementing a custom authentication system _must_ disable this feature, as they don't use our integrated auth**. (Default `FALSE`).
+- `TALK_DISABLE_REQUIRE_EMAIL_VERIFICATIONS_NOTIFICATIONS` - When `TRUE`, it will disable the verification email check before sending notifications for those emails. **Note that organizations implementing a custom authentication system _must_ disable this feature, as they don't use our integrated auth**. (Default `FALSE`).
+- `TALK_CLIENT_FORCE_NOTIFICATION_SETTINGS` - When `TRUE`, the settings pane for notifications will show always, even if the user does not have a `local` profile. (Default `FALSE`).
 
 You can enable other notification options by adding more
 `talk-plugin-notification-*` plugins!
\ No newline at end of file
diff --git a/plugins/talk-plugin-notifications/client/containers/Settings.js b/plugins/talk-plugin-notifications/client/containers/Settings.js
index 27af031e8..5862650ec 100644
--- a/plugins/talk-plugin-notifications/client/containers/Settings.js
+++ b/plugins/talk-plugin-notifications/client/containers/Settings.js
@@ -9,6 +9,8 @@ import {
 } from 'plugin-api/beta/client/hocs';
 import { getSlotFragmentSpreads } from 'plugin-api/beta/client/utils';
 import { withUpdateNotificationSettings } from '../mutations';
+import { connect } from 'plugin-api/beta/client/hocs';
+import { staticConfigSelector } from 'plugin-api/beta/client/selectors';
 
 const slots = ['notificationSettings'];
 
@@ -42,8 +44,11 @@ class SettingsContainer extends React.Component {
   };
 
   getNeedEmailVerification() {
-    return !this.props.root.me.profiles.some(
-      profile => profile.provider === 'local' && profile.confirmedAt
+    return (
+      this.props.root.settings.notificationsRequireConfirmation &&
+      !this.props.root.me.profiles.some(
+        profile => profile.provider === 'local' && profile.confirmedAt
+      )
     );
   }
 
@@ -94,11 +99,22 @@ const enhance = compose(
             }
           }
         }
+        settings {
+          notificationsRequireConfirmation
+        }
       }
     `,
   }),
+  // Grab the static configuration from the redux store.
+  connect(state => ({
+    static: staticConfigSelector(state),
+  })),
   excludeIf(
     props =>
+      // If the environment variable for TALK_CLIENT_FORCE_NOTIFICATION_SETTINGS
+      // is `TRUE`, then always show it.
+      props.static.TALK_CLIENT_FORCE_NOTIFICATION_SETTINGS !== 'TRUE' &&
+      // Only show the settings pane if we have a local profile otherwise.
       !props.root.me.profiles.some(profile => profile.provider === 'local')
   ),
   withUpdateNotificationSettings,
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-pell/README.md b/plugins/talk-plugin-rich-text-pell/README.md
deleted file mode 100644
index da70d48d0..000000000
--- a/plugins/talk-plugin-rich-text-pell/README.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: talk-plugin-rich-text-pell
-permalink: /plugin/talk-plugin-rich-text-pell/
-layout: plugin
-plugin:
-    name: talk-plugin-rich-text-pell
-    depends:
-        - name: talk-plugin-rich-text
-    provides:
-        - Client
----
-
-Enables rich text support client-side by using [Pell](https://github.com/jaredreich/pell).
-
-## Installation
-
-Add `"talk-plugin-rich-text-pell"` to the `plugins.json` in your Talk
-installation. Remember to add this in the `client` property since this plugin
-only covers the client side. To add server support, please use
-[talk-plugin-rich-text](/talk/plugin/talk-plugin-rich-text).
-
-_Note: Ensure that you don't have any other plugins utilizing the
-`commentContent` slot, as it would result in duplicate comments._
-
-## 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 contains the rich text editor. For this particular plugin
-we chose [Pell](https://github.com/jaredreich/pell). Pell is the simplest and
-smallest WYSIWYG text editor with no dependencies that we could find.
-
-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-pell/client/components/Editor.css b/plugins/talk-plugin-rich-text-pell/client/components/Editor.css
deleted file mode 100644
index 4561e7c6b..000000000
--- a/plugins/talk-plugin-rich-text-pell/client/components/Editor.css
+++ /dev/null
@@ -1,41 +0,0 @@
-.content {
-  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;
-}
-
-.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;
-}
-
-.actionBar {
-  user-select: none;
-  padding: 5px 10px;
-  border-top: 1px solid #bbb;
-  border-left: 1px solid #bbb;
-  border-right: 1px solid #bbb;
-}
-
-.container {
-  box-sizing: border-box;
-}
\ No newline at end of file
diff --git a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
deleted file mode 100644
index c129e146d..000000000
--- a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { init } from 'pell';
-import styles from './Editor.css';
-import cn from 'classnames';
-import { pluginName } from '../../package.json';
-import { htmlNormalizer } from '../utils';
-
-class Editor extends React.Component {
-  ref = null;
-
-  handleRef = ref => (this.ref = ref);
-
-  componentDidMount() {
-    const { onChange, actions, classNames, isReply } = this.props;
-
-    init({
-      element: this.ref,
-      onChange: richTextBody => {
-        // We want to save the original comment body
-        const originalBody = this.ref.childNodes[1].innerText;
-        onChange(originalBody, { richTextBody: htmlNormalizer(richTextBody) });
-      },
-      actions,
-      classes: {
-        actionbar: cn(
-          styles.actionBar,
-          classNames.actionbar,
-          `${pluginName}-action-bar`
-        ),
-        content: cn(
-          styles.content,
-          classNames.content,
-          `${pluginName}-content`
-        ),
-        button: cn(styles.button, classNames.button, `${pluginName}-button`),
-      },
-    });
-
-    // To edit comments and have the previous html comment
-    if (this.props.comment && this.props.comment.richTextBody && !isReply) {
-      this.ref.content.innerHTML = this.props.comment.richTextBody;
-    }
-
-    if (this.props.registerHook) {
-      this.clearInputHook = this.props.registerHook(
-        'postSubmit',
-        (res, handleBodyChange) => {
-          this.ref.content.innerHTML = '';
-          handleBodyChange('', { richTextBody: '' });
-        }
-      );
-    }
-  }
-
-  componentWillUnmount() {
-    this.props.unregisterHook(this.clearInputHook);
-  }
-
-  render() {
-    const { id, classNames } = this.props;
-
-    return (
-      <div
-        id={id}
-        ref={this.handleRef}
-        className={cn(
-          styles.container,
-          classNames.container,
-          `${pluginName}-container`
-        )}
-      />
-    );
-  }
-}
-
-Editor.defaultProps = {
-  defaultContent: '',
-  styleWithCSS: false,
-  actions: [
-    { name: 'bold', icon: '<i class="material-icons">format_bold</i>' },
-    { name: 'italic', icon: '<i class="material-icons">format_italic</i>' },
-    { name: 'quote', icon: '<i class="material-icons">format_quote</i>' },
-  ],
-  classNames: {
-    button: '',
-    content: '',
-    actionbar: '',
-    container: '',
-  },
-};
-
-Editor.propTypes = {
-  id: PropTypes.string,
-  value: PropTypes.string,
-  placeholder: PropTypes.string,
-  onChange: PropTypes.func,
-  disabled: PropTypes.bool,
-  rows: PropTypes.number,
-  comment: PropTypes.object,
-  classNames: PropTypes.object,
-  actions: PropTypes.array,
-  registerHook: PropTypes.func,
-  unregisterHook: PropTypes.func,
-  isReply: PropTypes.bool,
-};
-
-export default Editor;
diff --git a/plugins/talk-plugin-rich-text-pell/package.json b/plugins/talk-plugin-rich-text-pell/package.json
deleted file mode 100644
index 65543a89a..000000000
--- a/plugins/talk-plugin-rich-text-pell/package.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "@coralproject/talk-plugin-rich-text-pell",
-  "pluginName": "talk-plugin-rich-text-pell",
-  "version": "0.0.1",
-  "description": "Pell's Rich Text Editor for Talk",
-  "main": "index.js",
-  "author": "The Coral Project Team <coral@mozillafoundation.org>",
-  "license": "Apache-2.0",
-  "dependencies": {
-    "pell": "^1.0.1"
-  }
-}
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-pell/client/.eslintrc.json b/plugins/talk-plugin-rich-text/client/.eslintrc.json
similarity index 100%
rename from plugins/talk-plugin-rich-text-pell/client/.eslintrc.json
rename to plugins/talk-plugin-rich-text/client/.eslintrc.json
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-pell/client/components/CommentContent.js b/plugins/talk-plugin-rich-text/client/components/CommentContent.js
similarity index 60%
rename from plugins/talk-plugin-rich-text-pell/client/components/CommentContent.js
rename to plugins/talk-plugin-rich-text/client/components/CommentContent.js
index 7e4a202bc..2cf481830 100644
--- a/plugins/talk-plugin-rich-text-pell/client/components/CommentContent.js
+++ b/plugins/talk-plugin-rich-text/client/components/CommentContent.js
@@ -1,17 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { pluginName } from '../../package.json';
+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={`${pluginName}-text`}
+        className={className}
         dangerouslySetInnerHTML={{ __html: comment.richTextBody }}
       />
     ) : (
-      <div className={`${pluginName}-text`}>{comment.body}</div>
+      <div className={className}>{comment.body}</div>
     );
   }
 }
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-pell/client/containers/CommentContent.js b/plugins/talk-plugin-rich-text/client/containers/CommentContent.js
similarity index 79%
rename from plugins/talk-plugin-rich-text-pell/client/containers/CommentContent.js
rename to plugins/talk-plugin-rich-text/client/containers/CommentContent.js
index 8bd36da23..b1b320a99 100644
--- a/plugins/talk-plugin-rich-text-pell/client/containers/CommentContent.js
+++ b/plugins/talk-plugin-rich-text/client/containers/CommentContent.js
@@ -4,7 +4,7 @@ import CommentContent from '../components/CommentContent';
 
 export default withFragments({
   comment: gql`
-    fragment TalkPluginRTE_CommentContent_comment on Comment {
+    fragment TalkPluginRichText_CommentContent_comment on Comment {
       body
       richTextBody
     }
diff --git a/plugins/talk-plugin-rich-text-pell/client/containers/Editor.js b/plugins/talk-plugin-rich-text/client/containers/Editor.js
similarity index 80%
rename from plugins/talk-plugin-rich-text-pell/client/containers/Editor.js
rename to plugins/talk-plugin-rich-text/client/containers/Editor.js
index 2bdc3490f..7283fec37 100644
--- a/plugins/talk-plugin-rich-text-pell/client/containers/Editor.js
+++ b/plugins/talk-plugin-rich-text/client/containers/Editor.js
@@ -4,7 +4,7 @@ import Editor from '../components/Editor';
 
 export default withFragments({
   comment: gql`
-    fragment TalkPluginRTE_Editor_comment on Comment {
+    fragment TalkPluginRichText_Editor_comment on Comment {
       body
       richTextBody
     }
diff --git a/plugins/talk-plugin-rich-text-pell/client/index.js b/plugins/talk-plugin-rich-text/client/index.js
similarity index 87%
rename from plugins/talk-plugin-rich-text-pell/client/index.js
rename to plugins/talk-plugin-rich-text/client/index.js
index cf9eb11cd..6eb7a8c95 100644
--- a/plugins/talk-plugin-rich-text-pell/client/index.js
+++ b/plugins/talk-plugin-rich-text/client/index.js
@@ -11,14 +11,14 @@ export default {
   },
   fragments: {
     CreateCommentResponse: gql`
-      fragment TalkRTE_CreateCommentResponse on CreateCommentResponse {
+      fragment TalkRichText_CreateCommentResponse on CreateCommentResponse {
         comment {
           richTextBody
         }
       }
     `,
     EditCommentResponse: gql`
-      fragment TalkRTE_EditCommentResponse on EditCommentResponse {
+      fragment TalkRichText_EditCommentResponse on EditCommentResponse {
         comment {
           richTextBody
         }
@@ -48,7 +48,7 @@ export default {
         },
         update: proxy => {
           const editCommentFragment = gql`
-            fragment Talk_EditComment on Comment {
+            fragment TalkRichText_EditComment on Comment {
               richTextBody
             }
           `;
diff --git a/plugins/talk-plugin-rich-text-pell/client/utils.js b/plugins/talk-plugin-rich-text/client/utils.js
similarity index 63%
rename from plugins/talk-plugin-rich-text-pell/client/utils.js
rename to plugins/talk-plugin-rich-text/client/utils.js
index 6155fbfb2..4f49b3654 100644
--- a/plugins/talk-plugin-rich-text-pell/client/utils.js
+++ b/plugins/talk-plugin-rich-text/client/utils.js
@@ -8,13 +8,14 @@ export function htmlNormalizer(htmlInput) {
     .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
 
-  // Remove first opening tag, otherwise
-  // with the following transformation below
-  // we might add an unintended first empty line.
-  if (str.startsWith('<div>')) {
-    str = str.replace('<div>', '');
-  }
+  // Harmonize all to <b> tag.
+  str = str
+    .replace(/<strong>/g, '<b>') // IE
+    .replace(/<\/strong>/g, '</b>'); // IE
 
-  // Normalize <div>s to <br>.
-  return str.replace(/<div>/g, '<br>').replace(/<\/div>/g, '');
+  // 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-rich-text-pell/index.js b/plugins/talk-plugin-sort-most-downvoted/index.js
similarity index 100%
rename from plugins/talk-plugin-rich-text-pell/index.js
rename to plugins/talk-plugin-sort-most-downvoted/index.js
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/api/v1/account.js b/routes/api/v1/account.js
index e1395323d..f7d8ea126 100644
--- a/routes/api/v1/account.js
+++ b/routes/api/v1/account.js
@@ -80,7 +80,7 @@ router.post('/password/reset', async (req, res, next) => {
           token,
         },
         subject: 'Password Reset',
-        to: email,
+        email,
       });
     }
 
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/logging.js b/services/logging.js
index 00e9c523b..47ef93af8 100644
--- a/services/logging.js
+++ b/services/logging.js
@@ -1,18 +1,18 @@
 const { version } = require('../package.json');
 const Logger = require('bunyan');
 const { LOGGING_LEVEL, REVISION_HASH } = require('../config');
+const logger = new Logger({
+  src: true,
+  name: 'talk',
+  version,
+  revision: REVISION_HASH,
+  level: LOGGING_LEVEL,
+  serializers: Logger.stdSerializers,
+});
 
 // Create the logging instance that all logger's are branched from.
 function createLogger(name, traceID) {
-  return new Logger({
-    src: true,
-    name,
-    traceID,
-    version,
-    revision: REVISION_HASH,
-    level: LOGGING_LEVEL,
-    serializers: Logger.stdSerializers,
-  });
+  return logger.child({ origin: name, traceID });
 }
 
-module.exports = { createLogger };
+module.exports = { logger, createLogger };
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/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js
index fab864987..be60fc8d0 100644
--- a/test/e2e/page_objects/embedStream.js
+++ b/test/e2e/page_objects/embedStream.js
@@ -129,7 +129,7 @@ module.exports = {
           selector: '.talk-plugin-moderation-actions',
           elements: {
             arrow: '.talk-plugin-moderation-actions-arrow',
-            menu: '.talk-plugin-modetarion-actions-menu',
+            menu: '.talk-plugin-moderation-actions-menu',
             banButton: '.talk-plugin-moderation-actions-ban',
           },
         },
diff --git a/views/article.ejs b/views/article.ejs
index 70852112e..4e12fa04a 100644
--- a/views/article.ejs
+++ b/views/article.ejs
@@ -42,7 +42,7 @@
          *    });
          *  },
          */
-        plugin_config: {
+        plugins_config: {
           /**
            *  You can disable rendering slot components of a plugin by doing:
            *
diff --git a/yarn.lock b/yarn.lock
index 3556a26ba..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"
@@ -8239,10 +8229,6 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-pell@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/pell/-/pell-1.0.1.tgz#8f1e97165001024e5f371e0ce0b329457c847b5d"
-
 pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
@@ -9194,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"