feat: Resize textarea using alt+up and alt+down arrow keys

src/profile/forms/Bio.jsx

@@ -19,10 +19,12 @@
   constructor(props) {
     super(props);
 
+    this.textareaRef = React.createRef();
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleClose = this.handleClose.bind(this);
     this.handleOpen = this.handleOpen.bind(this);
+    this.handleResize = this.handleResize.bind(this);
   }
 
   handleChange(e) {
@@ -43,6 +45,25 @@
     this.props.openHandler(this.props.formId);
   }
 
+  handleResize(event) {
+    if (event.altKey) {
+      const textarea = this.textareaRef.current;
+      if (!textarea) {
+        return;
+      }
+
+      const step = 10; // pixels to increase/decrease the height of the textarea
+      if (event.key === 'ArrowUp') {
+        textarea.style.height = `${Math.max(30, textarea.offsetHeight - step)}px`;
+        event.preventDefault();
+      }
+      if (event.key === 'ArrowDown') {
+        textarea.style.height = `${textarea.offsetHeight + step}px`;
+        event.preventDefault();
+      }
+    }
+  }
+
   render() {
     const {
       formId, bio, visibilityBio, editMode, saveState, error, intl,
@@ -68,7 +89,9 @@
                     id={formId}
                     name={formId}
                     value={bio}
+                    ref={this.textareaRef}
                     onChange={this.handleChange}
+                    onKeyDown={this.handleResize}
                   />
                   {error !== null && (
                     <Form.Control.Feedback hasIcon={false}>