From 8aa8517d1d17f6e1f791643531c85e1bc58d099e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 19 Mar 2018 00:29:01 +0100
Subject: [PATCH 01/28] Implement Coral RTE

---
 .gitignore                                    |   1 +
 plugins/talk-plugin-rich-text-coral/README.md |  47 ++++++
 .../client/.eslintrc.json                     |   3 +
 .../client/components/Button.css              |  20 +++
 .../client/components/Button.js               |  29 ++++
 .../client/components/CommentContent.js       |  23 +++
 .../client/components/Editor.css              |  12 ++
 .../client/components/Editor.js               | 137 ++++++++++++++++++
 .../client/components/Toolbar.css             |   7 +
 .../client/components/Toolbar.js              |  17 +++
 .../client/constants.js                       |   1 +
 .../client/containers/CommentContent.js       |  12 ++
 .../client/containers/Editor.js               |  12 ++
 .../client/index.js                           |  70 +++++++++
 .../client/utils.js                           |  31 ++++
 plugins/talk-plugin-rich-text-coral/index.js  |   1 +
 .../talk-plugin-rich-text-coral/package.json  |  12 ++
 .../talk-plugin-rich-text/server/config.js    |   5 +-
 yarn.lock                                     |   4 +
 19 files changed, 443 insertions(+), 1 deletion(-)
 create mode 100644 plugins/talk-plugin-rich-text-coral/README.md
 create mode 100644 plugins/talk-plugin-rich-text-coral/client/.eslintrc.json
 create mode 100644 plugins/talk-plugin-rich-text-coral/client/components/Button.css
 create mode 100644 plugins/talk-plugin-rich-text-coral/client/components/Button.js
 create mode 100644 plugins/talk-plugin-rich-text-coral/client/components/CommentContent.js
 create mode 100644 plugins/talk-plugin-rich-text-coral/client/components/Editor.css
 create mode 100644 plugins/talk-plugin-rich-text-coral/client/components/Editor.js
 create mode 100644 plugins/talk-plugin-rich-text-coral/client/components/Toolbar.css
 create mode 100644 plugins/talk-plugin-rich-text-coral/client/components/Toolbar.js
 create mode 100644 plugins/talk-plugin-rich-text-coral/client/constants.js
 create mode 100644 plugins/talk-plugin-rich-text-coral/client/containers/CommentContent.js
 create mode 100644 plugins/talk-plugin-rich-text-coral/client/containers/Editor.js
 create mode 100644 plugins/talk-plugin-rich-text-coral/client/index.js
 create mode 100644 plugins/talk-plugin-rich-text-coral/client/utils.js
 create mode 100644 plugins/talk-plugin-rich-text-coral/index.js
 create mode 100644 plugins/talk-plugin-rich-text-coral/package.json

