feat: prompt editor (#3929)

* feat(Prompt): editor

* docs(ui dev): update supported inquirer types

Author: Akryum

docs/dev-guide/ui-api.md

@@ -526,7 +526,7 @@ However, you can add the following additional fields (which are optional and onl
 }
 ```
 
-Supported inquirer types: `checkbox`, `confirm`, `input`, `password`, `list`, `rawlist`.
+Supported inquirer types: `checkbox`, `confirm`, `input`, `password`, `list`, `rawlist`, `editor`.
 
 In addition to those, the UI supports special types that only works with it:
 

packages/@vue/cli-ui/src/components/prompt/Prompt.vue

@@ -52,6 +52,11 @@ export default {
       align-items stretch
       justify-content center
 
+    &.vertical
+      grid-template-columns auto
+      grid-template-areas "info" "input"
+      grid-gap $padding-item
+
   .list-item-info
     margin-right ($padding-item * 2)
 </style>

packages/@vue/cli-ui/src/components/prompt/PromptEditor.vue

@@ -0,0 +1,39 @@
+<template>
+  <VueDisable
+    :disabled="!prompt.enabled"
+    class="prompt prompt-editor"
+  >
+    <div class="prompt-content vertical">
+      <ListItemInfo
+        :name="$t(prompt.message)"
+        :description="$t(prompt.description)"
+        :link="prompt.link"
+      />
+
+      <div class="prompt-input">
+        <VueInput
+          :value="value(prompt.value)"
+          type="textarea"
+          @update="value => answer(value)"
+        />
+      </div>
+    </div>
+
+    <PromptError :error="prompt.error"/>
+  </VueDisable>
+</template>
+
+<script>
+import Prompt from './Prompt'
+
+export default {
+  extends: Prompt,
+
+  buffer: true
+}
+</script>
+
+<style lang="stylus" scoped>
+.vue-ui-input /deep/ > .content > .input-wrapper > textarea.input
+  min-height 16em
+</style>