Comment previous edit

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

@@ -112,6 +112,7 @@ export class CommentForm extends React.Component {
           disabled={disableTextArea}
           charCountEnable={this.props.charCountEnable}
           maxCharCount={this.props.maxCharCount}
+          comment={this.props.comment}
         />
         <div className={cn(styles.buttonContainer, `${name}-button-container`)}>
           {this.props.buttonContainerStart}

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

@@ -38,6 +38,7 @@ export default class DraftArea extends React.Component {
       charCountEnable,
       maxCharCount,
       onChange,
+      comment,
     } = this.props;
 
     const tASettings = {
@@ -47,6 +48,7 @@ export default class DraftArea extends React.Component {
       onChange,
       rows,
       disabled,
+      comment,
     };
 
     return (

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

@@ -140,6 +140,7 @@ export class EditableCommentContent extends React.Component {
     return (
       <div className={styles.editCommentForm}>
         <CommentForm
+          comment={this.props.comment}
           defaultValue={this.props.comment.body}
           bodyInputId={id}
           charCountEnable={this.props.charCountEnable}

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

@@ -50,6 +50,7 @@ export default class DraftAreaContainer extends React.Component {
         charCountEnable={this.props.charCountEnable}
         maxCharCount={this.props.maxCharCount}
         label={this.props.label}
+        comment={this.props.comment}
       />
     );
   }

plugins/talk-plugin-rte/client/components/CommentContent.js

@@ -1,15 +1,23 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { name } from '../../package.json';
 
-const CommentContent = ({ comment }) => {
-  return comment.htmlBody ? (
-    <div
-      className={`${name}-text`}
-      dangerouslySetInnerHTML={{ __html: comment.htmlBody }}
-    />
-  ) : (
-    <div className={`${name}-text`}>{comment.body}</div>
-  );
+class CommentContent extends React.Component {
+  render() {
+    const { comment } = this.props;
+    return comment.htmlBody ? (
+      <div
+        className={`${name}-text`}
+        dangerouslySetInnerHTML={{ __html: comment.htmlBody }}
+      />
+    ) : (
+      <div className={`${name}-text`}>{comment.body}</div>
+    );
+  }
+}
+
+CommentContent.propTypes = {
+  comment: PropTypes.object.isRequired,
 };
 
 export default CommentContent;

plugins/talk-plugin-rte/client/components/Editor.js

@@ -36,10 +36,16 @@ class Editor extends React.Component {
         button: cn(styles.button, classNames.button, `${pluginName}-button`),
       },
     });
+
+    // To edit comments and have the previous html comment
+    if (this.props.comment && this.props.comment.htmlBody) {
+      this.ref.content.innerHTML = this.props.comment.htmlBody;
+    }
   }
 
   render() {
     const { id, classNames } = this.props;
+    console.log(this.props);
     return (
       <div
         id={id}