diff options
author | Clement Ho <clemmakesapps@gmail.com> | 2018-10-06 14:30:35 +0000 |
---|---|---|
committer | Clement Ho <clemmakesapps@gmail.com> | 2018-10-06 14:30:35 +0000 |
commit | 54c442af23169cc146bb6bb2484ca2d3d98ef870 (patch) | |
tree | ce4521bb56c80b5952f661afc6f9dc0b63f53675 | |
parent | 50c9a09a04048d5d46163fb97be34a739708e7ca (diff) | |
parent | e9f7908f5eb88c43c5e1689190a3d6b0c840a650 (diff) | |
download | gitlab-ce-54c442af23169cc146bb6bb2484ca2d3d98ef870.tar.gz |
Merge branch 'add-button-to-insert-table-in-markdown' into 'master'
Add button to insert table in markdown editor
See merge request gitlab-org/gitlab-ce!18480
5 files changed, 40 insertions, 2 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue index afc4196c729..ccd53158820 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/header.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue @@ -18,6 +18,16 @@ required: true, }, }, + computed: { + mdTable() { + return [ + '| header | header |', + '| ------ | ------ |', + '| cell | cell |', + '| cell | cell |', + ].join('\n'); + }, + }, mounted() { $(document).on('markdown-preview:show.vue', this.previewMarkdownTab); $(document).on('markdown-preview:hide.vue', this.writeMarkdownTab); @@ -129,6 +139,12 @@ button-title="Add a task list" icon="task-done" /> + <toolbar-button + :tag="mdTable" + :prepend="true" + :button-title="__('Add a table')" + icon="table" + /> <button v-tooltip aria-label="Go full screen" diff --git a/app/views/projects/_md_preview.html.haml b/app/views/projects/_md_preview.html.haml index 5436806162d..c62328e3fb9 100644 --- a/app/views/projects/_md_preview.html.haml +++ b/app/views/projects/_md_preview.html.haml @@ -26,6 +26,8 @@ = markdown_toolbar_button({ icon: "list-bulleted", data: { "md-tag" => "* ", "md-prepend" => true }, title: s_("MarkdownToolbar|Add a bullet list") }) = markdown_toolbar_button({ icon: "list-numbered", data: { "md-tag" => "1. ", "md-prepend" => true }, title: s_("MarkdownToolbar|Add a numbered list") }) = markdown_toolbar_button({ icon: "task-done", data: { "md-tag" => "* [ ] ", "md-prepend" => true }, title: s_("MarkdownToolbar|Add a task list") }) + = markdown_toolbar_button({ icon: "table", data: { "md-tag" => "| header 1 | header 2 |\n| -------- | -------- |\n| cell 1 | cell 2 |\n| cell 3 | cell 4 |", "md-prepend" => true }, title: s_("MarkdownToolbar|Add a table") }) + = markdown_toolbar_button({ icon: "table", data: { "md-tag" => "| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |", "md-prepend" => true }, title: _('Add a table') }) %button.toolbar-btn.toolbar-fullscreen-btn.js-zen-enter.has-tooltip{ type: "button", tabindex: -1, "aria-label": "Go full screen", title: s_("MarkdownToolbar|Go full screen"), data: { container: "body" } } = sprite_icon("screen-full") diff --git a/changelogs/unreleased/add-button-to-insert-table-in-markdown.yml b/changelogs/unreleased/add-button-to-insert-table-in-markdown.yml new file mode 100644 index 00000000000..69432c0d20c --- /dev/null +++ b/changelogs/unreleased/add-button-to-insert-table-in-markdown.yml @@ -0,0 +1,5 @@ +--- +title: Add markdown header toolbar button to insert table +merge_request: 18480 +author: George Tsiolis +type: added diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 20b70bc2cd3..8b7d4b0f17e 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -344,6 +344,9 @@ msgstr "" msgid "Add Readme" msgstr "" +msgid "Add a table" +msgstr "" + msgid "Add license" msgstr "" @@ -3709,6 +3712,9 @@ msgstr "" msgid "MarkdownToolbar|Add a numbered list" msgstr "" +msgid "MarkdownToolbar|Add a table" +msgstr "" + msgid "MarkdownToolbar|Add a task list" msgstr "" diff --git a/spec/javascripts/vue_shared/components/markdown/header_spec.js b/spec/javascripts/vue_shared/components/markdown/header_spec.js index bc934afe7a4..a4681617e66 100644 --- a/spec/javascripts/vue_shared/components/markdown/header_spec.js +++ b/spec/javascripts/vue_shared/components/markdown/header_spec.js @@ -17,8 +17,13 @@ describe('Markdown field header component', () => { Vue.nextTick(done); }); - it('renders markdown buttons', () => { - expect(vm.$el.querySelectorAll('.js-md').length).toBe(8); + it('renders markdown header buttons', () => { + const buttons = ['Add bold text', 'Add italic text', 'Insert a quote', 'Insert code', 'Add a link', 'Add a bullet list', 'Add a numbered list', 'Add a task list', 'Add a table', 'Go full screen']; + const elements = vm.$el.querySelectorAll('.toolbar-btn'); + + elements.forEach((buttonEl, index) => { + expect(buttonEl.getAttribute('data-original-title')).toBe(buttons[index]); + }); }); it('renders `write` link as active when previewMarkdown is false', () => { @@ -69,4 +74,8 @@ describe('Markdown field header component', () => { done(); }); }); + + it('renders markdown table template', () => { + expect(vm.mdTable).toEqual('| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |'); + }); }); |