Merge pull request #439 from coralproject/highlighter-wordz

highlight suspect, banned words and links

client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js

@@ -163,6 +163,7 @@ class ModerationContainer extends Component {
           activeTab={activeTab}
           singleView={moderation.singleView}
           selectedIndex={this.state.selectedIndex}
+          bannedWords={settings.wordlist.banned}
           suspectWords={settings.wordlist.suspect}
           showBanUserDialog={props.showBanUserDialog}
           acceptComment={props.acceptComment}

client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js

@@ -24,6 +24,7 @@ const ModerationQueue = ({comments, selectedIndex, commentCount, singleView, loa
             commentType={activeTab}
             selected={i === selectedIndex}
             suspectWords={props.suspectWords}
+            bannedWords={props.bannedWords}
             actions={actionsMap[status]}
             showBanUserDialog={props.showBanUserDialog}
             acceptComment={props.acceptComment}
@@ -47,6 +48,7 @@ const ModerationQueue = ({comments, selectedIndex, commentCount, singleView, loa
 };
 
 ModerationQueue.propTypes = {
+  bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
   suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
   currentAsset: PropTypes.object,
   showBanUserDialog: PropTypes.func.isRequired,

client/coral-admin/src/containers/ModerationQueue/components/Comment.js

@@ -19,6 +19,7 @@ const lang = new I18n(translations);
 
 const Comment = ({actions = [], ...props}) => {
   const links = linkify.getMatches(props.comment.body);
+  const linkText = links ? links.map(link => link.raw) : [];
   const actionSummaries = props.comment.action_summaries;
   return (
     <li tabIndex={props.index} className={`mdl-card ${props.selected ? 'mdl-shadow--8dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem} ${props.selected ? styles.selected : ''}`}>
@@ -49,9 +50,9 @@ const Comment = ({actions = [], ...props}) => {
         </div>
         <div className={styles.itemBody}>
           <p className={styles.body}>
-            <Linkify component='span' properties={{style: linkStyles}}>
-              <Highlighter searchWords={props.suspectWords} textToHighlight={props.comment.body}/>
-            </Linkify>
+            <Highlighter
+              searchWords={[...props.suspectWords, ...props.bannedWords, ...linkText]}
+              textToHighlight={props.comment.body} />
           </p>
           <div className={styles.sideActions}>
             {links ? <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
@@ -77,6 +78,7 @@ Comment.propTypes = {
   acceptComment: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,
   suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
+  bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
   currentAsset: PropTypes.object,
   comment: PropTypes.shape({
     body: PropTypes.string.isRequired,
@@ -92,9 +94,4 @@ Comment.propTypes = {
   })
 };
 
-const linkStyles = {
-  backgroundColor: 'rgb(255, 219, 135)',
-  padding: '1px 2px'
-};
-
 export default Comment;