Move label, placeholder strings to DraftArea

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

@@ -32,6 +32,20 @@ export default class DraftArea extends React.Component {
     );
   }
 
+  getLabel() {
+    if (this.props.isEdit) {
+      return t('edit_comment.body_input_label');
+    }
+    return this.props.isReply ? t('comment_box.reply') : t('comment.comment');
+  }
+
+  getPlaceholder() {
+    if (this.props.isEdit) {
+      return '';
+    }
+    return this.getLabel();
+  }
+
   render() {
     const {
       input,
@@ -68,6 +82,8 @@ export default class DraftArea extends React.Component {
               disabled,
               isReply,
               isEdit,
+              placeholder: this.getPlaceholder(),
+              label: this.getLabel(),
             }}
           />
           {/* Is this slot here legitimate? (kiwi) */}

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

@@ -2,25 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './DraftAreaContent.css';
-import t from 'coral-framework/services/i18n';
 
 class DraftAreaContent extends React.Component {
-  getLabel() {
-    if (this.props.isEdit) {
-      return t('edit_comment.body_input_label');
-    }
-    return this.props.isReply ? t('comment_box.reply') : t('comment.comment');
-  }
-
-  getPlaceholder() {
-    if (this.props.isEdit) {
-      return '';
-    }
-    return this.getLabel();
-  }
-
   render() {
-    const { input, id, onInputChange, disabled } = this.props;
+    const {
+      input,
+      id,
+      onInputChange,
+      disabled,
+      label,
+      placeholder,
+    } = this.props;
     const inputId = `${id}-textarea`;
     return (
       <div>
@@ -29,13 +21,13 @@ class DraftAreaContent extends React.Component {
           className="screen-reader-text"
           aria-hidden={true}
         >
-          {this.getLabel()}
+          {label}
         </label>
         <textarea
           id={inputId}
           className={cn(styles.content, 'talk-plugin-commentbox-textarea')}
           value={input.body}
-          placeholder={this.getPlaceholder()}
+          placeholder={placeholder}
           onChange={e => onInputChange({ body: e.target.value })}
           rows={3}
           disabled={disabled}
@@ -49,6 +41,7 @@ DraftAreaContent.propTypes = {
   id: PropTypes.string,
   input: PropTypes.object,
   placeholder: PropTypes.string,
+  label: PropTypes.string,
   onInputChange: PropTypes.func,
   disabled: PropTypes.bool,
   isEdit: PropTypes.bool,

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

@@ -125,6 +125,9 @@ Editor.propTypes = {
   unregisterHook: PropTypes.func,
   isReply: PropTypes.bool,
   isEdit: PropTypes.bool,
+  id: PropTypes.string,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
 };
 
 export default Editor;