Merge branch 'nfriend-make-textareaValue-prop-required' into 'master'

Make `textareaValue` prop required for Vue markdown field component

See merge request gitlab-org/gitlab!42651

app/assets/javascripts/issuable_create/components/issuable_form.vue

@@ -71,6 +71,7 @@ export default {
           :markdown-docs-path="descriptionHelpPath"
           :add-spacing-classes="false"
           :show-suggest-popover="true"
+          :textarea-value="issuableDescription"
         >
           <textarea
             id="issuable-description"

app/assets/javascripts/notes/components/comment_form.vue

@@ -371,6 +371,7 @@ export default {
               :markdown-docs-path="markdownDocsPath"
               :quick-actions-docs-path="quickActionsDocsPath"
               :add-spacing-classes="false"
+              :textarea-value="note"
             >
               <textarea
                 id="note-body"

app/assets/javascripts/notes/components/note_form.vue

@@ -328,6 +328,7 @@ export default {
         :add-spacing-classes="false"
         :help-page-path="helpPagePath"
         :show-suggest-popover="showSuggestPopover"
+        :textarea-value="updatedNoteBody"
         @handleSuggestDismissed="() => $emit('handleSuggestDismissed')"
       >
         <textarea

app/assets/javascripts/vue_shared/components/markdown/field.vue

@@ -25,6 +25,18 @@ export default {
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
+    /**
+     * This prop should be bound to the value of the `<textarea>` element
+     * that is rendered as a child of this component (in the `textarea` slot)
+     */
+    textareaValue: {
+      type: String,
+      required: true,
+    },
+    markdownDocsPath: {
+      type: String,
+      required: true,
+    },
     isSubmitting: {
       type: Boolean,
       required: false,
@@ -35,10 +47,6 @@ export default {
       required: false,
       default: '',
     },
-    markdownDocsPath: {
-      type: String,
-      required: true,
-    },
     addSpacingClasses: {
       type: Boolean,
       required: false,
@@ -84,42 +92,6 @@ export default {
       required: false,
       default: false,
     },
-
-    /**
-     * This prop is used as a fallback if the value of the textarea can't be
-     * retreived using `this.$slots.textarea[0]?.elm?`.
-     *
-     * This happens when the `textarea` slot is defined like this:
-     *
-     * ```html
-     * <markdown-field>
-     *    <template #textarea>
-     *      <textarea></textarea>
-     *    </template>
-     *  </markdown-field>
-     * ```
-     *
-     * ... as opposed to this:
-     *
-     * ```html
-     * <markdown-field>
-     *   <textarea slot="textarea">
-     * </markdown-field>
-     * ```
-     *
-     * When using `<template #textarea>` as shown above in example #1,
-     * it's important to **always** provide a value to this prop.
-     * If `textareaValue` isn't provided, this component will not
-     * show a preview when the "Preview" tab is clicked - it
-     * will always show "Nothing to preview."
-     *
-     * For more info, see https://github.com/vuejs/vue/issues/10450.
-     */
-    textareaValue: {
-      type: String,
-      required: false,
-      default: '',
-    },
   },
   data() {
     return {
@@ -219,17 +191,11 @@ export default {
 
       this.previewMarkdown = true;
 
-      /*
-          Can't use `$refs` as the component is technically in the parent component
-          so we access the VNode & then get the element
-        */
-      const text = this.$slots.textarea[0]?.elm?.value || this.textareaValue;
-
-      if (text) {
+      if (this.textareaValue) {
         this.markdownPreviewLoading = true;
         this.markdownPreview = __('Loading…');
         axios
-          .post(this.markdownPreviewPath, { text })
+          .post(this.markdownPreviewPath, { text: this.textareaValue })
           .then(response => this.renderMarkdown(response.data))
           .catch(() => new Flash(__('Error loading markdown preview')));
       } else {

spec/frontend/issuable_create/components/issuable_form_spec.js

@@ -79,6 +79,7 @@ describe('IssuableForm', () => {
         markdownDocsPath: wrapper.vm.descriptionHelpPath,
         addSpacingClasses: false,
         showSuggestPopover: true,
+        textareaValue: '',
       });
       expect(descriptionFieldEl.find('textarea').exists()).toBe(true);
       expect(descriptionFieldEl.find('textarea').attributes('placeholder')).toBe(

spec/frontend/vue_shared/components/markdown/field_spec.js

@@ -7,6 +7,7 @@ import axios from '~/lib/utils/axios_utils';
 
 const markdownPreviewPath = `${TEST_HOST}/preview`;
 const markdownDocsPath = `${TEST_HOST}/docs`;
+const textareaValue = 'testing\n123';
 
 function assertMarkdownTabs(isWrite, writeLink, previewLink, wrapper) {
   expect(writeLink.element.parentNode.classList.contains('active')).toBe(isWrite);
@@ -20,23 +21,11 @@ function createComponent() {
       markdownDocsPath,
       markdownPreviewPath,
       isSubmitting: false,
+      textareaValue,
     },
     slots: {
-      textarea: '<textarea>testing\n123</textarea>',
+      textarea: `<textarea>${textareaValue}</textarea>`,
     },
-    template: `
-    <field-component
-      markdown-preview-path="${markdownPreviewPath}"
-      markdown-docs-path="${markdownDocsPath}"
-      :isSubmitting="false"
-    >
-      <textarea
-        slot="textarea"
-        v-model="text">
-        <slot>this is a test</slot>
-      </textarea>
-    </field-component>
-    `,
   });
   return wrapper;
 }