Skip to content

Commit 2a8bc0f

Browse files
d3m1d0vd3m1d0v
committed
feat(note): allow inline formatting in note title
1 parent 5e6a24b commit 2a8bc0f

File tree

4 files changed

+64
-62
lines changed

4 files changed

+64
-62
lines changed

‎src/scss/_note.scss

+4
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
1616
padding: 20px 20px 20px 64px;
1717
border-radius: 10px;
1818

19+
.yfm-note-title {
20+
font-weight: 700;
21+
}
22+
1923
& > p {
2024
margin: 0 0 10px 0;
2125

‎src/transform/plugins/notes.ts

+12-7
Original file line numberDiff line numberDiff line change
@@ -83,22 +83,27 @@ const notes: MarkdownItPluginCb = (md, {lang, path: optPath, log}) => {
8383

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

9290
if (match[2]) titleOpen.attrSet('yfm2xliff-explicit', 'true');
9391
titleOpen.block = true;
9492
titleClose.block = true;
95-
inlineText.content = match[2] === undefined ? getTitle(type, lang) : match[2];
96-
inline.children = [strongOpen, inlineText, strongClose];
93+
94+
titleInline.content = match[2] === undefined ? getTitle(type, lang) : match[2];
95+
titleInline.children = [];
96+
state.md.inline.parse(
97+
titleInline.content,
98+
state.md,
99+
state.env,
100+
titleInline.children,
101+
);
97102

98103
const insideTokens = [
99104
newOpenToken,
100105
titleOpen,
101-
inline,
106+
titleInline,
102107
titleClose,
103108
...tokens.slice(i + 3, closeTokenIdx),
104109
newCloseToken,

‎test/data/alerts.ts

+25-49
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,10 @@ const getTokens = (title: string) => {
8282
{
8383
type: 'yfm_note_title_open',
8484
tag: 'p',
85-
attrs: title === 'Custom title' ? [['yfm2xliff-explicit', 'true']] : null,
85+
attrs: [
86+
['class', 'yfm-note-title'],
87+
...(title === 'Custom title' ? [['yfm2xliff-explicit', 'true']] : []),
88+
],
8689
map: null,
8790
nesting: 1,
8891
level: 0,
@@ -101,54 +104,27 @@ const getTokens = (title: string) => {
101104
map: null,
102105
nesting: 0,
103106
level: 0,
104-
children: [
105-
{
106-
type: 'strong_open',
107-
tag: 'strong',
108-
attrs: null,
109-
map: null,
110-
nesting: 1,
111-
level: 0,
112-
children: null,
113-
content: '',
114-
markup: '',
115-
info: '',
116-
meta: null,
117-
block: false,
118-
hidden: false,
119-
},
120-
{
121-
type: 'text',
122-
tag: '',
123-
attrs: null,
124-
map: null,
125-
nesting: 0,
126-
level: 0,
127-
children: null,
128-
content: title,
129-
markup: '',
130-
info: '',
131-
meta: null,
132-
block: false,
133-
hidden: false,
134-
},
135-
{
136-
type: 'strong_close',
137-
tag: 'strong',
138-
attrs: null,
139-
map: null,
140-
nesting: -1,
141-
level: 0,
142-
children: null,
143-
content: '',
144-
markup: '',
145-
info: '',
146-
meta: null,
147-
block: false,
148-
hidden: false,
149-
},
150-
],
151-
content: '',
107+
children:
108+
title === ''
109+
? []
110+
: [
111+
{
112+
type: 'text',
113+
tag: '',
114+
attrs: null,
115+
map: null,
116+
nesting: 0,
117+
level: 0,
118+
children: null,
119+
content: title,
120+
markup: '',
121+
info: '',
122+
meta: null,
123+
block: false,
124+
hidden: false,
125+
},
126+
],
127+
content: title,
152128
markup: '',
153129
info: '',
154130
meta: null,

‎test/notes.test.ts

+23-6
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ describe('Alerts', () => {
4747
);
4848

4949
expect(result[0].attrs?.[0][1]).toEqual(`yfm-note yfm-accent-${type}`);
50-
expect(result[2].children?.[1].content).toEqual(title);
50+
expect(result[2].children?.[0].content).toEqual(title);
5151
});
5252
});
5353
});
@@ -96,7 +96,7 @@ describe('Alerts', () => {
9696
'{% note info "Note title" %}\n' + '\n' + 'Note content\n' + '\n' + '{% endnote %}',
9797
),
9898
).toBe(
99-
'<div class="yfm-note yfm-accent-info" note-type="info"><p yfm2xliff-explicit="true"><strong>Note title</strong></p>\n' +
99+
'<div class="yfm-note yfm-accent-info" note-type="info"><p class="yfm-note-title" yfm2xliff-explicit="true">Note title</p>\n' +
100100
'<p>Note content</p>\n' +
101101
'</div>',
102102
);
@@ -118,9 +118,9 @@ describe('Alerts', () => {
118118
'{% endnote %}',
119119
),
120120
).toBe(
121-
'<div class="yfm-note yfm-accent-info" note-type="info"><p yfm2xliff-explicit="true"><strong>Note title 1</strong></p>\n' +
121+
'<div class="yfm-note yfm-accent-info" note-type="info"><p class="yfm-note-title" yfm2xliff-explicit="true">Note title 1</p>\n' +
122122
'<p>Note content 1</p>\n' +
123-
'</div><div class="yfm-note yfm-accent-info" note-type="info"><p yfm2xliff-explicit="true"><strong>Note title 2</strong></p>\n' +
123+
'</div><div class="yfm-note yfm-accent-info" note-type="info"><p class="yfm-note-title" yfm2xliff-explicit="true">Note title 2</p>\n' +
124124
'<p>Note content 2</p>\n' +
125125
'</div>',
126126
);
@@ -142,11 +142,28 @@ describe('Alerts', () => {
142142
'{% endnote %}',
143143
),
144144
).toBe(
145-
'<div class="yfm-note yfm-accent-info" note-type="info"><p yfm2xliff-explicit="true"><strong>Outer title</strong></p>\n' +
145+
'<div class="yfm-note yfm-accent-info" note-type="info"><p class="yfm-note-title" yfm2xliff-explicit="true">Outer title</p>\n' +
146146
'<p>Outer content</p>\n' +
147-
'<div class="yfm-note yfm-accent-info" note-type="info"><p yfm2xliff-explicit="true"><strong>Inner title</strong></p>\n' +
147+
'<div class="yfm-note yfm-accent-info" note-type="info"><p class="yfm-note-title" yfm2xliff-explicit="true">Inner title</p>\n' +
148148
'<p>Inner content</p>\n' +
149149
'</div></div>',
150150
);
151151
});
152+
153+
test('should render title with format', () => {
154+
expect(
155+
transformYfm(
156+
'{% note info "_Italic note title_" %}\n' +
157+
'\n' +
158+
'Content\n' +
159+
'\n' +
160+
'{% endnote %}',
161+
),
162+
).toBe(
163+
'<div class="yfm-note yfm-accent-info" note-type="info">' +
164+
'<p class="yfm-note-title" yfm2xliff-explicit="true"><em>Italic note title</em></p>\n' +
165+
'<p>Content</p>\n' +
166+
'</div>',
167+
);
168+
});
152169
});

0 commit comments

Comments
 (0)