Feature: ResizableTextArea in widget and dashboard (#969)

* Create ResizableTextArea component
* Rubocop fixes and spec fixes

Co-authored-by: Sojan <sojan@pepalo.com>

app/javascript/widget/components/ChatInputArea.vue

@@ -1,56 +0,0 @@
-<template>
-  <resizable-textarea>
-    <textarea
-      class="form-input user-message-input"
-      :placeholder="placeholder"
-      :value="value"
-      @input="$emit('input', $event.target.value)"
-      @focus="onFocus"
-      @blur="onBlur"
-    />
-  </resizable-textarea>
-</template>
-
-<script>
-import ResizableTextarea from 'widget/components/ResizableTextarea.vue';
-
-export default {
-  components: {
-    ResizableTextarea,
-  },
-  props: {
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    value: {
-      type: String,
-      default: '',
-    },
-  },
-  methods: {
-    onBlur() {
-      this.toggleTyping('off');
-    },
-    onFocus() {
-      this.toggleTyping('on');
-    },
-    toggleTyping(typingStatus) {
-      this.$store.dispatch('conversation/toggleUserTyping', { typingStatus });
-    },
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
-
-.user-message-input {
-  border: 0;
-  height: $space-large;
-  min-height: $space-large;
-  resize: none;
-  padding-top: $space-small;
-}
-</style>

app/javascript/widget/components/ChatInputWrap.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="chat-message--input">
-    <chat-input-area
+    <resizable-text-area
       v-model="userInput"
       :placeholder="$t('CHAT_PLACEHOLDER')"
+      class="form-input user-message-input"
+      @focus="onFocus"
+      @blur="onBlur"
     />
     <div class="button-wrap">
       <chat-attachment-button
@@ -34,7 +37,7 @@ import emojione from 'emojione';
 import { mixin as clickaway } from 'vue-clickaway';
 import ChatSendButton from 'widget/components/ChatSendButton.vue';
 import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
-import ChatInputArea from 'widget/components/ChatInputArea.vue';
+import ResizableTextArea from 'shared/components/ResizableTextArea';
 import EmojiInput from 'dashboard/components/widgets/emoji/EmojiInput';
 
 export default {
@@ -42,8 +45,8 @@ export default {
   components: {
     ChatAttachmentButton,
     ChatSendButton,
-    ChatInputArea,
     EmojiInput,
+    ResizableTextArea,
   },
   mixins: [clickaway],
   props: {
@@ -109,6 +112,16 @@ export default {
         `${this.userInput}${emoji.shortname} `
       );
     },
+
+    onBlur() {
+      this.toggleTyping('off');
+    },
+    onFocus() {
+      this.toggleTyping('on');
+    },
+    toggleTyping(typingStatus) {
+      this.$store.dispatch('conversation/toggleUserTyping', { typingStatus });
+    },
   },
 };
 </script>
@@ -140,4 +153,13 @@ export default {
   display: flex;
   align-items: center;
 }
+
+.user-message-input {
+  border: 0;
+  height: $space-large;
+  min-height: $space-large;
+  max-height: 2.4 * $space-mega;
+  resize: none;
+  padding-top: $space-small;
+}
 </style>

app/javascript/widget/components/ResizableTextarea.vue

@@ -1,26 +0,0 @@
-<script>
-export default {
-  mounted() {
-    this.$nextTick(() => {
-      this.$el.setAttribute(
-        'style',
-        `height: ${this.$el.scrollHeight}px;overflow-y:hidden;`
-      );
-    });
-
-    this.$el.addEventListener('input', this.resizeTextarea);
-  },
-  beforeDestroy() {
-    this.$el.removeEventListener('input', this.resizeTextarea);
-  },
-  methods: {
-    resizeTextarea(event) {
-      event.target.style.height = '3.2rem';
-      event.target.style.height = `${event.target.scrollHeight}px`;
-    },
-  },
-  render() {
-    return this.$slots.default[0];
-  },
-};
-</script>

app/javascript/widget/components/UserMessageBubble.vue

@@ -43,6 +43,7 @@ export default {
   line-height: 1.5;
   padding: $space-slab $space-normal $space-slab $space-normal;
   text-align: left;
+  word-break: break-word;
 
   > a {
     color: $color-primary;