coral-plugin-commnet-content

2026-06-28 18:30:01 +08:00 · 2017-06-12 19:09:42 -03:00
parent efc4db56d0
commit 65f7ee2ab3
16 changed files with 106 additions and 39 deletions
@@ -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
@@ -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/*
@@ -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>
          }

@@ -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;
@@ -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;
-  });
-});
@@ -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
@@ -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')}
@@ -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'}>
@@ -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"
+  ]
+}
@@ -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"] }]
+  }
+}
@@ -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;
@@ -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;
@@ -0,0 +1,8 @@
+.link {
+    color: grey;
+    text-decoration: underline;
+}
+
+.link:hover {
+    cursor: pointer;
+}
@@ -0,0 +1,5 @@
+const linkRE = /(((http|ftp|https)\:\/\/)?([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?)/gmi;
+
+const isLink = (s) => linkRE.test(s);
+
+export default isLink;
@@ -0,0 +1,7 @@
+import CommentContent from './components/CommentContent';
+
+export default {
+  slots: {
+    commentContent: [CommentContent]
+  }
+};
@@ -0,0 +1 @@
+module.exports = {};