bio editable

src/components/emoji_input/emoji_input.js

@@ -205,12 +205,6 @@ const EmojiInput = {
         return emoji.displayText
       }
     },
-    onInputScroll () {
-      this.$refs.hiddenOverlay.scrollTo({
-        top: this.input.scrollTop,
-        left: this.input.scrollLeft
-      })
-    },
     suggestionListId () {
       return `suggestions-${this.randomSeed}`
     },
@@ -239,7 +233,6 @@ const EmojiInput = {
     this.overlayStyle.fontSize = style.fontSize
     this.overlayStyle.wordWrap = style.wordWrap
     this.overlayStyle.whiteSpace = style.whiteSpace
-    this.resize()
     input.addEventListener('blur', this.onBlur)
     input.addEventListener('focus', this.onFocus)
     input.addEventListener('paste', this.onPaste)
@@ -302,6 +295,13 @@ const EmojiInput = {
     }
   },
   methods: {
+    onInputScroll (e) {
+      this.$refs.hiddenOverlay.scrollTo({
+        top: this.input.scrollTop,
+        left: this.input.scrollLeft
+      })
+      this.setCaret(e)
+    },
     triggerShowPicker () {
       this.$nextTick(() => {
         this.$refs.picker.showPicker()
@@ -561,8 +561,6 @@ const EmojiInput = {
         this.$refs.suggestorPopover.updateStyles()
       })
     },
-    resize () {
-    },
     autoCompleteItemLabel (suggestion) {
       if (suggestion.user) {
         return suggestion.displayText + ' ' + suggestion.detailText

src/components/settings_modal/tabs/profile_tab.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="profile-tab">
     <div class="setting-item">
-      <h2>{{ $t('settings.name_bio') }}</h2>
       <UserCard
         :user-id="user.id"
         :editable="true"
@@ -23,20 +22,6 @@
           >
         </template>
       </EmojiInput>
-      <p>{{ $t('settings.bio') }}</p>
-      <EmojiInput
-        v-model="newBio"
-        enable-emoji-picker
-        :suggest="emojiUserSuggestor"
-      >
-        <template #default="inputProps">
-          <textarea
-            v-model="newBio"
-            class="input bio resize-height"
-            v-bind="propsToNative(inputProps)"
-          />
-        </template>
-      </EmojiInput>
       <p v-if="role === 'admin' || role === 'moderator'">
         <Checkbox v-model="showRole">
           <template v-if="role === 'admin'">

src/components/user_card/user_card.js

@@ -93,6 +93,7 @@ export default {
       newName: user.name_unescaped,
       newActorType: user.actor_type,
       newBio: unescape(user.description),
+      editingBio: false,
       newBirthday: user.birthday,
       newShowBirthday: user.show_birthday,
       newFields: user.fields.map(field => ({ name: field.name, value: field.value })),

src/components/user_card/user_card.scss

@@ -13,11 +13,21 @@
     }
   }
 
+  .input.bio {
+    height: auto; // override settings default textarea size
+  }
+
   .user-card-inner {
     padding-bottom: 0;
   }
 
   .user-card-bio {
+    margin: 0.6em;
+
+    &, * {
+      line-height: 1.5;
+    }
+
     &.-justify-left {
       text-align: start;
     }

src/components/user_card/user_card.vue

@@ -315,14 +315,45 @@
         />
       </div>
     </div>
-    <RichContent
-      v-if="!hideBio"
-      class="user-card-bio"
-      :class="{ '-justify-left': mergedConfig.userCardLeftJustify }"
-      :html="user.description_html"
-      :emoji="editable ? emoji : user.emoji"
-      :handle-links="true"
-    />
+    <h4 v-if="editable">
+      <span>
+        {{ $t('settings.bio') }}
+      </span>
+      <button
+        class="button-default"
+        @click="editingBio = !editingBio"
+      >
+        {{ $t('settings.toggle_edit') }}
+      </button>
+    </h4>
+    <template v-if="!editable || !editingBio">
+      <RichContent
+        v-if="!hideBio"
+        class="user-card-bio"
+        :class="{ '-justify-left': mergedConfig.userCardLeftJustify }"
+        :html="user.description_html"
+        :emoji="editable ? emoji : user.emoji"
+        :handle-links="true"
+      />
+    </template>
+    <template v-else-if="editingBio">
+      <EmojiInput
+        v-model="newBio"
+        enable-emoji-picker
+        class="user-card-bio"
+        :class="{ '-justify-left': mergedConfig.userCardLeftJustify }"
+        :suggest="emojiUserSuggestor"
+      >
+        <template #default="inputProps">
+          <textarea
+            v-model="newBio"
+            class="input bio resize-height"
+            v-bind="propsToNative(inputProps)"
+            :rows="newBio.split(/\n/g).length"
+          />
+        </template>
+      </EmojiInput>
+    </template>
     <h4 v-if="editable">
       <span>
         {{ $t('settings.profile_fields.label') }}