Handling edited comments data

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

@@ -53,6 +53,8 @@ export class EditableCommentContent extends React.Component {
     this.state = {
       body: props.comment.body,
       loadingState: '',
+      // data: {@object} contains data that might be useful for plugins, metadata, etc
+      data: {},
     };
   }
   componentDidMount() {
@@ -72,8 +74,14 @@ export class EditableCommentContent extends React.Component {
     }
   }
 
-  handleBodyChange = body => {
-    this.setState({ body });
+  handleBodyChange = (body, ...data) => {
+    this.setState(state => ({
+      body,
+      data: {
+        ...state.data,
+        ...data[0],
+      },
+    }));
   };
 
   handleSubmit = async () => {
@@ -88,9 +96,16 @@ export class EditableCommentContent extends React.Component {
     if (typeof editComment !== 'function') {
       return;
     }
+
+    let input = {
+      body: this.state.body,
+      ...this.state.data,
+    };
+
     let response;
+
     try {
-      response = await editComment({ body: this.state.body });
+      response = await editComment(input);
       if (!this.unmounted) {
         this.setState({ loadingState: 'success' });
       }

plugins/talk-plugin-rte/client/index.js

@@ -15,6 +15,13 @@ export default {
         }
       }
     `,
+    EditCommentResponse: gql`
+      fragment TalkRTE_EditCommentResponse on EditCommentResponse {
+        comment {
+          htmlBody
+        }
+      }
+    `,
   },
   mutations: {
     PostComment: ({ variables: { input } }) => {
@@ -28,5 +35,16 @@ export default {
         },
       };
     },
+    EditComment: ({ variables: { edit } }) => {
+      return {
+        optimisticResponse: {
+          editComment: {
+            comment: {
+              htmlBody: edit.htmlBody,
+            },
+          },
+        },
+      };
+    },
   },
 };

plugins/talk-plugin-rte/server/hooks.js

@@ -12,5 +12,15 @@ module.exports = {
         );
       },
     },
+    editComment: {
+      async pre(_, { edit }, _context, _info) {
+        edit.metadata = merge(
+          {},
+          {
+            htmlBody: edit.htmlBody,
+          }
+        );
+      },
+    },
   },
 };

plugins/talk-plugin-rte/server/typeDefs.graphql

@@ -2,6 +2,10 @@ input CreateCommentInput {
   htmlBody: String
 }
 
+input EditCommentInput {
+  htmlBody: String
+}
+
 type Comment {
   htmlBody: String
-}
+}