Translation fix and additionalTextareaProps prop support

src/components/AutoCompleteTextarea/Textarea.js

@@ -482,6 +482,7 @@ class ReactTextareaAutocomplete extends React.Component {
       'handleSubmit',
       'replaceWord',
       'grow',
+      'additionalTextareaProps',
     ];
 
     // eslint-disable-next-line
@@ -774,6 +775,7 @@ class ReactTextareaAutocomplete extends React.Component {
           onFocus={this.props.onFocus}
           value={value}
           style={style}
+          {...this.props.additionalTextareaProps}
         />
       </div>
     );

src/components/ChatAutoComplete.js

@@ -49,6 +49,10 @@ export class ChatAutoComplete extends PureComponent {
     commands: PropTypes.array,
     /** Listener for onfocus event on textarea */
     onFocus: PropTypes.object,
+    /**
+     * Any additional attrubutes that you may want to add for underlying HTML textarea element.
+     */
+    additionalTextareaProps: PropTypes.object,
   };
 
   static defaultProps = {
@@ -175,6 +179,7 @@ export class ChatAutoComplete extends PureComponent {
         value={this.props.value}
         grow={this.props.grow}
         disabled={this.props.disabled}
+        additionalTextareaProps={this.props.additionalTextareaProps}
       />
     );
   }

src/components/Message.js

@@ -5,6 +5,7 @@ import deepequal from 'deep-equal';
 import { MessageSimple } from './MessageSimple';
 import { Attachment } from './Attachment';
 import { MESSAGE_ACTIONS } from '../utils';
+import { withTranslationContext } from '../context';
 
 /**
  * Message - A high level component which implements all the logic required for a message.
@@ -13,7 +14,7 @@ import { MESSAGE_ACTIONS } from '../utils';
  * @example ./docs/Message.md
  * @extends Component
  */
-export class Message extends Component {
+class Message extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -499,3 +500,7 @@ export class Message extends Component {
     );
   }
 }
+
+Message = withTranslationContext(Message);
+
+export { Message };

src/components/MessageInput.js

@@ -130,6 +130,16 @@ class MessageInput extends PureComponent {
      * Defaults to and accepts same props as: [SendButton](https://getstream.github.io/stream-chat-react/#sendbutton)
      * */
     SendButton: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+    /**
+     * Any additional attrubutes that you may want to add for underlying HTML textarea element.
+     * e.g.
+     * <MessageInput
+     *  additionalTextareaProps={{
+     *    maxLength: 10,
+     *  }}
+     * />
+     */
+    additionalTextareaProps: PropTypes.object,
   };
 
   static defaultProps = {
@@ -139,6 +149,7 @@ class MessageInput extends PureComponent {
     maxRows: 10,
     Input: MessageInputLarge,
     SendButton,
+    additionalTextareaProps: {},
   };
 
   componentDidMount() {

src/components/MessageInputFlat.js

@@ -84,6 +84,10 @@ class MessageInputFlat extends PureComponent {
      * Defaults to and accepts same props as: [SendButton](https://getstream.github.io/stream-chat-react/#sendbutton)
      * */
     SendButton: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+    /**
+     * Any additional attrubutes that you may want to add for underlying HTML textarea element.
+     */
+    additionalTextareaProps: PropTypes.object,
   };
 
   static defaultProps = {
@@ -175,6 +179,7 @@ class MessageInputFlat extends PureComponent {
                 grow={this.props.grow}
                 onFocus={this.props.onFocus}
                 disabled={this.props.disabled}
+                additionalTextareaProps={this.props.additionalTextareaProps}
               />
 
               <span

src/components/MessageInputLarge.js

@@ -86,6 +86,10 @@ class MessageInputLarge extends PureComponent {
      * Defaults to and accepts same props as: [SendButton](https://getstream.github.io/stream-chat-react/#sendbutton)
      * */
     SendButton: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+    /**
+     * Any additional attrubutes that you may want to add for underlying HTML textarea element.
+     */
+    additionalTextareaProps: PropTypes.object,
   };
 
   renderUploads = () => (
@@ -203,6 +207,7 @@ class MessageInputLarge extends PureComponent {
                 onPaste={this.props.onPaste}
                 grow={this.props.grow}
                 disabled={this.props.disabled}
+                additionalTextareaProps={this.props.additionalTextareaProps}
               />
 
               <span

src/components/MessageInputSmall.js

@@ -86,6 +86,10 @@ class MessageInputSmall extends PureComponent {
      * Defaults to and accepts same props as: [SendButton](https://getstream.github.io/stream-chat-react/#sendbutton)
      * */
     SendButton: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+    /**
+     * Any additional attrubutes that you may want to add for underlying HTML textarea element.
+     */
+    additionalTextareaProps: PropTypes.object,
   };
 
   renderUploads = () => (
@@ -176,6 +180,7 @@ class MessageInputSmall extends PureComponent {
                 onPaste={this.props.onPaste}
                 grow={this.props.grow}
                 disabled={this.props.disabled}
+                additionalTextareaProps={this.props.additionalTextareaProps}
               />
 
               <span

types/index.d.ts

@@ -364,6 +364,16 @@ export interface MessageInputProps {
 
   /** Completely override the submit handler (advanced usage only) */
   overrideSubmitHandler?(message: object, channelCid: string): void;
+  /**
+   * Any additional attrubutes that you may want to add for underlying HTML textarea element.
+   * e.g.
+   * <MessageInput
+   *  additionalTextareaProps={{
+   *    maxLength: 10,
+   *  }}
+   * />
+   */
+  additionalTextareaProps: object;
 }
 
 export type ImageUpload = {
@@ -655,6 +665,7 @@ export interface ChatAutoCompleteProps {
   commands: Client.CommandResponse[];
   onFocus?: React.FocusEventHandler;
   onPaste?: React.ClipboardEventHandler;
+  additionalTextareaProps: object;
 }
 
 export interface ChatDownProps extends TranslationContextValue {