From 65f7ee2ab3ef3cdcd1d7baec3bab33067b2eae6f Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 12 Jun 2017 19:09:42 -0300
Subject: [PATCH] coral-plugin-commnet-content

---
 .eslintignore                                 |  1 +
 .gitignore                                    |  1 +
 .../src/components/Comment.js                 |  4 +---
 .../CommentContent.js                         | 17 --------------
 .../__tests__/commentContent.spec.js          | 11 ---------
 client/coral-plugin-history/Comment.js        |  7 +++---
 .../client/components/CreateUsernameDialog.js |  2 +-
 .../client/components/FakeComment.js          |  8 +++----
 .../client/.babelrc                           | 14 +++++++++++
 .../client/.eslintrc.json                     | 23 +++++++++++++++++++
 .../client/components/CommentContent.js       | 23 +++++++++++++++++++
 .../client/components/Link.js                 | 13 +++++++++++
 .../client/components/styles.css              |  8 +++++++
 .../client/helpers/isLink.js                  |  5 ++++
 .../client/index.js                           |  7 ++++++
 plugins/coral-plugin-comment-content/index.js |  1 +
 16 files changed, 106 insertions(+), 39 deletions(-)
 delete mode 100644 client/coral-plugin-commentcontent/CommentContent.js
 delete mode 100644 client/coral-plugin-commentcontent/__tests__/commentContent.spec.js
 create mode 100644 plugins/coral-plugin-comment-content/client/.babelrc
 create mode 100644 plugins/coral-plugin-comment-content/client/.eslintrc.json
 create mode 100644 plugins/coral-plugin-comment-content/client/components/CommentContent.js
 create mode 100644 plugins/coral-plugin-comment-content/client/components/Link.js
 create mode 100644 plugins/coral-plugin-comment-content/client/components/styles.css
 create mode 100644 plugins/coral-plugin-comment-content/client/helpers/isLink.js
 create mode 100644 plugins/coral-plugin-comment-content/client/index.js
 create mode 100644 plugins/coral-plugin-comment-content/index.js

