Commit 9eaf5818 authored by Martin Wortschack's avatar Martin Wortschack

Merge branch...

Merge branch '15103-markup-tips-for-markdown-shown-while-editing-wiki-pages-in-other-formats' into 'master'

Markup tips for Markdown shown while editing wiki pages in other formats

See merge request gitlab-org/gitlab!25974
parents 3129fb22 7bc09cb4
import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
import { s__, sprintf } from '~/locale'; import { s__, sprintf } from '~/locale';
const MARKDOWN_LINK_TEXT = {
markdown: '[Link Title](page-slug)',
rdoc: '{Link title}[link:page-slug]',
asciidoc: 'link:page-slug[Link title]',
org: '[[page-slug]]',
};
export default class Wikis { export default class Wikis {
constructor() { constructor() {
this.sidebarEl = document.querySelector('.js-wiki-sidebar'); this.sidebarEl = document.querySelector('.js-wiki-sidebar');
...@@ -28,6 +35,15 @@ export default class Wikis { ...@@ -28,6 +35,15 @@ export default class Wikis {
window.addEventListener('resize', () => this.renderSidebar()); window.addEventListener('resize', () => this.renderSidebar());
this.renderSidebar(); this.renderSidebar();
const changeFormatSelect = document.querySelector('#wiki_format');
const linkExample = document.querySelector('.js-markup-link-example');
if (changeFormatSelect) {
changeFormatSelect.addEventListener('change', e => {
linkExample.innerHTML = MARKDOWN_LINK_TEXT[e.target.value];
});
}
} }
handleWikiTitleChange(e) { handleWikiTitleChange(e) {
......
...@@ -43,8 +43,16 @@ ...@@ -43,8 +43,16 @@
.form-text.text-muted .form-text.text-muted
= succeed '.' do = succeed '.' do
= (s_("WikiMarkdownTip|To link to a (new) page, simply type %{link_example}") % { link_example: '<code>[Link Title](page-slug)</code>' }).html_safe - case @page.format.to_s
- when 'rdoc'
- link_example = '{Link title}[link:page-slug]'
- when 'asciidoc'
- link_example = 'link:page-slug[Link title]'
- when 'org'
- link_example = '[[page-slug]]'
- else
- link_example = '[Link Title](page-slug)'
= (s_('WikiMarkdownTip|To link to a (new) page, simply type <code class="js-markup-link-example">%{link_example}</code>') % { link_example: link_example }).html_safe
= succeed '.' do = succeed '.' do
- markdown_link = link_to s_("WikiMarkdownDocs|documentation"), help_page_path('user/markdown', anchor: 'wiki-specific-markdown') - markdown_link = link_to s_("WikiMarkdownDocs|documentation"), help_page_path('user/markdown', anchor: 'wiki-specific-markdown')
= (s_("WikiMarkdownDocs|More examples are in the %{docs_link}") % { docs_link: markdown_link }).html_safe = (s_("WikiMarkdownDocs|More examples are in the %{docs_link}") % { docs_link: markdown_link }).html_safe
......
---
title: Markup tips for Markdown shown while editing wiki pages in other formats
merge_request: 25974
author:
type: fixed
...@@ -22296,7 +22296,7 @@ msgstr "" ...@@ -22296,7 +22296,7 @@ msgstr ""
msgid "WikiMarkdownDocs|documentation" msgid "WikiMarkdownDocs|documentation"
msgstr "" msgstr ""
msgid "WikiMarkdownTip|To link to a (new) page, simply type %{link_example}" msgid "WikiMarkdownTip|To link to a (new) page, simply type <code class=\"js-markup-link-example\">%{link_example}</code>"
msgstr "" msgstr ""
msgid "WikiNewPageTip|Tip: You can specify the full path for the new file. We will automatically create any missing directories." msgid "WikiNewPageTip|Tip: You can specify the full path for the new file. We will automatically create any missing directories."
......
...@@ -8,11 +8,21 @@ describe('Wikis', () => { ...@@ -8,11 +8,21 @@ describe('Wikis', () => {
}"> }">
<input type="text" id="wiki_title" value="My title" /> <input type="text" id="wiki_title" value="My title" />
<input type="text" id="wiki_message" /> <input type="text" id="wiki_message" />
</form>`; <select class="form-control select-control" name="wiki[format]" id="wiki_format">
<option value="markdown">Markdown</option>
<option selected="selected" value="rdoc">RDoc</option>
<option value="asciidoc">AsciiDoc</option>
<option value="org">Org</option>
</select>
<code class="js-markup-link-example">{Link title}[link:page-slug]</code>
</form>
`;
let wikis; let wikis;
let titleInput; let titleInput;
let messageInput; let messageInput;
let changeFormatSelect;
let linkExample;
describe('when the wiki page is being created', () => { describe('when the wiki page is being created', () => {
const formHtmlFixture = editFormHtmlFixture({ newPage: true }); const formHtmlFixture = editFormHtmlFixture({ newPage: true });
...@@ -22,6 +32,8 @@ describe('Wikis', () => { ...@@ -22,6 +32,8 @@ describe('Wikis', () => {
titleInput = document.getElementById('wiki_title'); titleInput = document.getElementById('wiki_title');
messageInput = document.getElementById('wiki_message'); messageInput = document.getElementById('wiki_message');
changeFormatSelect = document.querySelector('#wiki_format');
linkExample = document.querySelector('.js-markup-link-example');
wikis = new Wikis(); wikis = new Wikis();
}); });
...@@ -69,6 +81,19 @@ describe('Wikis', () => { ...@@ -69,6 +81,19 @@ describe('Wikis', () => {
expect(messageInput.value).toEqual('Update My title'); expect(messageInput.value).toEqual('Update My title');
}); });
it.each`
value | text
${'markdown'} | ${'[Link Title](page-slug)'}
${'rdoc'} | ${'{Link title}[link:page-slug]'}
${'asciidoc'} | ${'link:page-slug[Link title]'}
${'org'} | ${'[[page-slug]]'}
`('updates a message when value=$value is selected', ({ value, text }) => {
changeFormatSelect.value = value;
changeFormatSelect.dispatchEvent(new Event('change'));
expect(linkExample.innerHTML).toBe(text);
});
}); });
}); });
}); });
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