diff --git a/.gitignore b/.gitignore
index 7c0007dc9..230acae6e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -62,6 +62,7 @@ plugins/*
 !plugins/talk-plugin-toxic-comments
 !plugins/talk-plugin-viewing-options
 !plugins/talk-plugin-rich-text
+!plugins/talk-plugin-rich-text-coral
 !plugins/talk-plugin-rich-text-pell
 
 **/node_modules/*
diff --git a/plugins/talk-plugin-rich-text-coral/README.md b/plugins/talk-plugin-rich-text-coral/README.md
new file mode 100644
index 000000000..f953a65cd
--- /dev/null
+++ b/plugins/talk-plugin-rich-text-coral/README.md
@@ -0,0 +1,47 @@
+---
+title: talk-plugin-rich-text-coral
+permalink: /plugin/talk-plugin-rich-text-coral/
+layout: plugin
+plugin:
+    name: talk-plugin-rich-text-coral
+    depends:
+        - name: talk-plugin-rich-text
+    provides:
+        - Client
+---
+
+Enables rich text support client-side by using a simple RTE.
+
+## Installation
+
+Add `"talk-plugin-rich-text-coral"` 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 uses [contentEditable](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content). 
+
+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-coral/client/.eslintrc.json b/plugins/talk-plugin-rich-text-coral/client/.eslintrc.json
new file mode 100644
index 000000000..c8a6db18a
--- /dev/null
+++ b/plugins/talk-plugin-rich-text-coral/client/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "@coralproject/eslint-config-talk/client"
+}
diff --git a/plugins/talk-plugin-rich-text-coral/client/components/Button.css b/plugins/talk-plugin-rich-text-coral/client/components/Button.css
new file mode 100644
index 000000000..f9f1ba186
--- /dev/null
+++ b/plugins/talk-plugin-rich-text-coral/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-coral/client/components/Button.js b/plugins/talk-plugin-rich-text-coral/client/components/Button.js
new file mode 100644
index 000000000..330e3d993
--- /dev/null
+++ b/plugins/talk-plugin-rich-text-coral/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-coral/client/components/CommentContent.js b/plugins/talk-plugin-rich-text-coral/client/components/CommentContent.js
new file mode 100644
index 000000000..a0e045c6f
--- /dev/null
+++ b/plugins/talk-plugin-rich-text-coral/client/components/CommentContent.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { PLUGIN_NAME } from '../constants';
+
+class CommentContent extends React.Component {
+  render() {
+    const { comment } = this.props;
+    return comment.richTextBody ? (
+      <div
+        className={`${PLUGIN_NAME}-text`}
+        dangerouslySetInnerHTML={{ __html: comment.richTextBody }}
+      />
+    ) : (
+      <div className={`${PLUGIN_NAME}-text`}>{comment.body}</div>
+    );
+  }
+}
+
+CommentContent.propTypes = {
+  comment: PropTypes.object.isRequired,
+};
+
+export default CommentContent;
diff --git a/plugins/talk-plugin-rich-text-coral/client/components/Editor.css b/plugins/talk-plugin-rich-text-coral/client/components/Editor.css
new file mode 100644
index 000000000..f102067a5
--- /dev/null
+++ b/plugins/talk-plugin-rich-text-coral/client/components/Editor.css
@@ -0,0 +1,12 @@
+.contentEditable {
+  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;
+}
+
diff --git a/plugins/talk-plugin-rich-text-coral/client/components/Editor.js b/plugins/talk-plugin-rich-text-coral/client/components/Editor.js
new file mode 100644
index 000000000..f6491572b
--- /dev/null
+++ b/plugins/talk-plugin-rich-text-coral/client/components/Editor.js
@@ -0,0 +1,137 @@
+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);
+  state = {
+    html:
+      !this.props.isReply && this.props.comment
+        ? this.props.comment.richTextBody || this.props.comment.body || ''
+        : '',
+  };
+
+  handleChange = evt => {
+    const html = evt.target.value;
+    this.setState({ html });
+    this.props.onChange(this.ref.htmlEl.innerText, {
+      richTextBody: htmlNormalizer(html),
+    });
+  };
+
+  componentDidMount() {
+    if (this.props.registerHook) {
+      this.clearInputHook = this.props.registerHook(
+        'postSubmit',
+        (res, handleBodyChange) => {
+          this.setState({ html: '' });
+          handleBodyChange('', { richTextBody: '' });
+        }
+      );
+    }
+  }
+
+  shouldComponentUpdate(nextProps) {
+    if (this.props.value !== nextProps.value) {
+      return false;
+    }
+    return true;
+  }
+
+  componentWillUnmount() {
+    this.props.unregisterHook(this.clearInputHook);
+  }
+
+  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 { id } = this.props;
+    return (
+      <div className={cn(styles.root, `${PLUGIN_NAME}-container`)}>
+        <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>
+        <ContentEditable
+          onKeyPress={this.outdentOnEnter}
+          className={styles.contentEditable}
+          id={id}
+          ref={this.handleRef}
+          html={this.state.html} // innerHTML of the editable div
+          disabled={false} // use true to disable edition
+          onChange={this.handleChange} // handle innerHTML change
+        />
+      </div>
+    );
+  }
+}
+
+Editor.propTypes = {
+  rows: PropTypes.number, // TODO: should not be passed.
+  id: PropTypes.string, // TODO: should not be passed.
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  comment: PropTypes.object,
+  classNames: PropTypes.object,
+  registerHook: PropTypes.func,
+  unregisterHook: PropTypes.func,
+  isReply: PropTypes.bool,
+};
+
+export default Editor;
diff --git a/plugins/talk-plugin-rich-text-coral/client/components/Toolbar.css b/plugins/talk-plugin-rich-text-coral/client/components/Toolbar.css
new file mode 100644
index 000000000..f4880f432
--- /dev/null
+++ b/plugins/talk-plugin-rich-text-coral/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-coral/client/components/Toolbar.js b/plugins/talk-plugin-rich-text-coral/client/components/Toolbar.js
new file mode 100644
index 000000000..f3112e813
--- /dev/null
+++ b/plugins/talk-plugin-rich-text-coral/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-coral/client/constants.js b/plugins/talk-plugin-rich-text-coral/client/constants.js
new file mode 100644
index 000000000..40ea81053
--- /dev/null
+++ b/plugins/talk-plugin-rich-text-coral/client/constants.js
@@ -0,0 +1 @@
+export const PLUGIN_NAME = 'talk-plugin-rich-text-coral';
diff --git a/plugins/talk-plugin-rich-text-coral/client/containers/CommentContent.js b/plugins/talk-plugin-rich-text-coral/client/containers/CommentContent.js
new file mode 100644
index 000000000..99b65c22c
--- /dev/null
+++ b/plugins/talk-plugin-rich-text-coral/client/containers/CommentContent.js
@@ -0,0 +1,12 @@
+import { gql } from 'react-apollo';
+import { withFragments } from 'plugin-api/beta/client/hocs';
+import CommentContent from '../components/CommentContent';
+
+export default withFragments({
+  comment: gql`
+    fragment TalkPluginRichTextCoral_CommentContent_comment on Comment {
+      body
+      richTextBody
+    }
+  `,
+})(CommentContent);
diff --git a/plugins/talk-plugin-rich-text-coral/client/containers/Editor.js b/plugins/talk-plugin-rich-text-coral/client/containers/Editor.js
new file mode 100644
index 000000000..f748e7344
--- /dev/null
+++ b/plugins/talk-plugin-rich-text-coral/client/containers/Editor.js
@@ -0,0 +1,12 @@
+import { gql } from 'react-apollo';
+import { withFragments } from 'plugin-api/beta/client/hocs';
+import Editor from '../components/Editor';
+
+export default withFragments({
+  comment: gql`
+    fragment TalkPluginRichTextCoral_Editor_comment on Comment {
+      body
+      richTextBody
+    }
+  `,
+})(Editor);
diff --git a/plugins/talk-plugin-rich-text-coral/client/index.js b/plugins/talk-plugin-rich-text-coral/client/index.js
new file mode 100644
index 000000000..8cab68f8d
--- /dev/null
+++ b/plugins/talk-plugin-rich-text-coral/client/index.js
@@ -0,0 +1,70 @@
+import Editor from './containers/Editor';
+import CommentContent from './containers/CommentContent';
+import { gql } from 'react-apollo';
+
+export default {
+  slots: {
+    draftArea: [Editor],
+    commentContent: [CommentContent],
+    adminCommentContent: [CommentContent],
+    userDetailCommentContent: [CommentContent],
+  },
+  fragments: {
+    CreateCommentResponse: gql`
+      fragment TalkRichTextCoral_CreateCommentResponse on CreateCommentResponse {
+        comment {
+          richTextBody
+        }
+      }
+    `,
+    EditCommentResponse: gql`
+      fragment TalkRichTextCoral_EditCommentResponse on EditCommentResponse {
+        comment {
+          richTextBody
+        }
+      }
+    `,
+  },
+  mutations: {
+    PostComment: ({ variables: { input } }) => {
+      return {
+        optimisticResponse: {
+          createComment: {
+            comment: {
+              richTextBody: input.richTextBody,
+            },
+          },
+        },
+      };
+    },
+    EditComment: ({ variables: { id, edit } }) => {
+      return {
+        optimisticResponse: {
+          editComment: {
+            comment: {
+              richTextBody: edit.richTextBody,
+            },
+          },
+        },
+        update: proxy => {
+          const editCommentFragment = gql`
+            fragment TalkRichTextCoral_EditComment on Comment {
+              richTextBody
+            }
+          `;
+
+          const fragmentId = `Comment_${id}`;
+
+          proxy.writeFragment({
+            fragment: editCommentFragment,
+            id: fragmentId,
+            data: {
+              __typename: 'Comment',
+              richTextBody: edit.richTextBody,
+            },
+          });
+        },
+      };
+    },
+  },
+};
diff --git a/plugins/talk-plugin-rich-text-coral/client/utils.js b/plugins/talk-plugin-rich-text-coral/client/utils.js
new file mode 100644
index 000000000..a617d618e
--- /dev/null
+++ b/plugins/talk-plugin-rich-text-coral/client/utils.js
@@ -0,0 +1,31 @@
+export function htmlNormalizer(htmlInput) {
+  let str = htmlInput;
+  // We are normalizing the input from contenteditable of each browser, also removing unnecesary html tags
+  // https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content#Differences_in_markup_generation
+
+  // Old browsers uses `p` normalize to `div` instead.
+  str = str
+    .replace(/<p>/g, '<div>') // IE and old browsers outputs <p> instead of <div>s
+    .replace(/<\/p>/g, '</div>'); // IE and old browsers outputs <p> instead of <div>s
+
+  // Harmonize all to <b> tag.
+  str = str
+    .replace(/<strong>/g, '<b>') // IE
+    .replace(/<\/strong>/g, '</b>'); // IE
+
+  // Harmonize all to <i> tag.
+  str = str
+    .replace(/<em>/g, '<i>') // IE
+    .replace(/<\/em>/g, '</i>'); // IE
+
+  // 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>', '');
+  }
+
+  // Normalize <div>s to <br>.
+  // return str.replace(/<div>/g, '<br>').replace(/<\/div>/g, '');
+  return str;
+}
diff --git a/plugins/talk-plugin-rich-text-coral/index.js b/plugins/talk-plugin-rich-text-coral/index.js
new file mode 100644
index 000000000..f053ebf79
--- /dev/null
+++ b/plugins/talk-plugin-rich-text-coral/index.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/plugins/talk-plugin-rich-text-coral/package.json b/plugins/talk-plugin-rich-text-coral/package.json
new file mode 100644
index 000000000..f15b565e7
--- /dev/null
+++ b/plugins/talk-plugin-rich-text-coral/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@coralproject/talk-plugin-rich-text-coral",
+  "pluginName": "talk-plugin-rich-text-coral",
+  "version": "0.0.1",
+  "description": "Simple Rich Text Editor for Talk",
+  "main": "index.js",
+  "author": "The Coral Project Team <coral@mozillafoundation.org>",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "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/yarn.lock b/yarn.lock
index 135719b51..e8093adf1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9142,6 +9142,10 @@ react-apollo@^1.4.12:
     object-assign "^4.0.1"
     prop-types "^15.5.8"
 
+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"

From 3821477ef0114eb16bcb6097af4907c3343d99b2 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 19 Mar 2018 00:32:06 +0100
Subject: [PATCH 02/28] Remove some comments

---
 .../talk-plugin-rich-text-coral/client/components/Editor.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/plugins/talk-plugin-rich-text-coral/client/components/Editor.js b/plugins/talk-plugin-rich-text-coral/client/components/Editor.js
index f6491572b..b22fd0df4 100644
--- a/plugins/talk-plugin-rich-text-coral/client/components/Editor.js
+++ b/plugins/talk-plugin-rich-text-coral/client/components/Editor.js
@@ -111,9 +111,9 @@ class Editor extends React.Component {
           className={styles.contentEditable}
           id={id}
           ref={this.handleRef}
-          html={this.state.html} // innerHTML of the editable div
-          disabled={false} // use true to disable edition
-          onChange={this.handleChange} // handle innerHTML change
+          html={this.state.html}
+          disabled={false}
+          onChange={this.handleChange}
         />
       </div>
     );

From 497225139dd1a7bf09d4d82f6fe3120dca7a5b55 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Tue, 20 Mar 2018 10:14:41 -0400
Subject: [PATCH 03/28] Adding upvote and downvote plugins and sorting plugins
 for each

---
 .gitignore                                    |  5 +-
 .../client/.eslintrc.json                     | 23 ++++++++
 .../client/components/DownvoteButton.css      | 39 +++++++++++++
 .../client/components/DownvoteButton.js       | 56 +++++++++++++++++++
 .../client/components/Icon.js                 |  9 +++
 plugins/talk-plugin-downvote/client/index.js  | 25 +++++++++
 plugins/talk-plugin-downvote/index.js         |  2 +
 .../client/.eslintrc.json                     |  3 +
 .../client/index.js                           | 19 +++++++
 .../client/translations.yml                   |  3 +
 .../talk-plugin-sort-most-downvoted/index.js  |  1 +
 .../client/.eslintrc.json                     |  3 +
 .../client/index.js                           | 19 +++++++
 .../client/translations.yml                   |  3 +
 .../talk-plugin-sort-most-upvoted/index.js    |  1 +
 .../talk-plugin-upvote/client/.eslintrc.json  | 23 ++++++++
 .../client/components/Icon.js                 |  6 ++
 .../client/components/UpvoteButton.css        | 39 +++++++++++++
 .../client/components/UpvoteButton.js         | 54 ++++++++++++++++++
 plugins/talk-plugin-upvote/client/index.js    | 25 +++++++++
 plugins/talk-plugin-upvote/index.js           |  2 +
 21 files changed, 359 insertions(+), 1 deletion(-)
 create mode 100644 plugins/talk-plugin-downvote/client/.eslintrc.json
 create mode 100644 plugins/talk-plugin-downvote/client/components/DownvoteButton.css
 create mode 100644 plugins/talk-plugin-downvote/client/components/DownvoteButton.js
 create mode 100644 plugins/talk-plugin-downvote/client/components/Icon.js
 create mode 100644 plugins/talk-plugin-downvote/client/index.js
 create mode 100644 plugins/talk-plugin-downvote/index.js
 create mode 100644 plugins/talk-plugin-sort-most-downvoted/client/.eslintrc.json
 create mode 100644 plugins/talk-plugin-sort-most-downvoted/client/index.js
 create mode 100644 plugins/talk-plugin-sort-most-downvoted/client/translations.yml
 create mode 100644 plugins/talk-plugin-sort-most-downvoted/index.js
 create mode 100644 plugins/talk-plugin-sort-most-upvoted/client/.eslintrc.json
 create mode 100644 plugins/talk-plugin-sort-most-upvoted/client/index.js
 create mode 100644 plugins/talk-plugin-sort-most-upvoted/client/translations.yml
 create mode 100644 plugins/talk-plugin-sort-most-upvoted/index.js
 create mode 100644 plugins/talk-plugin-upvote/client/.eslintrc.json
 create mode 100644 plugins/talk-plugin-upvote/client/components/Icon.js
 create mode 100644 plugins/talk-plugin-upvote/client/components/UpvoteButton.css
 create mode 100644 plugins/talk-plugin-upvote/client/components/UpvoteButton.js
 create mode 100644 plugins/talk-plugin-upvote/client/index.js
 create mode 100644 plugins/talk-plugin-upvote/index.js

diff --git a/.gitignore b/.gitignore
index 7c0007dc9..50e490095 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,6 +30,7 @@ plugins/*
 !plugins/talk-plugin-author-menu
 !plugins/talk-plugin-comment-content
 !plugins/talk-plugin-deep-reply-count
+!plugins/talk-plugin-downvote
 !plugins/talk-plugin-facebook-auth
 !plugins/talk-plugin-featured-comments
 !plugins/talk-plugin-flag-details
@@ -52,14 +53,16 @@ plugins/*
 !plugins/talk-plugin-remember-sort
 !plugins/talk-plugin-respect
 !plugins/talk-plugin-slack-notifications
-!plugins/talk-plugin-sort-most-liked
+!plugins/talk-plugin-sort-most-downvoted
 !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
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..13d91fa9c
--- /dev/null
+++ b/plugins/talk-plugin-downvote/client/components/Icon.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import cn from 'classnames';
+
+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..11eee3bda
--- /dev/null
+++ b/plugins/talk-plugin-downvote/client/index.js
@@ -0,0 +1,25 @@
+/**
+  This is a client index example file and it could look like this:
+  
+  ```
+  import LoveButton from './components/LoveButton';
+
+  export default {
+    slots: {
+      commentReactions: [LoveButton]
+    },
+    reducer,
+    translations
+  };
+  ```
+
+  To read more info on how to build client plugins. Please, go to: https://docs.coralproject.net/talk/plugins-client
+ */
+
+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-sort-most-downvoted/client/.eslintrc.json b/plugins/talk-plugin-sort-most-downvoted/client/.eslintrc.json
new file mode 100644
index 000000000..c8a6db18a
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-downvoted/client/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "@coralproject/eslint-config-talk/client"
+}
diff --git a/plugins/talk-plugin-sort-most-downvoted/client/index.js b/plugins/talk-plugin-sort-most-downvoted/client/index.js
new file mode 100644
index 000000000..fb6ad544c
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-downvoted/client/index.js
@@ -0,0 +1,19 @@
+import translations from './translations.yml';
+import { createSortOption } from 'talk-plugin-viewing-options/client/api/factories';
+import { t } from 'plugin-api/beta/client/services';
+
+const SortOption = createSortOption(
+  () => t('talk-plugin-sort-most-downvoted.label'),
+  { sortBy: 'DOWNVOTES', sortOrder: 'DESC' }
+);
+
+/**
+ * This plugin depends on talk-plugin-viewing-options.
+ */
+
+export default {
+  translations,
+  slots: {
+    viewingOptionsSort: [SortOption],
+  },
+};
diff --git a/plugins/talk-plugin-sort-most-downvoted/client/translations.yml b/plugins/talk-plugin-sort-most-downvoted/client/translations.yml
new file mode 100644
index 000000000..3bff2eed7
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-downvoted/client/translations.yml
@@ -0,0 +1,3 @@
+en:
+  talk-plugin-sort-most-downvoted:
+    label: Most downvoted first
diff --git a/plugins/talk-plugin-sort-most-downvoted/index.js b/plugins/talk-plugin-sort-most-downvoted/index.js
new file mode 100644
index 000000000..f053ebf79
--- /dev/null
+++ b/plugins/talk-plugin-sort-most-downvoted/index.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/plugins/talk-plugin-sort-most-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-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..b715f68f7
--- /dev/null
+++ b/plugins/talk-plugin-upvote/client/components/Icon.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import cn from 'classnames';
+
+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..4f88ee194
--- /dev/null
+++ b/plugins/talk-plugin-upvote/client/index.js
@@ -0,0 +1,25 @@
+/**
+  This is a client index example file and it could look like this:
+  
+  ```
+  import LoveButton from './components/LoveButton';
+
+  export default {
+    slots: {
+      commentReactions: [LoveButton]
+    },
+    reducer,
+    translations
+  };
+  ```
+
+  To read more info on how to build client plugins. Please, go to: https://docs.coralproject.net/talk/plugins-client
+ */
+
+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');

