diff --git a/client/coral-admin/src/components/Comment.js b/client/coral-admin/src/components/Comment.js index 4cc18aa0a..0c63445c8 100644 --- a/client/coral-admin/src/components/Comment.js +++ b/client/coral-admin/src/components/Comment.js @@ -7,35 +7,45 @@ import I18n from 'coral-framework/modules/i18n/i18n'; import translations from '../translations.json'; import Linkify from 'react-linkify'; +const linkify = new Linkify() + // Render a single comment for the list -export default props => ( -
  • -
    -
    - person - {props.comment.get('name') || lang.t('comment.anon')} - {timeago().format(props.comment.get('createdAt') || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))} - {props.comment.get('flagged') ?

    {lang.t('comment.flagged')}

    : null} -
    -
    - {props.actions.map(action => canShowAction(action, props.comment) ? ( - - ) : null)} -
    -
    -
    - - - {props.comment.get('body')} - - -
    -
  • -); +export default props => { + const links = linkify.getMatches(props.comment.get('body')) + + return ( +
  • +
    +
    + person + {props.comment.get('name') || lang.t('comment.anon')} + {timeago().format(props.comment.get('createdAt') || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))} + {props.comment.get('flagged') ?

    {lang.t('comment.flagged')}

    : null} +
    +
    + {links ? + Contains Link : null} +
    + {props.actions.map(action => canShowAction(action, props.comment) ? ( + + ) : null)} +
    +
    +
    +
    + + + {props.comment.get('body')} + + +
    +
  • + ) +}; // Check if an action can be performed over a comment const canShowAction = (action, comment) => { diff --git a/client/coral-admin/src/components/CommentList.css b/client/coral-admin/src/components/CommentList.css index f683ca36b..2c58c81cf 100644 --- a/client/coral-admin/src/components/CommentList.css +++ b/client/coral-admin/src/components/CommentList.css @@ -121,3 +121,15 @@ } } + + +.hasLinks { + color: #f00; + text-align: right; + display: flex; + align-items: center; + + i { + margin-right: 5px; + } +}