bio editable

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') }}