From 0b95b2f8264f3382e3d84a920f51d3a88c1fc180 Mon Sep 17 00:00:00 2001
From: thinkholic <mailtokasun@gmail.com>
Date: Mon, 10 Oct 2016 14:11:07 +0530
Subject: [PATCH 01/12] replace text input with textarea and prevet shift+enter
 submit

---
 src/manager/components/CommentForm/index.js | 10 ++++++----
 src/manager/components/CommentForm/style.js |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/manager/components/CommentForm/index.js b/src/manager/components/CommentForm/index.js
index 516301fca826..10bf69169fb0 100644
--- a/src/manager/components/CommentForm/index.js
+++ b/src/manager/components/CommentForm/index.js
@@ -25,7 +25,7 @@ export default class CommentForm extends Component {
   }
 
   onKeyUp(e) {
-    if (e.key === 'Enter') {
+    if (e.key === 'Enter' && !e.shiftKey) {
       this.onSubmit();
     }
   }
@@ -37,7 +37,8 @@ export default class CommentForm extends Component {
       return;
     }
     const time = Date.now();
-    addComment({ text, time, userId: user.id });
+    const processedText = text.replace(/\r?\n/g, '<br />');
+    addComment({ text: processedText, time, userId: user.id });
     this.setState({ text: '' });
   }
 
