Skip to content

Commit de2f73c

Browse files
whiteformedwhiteformed
committed
refactor(nodes): add yfm-nodes containers
1 parent 50a434f commit de2f73c

File tree

4 files changed

+241
-130
lines changed

4 files changed

+241
-130
lines changed

‎src/transform/plugins/notes/index.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,23 @@ const index: MarkdownItPluginCb = (md, {lang, notesAutotitle, path: optPath, log
138138
} catch (e) {
139139
md.core.ruler.push('notes', plugin);
140140
}
141+
142+
md.renderer.rules['yfm_note_open'] = (tokens, idx, _opts, _env, self) => {
143+
const token = tokens[idx];
144+
145+
const containerClassName = 'yfm-note-container';
146+
147+
return [
148+
`<div class="${containerClassName}">`,
149+
`<${token.tag}${self.renderAttrs(token)}>`,
150+
].join('\n');
151+
};
152+
153+
md.renderer.rules['yfm_note_close'] = (tokens, idx) => {
154+
const token = tokens[idx];
155+
156+
return [`</${token.tag}>`, '</div>'].join('\n');
157+
};
141158
};
142159

143160
export = index;

‎src/transform/plugins/table/index.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -500,6 +500,23 @@ const yfmTable: MarkdownItPluginCb = (md) => {
500500
return true;
501501
},
502502
);
503+
504+
md.renderer.rules['yfm_table_open'] = (tokens, idx, _opts, _env, self) => {
505+
const token = tokens[idx];
506+
507+
const containerClassName = 'yfm-table-container';
508+
509+
return [
510+
`<div class="${containerClassName}">`,
511+
`<${token.tag}${self.renderAttrs(token)}>`,
512+
].join('\n');
513+
};
514+
515+
md.renderer.rules['yfm_table_close'] = (tokens, idx) => {
516+
const token = tokens[idx];
517+
518+
return [`</${token.tag}>`, '</div>'].join('\n');
519+
};
503520
};
504521

505522
export = yfmTable;

‎test/__snapshots__/notes.test.ts.snap‎

