Use commentContent slot in Featured Comments

client/coral-embed-stream/src/components/Comment.js

@@ -16,7 +16,7 @@ import mapValues from 'lodash/mapValues';
 import LoadMore from './LoadMore';
 import {getEditableUntilDate} from './util';
 import {findCommentWithId} from '../graphql/utils';
-import CommentContent from './CommentContent';
+import CommentContent from 'coral-framework/components/CommentContent';
 import Slot from 'coral-framework/components/Slot';
 import CommentTombstone from './CommentTombstone';
 import InactiveCommentLabel from './InactiveCommentLabel';

client/coral-framework/components/CommentContent.js

@@ -2,18 +2,18 @@ import React from 'react';
 
 const CommentContent = ({comment}) => {
   const textbreaks = comment.body.split('\n');
-  return <div className={`${name}-text`}>
+  return <span className={`${name}-text`}>
     {
       textbreaks.map((line, i) => {
         return (
           <span key={i} className={`${name}-line`}>
             {line}
-            <br className={`${name}-linebreak`}/>
+            {i === textbreaks.length - 1 && <br className={`${name}-linebreak`}/>}
           </span>
         );
       })
     }
-  </div>;
+  </span>;
 };
 
 export default CommentContent;

client/talk-plugin-history/Comment.js

@@ -4,7 +4,7 @@ import {Icon} from '../coral-ui';
 import styles from './Comment.css';
 import Slot from 'coral-framework/components/Slot';
 import CommentTimestamp from 'coral-framework/components/CommentTimestamp';
-import CommentContent from '../coral-embed-stream/src/components/CommentContent';
+import CommentContent from 'coral-framework/components/CommentContent';
 import cn from 'classnames';
 import {getTotalReactionsCount} from 'coral-framework/utils';
 

plugin-api/beta/client/components/index.js

@@ -4,3 +4,4 @@ export {default as IfSlotIsEmpty} from 'coral-framework/components/IfSlotIsEmpty
 export {default as IfSlotIsNotEmpty} from 'coral-framework/components/IfSlotIsNotEmpty';
 export {default as CommentAuthorName} from 'coral-framework/components/CommentAuthorName';
 export {default as CommentTimestamp} from 'coral-framework/components/CommentTimestamp';
+export {default as CommentContent} from 'coral-framework/components/CommentContent';

plugins/talk-plugin-comment-content/client/components/CommentContent.js

@@ -5,20 +5,20 @@ const name = 'talk-plugin-comment-content';
 
 const CommentContent = ({comment}) => {
   const textbreaks = comment.body.split('\n');
-  return <div className={`${name}-text`}>
+  return <span className={`${name}-text`}>
     {
       textbreaks.map((line, i) => {
         return (
           <span key={i} className={`${name}-line`}>
             <Linkify properties={{target: '_blank'}}>
-              {line}
+              {line.trim()}
             </Linkify>
-            <br className={`${name}-linebreak`}/>
+            {i !== textbreaks.length - 1 && <br className={`${name}-linebreak`}/>}
           </span>
         );
       })
     }
-  </div>;
+  </span>;
 };
 
 export default CommentContent;

plugins/talk-plugin-featured-comments/client/components/Comment.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import styles from './Comment.css';
 import {t} from 'plugin-api/beta/client/services';
-import {Slot, CommentAuthorName, CommentTimestamp} from 'plugin-api/beta/client/components';
+import {Slot, CommentAuthorName, CommentTimestamp, CommentContent} from 'plugin-api/beta/client/components';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 import {pluginName} from '../../package.json';
 import FeaturedButton from '../containers/FeaturedButton';
@@ -19,9 +19,14 @@ class Comment extends React.Component {
     return (
       <div className={cn(styles.root, `${pluginName}-comment`)}>
 
-        <blockquote className={cn(styles.quote, `${pluginName}-comment-body`)}>
-          {comment.body}
-        </blockquote>
+        <Slot
+          component={'blockquote'}
+          className={cn(styles.quote, `${pluginName}-comment-body`)}
+          fill="commentContent"
+          defaultComponent={CommentContent}
+          data={data}
+          queryData={queryData}
+        />
 
         <div className={cn(`${pluginName}-comment-username-box`)}>