diff options
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(); + }); + }); + }); }); }); |