Commit e9f7908f authored by George Tsiolis's avatar George Tsiolis Committed by Clement Ho

Add button to insert table in markdown editor

parent 50c9a09a
...@@ -18,6 +18,16 @@ ...@@ -18,6 +18,16 @@
required: true, required: true,
}, },
}, },
computed: {
mdTable() {
return [
'| header | header |',
'| ------ | ------ |',
'| cell | cell |',
'| cell | cell |',
].join('\n');
},
},
mounted() { mounted() {
$(document).on('markdown-preview:show.vue', this.previewMarkdownTab); $(document).on('markdown-preview:show.vue', this.previewMarkdownTab);
$(document).on('markdown-preview:hide.vue', this.writeMarkdownTab); $(document).on('markdown-preview:hide.vue', this.writeMarkdownTab);
...@@ -129,6 +139,12 @@ ...@@ -129,6 +139,12 @@
button-title="Add a task list" button-title="Add a task list"
icon="task-done" icon="task-done"
/> />
<toolbar-button
:tag="mdTable"
:prepend="true"
:button-title="__('Add a table')"
icon="table"
/>
<button <button
v-tooltip v-tooltip
aria-label="Go full screen" aria-label="Go full screen"
......
...@@ -26,6 +26,8 @@ ...@@ -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-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: "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: "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" } } %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") = sprite_icon("screen-full")
......
---
title: Add markdown header toolbar button to insert table
merge_request: 18480
author: George Tsiolis
type: added
...@@ -344,6 +344,9 @@ msgstr "" ...@@ -344,6 +344,9 @@ msgstr ""
msgid "Add Readme" msgid "Add Readme"
msgstr "" msgstr ""
msgid "Add a table"
msgstr ""
msgid "Add license" msgid "Add license"
msgstr "" msgstr ""
...@@ -3709,6 +3712,9 @@ msgstr "" ...@@ -3709,6 +3712,9 @@ msgstr ""
msgid "MarkdownToolbar|Add a numbered list" msgid "MarkdownToolbar|Add a numbered list"
msgstr "" msgstr ""
msgid "MarkdownToolbar|Add a table"
msgstr ""
msgid "MarkdownToolbar|Add a task list" msgid "MarkdownToolbar|Add a task list"
msgstr "" msgstr ""
......
...@@ -17,8 +17,13 @@ describe('Markdown field header component', () => { ...@@ -17,8 +17,13 @@ describe('Markdown field header component', () => {
Vue.nextTick(done); Vue.nextTick(done);
}); });
it('renders markdown buttons', () => { it('renders markdown header buttons', () => {
expect(vm.$el.querySelectorAll('.js-md').length).toBe(8); 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', () => { it('renders `write` link as active when previewMarkdown is false', () => {
...@@ -69,4 +74,8 @@ describe('Markdown field header component', () => { ...@@ -69,4 +74,8 @@ describe('Markdown field header component', () => {
done(); done();
}); });
}); });
it('renders markdown table template', () => {
expect(vm.mdTable).toEqual('| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |');
});
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment