coral-plugin-commnet-content

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')}

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'}>

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

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

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;
+}

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;

plugins/coral-plugin-comment-content/client/index.js

@@ -0,0 +1,7 @@
+import CommentContent from './components/CommentContent';
+
+export default {
+  slots: {
+    commentContent: [CommentContent]
+  }
+};

plugins/coral-plugin-comment-content/index.js

@@ -0,0 +1 @@
+module.exports = {};