Add multiline text

client/src/styles/partials/generic/forms/main.scss

@@ -1,4 +1,5 @@
 .bd-form-textinput,
+.bd-form-textarea,
 .bd-form-fileinput,
 .bd-form-dropdown,
 .bd-form-radio,

client/src/styles/partials/generic/forms/text.scss

@@ -19,6 +19,30 @@
     }
 }
 
+.bd-form-textarea {
+    .bd-form-textarea-wrap {
+        margin-top: 15px;
+        background: rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba(0, 0, 0, 0.3);
+        border-radius: 3px;
+        color: #b9bbbe;
+        overflow-y: scroll;
+        max-height: 140px;
+
+        &:focus {
+            color: #fff;
+            border-color: #040405;
+        }
+
+        @include scrollbar;
+    }
+
+    div[contenteditable] {
+        padding: 11px;
+        cursor: text;
+    }
+}
+
 .bd-number {
     position: relative;
 

client/src/ui/components/bd/pluginsetting/Multiline.vue

@@ -0,0 +1,33 @@
+/**
+ * BetterDiscord Plugin Setting Multiline Text Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+<template>
+    <div class="bd-form-textarea">
+        <div class="bd-form-textarea-details">
+            <div class="bd-title">
+                <h3>{{ setting.text }}</h3>
+            </div>
+            <div class="bd-hint">{{ setting.hint }}</div>
+        </div>
+        <div class="bd-form-textarea-wrap">
+            <div contenteditable="true" @keyup.stop @input="input">{{ setting.value }}</div>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        props: ['setting', 'change'],
+        methods: {
+            input(e) {
+                this.change(this.setting.id, e.target.textContent);
+            }
+        }
+    }
+</script>

client/src/ui/components/bd/pluginsetting/PluginSetting.vue

@@ -14,7 +14,8 @@
         <DropdownSetting v-if="setting.type === 'dropdown'" :setting="setting" :change="change"/>
         <NumberSetting v-if="setting.type === 'number'" :setting="setting" :change="change"/>
         <RadioSetting v-if="setting.type === 'radio'" :setting="setting" :change="change"/>
-        <StringSetting v-if="setting.type === 'text'" :setting="setting" :change="change"/>
+        <StringSetting v-if="setting.type === 'text' && !setting.multiline" :setting="setting" :change="change"/>
+        <MultilineTextSetting v-if="setting.type === 'text' && setting.multiline" :setting="setting" :change="change"/>
         <FileSetting v-if="setting.type === 'file'" :setting="setting" :change="change"/>
         <div class="bd-form-divider"></div>
     </div>
@@ -26,6 +27,7 @@
     import NumberSetting from './Number.vue';
     import RadioSetting from './Radio.vue';
     import StringSetting from './String.vue';
+    import MultilineTextSetting from './Multiline.vue';
     import FileSetting from './File.vue';
 
     export default {
@@ -40,6 +42,7 @@
             NumberSetting,
             RadioSetting,
             StringSetting,
+            MultilineTextSetting,
             FileSetting
         }
     }

tests/plugins/Example/config.json

@@ -61,6 +61,13 @@
                     "text": "Number Test Setting",
                     "hint": "Number Test Setting Hint"
                 },
+                {
+                    "id": "test-multiline-1",
+                    "type": "text",
+                    "multiline": true,
+                    "text": "Multiline Text Test Setting",
+                    "hint": "Multiline Text Test Setting Hint"
+                },
                 {
                     "id": "default-3",
                     "type": "file",