Merge branch 'issue-form-multiple-line-markdown' into 'master'9-3-stable-with-multi-line-markdown-fix

Fixed multi-line markdown in issue edit form

Closes #34318

See merge request !12458

3 files changed, 75 insertions, 38 deletions

diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index 601d01e1be1..021f936a4fa 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -94,8 +94,8 @@ gl.text.insertText = function(textArea, text, tag, blockTag, selected, wrap) {
 
   startChar = !wrap && !currentLineEmpty && textArea.selectionStart > 0 ? '\n' : '';
 
-  if (selectedSplit.length > 1 && (!wrap || (blockTag != null))) {
-    if (blockTag != null) {
+  if (selectedSplit.length > 1 && (!wrap || (blockTag != null && blockTag !== ''))) {
+    if (blockTag != null && blockTag !== '') {
       insertText = this.blockTagText(text, textArea, blockTag, selected);
     } else {
       insertText = selectedSplit.map(function(val) {
diff --git a/changelogs/unreleased/issue-form-multiple-line-markdown.yml b/changelogs/unreleased/issue-form-multiple-line-markdown.yml
new file mode 100644
index 00000000000..23128f346bc
--- /dev/null
+++ b/changelogs/unreleased/issue-form-multiple-line-markdown.yml
@@ -0,0 +1,4 @@
+---
+title: Fixed multi-line markdown tooltip buttons in issue edit form
+merge_request:
+author:
diff --git a/spec/javascripts/vue_shared/components/markdown/field_spec.js b/spec/javascripts/vue_shared/components/markdown/field_spec.js
index 4bbaff561fc..291e19c9f3c 100644
--- a/spec/javascripts/vue_shared/components/markdown/field_spec.js
+++ b/spec/javascripts/vue_shared/components/markdown/field_spec.js
@@ -4,47 +4,33 @@ import fieldComponent from '~/vue_shared/components/markdown/field.vue';
 describe('Markdown field component', () => {
   let vm;
 
-  beforeEach(() => {
+  beforeEach((done) => {
     vm = new Vue({
-      render(createElement) {
-        return createElement(
-          fieldComponent,
-          {
-            props: {
-              markdownPreviewUrl: '/preview',
-              markdownDocs: '/docs',
-            },
-          },
-          [
-            createElement('textarea', {
-              slot: 'textarea',
-            }),
-          ],
-        );
+      data() {
+        return {
+          text: 'testing\n123',
+        };
       },
-    });
-  });
-
-  it('creates a new instance of GL form', (done) => {
-    spyOn(gl, 'GLForm');
-    vm.$mount();
-
-    Vue.nextTick(() => {
-      expect(
-        gl.GLForm,
-      ).toHaveBeenCalled();
-
-      done();
-    });
+      components: {
+        fieldComponent,
+      },
+      template: `
+        <field-component
+          marodown-preview-url="/preview"
+          markdown-docs="/docs"
+        >
+          <textarea
+            slot="textarea"
+            v-model="text">
+          </textarea>
+        </field-component>
+      `,
+    }).$mount();
+
+    Vue.nextTick(done);
   });
 
   describe('mounted', () => {
-    beforeEach((done) => {
-      vm.$mount();
-
-      Vue.nextTick(done);
-    });
-
     it('renders textarea inside backdrop', () => {
       expect(
         vm.$el.querySelector('.zen-backdrop textarea'),
@@ -117,5 +103,52 @@ describe('Markdown field component', () => {
         });
       });
     });
+
+    describe('markdown buttons', () => {
+      it('converts single words', (done) => {
+        const textarea = vm.$el.querySelector('textarea');
+
+        textarea.setSelectionRange(0, 7);
+        vm.$el.querySelector('.js-md').click();
+
+        Vue.nextTick(() => {
+          expect(
+            textarea.value,
+          ).toContain('**testing**');
+
+          done();
+        });
+      });
+
+      it('converts a line', (done) => {
+        const textarea = vm.$el.querySelector('textarea');
+
+        textarea.setSelectionRange(0, 0);
+        vm.$el.querySelectorAll('.js-md')[4].click();
+
+        Vue.nextTick(() => {
+          expect(
+            textarea.value,
+          ).toContain('*  testing');
+
+          done();
+        });
+      });
+
+      it('converts multiple lines', (done) => {
+        const textarea = vm.$el.querySelector('textarea');
+
+        textarea.setSelectionRange(0, 50);
+        vm.$el.querySelectorAll('.js-md')[4].click();
+
+        Vue.nextTick(() => {
+          expect(
+            textarea.value,
+          ).toContain('* testing\n* 123');
+
+          done();
+        });
+      });
+    });
   });
 });