Add button to insert table in markdown editor

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"

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")
 

changelogs/unreleased/add-button-to-insert-table-in-markdown.yml

+---
+title: Add markdown header toolbar button to insert table
+merge_request: 18480
+author: George Tsiolis
+type: added

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 ""
 

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 |');
+  });
 });