diff --git a/.eslintignore b/.eslintignore
index 6fecd9d9b..8a8c3a213 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -11,4 +11,5 @@ plugins/*
 !plugins/coral-plugin-mod
 !plugins/coral-plugin-love
 !plugins/coral-plugin-viewing-options
+!plugins/coral-plugin-comment-content
 node_modules
diff --git a/.gitignore b/.gitignore
index abd490356..b3e0eaa73 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,5 +24,6 @@ plugins/*
 !plugins/coral-plugin-mod
 !plugins/coral-plugin-love
 !plugins/coral-plugin-viewing-options
+!plugins/coral-plugin-comment-content
 
 **/node_modules/*
diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js
index 92c59d936..82befeb2a 100644
--- a/client/coral-embed-stream/src/components/Comment.js
+++ b/client/coral-embed-stream/src/components/Comment.js
@@ -3,7 +3,6 @@ import React, {PropTypes} from 'react';
 import PermalinkButton from 'coral-plugin-permalinks/PermalinkButton';
 import AuthorName from 'coral-plugin-author-name/AuthorName';
 import TagLabel from 'coral-plugin-tag-label/TagLabel';
-import Content from 'coral-plugin-commentcontent/CommentContent';
 import PubDate from 'coral-plugin-pubdate/PubDate';
 import {ReplyBox, ReplyButton} from 'coral-plugin-replies';
 import FlagComment from 'coral-plugin-flags/FlagComment';
@@ -466,8 +465,7 @@ export default class Comment extends React.Component {
                 stopEditing={this.stopEditing}
                 />
             : <div>
-                <Content body={comment.body} />
-                <Slot fill="commentContent" />
+                <Slot fill="commentContent" comment={comment} />
               </div>
           }
 
diff --git a/client/coral-plugin-commentcontent/CommentContent.js b/client/coral-plugin-commentcontent/CommentContent.js
deleted file mode 100644
index 501005b3d..000000000
--- a/client/coral-plugin-commentcontent/CommentContent.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-const name = 'coral-plugin-commentcontent';
-
-const Content = ({body, styles}) => {
-  const textbreaks = body.split('\n');
-  return <div
-    className={`${name}-text`}
-    style={styles && styles.text}>
-    {
-      textbreaks.map((line, i) => <span key={i} className={`${name}-line`}>
-        {line} <br className={`${name}-linebreak`}/>
-      </span>)
-    }
-  </div>;
-};
-
-export default Content;
diff --git a/client/coral-plugin-commentcontent/__tests__/commentContent.spec.js b/client/coral-plugin-commentcontent/__tests__/commentContent.spec.js
deleted file mode 100644
index 377726b6d..000000000
--- a/client/coral-plugin-commentcontent/__tests__/commentContent.spec.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import {shallow} from 'enzyme';
-import {expect} from 'chai';
-import CommentContent from '../CommentContent';
-
-describe('CommentContent', () => {
-  it('should render content', () => {
-    const render = shallow(<CommentContent content="test"/>);
-    expect(render.contains('test')).to.be.truthy;
-  });
-});
diff --git a/client/coral-plugin-history/Comment.js b/client/coral-plugin-history/Comment.js
index cb188e53e..d85b7fb1c 100644
--- a/client/coral-plugin-history/Comment.js
+++ b/client/coral-plugin-history/Comment.js
@@ -1,8 +1,8 @@
 import React, {PropTypes} from 'react';
 import {Icon} from '../coral-ui';
 import styles from './Comment.css';
+import Slot from 'coral-framework/components/Slot';
 import PubDate from '../coral-plugin-pubdate/PubDate';
-import Content from '../coral-plugin-commentcontent/CommentContent';
 
 import t from 'coral-framework/services/i18n';
 
@@ -10,9 +10,10 @@ const Comment = (props) => {
   return (
     <div className={styles.myComment}>
       <div>
-        <Content
+        <Slot
+          fill="commentContent"
           className={`${styles.commentBody} myCommentBody`}
-          body={props.comment.body}
+          comment={props.comment}
         />
         <p className="myCommentAsset">
           <a
diff --git a/plugins/coral-plugin-auth/client/components/CreateUsernameDialog.js b/plugins/coral-plugin-auth/client/components/CreateUsernameDialog.js
index 96df1e96f..4fdf2a7f3 100644
--- a/plugins/coral-plugin-auth/client/components/CreateUsernameDialog.js
+++ b/plugins/coral-plugin-auth/client/components/CreateUsernameDialog.js
@@ -33,7 +33,7 @@ const CreateUsernameDialog = ({
           className={styles.fakeComment}
           username={formData.username}
           created_at={Date.now()}
-          body={t('createdisplay.fake_comment_body')}
+          comment={{body:t('createdisplay.fake_comment_body')}}
         />
         <p className={styles.ifyoudont}>
           {t('createdisplay.if_you_dont_change_your_name')}
diff --git a/plugins/coral-plugin-auth/client/components/FakeComment.js b/plugins/coral-plugin-auth/client/components/FakeComment.js
index 390dd409b..5517b72aa 100644
--- a/plugins/coral-plugin-auth/client/components/FakeComment.js
+++ b/plugins/coral-plugin-auth/client/components/FakeComment.js
@@ -1,17 +1,17 @@
 import React from 'react';
+import t from 'coral-framework/services/i18n';
 import {ReplyButton} from 'coral-plugin-replies';
 import PubDate from 'coral-plugin-pubdate/PubDate';
+import Slot from 'coral-framework/components/Slot';
 import AuthorName from 'coral-plugin-author-name/AuthorName';
-import Content from 'coral-plugin-commentcontent/CommentContent';
 import styles from 'coral-embed-stream/src/components/Comment.css';
-import t from 'coral-framework/services/i18n';
 
-export const FakeComment = ({username, created_at, body}) => (
+export const FakeComment = ({username, created_at, comment}) => (
   <div className={`comment ${styles.Comment}`} style={{marginLeft: 0 * 30}}>
     <hr aria-hidden={true} />
     <AuthorName author={{name: username}} />
     <PubDate created_at={created_at} />
-    <Content body={body} />
+    <Slot comment={comment} />
     <div className="commentActionsLeft comment__action-container">
       <div className={`${'coral-plugin-likes'}-container`}>
         <button className={'coral-plugin-likes-button'}>
diff --git a/plugins/coral-plugin-comment-content/client/.babelrc b/plugins/coral-plugin-comment-content/client/.babelrc
new file mode 100644
index 000000000..60be246eb
--- /dev/null
+++ b/plugins/coral-plugin-comment-content/client/.babelrc
@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}
\ No newline at end of file
diff --git a/plugins/coral-plugin-comment-content/client/.eslintrc.json b/plugins/coral-plugin-comment-content/client/.eslintrc.json
new file mode 100644
index 000000000..9fe56bd14
--- /dev/null
+++ b/plugins/coral-plugin-comment-content/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/coral-plugin-comment-content/client/components/CommentContent.js b/plugins/coral-plugin-comment-content/client/components/CommentContent.js
new file mode 100644
index 000000000..15a5bc9af
--- /dev/null
+++ b/plugins/coral-plugin-comment-content/client/components/CommentContent.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import isLink from '../helpers/isLink';
+import Link from './Link';
+
+const name = 'coral-plugin-comment-content';
+
+const CommentContent = ({comment}) => {
+  const textbreaks = comment.body.split('\n');
+  return <div className={`${name}-text`}>
+    {
+      textbreaks.map((line, i) => {
+        return (
+          <span key={i} className={`${name}-line`}>
+            {line.split(' ').map((w) => isLink(w) ? <Link url={w} key={i} /> : ` ${w}`)}
+            <br className={`${name}-linebreak`}/>
+          </span>
+        );
+      })
+    }
+  </div>;
+};
+
+export default CommentContent;
diff --git a/plugins/coral-plugin-comment-content/client/components/Link.js b/plugins/coral-plugin-comment-content/client/components/Link.js
new file mode 100644
index 000000000..14b718a73
--- /dev/null
+++ b/plugins/coral-plugin-comment-content/client/components/Link.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './styles.css';
+
+const Link = ({url, key}) => (
+  <span>
+    {' '}
+    <a href={`//${url}`} key={key} className={styles.link} target="_blank">
+      {url}
+    </a>
+  </span>
+);
+
+export default Link;
diff --git a/plugins/coral-plugin-comment-content/client/components/styles.css b/plugins/coral-plugin-comment-content/client/components/styles.css
new file mode 100644
index 000000000..117942223
--- /dev/null
+++ b/plugins/coral-plugin-comment-content/client/components/styles.css
@@ -0,0 +1,8 @@
+.link {
+    color: grey;
+    text-decoration: underline;
+}
+
+.link:hover {
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/plugins/coral-plugin-comment-content/client/helpers/isLink.js b/plugins/coral-plugin-comment-content/client/helpers/isLink.js
new file mode 100644
index 000000000..cf4d43bc5
--- /dev/null
+++ b/plugins/coral-plugin-comment-content/client/helpers/isLink.js
@@ -0,0 +1,5 @@
+const linkRE = /(((http|ftp|https)\:\/\/)?([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?)/gmi;
+
+const isLink = (s) => linkRE.test(s);
+
+export default isLink;
diff --git a/plugins/coral-plugin-comment-content/client/index.js b/plugins/coral-plugin-comment-content/client/index.js
new file mode 100644
index 000000000..e61cb51f4
--- /dev/null
+++ b/plugins/coral-plugin-comment-content/client/index.js
@@ -0,0 +1,7 @@
+import CommentContent from './components/CommentContent';
+
+export default {
+  slots: {
+    commentContent: [CommentContent]
+  }
+};
diff --git a/plugins/coral-plugin-comment-content/index.js b/plugins/coral-plugin-comment-content/index.js
new file mode 100644
index 000000000..f053ebf79
--- /dev/null
+++ b/plugins/coral-plugin-comment-content/index.js
@@ -0,0 +1 @@
+module.exports = {};