From 025604c4cd8eee0dc1c4ebc3b0e50591eb28bbdc Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Tue, 20 Mar 2018 14:53:28 -0400
Subject: [PATCH 04/28] Remove comments and example code

---
 plugins/talk-plugin-downvote/client/index.js | 18 ------------------
 plugins/talk-plugin-upvote/client/index.js   | 18 ------------------
 2 files changed, 36 deletions(-)

diff --git a/plugins/talk-plugin-downvote/client/index.js b/plugins/talk-plugin-downvote/client/index.js
index 11eee3bda..dc60178db 100644
--- a/plugins/talk-plugin-downvote/client/index.js
+++ b/plugins/talk-plugin-downvote/client/index.js
@@ -1,21 +1,3 @@
-/**
-  This is a client index example file and it could look like this:
-  
-  ```
-  import LoveButton from './components/LoveButton';
-
-  export default {
-    slots: {
-      commentReactions: [LoveButton]
-    },
-    reducer,
-    translations
-  };
-  ```
-
-  To read more info on how to build client plugins. Please, go to: https://docs.coralproject.net/talk/plugins-client
- */
-
 import DownvoteButton from './components/DownvoteButton';
 
 export default {
diff --git a/plugins/talk-plugin-upvote/client/index.js b/plugins/talk-plugin-upvote/client/index.js
index 4f88ee194..fd81298da 100644
--- a/plugins/talk-plugin-upvote/client/index.js
+++ b/plugins/talk-plugin-upvote/client/index.js
@@ -1,21 +1,3 @@
-/**
-  This is a client index example file and it could look like this:
-  
-  ```
-  import LoveButton from './components/LoveButton';
-
-  export default {
-    slots: {
-      commentReactions: [LoveButton]
-    },
-    reducer,
-    translations
-  };
-  ```
-
-  To read more info on how to build client plugins. Please, go to: https://docs.coralproject.net/talk/plugins-client
- */
-
 import UpvoteButton from './components/UpvoteButton';
 
 export default {

From 98b6ce066b9ceab9960a3b7358fe2e31bdb38684 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Tue, 20 Mar 2018 15:03:12 -0400
Subject: [PATCH 05/28] Add package.json for each plugin

---
 plugins/talk-plugin-downvote/package.json            | 9 +++++++++
 plugins/talk-plugin-sort-most-downvoted/package.json | 9 +++++++++
 plugins/talk-plugin-sort-most-upvoted/package.json   | 9 +++++++++
 plugins/talk-plugin-upvote/package.json              | 9 +++++++++
 4 files changed, 36 insertions(+)
 create mode 100644 plugins/talk-plugin-downvote/package.json
 create mode 100644 plugins/talk-plugin-sort-most-downvoted/package.json
 create mode 100644 plugins/talk-plugin-sort-most-upvoted/package.json
 create mode 100644 plugins/talk-plugin-upvote/package.json

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-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/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-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"
+}

From 2f9f72ccf3905abcf550a91c3e7c324261099e04 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Tue, 20 Mar 2018 15:14:19 -0400
Subject: [PATCH 06/28] Add most-liked back to gitignore oops

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 50e490095..6ab3b5084 100644
--- a/.gitignore
+++ b/.gitignore
@@ -54,6 +54,7 @@ plugins/*
 !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

From ff24f521bee74d503a46674f4bbd18cdb4198c73 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 20 Mar 2018 15:39:38 -0600
Subject: [PATCH 07/28] fixed graphql docs, added graphql tutorial

---
 docs/_config.yml                          |  10 +-
 docs/public/_redirects                    |   4 +-
 docs/source/{reference => api}/graphql.md |  10 +-
 docs/source/api/overview.md               | 196 ++++++++++++++++++++++
 docs/source/{reference => api}/server.md  |   2 +-
 docs/themes/coral/scripts/graphqldocs.js  |   4 +-
 graph/schema.js                           |   6 +-
 graph/typeDefs.js                         |   6 +-
 package.json                              |   2 +-
 yarn.lock                                 |  56 +++----
 10 files changed, 246 insertions(+), 50 deletions(-)
 rename docs/source/{reference => api}/graphql.md (50%)
 create mode 100644 docs/source/api/overview.md
 rename docs/source/{reference => api}/server.md (99%)

diff --git a/docs/_config.yml b/docs/_config.yml
index 2a6fa2725..ac72e3e96 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -144,10 +144,12 @@ sidebar:
           url: /customizing-plugins-coral-ui/
     - title: API
       children:
-        - title: Server Plugins
-          url: /reference/server/
-        - title: GraphQL
-          url: /reference/graphql/
+        - title: GraphQL Overview
+          url: /api/overview/
+        - title: GraphQL Reference
+          url: /api/graphql/
+        - title: Server Plugin API
+          url: /api/server/
     - title: Migrating
       children:
         - title: Migrating to v4.0.0
diff --git a/docs/public/_redirects b/docs/public/_redirects
index 8ff90c80f..617eb6adc 100644
--- a/docs/public/_redirects
+++ b/docs/public/_redirects
@@ -1 +1,3 @@
-/ /talk/
\ No newline at end of file
+/ /talk/
+/talk/reference/server/ /talk/api/server/
+/talk/reference/graphql/ /talk/api/graphql/
\ No newline at end of file
diff --git a/docs/source/reference/graphql.md b/docs/source/api/graphql.md
similarity index 50%
rename from docs/source/reference/graphql.md
rename to docs/source/api/graphql.md
index 100dca502..792f2b240 100644
--- a/docs/source/reference/graphql.md
+++ b/docs/source/api/graphql.md
@@ -1,9 +1,15 @@
 ---
-title: GraphQL API
-permalink: /reference/graphql/
+title: GraphQL API Reference
+permalink: /api/graphql/
 ---
 
 We provide all services that Talk can provide via the GraphQL API documented
 below. For a primer about GraphQL, visit http://graphql.org/.
 
+If you're already familiar with GraphQL, visit
+[GraphQL API Overview](/talk/api/overview/) to see how to
+interact with Talk's GraphQL endpoint.
+
+# GraphQL Schema
+
 {% graphqldocs ../../client/coral-framework/graphql/introspection.json %}
\ No newline at end of file
diff --git a/docs/source/api/overview.md b/docs/source/api/overview.md
new file mode 100644
index 000000000..2ede397cd
--- /dev/null
+++ b/docs/source/api/overview.md
@@ -0,0 +1,196 @@
+---
+title: GraphQL API Overview
+permalink: /api/overview/
+---
+
+We provide all services that Talk can provide via the GraphQL API documented
+on our [GraphQL API Reference](/talk/api/graphql/). If you've never heard
+about GraphQL before, visit http://graphql.org/ to learn the basics first.
+
+## Development
+
+During development mode (when Talk has `NODE_ENV=development`) Talk will enable
+the GraphiQL IDE at the following route:
+
+    ${ROOT_URL}api/v1/graph/iql
+
+This is pretty powerful, as it lets you explore the API documentation on the
+sidebar as well as send off requests.
+
+## Making your first request
+
+To learn a bit about how to interact with Talk, we'll query for comments on a
+page of Talk. I have Talk running locally, (If you don't and want to, checkout
+our [Talk Quickstart](/talk/)).
+
+The GraphQL endpoint we have can be used with any HTTP client available, but our
+examples below will use the common `curl` tool:
+
+```sh
+curl --request POST \
+  --url http://localhost:3000/api/v1/graph/ql \
+  --header 'Content-Type: application/json' \
+  --data '{"query":"query GetComments($url: String!) { asset(url: $url) { title url comments { nodes { body user { username } } } }}","variables":{"url":"http://localhost:3000/"},"operationName":"GetComments"}'
+```
+
+When you unpack that, it's really quite simple. We're executing a `POST` request
+to the `/api/v1/graph/ql` route of the local Talk server with the GraphQL
+request we want to make. It's composed of the `query`, `variables`, and
+`operationName`.
+
+```graphql
+query GetComments($url: String!) {
+  asset(url: $url) {
+    title
+    url
+    comments {
+      nodes {
+        body
+        user {
+          username
+        }
+      }
+    }
+  }
+}
+```
+
+The query itself is quite straightforward, we are grabbing the asset with the
+specified `$url`, and grabbing it's title and the comments also (You can also
+look at our [GraphQL API Reference](/talk/api/graphql/) for our entire schema).
+
+We can then also specify our variables to the query being executed (in this
+case, the url for the page where we have comments on our local install of Talk):
+
+```json
+{
+    "url": "http://localhost:3000/"
+}
+```
+
+It's also sometimes common to have multiple queries within a query, which is
+where the `operationName` comes into play, where we simply specify the named
+query that we want to execute (in this case, `GetComments`).
+
+To get a deeper understanding of GraphQL queries, read up on
+[GraphQL Queries and Mutations](http://graphql.org/learn/queries/).
+
+## Understanding the response
+
+Once you completed the above GraphQL query with `curl`, you'll get a response
+sort of like this:
+
+```json
+{
+  "data": {
+    "asset": {
+      "title": "Coral Talk",
+      "url": "http://localhost:3000/",
+      "comments": {
+        "nodes": [
+          {
+            "body": "Second comment!",
+            "user": {
+              "username": "wyattjoh"
+            }
+          },
+          {
+            "body": "First comment!",
+            "user": {
+              "username": "wyattjoh"
+            }
+          }
+        ]
+      }
+    }
+  }
+}
+```
+
+All of the parameters you requested should be available under the `data`
+property. Any errors that you get would appear in a `errors` array at the top
+level, like this:
+
+```json
+{
+  "data": {
+    "asset": null
+  },
+  "errors": [
+    {
+      "message": "asset_url is invalid",
+      "locations": [
+        {
+          "line": 2,
+          "column": 3
+        }
+      ],
+      "path": [
+        "asset"
+      ]
+    }
+  ]
+}
+```
+
+You should know that any property that is marked with a `!` is considered
+required, and non-nullable, which means you can always guarantee on it being
+there in your request if there were no errors.
+
+## Authorizing a request
+
+Some queries you may notice seem to return `null` or an error of
+`NOT_AUTHORIZED`. It's likely the case that you are making a request to a
+route that requires authorization. You can perform authorization a few ways in
+Talk:
+
+1. As a [Bearer Token](#Bearer-Token)
+2. As a [Query Parameter](#Query-Parameter)
+3. As a [Cookie](#Cookie)
+
+Essentially, you need to get access to a JWT token that you can use to authorize
+your requests. Generating one is simple, you can use the CLI tools in Talk to do
+that.
+
+```sh
+# first, find your user account
+./bin/cli users list
+
+# then, create a token for that account
+./bin/cli token create ${USER_ID} example-token
+```
+
+Where `USER_ID` is the ID of your user account you found using the `users list`
+command.
+
+Once you have your access token, you can substitute it as `${TOKEN}` in your
+`curl` request as follows:
+
+### Bearer Token
+
+```sh
+curl --request POST \
+  --url http://localhost:3000/api/v1/graph/ql \
+  --header 'Content-Type: application/json' \
+  --header "Authorization: Bearer ${TOKEN}"
+  --data '{"query":"query GetComments($url: String!) { asset(url: $url) { title url comments { nodes { body user { username } } } }}","variables":{"url":"http://localhost:3000/"},"operationName":"GetComments"}'
+```
+
+### Query Parameter
+
+```sh
+curl --request POST \
+  --url http://localhost:3000/api/v1/graph/ql?access_token=${TOKEN} \
+  --header 'Content-Type: application/json' \
+  --data '{"query":"query GetComments($url: String!) { asset(url: $url) { title url comments { nodes { body user { username } } } }}","variables":{"url":"http://localhost:3000/"},"operationName":"GetComments"}'
+```
+
+### Cookie
+
+```sh
+curl --request POST \
+  --url http://localhost:3000/api/v1/graph/ql \
+  --header 'Content-Type: application/json' \
+  --cookie "authorization=${TOKEN}"
+  --data '{"query":"query GetComments($url: String!) { asset(url: $url) { title url comments { nodes { body user { username } } } }}","variables":{"url":"http://localhost:3000/"},"operationName":"GetComments"}'
+```
\ No newline at end of file
diff --git a/docs/source/reference/server.md b/docs/source/api/server.md
similarity index 99%
rename from docs/source/reference/server.md
rename to docs/source/api/server.md
index 93b9ee69f..614c7b2ed 100644
--- a/docs/source/reference/server.md
+++ b/docs/source/api/server.md
@@ -1,6 +1,6 @@
 ---
 title: Server Plugin API
-permalink: /reference/server/
+permalink: /api/server/
 toc: true
 class: configuration
 ---
diff --git a/docs/themes/coral/scripts/graphqldocs.js b/docs/themes/coral/scripts/graphqldocs.js
index 4e755f1f6..b3997252e 100644
--- a/docs/themes/coral/scripts/graphqldocs.js
+++ b/docs/themes/coral/scripts/graphqldocs.js
@@ -3,7 +3,7 @@
 const path = require('path');
 const fs = require('fs');
 const { stripIndent } = require('common-tags');
-const docs = fs.readFileSync(
+const docsScript = fs.readFileSync(
   require.resolve('graphql-docs/dist/graphql-docs.min.js'),
   { encoding: 'utf8' }
 );
@@ -16,7 +16,7 @@ hexo.extend.tag.register('graphqldocs', args => {
     <div id="graphql-docs"></div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js" integrity="sha256-oj3q2t3QPvtdjo4M5gZfrAXyHEfTfvYdfRL2jA2ZfOY=" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js" integrity="sha256-sqgMIZkGTh7B/tF2nSyXc+tGBYCsfWiTl2II167jrOQ=" crossorigin="anonymous"></script>
-    <script>${docs}</script>
+    <script>${docsScript}</script>
     <script>
         function fetcher() {
             return new Promise(function(resolve) {
diff --git a/graph/schema.js b/graph/schema.js
index dff5da13a..e8119a6ab 100644
--- a/graph/schema.js
+++ b/graph/schema.js
@@ -1,5 +1,6 @@
 const {
   makeExecutableSchema,
+  addResolveFunctionsToSchema,
   addSchemaLevelResolveFunction,
 } = require('graphql-tools');
 const debug = require('debug')('talk:graph:schema');
@@ -10,7 +11,10 @@ const plugins = require('../services/plugins');
 const resolvers = require('./resolvers');
 const typeDefs = require('./typeDefs');
 
-const schema = makeExecutableSchema({ typeDefs, resolvers });
+const schema = makeExecutableSchema({ typeDefs });
+
+// Add the resolvers to the schema
+addResolveFunctionsToSchema(schema, resolvers);
 
 // Plugin to the schema level resolvers to provide an before/after hook.
 decorateWithHooks(schema, plugins.get('server', 'hooks'));
diff --git a/graph/typeDefs.js b/graph/typeDefs.js
index 46bc62dce..4781cab06 100644
--- a/graph/typeDefs.js
+++ b/graph/typeDefs.js
@@ -1,10 +1,6 @@
-// TODO: Adjust `RootQuery.asset(id: ID, url: String)` to instead be
-// `RootQuery.asset(id: ID, url: String!)` because we'll always need the url, if
-// this change is done now everything will likely break on the front end.
-
 const fs = require('fs');
 const path = require('path');
-const { mergeStrings } = require('gql-merge');
+const { mergeStrings } = require('@coralproject/gql-merge');
 const debug = require('debug')('talk:graph:typeDefs');
 const plugins = require('../services/plugins');
 
diff --git a/package.json b/package.json
index 0aa4f247b..9f32ca0e8 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",
@@ -106,7 +107,6 @@
     "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",
diff --git a/yarn.lock b/yarn.lock
index 359a615d6..6a1d728a7 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.5"
   resolved "https://registry.yarnpkg.com/@coralproject/graphql-anywhere-optimized/-/graphql-anywhere-optimized-0.1.5.tgz#67c862bf908ea717d9521ea76266b5bc9f109c65"
@@ -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"

From bd2fcf837aec87dbea8affdfc12cc35406f9259a Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 21 Mar 2018 13:45:29 +0100
Subject: [PATCH 08/28] Move coral rte to talk-plugin-rich-text

---
 plugins/talk-plugin-rich-text-coral/index.js         |  1 -
 plugins/talk-plugin-rich-text-coral/package.json     | 12 ------------
 .../README.client.md}                                |  0
 .../client/.eslintrc.json                            |  0
 .../client/components/Button.css                     |  0
 .../client/components/Button.js                      |  0
 .../client/components/CommentContent.js              |  0
 .../client/components/Editor.css                     |  0
 .../client/components/Editor.js                      |  0
 .../client/components/Toolbar.css                    |  0
 .../client/components/Toolbar.js                     |  0
 .../client/constants.js                              |  0
 .../client/containers/CommentContent.js              |  0
 .../client/containers/Editor.js                      |  0
 .../client/index.js                                  |  0
 .../client/utils.js                                  |  0
 plugins/talk-plugin-rich-text/package.json           |  3 ++-
 17 files changed, 2 insertions(+), 14 deletions(-)
 delete mode 100644 plugins/talk-plugin-rich-text-coral/index.js
 delete mode 100644 plugins/talk-plugin-rich-text-coral/package.json
 rename plugins/{talk-plugin-rich-text-coral/README.md => talk-plugin-rich-text/README.client.md} (100%)
 rename plugins/{talk-plugin-rich-text-coral => talk-plugin-rich-text}/client/.eslintrc.json (100%)
 rename plugins/{talk-plugin-rich-text-coral => talk-plugin-rich-text}/client/components/Button.css (100%)
 rename plugins/{talk-plugin-rich-text-coral => talk-plugin-rich-text}/client/components/Button.js (100%)
 rename plugins/{talk-plugin-rich-text-coral => talk-plugin-rich-text}/client/components/CommentContent.js (100%)
 rename plugins/{talk-plugin-rich-text-coral => talk-plugin-rich-text}/client/components/Editor.css (100%)
 rename plugins/{talk-plugin-rich-text-coral => talk-plugin-rich-text}/client/components/Editor.js (100%)
 rename plugins/{talk-plugin-rich-text-coral => talk-plugin-rich-text}/client/components/Toolbar.css (100%)
 rename plugins/{talk-plugin-rich-text-coral => talk-plugin-rich-text}/client/components/Toolbar.js (100%)
 rename plugins/{talk-plugin-rich-text-coral => talk-plugin-rich-text}/client/constants.js (100%)
 rename plugins/{talk-plugin-rich-text-coral => talk-plugin-rich-text}/client/containers/CommentContent.js (100%)
 rename plugins/{talk-plugin-rich-text-coral => talk-plugin-rich-text}/client/containers/Editor.js (100%)
 rename plugins/{talk-plugin-rich-text-coral => talk-plugin-rich-text}/client/index.js (100%)
 rename plugins/{talk-plugin-rich-text-coral => talk-plugin-rich-text}/client/utils.js (100%)

diff --git a/plugins/talk-plugin-rich-text-coral/index.js b/plugins/talk-plugin-rich-text-coral/index.js
deleted file mode 100644
index f053ebf79..000000000
--- a/plugins/talk-plugin-rich-text-coral/index.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = {};
diff --git a/plugins/talk-plugin-rich-text-coral/package.json b/plugins/talk-plugin-rich-text-coral/package.json
deleted file mode 100644
index f15b565e7..000000000
--- a/plugins/talk-plugin-rich-text-coral/package.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "@coralproject/talk-plugin-rich-text-coral",
-  "pluginName": "talk-plugin-rich-text-coral",
-  "version": "0.0.1",
-  "description": "Simple Rich Text Editor for Talk",
-  "main": "index.js",
-  "author": "The Coral Project Team <coral@mozillafoundation.org>",
-  "license": "Apache-2.0",
-  "dependencies": {
-    "react-contenteditable": "^2.0.7"
-  }
-}
diff --git a/plugins/talk-plugin-rich-text-coral/README.md b/plugins/talk-plugin-rich-text/README.client.md
similarity index 100%
rename from plugins/talk-plugin-rich-text-coral/README.md
rename to plugins/talk-plugin-rich-text/README.client.md
diff --git a/plugins/talk-plugin-rich-text-coral/client/.eslintrc.json b/plugins/talk-plugin-rich-text/client/.eslintrc.json
similarity index 100%
rename from plugins/talk-plugin-rich-text-coral/client/.eslintrc.json
rename to plugins/talk-plugin-rich-text/client/.eslintrc.json
diff --git a/plugins/talk-plugin-rich-text-coral/client/components/Button.css b/plugins/talk-plugin-rich-text/client/components/Button.css
similarity index 100%
rename from plugins/talk-plugin-rich-text-coral/client/components/Button.css
rename to plugins/talk-plugin-rich-text/client/components/Button.css
diff --git a/plugins/talk-plugin-rich-text-coral/client/components/Button.js b/plugins/talk-plugin-rich-text/client/components/Button.js
similarity index 100%
rename from plugins/talk-plugin-rich-text-coral/client/components/Button.js
rename to plugins/talk-plugin-rich-text/client/components/Button.js
diff --git a/plugins/talk-plugin-rich-text-coral/client/components/CommentContent.js b/plugins/talk-plugin-rich-text/client/components/CommentContent.js
similarity index 100%
rename from plugins/talk-plugin-rich-text-coral/client/components/CommentContent.js
rename to plugins/talk-plugin-rich-text/client/components/CommentContent.js
diff --git a/plugins/talk-plugin-rich-text-coral/client/components/Editor.css b/plugins/talk-plugin-rich-text/client/components/Editor.css
similarity index 100%
rename from plugins/talk-plugin-rich-text-coral/client/components/Editor.css
rename to plugins/talk-plugin-rich-text/client/components/Editor.css
diff --git a/plugins/talk-plugin-rich-text-coral/client/components/Editor.js b/plugins/talk-plugin-rich-text/client/components/Editor.js
similarity index 100%
rename from plugins/talk-plugin-rich-text-coral/client/components/Editor.js
rename to plugins/talk-plugin-rich-text/client/components/Editor.js
diff --git a/plugins/talk-plugin-rich-text-coral/client/components/Toolbar.css b/plugins/talk-plugin-rich-text/client/components/Toolbar.css
similarity index 100%
rename from plugins/talk-plugin-rich-text-coral/client/components/Toolbar.css
rename to plugins/talk-plugin-rich-text/client/components/Toolbar.css
diff --git a/plugins/talk-plugin-rich-text-coral/client/components/Toolbar.js b/plugins/talk-plugin-rich-text/client/components/Toolbar.js
similarity index 100%
rename from plugins/talk-plugin-rich-text-coral/client/components/Toolbar.js
rename to plugins/talk-plugin-rich-text/client/components/Toolbar.js
diff --git a/plugins/talk-plugin-rich-text-coral/client/constants.js b/plugins/talk-plugin-rich-text/client/constants.js
similarity index 100%
rename from plugins/talk-plugin-rich-text-coral/client/constants.js
rename to plugins/talk-plugin-rich-text/client/constants.js
diff --git a/plugins/talk-plugin-rich-text-coral/client/containers/CommentContent.js b/plugins/talk-plugin-rich-text/client/containers/CommentContent.js
similarity index 100%
rename from plugins/talk-plugin-rich-text-coral/client/containers/CommentContent.js
rename to plugins/talk-plugin-rich-text/client/containers/CommentContent.js
diff --git a/plugins/talk-plugin-rich-text-coral/client/containers/Editor.js b/plugins/talk-plugin-rich-text/client/containers/Editor.js
similarity index 100%
rename from plugins/talk-plugin-rich-text-coral/client/containers/Editor.js
rename to plugins/talk-plugin-rich-text/client/containers/Editor.js
diff --git a/plugins/talk-plugin-rich-text-coral/client/index.js b/plugins/talk-plugin-rich-text/client/index.js
similarity index 100%
rename from plugins/talk-plugin-rich-text-coral/client/index.js
rename to plugins/talk-plugin-rich-text/client/index.js
diff --git a/plugins/talk-plugin-rich-text-coral/client/utils.js b/plugins/talk-plugin-rich-text/client/utils.js
similarity index 100%
rename from plugins/talk-plugin-rich-text-coral/client/utils.js
rename to plugins/talk-plugin-rich-text/client/utils.js
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"
   }
 }

From f6e661090c236484ddee58fed9c2e6d4c4c67c4d Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 21 Mar 2018 13:54:10 +0100
Subject: [PATCH 09/28] Support preSubmit return input

---
 .../src/tabs/stream/containers/CommentBox.js             | 9 ++++++---
 .../client/components/CheckSpamHook.js                   | 5 ++++-
 .../client/components/CheckToxicityHook.js               | 5 ++++-
 3 files changed, 14 insertions(+), 5 deletions(-)

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..c02bc63d4 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
@@ -65,9 +65,12 @@ class CommentBox extends React.Component {
     };
 
     // Execute preSubmit Hooks
-    this.state.hooks.preSubmit.forEach(hook =>
-      hook(input, this.handleBodyChange)
-    );
+    this.state.hooks.preSubmit.forEach(hook => {
+      const result = hook(input);
+      if (result) {
+        input = result;
+      }
+    });
     this.setState({ loadingState: 'loading' });
 
     postComment(input, 'comments')
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-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,
+        };
       }
     });
 

From 65778c31ff57d7304c4b73ec478594c1f7db18f8 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 21 Mar 2018 15:41:27 +0100
Subject: [PATCH 10/28] Refactor draft area api step 1

---
 .../src/tabs/stream/components/Comment.js     |   2 +-
 .../src/tabs/stream/components/CommentForm.js |  20 +-
 .../src/tabs/stream/components/DraftArea.js   |  23 +-
 .../stream/components/DraftAreaContent.js     |  12 +-
 .../components/EditableCommentContent.js      | 221 +++++-------------
 .../src/tabs/stream/containers/CommentBox.js  | 122 ++++------
 .../src/tabs/stream/containers/DraftArea.js   |  37 +--
 .../containers/EditableCommentContent.js      | 147 +++++++++++-
 .../src/tabs/stream/hocs/withHooks.js         |  57 +++++
 .../src/tabs/stream/{components => }/util.js  |   0
 .../talk-plugin-profile-settings/README.md    |   0
 .../client/components/Editor.js               |  55 ++---
 12 files changed, 378 insertions(+), 318 deletions(-)
 create mode 100644 client/coral-embed-stream/src/tabs/stream/hocs/withHooks.js
 rename client/coral-embed-stream/src/tabs/stream/{components => }/util.js (100%)
 delete mode 100644 plugins/talk-plugin-profile-settings/README.md

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..64e0fbf84 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
@@ -37,15 +37,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,6 +53,7 @@ class CommentForm extends React.Component {
     registerHook: PropTypes.func,
     unregisterHook: PropTypes.func,
     isReply: PropTypes.bool,
+    isEdit: PropTypes.bool,
     root: PropTypes.object.isRequired,
     comment: PropTypes.object,
   };
@@ -90,20 +91,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';
@@ -115,15 +116,16 @@ class CommentForm extends React.Component {
           comment={comment}
           id={this.props.bodyInputId}
           label={this.props.bodyLabel}
-          value={body}
+          input={input}
           placeholder={this.props.bodyPlaceholder}
-          onChange={this.props.onBodyChange}
+          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..ce469f201 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}>
@@ -34,7 +34,7 @@ export default class DraftArea extends React.Component {
 
   render() {
     const {
-      value,
+      input,
       placeholder,
       id,
       disabled,
@@ -42,8 +42,9 @@ export default class DraftArea extends React.Component {
       label,
       charCountEnable,
       maxCharCount,
-      onChange,
+      onInputChange,
       isReply,
+      isEdit,
       registerHook,
       unregisterHook,
       root,
@@ -51,7 +52,7 @@ export default class DraftArea extends React.Component {
     } = this.props;
 
     return (
-      <div>
+      <div id={id}>
         <div
           className={cn(styles.container, 'talk-plugin-commentbox-container')}
         >
@@ -67,13 +68,14 @@ export default class DraftArea extends React.Component {
               comment,
               registerHook,
               unregisterHook,
-              value,
+              input,
               placeholder,
               id,
-              onChange,
+              onInputChange,
               rows,
               disabled,
               isReply,
+              isEdit,
             }}
           />
           <Slot fill="commentInputArea" />
@@ -92,10 +94,10 @@ DraftArea.propTypes = {
   charCountEnable: PropTypes.bool,
   maxCharCount: PropTypes.number,
   id: PropTypes.string,
-  value: PropTypes.string,
+  input: PropTypes.object,
   placeholder: PropTypes.string,
   label: PropTypes.string,
-  onChange: PropTypes.func,
+  onInputChange: PropTypes.func,
   disabled: PropTypes.bool,
   rows: PropTypes.number,
   root: PropTypes.object.isRequired,
@@ -103,4 +105,5 @@ DraftArea.propTypes = {
   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..5c77b20aa 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
@@ -4,19 +4,19 @@ import cn from 'classnames';
 import styles from './DraftAreaContent.css';
 
 const DraftAreaContent = ({
-  value,
+  input,
   placeholder,
   id,
-  onChange,
+  onInputChange,
   rows,
   disabled,
 }) => (
   <textarea
     className={cn(styles.content, 'talk-plugin-commentbox-textarea')}
-    value={value}
+    value={input.body}
     placeholder={placeholder}
     id={id}
-    onChange={e => onChange(e.target.value)}
+    onChange={e => onInputChange({ body: e.target.value })}
     rows={rows}
     disabled={disabled}
   />
@@ -28,9 +28,9 @@ DraftAreaContent.defaultProps = {
 
 DraftAreaContent.propTypes = {
   id: PropTypes.string,
-  value: PropTypes.string,
+  input: PropTypes.object,
   placeholder: PropTypes.string,
-  onChange: PropTypes.func,
+  onInputChange: PropTypes.func,
   disabled: PropTypes.bool,
   rows: PropTypes.number,
 };
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..cd41a02b2 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>
-          }
+          bodyInputId={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/CommentBox.js b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
index c02bc63d4..96bfd434c 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
@@ -7,6 +7,8 @@ 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';
 
 // TODO: (kiwi) Need to adapt CSS classes post refactor to match the rest.
 export const name = 'talk-plugin-commentbox';
@@ -19,13 +21,9 @@ 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: {
+        body: '',
       },
     };
   }
@@ -59,13 +57,12 @@ class CommentBox extends React.Component {
     let input = {
       asset_id: assetId,
       parent_id: parentId,
-      body: this.state.body,
       tags: this.props.tags,
-      ...this.state.data,
+      ...this.state.input,
     };
 
     // Execute preSubmit Hooks
-    this.state.hooks.preSubmit.forEach(hook => {
+    this.props.forEachHook('preSubmit', hook => {
       const result = hook(input);
       if (result) {
         input = result;
@@ -75,13 +72,13 @@ class CommentBox extends React.Component {
 
     postComment(input, 'comments')
       .then(({ data }) => {
-        this.setState({ loadingState: 'success', body: '' });
+        this.setState({ loadingState: 'success', input: { body: '' } });
         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);
@@ -95,62 +92,29 @@ 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 { isReply, registerHook, unregisterHook } = this.props;
+    return (
+      <Slot
+        fill="commentInputDetailArea"
+        passthrough={{
+          registerHook: registerHook,
+          unregisterHook: unregisterHook,
+          isReply,
+        }}
+        inline
+      />
+    );
+  }
 
   render() {
     const {
@@ -160,6 +124,8 @@ class CommentBox extends React.Component {
       parentId,
       comment,
       root,
+      registerHook,
+      unregisterHook,
     } = this.props;
     let { onCancel } = this.props;
 
@@ -186,22 +152,12 @@ class CommentBox extends React.Component {
           charCountEnable={this.props.charCountEnable}
           bodyPlaceholder={t('comment.comment')}
           bodyInputId={id}
-          body={this.state.body}
-          registerHook={this.registerHook}
-          unregisterHook={this.unregisterHook}
+          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}
@@ -228,6 +184,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;
@@ -236,4 +195,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..c608c7530 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,10 +53,10 @@ class DraftAreaContainer extends React.Component {
       <DraftArea
         root={this.props.root}
         comment={this.props.comment}
-        value={this.props.value}
+        input={this.props.input}
         placeholder={this.props.placeholder}
         id={this.props.id}
-        onChange={this.onChange}
+        onInputChange={this.props.onInputChange}
         rows={this.props.rows}
         disabled={this.props.disabled}
         charCountEnable={this.props.charCountEnable}
@@ -58,6 +65,7 @@ class DraftAreaContainer extends React.Component {
         registerHook={this.props.registerHook}
         unregisterHook={this.props.unregisterHook}
         isReply={this.props.isReply}
+        isEdit={this.props.isEdit}
       />
     );
   }
@@ -73,15 +81,16 @@ DraftAreaContainer.propTypes = {
   charCountEnable: PropTypes.bool,
   maxCharCount: PropTypes.number,
   id: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
+  input: PropTypes.object.isRequired,
   placeholder: PropTypes.string,
-  onChange: PropTypes.func.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,
 };
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/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/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-rich-text/client/components/Editor.js b/plugins/talk-plugin-rich-text/client/components/Editor.js
index b22fd0df4..08f904fa4 100644
--- a/plugins/talk-plugin-rich-text/client/components/Editor.js
+++ b/plugins/talk-plugin-rich-text/client/components/Editor.js
@@ -12,42 +12,38 @@ import bowser from 'bowser';
 class Editor extends React.Component {
   ref = null;
   handleRef = ref => (this.ref = ref);
-  state = {
-    html:
-      !this.props.isReply && this.props.comment
-        ? this.props.comment.richTextBody || this.props.comment.body || ''
-        : '',
-  };
 
   handleChange = evt => {
-    const html = evt.target.value;
-    this.setState({ html });
-    this.props.onChange(this.ref.htmlEl.innerText, {
-      richTextBody: htmlNormalizer(html),
+    this.props.onInputChange({
+      body: this.ref.htmlEl.innerText,
+      richTextBody: evt.target.value,
     });
   };
 
-  componentDidMount() {
-    if (this.props.registerHook) {
-      this.clearInputHook = this.props.registerHook(
-        'postSubmit',
-        (res, handleBodyChange) => {
-          this.setState({ html: '' });
-          handleBodyChange('', { richTextBody: '' });
-        }
-      );
+  getHTML(props = this.props) {
+    if (props.input.richTextBody) {
+      return props.input.richTextBody;
     }
+    return (
+      (props.isEdit && (props.comment.richTextBody || props.comment.body)) || ''
+    );
   }
 
-  shouldComponentUpdate(nextProps) {
-    if (this.props.value !== nextProps.value) {
-      return false;
+  componentDidMount() {
+    if (this.props.registerHook) {
+      this.normalizeHook = this.props.registerHook('preSubmit', input => {
+        if (input.richTextBody) {
+          return {
+            ...input,
+            richTextBody: htmlNormalizer(input.richTextBody),
+          };
+        }
+      });
     }
-    return true;
   }
 
   componentWillUnmount() {
-    this.props.unregisterHook(this.clearInputHook);
+    this.props.unregisterHook(this.normalizeHook);
   }
 
   getCurrentTagName() {
@@ -90,7 +86,6 @@ class Editor extends React.Component {
   };
 
   render() {
-    const { id } = this.props;
     return (
       <div className={cn(styles.root, `${PLUGIN_NAME}-container`)}>
         <Toolbar>
@@ -109,9 +104,8 @@ class Editor extends React.Component {
         <ContentEditable
           onKeyPress={this.outdentOnEnter}
           className={styles.contentEditable}
-          id={id}
           ref={this.handleRef}
-          html={this.state.html}
+          html={this.getHTML()}
           disabled={false}
           onChange={this.handleChange}
         />
@@ -121,17 +115,16 @@ class Editor extends React.Component {
 }
 
 Editor.propTypes = {
-  rows: PropTypes.number, // TODO: should not be passed.
-  id: PropTypes.string, // TODO: should not be passed.
-  value: PropTypes.string,
+  input: PropTypes.object,
   placeholder: PropTypes.string,
-  onChange: PropTypes.func,
+  onInputChange: PropTypes.func,
   disabled: PropTypes.bool,
   comment: PropTypes.object,
   classNames: PropTypes.object,
   registerHook: PropTypes.func,
   unregisterHook: PropTypes.func,
   isReply: PropTypes.bool,
+  isEdit: PropTypes.bool,
 };
 
 export default Editor;

From 1ecc2a8f402435993fcc169ef8cb681b5f2b1a8b Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 21 Mar 2018 15:46:00 +0100
Subject: [PATCH 11/28] Remove rows

---
 .../src/tabs/stream/components/DraftArea.js               | 7 -------
 .../src/tabs/stream/components/DraftAreaContent.js        | 8 +-------
 .../src/tabs/stream/containers/DraftArea.js               | 2 --
 3 files changed, 1 insertion(+), 16 deletions(-)

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 ce469f201..8f8430d27 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
@@ -38,7 +38,6 @@ export default class DraftArea extends React.Component {
       placeholder,
       id,
       disabled,
-      rows,
       label,
       charCountEnable,
       maxCharCount,
@@ -72,7 +71,6 @@ export default class DraftArea extends React.Component {
               placeholder,
               id,
               onInputChange,
-              rows,
               disabled,
               isReply,
               isEdit,
@@ -86,10 +84,6 @@ export default class DraftArea extends React.Component {
   }
 }
 
-DraftArea.defaultProps = {
-  rows: 3,
-};
-
 DraftArea.propTypes = {
   charCountEnable: PropTypes.bool,
   maxCharCount: PropTypes.number,
@@ -99,7 +93,6 @@ DraftArea.propTypes = {
   label: PropTypes.string,
   onInputChange: PropTypes.func,
   disabled: PropTypes.bool,
-  rows: PropTypes.number,
   root: PropTypes.object.isRequired,
   comment: PropTypes.object,
   registerHook: PropTypes.func,
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 5c77b20aa..793583d33 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
@@ -8,7 +8,6 @@ const DraftAreaContent = ({
   placeholder,
   id,
   onInputChange,
-  rows,
   disabled,
 }) => (
   <textarea
@@ -17,22 +16,17 @@ const DraftAreaContent = ({
     placeholder={placeholder}
     id={id}
     onChange={e => onInputChange({ body: e.target.value })}
-    rows={rows}
+    rows={3}
     disabled={disabled}
   />
 );
 
-DraftAreaContent.defaultProps = {
-  rows: 3,
-};
-
 DraftAreaContent.propTypes = {
   id: PropTypes.string,
   input: PropTypes.object,
   placeholder: PropTypes.string,
   onInputChange: PropTypes.func,
   disabled: PropTypes.bool,
-  rows: PropTypes.number,
 };
 
 export default DraftAreaContent;
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 c608c7530..c890931ea 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
@@ -57,7 +57,6 @@ class DraftAreaContainer extends React.Component {
         placeholder={this.props.placeholder}
         id={this.props.id}
         onInputChange={this.props.onInputChange}
-        rows={this.props.rows}
         disabled={this.props.disabled}
         charCountEnable={this.props.charCountEnable}
         maxCharCount={this.props.maxCharCount}
@@ -85,7 +84,6 @@ DraftAreaContainer.propTypes = {
   placeholder: PropTypes.string,
   onInputChange: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
-  rows: PropTypes.number,
   label: PropTypes.string.isRequired,
   registerHook: PropTypes.func,
   unregisterHook: PropTypes.func,

From a73b93b0c34e7fa9c3287c3e3a91eda0cc2378cb Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 21 Mar 2018 16:04:03 +0100
Subject: [PATCH 12/28] Move label and placeholder to plugins

---
 .../src/tabs/stream/components/CommentForm.js | 16 +----
 .../src/tabs/stream/components/DraftArea.js   | 10 +---
 .../stream/components/DraftAreaContent.js     | 60 +++++++++++++------
 .../components/EditableCommentContent.js      |  2 +-
 .../src/tabs/stream/containers/CommentBox.js  |  4 +-
 .../src/tabs/stream/containers/DraftArea.js   |  4 --
 6 files changed, 49 insertions(+), 47 deletions(-)

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 64e0fbf84..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,
@@ -59,8 +53,6 @@ class CommentForm extends React.Component {
   };
   static get defaultProps() {
     return {
-      bodyLabel: t('comment_box.comment'),
-      bodyPlaceholder: t('comment_box.comment'),
       submitText: t('comment_box.post'),
       submitButtonCStyle: 'darkGrey',
       submitEnabled: () => true,
@@ -114,10 +106,8 @@ class CommentForm extends React.Component {
         <DraftArea
           root={root}
           comment={comment}
-          id={this.props.bodyInputId}
-          label={this.props.bodyLabel}
+          id={this.props.id}
           input={input}
-          placeholder={this.props.bodyPlaceholder}
           onInputChange={this.props.onInputChange}
           disabled={disableTextArea}
           charCountEnable={this.props.charCountEnable}
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 8f8430d27..15e1711d4 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
@@ -35,10 +35,8 @@ export default class DraftArea extends React.Component {
   render() {
     const {
       input,
-      placeholder,
       id,
       disabled,
-      label,
       charCountEnable,
       maxCharCount,
       onInputChange,
@@ -55,21 +53,17 @@ export default class DraftArea extends React.Component {
         <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,
               input,
-              placeholder,
-              id,
               onInputChange,
               disabled,
               isReply,
@@ -89,8 +83,6 @@ DraftArea.propTypes = {
   maxCharCount: PropTypes.number,
   id: PropTypes.string,
   input: PropTypes.object,
-  placeholder: PropTypes.string,
-  label: PropTypes.string,
   onInputChange: PropTypes.func,
   disabled: PropTypes.bool,
   root: PropTypes.object.isRequired,
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 793583d33..2639d5b2d 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
@@ -2,24 +2,48 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './DraftAreaContent.css';
+import t from 'coral-framework/services/i18n';
 
-const DraftAreaContent = ({
-  input,
-  placeholder,
-  id,
-  onInputChange,
-  disabled,
-}) => (
-  <textarea
-    className={cn(styles.content, 'talk-plugin-commentbox-textarea')}
-    value={input.body}
-    placeholder={placeholder}
-    id={id}
-    onChange={e => onInputChange({ body: e.target.value })}
-    rows={3}
-    disabled={disabled}
-  />
-);
+class DraftAreaContent 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 { input, id, onInputChange, disabled } = this.props;
+    const inputId = `${id}-textarea`;
+    return (
+      <div>
+        <label
+          htmlFor={inputId}
+          className="screen-reader-text"
+          aria-hidden={true}
+        >
+          {this.getLabel()}
+        </label>
+        <textarea
+          id={inputId}
+          className={cn(styles.content, 'talk-plugin-commentbox-textarea')}
+          value={input.body}
+          placeholder={this.getPlaceholder()}
+          onChange={e => onInputChange({ body: e.target.value })}
+          rows={3}
+          disabled={disabled}
+        />
+      </div>
+    );
+  }
+}
 
 DraftAreaContent.propTypes = {
   id: PropTypes.string,
@@ -27,6 +51,8 @@ DraftAreaContent.propTypes = {
   placeholder: PropTypes.string,
   onInputChange: PropTypes.func,
   disabled: PropTypes.bool,
+  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 cd41a02b2..00f8ebe17 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
@@ -67,7 +67,7 @@ class EditableCommentContent extends React.Component {
           bodyPlaceholder=""
           submitText={<span>{t('edit_comment.save_button')}</span>}
           submitButtonCStyle="green"
-          bodyInputId={id}
+          id={id}
         />
       </div>
     );
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 96bfd434c..8ff9b8ec4 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
@@ -147,11 +147,9 @@ 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}
+          id={id}
           input={this.state.input}
           registerHook={registerHook}
           unregisterHook={unregisterHook}
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 c890931ea..5cbadae8f 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
@@ -54,13 +54,11 @@ class DraftAreaContainer extends React.Component {
         root={this.props.root}
         comment={this.props.comment}
         input={this.props.input}
-        placeholder={this.props.placeholder}
         id={this.props.id}
         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}
@@ -81,10 +79,8 @@ DraftAreaContainer.propTypes = {
   maxCharCount: PropTypes.number,
   id: PropTypes.string.isRequired,
   input: PropTypes.object.isRequired,
-  placeholder: PropTypes.string,
   onInputChange: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
-  label: PropTypes.string.isRequired,
   registerHook: PropTypes.func,
   unregisterHook: PropTypes.func,
   isReply: PropTypes.bool,

From 1256007eba7ed7ece33a5f23581ef45fc47e0c27 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 21 Mar 2018 16:46:08 +0100
Subject: [PATCH 13/28] New API for comment input tags

---
 .../coral-embed-stream/src/actions/stream.js  | 39 +++++++++++++------
 .../src/tabs/stream/components/DraftArea.js   |  1 +
 .../src/tabs/stream/containers/Comment.js     |  1 -
 .../src/tabs/stream/containers/CommentBox.js  | 32 ++++++++++++---
 .../src/tabs/stream/containers/DraftArea.js   |  2 +-
 .../src/tabs/stream/containers/Stream.js      |  1 +
 plugin-api/alpha/client/actions/index.js      |  2 +
 plugin-api/alpha/client/selectors/index.js    | 17 +++++++-
 8 files changed, 75 insertions(+), 20 deletions(-)

diff --git a/client/coral-embed-stream/src/actions/stream.js b/client/coral-embed-stream/src/actions/stream.js
index bc31c90e9..f3d3897ee 100644
--- a/client/coral-embed-stream/src/actions/stream.js
+++ b/client/coral-embed-stream/src/actions/stream.js
@@ -1,6 +1,7 @@
 import * as actions from '../constants/stream';
 import { buildUrl } from 'coral-framework/utils/url';
 import queryString from 'query-string';
+import once from 'lodash/once';
 
 export const setActiveReplyBox = id => ({
   type: actions.SET_ACTIVE_REPLY_BOX,
@@ -71,16 +72,32 @@ export const setActiveTab = tab => dispatch => {
   dispatch({ type: actions.SET_ACTIVE_TAB, tab });
 };
 
-export const addCommentBoxTag = tag => ({
-  type: actions.ADD_COMMENT_BOX_TAG,
-  tag,
+// @Deprecated
+const showOldTagsWarningOnce = once(() => {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn(
+      '`addCommentBoxTag`, `removeCommentBoxTag`, `clearCommentBoxTags` are deprecated. Please switch to `onInputChange`, `input.tags` instead'
+    );
+  }
 });
 
-export const removeCommentBoxTag = idx => ({
-  type: actions.REMOVE_COMMENT_BOX_TAG,
-  idx,
-});
-
-export const clearCommentBoxTags = () => ({
-  type: actions.CLEAR_COMMENT_BOX_TAGS,
-});
+export const addCommentBoxTag = tag => {
+  showOldTagsWarningOnce();
+  return {
+    type: actions.ADD_COMMENT_BOX_TAG,
+    tag,
+  };
+};
+export const removeCommentBoxTag = idx => {
+  showOldTagsWarningOnce();
+  return {
+    type: actions.REMOVE_COMMENT_BOX_TAG,
+    idx,
+  };
+};
+export const clearCommentBoxTags = () => {
+  showOldTagsWarningOnce();
+  return {
+    type: actions.CLEAR_COMMENT_BOX_TAGS,
+  };
+};
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 15e1711d4..42c5eee6f 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
@@ -70,6 +70,7 @@ export default class DraftArea extends React.Component {
               isEdit,
             }}
           />
+          {/* Is this slot here legitimate? (kiwi) */}
           <Slot fill="commentInputArea" />
         </div>
         {charCountEnable && maxCharCount > 0 && this.renderCharCount()}
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 8ff9b8ec4..57b5a2f17 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
@@ -9,10 +9,22 @@ 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
  */