Lines changed: 97 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,144 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Alerts should render nested notes 1`] = `
4-
<div class="yfm-note yfm-accent-info"
5-
note-type="info"
6-
>
7-
<p class="yfm-note-title">
8-
Outer title
9-
</p>
10-
<div class="yfm-note-content">
11-
<p>
12-
Outer content
4+
<div class="yfm-note-container">
5+
<div class="yfm-note yfm-accent-info"
6+
note-type="info"
7+
>
8+
<p class="yfm-note-title">
9+
Outer title
1310
</p>
14-
<div class="yfm-note yfm-accent-info"
15-
note-type="info"
16-
>
17-
<p class="yfm-note-title">
18-
Inner title
11+
<div class="yfm-note-content">
12+
<p>
13+
Outer content
1914
</p>
20-
<div class="yfm-note-content">
21-
<p>
22-
Inner content
23-
</p>
15+
<div class="yfm-note-container">
16+
<div class="yfm-note yfm-accent-info"
17+
note-type="info"
18+
>
19+
<p class="yfm-note-title">
20+
Inner title
21+
</p>
22+
<div class="yfm-note-content">
23+
<p>
24+
Inner content
25+
</p>
26+
</div>
27+
</div>
2428
</div>
2529
</div>
2630
</div>
2731
</div>
2832
`;
2933

3034
exports[`Alerts should render note with empty string title 1`] = `
31-
<div class="yfm-note yfm-accent-info"
32-
note-type="info"
33-
>
34-
<div class="yfm-note-content">
35-
<p>
36-
Note content with empty string title
37-
</p>
35+
<div class="yfm-note-container">
36+
<div class="yfm-note yfm-accent-info"
37+
note-type="info"
38+
>
39+
<div class="yfm-note-content">
40+
<p>
41+
Note content with empty string title
42+
</p>
43+
</div>
3844
</div>
3945
</div>
4046
`;
4147

4248
exports[`Alerts should render note without title (notesAutotitle: false) 1`] = `
43-
<div class="yfm-note yfm-accent-info"
44-
note-type="info"
45-
>
46-
<div class="yfm-note-content">
47-
<p>
48-
Note content without title
49-
</p>
49+
<div class="yfm-note-container">
50+
<div class="yfm-note yfm-accent-info"
51+
note-type="info"
52+
>
53+
<div class="yfm-note-content">
54+
<p>
55+
Note content without title
56+
</p>
57+
</div>
5058
</div>
5159
</div>
5260
`;
5361

5462
exports[`Alerts should render note without title (notesAutotitle: true) 1`] = `
55-
<div class="yfm-note yfm-accent-info"
56-
note-type="info"
57-
>
58-
<p class="yfm-note-title">
59-
Примечание
60-
</p>
61-
<div class="yfm-note-content">
62-
<p>
63-
Note content without title
63+
<div class="yfm-note-container">
64+
<div class="yfm-note yfm-accent-info"
65+
note-type="info"
66+
>
67+
<p class="yfm-note-title">
68+
Примечание
6469
</p>
70+
<div class="yfm-note-content">
71+
<p>
72+
Note content without title
73+
</p>
74+
</div>
6575
</div>
6676
</div>
6777
`;
6878

6979
exports[`Alerts should render siblings notes 1`] = `
70-
<div class="yfm-note yfm-accent-info"
71-
note-type="info"
72-
>
73-
<p class="yfm-note-title">
74-
Note title 1
75-
</p>
76-
<div class="yfm-note-content">
77-
<p>
78-
Note content 1
80+
<div class="yfm-note-container">
81+
<div class="yfm-note yfm-accent-info"
82+
note-type="info"
83+
>
84+
<p class="yfm-note-title">
85+
Note title 1
7986
</p>
87+
<div class="yfm-note-content">
88+
<p>
89+
Note content 1
90+
</p>
91+
</div>
8092
</div>
8193
</div>
82-
<div class="yfm-note yfm-accent-info"
83-
note-type="info"
84-
>
85-
<p class="yfm-note-title">
86-
Note title 2
87-
</p>
88-
<div class="yfm-note-content">
89-
<p>
90-
Note content 2
94+
<div class="yfm-note-container">
95+
<div class="yfm-note yfm-accent-info"
96+
note-type="info"
97+
>
98+
<p class="yfm-note-title">
99+
Note title 2
91100
</p>
101+
<div class="yfm-note-content">
102+
<p>
103+
Note content 2
104+
</p>
105+
</div>
92106
</div>
93107
</div>
94108
`;
95109

96110
exports[`Alerts should render simple note 1`] = `
97-
<div class="yfm-note yfm-accent-info"
98-
note-type="info"
99-
>
100-
<p class="yfm-note-title">
101-
Note title
102-
</p>
103-
<div class="yfm-note-content">
104-
<p>
105-
Note content
111+
<div class="yfm-note-container">
112+
<div class="yfm-note yfm-accent-info"
113+
note-type="info"
114+
>
115+
<p class="yfm-note-title">
116+
Note title
106117
</p>
118+
<div class="yfm-note-content">
119+
<p>
120+
Note content
121+
</p>
122+
</div>
107123
</div>
108124
</div>
109125
`;
110126

111127
exports[`Alerts should render title with format 1`] = `
112-
<div class="yfm-note yfm-accent-info"
113-
note-type="info"
114-
>
115-
<p class="yfm-note-title">
116-
<em>
117-
Italic note title
118-
</em>
119-
</p>
120-
<div class="yfm-note-content">
121-
<p>
122-
Content
128+
<div class="yfm-note-container">
129+
<div class="yfm-note yfm-accent-info"
130+
note-type="info"
131+
>
132+
<p class="yfm-note-title">
133+
<em>
134+
Italic note title
135+
</em>
123136
</p>
137+
<div class="yfm-note-content">
138+
<p>
139+
Content
140+
</p>
141+
</div>
124142
</div>
125143
</div>
126144
`;

0 commit comments

Comments
 (0)