{/* TODO implmement iPerformedThisAction for the like */}
diff --git a/client/coral-embed-stream/src/EditableCommentContent.js b/client/coral-embed-stream/src/EditableCommentContent.js
new file mode 100644
index 000000000..09c5fae9b
--- /dev/null
+++ b/client/coral-embed-stream/src/EditableCommentContent.js
@@ -0,0 +1,62 @@
+import React, {PropTypes} from 'react';
+import {CommentForm} from 'coral-plugin-commentbox/CommentBox';
+
+/**
+ * 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 {
+
+ // @TODO (bengo) make sure these are accurate wrt isRequired
+ static propTypes = {
+
+ // show notification to the user (e.g. for errors)
+ addNotification: PropTypes.func.isRequired,
+ asset: PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ settings: PropTypes.shape({
+ charCountEnable: PropTypes.bool,
+ }),
+ }).isRequired,
+
+ // comment that is being edited
+ comment: PropTypes.shape({
+ body: PropTypes.string
+ }).isRequired,
+
+ // logged in user
+ currentUser: PropTypes.shape({
+ id: PropTypes.string.isRequired
+ }),
+ maxCharCount: PropTypes.number,
+
+ parentId: PropTypes.string,
+ }
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ const saveComment = function () {
+ };
+ const originalBody = this.props.comment.body;
+ return (
+
+ {
+
+ // should be disabled if user hasn't actually changed their
+ // original comment
+ return comment.body !== originalBody;
+ }}
+ saveComment={saveComment}
+ bodyLabel={'Edit this comment' /* @TODO (bengo) i18n */}
+ bodyPlaceholder=""
+ submitText={'Save changes' /* @TODO (bengo) i18n */}
+ saveButtonCStyle="green"
+ />
+
+ );
+ }
+}
diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js
index 261c95414..ee3b9722c 100644
--- a/client/coral-plugin-commentbox/CommentBox.js
+++ b/client/coral-plugin-commentbox/CommentBox.js
@@ -7,6 +7,132 @@ import {connect} from 'react-redux';
const name = 'coral-plugin-commentbox';
+/**
+ * Common UI for Creating or Editing a Comment
+ */
+export class CommentForm extends Component {
+ static propTypes = {
+
+ // Initial value for underlying comment body textarea
+ defaultValue: PropTypes.string,
+ charCountEnable: PropTypes.bool.isRequired,
+ maxCharCount: PropTypes.number,
+ cancelButtonClicked: PropTypes.func,
+
+ // Save the comment in the form.
+ // Will be passed { body: String }
+ saveComment: PropTypes.func.isRequired,
+
+ // DOM ID for form input that edits comment body
+ bodyInputId: PropTypes.string,
+
+ // screen reader label for input that edits comment body
+ bodyLabel: PropTypes.string,
+
+ // Placeholder for input that edits comment body
+ bodyPlaceholder: PropTypes.string,
+
+ // render at start of button container (useful for extra buttons)
+ buttonContainerStart: PropTypes.node,
+
+ // render inside submit button
+ submitText: PropTypes.node,
+
+ styles: PropTypes.shape({
+ textarea: PropTypes.string
+ }),
+
+ // cStyle for enabled save
+ saveButtonCStyle: PropTypes.string,
+
+ // return whether the save button should be enabled for the provided
+ // comment ({ body }) (for reasons other than charCount)
+ saveCommentEnabled: PropTypes.func,
+ }
+ static get defaultProps() {
+ return {
+ bodyLabel: lang.t('comment'),
+ bodyPlaceholder: lang.t('comment'),
+ submitText: lang.t('post'),
+ saveButtonCStyle: 'darkGrey',
+ saveCommentEnabled: () => true,
+ };
+ }
+ constructor(props) {
+ super(props);
+ this.onBodyChange = this.onBodyChange.bind(this);
+ this.onClickSubmit = this.onClickSubmit.bind(this);
+ this.state = {
+ body: props.defaultValue || ''
+ };
+ }
+ onBodyChange(e) {
+ this.setState({body: e.target.value});
+ }
+ onClickSubmit(e) {
+ e.preventDefault();
+ const {saveComment} = this.props;
+ const {body} = this.state;
+ saveComment({body});
+ }
+ render() {
+ const {maxCharCount, styles, saveCommentEnabled} = this.props;
+
+ const body = this.state.body;
+ const length = body.length;
+ const isNotValidLength = (length) => !length || (maxCharCount && length > maxCharCount);
+ const disablePostComment = isNotValidLength(length) || ! saveCommentEnabled({body});
+
+ return