From e895413038f3bd691788429e39149c9d4ac18a6e Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Wed, 21 Feb 2018 09:25:25 -0300
Subject: [PATCH 01/71] Adding new Slot, adding default component

---
 .../src/tabs/stream/components/DraftArea.js   | 22 +++++++-----
 .../tabs/stream/components/TextAreaDefault.js | 36 +++++++++++++++++++
 2 files changed, 50 insertions(+), 8 deletions(-)
 create mode 100644 client/coral-embed-stream/src/tabs/stream/components/TextAreaDefault.js

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 21ea91bd1..7d75807ba 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
 import Slot from 'coral-framework/components/Slot';
+import TextAreaDefault from './TextAreaDefault';
 
 // TODO: (kiwi) Need to adapt CSS classes post refactor to match the rest.
 
@@ -37,20 +38,25 @@ export default class DraftArea extends React.Component {
       onChange,
     } = this.props;
 
+    const tASettings = {
+      value,
+      placeholder,
+      id,
+      onChange,
+      rows,
+      disabled,
+    };
+
     return (
       <div>
         <div className={'talk-plugin-commentbox-container'}>
           <label htmlFor={id} className="screen-reader-text" aria-hidden={true}>
             {label}
           </label>
-          <textarea
-            className={'talk-plugin-commentbox-textarea'}
-            value={value}
-            placeholder={placeholder}
-            id={id}
-            onChange={onChange}
-            rows={rows}
-            disabled={disabled}
+          <Slot
+            fill="textArea"
+            defaultComponent={TextAreaDefault}
+            {...tASettings}
           />
           <Slot fill="commentInputArea" />
         </div>
diff --git a/client/coral-embed-stream/src/tabs/stream/components/TextAreaDefault.js b/client/coral-embed-stream/src/tabs/stream/components/TextAreaDefault.js
new file mode 100644
index 000000000..cccff8db8
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/stream/components/TextAreaDefault.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const TextAreaComponent = ({
+  value,
+  placeholder,
+  id,
+  onChange,
+  rows,
+  disabled,
+}) => (
+  <textarea
+    className={'talk-plugin-commentbox-textarea'}
+    value={value}
+    placeholder={placeholder}
+    id={id}
+    onChange={onChange}
+    rows={rows}
+    disabled={disabled}
+  />
+);
+
+TextAreaComponent.defaultProps = {
+  rows: 3,
+};
+
+TextAreaComponent.propTypes = {
+  id: PropTypes.string,
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  rows: PropTypes.number,
+};
+
+export default TextAreaComponent;

From 096c9a4894de18713eb0a2e2de5b84a82b7d4152 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Wed, 21 Feb 2018 09:26:39 -0300
Subject: [PATCH 02/71] Adding rte plugin :tada:

---
 .eslintignore                                 |  3 +-
 .gitignore                                    |  1 +
 plugins/talk-plugin-rte/client/.eslintrc.json | 23 ++++++++++++
 .../client/components/RTEtextArea.css         | 27 ++++++++++++++
 .../client/components/RTEtextArea.js          | 37 +++++++++++++++++++
 plugins/talk-plugin-rte/client/index.js       |  7 ++++
 .../talk-plugin-rte/client/translations.yml   |  0
 plugins/talk-plugin-rte/index.js              |  1 +
 plugins/talk-plugin-rte/package.json          | 12 ++++++
 plugins/talk-plugin-rte/yarn.lock             |  7 ++++
 10 files changed, 117 insertions(+), 1 deletion(-)
 create mode 100644 plugins/talk-plugin-rte/client/.eslintrc.json
 create mode 100644 plugins/talk-plugin-rte/client/components/RTEtextArea.css
 create mode 100644 plugins/talk-plugin-rte/client/components/RTEtextArea.js
 create mode 100644 plugins/talk-plugin-rte/client/index.js
 create mode 100644 plugins/talk-plugin-rte/client/translations.yml
 create mode 100644 plugins/talk-plugin-rte/index.js
 create mode 100644 plugins/talk-plugin-rte/package.json
 create mode 100644 plugins/talk-plugin-rte/yarn.lock

diff --git a/.eslintignore b/.eslintignore
index 50d3f7109..bb9160179 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -31,4 +31,5 @@ public
 !plugins/talk-plugin-sort-oldest
 !plugins/talk-plugin-subscriber
 !plugins/talk-plugin-toxic-comments
-!plugins/talk-plugin-viewing-options
\ No newline at end of file
+!plugins/talk-plugin-viewing-options
+!plugins/talk-plugin-rte
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index a27a08f15..041cd7e0d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -52,6 +52,7 @@ plugins/*
 !plugins/talk-plugin-subscriber
 !plugins/talk-plugin-flag-details
 !plugins/talk-plugin-slack-notifications
+!plugins/talk-plugin-rte
 
 **/node_modules/*
 yarn-error.log
diff --git a/plugins/talk-plugin-rte/client/.eslintrc.json b/plugins/talk-plugin-rte/client/.eslintrc.json
new file mode 100644
index 000000000..9fe56bd14
--- /dev/null
+++ b/plugins/talk-plugin-rte/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-rte/client/components/RTEtextArea.css b/plugins/talk-plugin-rte/client/components/RTEtextArea.css
new file mode 100644
index 000000000..187e68750
--- /dev/null
+++ b/plugins/talk-plugin-rte/client/components/RTEtextArea.css
@@ -0,0 +1,27 @@
+.myPluginContainer {
+    padding: 10px;
+    background: #f0f0f0;
+    border: 1px solid #d6d6d6;
+    margin: 10px 0;
+    text-align: center;
+    border-radius: 3px;
+}
+
+.logo {
+  position: block;
+  animation: spin 2s infinite ease;
+  animation-delay: 1s;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.description {
+  color: #444444;
+}
diff --git a/plugins/talk-plugin-rte/client/components/RTEtextArea.js b/plugins/talk-plugin-rte/client/components/RTEtextArea.js
new file mode 100644
index 000000000..5a833bcc0
--- /dev/null
+++ b/plugins/talk-plugin-rte/client/components/RTEtextArea.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import pell from 'pell';
+
+class TextArea extends React.Component {
+  componentWillMount() {}
+  render() {
+    const { value, placeholder, id, onChange, rows, disabled } = this.props;
+
+    return (
+      <textarea
+        className={'talk-plugin-commentbox-textarea'}
+        value={value}
+        placeholder={'RTE Text Area'}
+        id={id}
+        onChange={onChange}
+        rows={rows}
+        disabled={disabled}
+      />
+    );
+  }
+}
+
+TextArea.defaultProps = {
+  rows: 3,
+};
+
+TextArea.propTypes = {
+  id: PropTypes.string,
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  rows: PropTypes.number,
+};
+
+export default TextAreaComponent;
diff --git a/plugins/talk-plugin-rte/client/index.js b/plugins/talk-plugin-rte/client/index.js
new file mode 100644
index 000000000..920dd2a2c
--- /dev/null
+++ b/plugins/talk-plugin-rte/client/index.js
@@ -0,0 +1,7 @@
+import RTEtextArea from './components/RTEtextArea';
+
+export default {
+  slots: {
+    textArea: [RTEtextArea],
+  },
+};
diff --git a/plugins/talk-plugin-rte/client/translations.yml b/plugins/talk-plugin-rte/client/translations.yml
new file mode 100644
index 000000000..e69de29bb
diff --git a/plugins/talk-plugin-rte/index.js b/plugins/talk-plugin-rte/index.js
new file mode 100644
index 000000000..f053ebf79
--- /dev/null
+++ b/plugins/talk-plugin-rte/index.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/plugins/talk-plugin-rte/package.json b/plugins/talk-plugin-rte/package.json
new file mode 100644
index 000000000..79a0ada07
--- /dev/null
+++ b/plugins/talk-plugin-rte/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@coralproject/talk-plugin-rte",
+  "pluginName": "talk-plugin-rte",
+  "version": "0.0.1",
+  "description": "Rich Text Editor for Talk",
+  "main": "index.js",
+  "author": "The Coral Project Team <coral@mozillafoundation.org>",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "pell": "^0.7.0"
+  }
+}
diff --git a/plugins/talk-plugin-rte/yarn.lock b/plugins/talk-plugin-rte/yarn.lock
new file mode 100644
index 000000000..f9eb91c43
--- /dev/null
+++ b/plugins/talk-plugin-rte/yarn.lock
@@ -0,0 +1,7 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+pell@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/pell/-/pell-0.7.0.tgz#46b3fcdfa8dd7e5999f73c550a337ecc80193dcc"

From 8258ccde9b3e0f6e69cb4734a838b1221c2a9f58 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Wed, 21 Feb 2018 10:13:13 -0300
Subject: [PATCH 03/71] RTE Plugin - Editor working

---
 .vscode/settings.json                         |  2 +
 .../src/tabs/stream/components/DraftArea.css  |  3 +
 .../src/tabs/stream/components/DraftArea.js   |  2 +
 .../src/tabs/stream/containers/DraftArea.js   |  4 +-
 .../client/components/RTEtextArea.css         | 48 ++++++++------
 .../client/components/RTEtextArea.js          | 66 +++++++++++++------
 6 files changed, 83 insertions(+), 42 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 client/coral-embed-stream/src/tabs/stream/components/DraftArea.css

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..7a73a41bf
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,2 @@
+{
+}
\ No newline at end of file
diff --git a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.css b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.css
new file mode 100644
index 000000000..04bde1d0d
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.css
@@ -0,0 +1,3 @@
+.textArea {
+  width: 100%;
+}
\ No newline at end of file
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 7d75807ba..806592795 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
@@ -4,6 +4,7 @@ import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
 import Slot from 'coral-framework/components/Slot';
 import TextAreaDefault from './TextAreaDefault';
+import styles from './DraftArea.css';
 
 // TODO: (kiwi) Need to adapt CSS classes post refactor to match the rest.
 
@@ -56,6 +57,7 @@ export default class DraftArea extends React.Component {
           <Slot
             fill="textArea"
             defaultComponent={TextAreaDefault}
+            className={styles.textArea}
             {...tASettings}
           />
           <Slot fill="commentInputArea" />
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 b9b7fd58a..ffe481c24 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
@@ -24,8 +24,8 @@ export default class DraftAreaContainer extends React.Component {
     return `${STORAGE_PATH}_${this.props.id}`;
   };
 
-  onChange = e => {
-    this.props.onChange && this.props.onChange(e.target.value);
+  onChange = value => {
+    this.props.onChange && this.props.onChange(value);
   };
 
   componentWillReceiveProps(nextProps) {
diff --git a/plugins/talk-plugin-rte/client/components/RTEtextArea.css b/plugins/talk-plugin-rte/client/components/RTEtextArea.css
index 187e68750..56fe7d9ed 100644
--- a/plugins/talk-plugin-rte/client/components/RTEtextArea.css
+++ b/plugins/talk-plugin-rte/client/components/RTEtextArea.css
@@ -1,27 +1,35 @@
-.myPluginContainer {
-    padding: 10px;
-    background: #f0f0f0;
-    border: 1px solid #d6d6d6;
-    margin: 10px 0;
-    text-align: center;
-    border-radius: 3px;
+.content {
+  background: #fff;
+  border: solid 1px #bbb;
+  min-height: 120px;
 }
 
-.logo {
-  position: block;
-  animation: spin 2s infinite ease;
-  animation-delay: 1s;
+.button {
+  display: inline-block;
+  text-align: center;
+  color: #2c3e50!important;
+  height: 30px;
+  margin: 0;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  cursor: pointer;
+  outline: 0;
+  margin-right: 2px;
+  font-size: 1em;
+  width: 25px;
 }
 
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+.button:hover{
+  background: #fcfcfc;
+  border-color: #95a5a6;
 }
 
-.description {
-  color: #444444;
+.actionBar {
+  user-select: none;
+  padding: 5px 10px;
+  border-top: 1px solid #bbb;
+  border-left: 1px solid #bbb;
+  border-right: 1px solid #bbb;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
 }
diff --git a/plugins/talk-plugin-rte/client/components/RTEtextArea.js b/plugins/talk-plugin-rte/client/components/RTEtextArea.js
index 5a833bcc0..b2d4bc39f 100644
--- a/plugins/talk-plugin-rte/client/components/RTEtextArea.js
+++ b/plugins/talk-plugin-rte/client/components/RTEtextArea.js
@@ -1,31 +1,57 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import pell from 'pell';
+import { init } from 'pell';
+import styles from './RTEtextArea.css';
+import cn from 'classnames';
+
+const pluginName = 'talk-plugin-rte';
+
+class Editor extends React.Component {
+  ref = null;
+
+  handleRef = ref => (this.ref = ref);
+
+  componentDidMount() {
+    const { onChange, actions, classNames } = this.props;
+
+    init({
+      element: this.ref,
+      onChange: html => onChange(html),
+      actions,
+      classes: {
+        actionbar: cn(
+          styles.actionBar,
+          classNames.actionbar,
+          `${pluginName}-action-bar`
+        ),
+        content: cn(
+          styles.content,
+          classNames.content,
+          `${pluginName}-content`
+        ),
+        button: cn(styles.button, classNames.button, `${pluginName}-button`),
+      },
+    });
+  }
 
-class TextArea extends React.Component {
-  componentWillMount() {}
   render() {
-    const { value, placeholder, id, onChange, rows, disabled } = this.props;
-
-    return (
-      <textarea
-        className={'talk-plugin-commentbox-textarea'}
-        value={value}
-        placeholder={'RTE Text Area'}
-        id={id}
-        onChange={onChange}
-        rows={rows}
-        disabled={disabled}
-      />
-    );
+    const { id, containerClass } = this.props;
+    return <div id={id} ref={this.handleRef} className={containerClass} />;
   }
 }
 
-TextArea.defaultProps = {
-  rows: 3,
+Editor.defaultProps = {
+  defaultContent: '',
+  styleWithCSS: false,
+  actions: ['bold', 'italic', 'underline'],
+  classNames: {
+    button: '',
+    content: '',
+    actionbar: '',
+  },
 };
 
-TextArea.propTypes = {
+Editor.propTypes = {
   id: PropTypes.string,
   value: PropTypes.string,
   placeholder: PropTypes.string,
@@ -34,4 +60,4 @@ TextArea.propTypes = {
   rows: PropTypes.number,
 };
 
-export default TextAreaComponent;
+export default Editor;

From d7b4f5735012b393a94314e6025e2d80fb127faa Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Wed, 21 Feb 2018 10:27:01 -0300
Subject: [PATCH 04/71] styles, renaming, func

---
 client/coral-embed-stream/style/default.css     |  1 -
 .../components/{RTEtextArea.css => Editor.css}  | 12 ++++++++++++
 .../components/{RTEtextArea.js => Editor.js}    | 17 ++++++++++++++---
 plugins/talk-plugin-rte/client/index.js         |  4 ++--
 4 files changed, 28 insertions(+), 6 deletions(-)
 rename plugins/talk-plugin-rte/client/components/{RTEtextArea.css => Editor.css} (75%)
 rename plugins/talk-plugin-rte/client/components/{RTEtextArea.js => Editor.js} (79%)

diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 04797211e..d6e223724 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -5,7 +5,6 @@
 
 * {
   font-family: inherit;
-  font-style: inherit;
 }
 
 html, body {
diff --git a/plugins/talk-plugin-rte/client/components/RTEtextArea.css b/plugins/talk-plugin-rte/client/components/Editor.css
similarity index 75%
rename from plugins/talk-plugin-rte/client/components/RTEtextArea.css
rename to plugins/talk-plugin-rte/client/components/Editor.css
index 56fe7d9ed..1bc7f9cd9 100644
--- a/plugins/talk-plugin-rte/client/components/RTEtextArea.css
+++ b/plugins/talk-plugin-rte/client/components/Editor.css
@@ -2,6 +2,12 @@
   background: #fff;
   border: solid 1px #bbb;
   min-height: 120px;
+  box-sizing: border-box;
+  outline: 0;
+  overflow-y: auto;
+  width: 100%;
+  padding: 4px;
+  font-style: unset;
 }
 
 .button {
@@ -17,6 +23,8 @@
   margin-right: 2px;
   font-size: 1em;
   width: 25px;
+  background-color: transparent;
+  outline: 0;
 }
 
 .button:hover{
@@ -33,3 +41,7 @@
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
+
+.container {
+  box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/plugins/talk-plugin-rte/client/components/RTEtextArea.js b/plugins/talk-plugin-rte/client/components/Editor.js
similarity index 79%
rename from plugins/talk-plugin-rte/client/components/RTEtextArea.js
rename to plugins/talk-plugin-rte/client/components/Editor.js
index b2d4bc39f..4167bc3c3 100644
--- a/plugins/talk-plugin-rte/client/components/RTEtextArea.js
+++ b/plugins/talk-plugin-rte/client/components/Editor.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { init } from 'pell';
-import styles from './RTEtextArea.css';
+import styles from './Editor.css';
 import cn from 'classnames';
 
 const pluginName = 'talk-plugin-rte';
@@ -35,8 +35,18 @@ class Editor extends React.Component {
   }
 
   render() {
-    const { id, containerClass } = this.props;
-    return <div id={id} ref={this.handleRef} className={containerClass} />;
+    const { id, classNames } = this.props;
+    return (
+      <div
+        id={id}
+        ref={this.handleRef}
+        className={cn(
+          styles.container,
+          classNames.container,
+          `${pluginName}-container`
+        )}
+      />
+    );
   }
 }
 
@@ -48,6 +58,7 @@ Editor.defaultProps = {
     button: '',
     content: '',
     actionbar: '',
+    container: '',
   },
 };
 
diff --git a/plugins/talk-plugin-rte/client/index.js b/plugins/talk-plugin-rte/client/index.js
index 920dd2a2c..dc7f35803 100644
--- a/plugins/talk-plugin-rte/client/index.js
+++ b/plugins/talk-plugin-rte/client/index.js
@@ -1,7 +1,7 @@
-import RTEtextArea from './components/RTEtextArea';
+import Editor from './components/Editor';
 
 export default {
   slots: {
-    textArea: [RTEtextArea],
+    textArea: [Editor],
   },
 };

From 7d7a5a8b59960f40c3627b1ee4e9388a449d97b4 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Wed, 21 Feb 2018 10:43:10 -0300
Subject: [PATCH 05/71] Buttons styling

---
 .../client/components/Editor.css              | 26 +++++++++----------
 .../client/components/Editor.js               |  4 +--
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/plugins/talk-plugin-rte/client/components/Editor.css b/plugins/talk-plugin-rte/client/components/Editor.css
index 1bc7f9cd9..294430753 100644
--- a/plugins/talk-plugin-rte/client/components/Editor.css
+++ b/plugins/talk-plugin-rte/client/components/Editor.css
@@ -6,30 +6,28 @@
   outline: 0;
   overflow-y: auto;
   width: 100%;
-  padding: 4px;
+  padding: 10px;
   font-style: unset;
 }
 
 .button {
-  display: inline-block;
-  text-align: center;
-  color: #2c3e50!important;
-  height: 30px;
-  margin: 0;
-  border: 1px solid transparent;
-  border-radius: 3px;
-  cursor: pointer;
-  outline: 0;
-  margin-right: 2px;
-  font-size: 1em;
-  width: 25px;
+  top: 0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 4px;
+  padding: 0;
+  font-size: 14px;
+  margin-top: -2px;
   background-color: transparent;
+  border: solid 1px transparent;
+  cursor: pointer;
+  height: 30px;
   outline: 0;
+  width: 30px;
 }
 
 .button:hover{
   background: #fcfcfc;
-  border-color: #95a5a6;
 }
 
 .actionBar {
diff --git a/plugins/talk-plugin-rte/client/components/Editor.js b/plugins/talk-plugin-rte/client/components/Editor.js
index 4167bc3c3..550a56b75 100644
--- a/plugins/talk-plugin-rte/client/components/Editor.js
+++ b/plugins/talk-plugin-rte/client/components/Editor.js
@@ -52,8 +52,8 @@ class Editor extends React.Component {
 
 Editor.defaultProps = {
   defaultContent: '',
-  styleWithCSS: false,
-  actions: ['bold', 'italic', 'underline'],
+  styleWithCSS: true,
+  actions: ['bold', 'italic', 'quote'],
   classNames: {
     button: '',
     content: '',

From 50748cc032ab63e8f0286da7fb0d9d559fefa06c Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Wed, 21 Feb 2018 10:45:54 -0300
Subject: [PATCH 06/71] Updating onChange

---
 .../src/tabs/stream/components/TextAreaDefault.js               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/src/tabs/stream/components/TextAreaDefault.js b/client/coral-embed-stream/src/tabs/stream/components/TextAreaDefault.js
index cccff8db8..0893e6d95 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/TextAreaDefault.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/TextAreaDefault.js
@@ -14,7 +14,7 @@ const TextAreaComponent = ({
     value={value}
     placeholder={placeholder}
     id={id}
-    onChange={onChange}
+    onChange={e => onChange(e.target.value)}
     rows={rows}
     disabled={disabled}
   />

From 9cfa5b6a0f881f32bfea16c9ae87f81f0cfde443 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Wed, 21 Feb 2018 11:15:23 -0300
Subject: [PATCH 07/71] Removing old styles from default css

---
 .../tabs/stream/components/CommentForm.css    | 15 ++++++
 .../src/tabs/stream/components/CommentForm.js |  3 +-
 .../src/tabs/stream/components/DraftArea.css  |  9 ++++
 .../src/tabs/stream/components/DraftArea.js   | 13 ++---
 .../stream/components/DraftAreaContent.css    | 11 +++++
 ...TextAreaDefault.js => DraftAreaContent.js} | 12 +++--
 .../src/tabs/stream/containers/CommentBox.js  |  2 +-
 client/coral-embed-stream/style/default.css   | 47 -------------------
 .../client/components/OffTopicCheckbox.css    |  1 +
 9 files changed, 53 insertions(+), 60 deletions(-)
 create mode 100644 client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.css
 rename client/coral-embed-stream/src/tabs/stream/components/{TextAreaDefault.js => DraftAreaContent.js} (65%)

diff --git a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.css b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.css
index 23b6564b5..5a1e66412 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.css
+++ b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.css
@@ -1,3 +1,18 @@
+.buttonContainer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.button {
+  float: right;
+  margin-top: 10px;
+  padding: 5px 10px;
+  background: rgb(105, 105, 105);
+  color: #FFF;
+  border: none;
+  border-radius: 2px;
+}
+
 /**
  * Example loading state animations on the button.
  */
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 28b8bb668..a9ea8f150 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
@@ -113,7 +113,7 @@ export class CommentForm extends React.Component {
           charCountEnable={this.props.charCountEnable}
           maxCharCount={this.props.maxCharCount}
         />
-        <div className={`${name}-button-container`}>
+        <div className={cn(styles.buttonContainer, `${name}-button-container`)}>
           {this.props.buttonContainerStart}
           {typeof this.props.onCancel === 'function' && (
             <Button
@@ -130,6 +130,7 @@ export class CommentForm extends React.Component {
               disableSubmitButton ? 'lightGrey' : this.props.submitButtonCStyle
             }
             className={cn(
+              styles.button,
               `${name}-button`,
               submitButtonClassName,
               this.getButtonClassName()
diff --git a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.css b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.css
index 04bde1d0d..44e55e4de 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.css
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.css
@@ -1,3 +1,12 @@
 .textArea {
   width: 100%;
+}
+
+.charCount {
+  color: #ccc;
+  text-align: right;
+}
+
+.charMax {
+  color: #d50000;
 }
\ No newline at end of file
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 806592795..c1678d0a7 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
 import Slot from 'coral-framework/components/Slot';
-import TextAreaDefault from './TextAreaDefault';
+import DraftAreaContent from './DraftAreaContent';
 import styles from './DraftArea.css';
 
 // TODO: (kiwi) Need to adapt CSS classes post refactor to match the rest.
@@ -14,8 +14,9 @@ import styles from './DraftArea.css';
 export default class DraftArea extends React.Component {
   renderCharCount() {
     const { value, maxCharCount } = this.props;
-    const className = cn('talk-plugin-commentbox-char-count', {
-      ['talk-plugin-commentbox-char-max']: value.length > maxCharCount,
+    const className = cn(styles.charCount, 'talk-draftarea-char-count', {
+      [`${styles.charMax} talk-draftarea-char-max`]:
+        value.length > maxCharCount,
     });
     const remaining = maxCharCount - value.length;
 
@@ -50,14 +51,14 @@ export default class DraftArea extends React.Component {
 
     return (
       <div>
-        <div className={'talk-plugin-commentbox-container'}>
+        <div className={cn(styles.container, 'talk-draftarea-container')}>
           <label htmlFor={id} className="screen-reader-text" aria-hidden={true}>
             {label}
           </label>
           <Slot
             fill="textArea"
-            defaultComponent={TextAreaDefault}
-            className={styles.textArea}
+            defaultComponent={DraftAreaContent}
+            className={styles.content}
             {...tASettings}
           />
           <Slot fill="commentInputArea" />
diff --git a/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.css b/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.css
new file mode 100644
index 000000000..9de435aea
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.css
@@ -0,0 +1,11 @@
+.content {
+  color: #262626;
+  flex: 1;
+  padding: 1em;
+  min-height: 100px;
+  margin-top: 10px;
+  font-size: 16px;
+  border: 1px solid #9E9E9E;
+  width: 100%;
+  box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/client/coral-embed-stream/src/tabs/stream/components/TextAreaDefault.js b/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
similarity index 65%
rename from client/coral-embed-stream/src/tabs/stream/components/TextAreaDefault.js
rename to client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
index 0893e6d95..e23f7b9eb 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/TextAreaDefault.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cn from 'classnames';
+import styles from './DraftAreaContent.css';
 
-const TextAreaComponent = ({
+const DraftAreaContent = ({
   value,
   placeholder,
   id,
@@ -10,7 +12,7 @@ const TextAreaComponent = ({
   disabled,
 }) => (
   <textarea
-    className={'talk-plugin-commentbox-textarea'}
+    className={cn(styles.content, 'talk-draftarea-content')}
     value={value}
     placeholder={placeholder}
     id={id}
@@ -20,11 +22,11 @@ const TextAreaComponent = ({
   />
 );
 
-TextAreaComponent.defaultProps = {
+DraftAreaContent.defaultProps = {
   rows: 3,
 };
 
-TextAreaComponent.propTypes = {
+DraftAreaContent.propTypes = {
   id: PropTypes.string,
   value: PropTypes.string,
   placeholder: PropTypes.string,
@@ -33,4 +35,4 @@ TextAreaComponent.propTypes = {
   rows: PropTypes.number,
 };
 
-export default TextAreaComponent;
+export default DraftAreaContent;
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 a64356578..be2e7b337 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
@@ -11,7 +11,7 @@ import { CommentForm } from '../components/CommentForm';
 import { notifyForNewCommentStatus } from '../helpers';
 
 // TODO: (kiwi) Need to adapt CSS classes post refactor to match the rest.
-export const name = 'talk-plugin-commentbox';
+export const name = 'talk-commentbox';
 
 /**
  * Container for posting a new Comment
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index d6e223724..98416d68d 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -112,53 +112,6 @@ body {
   position: relative;
 }
 
-/* Comment Box Styles */
-.talk-plugin-commentbox-container {
-  display: flex;
-  width: 100%;
-}
-
-.talk-plugin-commentbox-textarea {
-  color: #262626;
-  flex: 1;
-  padding: 1em;
-  min-height: 100px;
-  margin-top: 10px;
-  font-size: 16px;
-  border: 1px solid #9E9E9E;
-}
-
-.talk-plugin-commentbox-button-container {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 10px;
-}
-
-.talk-plugin-commentbox-button {
-  float: right;
-  margin-top: 10px;
-  padding: 5px 10px;
-  background: rgb(105, 105, 105);
-  color: #FFF;
-  border: none;
-  border-radius: 2px;
-}
-
-.talk-plugin-commentbox-username {
-  width: 50%;
-  padding-left: 5px;
-  margin-bottom: 5px;
-}
-
-.talk-plugin-commentbox-char-count {
-  color: #ccc;
-  text-align: right;
-}
-
-.talk-plugin-commentbox-char-max {
-  color: #d50000;
-}
-
 /* Comment styles */
 .comment {
   margin-bottom: 10px;
diff --git a/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.css b/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.css
index 1a6bda2a6..17e8b4c30 100644
--- a/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.css
+++ b/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.css
@@ -1,5 +1,6 @@
 .offTopic {
   height: 100%;
+  margin-top: 10px;
 }
 
 .offTopicLabel {

From bf1bae8999a7dee90f70ce726fcd69df059d4310 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Wed, 21 Feb 2018 16:37:19 -0300
Subject: [PATCH 08/71] Support for both htmlBody and original body

---
 .../src/tabs/stream/containers/CommentBox.js  |  14 +-
 .../src/tabs/stream/containers/DraftArea.js   |   4 +-
 package.json                                  |   1 +
 .../client/components/Editor.js               |   6 +-
 plugins/talk-plugin-rte/index.js              |  14 +-
 plugins/talk-plugin-rte/package.json          |   1 +
 plugins/talk-plugin-rte/server/hooks.js       |  13 ++
 plugins/talk-plugin-rte/server/resolvers.js   |   7 +
 .../talk-plugin-rte/server/typeDefs.graphql   |   7 +
 plugins/talk-plugin-rte/yarn.lock             |   4 +
 yarn.lock                                     | 161 +++++++++++++++++-
 11 files changed, 216 insertions(+), 16 deletions(-)
 create mode 100644 plugins/talk-plugin-rte/server/hooks.js
 create mode 100644 plugins/talk-plugin-rte/server/resolvers.js
 create mode 100644 plugins/talk-plugin-rte/server/typeDefs.graphql

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 be2e7b337..b624205bd 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
@@ -23,7 +23,8 @@ class CommentBox extends React.Component {
     this.state = {
       body: '',
       loadingState: '',
-
+      // data: {@object} contains data that might be useful for plugins
+      data: {},
       hooks: {
         preSubmit: [],
         postSubmit: [],
@@ -62,6 +63,7 @@ class CommentBox extends React.Component {
       parent_id: parentId,
       body: this.state.body,
       tags: this.props.tags,
+      ...this.state.data,
     };
 
     // Execute preSubmit Hooks
@@ -88,8 +90,14 @@ class CommentBox extends React.Component {
       });
   };
 
-  handleBodyChange = body => {
-    this.setState({ body });
+  handleBodyChange = (body, ...data) => {
+    this.setState(state => ({
+      body,
+      data: {
+        ...state.data,
+        ...data[0],
+      },
+    }));
   };
 
   registerHook = (hookType = '', hook = () => {}) => {
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 ffe481c24..335525066 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
@@ -24,8 +24,8 @@ export default class DraftAreaContainer extends React.Component {
     return `${STORAGE_PATH}_${this.props.id}`;
   };
 
-  onChange = value => {
-    this.props.onChange && this.props.onChange(value);
+  onChange = (...args) => {
+    this.props.onChange && this.props.onChange(...args);
   };
 
   componentWillReceiveProps(nextProps) {
diff --git a/package.json b/package.json
index c61a5db45..2de524d01 100644
--- a/package.json
+++ b/package.json
@@ -180,6 +180,7 @@
     "timeago.js": "^2.0.3",
     "timekeeper": "^1.0.0",
     "tlds": "^1.196.0",
+    "turndown": "^4.0.1",
     "uglifyjs-webpack-plugin": "^1.1.6",
     "url-join": "^2.0.2",
     "url-loader": "^0.6.0",
diff --git a/plugins/talk-plugin-rte/client/components/Editor.js b/plugins/talk-plugin-rte/client/components/Editor.js
index 550a56b75..8d2d84f00 100644
--- a/plugins/talk-plugin-rte/client/components/Editor.js
+++ b/plugins/talk-plugin-rte/client/components/Editor.js
@@ -16,7 +16,11 @@ class Editor extends React.Component {
 
     init({
       element: this.ref,
-      onChange: html => onChange(html),
+      onChange: htmlBody => {
+        // We want to save the original comment body
+        const originalBody = this.ref.childNodes[1].innerText;
+        onChange(originalBody, { htmlBody });
+      },
       actions,
       classes: {
         actionbar: cn(
diff --git a/plugins/talk-plugin-rte/index.js b/plugins/talk-plugin-rte/index.js
index f053ebf79..a318f8a11 100644
--- a/plugins/talk-plugin-rte/index.js
+++ b/plugins/talk-plugin-rte/index.js
@@ -1 +1,13 @@
-module.exports = {};
+const { readFileSync } = require('fs');
+const path = require('path');
+const hooks = require('./server/hooks');
+const resolvers = require('./server/resolvers');
+
+module.exports = {
+  typeDefs: readFileSync(
+    path.join(__dirname, 'server/typeDefs.graphql'),
+    'utf8'
+  ),
+  hooks,
+  resolvers,
+};
diff --git a/plugins/talk-plugin-rte/package.json b/plugins/talk-plugin-rte/package.json
index 79a0ada07..298e8ffb7 100644
--- a/plugins/talk-plugin-rte/package.json
+++ b/plugins/talk-plugin-rte/package.json
@@ -7,6 +7,7 @@
   "author": "The Coral Project Team <coral@mozillafoundation.org>",
   "license": "Apache-2.0",
   "dependencies": {
+    "marked": "^0.3.16",
     "pell": "^0.7.0"
   }
 }
diff --git a/plugins/talk-plugin-rte/server/hooks.js b/plugins/talk-plugin-rte/server/hooks.js
new file mode 100644
index 000000000..359c15788
--- /dev/null
+++ b/plugins/talk-plugin-rte/server/hooks.js
@@ -0,0 +1,13 @@
+const TurndownService = require('turndown');
+
+module.exports = {
+  RootMutation: {
+    createComment: {
+      async pre(_, { input }, _context, _info) {
+        // Saving the HTML comment as Markdown
+        const ts = new TurndownService();
+        input.body = ts.turndown(input.body);
+      },
+    },
+  },
+};
diff --git a/plugins/talk-plugin-rte/server/resolvers.js b/plugins/talk-plugin-rte/server/resolvers.js
new file mode 100644
index 000000000..71cf7cfbc
--- /dev/null
+++ b/plugins/talk-plugin-rte/server/resolvers.js
@@ -0,0 +1,7 @@
+const marked = require('marked');
+
+module.exports = {
+  Comment: {
+    body: comment => marked(comment.body),
+  },
+};
diff --git a/plugins/talk-plugin-rte/server/typeDefs.graphql b/plugins/talk-plugin-rte/server/typeDefs.graphql
new file mode 100644
index 000000000..766189e04
--- /dev/null
+++ b/plugins/talk-plugin-rte/server/typeDefs.graphql
@@ -0,0 +1,7 @@
+input CreateCommentInput {
+  htmlBody: String
+}
+
+type Comment {
+  htmlBody: String
+}
diff --git a/plugins/talk-plugin-rte/yarn.lock b/plugins/talk-plugin-rte/yarn.lock
index f9eb91c43..a79e1093f 100644
--- a/plugins/talk-plugin-rte/yarn.lock
+++ b/plugins/talk-plugin-rte/yarn.lock
@@ -2,6 +2,10 @@
 # yarn lockfile v1
 
 
+marked@^0.3.16:
+  version "0.3.16"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.16.tgz#2f188b7dfcfa6540fe9940adaf0f3b791c9a5cba"
+
 pell@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/pell/-/pell-0.7.0.tgz#46b3fcdfa8dd7e5999f73c550a337ecc80193dcc"
diff --git a/yarn.lock b/yarn.lock
index bc59a3be3..106b3c1dd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -101,7 +101,7 @@
   dependencies:
     "@types/node" "*"
 
-abab@^1.0.0, abab@^1.0.3:
+abab@^1.0.0, abab@^1.0.3, abab@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
 
@@ -134,6 +134,12 @@ acorn-globals@^3.0.0, acorn-globals@^3.1.0:
   dependencies:
     acorn "^4.0.4"
 
+acorn-globals@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.1.0.tgz#ab716025dbe17c54d3ef81d32ece2b2d99fe2538"
+  dependencies:
+    acorn "^5.0.0"
+
 acorn-jsx@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
@@ -160,6 +166,10 @@ acorn@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.2.1.tgz#317ac7821826c22c702d66189ab8359675f135d7"
 
+acorn@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.4.1.tgz#fdc58d9d17f4a4e98d102ded826a9b9759125102"
+
 addressparser@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/addressparser/-/addressparser-1.0.1.tgz#47afbe1a2a9262191db6838e4fd1d39b40821746"
@@ -1333,6 +1343,10 @@ brotli@^1.3.1:
   dependencies:
     base64-js "^1.1.2"
 
+browser-process-hrtime@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-0.1.2.tgz#425d68a58d3447f02a04aa894187fce8af8b7b8e"
+
 browser-resolve@^1.11.2:
   version "1.11.2"
   resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
@@ -2004,6 +2018,10 @@ content-type-parser@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/content-type-parser/-/content-type-parser-1.0.1.tgz#c3e56988c53c65127fb46d4032a3a900246fdc94"
 
+content-type-parser@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/content-type-parser/-/content-type-parser-1.0.2.tgz#caabe80623e63638b2502fd4c7f12ff4ce2352e7"
+
 content-type@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
@@ -2546,6 +2564,12 @@ domelementtype@~1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
 
+domexception@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90"
+  dependencies:
+    webidl-conversions "^4.0.2"
+
 domhandler@2.3:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.3.0.tgz#2de59a0822d5027fabff6f032c2b25a2a8abe738"
@@ -2852,7 +2876,7 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
-escodegen@1.x.x, escodegen@^1.6.1:
+escodegen@1.x.x, escodegen@^1.6.1, escodegen@^1.9.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.9.0.tgz#9811a2f265dc1cd3894420ee3717064b632b8852"
   dependencies:
@@ -4058,6 +4082,12 @@ html-encoding-sniffer@^1.0.1:
   dependencies:
     whatwg-encoding "^1.0.1"
 
+html-encoding-sniffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
+  dependencies:
+    whatwg-encoding "^1.0.1"
+
 htmlparser2@^3.9.1:
   version "3.9.2"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338"
@@ -4996,6 +5026,37 @@ jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
 
+jsdom@^11.3.0:
+  version "11.6.2"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.6.2.tgz#25d1ef332d48adf77fc5221fe2619967923f16bb"
+  dependencies:
+    abab "^1.0.4"
+    acorn "^5.3.0"
+    acorn-globals "^4.1.0"
+    array-equal "^1.0.0"
+    browser-process-hrtime "^0.1.2"
+    content-type-parser "^1.0.2"
+    cssom ">= 0.3.2 < 0.4.0"
+    cssstyle ">= 0.2.37 < 0.3.0"
+    domexception "^1.0.0"
+    escodegen "^1.9.0"
+    html-encoding-sniffer "^1.0.2"
+    left-pad "^1.2.0"
+    nwmatcher "^1.4.3"
+    parse5 "4.0.0"
+    pn "^1.1.0"
+    request "^2.83.0"
+    request-promise-native "^1.0.5"
+    sax "^1.2.4"
+    symbol-tree "^3.2.2"
+    tough-cookie "^2.3.3"
+    w3c-hr-time "^1.0.1"
+    webidl-conversions "^4.0.2"
+    whatwg-encoding "^1.0.3"
+    whatwg-url "^6.4.0"
+    ws "^4.0.0"
+    xml-name-validator "^3.0.0"
+
 jsdom@^7.0.2:
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-7.2.2.tgz#40b402770c2bda23469096bee91ab675e3b1fc6e"
@@ -5243,6 +5304,10 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
+left-pad@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.2.0.tgz#d30a73c6b8201d8f7d8e7956ba9616087a68e0ee"
+
 leprechaun@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/leprechaun/-/leprechaun-0.0.2.tgz#8b96514a9e634c53fbe59a8094f3378c8fb2084d"
@@ -5587,6 +5652,10 @@ lodash.snakecase@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz#39d714a35357147837aefd64b5dcbb16becd8f8d"
 
+lodash.sortby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
+
 lodash.toarray@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
@@ -5603,6 +5672,10 @@ lodash@^4.0.0, lodash@^4.1.0, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.16.6, lo
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
+lodash@^4.13.1:
+  version "4.17.5"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
+
 log-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
@@ -6390,7 +6463,7 @@ number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
 
-"nwmatcher@>= 1.3.7 < 2.0.0", "nwmatcher@>= 1.3.9 < 2.0.0":
+"nwmatcher@>= 1.3.7 < 2.0.0", "nwmatcher@>= 1.3.9 < 2.0.0", nwmatcher@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.4.3.tgz#64348e3b3d80f035b40ac11563d278f8b72db89c"
 
@@ -6647,6 +6720,10 @@ parse-url@^1.3.0:
     is-ssh "^1.3.0"
     protocols "^1.4.0"
 
+parse5@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
+
 parse5@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94"
@@ -6827,6 +6904,10 @@ pluralize@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
 
+pn@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
+
 popsicle@^6.2.0:
   version "6.2.2"
   resolved "https://registry.yarnpkg.com/popsicle/-/popsicle-6.2.2.tgz#e273c8bd48181f73a59b199e2a5e25b692b3e237"
@@ -7539,7 +7620,7 @@ punycode@1.4.1, punycode@^1.2.4, punycode@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
 
-punycode@2.x.x:
+punycode@2.x.x, punycode@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.0.tgz#5f863edc89b96db09074bad7947bf09056ca4e7d"
 
@@ -8069,7 +8150,21 @@ repeating@^2.0.0:
   dependencies:
     is-finite "^1.0.0"
 
-request@2, request@^2.55.0, request@^2.74.0, request@^2.79.0, request@^2.81.0:
+request-promise-core@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.1.tgz#3eee00b2c5aa83239cfb04c5700da36f81cd08b6"
+  dependencies:
+    lodash "^4.13.1"
+
+request-promise-native@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.5.tgz#5281770f68e0c9719e5163fd3fab482215f4fda5"
+  dependencies:
+    request-promise-core "1.1.1"
+    stealthy-require "^1.1.0"
+    tough-cookie ">=2.3.3"
+
+request@2, request@^2.55.0, request@^2.74.0, request@^2.79.0, request@^2.81.0, request@^2.83.0:
   version "2.83.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
   dependencies:
@@ -8297,7 +8392,7 @@ sax@0.5.x:
   version "0.5.8"
   resolved "https://registry.yarnpkg.com/sax/-/sax-0.5.8.tgz#d472db228eb331c2506b0e8c15524adb939d12c1"
 
-sax@^1.1.4, sax@^1.2.1, sax@~1.2.1:
+sax@^1.1.4, sax@^1.2.1, sax@^1.2.4, sax@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
@@ -8705,6 +8800,10 @@ statuses@~1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
 
+stealthy-require@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
+
 stream-browserify@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
@@ -8922,7 +9021,7 @@ symbol-observable@^1.0.2, symbol-observable@^1.0.3, symbol-observable@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"
 
-"symbol-tree@>= 3.1.0 < 4.0.0", symbol-tree@^3.2.1:
+"symbol-tree@>= 3.1.0 < 4.0.0", symbol-tree@^3.2.1, symbol-tree@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
 
@@ -9148,12 +9247,18 @@ touch@^3.1.0:
   dependencies:
     nopt "~1.0.10"
 
-tough-cookie@^2.0.0, tough-cookie@^2.2.0, tough-cookie@^2.3.2, tough-cookie@~2.3.0, tough-cookie@~2.3.3:
+tough-cookie@>=2.3.3, tough-cookie@^2.0.0, tough-cookie@^2.2.0, tough-cookie@^2.3.2, tough-cookie@^2.3.3, tough-cookie@~2.3.0, tough-cookie@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
   dependencies:
     punycode "^1.4.1"
 
+tr46@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
+  dependencies:
+    punycode "^2.1.0"
+
 tr46@~0.0.1, tr46@~0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
@@ -9176,6 +9281,12 @@ tunnel-agent@~0.4.1:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
 
+turndown@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/turndown/-/turndown-4.0.1.tgz#1383dd01ac8d96fa106a7f13e0b0a7977588131a"
+  dependencies:
+    jsdom "^11.3.0"
+
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
@@ -9454,6 +9565,12 @@ void-elements@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
+w3c-hr-time@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"
+  dependencies:
+    browser-process-hrtime "^0.1.2"
+
 walker@1.x, walker@~1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
@@ -9489,7 +9606,7 @@ webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
 
-webidl-conversions@^4.0.0:
+webidl-conversions@^4.0.0, webidl-conversions@^4.0.1, webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
 
@@ -9533,6 +9650,12 @@ whatwg-encoding@^1.0.1:
   dependencies:
     iconv-lite "0.4.13"
 
+whatwg-encoding@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.3.tgz#57c235bc8657e914d24e1a397d3c82daee0a6ba3"
+  dependencies:
+    iconv-lite "0.4.19"
+
 whatwg-fetch@>=0.10.0, whatwg-fetch@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
@@ -9550,6 +9673,14 @@ whatwg-url@^4.3.0:
     tr46 "~0.0.3"
     webidl-conversions "^3.0.0"
 
+whatwg-url@^6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.4.0.tgz#08fdf2b9e872783a7a1f6216260a1d66cc722e08"
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.0"
+    webidl-conversions "^4.0.1"
+
 whet.extend@~0.9.9:
   version "0.9.9"
   resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
@@ -9679,6 +9810,14 @@ ws@^3.0.0:
     safe-buffer "~5.1.0"
     ultron "~1.1.0"
 
+ws@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-4.0.0.tgz#bfe1da4c08eeb9780b986e0e4d10eccd7345999f"
+  dependencies:
+    async-limiter "~1.0.0"
+    safe-buffer "~5.1.0"
+    ultron "~1.1.0"
+
 x-xss-protection@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/x-xss-protection/-/x-xss-protection-1.0.0.tgz#898afb93869b24661cf9c52f9ee8db8ed0764dd9"
@@ -9691,6 +9830,10 @@ xdg-basedir@^3.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-2.0.1.tgz#4d8b8f1eccd3419aa362061becef515e1e559635"
 
+xml-name-validator@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
+
 xml@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/xml/-/xml-1.0.1.tgz#78ba72020029c5bc87b8a81a3cfcd74b4a2fc1e5"

From 38352e9e3c558dd3a2c2c04e55c00b6b56d0261c Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Wed, 21 Feb 2018 16:59:02 -0300
Subject: [PATCH 09/71] Using metadata to store html comment

---
 plugins/talk-plugin-rte/server/hooks.js     | 11 +++++++----
 plugins/talk-plugin-rte/server/resolvers.js |  4 +---
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/plugins/talk-plugin-rte/server/hooks.js b/plugins/talk-plugin-rte/server/hooks.js
index 359c15788..a7633fb1e 100644
--- a/plugins/talk-plugin-rte/server/hooks.js
+++ b/plugins/talk-plugin-rte/server/hooks.js
@@ -1,12 +1,15 @@
-const TurndownService = require('turndown');
+const { merge } = require('lodash');
 
 module.exports = {
   RootMutation: {
     createComment: {
       async pre(_, { input }, _context, _info) {
-        // Saving the HTML comment as Markdown
-        const ts = new TurndownService();
-        input.body = ts.turndown(input.body);
+        input.metadata = merge(
+          {},
+          {
+            htmlBody: input.htmlBody,
+          }
+        );
       },
     },
   },
diff --git a/plugins/talk-plugin-rte/server/resolvers.js b/plugins/talk-plugin-rte/server/resolvers.js
index 71cf7cfbc..015f39cb9 100644
--- a/plugins/talk-plugin-rte/server/resolvers.js
+++ b/plugins/talk-plugin-rte/server/resolvers.js
@@ -1,7 +1,5 @@
-const marked = require('marked');
-
 module.exports = {
   Comment: {
-    body: comment => marked(comment.body),
+    htmlBody: comment => comment.metadata.htmlBody,
   },
 };

From 46a1857abe54f6465e07aaebe8fdd99569e43999 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Wed, 21 Feb 2018 17:08:39 -0300
Subject: [PATCH 10/71] Comment Content renderer

---
 .../client/components/CommentContent.js           | 15 +++++++++++++++
 .../client/containers/CommentContent.js           | 11 +++++++++++
 plugins/talk-plugin-rte/client/index.js           |  2 ++
 3 files changed, 28 insertions(+)
 create mode 100644 plugins/talk-plugin-rte/client/components/CommentContent.js
 create mode 100644 plugins/talk-plugin-rte/client/containers/CommentContent.js

diff --git a/plugins/talk-plugin-rte/client/components/CommentContent.js b/plugins/talk-plugin-rte/client/components/CommentContent.js
new file mode 100644
index 000000000..28a7d67fe
--- /dev/null
+++ b/plugins/talk-plugin-rte/client/components/CommentContent.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { name } from '../../package.json';
+
+const CommentContent = ({ comment }) => {
+  return comment.htmlBody ? (
+    <div
+      className={`${name}-text`}
+      dangerouslySetInnerHTML={{ __html: comment.htmlBody }}
+    />
+  ) : (
+    <div className={`${name}-text`}>{comment.body}</div>
+  );
+};
+
+export default CommentContent;
diff --git a/plugins/talk-plugin-rte/client/containers/CommentContent.js b/plugins/talk-plugin-rte/client/containers/CommentContent.js
new file mode 100644
index 000000000..495195dc1
--- /dev/null
+++ b/plugins/talk-plugin-rte/client/containers/CommentContent.js
@@ -0,0 +1,11 @@
+import { gql } from 'react-apollo';
+import { withFragments } from 'plugin-api/beta/client/hocs';
+import CommentContent from '../components/CommentContent';
+
+export default withFragments({
+  comment: gql`
+    fragment TalkPluginRTECommentContent_comment on Comment {
+      htmlBody
+    }
+  `,
+})(CommentContent);
diff --git a/plugins/talk-plugin-rte/client/index.js b/plugins/talk-plugin-rte/client/index.js
index dc7f35803..2ff483d4c 100644
--- a/plugins/talk-plugin-rte/client/index.js
+++ b/plugins/talk-plugin-rte/client/index.js
@@ -1,7 +1,9 @@
 import Editor from './components/Editor';
+import CommentContent from './containers/CommentContent';
 
 export default {
   slots: {
     textArea: [Editor],
+    commentContent: [CommentContent],
   },
 };

From 62eb77fa4b18dfbfd6da5cd7956c8f1763b75ab4 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Wed, 21 Feb 2018 17:16:18 -0300
Subject: [PATCH 11/71] Adding Slot

---
 client/coral-embed-stream/src/tabs/stream/containers/Comment.js | 1 +
 1 file changed, 1 insertion(+)

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 5a6c332e0..c4bd3f166 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
@@ -23,6 +23,7 @@ const slots = [
   'commentAuthorName',
   'commentAuthorTags',
   'commentTimestamp',
+  'textArea',
 ];
 
 /**

From 6eb442d59af026618b7a49b9446e4094becb4918 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Wed, 21 Feb 2018 19:07:39 -0300
Subject: [PATCH 12/71] Adding optimistic response, and responses

---
 .../src/tabs/stream/containers/Comment.js     |  3 +--
 .../client/containers/Comment.js              |  7 +++++-
 .../client/containers/CommentContent.js       |  2 +-
 plugins/talk-plugin-rte/client/index.js       | 23 +++++++++++++++++++
 4 files changed, 31 insertions(+), 4 deletions(-)

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 c4bd3f166..90cded652 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
@@ -17,13 +17,12 @@ const slots = [
   'commentInputDetailArea',
   'commentInfoBar',
   'commentActions',
-  'commentContent',
   'commentReactions',
   'commentAvatar',
   'commentAuthorName',
   'commentAuthorTags',
   'commentTimestamp',
-  'textArea',
+  'commentContent',
 ];
 
 /**
diff --git a/plugins/talk-plugin-featured-comments/client/containers/Comment.js b/plugins/talk-plugin-featured-comments/client/containers/Comment.js
index 0485b7892..0d65066cf 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/Comment.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/Comment.js
@@ -3,7 +3,12 @@ import Comment from '../components/Comment';
 import { withFragments } from 'plugin-api/beta/client/hocs';
 import { getSlotFragmentSpreads } from 'plugin-api/beta/client/utils';
 
-const slots = ['commentReactions', 'commentAuthorName', 'commentTimestamp'];
+const slots = [
+  'commentReactions',
+  'commentAuthorName',
+  'commentTimestamp',
+  'commentContent',
+];
 
 export default withFragments({
   root: gql`
diff --git a/plugins/talk-plugin-rte/client/containers/CommentContent.js b/plugins/talk-plugin-rte/client/containers/CommentContent.js
index 495195dc1..9b69a60c9 100644
--- a/plugins/talk-plugin-rte/client/containers/CommentContent.js
+++ b/plugins/talk-plugin-rte/client/containers/CommentContent.js
@@ -4,7 +4,7 @@ import CommentContent from '../components/CommentContent';
 
 export default withFragments({
   comment: gql`
-    fragment TalkPluginRTECommentContent_comment on Comment {
+    fragment TalkPluginRTE_CommentContent_comment on Comment {
       htmlBody
     }
   `,
diff --git a/plugins/talk-plugin-rte/client/index.js b/plugins/talk-plugin-rte/client/index.js
index 2ff483d4c..0c6370fa0 100644
--- a/plugins/talk-plugin-rte/client/index.js
+++ b/plugins/talk-plugin-rte/client/index.js
@@ -1,9 +1,32 @@
 import Editor from './components/Editor';
 import CommentContent from './containers/CommentContent';
+import { gql } from 'react-apollo';
 
 export default {
   slots: {
     textArea: [Editor],
     commentContent: [CommentContent],
   },
+  fragments: {
+    CreateCommentResponse: gql`
+      fragment TalkRTE_CreateCommentResponse on CreateCommentResponse {
+        comment {
+          htmlBody
+        }
+      }
+    `,
+  },
+  mutations: {
+    PostComment: ({ variables: { input } }) => {
+      return {
+        optimisticResponse: {
+          createComment: {
+            comment: {
+              htmlBody: input.htmlBody,
+            },
+          },
+        },
+      };
+    },
+  },
 };

From 6f6fe6912908c28590fbf7775216a48d1baeb6c1 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Thu, 22 Feb 2018 08:59:21 -0300
Subject: [PATCH 13/71] Handling edited comments data

---
 .../components/EditableCommentContent.js      | 21 ++++++++++++++++---
 plugins/talk-plugin-rte/client/index.js       | 18 ++++++++++++++++
 plugins/talk-plugin-rte/server/hooks.js       | 10 +++++++++
 .../talk-plugin-rte/server/typeDefs.graphql   |  6 +++++-
 4 files changed, 51 insertions(+), 4 deletions(-)

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 34f114651..257860342 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
@@ -53,6 +53,8 @@ export class EditableCommentContent extends React.Component {
     this.state = {
       body: props.comment.body,
       loadingState: '',
+      // data: {@object} contains data that might be useful for plugins, metadata, etc
+      data: {},
     };
   }
   componentDidMount() {
@@ -72,8 +74,14 @@ export class EditableCommentContent extends React.Component {
     }
   }
 
-  handleBodyChange = body => {
-    this.setState({ body });
+  handleBodyChange = (body, ...data) => {
+    this.setState(state => ({
+      body,
+      data: {
+        ...state.data,
+        ...data[0],
+      },
+    }));
   };
 
   handleSubmit = async () => {
@@ -88,9 +96,16 @@ export class EditableCommentContent extends React.Component {
     if (typeof editComment !== 'function') {
       return;
     }
+
+    let input = {
+      body: this.state.body,
+      ...this.state.data,
+    };
+
     let response;
+
     try {
-      response = await editComment({ body: this.state.body });
+      response = await editComment(input);
       if (!this.unmounted) {
         this.setState({ loadingState: 'success' });
       }
diff --git a/plugins/talk-plugin-rte/client/index.js b/plugins/talk-plugin-rte/client/index.js
index 0c6370fa0..1f357de77 100644
--- a/plugins/talk-plugin-rte/client/index.js
+++ b/plugins/talk-plugin-rte/client/index.js
@@ -15,6 +15,13 @@ export default {
         }
       }
     `,
+    EditCommentResponse: gql`
+      fragment TalkRTE_EditCommentResponse on EditCommentResponse {
+        comment {
+          htmlBody
+        }
+      }
+    `,
   },
   mutations: {
     PostComment: ({ variables: { input } }) => {
@@ -28,5 +35,16 @@ export default {
         },
       };
     },
+    EditComment: ({ variables: { edit } }) => {
+      return {
+        optimisticResponse: {
+          editComment: {
+            comment: {
+              htmlBody: edit.htmlBody,
+            },
+          },
+        },
+      };
+    },
   },
 };
diff --git a/plugins/talk-plugin-rte/server/hooks.js b/plugins/talk-plugin-rte/server/hooks.js
index a7633fb1e..c46a3b10a 100644
--- a/plugins/talk-plugin-rte/server/hooks.js
+++ b/plugins/talk-plugin-rte/server/hooks.js
@@ -12,5 +12,15 @@ module.exports = {
         );
       },
     },
+    editComment: {
+      async pre(_, { edit }, _context, _info) {
+        edit.metadata = merge(
+          {},
+          {
+            htmlBody: edit.htmlBody,
+          }
+        );
+      },
+    },
   },
 };
diff --git a/plugins/talk-plugin-rte/server/typeDefs.graphql b/plugins/talk-plugin-rte/server/typeDefs.graphql
index 766189e04..f5db2fd88 100644
--- a/plugins/talk-plugin-rte/server/typeDefs.graphql
+++ b/plugins/talk-plugin-rte/server/typeDefs.graphql
@@ -2,6 +2,10 @@ input CreateCommentInput {
   htmlBody: String
 }
 
+input EditCommentInput {
+  htmlBody: String
+}
+
 type Comment {
   htmlBody: String
-}
+}
\ No newline at end of file

From 45795377094a644e41a53977aaa4c0f647f7b49d Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Thu, 22 Feb 2018 10:34:22 -0300
Subject: [PATCH 14/71] Enabling metadata for comment edition

---
 graph/mutators/comment.js        | 3 ++-
 graph/resolvers/root_mutation.js | 4 ++--
 services/comments.js             | 6 +++++-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/graph/mutators/comment.js b/graph/mutators/comment.js
index 7e0607287..df180627f 100644
--- a/graph/mutators/comment.js
+++ b/graph/mutators/comment.js
@@ -264,7 +264,7 @@ const setStatus = async ({ user, loaders: { Comments } }, { id, status }) => {
  * @param {Object} edit       describes how to edit the comment
  * @param {String} edit.body  the new Comment body
  */
-const edit = async (ctx, { id, asset_id, edit: { body } }) => {
+const edit = async (ctx, { id, asset_id, edit: { body, metadata = {} } }) => {
   const { connectors: { services: { Moderation } } } = ctx;
 
   // Build up the new comment we're setting. We need to check this with
@@ -280,6 +280,7 @@ const edit = async (ctx, { id, asset_id, edit: { body } }) => {
     author_id: ctx.user.id,
     body,
     status,
+    metadata,
   });
 
   // Create all the actions that were determined during the moderation check
diff --git a/graph/resolvers/root_mutation.js b/graph/resolvers/root_mutation.js
index 8a638f589..ef583e06c 100644
--- a/graph/resolvers/root_mutation.js
+++ b/graph/resolvers/root_mutation.js
@@ -13,10 +13,10 @@ const RootMutation = {
   },
   editComment: async (
     _,
-    { id, asset_id, edit: { body } },
+    { id, asset_id, edit: { body, metadata } },
     { mutators: { Comment } }
   ) => ({
-    comment: await Comment.edit({ id, asset_id, edit: { body } }),
+    comment: await Comment.edit({ id, asset_id, edit: { body, metadata } }),
   }),
   createFlag: async (
     _,
diff --git a/services/comments.js b/services/comments.js
index 68f991324..5ac61764d 100644
--- a/services/comments.js
+++ b/services/comments.js
@@ -84,7 +84,7 @@ module.exports = class CommentsService {
    * @param {String} body       the new Comment body
    * @param {String} status     the new Comment status
    */
-  static async edit({ id, author_id, body, status }) {
+  static async edit({ id, author_id, body, status, metadata = {} }) {
     const EDITABLE_STATUSES = ['NONE', 'PREMOD', 'ACCEPTED'];
     const created_at = new Date();
 
@@ -110,6 +110,7 @@ module.exports = class CommentsService {
       $set: {
         body,
         status,
+        metadata,
       },
       $push: {
         body_history: {
@@ -164,11 +165,14 @@ module.exports = class CommentsService {
       body,
       created_at,
     });
+
     editedComment.status_history.push({
       type: status,
       created_at,
     });
 
+    editedComment.metadata = metadata;
+
     await events.emitAsync(COMMENTS_EDIT, originalComment, editedComment);
 
     return editedComment;

From 2f4c0848112acb7667aff660631affea5227ff0f Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Thu, 22 Feb 2018 11:24:37 -0300
Subject: [PATCH 15/71] Comment previous edit

---
 .../src/tabs/stream/components/CommentForm.js |  1 +
 .../src/tabs/stream/components/DraftArea.js   |  2 ++
 .../components/EditableCommentContent.js      |  1 +
 .../src/tabs/stream/containers/DraftArea.js   |  1 +
 .../client/components/CommentContent.js       | 26 ++++++++++++-------
 .../client/components/Editor.js               |  6 +++++
 6 files changed, 28 insertions(+), 9 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 a9ea8f150..ff005bb31 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
@@ -112,6 +112,7 @@ export class CommentForm extends React.Component {
           disabled={disableTextArea}
           charCountEnable={this.props.charCountEnable}
           maxCharCount={this.props.maxCharCount}
+          comment={this.props.comment}
         />
         <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 c1678d0a7..2e45cf97c 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
@@ -38,6 +38,7 @@ export default class DraftArea extends React.Component {
       charCountEnable,
       maxCharCount,
       onChange,
+      comment,
     } = this.props;
 
     const tASettings = {
@@ -47,6 +48,7 @@ export default class DraftArea extends React.Component {
       onChange,
       rows,
       disabled,
+      comment,
     };
 
     return (
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 257860342..75f0d1246 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
@@ -140,6 +140,7 @@ export class EditableCommentContent extends React.Component {
     return (
       <div className={styles.editCommentForm}>
         <CommentForm
+          comment={this.props.comment}
           defaultValue={this.props.comment.body}
           bodyInputId={id}
           charCountEnable={this.props.charCountEnable}
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 335525066..42cf5462b 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
@@ -50,6 +50,7 @@ export default class DraftAreaContainer extends React.Component {
         charCountEnable={this.props.charCountEnable}
         maxCharCount={this.props.maxCharCount}
         label={this.props.label}
+        comment={this.props.comment}
       />
     );
   }
diff --git a/plugins/talk-plugin-rte/client/components/CommentContent.js b/plugins/talk-plugin-rte/client/components/CommentContent.js
index 28a7d67fe..e9f33fee5 100644
--- a/plugins/talk-plugin-rte/client/components/CommentContent.js
+++ b/plugins/talk-plugin-rte/client/components/CommentContent.js
@@ -1,15 +1,23 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { name } from '../../package.json';
 
-const CommentContent = ({ comment }) => {
-  return comment.htmlBody ? (
-    <div
-      className={`${name}-text`}
-      dangerouslySetInnerHTML={{ __html: comment.htmlBody }}
-    />
-  ) : (
-    <div className={`${name}-text`}>{comment.body}</div>
-  );
+class CommentContent extends React.Component {
+  render() {
+    const { comment } = this.props;
+    return comment.htmlBody ? (
+      <div
+        className={`${name}-text`}
+        dangerouslySetInnerHTML={{ __html: comment.htmlBody }}
+      />
+    ) : (
+      <div className={`${name}-text`}>{comment.body}</div>
+    );
+  }
+}
+
+CommentContent.propTypes = {
+  comment: PropTypes.object.isRequired,
 };
 
 export default CommentContent;
diff --git a/plugins/talk-plugin-rte/client/components/Editor.js b/plugins/talk-plugin-rte/client/components/Editor.js
index 8d2d84f00..a6bc4240a 100644
--- a/plugins/talk-plugin-rte/client/components/Editor.js
+++ b/plugins/talk-plugin-rte/client/components/Editor.js
@@ -36,10 +36,16 @@ class Editor extends React.Component {
         button: cn(styles.button, classNames.button, `${pluginName}-button`),
       },
     });
+
+    // To edit comments and have the previous html comment
+    if (this.props.comment && this.props.comment.htmlBody) {
+      this.ref.content.innerHTML = this.props.comment.htmlBody;
+    }
   }
 
   render() {
     const { id, classNames } = this.props;
+    console.log(this.props);
     return (
       <div
         id={id}

From 1bca2a96e562a649e75c9c9d820ac66da9d43756 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Thu, 22 Feb 2018 11:46:10 -0300
Subject: [PATCH 16/71] Updating the store - Fully Working :tada:

---
 client/coral-framework/graphql/mutations.js   | 28 +++++++++++++++++++
 .../client/components/CommentContent.js       |  5 ++++
 .../client/components/Editor.js               |  2 +-
 .../client/containers/CommentContent.js       |  1 +
 4 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js
index f34a2cc88..ffa139abc 100644
--- a/client/coral-framework/graphql/mutations.js
+++ b/client/coral-framework/graphql/mutations.js
@@ -1,5 +1,6 @@
 import { gql } from 'react-apollo';
 import withMutation from '../hocs/withMutation';
+import update from 'immutability-helper';
 
 function convertItemType(item_type) {
   switch (item_type) {
@@ -458,6 +459,33 @@ export const withEditComment = withMutation(
             asset_id,
             edit,
           },
+          update: proxy => {
+            const editCommentFragment = gql`
+              fragment Talk_EditComment on Comment {
+                body
+                htmlBody
+              }
+            `;
+
+            const fragmentId = `Comment_${id}`;
+
+            const data = proxy.readFragment({
+              fragment: editCommentFragment,
+              id: fragmentId,
+            });
+
+            const updated = update(data, {
+              htmlBody: {
+                $set: edit.htmlBody,
+              },
+            });
+
+            proxy.writeFragment({
+              fragment: editCommentFragment,
+              id: fragmentId,
+              data: updated,
+            });
+          },
         });
       },
     }),
diff --git a/plugins/talk-plugin-comment-content/client/components/CommentContent.js b/plugins/talk-plugin-comment-content/client/components/CommentContent.js
index f21c888b7..de2b89339 100644
--- a/plugins/talk-plugin-comment-content/client/components/CommentContent.js
+++ b/plugins/talk-plugin-comment-content/client/components/CommentContent.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Linkify from 'react-linkify';
 
 const name = 'talk-plugin-comment-content';
@@ -21,4 +22,8 @@ const CommentContent = ({ comment }) => {
   );
 };
 
+CommentContent.propTypes = {
+  comment: PropTypes.object.isRequired,
+};
+
 export default CommentContent;
diff --git a/plugins/talk-plugin-rte/client/components/Editor.js b/plugins/talk-plugin-rte/client/components/Editor.js
index a6bc4240a..c921c846c 100644
--- a/plugins/talk-plugin-rte/client/components/Editor.js
+++ b/plugins/talk-plugin-rte/client/components/Editor.js
@@ -45,7 +45,7 @@ class Editor extends React.Component {
 
   render() {
     const { id, classNames } = this.props;
-    console.log(this.props);
+
     return (
       <div
         id={id}
diff --git a/plugins/talk-plugin-rte/client/containers/CommentContent.js b/plugins/talk-plugin-rte/client/containers/CommentContent.js
index 9b69a60c9..ac6f2de78 100644
--- a/plugins/talk-plugin-rte/client/containers/CommentContent.js
+++ b/plugins/talk-plugin-rte/client/containers/CommentContent.js
@@ -5,6 +5,7 @@ import CommentContent from '../components/CommentContent';
 export default withFragments({
   comment: gql`
     fragment TalkPluginRTE_CommentContent_comment on Comment {
+      body
       htmlBody
     }
   `,

From 91e7dadfda5a92f3ca2e94d84a9fad8c35d0372b Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Thu, 22 Feb 2018 12:08:23 -0300
Subject: [PATCH 17/71] Removed unused dependencies and yarn.lock updated

---
 plugins/talk-plugin-rte/package.json | 1 -
 plugins/talk-plugin-rte/yarn.lock    | 4 ----
 2 files changed, 5 deletions(-)

diff --git a/plugins/talk-plugin-rte/package.json b/plugins/talk-plugin-rte/package.json
index 298e8ffb7..79a0ada07 100644
--- a/plugins/talk-plugin-rte/package.json
+++ b/plugins/talk-plugin-rte/package.json
@@ -7,7 +7,6 @@
   "author": "The Coral Project Team <coral@mozillafoundation.org>",
   "license": "Apache-2.0",
   "dependencies": {
-    "marked": "^0.3.16",
     "pell": "^0.7.0"
   }
 }
diff --git a/plugins/talk-plugin-rte/yarn.lock b/plugins/talk-plugin-rte/yarn.lock
index a79e1093f..f9eb91c43 100644
--- a/plugins/talk-plugin-rte/yarn.lock
+++ b/plugins/talk-plugin-rte/yarn.lock
@@ -2,10 +2,6 @@
 # yarn lockfile v1
 
 
-marked@^0.3.16:
-  version "0.3.16"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.16.tgz#2f188b7dfcfa6540fe9940adaf0f3b791c9a5cba"
-
 pell@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/pell/-/pell-0.7.0.tgz#46b3fcdfa8dd7e5999f73c550a337ecc80193dcc"

From 2f5c4906f777758e8dd179aadeff59591153a95f Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Fri, 23 Feb 2018 12:29:30 -0300
Subject: [PATCH 18/71] Adding DOM Sanitizer

---
 plugins/talk-plugin-rte/package.json     |  1 +
 plugins/talk-plugin-rte/server/config.js |  6 +++++
 plugins/talk-plugin-rte/server/hooks.js  | 34 +++++++++++++++---------
 plugins/talk-plugin-rte/yarn.lock        |  4 +++
 4 files changed, 32 insertions(+), 13 deletions(-)
 create mode 100644 plugins/talk-plugin-rte/server/config.js

diff --git a/plugins/talk-plugin-rte/package.json b/plugins/talk-plugin-rte/package.json
index 79a0ada07..ce0ee0f46 100644
--- a/plugins/talk-plugin-rte/package.json
+++ b/plugins/talk-plugin-rte/package.json
@@ -7,6 +7,7 @@
   "author": "The Coral Project Team <coral@mozillafoundation.org>",
   "license": "Apache-2.0",
   "dependencies": {
+    "dompurify": "^1.0.3",
     "pell": "^0.7.0"
   }
 }
diff --git a/plugins/talk-plugin-rte/server/config.js b/plugins/talk-plugin-rte/server/config.js
new file mode 100644
index 000000000..d01749189
--- /dev/null
+++ b/plugins/talk-plugin-rte/server/config.js
@@ -0,0 +1,6 @@
+const config = {
+  // Super strict rules to make sure users only submit the tags they are allowed
+  dompurify: { ALLOWED_TAGS: ['b', 'i', 'blockquote'] },
+};
+
+module.exports = config;
diff --git a/plugins/talk-plugin-rte/server/hooks.js b/plugins/talk-plugin-rte/server/hooks.js
index c46a3b10a..fe6d53548 100644
--- a/plugins/talk-plugin-rte/server/hooks.js
+++ b/plugins/talk-plugin-rte/server/hooks.js
@@ -1,25 +1,33 @@
-const { merge } = require('lodash');
+const { merge, get } = require('lodash');
+const DOMPurify = require('dompurify');
+const config = require('./config');
 
 module.exports = {
   RootMutation: {
     createComment: {
       async pre(_, { input }, _context, _info) {
-        input.metadata = merge(
-          {},
-          {
-            htmlBody: input.htmlBody,
-          }
-        );
+        // Let's sanitize the body
+        const dirtyInput = input.htmlBody;
+
+        const cleanInput = DOMPurify.sanitize(dirtyInput, config.dompurify);
+
+        // Adding the clean body to the comment.metadata field
+        input.metadata = merge(get(input, 'metadata'), {
+          htmlBody: cleanInput,
+        });
       },
     },
     editComment: {
       async pre(_, { edit }, _context, _info) {
-        edit.metadata = merge(
-          {},
-          {
-            htmlBody: edit.htmlBody,
-          }
-        );
+        // Let's sanitize the body
+        const dirtyInput = edit.htmlBody;
+
+        const cleanInput = DOMPurify.sanitize(dirtyInput, config.dompurify);
+
+        // Adding the clean body to the comment.metadata field
+        edit.metadata = merge(get(edit, 'metadata'), {
+          htmlBody: cleanInput,
+        });
       },
     },
   },
diff --git a/plugins/talk-plugin-rte/yarn.lock b/plugins/talk-plugin-rte/yarn.lock
index f9eb91c43..2c4f5b272 100644
--- a/plugins/talk-plugin-rte/yarn.lock
+++ b/plugins/talk-plugin-rte/yarn.lock
@@ -2,6 +2,10 @@
 # yarn lockfile v1
 
 
+dompurify@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-1.0.3.tgz#3f2f6ecb6ecd27599a506b410ff47d6eb90fd05d"
+
 pell@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/pell/-/pell-0.7.0.tgz#46b3fcdfa8dd7e5999f73c550a337ecc80193dcc"

From 912ccd6dd90e612337b3073edccd391adc5eb003 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Fri, 23 Feb 2018 12:38:33 -0300
Subject: [PATCH 19/71] Adding a plugin for the backend and a plugin for the
 frontend

---
 .eslintignore                                        |  3 ++-
 .gitignore                                           |  3 ++-
 .../README.md}                                       |  0
 .../client/.eslintrc.json                            |  0
 .../client/components/CommentContent.js              |  6 +++---
 .../client/components/Editor.css                     |  0
 .../client/components/Editor.js                      |  5 ++---
 .../client/containers/CommentContent.js              |  0
 .../client/index.js                                  |  0
 .../client/translations.yml                          |  0
 plugins/talk-plugin-rich-text-pell/index.js          |  1 +
 plugins/talk-plugin-rich-text-pell/package.json      | 12 ++++++++++++
 plugins/talk-plugin-rich-text/README.md              |  0
 .../index.js                                         |  0
 .../package.json                                     |  7 +++----
 .../server/config.js                                 |  0
 .../server/hooks.js                                  |  0
 .../server/resolvers.js                              |  0
 .../server/typeDefs.graphql                          |  0
 plugins/talk-plugin-rte/yarn.lock                    | 11 -----------
 20 files changed, 25 insertions(+), 23 deletions(-)
 rename plugins/{talk-plugin-rte/client/translations.yml => talk-plugin-rich-text-pell/README.md} (100%)
 rename plugins/{talk-plugin-rte => talk-plugin-rich-text-pell}/client/.eslintrc.json (100%)
 rename plugins/{talk-plugin-rte => talk-plugin-rich-text-pell}/client/components/CommentContent.js (72%)
 rename plugins/{talk-plugin-rte => talk-plugin-rich-text-pell}/client/components/Editor.css (100%)
 rename plugins/{talk-plugin-rte => talk-plugin-rich-text-pell}/client/components/Editor.js (96%)
 rename plugins/{talk-plugin-rte => talk-plugin-rich-text-pell}/client/containers/CommentContent.js (100%)
 rename plugins/{talk-plugin-rte => talk-plugin-rich-text-pell}/client/index.js (100%)
 create mode 100644 plugins/talk-plugin-rich-text-pell/client/translations.yml
 create mode 100644 plugins/talk-plugin-rich-text-pell/index.js
 create mode 100644 plugins/talk-plugin-rich-text-pell/package.json
 create mode 100644 plugins/talk-plugin-rich-text/README.md
 rename plugins/{talk-plugin-rte => talk-plugin-rich-text}/index.js (100%)
 rename plugins/{talk-plugin-rte => talk-plugin-rich-text}/package.json (62%)
 rename plugins/{talk-plugin-rte => talk-plugin-rich-text}/server/config.js (100%)
 rename plugins/{talk-plugin-rte => talk-plugin-rich-text}/server/hooks.js (100%)
 rename plugins/{talk-plugin-rte => talk-plugin-rich-text}/server/resolvers.js (100%)
 rename plugins/{talk-plugin-rte => talk-plugin-rich-text}/server/typeDefs.graphql (100%)
 delete mode 100644 plugins/talk-plugin-rte/yarn.lock

diff --git a/.eslintignore b/.eslintignore
index d74bce1d3..ded9d13ad 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -24,7 +24,8 @@ public
 !plugins/talk-plugin-profile-settings
 !plugins/talk-plugin-remember-sort
 !plugins/talk-plugin-respect
-!plugins/talk-plugin-rte
+!plugins/talk-plugin-rich-text
+!plugins/talk-plugin-rich-text-pell
 !plugins/talk-plugin-sort-most-liked
 !plugins/talk-plugin-sort-most-loved
 !plugins/talk-plugin-sort-most-replied
diff --git a/.gitignore b/.gitignore
index 4431a21ca..48ce6e5d5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -53,7 +53,8 @@ plugins/*
 !plugins/talk-plugin-subscriber
 !plugins/talk-plugin-flag-details
 !plugins/talk-plugin-slack-notifications
-!plugins/talk-plugin-rte
+!plugins/talk-plugin-rich-text
+!plugins/talk-plugin-rich-text-pell
 !plugins/talk-plugin-profile-settings
 
 **/node_modules/*
diff --git a/plugins/talk-plugin-rte/client/translations.yml b/plugins/talk-plugin-rich-text-pell/README.md
similarity index 100%
rename from plugins/talk-plugin-rte/client/translations.yml
rename to plugins/talk-plugin-rich-text-pell/README.md
diff --git a/plugins/talk-plugin-rte/client/.eslintrc.json b/plugins/talk-plugin-rich-text-pell/client/.eslintrc.json
similarity index 100%
rename from plugins/talk-plugin-rte/client/.eslintrc.json
rename to plugins/talk-plugin-rich-text-pell/client/.eslintrc.json
diff --git a/plugins/talk-plugin-rte/client/components/CommentContent.js b/plugins/talk-plugin-rich-text-pell/client/components/CommentContent.js
similarity index 72%
rename from plugins/talk-plugin-rte/client/components/CommentContent.js
rename to plugins/talk-plugin-rich-text-pell/client/components/CommentContent.js
index e9f33fee5..49f2572df 100644
--- a/plugins/talk-plugin-rte/client/components/CommentContent.js
+++ b/plugins/talk-plugin-rich-text-pell/client/components/CommentContent.js
@@ -1,17 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { name } from '../../package.json';
+import { pluginName } from '../../package.json';
 
 class CommentContent extends React.Component {
   render() {
     const { comment } = this.props;
     return comment.htmlBody ? (
       <div
-        className={`${name}-text`}
+        className={`${pluginName}-text`}
         dangerouslySetInnerHTML={{ __html: comment.htmlBody }}
       />
     ) : (
-      <div className={`${name}-text`}>{comment.body}</div>
+      <div className={`${pluginName}-text`}>{comment.body}</div>
     );
   }
 }
diff --git a/plugins/talk-plugin-rte/client/components/Editor.css b/plugins/talk-plugin-rich-text-pell/client/components/Editor.css
similarity index 100%
rename from plugins/talk-plugin-rte/client/components/Editor.css
rename to plugins/talk-plugin-rich-text-pell/client/components/Editor.css
diff --git a/plugins/talk-plugin-rte/client/components/Editor.js b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
similarity index 96%
rename from plugins/talk-plugin-rte/client/components/Editor.js
rename to plugins/talk-plugin-rich-text-pell/client/components/Editor.js
index c921c846c..0800950e8 100644
--- a/plugins/talk-plugin-rte/client/components/Editor.js
+++ b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import { init } from 'pell';
 import styles from './Editor.css';
 import cn from 'classnames';
-
-const pluginName = 'talk-plugin-rte';
+import { pluginName } from '../../package.json';
 
 class Editor extends React.Component {
   ref = null;
@@ -62,7 +61,7 @@ class Editor extends React.Component {
 
 Editor.defaultProps = {
   defaultContent: '',
-  styleWithCSS: true,
+  styleWithCSS: false,
   actions: ['bold', 'italic', 'quote'],
   classNames: {
     button: '',
diff --git a/plugins/talk-plugin-rte/client/containers/CommentContent.js b/plugins/talk-plugin-rich-text-pell/client/containers/CommentContent.js
similarity index 100%
rename from plugins/talk-plugin-rte/client/containers/CommentContent.js
rename to plugins/talk-plugin-rich-text-pell/client/containers/CommentContent.js
diff --git a/plugins/talk-plugin-rte/client/index.js b/plugins/talk-plugin-rich-text-pell/client/index.js
similarity index 100%
rename from plugins/talk-plugin-rte/client/index.js
rename to plugins/talk-plugin-rich-text-pell/client/index.js
diff --git a/plugins/talk-plugin-rich-text-pell/client/translations.yml b/plugins/talk-plugin-rich-text-pell/client/translations.yml
new file mode 100644
index 000000000..e69de29bb
diff --git a/plugins/talk-plugin-rich-text-pell/index.js b/plugins/talk-plugin-rich-text-pell/index.js
new file mode 100644
index 000000000..f053ebf79
--- /dev/null
+++ b/plugins/talk-plugin-rich-text-pell/index.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/plugins/talk-plugin-rich-text-pell/package.json b/plugins/talk-plugin-rich-text-pell/package.json
new file mode 100644
index 000000000..6b35d5ea9
--- /dev/null
+++ b/plugins/talk-plugin-rich-text-pell/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@coralproject/talk-plugin-rich-text-pell",
+  "pluginName": "talk-plugin-rich-text-pell",
+  "version": "0.0.1",
+  "description": "Pell's Rich Text Editor for Talk",
+  "main": "index.js",
+  "author": "The Coral Project Team <coral@mozillafoundation.org>",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "pell": "^0.7.0"
+  }
+}
diff --git a/plugins/talk-plugin-rich-text/README.md b/plugins/talk-plugin-rich-text/README.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/plugins/talk-plugin-rte/index.js b/plugins/talk-plugin-rich-text/index.js
similarity index 100%
rename from plugins/talk-plugin-rte/index.js
rename to plugins/talk-plugin-rich-text/index.js
diff --git a/plugins/talk-plugin-rte/package.json b/plugins/talk-plugin-rich-text/package.json
similarity index 62%
rename from plugins/talk-plugin-rte/package.json
rename to plugins/talk-plugin-rich-text/package.json
index ce0ee0f46..e665c2799 100644
--- a/plugins/talk-plugin-rte/package.json
+++ b/plugins/talk-plugin-rich-text/package.json
@@ -1,13 +1,12 @@
 {
-  "name": "@coralproject/talk-plugin-rte",
-  "pluginName": "talk-plugin-rte",
+  "name": "@coralproject/talk-plugin-rich-text",
+  "pluginName": "talk-plugin-rich-text",
   "version": "0.0.1",
   "description": "Rich Text Editor for Talk",
   "main": "index.js",
   "author": "The Coral Project Team <coral@mozillafoundation.org>",
   "license": "Apache-2.0",
   "dependencies": {
-    "dompurify": "^1.0.3",
-    "pell": "^0.7.0"
+    "dompurify": "^1.0.3"
   }
 }
diff --git a/plugins/talk-plugin-rte/server/config.js b/plugins/talk-plugin-rich-text/server/config.js
similarity index 100%
rename from plugins/talk-plugin-rte/server/config.js
rename to plugins/talk-plugin-rich-text/server/config.js
diff --git a/plugins/talk-plugin-rte/server/hooks.js b/plugins/talk-plugin-rich-text/server/hooks.js
similarity index 100%
rename from plugins/talk-plugin-rte/server/hooks.js
rename to plugins/talk-plugin-rich-text/server/hooks.js
diff --git a/plugins/talk-plugin-rte/server/resolvers.js b/plugins/talk-plugin-rich-text/server/resolvers.js
similarity index 100%
rename from plugins/talk-plugin-rte/server/resolvers.js
rename to plugins/talk-plugin-rich-text/server/resolvers.js
diff --git a/plugins/talk-plugin-rte/server/typeDefs.graphql b/plugins/talk-plugin-rich-text/server/typeDefs.graphql
similarity index 100%
rename from plugins/talk-plugin-rte/server/typeDefs.graphql
rename to plugins/talk-plugin-rich-text/server/typeDefs.graphql
diff --git a/plugins/talk-plugin-rte/yarn.lock b/plugins/talk-plugin-rte/yarn.lock
deleted file mode 100644
index 2c4f5b272..000000000
--- a/plugins/talk-plugin-rte/yarn.lock
+++ /dev/null
@@ -1,11 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-dompurify@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-1.0.3.tgz#3f2f6ecb6ecd27599a506b410ff47d6eb90fd05d"
-
-pell@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/pell/-/pell-0.7.0.tgz#46b3fcdfa8dd7e5999f73c550a337ecc80193dcc"

From d6818366ecce2b8aa832a9ba3368160720079020 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Fri, 23 Feb 2018 12:40:44 -0300
Subject: [PATCH 20/71] yarn locks

---
 yarn.lock | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index bc9a246c9..657268ca3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2593,6 +2593,10 @@ domhandler@^2.3.0:
   dependencies:
     domelementtype "1"
 
+dompurify@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-1.0.3.tgz#3f2f6ecb6ecd27599a506b410ff47d6eb90fd05d"
+
 domutils@1.5, domutils@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
@@ -6882,6 +6886,10 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+pell@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/pell/-/pell-0.7.0.tgz#46b3fcdfa8dd7e5999f73c550a337ecc80193dcc"
+
 pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"

From 907ffea1f954e75cea32ecf64c8c6cac255600a3 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Fri, 23 Feb 2018 13:06:56 -0300
Subject: [PATCH 21/71] Adding strict and secure rules for html injection and
 jsom config

---
 plugins/talk-plugin-rich-text/package.json     | 3 ++-
 plugins/talk-plugin-rich-text/server/config.js | 8 ++++++++
 plugins/talk-plugin-rich-text/server/hooks.js  | 7 ++++++-
 yarn.lock                                      | 2 +-
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/plugins/talk-plugin-rich-text/package.json b/plugins/talk-plugin-rich-text/package.json
index e665c2799..7ef08ec80 100644
--- a/plugins/talk-plugin-rich-text/package.json
+++ b/plugins/talk-plugin-rich-text/package.json
@@ -7,6 +7,7 @@
   "author": "The Coral Project Team <coral@mozillafoundation.org>",
   "license": "Apache-2.0",
   "dependencies": {
-    "dompurify": "^1.0.3"
+    "dompurify": "^1.0.3",
+    "jsdom": "^11.6.2"
   }
 }
diff --git a/plugins/talk-plugin-rich-text/server/config.js b/plugins/talk-plugin-rich-text/server/config.js
index d01749189..eec559ce0 100644
--- a/plugins/talk-plugin-rich-text/server/config.js
+++ b/plugins/talk-plugin-rich-text/server/config.js
@@ -1,6 +1,14 @@
 const config = {
   // Super strict rules to make sure users only submit the tags they are allowed
   dompurify: { ALLOWED_TAGS: ['b', 'i', 'blockquote'] },
+
+  // Secure config for jsdom even when DOMPurify creates a document without a browsing context
+  jsdom: {
+    features: {
+      FetchExternalResources: false, // disables resource loading over HTTP / filesystem
+      ProcessExternalResources: false, // do not execute JS within script blocks
+    },
+  },
 };
 
 module.exports = config;
diff --git a/plugins/talk-plugin-rich-text/server/hooks.js b/plugins/talk-plugin-rich-text/server/hooks.js
index fe6d53548..81b41b9f0 100644
--- a/plugins/talk-plugin-rich-text/server/hooks.js
+++ b/plugins/talk-plugin-rich-text/server/hooks.js
@@ -1,7 +1,12 @@
+const createDOMPurify = require('dompurify');
+const { JSDOM } = require('jsdom');
 const { merge, get } = require('lodash');
-const DOMPurify = require('dompurify');
 const config = require('./config');
 
+// Initializing JSDOM and DOMPurify
+const window = new JSDOM('', config.jsdom).window;
+const DOMPurify = createDOMPurify(window);
+
 module.exports = {
   RootMutation: {
     createComment: {
diff --git a/yarn.lock b/yarn.lock
index 657268ca3..d24c5fa58 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5041,7 +5041,7 @@ jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
 
-jsdom@^11.3.0:
+jsdom@^11.3.0, jsdom@^11.6.2:
   version "11.6.2"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.6.2.tgz#25d1ef332d48adf77fc5221fe2619967923f16bb"
   dependencies:

From 7422575aba3686b6fb3dbc30a03e27fc4f9ed847 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Fri, 23 Feb 2018 13:16:00 -0300
Subject: [PATCH 22/71] Initializing purifier config

---
 plugins/talk-plugin-rich-text/server/DOMpurify.js | 12 ++++++++++++
 plugins/talk-plugin-rich-text/server/hooks.js     | 12 +++---------
 2 files changed, 15 insertions(+), 9 deletions(-)
 create mode 100644 plugins/talk-plugin-rich-text/server/DOMpurify.js

diff --git a/plugins/talk-plugin-rich-text/server/DOMpurify.js b/plugins/talk-plugin-rich-text/server/DOMpurify.js
new file mode 100644
index 000000000..faf45875e
--- /dev/null
+++ b/plugins/talk-plugin-rich-text/server/DOMpurify.js
@@ -0,0 +1,12 @@
+const createDOMPurify = require('dompurify');
+const { JSDOM } = require('jsdom');
+const config = require('./config');
+
+// Initializing JSDOM and DOMPurify
+const window = new JSDOM('', config.jsdom).window;
+const DOMPurify = createDOMPurify(window);
+
+// Setting our secure config
+DOMPurify.setConfig(config.dompurify);
+
+module.exports = DOMPurify;
diff --git a/plugins/talk-plugin-rich-text/server/hooks.js b/plugins/talk-plugin-rich-text/server/hooks.js
index 81b41b9f0..cd4beac99 100644
--- a/plugins/talk-plugin-rich-text/server/hooks.js
+++ b/plugins/talk-plugin-rich-text/server/hooks.js
@@ -1,11 +1,5 @@
-const createDOMPurify = require('dompurify');
-const { JSDOM } = require('jsdom');
 const { merge, get } = require('lodash');
-const config = require('./config');
-
-// Initializing JSDOM and DOMPurify
-const window = new JSDOM('', config.jsdom).window;
-const DOMPurify = createDOMPurify(window);
+const DOMPurify = require('./DOMPurify');
 
 module.exports = {
   RootMutation: {
@@ -14,7 +8,7 @@ module.exports = {
         // Let's sanitize the body
         const dirtyInput = input.htmlBody;
 
-        const cleanInput = DOMPurify.sanitize(dirtyInput, config.dompurify);
+        const cleanInput = DOMPurify.sanitize(dirtyInput);
 
         // Adding the clean body to the comment.metadata field
         input.metadata = merge(get(input, 'metadata'), {
@@ -27,7 +21,7 @@ module.exports = {
         // Let's sanitize the body
         const dirtyInput = edit.htmlBody;
 
-        const cleanInput = DOMPurify.sanitize(dirtyInput, config.dompurify);
+        const cleanInput = DOMPurify.sanitize(dirtyInput);
 
         // Adding the clean body to the comment.metadata field
         edit.metadata = merge(get(edit, 'metadata'), {

From e6832dc2b42b5961667cc2841e290d2cb1c05949 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Fri, 23 Feb 2018 13:23:08 -0300
Subject: [PATCH 23/71] classNames

---
 .../src/tabs/stream/components/DraftArea.js                 | 6 +++---
 .../src/tabs/stream/components/DraftAreaContent.js          | 2 +-
 test/e2e/page_objects/embedStream.js                        | 4 ++--
 3 files changed, 6 insertions(+), 6 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 2e45cf97c..bd370b3b6 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
@@ -14,8 +14,8 @@ import styles from './DraftArea.css';
 export default class DraftArea extends React.Component {
   renderCharCount() {
     const { value, maxCharCount } = this.props;
-    const className = cn(styles.charCount, 'talk-draftarea-char-count', {
-      [`${styles.charMax} talk-draftarea-char-max`]:
+    const className = cn(styles.charCount, 'talk-commentbox-char-count', {
+      [`${styles.charMax} talk-commentbox-char-max`]:
         value.length > maxCharCount,
     });
     const remaining = maxCharCount - value.length;
@@ -53,7 +53,7 @@ export default class DraftArea extends React.Component {
 
     return (
       <div>
-        <div className={cn(styles.container, 'talk-draftarea-container')}>
+        <div className={cn(styles.container, 'talk-commentbox-container')}>
           <label htmlFor={id} className="screen-reader-text" aria-hidden={true}>
             {label}
           </label>
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 e23f7b9eb..da538c176 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
@@ -12,7 +12,7 @@ const DraftAreaContent = ({
   disabled,
 }) => (
   <textarea
-    className={cn(styles.content, 'talk-draftarea-content')}
+    className={cn(styles.content, 'talk-commentbox-content')}
     value={value}
     placeholder={placeholder}
     id={id}
diff --git a/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js
index fab864987..ae0240125 100644
--- a/test/e2e/page_objects/embedStream.js
+++ b/test/e2e/page_objects/embedStream.js
@@ -97,8 +97,8 @@ module.exports = {
       elements: {
         logoutButton: '.talk-stream-userbox-logout',
         signInButton: '#coralSignInButton',
-        commentBoxTextarea: '.talk-plugin-commentbox-textarea',
-        commentBoxPostButton: '.talk-plugin-commentbox-button',
+        commentBoxTextarea: '.talk-commentbox-textarea',
+        commentBoxPostButton: '.talk-commentbox-button',
         firstComment: '.talk-stream-comment.talk-stream-comment-level-0',
         firstCommentContent:
           '.talk-stream-comment.talk-stream-comment-level-0 .talk-stream-comment-content',

From 9b5c0c2ca74fe8c0ac85f892cad2e6baea687930 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Fri, 23 Feb 2018 13:50:00 -0300
Subject: [PATCH 24/71] classNames

---
 .../src/tabs/stream/components/DraftAreaContent.js              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 da538c176..0cc62912d 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
@@ -12,7 +12,7 @@ const DraftAreaContent = ({
   disabled,
 }) => (
   <textarea
-    className={cn(styles.content, 'talk-commentbox-content')}
+    className={cn(styles.content, 'talk-commentbox-textarea')}
     value={value}
     placeholder={placeholder}
     id={id}

From e45b09b32a1630f5b21176835fb2b4ef5aa67d34 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Fri, 23 Feb 2018 14:52:20 -0300
Subject: [PATCH 25/71] Adding support for links!

---
 plugins/talk-plugin-rich-text/package.json    |  3 +-
 .../talk-plugin-rich-text/server/config.js    | 12 +++++++
 plugins/talk-plugin-rich-text/server/hooks.js | 35 ++++++++++++-------
 yarn.lock                                     | 30 ++++++++++++++++
 4 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/plugins/talk-plugin-rich-text/package.json b/plugins/talk-plugin-rich-text/package.json
index 7ef08ec80..e933626f6 100644
--- a/plugins/talk-plugin-rich-text/package.json
+++ b/plugins/talk-plugin-rich-text/package.json
@@ -8,6 +8,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "dompurify": "^1.0.3",
-    "jsdom": "^11.6.2"
+    "jsdom": "^11.6.2",
+    "linkifyjs": "^2.1.5"
   }
 }
diff --git a/plugins/talk-plugin-rich-text/server/config.js b/plugins/talk-plugin-rich-text/server/config.js
index eec559ce0..bb28dca32 100644
--- a/plugins/talk-plugin-rich-text/server/config.js
+++ b/plugins/talk-plugin-rich-text/server/config.js
@@ -1,4 +1,16 @@
 const config = {
+  // Highlight Links
+  highlightLinks: true,
+
+  // Linkify Settings
+  linkify: {
+    className: 'talk-plugin-rich-text-link',
+    tagName: 'a',
+    target: {
+      url: '_blank',
+    },
+  },
+
   // Super strict rules to make sure users only submit the tags they are allowed
   dompurify: { ALLOWED_TAGS: ['b', 'i', 'blockquote'] },
 
diff --git a/plugins/talk-plugin-rich-text/server/hooks.js b/plugins/talk-plugin-rich-text/server/hooks.js
index cd4beac99..0dfcd054c 100644
--- a/plugins/talk-plugin-rich-text/server/hooks.js
+++ b/plugins/talk-plugin-rich-text/server/hooks.js
@@ -1,31 +1,40 @@
 const { merge, get } = require('lodash');
 const DOMPurify = require('./DOMPurify');
+const linkify = require('linkifyjs/html');
+const config = require('./config');
+
+const inputCleanup = ({ htmlBody }) => {
+  // htmlBody needs to be present in the request
+  if (!htmlBody) {
+    throw new Error('htmlBody not present in the request');
+  }
+
+  // Let's sanitize the body
+  let cleanInput = DOMPurify.sanitize(htmlBody);
+
+  // Highlighting links
+  if (config.highlightLinks) {
+    cleanInput = linkify(cleanInput, config.linkify);
+  }
+
+  return cleanInput;
+};
 
 module.exports = {
   RootMutation: {
     createComment: {
       async pre(_, { input }, _context, _info) {
-        // Let's sanitize the body
-        const dirtyInput = input.htmlBody;
-
-        const cleanInput = DOMPurify.sanitize(dirtyInput);
-
         // Adding the clean body to the comment.metadata field
         input.metadata = merge(get(input, 'metadata'), {
-          htmlBody: cleanInput,
+          htmlBody: inputCleanup(input),
         });
       },
     },
     editComment: {
       async pre(_, { edit }, _context, _info) {
-        // Let's sanitize the body
-        const dirtyInput = edit.htmlBody;
-
-        const cleanInput = DOMPurify.sanitize(dirtyInput);
-
-        // Adding the clean body to the comment.metadata field
+        // Adding the clean body to the coment.metadata field
         edit.metadata = merge(get(edit, 'metadata'), {
-          htmlBody: cleanInput,
+          htmlBody: inputCleanup(edit),
         });
       },
     },
diff --git a/yarn.lock b/yarn.lock
index d24c5fa58..78b96c795 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4997,6 +4997,10 @@ joi@^6.10.1:
     moment "2.x.x"
     topo "1.x.x"
 
+jquery@>=1.9.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
+
 js-base64@^2.1.9:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.3.2.tgz#a79a923666372b580f8e27f51845c6f7e8fbfbaf"
@@ -5366,6 +5370,14 @@ linkify-it@^2.0.3:
   dependencies:
     uc.micro "^1.0.1"
 
+linkifyjs@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-2.1.5.tgz#effc9f01e4aeafbbdbef21a45feab38b9516f93e"
+  optionalDependencies:
+    jquery ">=1.9.0"
+    react ">=0.14.0"
+    react-dom ">=0.14.0"
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@@ -7808,6 +7820,15 @@ react-apollo@^1.4.12:
     object-assign "^4.0.1"
     prop-types "^15.5.8"
 
+react-dom@>=0.14.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
 react-dom@^15.3.1, react-dom@^15.4.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.2.tgz#41cfadf693b757faf2708443a1d1fd5a02bef730"
@@ -7937,6 +7958,15 @@ react-virtualized@9.13.0:
     loose-envify "^1.3.0"
     prop-types "^15.5.4"
 
+react@>=0.14.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
 react@^15.3.1, react@^15.4.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"

From 02374345e1e12bd5398e187ed4f481a072d638c9 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Fri, 23 Feb 2018 15:35:14 -0300
Subject: [PATCH 26/71] Adding README.md, modifying mutation, changing htmlBody
 to richTextBody to make it generic

---
 client/coral-framework/graphql/mutations.js   | 28 --------------
 .../client/components/CommentContent.js       |  4 +-
 .../client/components/Editor.js               |  8 ++--
 .../client/containers/CommentContent.js       |  2 +-
 .../client/index.js                           | 38 ++++++++++++++++---
 plugins/talk-plugin-rich-text/README.md       | 24 ++++++++++++
 plugins/talk-plugin-rich-text/server/hooks.js | 14 +++----
 .../talk-plugin-rich-text/server/resolvers.js |  2 +-
 .../server/typeDefs.graphql                   |  6 +--
 9 files changed, 75 insertions(+), 51 deletions(-)

diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js
index ffa139abc..f34a2cc88 100644
--- a/client/coral-framework/graphql/mutations.js
+++ b/client/coral-framework/graphql/mutations.js
@@ -1,6 +1,5 @@
 import { gql } from 'react-apollo';
 import withMutation from '../hocs/withMutation';
-import update from 'immutability-helper';
 
 function convertItemType(item_type) {
   switch (item_type) {
@@ -459,33 +458,6 @@ export const withEditComment = withMutation(
             asset_id,
             edit,
           },
-          update: proxy => {
-            const editCommentFragment = gql`
-              fragment Talk_EditComment on Comment {
-                body
-                htmlBody
-              }
-            `;
-
-            const fragmentId = `Comment_${id}`;
-
-            const data = proxy.readFragment({
-              fragment: editCommentFragment,
-              id: fragmentId,
-            });
-
-            const updated = update(data, {
-              htmlBody: {
-                $set: edit.htmlBody,
-              },
-            });
-
-            proxy.writeFragment({
-              fragment: editCommentFragment,
-              id: fragmentId,
-              data: updated,
-            });
-          },
         });
       },
     }),
diff --git a/plugins/talk-plugin-rich-text-pell/client/components/CommentContent.js b/plugins/talk-plugin-rich-text-pell/client/components/CommentContent.js
index 49f2572df..7e4a202bc 100644
--- a/plugins/talk-plugin-rich-text-pell/client/components/CommentContent.js
+++ b/plugins/talk-plugin-rich-text-pell/client/components/CommentContent.js
@@ -5,10 +5,10 @@ import { pluginName } from '../../package.json';
 class CommentContent extends React.Component {
   render() {
     const { comment } = this.props;
-    return comment.htmlBody ? (
+    return comment.richTextBody ? (
       <div
         className={`${pluginName}-text`}
-        dangerouslySetInnerHTML={{ __html: comment.htmlBody }}
+        dangerouslySetInnerHTML={{ __html: comment.richTextBody }}
       />
     ) : (
       <div className={`${pluginName}-text`}>{comment.body}</div>
diff --git a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
index 0800950e8..e85c48731 100644
--- a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
+++ b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
@@ -15,10 +15,10 @@ class Editor extends React.Component {
 
     init({
       element: this.ref,
-      onChange: htmlBody => {
+      onChange: richTextBody => {
         // We want to save the original comment body
         const originalBody = this.ref.childNodes[1].innerText;
-        onChange(originalBody, { htmlBody });
+        onChange(originalBody, { richTextBody });
       },
       actions,
       classes: {
@@ -37,8 +37,8 @@ class Editor extends React.Component {
     });
 
     // To edit comments and have the previous html comment
-    if (this.props.comment && this.props.comment.htmlBody) {
-      this.ref.content.innerHTML = this.props.comment.htmlBody;
+    if (this.props.comment && this.props.comment.richTextBody) {
+      this.ref.content.innerHTML = this.props.comment.richTextBody;
     }
   }
 
diff --git a/plugins/talk-plugin-rich-text-pell/client/containers/CommentContent.js b/plugins/talk-plugin-rich-text-pell/client/containers/CommentContent.js
index ac6f2de78..8bd36da23 100644
--- a/plugins/talk-plugin-rich-text-pell/client/containers/CommentContent.js
+++ b/plugins/talk-plugin-rich-text-pell/client/containers/CommentContent.js
@@ -6,7 +6,7 @@ export default withFragments({
   comment: gql`
     fragment TalkPluginRTE_CommentContent_comment on Comment {
       body
-      htmlBody
+      richTextBody
     }
   `,
 })(CommentContent);
diff --git a/plugins/talk-plugin-rich-text-pell/client/index.js b/plugins/talk-plugin-rich-text-pell/client/index.js
index 1f357de77..84d6e7da9 100644
--- a/plugins/talk-plugin-rich-text-pell/client/index.js
+++ b/plugins/talk-plugin-rich-text-pell/client/index.js
@@ -1,4 +1,5 @@
 import Editor from './components/Editor';
+import update from 'immutability-helper';
 import CommentContent from './containers/CommentContent';
 import { gql } from 'react-apollo';
 
@@ -11,14 +12,14 @@ export default {
     CreateCommentResponse: gql`
       fragment TalkRTE_CreateCommentResponse on CreateCommentResponse {
         comment {
-          htmlBody
+          richTextBody
         }
       }
     `,
     EditCommentResponse: gql`
       fragment TalkRTE_EditCommentResponse on EditCommentResponse {
         comment {
-          htmlBody
+          richTextBody
         }
       }
     `,
@@ -29,21 +30,48 @@ export default {
         optimisticResponse: {
           createComment: {
             comment: {
-              htmlBody: input.htmlBody,
+              richTextBody: input.richTextBody,
             },
           },
         },
       };
     },
-    EditComment: ({ variables: { edit } }) => {
+    EditComment: ({ variables: { id, edit } }) => {
       return {
         optimisticResponse: {
           editComment: {
             comment: {
-              htmlBody: edit.htmlBody,
+              richTextBody: edit.richTextBody,
             },
           },
         },
+        update: proxy => {
+          const editCommentFragment = gql`
+            fragment Talk_EditComment on Comment {
+              body
+              richTextBody
+            }
+          `;
+
+          const fragmentId = `Comment_${id}`;
+
+          const data = proxy.readFragment({
+            fragment: editCommentFragment,
+            id: fragmentId,
+          });
+
+          const updated = update(data, {
+            richTextBody: {
+              $set: edit.richTextBody,
+            },
+          });
+
+          proxy.writeFragment({
+            fragment: editCommentFragment,
+            id: fragmentId,
+            data: updated,
+          });
+        },
       };
     },
   },
diff --git a/plugins/talk-plugin-rich-text/README.md b/plugins/talk-plugin-rich-text/README.md
index e69de29bb..ce85a23b0 100644
--- a/plugins/talk-plugin-rich-text/README.md
+++ b/plugins/talk-plugin-rich-text/README.md
@@ -0,0 +1,24 @@
+# Talk Plugin Rich Text 
+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`.
+
+## 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 comment. The original `comment.body` is never touched. Using the `metadata` field allow us to build plugins that are not invasive to the core and also test 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
+There is a `config.js` in the root folder. This file contains the recommended settings. 
+
+### `highlightLinks`
+A `boolean` to highlight links.  Set it to `false` to turn it off.
+
+### `linkify`
+Settings for highlighting links. These will only apply if `higlightLinks` is set to `true`.
+
+### `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`
+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. 
diff --git a/plugins/talk-plugin-rich-text/server/hooks.js b/plugins/talk-plugin-rich-text/server/hooks.js
index 0dfcd054c..f0bbe33ab 100644
--- a/plugins/talk-plugin-rich-text/server/hooks.js
+++ b/plugins/talk-plugin-rich-text/server/hooks.js
@@ -3,14 +3,14 @@ const DOMPurify = require('./DOMPurify');
 const linkify = require('linkifyjs/html');
 const config = require('./config');
 
-const inputCleanup = ({ htmlBody }) => {
-  // htmlBody needs to be present in the request
-  if (!htmlBody) {
-    throw new Error('htmlBody not present in the request');
+const inputCleanup = ({ richTextBody }) => {
+  // richTextBody needs to be present in the request
+  if (!richTextBody) {
+    throw new Error('`richTextBody` field not present in the request');
   }
 
   // Let's sanitize the body
-  let cleanInput = DOMPurify.sanitize(htmlBody);
+  let cleanInput = DOMPurify.sanitize(richTextBody);
 
   // Highlighting links
   if (config.highlightLinks) {
@@ -26,7 +26,7 @@ module.exports = {
       async pre(_, { input }, _context, _info) {
         // Adding the clean body to the comment.metadata field
         input.metadata = merge(get(input, 'metadata'), {
-          htmlBody: inputCleanup(input),
+          richTextBody: inputCleanup(input),
         });
       },
     },
@@ -34,7 +34,7 @@ module.exports = {
       async pre(_, { edit }, _context, _info) {
         // Adding the clean body to the coment.metadata field
         edit.metadata = merge(get(edit, 'metadata'), {
-          htmlBody: inputCleanup(edit),
+          richTextBody: inputCleanup(edit),
         });
       },
     },
diff --git a/plugins/talk-plugin-rich-text/server/resolvers.js b/plugins/talk-plugin-rich-text/server/resolvers.js
index 015f39cb9..4b7ec276e 100644
--- a/plugins/talk-plugin-rich-text/server/resolvers.js
+++ b/plugins/talk-plugin-rich-text/server/resolvers.js
@@ -1,5 +1,5 @@
 module.exports = {
   Comment: {
-    htmlBody: comment => comment.metadata.htmlBody,
+    richTextBody: comment => comment.metadata.richTextBody,
   },
 };
diff --git a/plugins/talk-plugin-rich-text/server/typeDefs.graphql b/plugins/talk-plugin-rich-text/server/typeDefs.graphql
index f5db2fd88..7a60a24c3 100644
--- a/plugins/talk-plugin-rich-text/server/typeDefs.graphql
+++ b/plugins/talk-plugin-rich-text/server/typeDefs.graphql
@@ -1,11 +1,11 @@
 input CreateCommentInput {
-  htmlBody: String
+  richTextBody: String
 }
 
 input EditCommentInput {
-  htmlBody: String
+  richTextBody: String
 }
 
 type Comment {
-  htmlBody: String
+  richTextBody: String
 }
\ No newline at end of file

From 632f80a202c9dbb8023fe868d8cc62e40b9c6a6f Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Fri, 23 Feb 2018 15:54:34 -0300
Subject: [PATCH 27/71] Readme for talk-rich-text-pell

---
 plugins/talk-plugin-rich-text-pell/README.md  | 20 +++++++++++++++++++
 .../client/translations.yml                   |  0
 2 files changed, 20 insertions(+)
 delete mode 100644 plugins/talk-plugin-rich-text-pell/client/translations.yml

diff --git a/plugins/talk-plugin-rich-text-pell/README.md b/plugins/talk-plugin-rich-text-pell/README.md
index e69de29bb..98ad12828 100644
--- a/plugins/talk-plugin-rich-text-pell/README.md
+++ b/plugins/talk-plugin-rich-text-pell/README.md
@@ -0,0 +1,20 @@
+# Talk Plugin Rich Text - Pell
+Enables rich text support client-side by using [Pell](https://github.com/jaredreich/pell).
+
+## Installation
+Add `talk-plugin-rich-text-pell` to the `plugins.json` in your Talk installation. Remember to add this in the `client` property since this plugin only covers the client side. To add server support, please use `talk-plugin-rich-text`.
+
+## How does this work?
+This plugin contains 2 important components:
+  - The Editor (`./components/Editor.js`)
+  - The Comment Content Renderer (`./components/CommentContent.js`)
+
+The editor component contains the rich text editor. For this particular plugin we chose [Pell](https://github.com/jaredreich/pell). Pell is the simplest and smallest WYSIWYG text editor with no dependencies that we could find.
+
+If you check our `index.js` you will notice that we inject this editor in the `commentBox` slot. We do this to replace the core comment box with this one. 
+
+Now, in order to render the new styled comments we need a comment renderer. For this task we will have to replace our core comment renderer by using the `commentContent` slot.
+
+If you are not familiar with GraphQL `client/index.js` will look complicated, but fear not! With those functions we specify what to expect from the server schema, how to perform optimistic updates and how keep the client store updated with the latest changes. 
+
+We encourage you to see the files and check how easy is to build plugins! If you have any feedback, please let us know. 
diff --git a/plugins/talk-plugin-rich-text-pell/client/translations.yml b/plugins/talk-plugin-rich-text-pell/client/translations.yml
deleted file mode 100644
index e69de29bb..000000000

From 4fe3d582b86522391f97298a930eb3ffdcfd2fe2 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Fri, 23 Feb 2018 15:55:32 -0300
Subject: [PATCH 28/71] commentBox slot

---
 .../coral-embed-stream/src/tabs/stream/components/DraftArea.js  | 2 +-
 plugins/talk-plugin-rich-text-pell/client/index.js              | 2 +-
 2 files changed, 2 insertions(+), 2 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 bd370b3b6..43bce64ea 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
@@ -58,7 +58,7 @@ export default class DraftArea extends React.Component {
             {label}
           </label>
           <Slot
-            fill="textArea"
+            fill="commentBox"
             defaultComponent={DraftAreaContent}
             className={styles.content}
             {...tASettings}
diff --git a/plugins/talk-plugin-rich-text-pell/client/index.js b/plugins/talk-plugin-rich-text-pell/client/index.js
index 84d6e7da9..96acd9f56 100644
--- a/plugins/talk-plugin-rich-text-pell/client/index.js
+++ b/plugins/talk-plugin-rich-text-pell/client/index.js
@@ -5,7 +5,7 @@ import { gql } from 'react-apollo';
 
 export default {
   slots: {
-    textArea: [Editor],
+    commentBox: [Editor],
     commentContent: [CommentContent],
   },
   fragments: {

From 37dc3a27dcfc64290830e176f2f487f2f64260f4 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Fri, 23 Feb 2018 13:58:42 -0700
Subject: [PATCH 29/71] updated yarn.lock after merge conflict

---
 yarn.lock | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index 103ce1d54..cdf07560c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5595,7 +5595,7 @@ jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
 
-jsdom@^11.5.1:
+jsdom@^11.3.0, jsdom@^11.5.1, jsdom@^11.6.2:
   version "11.6.2"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.6.2.tgz#25d1ef332d48adf77fc5221fe2619967923f16bb"
   dependencies:
@@ -5934,6 +5934,14 @@ linkify-it@^2.0.3:
   dependencies:
     uc.micro "^1.0.1"
 
+linkifyjs@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-2.1.5.tgz#effc9f01e4aeafbbdbef21a45feab38b9516f93e"
+  optionalDependencies:
+    jquery ">=1.9.0"
+    react ">=0.14.0"
+    react-dom ">=0.14.0"
+
 lint-staged@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-7.0.0.tgz#57926c63201e7bd38ca0576d74391efa699b4a9d"

From 735ecbcef3250344e25d40c68e08a32c243733a0 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Fri, 23 Feb 2018 14:00:07 -0700
Subject: [PATCH 30/71] linting updates

---
 .eslintignore                                 | 34 +------------------
 plugins/talk-plugin-akismet/.eslintrc.json    |  3 --
 plugins/talk-plugin-auth/.eslintrc.json       |  3 --
 .../talk-plugin-author-menu/.eslintrc.json    |  3 --
 .../.eslintrc.json                            |  3 --
 .../.eslintrc.json                            |  3 --
 .../talk-plugin-facebook-auth/.eslintrc.json  |  3 --
 .../.eslintrc.json                            |  3 --
 .../talk-plugin-flag-details/.eslintrc.json   |  3 --
 .../talk-plugin-google-auth/.eslintrc.json    |  3 --
 .../client/components/SignIn.js               |  4 +--
 .../client/components/SignUp.js               |  4 +--
 .../talk-plugin-ignore-user/.eslintrc.json    |  3 --
 plugins/talk-plugin-like/.eslintrc.json       |  3 --
 plugins/talk-plugin-love/.eslintrc.json       |  3 --
 .../talk-plugin-member-since/.eslintrc.json   |  3 --
 .../.eslintrc.json                            |  3 --
 plugins/talk-plugin-offtopic/.eslintrc.json   |  3 --
 plugins/talk-plugin-permalink/.eslintrc.json  |  3 --
 .../.eslintrc.json                            |  3 --
 .../talk-plugin-remember-sort/.eslintrc.json  |  3 --
 plugins/talk-plugin-respect/.eslintrc.json    |  3 --
 .../client/.eslintrc.json                     | 22 +-----------
 .../.eslintrc.json                            |  3 --
 .../server/config.js                          |  4 ++-
 .../server/hooks.js                           | 29 ++++++++--------
 .../.eslintrc.json                            |  3 --
 .../.eslintrc.json                            |  3 --
 .../.eslintrc.json                            |  3 --
 .../.eslintrc.json                            |  3 --
 .../talk-plugin-sort-newest/.eslintrc.json    |  3 --
 .../talk-plugin-sort-oldest/.eslintrc.json    |  3 --
 plugins/talk-plugin-subscriber/.eslintrc.json |  4 ---
 .../talk-plugin-toxic-comments/.eslintrc.json |  3 --
 .../.eslintrc.json                            |  3 --
 35 files changed, 22 insertions(+), 163 deletions(-)
 delete mode 100644 plugins/talk-plugin-akismet/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-auth/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-author-menu/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-comment-content/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-deep-reply-count/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-facebook-auth/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-featured-comments/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-flag-details/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-google-auth/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-ignore-user/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-like/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-love/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-member-since/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-moderation-actions/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-offtopic/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-permalink/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-profile-settings/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-remember-sort/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-respect/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-slack-notifications/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-sort-most-liked/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-sort-most-loved/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-sort-most-replied/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-sort-most-respected/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-sort-newest/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-sort-oldest/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-subscriber/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-toxic-comments/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-viewing-options/.eslintrc.json

diff --git a/.eslintignore b/.eslintignore
index ded9d13ad..ad58230e0 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -2,36 +2,4 @@
 dist
 docs
 node_modules
-plugins/*
-public
-
-!plugins/talk-plugin-akismet
-!plugins/talk-plugin-auth
-!plugins/talk-plugin-author-menu
-!plugins/talk-plugin-comment-content
-!plugins/talk-plugin-deep-reply-count
-!plugins/talk-plugin-facebook-auth
-!plugins/talk-plugin-featured-comments
-!plugins/talk-plugin-flag-details
-!plugins/talk-plugin-ignore-user
-!plugins/talk-plugin-like
-!plugins/talk-plugin-love
-!plugins/talk-plugin-member-since
-!plugins/talk-plugin-mod
-!plugins/talk-plugin-moderation-actions
-!plugins/talk-plugin-offtopic
-!plugins/talk-plugin-permalink
-!plugins/talk-plugin-profile-settings
-!plugins/talk-plugin-remember-sort
-!plugins/talk-plugin-respect
-!plugins/talk-plugin-rich-text
-!plugins/talk-plugin-rich-text-pell
-!plugins/talk-plugin-sort-most-liked
-!plugins/talk-plugin-sort-most-loved
-!plugins/talk-plugin-sort-most-replied
-!plugins/talk-plugin-sort-most-respected
-!plugins/talk-plugin-sort-newest
-!plugins/talk-plugin-sort-oldest
-!plugins/talk-plugin-subscriber
-!plugins/talk-plugin-toxic-comments
-!plugins/talk-plugin-viewing-options
\ No newline at end of file
+public
\ No newline at end of file
diff --git a/plugins/talk-plugin-akismet/.eslintrc.json b/plugins/talk-plugin-akismet/.eslintrc.json
deleted file mode 100644
index 64e91163f..000000000
--- a/plugins/talk-plugin-akismet/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
\ No newline at end of file
diff --git a/plugins/talk-plugin-auth/.eslintrc.json b/plugins/talk-plugin-auth/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-auth/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-author-menu/.eslintrc.json b/plugins/talk-plugin-author-menu/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-author-menu/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-comment-content/.eslintrc.json b/plugins/talk-plugin-comment-content/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-comment-content/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-deep-reply-count/.eslintrc.json b/plugins/talk-plugin-deep-reply-count/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-deep-reply-count/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-facebook-auth/.eslintrc.json b/plugins/talk-plugin-facebook-auth/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-facebook-auth/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-featured-comments/.eslintrc.json b/plugins/talk-plugin-featured-comments/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-featured-comments/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-flag-details/.eslintrc.json b/plugins/talk-plugin-flag-details/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-flag-details/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-google-auth/.eslintrc.json b/plugins/talk-plugin-google-auth/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-google-auth/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-google-auth/client/components/SignIn.js b/plugins/talk-plugin-google-auth/client/components/SignIn.js
index 527d41238..a361cfe70 100644
--- a/plugins/talk-plugin-google-auth/client/components/SignIn.js
+++ b/plugins/talk-plugin-google-auth/client/components/SignIn.js
@@ -3,7 +3,5 @@ import GoogleButton from '../containers/GoogleButton';
 import { t } from 'plugin-api/beta/client/services';
 
 export default () => {
-  return (
-    <GoogleButton>{t('talk-plugin-google-auth.sign_in')}</GoogleButton>
-  );
+  return <GoogleButton>{t('talk-plugin-google-auth.sign_in')}</GoogleButton>;
 };
diff --git a/plugins/talk-plugin-google-auth/client/components/SignUp.js b/plugins/talk-plugin-google-auth/client/components/SignUp.js
index 704cc3963..3193b02fb 100644
--- a/plugins/talk-plugin-google-auth/client/components/SignUp.js
+++ b/plugins/talk-plugin-google-auth/client/components/SignUp.js
@@ -3,7 +3,5 @@ import GoogleButton from '../containers/GoogleButton';
 import { t } from 'plugin-api/beta/client/services';
 
 export default () => {
-  return (
-    <GoogleButton>{t('talk-plugin-google-auth.sign_up')}</GoogleButton>
-  );
+  return <GoogleButton>{t('talk-plugin-google-auth.sign_up')}</GoogleButton>;
 };
diff --git a/plugins/talk-plugin-ignore-user/.eslintrc.json b/plugins/talk-plugin-ignore-user/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-ignore-user/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-like/.eslintrc.json b/plugins/talk-plugin-like/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-like/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-love/.eslintrc.json b/plugins/talk-plugin-love/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-love/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-member-since/.eslintrc.json b/plugins/talk-plugin-member-since/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-member-since/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-moderation-actions/.eslintrc.json b/plugins/talk-plugin-moderation-actions/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-moderation-actions/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-offtopic/.eslintrc.json b/plugins/talk-plugin-offtopic/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-offtopic/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-permalink/.eslintrc.json b/plugins/talk-plugin-permalink/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-permalink/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-profile-settings/.eslintrc.json b/plugins/talk-plugin-profile-settings/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-profile-settings/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-remember-sort/.eslintrc.json b/plugins/talk-plugin-remember-sort/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-remember-sort/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-respect/.eslintrc.json b/plugins/talk-plugin-respect/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-respect/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-rich-text-pell/client/.eslintrc.json b/plugins/talk-plugin-rich-text-pell/client/.eslintrc.json
index 9fe56bd14..c8a6db18a 100644
--- a/plugins/talk-plugin-rich-text-pell/client/.eslintrc.json
+++ b/plugins/talk-plugin-rich-text-pell/client/.eslintrc.json
@@ -1,23 +1,3 @@
 {
-  "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"] }]
-  }
+  "extends": "@coralproject/eslint-config-talk/client"
 }
diff --git a/plugins/talk-plugin-slack-notifications/.eslintrc.json b/plugins/talk-plugin-slack-notifications/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-slack-notifications/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-slack-notifications/server/config.js b/plugins/talk-plugin-slack-notifications/server/config.js
index 7571565b0..11f76f138 100644
--- a/plugins/talk-plugin-slack-notifications/server/config.js
+++ b/plugins/talk-plugin-slack-notifications/server/config.js
@@ -5,7 +5,9 @@ const config = {
 
 if (process.env.NODE_ENV !== 'test' && !config.SLACK_WEBHOOK_URL) {
   // TODO this error should point users to Talk's Slack app once that's in place
-  throw new Error('Please set the TALK_SLACK_WEBHOOK_URL environment variable to use the slack-notifications plugin.');
+  throw new Error(
+    'Please set the TALK_SLACK_WEBHOOK_URL environment variable to use the slack-notifications plugin.'
+  );
 }
 
 module.exports = config;
diff --git a/plugins/talk-plugin-slack-notifications/server/hooks.js b/plugins/talk-plugin-slack-notifications/server/hooks.js
index bda9dc4f5..eac0c1be4 100644
--- a/plugins/talk-plugin-slack-notifications/server/hooks.js
+++ b/plugins/talk-plugin-slack-notifications/server/hooks.js
@@ -1,5 +1,5 @@
 const fetch = require('node-fetch');
-const {SLACK_WEBHOOK_URL, SLACK_WEBHOOK_TIMEOUT} = require('./config');
+const { SLACK_WEBHOOK_URL, SLACK_WEBHOOK_TIMEOUT } = require('./config');
 const debug = require('debug')('talk:plugin:slack-notifications');
 
 // We don't add the hooks during _test_ as the Slack API is not available.
@@ -10,14 +10,9 @@ if (process.env.NODE_ENV === 'test') {
 module.exports = {
   RootMutation: {
     createComment: {
-      async post(_, {input}, context, _info, result) {
+      async post(_, _, context, info, result) {
         debug(`Posting notification to Slack webhook: ${SLACK_WEBHOOK_URL}`);
-        const {
-          comment: {
-            body: text,
-            created_at: createdAt
-          }
-        } = result;
+        const { comment: { body: text, created_at: createdAt } } = result;
         const username = context.user.username;
         process.nextTick(async () => {
           const response = await fetch(SLACK_WEBHOOK_URL, {
@@ -27,16 +22,22 @@ module.exports = {
             },
             timeout: SLACK_WEBHOOK_TIMEOUT,
             body: JSON.stringify({
-              attachments: [{
-                text: text,
-                footer: `Comment by ${username}`,
-                ts: Math.floor(Date.parse(createdAt) / 1000),
-              }]
+              attachments: [
+                {
+                  text: text,
+                  footer: `Comment by ${username}`,
+                  ts: Math.floor(Date.parse(createdAt) / 1000),
+                },
+              ],
             }),
           });
           if (!response.ok) {
             const responseText = await response.text();
-            console.trace(`Posting to Slack failed with HTTP code ${response.status} and body '${responseText}'`);
+            console.trace(
+              `Posting to Slack failed with HTTP code ${
+                response.status
+              } and body '${responseText}'`
+            );
           }
         });
         return result;
diff --git a/plugins/talk-plugin-sort-most-liked/.eslintrc.json b/plugins/talk-plugin-sort-most-liked/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-sort-most-liked/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-sort-most-loved/.eslintrc.json b/plugins/talk-plugin-sort-most-loved/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-sort-most-loved/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-sort-most-replied/.eslintrc.json b/plugins/talk-plugin-sort-most-replied/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-sort-most-replied/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-sort-most-respected/.eslintrc.json b/plugins/talk-plugin-sort-most-respected/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-sort-most-respected/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-sort-newest/.eslintrc.json b/plugins/talk-plugin-sort-newest/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-sort-newest/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-sort-oldest/.eslintrc.json b/plugins/talk-plugin-sort-oldest/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-sort-oldest/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-subscriber/.eslintrc.json b/plugins/talk-plugin-subscriber/.eslintrc.json
deleted file mode 100644
index d7d291614..000000000
--- a/plugins/talk-plugin-subscriber/.eslintrc.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-    "extends": "@coralproject/eslint-config-talk"
-  }
-  
\ No newline at end of file
diff --git a/plugins/talk-plugin-toxic-comments/.eslintrc.json b/plugins/talk-plugin-toxic-comments/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-toxic-comments/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}
diff --git a/plugins/talk-plugin-viewing-options/.eslintrc.json b/plugins/talk-plugin-viewing-options/.eslintrc.json
deleted file mode 100644
index 78f7c2397..000000000
--- a/plugins/talk-plugin-viewing-options/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@coralproject/eslint-config-talk"
-}

From 22c876fa02c72045806952ab3a785c2d599780b1 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Fri, 23 Feb 2018 14:02:44 -0700
Subject: [PATCH 31/71] introduced some safety checks

---
 plugins/talk-plugin-rich-text/server/config.js    |  1 +
 plugins/talk-plugin-rich-text/server/hooks.js     | 15 +++++----------
 plugins/talk-plugin-rich-text/server/resolvers.js |  5 ++++-
 .../talk-plugin-rich-text/server/typeDefs.graphql |  4 ++--
 4 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/plugins/talk-plugin-rich-text/server/config.js b/plugins/talk-plugin-rich-text/server/config.js
index bb28dca32..42c6bd756 100644
--- a/plugins/talk-plugin-rich-text/server/config.js
+++ b/plugins/talk-plugin-rich-text/server/config.js
@@ -11,6 +11,7 @@ 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'] },
 
diff --git a/plugins/talk-plugin-rich-text/server/hooks.js b/plugins/talk-plugin-rich-text/server/hooks.js
index f0bbe33ab..2fb9e9a6e 100644
--- a/plugins/talk-plugin-rich-text/server/hooks.js
+++ b/plugins/talk-plugin-rich-text/server/hooks.js
@@ -4,11 +4,6 @@ const linkify = require('linkifyjs/html');
 const config = require('./config');
 
 const inputCleanup = ({ richTextBody }) => {
-  // richTextBody needs to be present in the request
-  if (!richTextBody) {
-    throw new Error('`richTextBody` field not present in the request');
-  }
-
   // Let's sanitize the body
   let cleanInput = DOMPurify.sanitize(richTextBody);
 
@@ -23,17 +18,17 @@ const inputCleanup = ({ richTextBody }) => {
 module.exports = {
   RootMutation: {
     createComment: {
-      async pre(_, { input }, _context, _info) {
+      async pre(_, { input }) {
         // Adding the clean body to the comment.metadata field
-        input.metadata = merge(get(input, 'metadata'), {
+        input.metadata = merge(get(input, 'metadata', {}), {
           richTextBody: inputCleanup(input),
         });
       },
     },
     editComment: {
-      async pre(_, { edit }, _context, _info) {
-        // Adding the clean body to the coment.metadata field
-        edit.metadata = merge(get(edit, 'metadata'), {
+      async pre(_, { edit }) {
+        // Adding the clean body to the comment.metadata field
+        edit.metadata = merge(get(edit, 'metadata', {}), {
           richTextBody: inputCleanup(edit),
         });
       },
diff --git a/plugins/talk-plugin-rich-text/server/resolvers.js b/plugins/talk-plugin-rich-text/server/resolvers.js
index 4b7ec276e..899ece49a 100644
--- a/plugins/talk-plugin-rich-text/server/resolvers.js
+++ b/plugins/talk-plugin-rich-text/server/resolvers.js
@@ -1,5 +1,8 @@
+const { get } = require('lodash');
+
 module.exports = {
   Comment: {
-    richTextBody: comment => comment.metadata.richTextBody,
+    // Get the richTextBody, or send null.
+    richTextBody: comment => get(comment, 'metadata.richTextBody', null),
   },
 };
diff --git a/plugins/talk-plugin-rich-text/server/typeDefs.graphql b/plugins/talk-plugin-rich-text/server/typeDefs.graphql
index 7a60a24c3..afcb016ca 100644
--- a/plugins/talk-plugin-rich-text/server/typeDefs.graphql
+++ b/plugins/talk-plugin-rich-text/server/typeDefs.graphql
@@ -1,9 +1,9 @@
 input CreateCommentInput {
-  richTextBody: String
+  richTextBody: String!
 }
 
 input EditCommentInput {
-  richTextBody: String
+  richTextBody: String!
 }
 
 type Comment {

From 8ce0b784e2408834d216f3dccea795a0b3b1f0f7 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Fri, 23 Feb 2018 14:32:29 -0700
Subject: [PATCH 32/71] added comment

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

diff --git a/plugins/talk-plugin-rich-text-pell/README.md b/plugins/talk-plugin-rich-text-pell/README.md
index 98ad12828..9ec28cd7c 100644
--- a/plugins/talk-plugin-rich-text-pell/README.md
+++ b/plugins/talk-plugin-rich-text-pell/README.md
@@ -2,7 +2,7 @@
 Enables rich text support client-side by using [Pell](https://github.com/jaredreich/pell).
 
 ## Installation
-Add `talk-plugin-rich-text-pell` to the `plugins.json` in your Talk installation. Remember to add this in the `client` property since this plugin only covers the client side. To add server support, please use `talk-plugin-rich-text`.
+Add `talk-plugin-rich-text-pell` to the `plugins.json` in your Talk installation. Remember to add this in the `client` property since this plugin only covers the client side. To add server support, please use `talk-plugin-rich-text`. 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:

From 58897f75716185818b0b2799e7f32b9d516f7c4d Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Tue, 27 Feb 2018 14:18:48 -0300
Subject: [PATCH 33/71] removing vscode

---
 .vscode/settings.json | 2 --
 1 file changed, 2 deletions(-)
 delete mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 7a73a41bf..000000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,2 +0,0 @@
-{
-}
\ No newline at end of file

From 88c0772d5251976b65eb9516bde2aa1fe37acbde Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Tue, 27 Feb 2018 14:57:58 -0300
Subject: [PATCH 34/71] Changes

---
 .../src/tabs/stream/components/EditableCommentContent.js | 4 ++--
 .../src/tabs/stream/containers/CommentBox.js             | 4 ++--
 .../src/tabs/stream/containers/DraftArea.js              | 9 +++++----
 package.json                                             | 1 -
 4 files changed, 9 insertions(+), 9 deletions(-)

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 75f0d1246..297ab0136 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
@@ -74,12 +74,12 @@ export class EditableCommentContent extends React.Component {
     }
   }
 
-  handleBodyChange = (body, ...data) => {
+  handleBodyChange = (body, data) => {
     this.setState(state => ({
       body,
       data: {
         ...state.data,
-        ...data[0],
+        ...data,
       },
     }));
   };
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 b624205bd..bf9e55b57 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
@@ -90,12 +90,12 @@ class CommentBox extends React.Component {
       });
   };
 
-  handleBodyChange = (body, ...data) => {
+  handleBodyChange = (body, data) => {
     this.setState(state => ({
       body,
       data: {
         ...state.data,
-        ...data[0],
+        ...data,
       },
     }));
   };
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 42cf5462b..e32225218 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
@@ -7,7 +7,7 @@ const STORAGE_PATH = 'DraftArea';
 /**
  * An enhanced textarea to make comment drafts.
  */
-export default class DraftAreaContainer extends React.Component {
+class DraftAreaContainer extends React.Component {
   constructor(props, context) {
     super(props, context);
     this.initValue();
@@ -24,8 +24,8 @@ export default class DraftAreaContainer extends React.Component {
     return `${STORAGE_PATH}_${this.props.id}`;
   };
 
-  onChange = (...args) => {
-    this.props.onChange && this.props.onChange(...args);
+  onChange = (body, data) => {
+    this.props.onChange && this.props.onChange(body, data);
   };
 
   componentWillReceiveProps(nextProps) {
@@ -50,7 +50,6 @@ export default class DraftAreaContainer extends React.Component {
         charCountEnable={this.props.charCountEnable}
         maxCharCount={this.props.maxCharCount}
         label={this.props.label}
-        comment={this.props.comment}
       />
     );
   }
@@ -73,3 +72,5 @@ DraftAreaContainer.propTypes = {
   rows: PropTypes.number,
   label: PropTypes.string.isRequired,
 };
+
+export default DraftAreaContainer;
diff --git a/package.json b/package.json
index 2f4c7fd47..68cbc809e 100644
--- a/package.json
+++ b/package.json
@@ -184,7 +184,6 @@
     "timeago.js": "^2.0.3",
     "timekeeper": "^1.0.0",
     "tlds": "^1.196.0",
-    "turndown": "^4.0.1",
     "uglifyjs-webpack-plugin": "^1.1.6",
     "url-join": "^2.0.2",
     "url-loader": "^0.6.0",

From 73355ab542b812da3df1479a2234de81ba13821e Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Tue, 27 Feb 2018 15:12:44 -0300
Subject: [PATCH 35/71] Using queryData and fragments to request data

---
 .../src/tabs/stream/components/DraftArea.js    |  5 +++--
 .../src/tabs/stream/containers/DraftArea.js    | 18 +++++++++++++++++-
 .../client/components/Editor.js                |  3 +++
 .../client/containers/Editor.js                | 12 ++++++++++++
 .../talk-plugin-rich-text-pell/client/index.js |  2 +-
 5 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 plugins/talk-plugin-rich-text-pell/client/containers/Editor.js

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 43bce64ea..11607ae7c 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,7 @@ export default class DraftArea extends React.Component {
       charCountEnable,
       maxCharCount,
       onChange,
-      comment,
+      queryData,
     } = this.props;
 
     const tASettings = {
@@ -48,7 +48,6 @@ export default class DraftArea extends React.Component {
       onChange,
       rows,
       disabled,
-      comment,
     };
 
     return (
@@ -61,6 +60,7 @@ export default class DraftArea extends React.Component {
             fill="commentBox"
             defaultComponent={DraftAreaContent}
             className={styles.content}
+            queryData={queryData}
             {...tASettings}
           />
           <Slot fill="commentInputArea" />
@@ -85,4 +85,5 @@ DraftArea.propTypes = {
   onChange: PropTypes.func,
   disabled: PropTypes.bool,
   rows: PropTypes.number,
+  queryData: PropTypes.object.isRequired,
 };
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 e32225218..aeee8765d 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
@@ -1,6 +1,9 @@
 import React from 'react';
+import { gql } from 'react-apollo';
+import { getSlotFragmentSpreads } from 'coral-framework/utils';
 import PropTypes from 'prop-types';
 import DraftArea from '../components/DraftArea';
+import withFragments from 'coral-framework/hocs/withFragments';
 
 const STORAGE_PATH = 'DraftArea';
 
@@ -39,8 +42,11 @@ class DraftAreaContainer extends React.Component {
   }
 
   render() {
+    const queryData = { comment: this.props.comment };
+
     return (
       <DraftArea
+        queryData={queryData}
         value={this.props.value}
         placeholder={this.props.placeholder}
         id={this.props.id}
@@ -71,6 +77,16 @@ DraftAreaContainer.propTypes = {
   disabled: PropTypes.bool,
   rows: PropTypes.number,
   label: PropTypes.string.isRequired,
+  comment: PropTypes.object,
 };
 
-export default DraftAreaContainer;
+const slots = ['commentBox'];
+
+export default withFragments({
+  comment: gql`
+  fragment CoralAdmin_CommentDetails_comment on Comment {
+    __typename
+    ${getSlotFragmentSpreads(slots, 'comment')}
+  }
+`,
+})(DraftAreaContainer);
diff --git a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
index e85c48731..d2f0b56e8 100644
--- a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
+++ b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
@@ -78,6 +78,9 @@ Editor.propTypes = {
   onChange: PropTypes.func,
   disabled: PropTypes.bool,
   rows: PropTypes.number,
+  comment: PropTypes.object,
+  classNames: PropTypes.object,
+  actions: PropTypes.array,
 };
 
 export default Editor;
diff --git a/plugins/talk-plugin-rich-text-pell/client/containers/Editor.js b/plugins/talk-plugin-rich-text-pell/client/containers/Editor.js
new file mode 100644
index 000000000..2bdc3490f
--- /dev/null
+++ b/plugins/talk-plugin-rich-text-pell/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 TalkPluginRTE_Editor_comment on Comment {
+      body
+      richTextBody
+    }
+  `,
+})(Editor);
diff --git a/plugins/talk-plugin-rich-text-pell/client/index.js b/plugins/talk-plugin-rich-text-pell/client/index.js
index 96acd9f56..d7e593f75 100644
--- a/plugins/talk-plugin-rich-text-pell/client/index.js
+++ b/plugins/talk-plugin-rich-text-pell/client/index.js
@@ -1,4 +1,4 @@
-import Editor from './components/Editor';
+import Editor from './containers/Editor';
 import update from 'immutability-helper';
 import CommentContent from './containers/CommentContent';
 import { gql } from 'react-apollo';

From d63422a4c203c5e890b52880009e62b6883b8e8b Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Tue, 27 Feb 2018 15:16:40 -0300
Subject: [PATCH 36/71] Not reading the fragment just updating

---
 .../talk-plugin-rich-text-pell/client/index.js   | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/plugins/talk-plugin-rich-text-pell/client/index.js b/plugins/talk-plugin-rich-text-pell/client/index.js
index d7e593f75..8df2113aa 100644
--- a/plugins/talk-plugin-rich-text-pell/client/index.js
+++ b/plugins/talk-plugin-rich-text-pell/client/index.js
@@ -1,5 +1,4 @@
 import Editor from './containers/Editor';
-import update from 'immutability-helper';
 import CommentContent from './containers/CommentContent';
 import { gql } from 'react-apollo';
 
@@ -55,21 +54,12 @@ export default {
 
           const fragmentId = `Comment_${id}`;
 
-          const data = proxy.readFragment({
-            fragment: editCommentFragment,
-            id: fragmentId,
-          });
-
-          const updated = update(data, {
-            richTextBody: {
-              $set: edit.richTextBody,
-            },
-          });
-
           proxy.writeFragment({
             fragment: editCommentFragment,
             id: fragmentId,
-            data: updated,
+            data: {
+              richTextBody: edit.richTextBody,
+            },
           });
         },
       };

From 70d081df4a79d9abd2e05b479f03c91d26d914fb Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Wed, 28 Feb 2018 10:05:28 -0300
Subject: [PATCH 37/71] Minimal styling and old code removal

---
 .../tabs/stream/components/CommentForm.css    |  2 +-
 .../src/tabs/stream/components/CommentForm.js |  1 -
 .../src/tabs/stream/components/ReplyBox.css   |  3 +++
 .../src/tabs/stream/components/ReplyBox.js    |  9 ++++---
 .../client/components/Editor.css              | 26 ++++++++-----------
 .../client/components/Editor.js               |  6 ++++-
 6 files changed, 25 insertions(+), 22 deletions(-)
 create mode 100644 client/coral-embed-stream/src/tabs/stream/components/ReplyBox.css

diff --git a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.css b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.css
index 5a1e66412..ebea11033 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.css
+++ b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.css
@@ -1,11 +1,11 @@
 .buttonContainer {
   display: flex;
   justify-content: flex-end;
+  margin-top: 10px;
 }
 
 .button {
   float: right;
-  margin-top: 10px;
   padding: 5px 10px;
   background: rgb(105, 105, 105);
   color: #FFF;
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 ff005bb31..a9ea8f150 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
@@ -112,7 +112,6 @@ export class CommentForm extends React.Component {
           disabled={disableTextArea}
           charCountEnable={this.props.charCountEnable}
           maxCharCount={this.props.maxCharCount}
-          comment={this.props.comment}
         />
         <div className={cn(styles.buttonContainer, `${name}-button-container`)}>
           {this.props.buttonContainerStart}
diff --git a/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.css b/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.css
new file mode 100644
index 000000000..b9a7484a2
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.css
@@ -0,0 +1,3 @@
+.container {
+  margin-top: 10px;
+}
\ No newline at end of file
diff --git a/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.js b/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.js
index efd083c74..12d074fdd 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.js
@@ -1,11 +1,13 @@
-import React, { Component } from 'react';
+import React from 'react';
+import cn from 'classnames';
 import PropTypes from 'prop-types';
 import CommentBox from '../containers/CommentBox';
+import styles from './ReplyBox.css';
 
 // TODO: (kiwi) Need to adapt CSS classes post refactor to match the rest.
 const name = 'talk-plugin-replies';
 
-class ReplyBox extends Component {
+class ReplyBox extends React.Component {
   componentDidMount() {
     // TODO: (kiwi) This does not follow best practices, better to move this logic into the component.
     document.getElementById(`comment-draft_${this.props.parentId}`).focus();
@@ -17,7 +19,6 @@ class ReplyBox extends Component {
 
   render() {
     const {
-      styles,
       postComment,
       assetId,
       currentUser,
@@ -28,7 +29,7 @@ class ReplyBox extends Component {
       charCountEnable,
     } = this.props;
     return (
-      <div className={`${name}-textarea`} style={styles && styles.container}>
+      <div className={cn(styles.container, `${name}-textarea`)}>
         <CommentBox
           maxCharCount={maxCharCount}
           charCountEnable={charCountEnable}
diff --git a/plugins/talk-plugin-rich-text-pell/client/components/Editor.css b/plugins/talk-plugin-rich-text-pell/client/components/Editor.css
index 294430753..4561e7c6b 100644
--- a/plugins/talk-plugin-rich-text-pell/client/components/Editor.css
+++ b/plugins/talk-plugin-rich-text-pell/client/components/Editor.css
@@ -10,24 +10,22 @@
   font-style: unset;
 }
 
+.button > i {
+  vertical-align: middle;
+}
+
 .button {
-  top: 0;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-  border-radius: 4px;
-  padding: 0;
-  font-size: 14px;
-  margin-top: -2px;
   background-color: transparent;
-  border: solid 1px transparent;
-  cursor: pointer;
-  height: 30px;
-  outline: 0;
-  width: 30px;
+  padding: 3px;
+  border: none;
+  color: #4e4e4e;
+  margin-right: 3px;
 }
 
 .button:hover{
-  background: #fcfcfc;
+  cursor: pointer;
+  border-radius: 3px;
+  background-color: #eae8e8;
 }
 
 .actionBar {
@@ -36,8 +34,6 @@
   border-top: 1px solid #bbb;
   border-left: 1px solid #bbb;
   border-right: 1px solid #bbb;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
 }
 
 .container {
diff --git a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
index d2f0b56e8..2faedb633 100644
--- a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
+++ b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
@@ -62,7 +62,11 @@ class Editor extends React.Component {
 Editor.defaultProps = {
   defaultContent: '',
   styleWithCSS: false,
-  actions: ['bold', 'italic', 'quote'],
+  actions: [
+    { name: 'bold', icon: '<i class="material-icons">format_bold</i>' },
+    { name: 'italic', icon: '<i class="material-icons">format_italic</i>' },
+    { name: 'quote', icon: '<i class="material-icons">format_quote</i>' },
+  ],
   classNames: {
     button: '',
     content: '',

From 20bec204375dc98174bc2934c93739172f158bc1 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Wed, 28 Feb 2018 18:07:28 -0300
Subject: [PATCH 38/71] changes

---
 .../coral-embed-stream/src/tabs/stream/containers/DraftArea.js | 2 +-
 plugins/talk-plugin-rich-text-pell/client/index.js             | 1 -
 services/comments.js                                           | 3 ++-
 3 files changed, 3 insertions(+), 3 deletions(-)

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 aeee8765d..d9b016a06 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
@@ -84,7 +84,7 @@ const slots = ['commentBox'];
 
 export default withFragments({
   comment: gql`
-  fragment CoralAdmin_CommentDetails_comment on Comment {
+  fragment TalkEmbedStream_DraftArea_comment on Comment {
     __typename
     ${getSlotFragmentSpreads(slots, 'comment')}
   }
diff --git a/plugins/talk-plugin-rich-text-pell/client/index.js b/plugins/talk-plugin-rich-text-pell/client/index.js
index 8df2113aa..56cfcfe3b 100644
--- a/plugins/talk-plugin-rich-text-pell/client/index.js
+++ b/plugins/talk-plugin-rich-text-pell/client/index.js
@@ -47,7 +47,6 @@ export default {
         update: proxy => {
           const editCommentFragment = gql`
             fragment Talk_EditComment on Comment {
-              body
               richTextBody
             }
           `;
diff --git a/services/comments.js b/services/comments.js
index 5ac61764d..872f3528f 100644
--- a/services/comments.js
+++ b/services/comments.js
@@ -8,6 +8,7 @@ const cloneDeep = require('lodash/cloneDeep');
 const errors = require('../errors');
 const events = require('./events');
 const merge = require('lodash/merge');
+const { dotize } = require('./utils');
 const { COMMENTS_NEW, COMMENTS_EDIT } = require('./events/constants');
 
 module.exports = class CommentsService {
@@ -110,7 +111,7 @@ module.exports = class CommentsService {
       $set: {
         body,
         status,
-        metadata,
+        metadata: dotize(metadata),
       },
       $push: {
         body_history: {

From 72e80a469359deb7fcabf146212d5ddc86afa0cc Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Wed, 28 Feb 2018 18:16:32 -0300
Subject: [PATCH 39/71] changes

---
 client/coral-embed-stream/src/tabs/stream/containers/Comment.js | 1 +
 1 file changed, 1 insertion(+)

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 90cded652..33ebbc4f4 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
@@ -23,6 +23,7 @@ const slots = [
   'commentAuthorTags',
   'commentTimestamp',
   'commentContent',
+  'commentBox',
 ];
 
 /**

From 20c29cd81cba0850838bbc80ddb83b93411c4ddf Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Wed, 28 Feb 2018 18:22:15 -0300
Subject: [PATCH 40/71] removing slot name change

---
 client/coral-embed-stream/src/tabs/stream/containers/Comment.js | 1 -
 1 file changed, 1 deletion(-)

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 33ebbc4f4..90cded652 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
@@ -23,7 +23,6 @@ const slots = [
   'commentAuthorTags',
   'commentTimestamp',
   'commentContent',
-  'commentBox',
 ];
 
 /**

From ba685a05a22897d26bcf5b91f7af1990d6904aa8 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Wed, 28 Feb 2018 18:48:12 -0300
Subject: [PATCH 41/71] the fragment tree

---
 .../src/tabs/stream/containers/Comment.js     |  6 ++++-
 .../src/tabs/stream/containers/CommentBox.js  | 23 ++++++++++++++++---
 2 files changed, 25 insertions(+), 4 deletions(-)

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 90cded652..ea0fd33e4 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
@@ -4,6 +4,8 @@ import Comment from '../components/Comment';
 import { withFragments } from 'coral-framework/hocs';
 import { getSlotFragmentSpreads } from 'coral-framework/utils';
 import { withSetCommentStatus } from 'coral-framework/graphql/mutations';
+import { getDefinitionName } from 'coral-framework/utils';
+import CommentBox from './CommentBox';
 import {
   THREADING_LEVEL,
   REPLY_COMMENTS_LOAD_DEPTH,
@@ -23,6 +25,7 @@ const slots = [
   'commentAuthorTags',
   'commentTimestamp',
   'commentContent',
+  'commentBox',
 ];
 
 /**
@@ -94,7 +97,8 @@ const singleCommentFragment = gql`
       edited
       editableUntil
     }
-    ${getSlotFragmentSpreads(slots, 'comment')}
+    ${getSlotFragmentSpreads(slots, 'comment')}.
+    ...${getDefinitionName(CommentBox.fragments.comment)}
   }
 `;
 
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 bf9e55b57..17459fe49 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
@@ -1,14 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import { gql } from 'react-apollo';
+import { getSlotFragmentSpreads } from 'coral-framework/utils';
+import withFragments from 'coral-framework/hocs/withFragments';
+import { getDefinitionName } from 'coral-framework/utils';
 import t, { timeago } from 'coral-framework/services/i18n';
 import { can } from 'coral-framework/services/perms';
 import { isSuspended } from 'coral-framework/utils/user';
-
+import DraftArea from './DraftArea';
 import Slot from 'coral-framework/components/Slot';
 import { connect } from 'react-redux';
 import { CommentForm } from '../components/CommentForm';
 import { notifyForNewCommentStatus } from '../helpers';
+import { compose } from 'react-apollo';
 
 // TODO: (kiwi) Need to adapt CSS classes post refactor to match the rest.
 export const name = 'talk-commentbox';
@@ -209,8 +213,21 @@ CommentBox.propTypes = {
   tags: PropTypes.array,
 };
 
+const slots = ['commentBox'];
+
 const mapStateToProps = state => ({
   tags: state.stream.commentBoxTags,
 });
 
-export default connect(mapStateToProps, null)(CommentBox);
+export default compose(
+  connect(mapStateToProps, null),
+  withFragments({
+    comment: gql`
+    fragment TalkEmbedStream_CommentBox_comment on Comment {
+      __typename
+      ${getSlotFragmentSpreads(slots, 'comment')}
+      ...${getDefinitionName(DraftArea.fragments.comment)}
+    }
+`,
+  })
+)(CommentBox);

From a3158a494c46f02f1c5b43d9fdb2737fa9852697 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Thu, 1 Mar 2018 10:29:03 -0300
Subject: [PATCH 42/71] Changes added

---
 .../src/tabs/stream/components/Comment.js        |  2 +-
 .../src/tabs/stream/components/CommentForm.js    |  4 +++-
 .../src/tabs/stream/components/DraftArea.js      |  2 +-
 .../stream/components/EditableCommentContent.js  |  6 ++++--
 .../src/tabs/stream/containers/Comment.js        |  2 +-
 .../src/tabs/stream/containers/CommentBox.js     |  7 ++-----
 .../src/tabs/stream/containers/CommentForm.js    | 16 ++++++++++++++++
 .../src/tabs/stream/containers/DraftArea.js      |  2 +-
 .../stream/containers/EditableCommentContent.js  | 16 ++++++++++++++++
 .../talk-plugin-rich-text-pell/client/index.js   |  2 +-
 10 files changed, 46 insertions(+), 13 deletions(-)
 create mode 100644 client/coral-embed-stream/src/tabs/stream/containers/CommentForm.js
 create mode 100644 client/coral-embed-stream/src/tabs/stream/containers/EditableCommentContent.js

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 f0dcc1017..1f6af9d87 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
@@ -21,7 +21,7 @@ import CommentContent from 'coral-framework/components/CommentContent';
 import Slot from 'coral-framework/components/Slot';
 import CommentTombstone from './CommentTombstone';
 import InactiveCommentLabel from './InactiveCommentLabel';
-import { EditableCommentContent } from './EditableCommentContent';
+import EditableCommentContent from '../containers/EditableCommentContent';
 import {
   getActionSummary,
   iPerformedThisAction,
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 a9ea8f150..8055d3d1c 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
@@ -13,7 +13,7 @@ import DraftArea from '../containers/DraftArea';
 /**
  * Common UI for Creating or Editing a Comment
  */
-export class CommentForm extends React.Component {
+class CommentForm extends React.Component {
   static propTypes = {
     charCountEnable: PropTypes.bool.isRequired,
     maxCharCount: PropTypes.number,
@@ -145,3 +145,5 @@ export class CommentForm extends React.Component {
     );
   }
 }
+
+export default CommentForm;
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 11607ae7c..9f62b38a5 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
@@ -57,7 +57,7 @@ export default class DraftArea extends React.Component {
             {label}
           </label>
           <Slot
-            fill="commentBox"
+            fill="draftArea"
             defaultComponent={DraftAreaContent}
             className={styles.content}
             queryData={queryData}
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 297ab0136..5917dfc54 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { notifyForNewCommentStatus } from '../helpers';
-import { CommentForm } from './CommentForm';
+import CommentForm from '../containers/CommentForm';
 import styles from './Comment.css';
 import { CountdownSeconds } from './CountdownSeconds';
 import { getEditableUntilDate } from './util';
@@ -14,7 +14,7 @@ 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
  */
-export class EditableCommentContent extends React.Component {
+class EditableCommentContent extends React.Component {
   static propTypes = {
     // show notification to the user (e.g. for errors)
     notify: PropTypes.func.isRequired,
@@ -196,3 +196,5 @@ export class EditableCommentContent extends React.Component {
     );
   }
 }
+
+export default EditableCommentContent;
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
index ea0fd33e4..496bf16ce 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
@@ -25,7 +25,6 @@ const slots = [
   'commentAuthorTags',
   'commentTimestamp',
   'commentContent',
-  'commentBox',
 ];
 
 /**
@@ -99,6 +98,7 @@ const singleCommentFragment = gql`
     }
     ${getSlotFragmentSpreads(slots, 'comment')}.
     ...${getDefinitionName(CommentBox.fragments.comment)}
+    ${CommentBox.fragments.comment}
   }
 `;
 
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 17459fe49..17237de21 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { gql } from 'react-apollo';
-import { getSlotFragmentSpreads } from 'coral-framework/utils';
 import withFragments from 'coral-framework/hocs/withFragments';
 import { getDefinitionName } from 'coral-framework/utils';
 import t, { timeago } from 'coral-framework/services/i18n';
@@ -10,7 +9,7 @@ import { isSuspended } from 'coral-framework/utils/user';
 import DraftArea from './DraftArea';
 import Slot from 'coral-framework/components/Slot';
 import { connect } from 'react-redux';
-import { CommentForm } from '../components/CommentForm';
+import CommentForm from '../containers/CommentForm';
 import { notifyForNewCommentStatus } from '../helpers';
 import { compose } from 'react-apollo';
 
@@ -213,8 +212,6 @@ CommentBox.propTypes = {
   tags: PropTypes.array,
 };
 
-const slots = ['commentBox'];
-
 const mapStateToProps = state => ({
   tags: state.stream.commentBoxTags,
 });
@@ -225,9 +222,9 @@ export default compose(
     comment: gql`
     fragment TalkEmbedStream_CommentBox_comment on Comment {
       __typename
-      ${getSlotFragmentSpreads(slots, 'comment')}
       ...${getDefinitionName(DraftArea.fragments.comment)}
     }
+    ${DraftArea.fragments.comment}
 `,
   })
 )(CommentBox);
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/CommentForm.js b/client/coral-embed-stream/src/tabs/stream/containers/CommentForm.js
new file mode 100644
index 000000000..474233e4f
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentForm.js
@@ -0,0 +1,16 @@
+import { gql } from 'react-apollo';
+import CommentForm from '../components/CommentForm';
+import withFragments from 'coral-framework/hocs/withFragments';
+import { getDefinitionName } from 'coral-framework/utils';
+import DraftArea from './DraftArea';
+
+export default withFragments({
+  comment: gql`
+  fragment TalkEmbedStream_CommentForm_comment on Comment {
+    __typename
+    ...${getDefinitionName(DraftArea.fragments.comment)}
+  }
+
+  ${DraftArea.fragments.comment}
+`,
+})(CommentForm);
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 d9b016a06..1dd2a9f16 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
@@ -80,7 +80,7 @@ DraftAreaContainer.propTypes = {
   comment: PropTypes.object,
 };
 
-const slots = ['commentBox'];
+const slots = ['draftArea'];
 
 export default withFragments({
   comment: gql`
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/EditableCommentContent.js b/client/coral-embed-stream/src/tabs/stream/containers/EditableCommentContent.js
new file mode 100644
index 000000000..60cfff236
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/stream/containers/EditableCommentContent.js
@@ -0,0 +1,16 @@
+import { gql } from 'react-apollo';
+import EditableCommentContent from '../components/EditableCommentContent';
+import withFragments from 'coral-framework/hocs/withFragments';
+import { getDefinitionName } from 'coral-framework/utils';
+import CommentForm from './CommentForm';
+
+export default withFragments({
+  comment: gql`
+  fragment TalkEmbedStream_EditableCommentContent_comment on Comment {
+    __typename
+    ...${getDefinitionName(CommentForm.fragments.comment)}
+  }
+
+  ${CommentForm.fragments.comment}
+`,
+})(EditableCommentContent);
diff --git a/plugins/talk-plugin-rich-text-pell/client/index.js b/plugins/talk-plugin-rich-text-pell/client/index.js
index 56cfcfe3b..55185ed6d 100644
--- a/plugins/talk-plugin-rich-text-pell/client/index.js
+++ b/plugins/talk-plugin-rich-text-pell/client/index.js
@@ -4,7 +4,7 @@ import { gql } from 'react-apollo';
 
 export default {
   slots: {
-    commentBox: [Editor],
+    draftArea: [Editor],
     commentContent: [CommentContent],
   },
   fragments: {

From de69cf5790e934787c07c34bbae8d7b7e9055454 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Thu, 1 Mar 2018 11:27:21 -0300
Subject: [PATCH 43/71] wip changes

---
 .../src/tabs/stream/containers/Comment.js                   | 2 +-
 .../src/tabs/stream/containers/CommentBox.js                | 5 ++---
 services/comments.js                                        | 6 +++---
 3 files changed, 6 insertions(+), 7 deletions(-)

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 496bf16ce..a179ba28e 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
@@ -96,7 +96,7 @@ const singleCommentFragment = gql`
       edited
       editableUntil
     }
-    ${getSlotFragmentSpreads(slots, 'comment')}.
+    ${getSlotFragmentSpreads(slots, 'comment')}
     ...${getDefinitionName(CommentBox.fragments.comment)}
     ${CommentBox.fragments.comment}
   }
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 17237de21..2b321df5a 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
@@ -6,7 +6,6 @@ import { getDefinitionName } from 'coral-framework/utils';
 import t, { timeago } from 'coral-framework/services/i18n';
 import { can } from 'coral-framework/services/perms';
 import { isSuspended } from 'coral-framework/utils/user';
-import DraftArea from './DraftArea';
 import Slot from 'coral-framework/components/Slot';
 import { connect } from 'react-redux';
 import CommentForm from '../containers/CommentForm';
@@ -222,9 +221,9 @@ export default compose(
     comment: gql`
     fragment TalkEmbedStream_CommentBox_comment on Comment {
       __typename
-      ...${getDefinitionName(DraftArea.fragments.comment)}
+      ...${getDefinitionName(CommentForm.fragments.comment)}
     }
-    ${DraftArea.fragments.comment}
+    ${CommentForm.fragments.comment}
 `,
   })
 )(CommentBox);
diff --git a/services/comments.js b/services/comments.js
index 872f3528f..d7e151938 100644
--- a/services/comments.js
+++ b/services/comments.js
@@ -108,11 +108,11 @@ module.exports = class CommentsService {
     };
 
     const originalComment = await CommentModel.findOneAndUpdate(query, {
-      $set: {
+      $set: dotize({
         body,
         status,
-        metadata: dotize(metadata),
-      },
+        metadata,
+      }),
       $push: {
         body_history: {
           body,

From 3fd1d6705dcf1e4dfe1c743a8c9925998e866f7f Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Thu, 1 Mar 2018 11:56:35 -0300
Subject: [PATCH 44/71] fragment added

---
 client/coral-embed-stream/src/tabs/stream/containers/Comment.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 a179ba28e..b12cfbbd8 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
@@ -98,8 +98,8 @@ const singleCommentFragment = gql`
     }
     ${getSlotFragmentSpreads(slots, 'comment')}
     ...${getDefinitionName(CommentBox.fragments.comment)}
-    ${CommentBox.fragments.comment}
   }
+  ${CommentBox.fragments.comment}
 `;
 
 const withCommentFragments = withFragments({

From d1c0167e9aa69e2f082b82c4b59adf02b31c050b Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Thu, 1 Mar 2018 14:12:07 -0300
Subject: [PATCH 45/71] Simpler fragments

---
 .../routes/Moderation/components/Comment.js   |  1 +
 .../src/tabs/stream/components/Comment.js     |  2 +-
 .../src/tabs/stream/containers/Comment.js     |  3 +++
 .../src/tabs/stream/containers/CommentBox.js  | 19 +++----------------
 .../src/tabs/stream/containers/CommentForm.js | 17 +++++------------
 .../src/tabs/stream/containers/DraftArea.js   | 18 +++++++++++++-----
 .../containers/EditableCommentContent.js      | 19 +++++++------------
 .../src/tabs/stream/containers/ReplyBox.js    |  9 +++++++++
 client/coral-framework/services/client.js     |  4 +++-
 .../client/components/Editor.js               |  1 +
 .../client/index.js                           |  2 ++
 11 files changed, 48 insertions(+), 47 deletions(-)
 create mode 100644 client/coral-embed-stream/src/tabs/stream/containers/ReplyBox.js

diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js
index e79bbd2be..79da644ef 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.js
@@ -145,6 +145,7 @@ class Comment extends React.Component {
                 data={data}
                 clearHeightCache={clearHeightCache}
                 queryData={queryData}
+                slotSize={1}
               />
               <div className={styles.sideActions}>
                 <IfHasLink text={comment.body}>
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 1f6af9d87..6efddfc18 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import TagLabel from './TagLabel';
 import CommentTimestamp from 'coral-framework/components/CommentTimestamp';
 import ReplyButton from './ReplyButton';
-import ReplyBox from './ReplyBox';
+import ReplyBox from '../containers/ReplyBox';
 import FlagComment from './FlagComment';
 import { can } from 'coral-framework/services/perms';
 import { TransitionGroup } from 'react-transition-group';
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 b12cfbbd8..45468f406 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
@@ -6,6 +6,7 @@ import { getSlotFragmentSpreads } from 'coral-framework/utils';
 import { withSetCommentStatus } from 'coral-framework/graphql/mutations';
 import { getDefinitionName } from 'coral-framework/utils';
 import CommentBox from './CommentBox';
+import ReplyBox from './ReplyBox';
 import {
   THREADING_LEVEL,
   REPLY_COMMENTS_LOAD_DEPTH,
@@ -98,8 +99,10 @@ const singleCommentFragment = gql`
     }
     ${getSlotFragmentSpreads(slots, 'comment')}
     ...${getDefinitionName(CommentBox.fragments.comment)}
+    ...${getDefinitionName(ReplyBox.fragments.comment)}
   }
   ${CommentBox.fragments.comment}
+  ${ReplyBox.fragments.comment}
 `;
 
 const withCommentFragments = withFragments({
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 2b321df5a..9231254ac 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
@@ -1,8 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { gql } from 'react-apollo';
-import withFragments from 'coral-framework/hocs/withFragments';
-import { getDefinitionName } from 'coral-framework/utils';
 import t, { timeago } from 'coral-framework/services/i18n';
 import { can } from 'coral-framework/services/perms';
 import { isSuspended } from 'coral-framework/utils/user';
@@ -10,7 +7,6 @@ import Slot from 'coral-framework/components/Slot';
 import { connect } from 'react-redux';
 import CommentForm from '../containers/CommentForm';
 import { notifyForNewCommentStatus } from '../helpers';
-import { compose } from 'react-apollo';
 
 // TODO: (kiwi) Need to adapt CSS classes post refactor to match the rest.
 export const name = 'talk-commentbox';
@@ -211,19 +207,10 @@ CommentBox.propTypes = {
   tags: PropTypes.array,
 };
 
+CommentBox.fragments = CommentForm.fragments;
+
 const mapStateToProps = state => ({
   tags: state.stream.commentBoxTags,
 });
 
-export default compose(
-  connect(mapStateToProps, null),
-  withFragments({
-    comment: gql`
-    fragment TalkEmbedStream_CommentBox_comment on Comment {
-      __typename
-      ...${getDefinitionName(CommentForm.fragments.comment)}
-    }
-    ${CommentForm.fragments.comment}
-`,
-  })
-)(CommentBox);
+export default connect(mapStateToProps, null)(CommentBox);
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/CommentForm.js b/client/coral-embed-stream/src/tabs/stream/containers/CommentForm.js
index 474233e4f..263d4f955 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/CommentForm.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentForm.js
@@ -1,16 +1,9 @@
-import { gql } from 'react-apollo';
+import React from 'react';
 import CommentForm from '../components/CommentForm';
-import withFragments from 'coral-framework/hocs/withFragments';
-import { getDefinitionName } from 'coral-framework/utils';
 import DraftArea from './DraftArea';
 
-export default withFragments({
-  comment: gql`
-  fragment TalkEmbedStream_CommentForm_comment on Comment {
-    __typename
-    ...${getDefinitionName(DraftArea.fragments.comment)}
-  }
+const CommentFormContainer = props => <CommentForm {...props} />;
 
-  ${DraftArea.fragments.comment}
-`,
-})(CommentForm);
+CommentFormContainer.fragments = DraftArea.fragments;
+
+export default CommentFormContainer;
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 1dd2a9f16..f61b43d66 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
@@ -82,11 +82,19 @@ DraftAreaContainer.propTypes = {
 
 const slots = ['draftArea'];
 
+console.log('spreaded fragment', getSlotFragmentSpreads(slots, 'comment'));
+
 export default withFragments({
+  root: gql`
+    fragment TalkEmbedStream_DraftArea_root on RootQuery {
+      __typename
+      ${getSlotFragmentSpreads(slots, 'root')}
+    }
+  `,
   comment: gql`
-  fragment TalkEmbedStream_DraftArea_comment on Comment {
-    __typename
-    ${getSlotFragmentSpreads(slots, 'comment')}
-  }
-`,
+    fragment TalkEmbedStream_DraftArea_comment on Comment {
+      __typename
+      ${getSlotFragmentSpreads(slots, 'comment')}
+    }
+  `,
 })(DraftAreaContainer);
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 60cfff236..f48f3ca16 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/EditableCommentContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/EditableCommentContent.js
@@ -1,16 +1,11 @@
-import { gql } from 'react-apollo';
+import React from 'react';
 import EditableCommentContent from '../components/EditableCommentContent';
-import withFragments from 'coral-framework/hocs/withFragments';
-import { getDefinitionName } from 'coral-framework/utils';
 import CommentForm from './CommentForm';
 
-export default withFragments({
-  comment: gql`
-  fragment TalkEmbedStream_EditableCommentContent_comment on Comment {
-    __typename
-    ...${getDefinitionName(CommentForm.fragments.comment)}
-  }
+const EditableCommentContentContainer = props => (
+  <EditableCommentContent {...props} />
+);
 
-  ${CommentForm.fragments.comment}
-`,
-})(EditableCommentContent);
+EditableCommentContentContainer.fragments = CommentForm.fragments;
+
+export default EditableCommentContentContainer;
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/ReplyBox.js b/client/coral-embed-stream/src/tabs/stream/containers/ReplyBox.js
new file mode 100644
index 000000000..a5e926b1d
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/stream/containers/ReplyBox.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReplyBox from '../components/ReplyBox';
+import CommentBox from './CommentBox';
+
+const ReplyBoxContainer = props => <ReplyBox {...props} />;
+
+ReplyBoxContainer.fragments = CommentBox.fragments;
+
+export default ReplyBoxContainer;
diff --git a/client/coral-framework/services/client.js b/client/coral-framework/services/client.js
index 3f435ef03..70508bd4b 100644
--- a/client/coral-framework/services/client.js
+++ b/client/coral-framework/services/client.js
@@ -7,6 +7,7 @@ import {
   addGraphQLSubscriptions,
 } from 'subscriptions-transport-ws';
 import MessageTypes from 'subscriptions-transport-ws/dist/message-types';
+import { print } from 'graphql/language/printer';
 
 // Redux middleware to report any errors to the console.
 export const apolloErrorReporter = () => next => action => {
@@ -59,7 +60,8 @@ export function createClient(options = {}) {
         if (authToken) {
           req.options.headers['authorization'] = `Bearer ${authToken}`;
         }
-
+        // To debug queries add print(req.request.query) and import it from graphql/language/printer
+        // console.log(print(req.request.query));
         next();
       },
     },
diff --git a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
index 2faedb633..b7d7467b8 100644
--- a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
+++ b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
@@ -36,6 +36,7 @@ class Editor extends React.Component {
       },
     });
 
+    console.log('comment', this.props.comment);
     // To edit comments and have the previous html comment
     if (this.props.comment && this.props.comment.richTextBody) {
       this.ref.content.innerHTML = this.props.comment.richTextBody;
diff --git a/plugins/talk-plugin-rich-text-pell/client/index.js b/plugins/talk-plugin-rich-text-pell/client/index.js
index 55185ed6d..44cc51aca 100644
--- a/plugins/talk-plugin-rich-text-pell/client/index.js
+++ b/plugins/talk-plugin-rich-text-pell/client/index.js
@@ -6,6 +6,7 @@ export default {
   slots: {
     draftArea: [Editor],
     commentContent: [CommentContent],
+    adminCommentContent: [CommentContent],
   },
   fragments: {
     CreateCommentResponse: gql`
@@ -57,6 +58,7 @@ export default {
             fragment: editCommentFragment,
             id: fragmentId,
             data: {
+              __typename: 'Comment',
               richTextBody: edit.richTextBody,
             },
           });

From eaf403353faf7a15ec7538cd9002ca85ff8ac0d4 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Thu, 1 Mar 2018 14:16:15 -0300
Subject: [PATCH 46/71] Grab rootQuery too!

---
 .../coral-embed-stream/src/tabs/stream/containers/Comment.js | 5 +++++
 1 file changed, 5 insertions(+)

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 45468f406..4e91ce9d2 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
@@ -97,11 +97,16 @@ const singleCommentFragment = gql`
       edited
       editableUntil
     }
+    ${getSlotFragmentSpreads(slots, 'root')}
     ${getSlotFragmentSpreads(slots, 'comment')}
+    ...${getDefinitionName(CommentBox.fragments.root)}
     ...${getDefinitionName(CommentBox.fragments.comment)}
+    ...${getDefinitionName(ReplyBox.fragments.root)}
     ...${getDefinitionName(ReplyBox.fragments.comment)}
   }
+  ${CommentBox.fragments.root}
   ${CommentBox.fragments.comment}
+  ${ReplyBox.fragments.root}
   ${ReplyBox.fragments.comment}
 `;
 

From 300e518c2d38a3def6f70d7f0e076d966a49db7e Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Thu, 1 Mar 2018 14:39:25 -0300
Subject: [PATCH 47/71] Rolling back classes

---
 .../src/tabs/stream/components/DraftArea.js     | 17 ++++++++++++-----
 .../tabs/stream/components/DraftAreaContent.js  |  2 +-
 .../src/tabs/stream/containers/CommentBox.js    |  2 +-
 .../src/tabs/stream/containers/DraftArea.js     |  2 --
 test/e2e/page_objects/embedStream.js            |  4 ++--
 5 files changed, 16 insertions(+), 11 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 9f62b38a5..728f90237 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
@@ -14,10 +14,15 @@ import styles from './DraftArea.css';
 export default class DraftArea extends React.Component {
   renderCharCount() {
     const { value, maxCharCount } = this.props;
-    const className = cn(styles.charCount, 'talk-commentbox-char-count', {
-      [`${styles.charMax} talk-commentbox-char-max`]:
-        value.length > maxCharCount,
-    });
+
+    const className = cn(
+      styles.charCount,
+      'talk-plugin-commentbox-char-count',
+      {
+        [`${styles.charMax} talk-plugin-commentbox-char-max`]:
+          value.length > maxCharCount,
+      }
+    );
     const remaining = maxCharCount - value.length;
 
     return (
@@ -52,7 +57,9 @@ export default class DraftArea extends React.Component {
 
     return (
       <div>
-        <div className={cn(styles.container, 'talk-commentbox-container')}>
+        <div
+          className={cn(styles.container, 'talk-plugin-commentbox-container')}
+        >
           <label htmlFor={id} className="screen-reader-text" aria-hidden={true}>
             {label}
           </label>
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 0cc62912d..50a481f6f 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
@@ -12,7 +12,7 @@ const DraftAreaContent = ({
   disabled,
 }) => (
   <textarea
-    className={cn(styles.content, 'talk-commentbox-textarea')}
+    className={cn(styles.content, 'talk-plugin-commentbox-textarea')}
     value={value}
     placeholder={placeholder}
     id={id}
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 9231254ac..c64fe525d 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
@@ -9,7 +9,7 @@ import CommentForm from '../containers/CommentForm';
 import { notifyForNewCommentStatus } from '../helpers';
 
 // TODO: (kiwi) Need to adapt CSS classes post refactor to match the rest.
-export const name = 'talk-commentbox';
+export const name = 'talk-plugin-commentbox';
 
 /**
  * Container for posting a new Comment
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 f61b43d66..561019115 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
@@ -82,8 +82,6 @@ DraftAreaContainer.propTypes = {
 
 const slots = ['draftArea'];
 
-console.log('spreaded fragment', getSlotFragmentSpreads(slots, 'comment'));
-
 export default withFragments({
   root: gql`
     fragment TalkEmbedStream_DraftArea_root on RootQuery {
diff --git a/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js
index ae0240125..fab864987 100644
--- a/test/e2e/page_objects/embedStream.js
+++ b/test/e2e/page_objects/embedStream.js
@@ -97,8 +97,8 @@ module.exports = {
       elements: {
         logoutButton: '.talk-stream-userbox-logout',
         signInButton: '#coralSignInButton',
-        commentBoxTextarea: '.talk-commentbox-textarea',
-        commentBoxPostButton: '.talk-commentbox-button',
+        commentBoxTextarea: '.talk-plugin-commentbox-textarea',
+        commentBoxPostButton: '.talk-plugin-commentbox-button',
         firstComment: '.talk-stream-comment.talk-stream-comment-level-0',
         firstCommentContent:
           '.talk-stream-comment.talk-stream-comment-level-0 .talk-stream-comment-content',

From e055a3e4d4c07855f241c60c06c41b9f6d329791 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Thu, 1 Mar 2018 16:39:58 -0300
Subject: [PATCH 48/71] Adding rootquery support

---
 .../src/tabs/stream/containers/Comment.js                | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

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 4e91ce9d2..e5d42a86e 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
@@ -97,16 +97,11 @@ const singleCommentFragment = gql`
       edited
       editableUntil
     }
-    ${getSlotFragmentSpreads(slots, 'root')}
     ${getSlotFragmentSpreads(slots, 'comment')}
-    ...${getDefinitionName(CommentBox.fragments.root)}
     ...${getDefinitionName(CommentBox.fragments.comment)}
-    ...${getDefinitionName(ReplyBox.fragments.root)}
     ...${getDefinitionName(ReplyBox.fragments.comment)}
   }
-  ${CommentBox.fragments.root}
   ${CommentBox.fragments.comment}
-  ${ReplyBox.fragments.root}
   ${ReplyBox.fragments.comment}
 `;
 
@@ -119,7 +114,11 @@ const withCommentFragments = withFragments({
         }
       }
       ${getSlotFragmentSpreads(slots, 'root')}
+      ...${getDefinitionName(CommentBox.fragments.root)}
+      ...${getDefinitionName(ReplyBox.fragments.root)}
     }
+    ${CommentBox.fragments.root}
+    ${ReplyBox.fragments.root}
     `,
   asset: gql`
     fragment CoralEmbedStream_Comment_asset on Asset {

From 0055c821669482255fed05c42a82a39bee500b40 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Thu, 1 Mar 2018 16:47:15 -0300
Subject: [PATCH 49/71] Passing the comment down until we reach the queryData

---
 .../coral-embed-stream/src/tabs/stream/components/Comment.js  | 1 +
 .../src/tabs/stream/components/CommentForm.js                 | 3 +++
 .../coral-embed-stream/src/tabs/stream/components/ReplyBox.js | 3 +++
 .../src/tabs/stream/containers/CommentBox.js                  | 4 +++-
 .../talk-plugin-rich-text-pell/client/components/Editor.js    | 1 -
 5 files changed, 10 insertions(+), 2 deletions(-)

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 6efddfc18..f17e7adec 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
@@ -661,6 +661,7 @@ export default class Comment extends React.Component {
 
         {activeReplyBox === comment.id ? (
           <ReplyBox
+            comment={comment}
             commentPostedHandler={this.commentPostedHandler}
             charCountEnable={charCountEnable}
             maxCharCount={maxCharCount}
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 8055d3d1c..ed4bfb602 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
@@ -50,6 +50,7 @@ class CommentForm extends React.Component {
     onCancel: PropTypes.func,
     state: PropTypes.string,
     loadingState: PropTypes.oneOf(['', 'loading', 'success', 'error']),
+    comment: PropTypes.object,
   };
   static get defaultProps() {
     return {
@@ -87,6 +88,7 @@ class CommentForm extends React.Component {
       charCountEnable,
       body,
       loadingState,
+      comment,
     } = this.props;
 
     const length = body.length;
@@ -104,6 +106,7 @@ class CommentForm extends React.Component {
     return (
       <div>
         <DraftArea
+          comment={comment}
           id={this.props.bodyInputId}
           label={this.props.bodyLabel}
           value={body}
diff --git a/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.js b/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.js
index 12d074fdd..9260ad0cc 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.js
@@ -27,10 +27,12 @@ class ReplyBox extends React.Component {
       commentPostedHandler,
       maxCharCount,
       charCountEnable,
+      comment,
     } = this.props;
     return (
       <div className={cn(styles.container, `${name}-textarea`)}>
         <CommentBox
+          comment={comment}
           maxCharCount={maxCharCount}
           charCountEnable={charCountEnable}
           commentPostedHandler={commentPostedHandler}
@@ -48,6 +50,7 @@ class ReplyBox extends React.Component {
 }
 
 ReplyBox.propTypes = {
+  comment: PropTypes.object,
   charCountEnable: PropTypes.bool.isRequired,
   maxCharCount: PropTypes.number,
   setActiveReplyBox: PropTypes.func.isRequired,
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 c64fe525d..a59ba2806 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
@@ -146,7 +146,7 @@ class CommentBox extends React.Component {
   };
 
   render() {
-    const { isReply, maxCharCount, assetId, parentId } = this.props;
+    const { isReply, maxCharCount, assetId, parentId, comment } = this.props;
     let { onCancel } = this.props;
 
     if (isReply && typeof onCancel !== 'function') {
@@ -164,6 +164,7 @@ class CommentBox extends React.Component {
     return (
       <div>
         <CommentForm
+          comment={comment}
           defaultValue={this.props.defaultValue}
           bodyLabel={isReply ? t('comment_box.reply') : t('comment.comment')}
           maxCharCount={maxCharCount}
@@ -205,6 +206,7 @@ CommentBox.propTypes = {
   canPost: PropTypes.bool,
   notify: PropTypes.func.isRequired,
   tags: PropTypes.array,
+  comment: PropTypes.object,
 };
 
 CommentBox.fragments = CommentForm.fragments;
diff --git a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
index b7d7467b8..2faedb633 100644
--- a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
+++ b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
@@ -36,7 +36,6 @@ class Editor extends React.Component {
       },
     });
 
-    console.log('comment', this.props.comment);
     // To edit comments and have the previous html comment
     if (this.props.comment && this.props.comment.richTextBody) {
       this.ref.content.innerHTML = this.props.comment.richTextBody;

From 8192a3bfc41fdbaac19bec17bff23ef37494c341 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Thu, 1 Mar 2018 18:38:14 -0300
Subject: [PATCH 50/71] CommentContent added to the admin side

---
 .../routes/Moderation/components/Comment.css  |  7 ++++-
 .../routes/Moderation/components/Comment.js   | 28 +++++++++++--------
 .../stream/components/DraftAreaContent.css    |  1 +
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.css b/client/coral-admin/src/routes/Moderation/components/Comment.css
index b0d989c54..3c6f1a350 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.css
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.css
@@ -133,7 +133,6 @@
   color: #063b9a;
   cursor: pointer;
   font-weight: normal;
-  margin-left: 10px;
   white-space: nowrap;
 
   &:hover {
@@ -184,3 +183,9 @@
     }
   }
 }
+
+.commentContent {
+  height: 100%;
+  flex: 1;
+  display: flex;
+}
\ No newline at end of file
diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js
index 79da644ef..864e6631a 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.js
@@ -64,6 +64,12 @@ class Comment extends React.Component {
     const selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
     const queryData = { root, comment, asset: comment.asset };
 
+    const formatterSettings = {
+      suspectWords: settings.wordlist.suspect,
+      bannedWords: settings.wordlist.banned,
+      body: comment.body,
+    };
+
     return (
       <li
         tabIndex={0}
@@ -126,11 +132,15 @@ class Comment extends React.Component {
           <CommentAnimatedEdit body={comment.body}>
             <div className={styles.itemBody}>
               <div className={styles.body}>
-                <CommentFormatter
-                  suspectWords={settings.wordlist.suspect}
-                  bannedWords={settings.wordlist.banned}
-                  className="talk-admin-comment"
-                  body={comment.body}
+                <Slot
+                  fill="adminCommentContent"
+                  data={data}
+                  className={cn(styles.commentContent, 'talk-admin-comment')}
+                  clearHeightCache={clearHeightCache}
+                  queryData={queryData}
+                  slotSize={1}
+                  defaultComponent={CommentFormatter}
+                  {...formatterSettings}
                 />
                 <a
                   className={styles.external}
@@ -140,13 +150,7 @@ class Comment extends React.Component {
                   <Icon name="open_in_new" /> {t('comment.view_context')}
                 </a>
               </div>
-              <Slot
-                fill="adminCommentContent"
-                data={data}
-                clearHeightCache={clearHeightCache}
-                queryData={queryData}
-                slotSize={1}
-              />
+
               <div className={styles.sideActions}>
                 <IfHasLink text={comment.body}>
                   <span className={styles.hasLinks}>
diff --git a/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.css b/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.css
index 9de435aea..a1a79dd4b 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.css
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.css
@@ -8,4 +8,5 @@
   border: 1px solid #9E9E9E;
   width: 100%;
   box-sizing: border-box;
+  height: 100%;
 }
\ No newline at end of file

From bc273d16f72d4cf7ab06aa2f9cb4f7664a4342af Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Thu, 1 Mar 2018 19:43:54 -0300
Subject: [PATCH 51/71] hook to clear text after submiting a comment

---
 .../src/tabs/stream/components/CommentForm.js      |  6 ++++++
 .../src/tabs/stream/components/DraftArea.js        |  7 +++++++
 .../src/tabs/stream/containers/CommentBox.js       | 11 +++++++++--
 .../src/tabs/stream/containers/DraftArea.js        |  6 ++++++
 .../client/components/CheckSpamHook.js             |  4 ++--
 .../client/components/Editor.js                    | 14 ++++++++++++++
 6 files changed, 44 insertions(+), 4 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 ed4bfb602..b4f636f46 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
@@ -51,6 +51,9 @@ class CommentForm extends React.Component {
     state: PropTypes.string,
     loadingState: PropTypes.oneOf(['', 'loading', 'success', 'error']),
     comment: PropTypes.object,
+    registerHook: PropTypes.func,
+    unregisterHook: PropTypes.func,
+    isReply: PropTypes.bool,
   };
   static get defaultProps() {
     return {
@@ -115,6 +118,9 @@ class CommentForm extends React.Component {
           disabled={disableTextArea}
           charCountEnable={this.props.charCountEnable}
           maxCharCount={this.props.maxCharCount}
+          registerHook={this.props.registerHook}
+          unregisterHook={this.props.unregisterHook}
+          isReply={this.props.isReply}
         />
         <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 728f90237..202349370 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
@@ -44,6 +44,7 @@ export default class DraftArea extends React.Component {
       maxCharCount,
       onChange,
       queryData,
+      isReply,
     } = this.props;
 
     const tASettings = {
@@ -53,6 +54,7 @@ export default class DraftArea extends React.Component {
       onChange,
       rows,
       disabled,
+      isReply,
     };
 
     return (
@@ -68,6 +70,8 @@ export default class DraftArea extends React.Component {
             defaultComponent={DraftAreaContent}
             className={styles.content}
             queryData={queryData}
+            registerHook={this.props.registerHook}
+            unregisterHook={this.props.unregisterHook}
             {...tASettings}
           />
           <Slot fill="commentInputArea" />
@@ -93,4 +97,7 @@ DraftArea.propTypes = {
   disabled: PropTypes.bool,
   rows: PropTypes.number,
   queryData: PropTypes.object.isRequired,
+  registerHook: PropTypes.func,
+  unregisterHook: PropTypes.func,
+  isReply: PropTypes.bool,
 };
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 a59ba2806..4495aab33 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
@@ -65,7 +65,9 @@ class CommentBox extends React.Component {
     };
 
     // Execute preSubmit Hooks
-    this.state.hooks.preSubmit.forEach(hook => hook(input));
+    this.state.hooks.preSubmit.forEach(hook =>
+      hook(input, this.handleBodyChange)
+    );
     this.setState({ loadingState: 'loading' });
 
     postComment(input, 'comments')
@@ -75,7 +77,9 @@ class CommentBox extends React.Component {
         const actions = data.createComment.actions;
 
         // Execute postSubmit Hooks
-        this.state.hooks.postSubmit.forEach(hook => hook(data));
+        this.state.hooks.postSubmit.forEach(hook =>
+          hook(data, this.handleBodyChange)
+        );
 
         notifyForNewCommentStatus(notify, postedComment.status, actions);
 
@@ -172,6 +176,9 @@ class CommentBox extends React.Component {
           bodyPlaceholder={t('comment.comment')}
           bodyInputId={id}
           body={this.state.body}
+          registerHook={this.registerHook}
+          unregisterHook={this.unregisterHook}
+          isReply={isReply}
           buttonContainerStart={
             <Slot
               fill="commentInputDetailArea"
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 561019115..bb020f0fa 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
@@ -56,6 +56,9 @@ class DraftAreaContainer extends React.Component {
         charCountEnable={this.props.charCountEnable}
         maxCharCount={this.props.maxCharCount}
         label={this.props.label}
+        registerHook={this.props.registerHook}
+        unregisterHook={this.props.unregisterHook}
+        isReply={this.props.isReply}
       />
     );
   }
@@ -78,6 +81,9 @@ DraftAreaContainer.propTypes = {
   rows: PropTypes.number,
   label: PropTypes.string.isRequired,
   comment: PropTypes.object,
+  registerHook: PropTypes.func,
+  unregisterHook: PropTypes.func,
+  isReply: PropTypes.bool,
 };
 
 const slots = ['draftArea'];
diff --git a/plugins/talk-plugin-akismet/client/components/CheckSpamHook.js b/plugins/talk-plugin-akismet/client/components/CheckSpamHook.js
index 58eeac11f..056f28eef 100644
--- a/plugins/talk-plugin-akismet/client/components/CheckSpamHook.js
+++ b/plugins/talk-plugin-akismet/client/components/CheckSpamHook.js
@@ -49,6 +49,6 @@ export default class CheckSpamHook extends React.Component {
 
 CheckSpamHook.propTypes = {
   notify: PropTypes.func.isRequired,
-  registerHook: PropTypes.func.isRequired,
-  unregisterHook: PropTypes.func.isRequired,
+  registerHook: PropTypes.func,
+  unregisterHook: PropTypes.func,
 };
diff --git a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
index 2faedb633..29121d4b6 100644
--- a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
+++ b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
@@ -40,6 +40,18 @@ class Editor extends React.Component {
     if (this.props.comment && this.props.comment.richTextBody) {
       this.ref.content.innerHTML = this.props.comment.richTextBody;
     }
+
+    this.clearInputHook = this.props.registerHook(
+      'postSubmit',
+      (res, handleBodyChange) => {
+        this.ref.content.innerHTML = '';
+        handleBodyChange('', { richTextBody: '' });
+      }
+    );
+  }
+
+  componentWillUnmount() {
+    this.props.unregisterHook(this.clearInputHook);
   }
 
   render() {
@@ -85,6 +97,8 @@ Editor.propTypes = {
   comment: PropTypes.object,
   classNames: PropTypes.object,
   actions: PropTypes.array,
+  registerHook: PropTypes.func,
+  unregisterHook: PropTypes.func,
 };
 
 export default Editor;

From 11b98370b612bdcb9f81187ea232e14f85e6e4d0 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Thu, 1 Mar 2018 19:59:02 -0300
Subject: [PATCH 52/71] hook handler

---
 .../client/components/Editor.js               | 20 ++++++++++---------
 .../client/components/CheckToxicityHook.js    |  4 ++--
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
index 29121d4b6..33b122f09 100644
--- a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
+++ b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
@@ -11,7 +11,7 @@ class Editor extends React.Component {
   handleRef = ref => (this.ref = ref);
 
   componentDidMount() {
-    const { onChange, actions, classNames } = this.props;
+    const { onChange, actions, classNames, isReply } = this.props;
 
     init({
       element: this.ref,
@@ -37,17 +37,19 @@ class Editor extends React.Component {
     });
 
     // To edit comments and have the previous html comment
-    if (this.props.comment && this.props.comment.richTextBody) {
+    if (this.props.comment && this.props.comment.richTextBody && !isReply) {
       this.ref.content.innerHTML = this.props.comment.richTextBody;
     }
 
-    this.clearInputHook = this.props.registerHook(
-      'postSubmit',
-      (res, handleBodyChange) => {
-        this.ref.content.innerHTML = '';
-        handleBodyChange('', { richTextBody: '' });
-      }
-    );
+    if (this.props.registerHook) {
+      this.clearInputHook = this.props.registerHook(
+        'postSubmit',
+        (res, handleBodyChange) => {
+          this.ref.content.innerHTML = '';
+          handleBodyChange('', { richTextBody: '' });
+        }
+      );
+    }
   }
 
   componentWillUnmount() {
diff --git a/plugins/talk-plugin-toxic-comments/client/components/CheckToxicityHook.js b/plugins/talk-plugin-toxic-comments/client/components/CheckToxicityHook.js
index 528960310..4331e006b 100644
--- a/plugins/talk-plugin-toxic-comments/client/components/CheckToxicityHook.js
+++ b/plugins/talk-plugin-toxic-comments/client/components/CheckToxicityHook.js
@@ -49,6 +49,6 @@ export default class CheckToxicityHook extends React.Component {
 
 CheckToxicityHook.propTypes = {
   notify: PropTypes.func.isRequired,
-  registerHook: PropTypes.func.isRequired,
-  unregisterHook: PropTypes.func.isRequired,
+  registerHook: PropTypes.func,
+  unregisterHook: PropTypes.func,
 };

From 1d31099c9d0fba3feb027815a18f895663037a0f Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 5 Mar 2018 08:49:59 -0300
Subject: [PATCH 53/71] Passing down root data

---
 .../src/tabs/stream/components/CommentForm.js         |  5 ++++-
 .../src/tabs/stream/components/ReplyBox.js            |  5 ++++-
 .../src/tabs/stream/components/Stream.js              |  1 +
 .../src/tabs/stream/containers/CommentBox.js          | 11 ++++++++++-
 .../src/tabs/stream/containers/DraftArea.js           |  5 +++--
 yarn.lock                                             |  8 +-------
 6 files changed, 23 insertions(+), 12 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 b4f636f46..65937b3ce 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
@@ -50,10 +50,11 @@ class CommentForm extends React.Component {
     onCancel: PropTypes.func,
     state: PropTypes.string,
     loadingState: PropTypes.oneOf(['', 'loading', 'success', 'error']),
-    comment: PropTypes.object,
     registerHook: PropTypes.func,
     unregisterHook: PropTypes.func,
     isReply: PropTypes.bool,
+    root: PropTypes.object.isRequired,
+    comment: PropTypes.object,
   };
   static get defaultProps() {
     return {
@@ -92,6 +93,7 @@ class CommentForm extends React.Component {
       body,
       loadingState,
       comment,
+      root,
     } = this.props;
 
     const length = body.length;
@@ -109,6 +111,7 @@ class CommentForm extends React.Component {
     return (
       <div>
         <DraftArea
+          root={root}
           comment={comment}
           id={this.props.bodyInputId}
           label={this.props.bodyLabel}
diff --git a/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.js b/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.js
index 9260ad0cc..1a993601a 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/ReplyBox.js
@@ -28,10 +28,12 @@ class ReplyBox extends React.Component {
       maxCharCount,
       charCountEnable,
       comment,
+      root,
     } = this.props;
     return (
       <div className={cn(styles.container, `${name}-textarea`)}>
         <CommentBox
+          root={root}
           comment={comment}
           maxCharCount={maxCharCount}
           charCountEnable={charCountEnable}
@@ -50,7 +52,6 @@ class ReplyBox extends React.Component {
 }
 
 ReplyBox.propTypes = {
-  comment: PropTypes.object,
   charCountEnable: PropTypes.bool.isRequired,
   maxCharCount: PropTypes.number,
   setActiveReplyBox: PropTypes.func.isRequired,
@@ -61,6 +62,8 @@ ReplyBox.propTypes = {
   assetId: PropTypes.string.isRequired,
   currentUser: PropTypes.object,
   styles: PropTypes.object,
+  root: PropTypes.object.isRequired,
+  comment: PropTypes.object,
 };
 
 export default ReplyBox;
diff --git a/client/coral-embed-stream/src/tabs/stream/components/Stream.js b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
index c8a304214..adcc4aae8 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
@@ -286,6 +286,7 @@ class Stream extends React.Component {
             {banned && <BannedAccount />}
             {showCommentBox && (
               <CommentBox
+                root={root}
                 notify={notify}
                 postComment={postComment}
                 appendItemArray={appendItemArray}
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 4495aab33..480bc234a 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js
@@ -150,7 +150,14 @@ class CommentBox extends React.Component {
   };
 
   render() {
-    const { isReply, maxCharCount, assetId, parentId, comment } = this.props;
+    const {
+      isReply,
+      maxCharCount,
+      assetId,
+      parentId,
+      comment,
+      root,
+    } = this.props;
     let { onCancel } = this.props;
 
     if (isReply && typeof onCancel !== 'function') {
@@ -168,6 +175,7 @@ class CommentBox extends React.Component {
     return (
       <div>
         <CommentForm
+          root={root}
           comment={comment}
           defaultValue={this.props.defaultValue}
           bodyLabel={isReply ? t('comment_box.reply') : t('comment.comment')}
@@ -213,6 +221,7 @@ CommentBox.propTypes = {
   canPost: PropTypes.bool,
   notify: PropTypes.func.isRequired,
   tags: PropTypes.array,
+  root: PropTypes.object.isRequired,
   comment: PropTypes.object,
 };
 
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 bb020f0fa..47338fc8c 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js
@@ -42,7 +42,7 @@ class DraftAreaContainer extends React.Component {
   }
 
   render() {
-    const queryData = { comment: this.props.comment };
+    const queryData = { comment: this.props.comment, root: this.props.root };
 
     return (
       <DraftArea
@@ -80,10 +80,11 @@ DraftAreaContainer.propTypes = {
   disabled: PropTypes.bool,
   rows: PropTypes.number,
   label: PropTypes.string.isRequired,
-  comment: PropTypes.object,
   registerHook: PropTypes.func,
   unregisterHook: PropTypes.func,
   isReply: PropTypes.bool,
+  root: PropTypes.object.isRequired,
+  comment: PropTypes.object,
 };
 
 const slots = ['draftArea'];
diff --git a/yarn.lock b/yarn.lock
index 5d44cf687..82531d523 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5655,7 +5655,7 @@ jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
 
-jsdom@^11.3.0, jsdom@^11.5.1, jsdom@^11.6.2:
+jsdom@^11.5.1, jsdom@^11.6.2:
   version "11.6.2"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.6.2.tgz#25d1ef332d48adf77fc5221fe2619967923f16bb"
   dependencies:
@@ -10413,12 +10413,6 @@ tunnel-agent@~0.4.1:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
 
-turndown@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/turndown/-/turndown-4.0.1.tgz#1383dd01ac8d96fa106a7f13e0b0a7977588131a"
-  dependencies:
-    jsdom "^11.3.0"
-
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"

From 87ea7b5dae15e81be134f7acc0611da5464dd732 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 5 Mar 2018 12:56:36 -0300
Subject: [PATCH 54/71] Merge issues

---
 .gitignore                                    | 10 +--
 .../src/tabs/stream/components/Comment.js     | 63 ++-----------------
 .../components/EditableCommentContent.js      |  3 +-
 services/comments.js                          | 18 +-----
 4 files changed, 10 insertions(+), 84 deletions(-)

diff --git a/.gitignore b/.gitignore
index b7a79b2bd..a6630d22e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -56,16 +56,10 @@ plugins/*
 !plugins/talk-plugin-sort-newest
 !plugins/talk-plugin-sort-oldest
 !plugins/talk-plugin-subscriber
-<<<<<<< HEAD
-!plugins/talk-plugin-flag-details
-!plugins/talk-plugin-slack-notifications
-!plugins/talk-plugin-rich-text
-!plugins/talk-plugin-rich-text-pell
-!plugins/talk-plugin-profile-settings
-=======
 !plugins/talk-plugin-toxic-comments
 !plugins/talk-plugin-viewing-options
->>>>>>> 8d147dbf47104cdcfb8c3bc2ebb02b6c73c7b8ab
+!plugins/talk-plugin-rich-text
+!plugins/talk-plugin-rich-text-pell
 
 **/node_modules/*
 yarn-error.log
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 acd791ba4..c495b54f9 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
@@ -372,9 +372,12 @@ export default class Comment extends React.Component {
       maxCharCount,
       notify,
       charCountEnable,
+      root,
     } = this.props;
     return (
       <ReplyBox
+        root={root}
+        comment={comment}
         commentPostedHandler={this.commentPostedHandler}
         charCountEnable={charCountEnable}
         maxCharCount={maxCharCount}
@@ -648,6 +651,7 @@ export default class Comment extends React.Component {
               <EditableCommentContent
                 editComment={this.editComment}
                 notify={notify}
+                root={root}
                 comment={comment}
                 currentUser={currentUser}
                 charCountEnable={charCountEnable}
@@ -720,64 +724,6 @@ export default class Comment extends React.Component {
     );
   }
 
-<<<<<<< HEAD
-        {activeReplyBox === comment.id ? (
-          <ReplyBox
-            comment={comment}
-            commentPostedHandler={this.commentPostedHandler}
-            charCountEnable={charCountEnable}
-            maxCharCount={maxCharCount}
-            setActiveReplyBox={setActiveReplyBox}
-            parentId={depth < THREADING_LEVEL ? comment.id : parentId}
-            notify={notify}
-            postComment={postComment}
-            currentUser={currentUser}
-            assetId={asset.id}
-          />
-        ) : null}
-
-        <TransitionGroup>
-          {view.map(reply => {
-            return (
-              <CommentContainer
-                data={this.props.data}
-                root={this.props.root}
-                setActiveReplyBox={setActiveReplyBox}
-                disableReply={disableReply}
-                activeReplyBox={activeReplyBox}
-                notify={notify}
-                parentId={comment.id}
-                postComment={postComment}
-                editComment={this.props.editComment}
-                depth={depth + 1}
-                asset={asset}
-                highlighted={highlighted}
-                currentUser={currentUser}
-                postFlag={postFlag}
-                deleteAction={deleteAction}
-                loadMore={loadMore}
-                charCountEnable={charCountEnable}
-                maxCharCount={maxCharCount}
-                showSignInDialog={showSignInDialog}
-                liveUpdates={liveUpdates}
-                reactKey={reply.id}
-                key={reply.id}
-                comment={reply}
-                emit={emit}
-              />
-            );
-          })}
-        </TransitionGroup>
-        <div className="talk-load-more-replies">
-          <LoadMore
-            topLevel={false}
-            replyCount={moreRepliesCount}
-            moreComments={hasMoreComments}
-            loadMore={this.loadNewReplies}
-            loadingState={loadingState}
-          />
-        </div>
-=======
   render() {
     const {
       depth,
@@ -813,7 +759,6 @@ export default class Comment extends React.Component {
         {this.renderComment()}
         {activeReplyBox === comment.id && this.renderReplyBox()}
         {this.renderRepliesContainer()}
->>>>>>> 8d147dbf47104cdcfb8c3bc2ebb02b6c73c7b8ab
       </div>
     );
   }
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 5917dfc54..5e3e97382 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
@@ -18,7 +18,7 @@ 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,
@@ -140,6 +140,7 @@ class EditableCommentContent extends React.Component {
     return (
       <div className={styles.editCommentForm}>
         <CommentForm
+          root={this.props.root}
           comment={this.props.comment}
           defaultValue={this.props.comment.body}
           bodyInputId={id}
diff --git a/services/comments.js b/services/comments.js
index 43cd5c259..391c5412f 100644
--- a/services/comments.js
+++ b/services/comments.js
@@ -1,16 +1,11 @@
 const CommentModel = require('../models/comment');
-
+const { dotize } = require('./utils');
 const debug = require('debug')('talk:services:comments');
 const SettingsService = require('./settings');
 
 const cloneDeep = require('lodash/cloneDeep');
 const errors = require('../errors');
 const merge = require('lodash/merge');
-<<<<<<< HEAD
-const { dotize } = require('./utils');
-const { COMMENTS_NEW, COMMENTS_EDIT } = require('./events/constants');
-=======
->>>>>>> 8d147dbf47104cdcfb8c3bc2ebb02b6c73c7b8ab
 
 const incrReplyCount = async (comment, value) => {
   try {
@@ -86,11 +81,7 @@ module.exports = {
    * @param {String} body       the new Comment body
    * @param {String} status     the new Comment status
    */
-<<<<<<< HEAD
-  static async edit({ id, author_id, body, status, metadata = {} }) {
-=======
-  edit: async ({ id, author_id, body, status }) => {
->>>>>>> 8d147dbf47104cdcfb8c3bc2ebb02b6c73c7b8ab
+  edit: async ({ id, author_id, body, status, metadata = {} }) => {
     const EDITABLE_STATUSES = ['NONE', 'PREMOD', 'ACCEPTED'];
     const created_at = new Date();
 
@@ -177,13 +168,8 @@ module.exports = {
       created_at,
     });
 
-<<<<<<< HEAD
     editedComment.metadata = metadata;
 
-    await events.emitAsync(COMMENTS_EDIT, originalComment, editedComment);
-
-=======
->>>>>>> 8d147dbf47104cdcfb8c3bc2ebb02b6c73c7b8ab
     return editedComment;
   },
 

From 515867bf144aa7ea4c67d5e27bec4b8c06cde20c Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 5 Mar 2018 13:00:29 -0300
Subject: [PATCH 55/71] quotes styling

---
 .../src/routes/Moderation/components/Comment.css            | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.css b/client/coral-admin/src/routes/Moderation/components/Comment.css
index 3c6f1a350..f2f123438 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.css
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.css
@@ -188,4 +188,10 @@
   height: 100%;
   flex: 1;
   display: flex;
+
+  blockquote {
+    font-size: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+  }
 }
\ No newline at end of file

From a1f6800d99976bc64e4c9dbd7bbad5623b016977 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 5 Mar 2018 17:45:56 +0100
Subject: [PATCH 56/71] Fix file name casing

---
 .../talk-plugin-rich-text/server/{DOMpurify.js => DOMPurify.js}   | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename plugins/talk-plugin-rich-text/server/{DOMpurify.js => DOMPurify.js} (100%)

diff --git a/plugins/talk-plugin-rich-text/server/DOMpurify.js b/plugins/talk-plugin-rich-text/server/DOMPurify.js
similarity index 100%
rename from plugins/talk-plugin-rich-text/server/DOMpurify.js
rename to plugins/talk-plugin-rich-text/server/DOMPurify.js

From 7962df6983c932f5d7f07bcc71f31b3a8df3670d Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 5 Mar 2018 14:14:22 -0300
Subject: [PATCH 57/71] adding br to the purifier

---
 plugins/talk-plugin-rich-text/server/config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/talk-plugin-rich-text/server/config.js b/plugins/talk-plugin-rich-text/server/config.js
index 42c6bd756..8d0fc87d3 100644
--- a/plugins/talk-plugin-rich-text/server/config.js
+++ b/plugins/talk-plugin-rich-text/server/config.js
@@ -13,7 +13,7 @@ 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'] },
+  dompurify: { ALLOWED_TAGS: ['b', 'i', 'blockquote', 'br'] },
 
   // Secure config for jsdom even when DOMPurify creates a document without a browsing context
   jsdom: {

From 95da5697fc0d7c87ff09f988fe318be27bf1d533 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 5 Mar 2018 14:29:19 -0300
Subject: [PATCH 58/71] Adding styles

---
 .../src/routes/Moderation/components/Comment.css |  8 +++++---
 .../src/routes/Moderation/components/Comment.js  | 16 +++++++++-------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.css b/client/coral-admin/src/routes/Moderation/components/Comment.css
index f2f123438..2dc03a503 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.css
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.css
@@ -72,9 +72,9 @@
   flex: 1;
   color: black;
   max-width: 500px;
-  word-wrap: break-word;
   font-weight: 300;
   font-size: 16px;
+  word-break: break-all;
 }
 
 .created {
@@ -185,8 +185,6 @@
 }
 
 .commentContent {
-  height: 100%;
-  flex: 1;
   display: flex;
 
   blockquote {
@@ -194,4 +192,8 @@
     line-height: inherit;
     letter-spacing: inherit;
   }
+}
+
+.commentContentFooter {
+  flex: 1;
 }
\ No newline at end of file
diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js
index 864e6631a..f865908b2 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.js
@@ -142,13 +142,15 @@ class Comment extends React.Component {
                   defaultComponent={CommentFormatter}
                   {...formatterSettings}
                 />
-                <a
-                  className={styles.external}
-                  href={`${comment.asset.url}?commentId=${comment.id}`}
-                  target="_blank"
-                >
-                  <Icon name="open_in_new" /> {t('comment.view_context')}
-                </a>
+                <div className={styles.commentContentFooter}>
+                  <a
+                    className={styles.external}
+                    href={`${comment.asset.url}?commentId=${comment.id}`}
+                    target="_blank"
+                  >
+                    <Icon name="open_in_new" /> {t('comment.view_context')}
+                  </a>
+                </div>
               </div>
 
               <div className={styles.sideActions}>

From 284598439da8045f5b9d4a0f5d2f02ebe73cca58 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 5 Mar 2018 14:40:51 -0300
Subject: [PATCH 59/71]  adding slot userDetailCommentContent

---
 .../src/components/UserDetailComment.js       | 28 ++++++++++++++-----
 .../client/index.js                           |  1 +
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/client/coral-admin/src/components/UserDetailComment.js b/client/coral-admin/src/components/UserDetailComment.js
index 2d98edcb3..ba185a9df 100644
--- a/client/coral-admin/src/components/UserDetailComment.js
+++ b/client/coral-admin/src/components/UserDetailComment.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Slot from 'coral-framework/components/Slot';
 import { Link } from 'react-router';
-
 import { Icon } from 'coral-ui';
 import CommentDetails from './CommentDetails';
 import styles from './UserDetailComment.css';
@@ -33,9 +33,17 @@ class UserDetailComment extends React.Component {
       toggleSelect,
       className,
       data,
-      root: { settings: { wordlist: { banned, suspect } } },
+      root: { settings },
     } = this.props;
 
+    const queryData = { root, comment };
+
+    const formatterSettings = {
+      suspectWords: settings.wordlist.suspect,
+      bannedWords: settings.wordlist.banned,
+      body: comment.body,
+    };
+
     return (
       <li
         tabIndex={0}
@@ -78,11 +86,17 @@ class UserDetailComment extends React.Component {
           <CommentAnimatedEdit body={comment.body}>
             <div className={styles.bodyContainer}>
               <div className={styles.body}>
-                <CommentFormatter
-                  suspectWords={suspect}
-                  bannedWords={banned}
-                  body={comment.body}
-                  className="talk-admin-user-detail-comment"
+                <Slot
+                  fill="userDetailCommentContent"
+                  data={data}
+                  className={cn(
+                    styles.commentContent,
+                    'talk-admin-user-detail-comment'
+                  )}
+                  queryData={queryData}
+                  slotSize={1}
+                  defaultComponent={CommentFormatter}
+                  {...formatterSettings}
                 />
                 <a
                   className={styles.external}
diff --git a/plugins/talk-plugin-rich-text-pell/client/index.js b/plugins/talk-plugin-rich-text-pell/client/index.js
index 44cc51aca..cf9eb11cd 100644
--- a/plugins/talk-plugin-rich-text-pell/client/index.js
+++ b/plugins/talk-plugin-rich-text-pell/client/index.js
@@ -7,6 +7,7 @@ export default {
     draftArea: [Editor],
     commentContent: [CommentContent],
     adminCommentContent: [CommentContent],
+    userDetailCommentContent: [CommentContent],
   },
   fragments: {
     CreateCommentResponse: gql`

From dcddfa4f394151dbb00f10c5e831607c43a7a04f Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 5 Mar 2018 14:46:09 -0300
Subject: [PATCH 60/71] Adding fragments to the slot

---
 client/coral-admin/src/containers/UserDetailComment.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/coral-admin/src/containers/UserDetailComment.js b/client/coral-admin/src/containers/UserDetailComment.js
index f9534fdf1..490e7a890 100644
--- a/client/coral-admin/src/containers/UserDetailComment.js
+++ b/client/coral-admin/src/containers/UserDetailComment.js
@@ -4,6 +4,9 @@ import withFragments from 'coral-framework/hocs/withFragments';
 import { getDefinitionName } from 'coral-framework/utils';
 import CommentLabels from './CommentLabels';
 import CommentDetails from './CommentDetails';
+import { getSlotFragmentSpreads } from 'coral-framework/utils';
+
+const slots = ['draftArea'];
 
 export default withFragments({
   root: gql`
@@ -38,6 +41,7 @@ export default withFragments({
       status_history {
         type
       }
+      ${getSlotFragmentSpreads(slots, 'comment')}
       ...${getDefinitionName(CommentLabels.fragments.comment)}
       ...${getDefinitionName(CommentDetails.fragments.comment)}
     }

From 0f58c1b780b60fdcc4911aa1743ea5429aa60f7b Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 5 Mar 2018 14:46:47 -0300
Subject: [PATCH 61/71] Adding fragments to the slot

---
 client/coral-admin/src/containers/UserDetailComment.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-admin/src/containers/UserDetailComment.js b/client/coral-admin/src/containers/UserDetailComment.js
index 490e7a890..a31992205 100644
--- a/client/coral-admin/src/containers/UserDetailComment.js
+++ b/client/coral-admin/src/containers/UserDetailComment.js
@@ -6,7 +6,7 @@ import CommentLabels from './CommentLabels';
 import CommentDetails from './CommentDetails';
 import { getSlotFragmentSpreads } from 'coral-framework/utils';
 
-const slots = ['draftArea'];
+const slots = ['userDetailCommentContent'];
 
 export default withFragments({
   root: gql`

From be62a2780cff2e25f25f1d844983a7ad4809fe89 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 5 Mar 2018 14:48:32 -0300
Subject: [PATCH 62/71] normalized blockquote

---
 client/coral-admin/src/components/UserDetailComment.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/client/coral-admin/src/components/UserDetailComment.css b/client/coral-admin/src/components/UserDetailComment.css
index 75b968625..71cc19640 100644
--- a/client/coral-admin/src/components/UserDetailComment.css
+++ b/client/coral-admin/src/components/UserDetailComment.css
@@ -78,6 +78,12 @@
   font-weight: 300;
   font-size: 16px;
   max-width: 360px;
+
+  blockquote {
+    font-size: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+  }
 }
 
 .sideActions {

From a749a13786e9958b72463ffb256fc1934eb585dc Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Mon, 5 Mar 2018 11:53:52 -0700
Subject: [PATCH 63/71] Scrape Asset GraphQL Mutation

- Adds support for force scraping the asset via a GraphQL mutation.
---
 graph/mutators/asset.js          | 14 ++++++++++++++
 graph/resolvers/root_mutation.js |  3 +++
 graph/typeDefs.graphql           |  9 +++++++++
 3 files changed, 26 insertions(+)

diff --git a/graph/mutators/asset.js b/graph/mutators/asset.js
index 6524331e1..3d018658e 100644
--- a/graph/mutators/asset.js
+++ b/graph/mutators/asset.js
@@ -56,12 +56,25 @@ const closeNow = async (ctx, id) =>
     }
   );
 
+/**
+ * scrapeAsset will force scrape an asset.
+ *
+ * @param {Object} ctx graphql context
+ * @param {String} id the asset's id to scrape
+ */
+const scrapeAsset = async (ctx, id) => {
+  const { services: { Scraper } } = ctx;
+
+  return Scraper.create({ id });
+};
+
 module.exports = ctx => {
   let mutators = {
     Asset: {
       updateSettings: () => Promise.reject(errors.ErrNotAuthorized),
       updateStatus: () => Promise.reject(errors.ErrNotAuthorized),
       closeNow: () => Promise.reject(errors.ErrNotAuthorized),
+      scrape: () => Promise.reject(errors.ErrNotAuthorized),
     },
   };
 
@@ -75,6 +88,7 @@ module.exports = ctx => {
       mutators.Asset.updateStatus = (id, status) =>
         updateStatus(ctx, id, status);
       mutators.Asset.closeNow = id => closeNow(ctx, id);
+      mutators.Asset.scrape = id => scrapeAsset(ctx, id);
     }
   }
 
diff --git a/graph/resolvers/root_mutation.js b/graph/resolvers/root_mutation.js
index 8a638f589..e27d217fe 100644
--- a/graph/resolvers/root_mutation.js
+++ b/graph/resolvers/root_mutation.js
@@ -133,6 +133,9 @@ const RootMutation = {
   revokeToken: async (_, { input }, { mutators: { Token } }) => {
     await Token.revoke(input);
   },
+  forceScrapeAsset: async (_, { id }, { mutators: { Asset } }) => {
+    await Asset.scrape(id);
+  },
 };
 
 module.exports = RootMutation;
diff --git a/graph/typeDefs.graphql b/graph/typeDefs.graphql
index f108a7ad4..2b62eaaf6 100644
--- a/graph/typeDefs.graphql
+++ b/graph/typeDefs.graphql
@@ -1395,6 +1395,12 @@ type SetUserRoleResponse implements Response {
   errors: [UserError!]
 }
 
+type ForceScrapeAssetResponse implements Response {
+
+  # An array of errors relating to the mutation that occurred.
+  errors: [UserError!]
+}
+
 # All mutations for the application are defined on this object.
 type RootMutation {
 
@@ -1489,6 +1495,9 @@ type RootMutation {
 
   # Stop Ignoring comments by another user.
   stopIgnoringUser(id: ID!): StopIgnoringUserResponse
+
+  # forceScrapeAsset will force scrape the Asset with the given ID.
+  forceScrapeAsset(id: ID!): ForceScrapeAssetResponse
 }
 
 type UsernameChangedPayload {

From 930ff603c313a54bc1215a6e240705dbea0c00c9 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 5 Mar 2018 17:00:30 -0300
Subject: [PATCH 64/71] Metadata override

---
 services/comments.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/comments.js b/services/comments.js
index 391c5412f..a1f59c1e1 100644
--- a/services/comments.js
+++ b/services/comments.js
@@ -168,7 +168,7 @@ module.exports = {
       created_at,
     });
 
-    editedComment.metadata = metadata;
+    editedComment.metadata = merge(editedComment.metadata, metadata);
 
     return editedComment;
   },

From d26e2a328f8395252f4c54f1cefa00a3524232ac Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 5 Mar 2018 17:49:05 -0300
Subject: [PATCH 65/71] html and content editable normalizer

---
 .../client/components/Editor.js                        |  4 +++-
 plugins/talk-plugin-rich-text-pell/client/utils.js     | 10 ++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 plugins/talk-plugin-rich-text-pell/client/utils.js

diff --git a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
index 33b122f09..c129e146d 100644
--- a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
+++ b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js
@@ -4,6 +4,7 @@ import { init } from 'pell';
 import styles from './Editor.css';
 import cn from 'classnames';
 import { pluginName } from '../../package.json';
+import { htmlNormalizer } from '../utils';
 
 class Editor extends React.Component {
   ref = null;
@@ -18,7 +19,7 @@ class Editor extends React.Component {
       onChange: richTextBody => {
         // We want to save the original comment body
         const originalBody = this.ref.childNodes[1].innerText;
-        onChange(originalBody, { richTextBody });
+        onChange(originalBody, { richTextBody: htmlNormalizer(richTextBody) });
       },
       actions,
       classes: {
@@ -101,6 +102,7 @@ Editor.propTypes = {
   actions: PropTypes.array,
   registerHook: PropTypes.func,
   unregisterHook: PropTypes.func,
+  isReply: PropTypes.bool,
 };
 
 export default Editor;
diff --git a/plugins/talk-plugin-rich-text-pell/client/utils.js b/plugins/talk-plugin-rich-text-pell/client/utils.js
new file mode 100644
index 000000000..e00b7a91c
--- /dev/null
+++ b/plugins/talk-plugin-rich-text-pell/client/utils.js
@@ -0,0 +1,10 @@
+export function htmlNormalizer(htmlInput) {
+  const 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
+  return str
+    .replace('<p>', '<div>') // IE outputs <p> instead of <div>s
+    .replace('</p>', '</div>') // IE outputs <p> instead of <div>s
+    .replace('<div>', '<br>')
+    .replace('</div>', '');
+}

From 4320263bcc2794976f4586cf87b2d66f600ba62c Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Mon, 5 Mar 2018 17:55:56 -0300
Subject: [PATCH 66/71] Add regext to test multiline strings

---
 plugins/talk-plugin-rich-text-pell/client/utils.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/plugins/talk-plugin-rich-text-pell/client/utils.js b/plugins/talk-plugin-rich-text-pell/client/utils.js
index e00b7a91c..bb71c2b4f 100644
--- a/plugins/talk-plugin-rich-text-pell/client/utils.js
+++ b/plugins/talk-plugin-rich-text-pell/client/utils.js
@@ -2,9 +2,10 @@ export function htmlNormalizer(htmlInput) {
   const 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
+  console.log(htmlInput);
   return str
-    .replace('<p>', '<div>') // IE outputs <p> instead of <div>s
-    .replace('</p>', '</div>') // IE outputs <p> instead of <div>s
-    .replace('<div>', '<br>')
-    .replace('</div>', '');
+    .replace(/<p>/g, '<br>')
+    .replace(/<\/p>/g, '')
+    .replace(/<div>/g, '<br>')
+    .replace(/<\/div>/g, '');
 }

From f50b3f365db1dbb14701a0ceac1250f1e9c0cec3 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 5 Mar 2018 22:02:58 +0100
Subject: [PATCH 67/71] Prevent unintended initial empty line

---
 .../client/utils.js                           | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/plugins/talk-plugin-rich-text-pell/client/utils.js b/plugins/talk-plugin-rich-text-pell/client/utils.js
index bb71c2b4f..6155fbfb2 100644
--- a/plugins/talk-plugin-rich-text-pell/client/utils.js
+++ b/plugins/talk-plugin-rich-text-pell/client/utils.js
@@ -1,11 +1,20 @@
 export function htmlNormalizer(htmlInput) {
-  const str = 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
-  console.log(htmlInput);
-  return str
-    .replace(/<p>/g, '<br>')
-    .replace(/<\/p>/g, '')
-    .replace(/<div>/g, '<br>')
-    .replace(/<\/div>/g, '');
+
+  // 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
+
+  // 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, '');
 }

From 090920131fcd801acb948518ca861b91cdd911e5 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 5 Mar 2018 22:24:35 +0100
Subject: [PATCH 68/71] Attach root fragment

---
 client/coral-admin/src/containers/UserDetailComment.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/coral-admin/src/containers/UserDetailComment.js b/client/coral-admin/src/containers/UserDetailComment.js
index a31992205..4661f3236 100644
--- a/client/coral-admin/src/containers/UserDetailComment.js
+++ b/client/coral-admin/src/containers/UserDetailComment.js
@@ -17,6 +17,7 @@ export default withFragments({
           suspect
         }
       }
+      ${getSlotFragmentSpreads(slots, 'root')}
       ...${getDefinitionName(CommentLabels.fragments.root)}
       ...${getDefinitionName(CommentDetails.fragments.root)}
     }

From 62cdf4988f1c6ce7cb00b220b3d1a22eb0078e99 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 5 Mar 2018 22:27:55 +0100
Subject: [PATCH 69/71] Remove unused line

---
 client/coral-framework/services/client.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/coral-framework/services/client.js b/client/coral-framework/services/client.js
index 70508bd4b..e7cf692d8 100644
--- a/client/coral-framework/services/client.js
+++ b/client/coral-framework/services/client.js
@@ -7,7 +7,6 @@ import {
   addGraphQLSubscriptions,
 } from 'subscriptions-transport-ws';
 import MessageTypes from 'subscriptions-transport-ws/dist/message-types';
-import { print } from 'graphql/language/printer';
 
 // Redux middleware to report any errors to the console.
 export const apolloErrorReporter = () => next => action => {

From 09dcca27a85d9040a23acd41d47ce73a4dcde156 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Mon, 5 Mar 2018 17:06:44 -0700
Subject: [PATCH 70/71] added revision hash

---
 Dockerfile             |  4 ++++
 config.js              |  4 ++++
 routes/api/v1/index.js |  5 +++--
 scripts/docker.sh      | 13 ++++++++++---
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 4d0fea440..0b7c8caa4 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -15,6 +15,10 @@ COPY . /usr/src/app
 # Ensure the runtime of the container is in production mode.
 ENV NODE_ENV production
 
+# Store the current git revision.
+ARG REVISION_HASH
+ENV REVISION_HASH=${REVISION_HASH}
+
 # Install app dependencies and build static assets.
 RUN yarn global add node-gyp && \
     yarn install --frozen-lockfile && \
diff --git a/config.js b/config.js
index 956e7ac8f..b24c5dfc9 100644
--- a/config.js
+++ b/config.js
@@ -55,6 +55,10 @@ const CONFIG = {
     ? process.env.TALK_LOGGING_LEVEL
     : 'info',
 
+  // REVISION_HASH when using the docker build will contain the build hash that
+  // it was built at.
+  REVISION_HASH: process.env.REVISION_HASH,
+
   //------------------------------------------------------------------------------
   // JWT based configuration
   //------------------------------------------------------------------------------
diff --git a/routes/api/v1/index.js b/routes/api/v1/index.js
index e331d09d8..46d5c0278 100644
--- a/routes/api/v1/index.js
+++ b/routes/api/v1/index.js
@@ -1,10 +1,11 @@
 const express = require('express');
-const pkg = require('../../../package.json');
+const { version } = require('../../../package.json');
+const { REVISION_HASH } = require('../../../config');
 const router = express.Router();
 
 // Return the current version.
 router.get('/', (req, res) => {
-  res.json({ version: pkg.version });
+  res.json({ version, revision: REVISION_HASH });
 });
 
 router.use('/account', require('./account'));
diff --git a/scripts/docker.sh b/scripts/docker.sh
index f11aeb208..dc5759e5e 100755
--- a/scripts/docker.sh
+++ b/scripts/docker.sh
@@ -54,9 +54,16 @@ deploy_branch() {
   docker push coralproject/talk:$CIRCLE_BRANCH-onbuild
 }
 
+ARGS=""
+
+if [[ -n "$CIRCLE_SHA1" ]]
+then
+  ARGS="--build-arg REVISION_HASH=${CIRCLE_SHA1}"
+fi
+
 # build the repo, including the onbuild tagged versions.
-docker build -t coralproject/talk:latest -f Dockerfile .
-docker build -t coralproject/talk:latest-onbuild -f Dockerfile.onbuild .
+docker build -t coralproject/talk:latest ${ARGS} -f Dockerfile .
+docker build -t coralproject/talk:latest-onbuild ${ARGS} -f Dockerfile.onbuild .
 
 if [ "$1" = "deploy" ]
 then
@@ -80,4 +87,4 @@ then
       deploy_branch
     fi
   fi
-fi
\ No newline at end of file
+fi

From 005602a738c67542252731a094442afa6b49156a Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 6 Mar 2018 11:03:58 -0700
Subject: [PATCH 71/71] Standardized metadata

---
 graph/mutators/comment.js        | 7 +++++--
 graph/resolvers/root_mutation.js | 4 ++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/graph/mutators/comment.js b/graph/mutators/comment.js
index 3773a8dde..f63951812 100644
--- a/graph/mutators/comment.js
+++ b/graph/mutators/comment.js
@@ -277,7 +277,10 @@ const setStatus = async (ctx, { id, status }) => {
  * @param {Object} edit       describes how to edit the comment
  * @param {String} edit.body  the new Comment body
  */
-const edit = async (ctx, { id, asset_id, edit: { body, metadata = {} } }) => {
+const editComment = async (
+  ctx,
+  { id, asset_id, edit: { body, metadata = {} } }
+) => {
   const { connectors: { services: { Moderation } } } = ctx;
 
   // Build up the new comment we're setting. We need to check this with
@@ -324,7 +327,7 @@ module.exports = ctx => {
   }
 
   if (ctx.user && ctx.user.can(EDIT_COMMENT)) {
-    mutators.Comment.edit = action => edit(ctx, action);
+    mutators.Comment.edit = action => editComment(ctx, action);
   }
 
   return mutators;
diff --git a/graph/resolvers/root_mutation.js b/graph/resolvers/root_mutation.js
index ef583e06c..de2161a9e 100644
--- a/graph/resolvers/root_mutation.js
+++ b/graph/resolvers/root_mutation.js
@@ -13,10 +13,10 @@ const RootMutation = {
   },
   editComment: async (
     _,
-    { id, asset_id, edit: { body, metadata } },
+    { id, asset_id, edit },
     { mutators: { Comment } }
   ) => ({
-    comment: await Comment.edit({ id, asset_id, edit: { body, metadata } }),
+    comment: await Comment.edit({ id, asset_id, edit }),
   }),
   createFlag: async (
     _,