Skip to content

Commit

Permalink
feat(note): allow inline formatting in note title
Browse files Browse the repository at this point in the history
  • Loading branch information
@d3m1d0v
d3m1d0v committed Aug 19, 2022
1 parent 5e6a24b commit 2a8bc0f
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 62 deletions.
4 changes: 4 additions & 0 deletions src/scss/_note.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
padding: 20px 20px 20px 64px;
border-radius: 10px;

.yfm-note-title {
font-weight: 700;
}

& > p {
margin: 0 0 10px 0;

Expand Down
19 changes: 12 additions & 7 deletions src/transform/plugins/notes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,22 +83,27 @@ const notes: MarkdownItPluginCb = (md, {lang, path: optPath, log}) => {

// Add extra paragraph
const titleOpen = new state.Token('yfm_note_title_open', 'p', 1);
const inline = new state.Token('inline', '', 0);
const strongOpen = new state.Token('strong_open', 'strong', 1);
const inlineText = new state.Token('text', '', 0);
const strongClose = new state.Token('strong_close', 'strong', -1);
titleOpen.attrSet('class', 'yfm-note-title');
const titleInline = new state.Token('inline', '', 0);
const titleClose = new state.Token('yfm_note_title_close', 'p', -1);

if (match[2]) titleOpen.attrSet('yfm2xliff-explicit', 'true');
titleOpen.block = true;
titleClose.block = true;
inlineText.content = match[2] === undefined ? getTitle(type, lang) : match[2];
inline.children = [strongOpen, inlineText, strongClose];

titleInline.content = match[2] === undefined ? getTitle(type, lang) : match[2];
titleInline.children = [];
state.md.inline.parse(
titleInline.content,
state.md,
state.env,
titleInline.children,
);

const insideTokens = [
newOpenToken,
titleOpen,
inline,
titleInline,
titleClose,
...tokens.slice(i + 3, closeTokenIdx),
newCloseToken,
Expand Down
74 changes: 25 additions & 49 deletions test/data/alerts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,10 @@ const getTokens = (title: string) => {
{
type: 'yfm_note_title_open',
tag: 'p',
attrs: title === 'Custom title' ? [['yfm2xliff-explicit', 'true']] : null,
attrs: [
['class', 'yfm-note-title'],
...(title === 'Custom title' ? [['yfm2xliff-explicit', 'true']] : []),
],
map: null,
nesting: 1,
level: 0,
Expand All @@ -101,54 +104,27 @@ const getTokens = (title: string) => {
map: null,
nesting: 0,
level: 0,
children: [
{
type: 'strong_open',
tag: 'strong',
attrs: null,
map: null,
nesting: 1,
level: 0,
children: null,
content: '',
markup: '',
info: '',
meta: null,
block: false,
hidden: false,
},
{
type: 'text',
tag: '',
attrs: null,
map: null,
nesting: 0,
level: 0,
children: null,
content: title,
markup: '',
info: '',
meta: null,
block: false,
hidden: false,
},
{
type: 'strong_close',
tag: 'strong',
attrs: null,
map: null,
nesting: -1,
level: 0,
children: null,
content: '',
markup: '',
info: '',
meta: null,
block: false,
hidden: false,
},
],
content: '',
children:
title === ''
? []
: [
{
type: 'text',
tag: '',
attrs: null,
map: null,
nesting: 0,
level: 0,
children: null,
content: title,
markup: '',
info: '',
meta: null,
block: false,
hidden: false,
},
],
content: title,
markup: '',
info: '',
meta: null,
Expand Down
29 changes: 23 additions & 6 deletions test/notes.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ describe('Alerts', () => {
);

expect(result[0].attrs?.[0][1]).toEqual(`yfm-note yfm-accent-${type}`);
expect(result[2].children?.[1].content).toEqual(title);
expect(result[2].children?.[0].content).toEqual(title);
});
});
});
Expand Down Expand Up @@ -96,7 +96,7 @@ describe('Alerts', () => {
'{% note info "Note title" %}\n' + '\n' + 'Note content\n' + '\n' + '{% endnote %}',
),
).toBe(
'<div class="yfm-note yfm-accent-info" note-type="info"><p yfm2xliff-explicit="true"><strong>Note title</strong></p>\n' +
'<div class="yfm-note yfm-accent-info" note-type="info"><p class="yfm-note-title" yfm2xliff-explicit="true">Note title</p>\n' +
'<p>Note content</p>\n' +
'</div>',
);
Expand All @@ -118,9 +118,9 @@ describe('Alerts', () => {
'{% endnote %}',
),
).toBe(
'<div class="yfm-note yfm-accent-info" note-type="info"><p yfm2xliff-explicit="true"><strong>Note title 1</strong></p>\n' +
'<div class="yfm-note yfm-accent-info" note-type="info"><p class="yfm-note-title" yfm2xliff-explicit="true">Note title 1</p>\n' +
'<p>Note content 1</p>\n' +
'</div><div class="yfm-note yfm-accent-info" note-type="info"><p yfm2xliff-explicit="true"><strong>Note title 2</strong></p>\n' +
'</div><div class="yfm-note yfm-accent-info" note-type="info"><p class="yfm-note-title" yfm2xliff-explicit="true">Note title 2</p>\n' +
'<p>Note content 2</p>\n' +
'</div>',
);
Expand All @@ -142,11 +142,28 @@ describe('Alerts', () => {
'{% endnote %}',
),
).toBe(
'<div class="yfm-note yfm-accent-info" note-type="info"><p yfm2xliff-explicit="true"><strong>Outer title</strong></p>\n' +
'<div class="yfm-note yfm-accent-info" note-type="info"><p class="yfm-note-title" yfm2xliff-explicit="true">Outer title</p>\n' +
'<p>Outer content</p>\n' +
'<div class="yfm-note yfm-accent-info" note-type="info"><p yfm2xliff-explicit="true"><strong>Inner title</strong></p>\n' +
'<div class="yfm-note yfm-accent-info" note-type="info"><p class="yfm-note-title" yfm2xliff-explicit="true">Inner title</p>\n' +
'<p>Inner content</p>\n' +
'</div></div>',
);
});

test('should render title with format', () => {
expect(
transformYfm(
'{% note info "_Italic note title_" %}\n' +
'\n' +
'Content\n' +
'\n' +
'{% endnote %}',
),
).toBe(
'<div class="yfm-note yfm-accent-info" note-type="info">' +
'<p class="yfm-note-title" yfm2xliff-explicit="true"><em>Italic note title</em></p>\n' +
'<p>Content</p>\n' +
'</div>',
);
});
});

0 comments on commit 2a8bc0f

Please sign in to comment.