From e256b0da8a61b0111d69fd6641f3b7bbc8033324 Mon Sep 17 00:00:00 2001 From: okbel Date: Fri, 12 Jan 2018 15:47:09 -0300 Subject: [PATCH 1/5] Adding format to admin comment - CommentFormatter --- ...BodyHighlighter.js => CommentFormatter.js} | 50 +++++++++++++++---- .../routes/Moderation/components/Comment.js | 13 +++-- 2 files changed, 47 insertions(+), 16 deletions(-) rename client/coral-admin/src/components/{CommentBodyHighlighter.js => CommentFormatter.js} (63%) diff --git a/client/coral-admin/src/components/CommentBodyHighlighter.js b/client/coral-admin/src/components/CommentFormatter.js similarity index 63% rename from client/coral-admin/src/components/CommentBodyHighlighter.js rename to client/coral-admin/src/components/CommentFormatter.js index 9e381bf0b..6c086b6aa 100644 --- a/client/coral-admin/src/components/CommentBodyHighlighter.js +++ b/client/coral-admin/src/components/CommentFormatter.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { matchLinks } from '../utils'; import memoize from 'lodash/memoize'; @@ -62,16 +63,43 @@ function markLinks(body) { return content; } -export default ({ suspectWords, bannedWords, body, ...rest }) => { - // First highlight links. - const content = markLinks(body).map((element, index) => { - // Keep highlighted links. - if (typeof element !== 'string') { - return element; - } +function format(body, { suspectWords, bannedWords, className = 'comment' }) { + // Breaking the body by line break + const textbreaks = body.split('\n'); - // Highlight suspect and banned phrase inside this part of text. - return markPhrases(element, suspectWords, bannedWords, index); - }); - return
{content}
; + return ( + + {textbreaks.map((line, i) => { + const content = markLinks(line).map((element, index) => { + // Keep highlighted links. + if (typeof element !== 'string') { + return element; + } + + // Highlight suspect and banned phrase inside this part of text. + return markPhrases(element, suspectWords, bannedWords, index); + }); + + return ( + + {content} + {i !== textbreaks.length - 1 && ( +
+ )} + + ); + })} + + ); +} + +const CommentFormatter = ({ body, settings, ...rest }) => { + return
{format(body, settings)}
; }; + +CommentFormatter.propTypes = { + settings: PropTypes.object, + body: PropTypes.string, +}; + +export default CommentFormatter; diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js index fc6894a46..504c3e04d 100644 --- a/client/coral-admin/src/routes/Moderation/components/Comment.js +++ b/client/coral-admin/src/routes/Moderation/components/Comment.js @@ -8,7 +8,7 @@ import styles from './Comment.css'; import CommentLabels from 'coral-admin/src/components/CommentLabels'; import CommentAnimatedEdit from 'coral-admin/src/components/CommentAnimatedEdit'; import Slot from 'coral-framework/components/Slot'; -import CommentBodyHighlighter from 'coral-admin/src/components/CommentBodyHighlighter'; +import CommentFormatter from 'coral-admin/src/components/CommentFormatter'; import IfHasLink from 'coral-admin/src/components/IfHasLink'; import cn from 'classnames'; import ApproveButton from 'coral-admin/src/components/ApproveButton'; @@ -126,11 +126,14 @@ class Comment extends React.Component {
- {' '} + /> Date: Fri, 12 Jan 2018 15:51:49 -0300 Subject: [PATCH 2/5] Adding changes to the comments on the User Drawer Detail --- client/coral-admin/src/components/UserDetailComment.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/client/coral-admin/src/components/UserDetailComment.js b/client/coral-admin/src/components/UserDetailComment.js index b1cc486ec..669f035fe 100644 --- a/client/coral-admin/src/components/UserDetailComment.js +++ b/client/coral-admin/src/components/UserDetailComment.js @@ -5,7 +5,7 @@ import { Link } from 'react-router'; import { Icon } from 'coral-ui'; import CommentDetails from './CommentDetails'; import styles from './UserDetailComment.css'; -import CommentBodyHighlighter from 'coral-admin/src/components/CommentBodyHighlighter'; +import CommentFormatter from 'coral-admin/src/components/CommentFormatter'; import IfHasLink from 'coral-admin/src/components/IfHasLink'; import cn from 'classnames'; import CommentAnimatedEdit from './CommentAnimatedEdit'; @@ -78,9 +78,11 @@ class UserDetailComment extends React.Component {
- {' '} Date: Fri, 12 Jan 2018 15:53:32 -0300 Subject: [PATCH 3/5] Wrong name --- client/coral-admin/src/components/CommentAnimatedEdit.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/coral-admin/src/components/CommentAnimatedEdit.js b/client/coral-admin/src/components/CommentAnimatedEdit.js index 43fbf9fbf..12280b204 100644 --- a/client/coral-admin/src/components/CommentAnimatedEdit.js +++ b/client/coral-admin/src/components/CommentAnimatedEdit.js @@ -4,7 +4,7 @@ import { CSSTransitionGroup } from 'react-transition-group'; import styles from './CommentAnimatedEdit.css'; import PropTypes from 'prop-types'; -const CommentBodyHighlighter = ({ children, body }) => { +const CommentAnimatedEdit = ({ children, body }) => { return ( { ); }; -CommentBodyHighlighter.propTypes = { +CommentAnimatedEdit.propTypes = { children: PropTypes.node, body: PropTypes.string, }; -export default CommentBodyHighlighter; +export default CommentAnimatedEdit; From bfa2f6edb958df93e5a042b6123d384cbb229c73 Mon Sep 17 00:00:00 2001 From: okbel Date: Mon, 15 Jan 2018 12:59:39 -0300 Subject: [PATCH 4/5] Updates --- .../src/components/CommentFormatter.js | 18 +++++++++++------- .../src/components/UserDetailComment.js | 9 ++++----- .../routes/Moderation/components/Comment.js | 8 +++----- 3 files changed, 18 insertions(+), 17 deletions(-) diff --git a/client/coral-admin/src/components/CommentFormatter.js b/client/coral-admin/src/components/CommentFormatter.js index 6c086b6aa..152ae8547 100644 --- a/client/coral-admin/src/components/CommentFormatter.js +++ b/client/coral-admin/src/components/CommentFormatter.js @@ -63,12 +63,18 @@ function markLinks(body) { return content; } -function format(body, { suspectWords, bannedWords, className = 'comment' }) { +const CommentFormatter = ( + body, + suspectWords, + bannedWords, + className = 'comment', + ...rest +) => { // Breaking the body by line break const textbreaks = body.split('\n'); return ( - + {textbreaks.map((line, i) => { const content = markLinks(line).map((element, index) => { // Keep highlighted links. @@ -91,14 +97,12 @@ function format(body, { suspectWords, bannedWords, className = 'comment' }) { })} ); -} - -const CommentFormatter = ({ body, settings, ...rest }) => { - return
{format(body, settings)}
; }; CommentFormatter.propTypes = { - settings: PropTypes.object, + className: PropTypes.string, + bannedWords: PropTypes.array, + suspectWords: PropTypes.array, body: PropTypes.string, }; diff --git a/client/coral-admin/src/components/UserDetailComment.js b/client/coral-admin/src/components/UserDetailComment.js index 669f035fe..2d98edcb3 100644 --- a/client/coral-admin/src/components/UserDetailComment.js +++ b/client/coral-admin/src/components/UserDetailComment.js @@ -79,12 +79,11 @@ class UserDetailComment extends React.Component {