Changes added

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

@@ -21,7 +21,7 @@ import CommentContent from 'coral-framework/components/CommentContent';
 import Slot from 'coral-framework/components/Slot';
 import CommentTombstone from './CommentTombstone';
 import InactiveCommentLabel from './InactiveCommentLabel';
-import { EditableCommentContent } from './EditableCommentContent';
+import EditableCommentContent from '../containers/EditableCommentContent';
 import {
   getActionSummary,
   iPerformedThisAction,

client/coral-embed-stream/src/tabs/stream/components/CommentForm.js

@@ -13,7 +13,7 @@ import DraftArea from '../containers/DraftArea';
 /**
  * Common UI for Creating or Editing a Comment
  */
-export class CommentForm extends React.Component {
+class CommentForm extends React.Component {
   static propTypes = {
     charCountEnable: PropTypes.bool.isRequired,
     maxCharCount: PropTypes.number,
@@ -145,3 +145,5 @@ export class CommentForm extends React.Component {
     );
   }
 }
+
+export default CommentForm;

client/coral-embed-stream/src/tabs/stream/components/DraftArea.js

@@ -57,7 +57,7 @@ export default class DraftArea extends React.Component {
             {label}
           </label>
           <Slot
-            fill="commentBox"
+            fill="draftArea"
             defaultComponent={DraftAreaContent}
             className={styles.content}
             queryData={queryData}

client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { notifyForNewCommentStatus } from '../helpers';
-import { CommentForm } from './CommentForm';
+import CommentForm from '../containers/CommentForm';
 import styles from './Comment.css';
 import { CountdownSeconds } from './CountdownSeconds';
 import { getEditableUntilDate } from './util';
@@ -14,7 +14,7 @@ import t from 'coral-framework/services/i18n';
 /**
  * Renders a Comment's body in such a way that the end-user can edit it and save changes
  */
-export class EditableCommentContent extends React.Component {
+class EditableCommentContent extends React.Component {
   static propTypes = {
     // show notification to the user (e.g. for errors)
     notify: PropTypes.func.isRequired,
@@ -196,3 +196,5 @@ export class EditableCommentContent extends React.Component {
     );
   }
 }
+
+export default EditableCommentContent;

client/coral-embed-stream/src/tabs/stream/containers/Comment.js

@@ -25,7 +25,6 @@ const slots = [
   'commentAuthorTags',
   'commentTimestamp',
   'commentContent',
-  'commentBox',
 ];
 
 /**
@@ -99,6 +98,7 @@ const singleCommentFragment = gql`
     }
     ${getSlotFragmentSpreads(slots, 'comment')}.
     ...${getDefinitionName(CommentBox.fragments.comment)}
+    ${CommentBox.fragments.comment}
   }
 `;
 

client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { gql } from 'react-apollo';
-import { getSlotFragmentSpreads } from 'coral-framework/utils';
 import withFragments from 'coral-framework/hocs/withFragments';
 import { getDefinitionName } from 'coral-framework/utils';
 import t, { timeago } from 'coral-framework/services/i18n';
@@ -10,7 +9,7 @@ import { isSuspended } from 'coral-framework/utils/user';
 import DraftArea from './DraftArea';
 import Slot from 'coral-framework/components/Slot';
 import { connect } from 'react-redux';
-import { CommentForm } from '../components/CommentForm';
+import CommentForm from '../containers/CommentForm';
 import { notifyForNewCommentStatus } from '../helpers';
 import { compose } from 'react-apollo';
 
@@ -213,8 +212,6 @@ CommentBox.propTypes = {
   tags: PropTypes.array,
 };
 
-const slots = ['commentBox'];
-
 const mapStateToProps = state => ({
   tags: state.stream.commentBoxTags,
 });
@@ -225,9 +222,9 @@ export default compose(
     comment: gql`
     fragment TalkEmbedStream_CommentBox_comment on Comment {
       __typename
-      ${getSlotFragmentSpreads(slots, 'comment')}
       ...${getDefinitionName(DraftArea.fragments.comment)}
     }
+    ${DraftArea.fragments.comment}
 `,
   })
 )(CommentBox);

client/coral-embed-stream/src/tabs/stream/containers/CommentForm.js

@@ -0,0 +1,16 @@
+import { gql } from 'react-apollo';
+import CommentForm from '../components/CommentForm';
+import withFragments from 'coral-framework/hocs/withFragments';
+import { getDefinitionName } from 'coral-framework/utils';
+import DraftArea from './DraftArea';
+
+export default withFragments({
+  comment: gql`
+  fragment TalkEmbedStream_CommentForm_comment on Comment {
+    __typename
+    ...${getDefinitionName(DraftArea.fragments.comment)}
+  }
+
+  ${DraftArea.fragments.comment}
+`,
+})(CommentForm);

client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js

@@ -80,7 +80,7 @@ DraftAreaContainer.propTypes = {
   comment: PropTypes.object,
 };
 
-const slots = ['commentBox'];
+const slots = ['draftArea'];
 
 export default withFragments({
   comment: gql`

client/coral-embed-stream/src/tabs/stream/containers/EditableCommentContent.js

@@ -0,0 +1,16 @@
+import { gql } from 'react-apollo';
+import EditableCommentContent from '../components/EditableCommentContent';
+import withFragments from 'coral-framework/hocs/withFragments';
+import { getDefinitionName } from 'coral-framework/utils';
+import CommentForm from './CommentForm';
+
+export default withFragments({
+  comment: gql`
+  fragment TalkEmbedStream_EditableCommentContent_comment on Comment {
+    __typename
+    ...${getDefinitionName(CommentForm.fragments.comment)}
+  }
+
+  ${CommentForm.fragments.comment}
+`,
+})(EditableCommentContent);

plugins/talk-plugin-rich-text-pell/client/index.js

@@ -4,7 +4,7 @@ import { gql } from 'react-apollo';
 
 export default {
   slots: {
-    commentBox: [Editor],
+    draftArea: [Editor],
     commentContent: [CommentContent],
   },
   fragments: {