kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Merge branch 'add-button-to-insert-table-in-markdown' into 'master'

Browse source 
Add button to insert table in markdown editor

See merge request gitlab-org/gitlab-ce!18480
This commit is contained in:
Clement Ho 2018-10-06 14:30:35 +00:00
commit 54c442af23
5 changed files with 40 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/assets/javascripts/vue_shared/components/markdown/header.vue
View file

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

2
app/views/projects/_md_preview.html.haml
View file

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

5
changelogs/unreleased/add-button-to-insert-table-in-markdown.yml Normal file
View file

@ -0,0 +1,5 @@
---
title: Add markdown header toolbar button to insert table
merge_request: 18480
author: George Tsiolis
type: added

6
locale/gitlab.pot
View file

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

13
spec/javascripts/vue_shared/components/markdown/header_spec.js
View file

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