coral-plugin-commnet-content

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;

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;

plugins/coral-plugin-comment-content/client/components/styles.css

@@ -0,0 +1,8 @@
+.link {
+    color: grey;
+    text-decoration: underline;
+}
+
+.link:hover {
+    cursor: pointer;
+}