diff --git a/Dockerfile.onbuild b/Dockerfile.onbuild index 20d34ffb9..dab06f336 100644 --- a/Dockerfile.onbuild +++ b/Dockerfile.onbuild @@ -5,6 +5,7 @@ ONBUILD ARG TALK_THREADING_LEVEL=3 ONBUILD ARG TALK_DEFAULT_STREAM_TAB=all ONBUILD ARG TALK_DEFAULT_LANG=en ONBUILD ARG TALK_PLUGINS_JSON +ONBUILD ARG TALK_WEBPACK_SOURCE_MAP # Bundle app source ONBUILD COPY . /usr/src/app 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; 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..8874d123f 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,47 @@ 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; - } +const CommentFormatter = ({ + body, + suspectWords, + bannedWords, + className = 'comment', + ...rest +}) => { + // 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 && ( +
+ )} +
+ ); + })} +
+ ); }; + +CommentFormatter.propTypes = { + className: PropTypes.string, + bannedWords: PropTypes.array, + suspectWords: PropTypes.array, + body: PropTypes.string, +}; + +export default CommentFormatter; diff --git a/client/coral-admin/src/components/UserDetailComment.js b/client/coral-admin/src/components/UserDetailComment.js index b1cc486ec..2d98edcb3 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,11 +78,12 @@ class UserDetailComment extends React.Component {
- {' '} + className="talk-admin-user-detail-comment" + />
- {' '} + />