@@ -50,13 +51,14 @@ export default class CommentForm extends Component {
           onClick={this.onLogin}
           >{this.getUsername()}
         </button>
-        <input
+        <textarea
           style={style.input}
           onChange={this.onChange}
           onKeyUp={this.onKeyUp}
           placeholder="Your comment..."
           value={text}
-        />
+        >
+        </textarea>
         <button
           style={style.submitButton}
           onClick={this.onSubmit}
diff --git a/src/manager/components/CommentForm/style.js b/src/manager/components/CommentForm/style.js
index 9eeb1d619906..36ffc51b3338 100644
--- a/src/manager/components/CommentForm/style.js
+++ b/src/manager/components/CommentForm/style.js
@@ -31,7 +31,7 @@ export default {
     height: 30,
     border: 'none',
     outline: 'none',
-    padding: '7px 15px',
+    padding: '9px 11px',
     fontSize: 12,
     lineHeight: 1,
     color: 'rgba(0, 0, 0, 0.8)',

From 6b14437c2ed4166390270e389a52d6d67809bb50 Mon Sep 17 00:00:00 2001
From: thinkholic <mailtokasun@gmail.com>
Date: Mon, 10 Oct 2016 14:24:15 +0530
Subject: [PATCH 02/12] install react-render-html NPM

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

diff --git a/package.json b/package.json
index eb18f1fcd00c..7920cbed75fa 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "babel-preset-stage-0": "^6.5.0",
     "react": "^15.3.1",
     "react-dom": "^15.3.1",
+    "react-render-html": "^0.1.6",
     "shelljs": "^0.7.4"
   },
   "peerDependencies": {

From 341aba5383063739ad88f0b76443a6ba3492636e Mon Sep 17 00:00:00 2001
From: thinkholic <mailtokasun@gmail.com>
Date: Mon, 10 Oct 2016 14:24:51 +0530
Subject: [PATCH 03/12] render html comments in comments list

---
 src/manager/components/CommentList/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/manager/components/CommentList/index.js b/src/manager/components/CommentList/index.js
index faa6fe90a3e7..98163ada2130 100644
--- a/src/manager/components/CommentList/index.js
+++ b/src/manager/components/CommentList/index.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import renderHTML from 'react-render-html';
 import style from './style';
 
 export default class CommentList extends Component {
@@ -51,7 +52,7 @@ export default class CommentList extends Component {
             <span style={style.commentUser}>{user.name}</span>
             <span style={style.commentTime}>{this.formatTime(comment.time)}</span>
           </div>
-          <span style={style.commentText}>{comment.text}</span>
+          <span style={style.commentText}>{ renderHTML(`<span>${comment.text}</span>`) }</span>
         </div>
       </div>
     );

From f20b5c530eb812ac089673e98a08c3835ed13f58 Mon Sep 17 00:00:00 2001
From: Arunoda Susiripala <arunoda.susiripala@gmail.com>
Date: Mon, 10 Oct 2016 18:16:04 +0530
Subject: [PATCH 04/12] Change some styles.

---
 src/manager/components/CommentForm/index.js | 18 +++++-------------
 src/manager/components/CommentForm/style.js |  4 ++--
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/src/manager/components/CommentForm/index.js b/src/manager/components/CommentForm/index.js
index 902272a3f5ef..b04d581a043d 100644
--- a/src/manager/components/CommentForm/index.js
+++ b/src/manager/components/CommentForm/index.js
@@ -5,10 +5,6 @@ export default class CommentForm extends Component {
   constructor(props, ...args) {
     super(props, ...args);
     this.state = { text: '' };
-    // bind functions so it can be passed later
-    this.onChange = this.onChange.bind(this);
-    this.onKeyUp = this.onKeyUp.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
   }
 
   onChange(e) {
@@ -16,8 +12,9 @@ export default class CommentForm extends Component {
     this.setState({ text });
   }
 
-  onKeyUp(e) {
+  handleKeyDown(e) {
     if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
       this.onSubmit();
     }
   }
@@ -38,22 +35,17 @@ export default class CommentForm extends Component {
     const { text } = this.state;
     return (
       <div style={style.wrapper}>
-        <button
-          style={style.loginButton}
-          onClick={this.onLogin}
-          >{this.getUsername()}
-        </button>
         <textarea
           style={style.input}
-          onChange={this.onChange}
-          onKeyUp={this.onKeyUp}
+          onChange={e => this.onChange(e)}
+          onKeyDown={e => this.handleKeyDown(e)}
           placeholder="Add your comment..."
           value={text}
         >
         </textarea>
         <button
           style={style.submitButton}
-          onClick={this.onSubmit}
+          onClick={() => this.onSubmit()}
         >Submit
         </button>
       </div>
diff --git a/src/manager/components/CommentForm/style.js b/src/manager/components/CommentForm/style.js
index d070758e06bb..82d381afc05f 100644
--- a/src/manager/components/CommentForm/style.js
+++ b/src/manager/components/CommentForm/style.js
@@ -31,9 +31,9 @@ export default {
     height: 30,
     border: 'none',
     outline: 'none',
-    padding: '9px 11px',
+    padding: '5px 10px',
     fontSize: 13,
-    lineHeight: 1.7,
+    lineHeight: 1.6,
     color: 'rgba(0, 0, 0, 0.8)',
     fontFamily: 'sans-serif',
   },

From cdcd48c6a3bf8998f258eed2e6ef55d170ef87d3 Mon Sep 17 00:00:00 2001
From: thinkholic <mailtokasun@gmail.com>
Date: Tue, 11 Oct 2016 11:40:23 +0530
Subject: [PATCH 05/12] install react-textarea-autosize NPM

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

diff --git a/package.json b/package.json
index 7f51dd8595dd..548310d85f38 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "react": "^15.3.1",
     "react-dom": "^15.3.1",
     "react-render-html": "^0.1.6",
+    "react-textarea-autosize": "^4.0.5",
     "shelljs": "^0.7.4"
   },
   "peerDependencies": {

From 44b1e6e5a56f419a36a61d85ce87fea69f08bdc6 Mon Sep 17 00:00:00 2001
From: thinkholic <mailtokasun@gmail.com>
Date: Tue, 11 Oct 2016 11:41:23 +0530
Subject: [PATCH 06/12] use react-textarea-autosize instead of textarea input

---
 src/manager/components/CommentForm/index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/manager/components/CommentForm/index.js b/src/manager/components/CommentForm/index.js
index b04d581a043d..b34ebc99dbfa 100644
--- a/src/manager/components/CommentForm/index.js
+++ b/src/manager/components/CommentForm/index.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import Textarea from 'react-textarea-autosize';
 import style from './style';
 
 export default class CommentForm extends Component {
@@ -35,14 +36,14 @@ export default class CommentForm extends Component {
     const { text } = this.state;
     return (
       <div style={style.wrapper}>
-        <textarea
+        <Textarea
           style={style.input}
           onChange={e => this.onChange(e)}
           onKeyDown={e => this.handleKeyDown(e)}
           placeholder="Add your comment..."
           value={text}
         >
-        </textarea>
+        </Textarea>
         <button
           style={style.submitButton}
           onClick={() => this.onSubmit()}

From 184f12d50b3670ff9435556ed14487b085b97e30 Mon Sep 17 00:00:00 2001
From: thinkholic <mailtokasun@gmail.com>
Date: Tue, 11 Oct 2016 11:41:40 +0530
Subject: [PATCH 07/12] set max-height for textarea

---
 src/manager/components/CommentForm/style.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/manager/components/CommentForm/style.js b/src/manager/components/CommentForm/style.js
index 82d381afc05f..d478605d8311 100644
--- a/src/manager/components/CommentForm/style.js
+++ b/src/manager/components/CommentForm/style.js
@@ -29,6 +29,7 @@ export default {
     flex: 1,
     boxSizing: 'border-box',
     height: 30,
+    maxHeight: 70,
     border: 'none',
     outline: 'none',
     padding: '5px 10px',

From ccc0ae355ee06ae3fed4c888238c68846ae45be0 Mon Sep 17 00:00:00 2001
From: thinkholic <mailtokasun@gmail.com>
Date: Tue, 11 Oct 2016 12:59:31 +0530
Subject: [PATCH 08/12] fix submit button align issue

---
 src/manager/components/CommentForm/style.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/manager/components/CommentForm/style.js b/src/manager/components/CommentForm/style.js
index d478605d8311..8552770eafb0 100644
--- a/src/manager/components/CommentForm/style.js
+++ b/src/manager/components/CommentForm/style.js
@@ -13,7 +13,7 @@ const button = {
 export default {
   wrapper: {
     display: 'flex',
-    alignItems: 'center',
+    alignItems: 'flex-start',
     borderTop: '1px solid rgb(234, 234, 234)',
   },
   loginButton: {

From 2cb9994c2c84c67ea37290b162830184fbf6587a Mon Sep 17 00:00:00 2001
From: Arunoda Susiripala <arunoda.susiripala@gmail.com>
Date: Tue, 11 Oct 2016 13:08:44 +0530
Subject: [PATCH 09/12] Prevent manual resizing the comment box.

---
 src/manager/components/CommentForm/style.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/manager/components/CommentForm/style.js b/src/manager/components/CommentForm/style.js
index 8552770eafb0..7624d59a0e3a 100644
--- a/src/manager/components/CommentForm/style.js
+++ b/src/manager/components/CommentForm/style.js
@@ -37,5 +37,6 @@ export default {
     lineHeight: 1.6,
     color: 'rgba(0, 0, 0, 0.8)',
     fontFamily: 'sans-serif',
+    resize: 'none',
   },
 }

From 6fc4d326b6e2825034d8d9ad0cc1ba24cbc09823 Mon Sep 17 00:00:00 2001
From: thinkholic <mailtokasun@gmail.com>
Date: Tue, 11 Oct 2016 14:05:05 +0530
Subject: [PATCH 10/12] change button height relatively textarea height

---
 src/manager/components/CommentForm/index.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/manager/components/CommentForm/index.js b/src/manager/components/CommentForm/index.js
index b34ebc99dbfa..a7c2984a99eb 100644
--- a/src/manager/components/CommentForm/index.js
+++ b/src/manager/components/CommentForm/index.js
@@ -20,6 +20,11 @@ export default class CommentForm extends Component {
     }
   }
 
+  handleTextareaResize() {
+    const commentBoxHeight = this.refs.commentBox.state.height;
+    this.refs.submitBtn.style.height = `${(commentBoxHeight < 71) ? commentBoxHeight : 70}px`; 
+  }
+
   onSubmit() {
     const { addComment } = this.props;
     const text = this.state.text.trim();
@@ -37,14 +42,17 @@ export default class CommentForm extends Component {
     return (
       <div style={style.wrapper}>
         <Textarea
+          ref="commentBox"
           style={style.input}
           onChange={e => this.onChange(e)}
           onKeyDown={e => this.handleKeyDown(e)}
+          onKeyUp={e => this.handleTextareaResize(e)}
           placeholder="Add your comment..."
           value={text}
         >
         </Textarea>
         <button
+          ref="submitBtn"
           style={style.submitButton}
           onClick={() => this.onSubmit()}
         >Submit

From 03267cf0498396d5ebc5d3221f51f750833f900f Mon Sep 17 00:00:00 2001
From: thinkholic <mailtokasun@gmail.com>
Date: Tue, 11 Oct 2016 14:37:10 +0530
Subject: [PATCH 11/12] change button height view with css

---
 src/manager/components/CommentForm/index.js | 7 +------
 src/manager/components/CommentForm/style.js | 4 ++--
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/manager/components/CommentForm/index.js b/src/manager/components/CommentForm/index.js
index a7c2984a99eb..a4acc91b29d3 100644
--- a/src/manager/components/CommentForm/index.js
+++ b/src/manager/components/CommentForm/index.js
@@ -20,11 +20,6 @@ export default class CommentForm extends Component {
     }
   }
 
-  handleTextareaResize() {
-    const commentBoxHeight = this.refs.commentBox.state.height;
-    this.refs.submitBtn.style.height = `${(commentBoxHeight < 71) ? commentBoxHeight : 70}px`; 
-  }
-
   onSubmit() {
     const { addComment } = this.props;
     const text = this.state.text.trim();
@@ -35,6 +30,7 @@ export default class CommentForm extends Component {
     const processedText = text.replace(/\r?\n/g, '<br />');
     addComment(processedText);
     this.setState({ text: '' });
+    this.forceUpdate();
   }
 
   render() {
@@ -46,7 +42,6 @@ export default class CommentForm extends Component {
           style={style.input}
           onChange={e => this.onChange(e)}
           onKeyDown={e => this.handleKeyDown(e)}
-          onKeyUp={e => this.handleTextareaResize(e)}
           placeholder="Add your comment..."
           value={text}
         >
diff --git a/src/manager/components/CommentForm/style.js b/src/manager/components/CommentForm/style.js
index 7624d59a0e3a..fc3a3a675a63 100644
--- a/src/manager/components/CommentForm/style.js
+++ b/src/manager/components/CommentForm/style.js
@@ -13,8 +13,9 @@ const button = {
 export default {
   wrapper: {
     display: 'flex',
-    alignItems: 'flex-start',
+    alignItems: 'center',
     borderTop: '1px solid rgb(234, 234, 234)',
+    backgroundColor: '#fafafa',
   },
   loginButton: {
     ...button,
@@ -23,7 +24,6 @@ export default {
   },
   submitButton: {
     ...button,
-    borderLeft: '1px solid rgb(234, 234, 234)',
   },
   input: {
     flex: 1,

From 4fae6ecbfd4edacead28a9c84b7495e7c2c1b825 Mon Sep 17 00:00:00 2001
From: thinkholic <mailtokasun@gmail.com>
Date: Tue, 11 Oct 2016 14:43:26 +0530
Subject: [PATCH 12/12] change the cursor icon on submit button

---
 src/manager/components/CommentForm/style.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/manager/components/CommentForm/style.js b/src/manager/components/CommentForm/style.js
index fc3a3a675a63..a691f0610e92 100644
--- a/src/manager/components/CommentForm/style.js
+++ b/src/manager/components/CommentForm/style.js
@@ -24,6 +24,7 @@ export default {
   },
   submitButton: {
     ...button,
+    cursor: 'pointer',
   },
   input: {
     flex: 1,