hook to clear text after submiting a comment

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

@@ -51,6 +51,9 @@ class CommentForm extends React.Component {
     state: PropTypes.string,
     loadingState: PropTypes.oneOf(['', 'loading', 'success', 'error']),
     comment: PropTypes.object,
+    registerHook: PropTypes.func,
+    unregisterHook: PropTypes.func,
+    isReply: PropTypes.bool,
   };
   static get defaultProps() {
     return {
@@ -115,6 +118,9 @@ class CommentForm extends React.Component {
           disabled={disableTextArea}
           charCountEnable={this.props.charCountEnable}
           maxCharCount={this.props.maxCharCount}
+          registerHook={this.props.registerHook}
+          unregisterHook={this.props.unregisterHook}
+          isReply={this.props.isReply}
         />
         <div className={cn(styles.buttonContainer, `${name}-button-container`)}>
           {this.props.buttonContainerStart}

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

@@ -44,6 +44,7 @@ export default class DraftArea extends React.Component {
       maxCharCount,
       onChange,
       queryData,
+      isReply,
     } = this.props;
 
     const tASettings = {
@@ -53,6 +54,7 @@ export default class DraftArea extends React.Component {
       onChange,
       rows,
       disabled,
+      isReply,
     };
 
     return (
@@ -68,6 +70,8 @@ export default class DraftArea extends React.Component {
             defaultComponent={DraftAreaContent}
             className={styles.content}
             queryData={queryData}
+            registerHook={this.props.registerHook}
+            unregisterHook={this.props.unregisterHook}
             {...tASettings}
           />
           <Slot fill="commentInputArea" />
@@ -93,4 +97,7 @@ DraftArea.propTypes = {
   disabled: PropTypes.bool,
   rows: PropTypes.number,
   queryData: PropTypes.object.isRequired,
+  registerHook: PropTypes.func,
+  unregisterHook: PropTypes.func,
+  isReply: PropTypes.bool,
 };

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

@@ -65,7 +65,9 @@ class CommentBox extends React.Component {
     };
 
     // Execute preSubmit Hooks
-    this.state.hooks.preSubmit.forEach(hook => hook(input));
+    this.state.hooks.preSubmit.forEach(hook =>
+      hook(input, this.handleBodyChange)
+    );
     this.setState({ loadingState: 'loading' });
 
     postComment(input, 'comments')
@@ -75,7 +77,9 @@ class CommentBox extends React.Component {
         const actions = data.createComment.actions;
 
         // Execute postSubmit Hooks
-        this.state.hooks.postSubmit.forEach(hook => hook(data));
+        this.state.hooks.postSubmit.forEach(hook =>
+          hook(data, this.handleBodyChange)
+        );
 
         notifyForNewCommentStatus(notify, postedComment.status, actions);
 
@@ -172,6 +176,9 @@ class CommentBox extends React.Component {
           bodyPlaceholder={t('comment.comment')}
           bodyInputId={id}
           body={this.state.body}
+          registerHook={this.registerHook}
+          unregisterHook={this.unregisterHook}
+          isReply={isReply}
           buttonContainerStart={
             <Slot
               fill="commentInputDetailArea"

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

@@ -56,6 +56,9 @@ class DraftAreaContainer extends React.Component {
         charCountEnable={this.props.charCountEnable}
         maxCharCount={this.props.maxCharCount}
         label={this.props.label}
+        registerHook={this.props.registerHook}
+        unregisterHook={this.props.unregisterHook}
+        isReply={this.props.isReply}
       />
     );
   }
@@ -78,6 +81,9 @@ DraftAreaContainer.propTypes = {
   rows: PropTypes.number,
   label: PropTypes.string.isRequired,
   comment: PropTypes.object,
+  registerHook: PropTypes.func,
+  unregisterHook: PropTypes.func,
+  isReply: PropTypes.bool,
 };
 
 const slots = ['draftArea'];

plugins/talk-plugin-akismet/client/components/CheckSpamHook.js

@@ -49,6 +49,6 @@ export default class CheckSpamHook extends React.Component {
 
 CheckSpamHook.propTypes = {
   notify: PropTypes.func.isRequired,
-  registerHook: PropTypes.func.isRequired,
-  unregisterHook: PropTypes.func.isRequired,
+  registerHook: PropTypes.func,
+  unregisterHook: PropTypes.func,
 };

plugins/talk-plugin-rich-text-pell/client/components/Editor.js

@@ -40,6 +40,18 @@ class Editor extends React.Component {
     if (this.props.comment && this.props.comment.richTextBody) {
       this.ref.content.innerHTML = this.props.comment.richTextBody;
     }
+
+    this.clearInputHook = this.props.registerHook(
+      'postSubmit',
+      (res, handleBodyChange) => {
+        this.ref.content.innerHTML = '';
+        handleBodyChange('', { richTextBody: '' });
+      }
+    );
+  }
+
+  componentWillUnmount() {
+    this.props.unregisterHook(this.clearInputHook);
   }
 
   render() {
@@ -85,6 +97,8 @@ Editor.propTypes = {
   comment: PropTypes.object,
   classNames: PropTypes.object,
   actions: PropTypes.array,
+  registerHook: PropTypes.func,
+  unregisterHook: PropTypes.func,
 };
 
 export default Editor;