Move textarea to MarkdownField component

4 files changed, 129 insertions, 72 deletions

diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue
index d27dd873125..0dfe5422594 100644
--- a/app/assets/javascripts/issue_show/components/fields/description.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description.vue
@@ -41,26 +41,17 @@ export default {
   <div class="common-note-form">
     <label class="sr-only" for="issue-description"> Description </label>
     <markdown-field
+      ref="markdownField"
+      v-model="formState.description"
       :markdown-preview-path="markdownPreviewPath"
       :markdown-docs-path="markdownDocsPath"
       :can-attach-file="canAttachFile"
       :enable-autocomplete="enableAutocomplete"
-    >
-      <textarea
-        id="issue-description"
-        ref="textarea"
-        slot="textarea"
-        v-model="formState.description"
-        class="note-textarea js-gfm-input js-autosize markdown-area
-        qa-description-textarea"
-        dir="auto"
-        data-supports-quick-actions="false"
-        aria-label="Description"
-        placeholder="Write a comment or drag your files here…"
-        @keydown.meta.enter="updateIssuable"
-        @keydown.ctrl.enter="updateIssuable"
-      >
-      </textarea>
-    </markdown-field>
+      textarea-id="issue-description"
+      textarea-class="qa-description-textarea"
+      :textarea-supports-quick-actions="false"
+      :textarea-label="__('Description')"
+      @save="updateIssuable"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 688c06878ac..c3132742995 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -283,14 +283,12 @@ Please check your network connection and try again.`;
       this.noteType = type;
     },
     editCurrentUserLastNote() {
-      if (this.note === '') {
-        const lastNote = this.getCurrentUserLastNote;
+      const lastNote = this.getCurrentUserLastNote;
 
-        if (lastNote) {
-          eventHub.$emit('enterEditMode', {
-            noteId: lastNote.id,
-          });
-        }
+      if (lastNote) {
+        eventHub.$emit('enterEditMode', {
+          noteId: lastNote.id,
+        });
       }
     },
     initAutoSave() {
@@ -341,30 +339,21 @@ Please check your network connection and try again.`;
 
             <markdown-field
               ref="markdownField"
+              v-model="note"
               :markdown-preview-path="markdownPreviewPath"
               :markdown-docs-path="markdownDocsPath"
               :quick-actions-docs-path="quickActionsDocsPath"
               :add-spacing-classes="false"
-            >
-              <textarea
-                id="note-body"
-                ref="textarea"
-                slot="textarea"
-                v-model="note"
-                dir="auto"
-                :disabled="isSubmitting"
-                name="note[note]"
-                class="note-textarea js-vue-comment-form js-note-text
-js-gfm-input js-autosize markdown-area js-vue-textarea qa-comment-input"
-                data-supports-quick-actions="true"
-                aria-label="Description"
-                placeholder="Write a comment or drag your files here…"
-                @keydown.up="editCurrentUserLastNote()"
-                @keydown.meta.enter="handleSave()"
-                @keydown.ctrl.enter="handleSave()"
-              >
-              </textarea>
-            </markdown-field>
+              textarea-id="note-body"
+              textarea-name="note[note]"
+              textarea-class="js-note-text qa-comment-input"
+              :textarea-supports-quick-actions="true"
+              :textarea-label="__('Comment')"
+              :editable="!isSubmitting"
+              @edit-previous="editCurrentUserLastNote()"
+              @save="handleSave()"
+              @cancel="cancelHandler(true)"
+            />
             <div class="note-form-actions">
               <div
                 class="float-left btn-group
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index acbb91ce7be..397b8f51ce1 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -197,14 +197,12 @@ export default {
       return shouldResolve || shouldToggleState;
     },
     editMyLastNote() {
-      if (this.updatedNoteBody === '') {
-        const lastNoteInDiscussion = this.getDiscussionLastNote(this.discussion);
+      const lastNoteInDiscussion = this.getDiscussionLastNote(this.discussion);
 
-        if (lastNoteInDiscussion) {
-          eventHub.$emit('enterEditMode', {
-            noteId: lastNoteInDiscussion.id,
-          });
-        }
+      if (lastNoteInDiscussion) {
+        eventHub.$emit('enterEditMode', {
+          noteId: lastNoteInDiscussion.id,
+        });
       }
     },
     cancelHandler(shouldConfirm = false) {
@@ -237,6 +235,8 @@ export default {
       />
 
       <markdown-field
+        ref="markdownField"
+        v-model="updatedNoteBody"
         :markdown-preview-path="markdownPreviewPath"
         :markdown-docs-path="markdownDocsPath"
         :quick-actions-docs-path="quickActionsDocsPath"
@@ -245,25 +245,17 @@ export default {
         :can-suggest="canSuggest"
         :add-spacing-classes="false"
         :help-page-path="helpPagePath"
-      >
-        <textarea
-          id="note_note"
-          ref="textarea"
-          slot="textarea"
-          v-model="updatedNoteBody"
-          :data-supports-quick-actions="!isEditing"
-          name="note[note]"
-          class="note-textarea js-gfm-input js-note-text js-autosize markdown-area js-vue-issue-note-form js-vue-textarea qa-reply-input"
-          dir="auto"
-          aria-label="Description"
-          placeholder="Write a comment or drag your files here…"
-          @keydown.meta.enter="handleKeySubmit()"
-          @keydown.ctrl.enter="handleKeySubmit()"
-          @keydown.exact.up="editMyLastNote()"
-          @keydown.exact.esc="cancelHandler(true)"
-          @input="onInput"
-        ></textarea>
-      </markdown-field>
+        textarea-id="note_note"
+        textarea-name="note[note]"
+        textarea-class="js-vue-issue-note-form js-note-text qa-reply-input"
+        :textarea-supports-quick-actions="!isEditing"
+        :textarea-label="__('Comment')"
+        :editable="!isSubmitting"
+        @save="handleKeySubmit()"
+        @edit-previous="editMyLastNote()"
+        @cancel="cancelHandler(true)"
+        @input="onInput"
+      />
       <div class="note-form-actions clearfix">
         <template v-if="showBatchCommentsActions">
           <p v-if="showResolveDiscussionToggle">
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 0f3b3568414..b3087dd9b07 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -18,6 +18,11 @@ export default {
     Suggestions,
   },
   props: {
+    value: {
+      type: String,
+      required: false,
+      default: '',
+    },
     markdownPreviewPath: {
       type: String,
       required: false,
@@ -67,10 +72,41 @@ export default {
       required: false,
       default: '',
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    textareaId: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    textareaName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    textareaClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    textareaSupportsQuickActions: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    textareaLabel: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
       markdownPreview: '',
+      currentValue: this.value,
       referencedCommands: '',
       referencedUsers: '',
       hasSuggestion: false,
@@ -114,6 +150,11 @@ export default {
       return this.line ? this.line.type : '';
     },
   },
+  watch: {
+    value() {
+      this.setCurrentValue(this.value, { emitEvent: false });
+    },
+  },
   mounted() {
     /*
         GLForm class handles all the toolbar buttons
@@ -136,6 +177,16 @@ export default {
     }
   },
   methods: {
+    setCurrentValue(newValue, { emitEvent = true } = {}) {
+      if (newValue === this.currentValue) return;
+
+      this.currentValue = newValue;
+
+      if (emitEvent) {
+        this.$emit('input', this.currentValue);
+      }
+    },
+
     showPreviewTab() {
       if (this.previewMarkdown) return;
 
@@ -179,6 +230,21 @@ export default {
       this.$nextTick()
         .then(() => $(this.$refs['markdown-preview']).renderGFM())
         .catch(() => new Flash(__('Error rendering markdown preview')));
+
+    triggerEditPrevious() {
+      if (!this.currentValue.length) this.$emit('edit-previous');
+    },
+
+    triggerSave() {
+      this.$emit('save');
+    },
+
+    triggerCancel() {
+      this.$emit('cancel');
+    },
+
+    onTextareaInput() {
+      this.setCurrentValue(this.$refs.textarea.value);
     },
   },
 };
@@ -199,8 +265,27 @@ export default {
     />
     <div v-show="!previewMarkdown" class="md-write-holder">
       <div class="zen-backdrop">
-        <slot name="textarea"></slot>
-        <a class="zen-control zen-control-leave js-zen-leave" href="#" aria-label="Enter zen mode">
+        <textarea
+          :id="textareaId"
+          ref="textarea"
+          placeholder="Write a comment or drag your files here…"
+          dir="auto"
+          :value="currentValue"
+          :name="textareaName"
+          class="note-textarea markdown-area js-gfm-input js-vue-textarea"
+          :class="textareaClass"
+          :data-supports-quick-actions="textareaSupportsQuickActions"
+          :aria-label="textareaLabel"
+          :disabled="!editable"
+          @keydown.up="triggerEditPrevious"
+          @keydown.meta.enter="triggerSave"
+          @keydown.ctrl.enter="triggerSave"
+          @keydown.esc="triggerCancel"
+          @input="onTextareaInput"
+        >
+        </textarea>
+
+        <a class="zen-control zen-control-leave js-zen-leave" href="#" aria-label="Exit zen mode">
           <icon :size="32" name="screen-normal" />
         </a>
         <markdown-toolbar