@@ -22,9 +34,7 @@ class CommentBox extends React.Component {
 
     this.state = {
       loadingState: '',
-      input: {
-        body: '',
-      },
+      input: initialInput,
     };
   }
 
@@ -54,11 +64,18 @@ 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,
-      tags: this.props.tags,
       ...this.state.input,
+      tags: [...deprecatedTags, ...tags],
     };
 
     // Execute preSubmit Hooks
@@ -72,7 +89,7 @@ class CommentBox extends React.Component {
 
     postComment(input, 'comments')
       .then(({ data }) => {
-        this.setState({ loadingState: 'success', input: { body: '' } });
+        this.setState({ loadingState: 'success', input: initialInput });
         const postedComment = data.createComment.comment;
         const actions = data.createComment.actions;
 
@@ -102,14 +119,17 @@ class CommentBox extends React.Component {
   };
 
   renderButtonContainerStart() {
-    const { isReply, registerHook, unregisterHook } = this.props;
+    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
       />
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 5cbadae8f..61738758d 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
@@ -89,7 +89,7 @@ DraftAreaContainer.propTypes = {
   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/Stream.js b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
index 9687a9370..0a7a1951c 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
@@ -367,6 +367,7 @@ const LOAD_MORE_QUERY = gql`
 `;
 
 const slots = [
+  'commentInputDetailArea',
   'streamTabs',
   'streamTabsPrepend',
   'streamTabPanes',
diff --git a/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;

From a4987f29471309b6b26c150d20695b5abcc4ea3a Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 21 Mar 2018 16:48:28 +0100
Subject: [PATCH 14/28] Less deprecation messages

---
 .../coral-embed-stream/src/actions/stream.js  | 40 ++++++-------------
 1 file changed, 13 insertions(+), 27 deletions(-)

diff --git a/client/coral-embed-stream/src/actions/stream.js b/client/coral-embed-stream/src/actions/stream.js
index f3d3897ee..0f43ffe10 100644
--- a/client/coral-embed-stream/src/actions/stream.js
+++ b/client/coral-embed-stream/src/actions/stream.js
@@ -1,7 +1,6 @@
 import * as actions from '../constants/stream';
 import { buildUrl } from 'coral-framework/utils/url';
 import queryString from 'query-string';
-import once from 'lodash/once';
 
 export const setActiveReplyBox = id => ({
   type: actions.SET_ACTIVE_REPLY_BOX,
@@ -73,31 +72,18 @@ export const setActiveTab = tab => dispatch => {
 };
 
 // @Deprecated
-const showOldTagsWarningOnce = once(() => {
-  if (process.env.NODE_ENV !== 'production') {
-    console.warn(
-      '`addCommentBoxTag`, `removeCommentBoxTag`, `clearCommentBoxTags` are deprecated. Please switch to `onInputChange`, `input.tags` instead'
-    );
-  }
+export const addCommentBoxTag = tag => ({
+  type: actions.ADD_COMMENT_BOX_TAG,
+  tag,
 });
 
-export const addCommentBoxTag = tag => {
-  showOldTagsWarningOnce();
-  return {
-    type: actions.ADD_COMMENT_BOX_TAG,
-    tag,
-  };
-};
-export const removeCommentBoxTag = idx => {
-  showOldTagsWarningOnce();
-  return {
-    type: actions.REMOVE_COMMENT_BOX_TAG,
-    idx,
-  };
-};
-export const clearCommentBoxTags = () => {
-  showOldTagsWarningOnce();
-  return {
-    type: actions.CLEAR_COMMENT_BOX_TAGS,
-  };
-};
+// @Deprecated
+export const removeCommentBoxTag = idx => ({
+  type: actions.REMOVE_COMMENT_BOX_TAG,
+  idx,
+});
+
+// @Deprecated
+export const clearCommentBoxTags = () => ({
+  type: actions.CLEAR_COMMENT_BOX_TAGS,
+});

From 2e96ea017011f17f5c80d80d1aae55dfc9786791 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 21 Mar 2018 16:49:18 +0100
Subject: [PATCH 15/28] Port off topic tags to new api

---
 .../client/components/OffTopicCheckbox.js     | 48 ++++++-------------
 .../client/containers/OffTopicCheckbox.js     | 40 ++++++++++++----
 2 files changed, 44 insertions(+), 44 deletions(-)

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);

From 16c5a90736261990722f05a501d47ec6485edaa6 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 21 Mar 2018 17:01:02 +0100
Subject: [PATCH 16/28] Move label, placeholder strings to DraftArea

---
 .../src/tabs/stream/components/DraftArea.js   | 16 ++++++++++
 .../stream/components/DraftAreaContent.js     | 29 +++++++------------
 .../client/components/Editor.js               |  3 ++
 3 files changed, 30 insertions(+), 18 deletions(-)

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 42c5eee6f..60bf18b40 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
@@ -32,6 +32,20 @@ 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 {
       input,
@@ -68,6 +82,8 @@ export default class DraftArea extends React.Component {
               disabled,
               isReply,
               isEdit,
+              placeholder: this.getPlaceholder(),
+              label: this.getLabel(),
             }}
           />
           {/* Is this slot here legitimate? (kiwi) */}
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 2639d5b2d..74e59f795 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
@@ -2,25 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './DraftAreaContent.css';
-import t from 'coral-framework/services/i18n';
 
 class DraftAreaContent 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 { input, id, onInputChange, disabled } = this.props;
+    const {
+      input,
+      id,
+      onInputChange,
+      disabled,
+      label,
+      placeholder,
+    } = this.props;
     const inputId = `${id}-textarea`;
     return (
       <div>
@@ -29,13 +21,13 @@ class DraftAreaContent extends React.Component {
           className="screen-reader-text"
           aria-hidden={true}
         >
-          {this.getLabel()}
+          {label}
         </label>
         <textarea
           id={inputId}
           className={cn(styles.content, 'talk-plugin-commentbox-textarea')}
           value={input.body}
-          placeholder={this.getPlaceholder()}
+          placeholder={placeholder}
           onChange={e => onInputChange({ body: e.target.value })}
           rows={3}
           disabled={disabled}
@@ -49,6 +41,7 @@ DraftAreaContent.propTypes = {
   id: PropTypes.string,
   input: PropTypes.object,
   placeholder: PropTypes.string,
+  label: PropTypes.string,
   onInputChange: PropTypes.func,
   disabled: PropTypes.bool,
   isEdit: PropTypes.bool,
diff --git a/plugins/talk-plugin-rich-text/client/components/Editor.js b/plugins/talk-plugin-rich-text/client/components/Editor.js
index 08f904fa4..8d78da3c4 100644
--- a/plugins/talk-plugin-rich-text/client/components/Editor.js
+++ b/plugins/talk-plugin-rich-text/client/components/Editor.js
@@ -125,6 +125,9 @@ Editor.propTypes = {
   unregisterHook: PropTypes.func,
   isReply: PropTypes.bool,
   isEdit: PropTypes.bool,
+  id: PropTypes.string,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
 };
 
 export default Editor;

From fa3633b29a24f0c0f53f2b4c4aa9616931149582 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 21 Mar 2018 17:15:57 +0100
Subject: [PATCH 17/28] Add placeholder to Coral RTE :-)

---
 .../client/components/Editor.css                     |  5 +++++
 .../client/components/Editor.js                      | 12 ++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/plugins/talk-plugin-rich-text/client/components/Editor.css b/plugins/talk-plugin-rich-text/client/components/Editor.css
index f102067a5..09614f5be 100644
--- a/plugins/talk-plugin-rich-text/client/components/Editor.css
+++ b/plugins/talk-plugin-rich-text/client/components/Editor.css
@@ -10,3 +10,8 @@
   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
index 8d78da3c4..3d70a639d 100644
--- a/plugins/talk-plugin-rich-text/client/components/Editor.js
+++ b/plugins/talk-plugin-rich-text/client/components/Editor.js
@@ -86,8 +86,16 @@ class Editor extends React.Component {
   };
 
   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
@@ -101,7 +109,11 @@ class Editor extends React.Component {
             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}

From 973e907275d797f5a0f2c4211b180690adadef10 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 21 Mar 2018 17:24:57 +0100
Subject: [PATCH 18/28] Combine readme

---
 .../talk-plugin-rich-text/README.client.md    | 47 -------------------
 plugins/talk-plugin-rich-text/README.md       | 45 ++++++++++++++----
 .../talk-plugin-rich-text/client/constants.js |  2 +-
 .../client/containers/CommentContent.js       |  2 +-
 .../client/containers/Editor.js               |  2 +-
 plugins/talk-plugin-rich-text/client/index.js |  6 +--
 6 files changed, 42 insertions(+), 62 deletions(-)
 delete mode 100644 plugins/talk-plugin-rich-text/README.client.md

diff --git a/plugins/talk-plugin-rich-text/README.client.md b/plugins/talk-plugin-rich-text/README.client.md
deleted file mode 100644
index f953a65cd..000000000
--- a/plugins/talk-plugin-rich-text/README.client.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: talk-plugin-rich-text-coral
-permalink: /plugin/talk-plugin-rich-text-coral/
-layout: plugin
-plugin:
-    name: talk-plugin-rich-text-coral
-    depends:
-        - name: talk-plugin-rich-text
-    provides:
-        - Client
----
-
-Enables rich text support client-side by using a simple RTE.
-
-## Installation
-
-Add `"talk-plugin-rich-text-coral"` 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 uses [contentEditable](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content). 
-
-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/README.md b/plugins/talk-plugin-rich-text/README.md
index 109759274..7fd90cff6 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 commandExec API. 
+
+If you check our `index.js` you will notice that we inject this editor in the
+`commentBox` slot. We do this to replace the core comment box with this one. 
+
+Now, in order to render the new styled comments we need a comment renderer. For
+this task we will have to replace our core comment renderer by using the
+`commentContent` slot.
+
+If you are not familiar with GraphQL `client/index.js` will look complicated,
+but fear not! With those functions we specify what to expect from the server
+schema, how to perform optimistic updates and how keep the client store updated
+with the latest changes.
+
+We encourage you to see the files and check how easy is to build plugins! If you
+have any feedback, please let us know.
diff --git a/plugins/talk-plugin-rich-text/client/constants.js b/plugins/talk-plugin-rich-text/client/constants.js
index 40ea81053..25725cacf 100644
--- a/plugins/talk-plugin-rich-text/client/constants.js
+++ b/plugins/talk-plugin-rich-text/client/constants.js
@@ -1 +1 @@
-export const PLUGIN_NAME = 'talk-plugin-rich-text-coral';
+export const PLUGIN_NAME = 'talk-plugin-rich-text';
diff --git a/plugins/talk-plugin-rich-text/client/containers/CommentContent.js b/plugins/talk-plugin-rich-text/client/containers/CommentContent.js
index 99b65c22c..b1b320a99 100644
--- a/plugins/talk-plugin-rich-text/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 TalkPluginRichTextCoral_CommentContent_comment on Comment {
+    fragment TalkPluginRichText_CommentContent_comment on Comment {
       body
       richTextBody
     }
diff --git a/plugins/talk-plugin-rich-text/client/containers/Editor.js b/plugins/talk-plugin-rich-text/client/containers/Editor.js
index f748e7344..7283fec37 100644
--- a/plugins/talk-plugin-rich-text/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 TalkPluginRichTextCoral_Editor_comment on Comment {
+    fragment TalkPluginRichText_Editor_comment on Comment {
       body
       richTextBody
     }
diff --git a/plugins/talk-plugin-rich-text/client/index.js b/plugins/talk-plugin-rich-text/client/index.js
index 8cab68f8d..6eb7a8c95 100644
--- a/plugins/talk-plugin-rich-text/client/index.js
+++ b/plugins/talk-plugin-rich-text/client/index.js
@@ -11,14 +11,14 @@ export default {
   },
   fragments: {
     CreateCommentResponse: gql`
-      fragment TalkRichTextCoral_CreateCommentResponse on CreateCommentResponse {
+      fragment TalkRichText_CreateCommentResponse on CreateCommentResponse {
         comment {
           richTextBody
         }
       }
     `,
     EditCommentResponse: gql`
-      fragment TalkRichTextCoral_EditCommentResponse on EditCommentResponse {
+      fragment TalkRichText_EditCommentResponse on EditCommentResponse {
         comment {
           richTextBody
         }
@@ -48,7 +48,7 @@ export default {
         },
         update: proxy => {
           const editCommentFragment = gql`
-            fragment TalkRichTextCoral_EditComment on Comment {
+            fragment TalkRichText_EditComment on Comment {
               richTextBody
             }
           `;

From ae4cc3ba202109a4e087ea318d75cd3ef5f2b113 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 21 Mar 2018 17:27:31 +0100
Subject: [PATCH 19/28] Typo

---
 plugins/talk-plugin-rich-text/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/talk-plugin-rich-text/README.md b/plugins/talk-plugin-rich-text/README.md
index 7fd90cff6..a69e5c8dc 100644
--- a/plugins/talk-plugin-rich-text/README.md
+++ b/plugins/talk-plugin-rich-text/README.md
@@ -58,7 +58,7 @@ 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 commandExec API. 
+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. 

From 7bef612ad0a0f37a701b7f49bf0a18cb9cc77e89 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Wed, 21 Mar 2018 12:30:22 -0400
Subject: [PATCH 20/28] Add TODOs for when we deprecate font awesome

---
 plugins/talk-plugin-downvote/client/components/Icon.js | 1 +
 plugins/talk-plugin-respect/client/Icon.js             | 1 +
 plugins/talk-plugin-upvote/client/components/Icon.js   | 1 +
 3 files changed, 3 insertions(+)

diff --git a/plugins/talk-plugin-downvote/client/components/Icon.js b/plugins/talk-plugin-downvote/client/components/Icon.js
index 13d91fa9c..56f43029d 100644
--- a/plugins/talk-plugin-downvote/client/components/Icon.js
+++ b/plugins/talk-plugin-downvote/client/components/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-arrow-circle-down', className)}
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-upvote/client/components/Icon.js b/plugins/talk-plugin-upvote/client/components/Icon.js
index b715f68f7..1b34c40cd 100644
--- a/plugins/talk-plugin-upvote/client/components/Icon.js
+++ b/plugins/talk-plugin-upvote/client/components/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-arrow-circle-up', className)} aria-hidden="true" />
 );

From 1fa1077bb219c6efc6904dd97b11a601264267e3 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 21 Mar 2018 17:35:39 +0100
Subject: [PATCH 21/28] Fix normalizer

---
 plugins/talk-plugin-rich-text/client/utils.js | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/plugins/talk-plugin-rich-text/client/utils.js b/plugins/talk-plugin-rich-text/client/utils.js
index a617d618e..4f49b3654 100644
--- a/plugins/talk-plugin-rich-text/client/utils.js
+++ b/plugins/talk-plugin-rich-text/client/utils.js
@@ -17,15 +17,5 @@ export function htmlNormalizer(htmlInput) {
   str = str
     .replace(/<em>/g, '<i>') // IE
     .replace(/<\/em>/g, '</i>'); // IE
-
-  // 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>', '');
-  }
-
-  // Normalize <div>s to <br>.
-  // return str.replace(/<div>/g, '<br>').replace(/<\/div>/g, '');
   return str;
 }

From 99955b82f5dda97b917e4a40ace1046886e93b0e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 21 Mar 2018 18:41:27 +0100
Subject: [PATCH 22/28] Blockquote styling

---
 .../client/components/CommentContent.css                  | 8 ++++++++
 .../client/components/CommentContent.js                   | 7 +++++--
 .../talk-plugin-rich-text/client/components/Editor.css    | 1 +
 3 files changed, 14 insertions(+), 2 deletions(-)
 create mode 100644 plugins/talk-plugin-rich-text/client/components/CommentContent.css

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..cff2284b9
--- /dev/null
+++ b/plugins/talk-plugin-rich-text/client/components/CommentContent.css
@@ -0,0 +1,8 @@
+.content {
+  blockquote {
+    background-color: #F6F6F6;
+    padding: 10px;
+    margin: 20px 0px 20px 10px;
+    font-style: italic;
+  }
+}
diff --git a/plugins/talk-plugin-rich-text/client/components/CommentContent.js b/plugins/talk-plugin-rich-text/client/components/CommentContent.js
index a0e045c6f..2cf481830 100644
--- a/plugins/talk-plugin-rich-text/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 { 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={`${PLUGIN_NAME}-text`}
+        className={className}
         dangerouslySetInnerHTML={{ __html: comment.richTextBody }}
       />
     ) : (
-      <div className={`${PLUGIN_NAME}-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
index 09614f5be..eabc1ee94 100644
--- a/plugins/talk-plugin-rich-text/client/components/Editor.css
+++ b/plugins/talk-plugin-rich-text/client/components/Editor.css
@@ -1,4 +1,5 @@
 .contentEditable {
+  composes: content from "./CommentContent.css";
   background: #fff;
   border: solid 1px #bbb;
   min-height: 120px;

From 1aeae553e55ead69058582f4f3587ac6187600e3 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 21 Mar 2018 19:24:36 +0100
Subject: [PATCH 23/28] Add border radius

---
 .../talk-plugin-rich-text/client/components/CommentContent.css   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/plugins/talk-plugin-rich-text/client/components/CommentContent.css b/plugins/talk-plugin-rich-text/client/components/CommentContent.css
index cff2284b9..a10abefe3 100644
--- a/plugins/talk-plugin-rich-text/client/components/CommentContent.css
+++ b/plugins/talk-plugin-rich-text/client/components/CommentContent.css
@@ -4,5 +4,6 @@
     padding: 10px;
     margin: 20px 0px 20px 10px;
     font-style: italic;
+    border-radius: 2px;
   }
 }

From 78eb92e3abf69589fa6ad43a18d755270c03aa2f Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 21 Mar 2018 19:48:33 +0100
Subject: [PATCH 24/28] Fix styling on admin site

---
 .../client/components/CommentContent.css                    | 6 ++++++
 plugins/talk-plugin-rich-text/client/components/Editor.js   | 4 +++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/plugins/talk-plugin-rich-text/client/components/CommentContent.css b/plugins/talk-plugin-rich-text/client/components/CommentContent.css
index a10abefe3..c473ba310 100644
--- a/plugins/talk-plugin-rich-text/client/components/CommentContent.css
+++ b/plugins/talk-plugin-rich-text/client/components/CommentContent.css
@@ -5,5 +5,11 @@
     margin: 20px 0px 20px 10px;
     font-style: italic;
     border-radius: 2px;
+    &::after {
+      content: none;
+    }
+    &::before {
+      content: none;
+    }
   }
 }
diff --git a/plugins/talk-plugin-rich-text/client/components/Editor.js b/plugins/talk-plugin-rich-text/client/components/Editor.js
index 3d70a639d..5c1497f00 100644
--- a/plugins/talk-plugin-rich-text/client/components/Editor.js
+++ b/plugins/talk-plugin-rich-text/client/components/Editor.js
@@ -81,7 +81,9 @@ class Editor extends React.Component {
 
   outdentOnEnter = e => {
     if (e.key === 'Enter' && !e.shiftKey) {
-      setTimeout(() => document.execCommand('outdent'));
+      setTimeout(() => {
+        document.execCommand('outdent');
+      });
     }
   };
 

From bf54959ef5dd5b050843da949a36c365b2c50eb3 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Wed, 21 Mar 2018 13:56:16 -0600
Subject: [PATCH 25/28] Fix for template rendering

---
 services/mailer/templates.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/services/mailer/templates.js b/services/mailer/templates.js
index 59bcdda5a..f20bee974 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,13 +9,13 @@ 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);

From 881d7abfa615310f99da735dbce22aca3522dd09 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Wed, 21 Mar 2018 13:58:22 -0600
Subject: [PATCH 26/28] replaced fs-extra call to fs

---
 services/mailer/templates.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/services/mailer/templates.js b/services/mailer/templates.js
index f20bee974..d6871dd20 100644
--- a/services/mailer/templates.js
+++ b/services/mailer/templates.js
@@ -22,7 +22,7 @@ templates.register = (filename, name, format) => {
 };
 
 // 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') {

From bf37ab8c784fe230b6fcda53a60d7ace70166ddf Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Wed, 21 Mar 2018 14:14:04 -0600
Subject: [PATCH 27/28] Moved extract-text-webpack-plugin from devDependencies
 to dependencies

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index cb8fc455e..c2cd648e1 100644
--- a/package.json
+++ b/package.json
@@ -104,6 +104,7 @@
     "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",
@@ -213,7 +214,6 @@
     "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",

From 273cc9927ad2077dd965f63c744f8df4e57ee913 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Wed, 21 Mar 2018 14:51:05 -0600
Subject: [PATCH 28/28] Fixed misplaced deps

---
 .babelrc        | 2 +-
 package.json    | 6 +++---
 routes/index.js | 9 +++++----
 3 files changed, 9 insertions(+), 8 deletions(-)

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/package.json b/package.json
index c2cd648e1..a807d3321 100644
--- a/package.json
+++ b/package.json
@@ -126,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",
@@ -143,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",
@@ -195,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"
@@ -216,19 +219,16 @@
     "eslint-plugin-mocha": "^4.11.0",
     "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/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'));
     }
   });
 }