Skip to content

Commit dca71bb

Browse files
Pavel-TyanPavel-Tyan
authored
feat: use <details> tag for cuts (#476)
* refactor: use <details> tag for cuts Replace div tags to <details> and <summary> tags. Delete CSS selector for closed cuts state because there is no need to write 2 separate selectors for cuts state (open/closed) after using <details> tag. Add "list-style" and "::-webkit-details-marker" to delete default toggle marker. Add color for focus outline because <details> tag allows to use keyboard navigation for cuts. * test: change tests for cuts Change tests due to replacing <div> tags to <details> and <summary> tags in cuts.
1 parent ac1175c commit dca71bb

File tree

3 files changed

+60
-45
lines changed

3 files changed

+60
-45
lines changed

‎src/scss/_cut.scss

+11-12
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,28 @@
11
.yfm-cut {
22
$class: &;
3-
43
margin-bottom: 15px;
54

65
&-title {
6+
list-style: none;
77
cursor: pointer;
88
position: relative;
99
user-select: none;
1010
padding: 5px 0 5px 30px;
1111

12+
&::-webkit-details-marker {
13+
display: none;
14+
}
15+
16+
&:focus {
17+
outline-color: $accentColor;
18+
}
19+
1220
&:before {
1321
content: '';
1422
z-index: 1;
1523
left: 0;
1624
top: 50%;
17-
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgICA8cGF0aCBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0ibm9uZSIgZD0iTTMgNmw1IDUgNS01Ii8+Cjwvc3ZnPgo=");
25+
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgICA8cGF0aCBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0ibm9uZSIgZD0iTTMgNmw1IDUgNS01Ii8+Cjwvc3ZnPgo=');
1826
transform: translateY(-50%) rotate(-90deg);
1927
transition: transform 0.3s ease;
2028
height: 20px;
@@ -24,17 +32,10 @@
2432
}
2533

2634
&-content {
27-
display: none;
28-
overflow: hidden;
29-
transition: height 0.3s ease-in-out;
35+
padding: 5px 0 15px 30px;
3036
}
3137

3238
&.open {
33-
> #{$class}-content {
34-
display: revert;
35-
padding: 5px 0 15px 30px;
36-
}
37-
3839
> #{$class}-title:before {
3940
transform: translateY(-50%);
4041
}
@@ -52,5 +53,3 @@
5253
}
5354
}
5455
}
55-
56-

‎src/transform/plugins/cut.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -39,19 +39,19 @@ const cut: MarkdownItPluginCb = (md, {path, log}) => {
3939
continue;
4040
}
4141

42-
const newOpenToken = new state.Token('yfm_cut_open', 'div', 1);
42+
const newOpenToken = new state.Token('yfm_cut_open', 'details', 1);
4343
newOpenToken.attrSet('class', 'yfm-cut');
4444
newOpenToken.map = tokens[i].map;
4545

46-
const titleOpen = new state.Token('yfm_cut_title_open', 'div', 1);
46+
const titleOpen = new state.Token('yfm_cut_title_open', 'summary', 1);
4747
titleOpen.attrSet('class', 'yfm-cut-title');
4848

4949
const titleInline = state.md.parseInline(
5050
match[1] === undefined ? 'ad' : match[1],
5151
state.env,
5252
)[0];
5353

54-
const titleClose = new state.Token('yfm_cut_title_close', 'div', -1);
54+
const titleClose = new state.Token('yfm_cut_title_close', 'summary', -1);
5555

5656
const contentOpen = new state.Token('yfm_cut_content_open', 'div', 1);
5757
contentOpen.attrSet('class', 'yfm-cut-content');
@@ -65,7 +65,7 @@ const cut: MarkdownItPluginCb = (md, {path, log}) => {
6565

6666
const contentClose = new state.Token('yfm_cut_content_close', 'div', -1);
6767

68-
const newCloseToken = new state.Token('yfm_cut_close', 'div', -1);
68+
const newCloseToken = new state.Token('yfm_cut_close', 'details', -1);
6969
newCloseToken.map = tokens[closeTokenIdx].map;
7070

7171
const insideTokens = [

‎test/cut.test.ts

+45-29
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,10 @@ describe('Cut plugin', () => {
1717
'{% cut "Cut title" %}\n' + '\n' + 'Cut content\n' + '\n' + '{% endcut %}',
1818
).replace(/(\r\n|\n|\r)/gm, ''),
1919
).toBe(
20-
'<div class="yfm-cut"><div class="yfm-cut-title">Cut title</div>' +
21-
'<div class="yfm-cut-content"><p>Cut content</p>' +
22-
'</div></div>',
20+
'<details class="yfm-cut">' +
21+
'<summary class="yfm-cut-title">Cut title</summary>' +
22+
'<div class="yfm-cut-content"><p>Cut content</p></div>' +
23+
'</details>',
2324
);
2425
});
2526

@@ -35,9 +36,12 @@ describe('Cut plugin', () => {
3536
'{% endcut %}',
3637
).replace(/(\r\n|\n|\r)/gm, ''),
3738
).toBe(
38-
'<div class="yfm-cut"><div class="yfm-cut-title">Cut title</div>' +
39-
'<div class="yfm-cut-content"><pre><code class="hljs">Code</code></pre>' +
40-
'</div></div>',
39+
'<details class="yfm-cut">' +
40+
'<summary class="yfm-cut-title">Cut title</summary>' +
41+
'<div class="yfm-cut-content">' +
42+
'<pre><code class="hljs">Code</code></pre>' +
43+
'</div>' +
44+
'</details>',
4145
);
4246
});
4347

@@ -57,12 +61,15 @@ describe('Cut plugin', () => {
5761
'{% endcut %}',
5862
).replace(/(\r\n|\n|\r)/gm, ''),
5963
).toBe(
60-
'<div class="yfm-cut"><div class="yfm-cut-title">Cut title 1</div>' +
61-
'<div class="yfm-cut-content"><p>Cut content 1</p></div>' +
62-
'</div>' +
63-
'<div class="yfm-cut"><div class="yfm-cut-title">Cut title 2</div>' +
64-
'<div class="yfm-cut-content"><p>Cut content 2</p></div>' +
65-
'</div>',
64+
'<details class="yfm-cut">' +
65+
'<summary class="yfm-cut-title">Cut title 1</summary>' +
66+
'<div class="yfm-cut-content"><p>Cut content 1</p>' +
67+
'</div></details>' +
68+
'<details class="yfm-cut">' +
69+
'<summary class="yfm-cut-title">Cut title 2</summary>' +
70+
'<div class="yfm-cut-content">' +
71+
'<p>Cut content 2</p>' +
72+
'</div></details>',
6673
);
6774
});
6875

@@ -82,11 +89,12 @@ describe('Cut plugin', () => {
8289
'{% endcut %}',
8390
).replace(/(\r\n|\n|\r)/gm, ''),
8491
).toBe(
85-
'<div class="yfm-cut"><div class="yfm-cut-title">Outer title</div>' +
86-
'<div class="yfm-cut-content"><p>Outer content</p>' +
87-
'<div class="yfm-cut"><div class="yfm-cut-title">Inner title</div>' +
88-
'<div class="yfm-cut-content"><p>Inner content</p></div>' +
89-
'</div></div></div>',
92+
'<details class="yfm-cut"><summary class="yfm-cut-title">' +
93+
'Outer title</summary><div class="yfm-cut-content">' +
94+
'<p>Outer content</p><details class="yfm-cut">' +
95+
'<summary class="yfm-cut-title">Inner title</summary>' +
96+
'<div class="yfm-cut-content"><p>Inner content</p>' +
97+
'</div></details></div></details>',
9098
);
9199
});
92100

@@ -100,10 +108,11 @@ describe('Cut plugin', () => {
100108
'{% endcut %}',
101109
).replace(/(\r\n|\n|\r)/gm, ''),
102110
).toBe(
103-
'<div class="yfm-cut">' +
104-
'<div class="yfm-cut-title"><strong>Strong cut title</strong></div>' +
105-
'<div class="yfm-cut-content"><p>Content we want to hide</p></div>' +
106-
'</div>',
111+
'<details class="yfm-cut"><summary class="yfm-cut-title">' +
112+
'<strong>Strong cut title</strong>' +
113+
'</summary><div class="yfm-cut-content">' +
114+
'<p>Content we want to hide</p>' +
115+
'</div></details>',
107116
);
108117
});
109118

@@ -119,8 +128,11 @@ describe('Cut plugin', () => {
119128
'{% endcut %}',
120129
).replace(/(\r\n|\n|\r)/gm, ''),
121130
).toBe(
122-
'<ul><li><div class="yfm-cut"><div class="yfm-cut-title">Cut 1</div>' +
123-
'<div class="yfm-cut-content"><p>Some text</p><p>Some text</p></div></div></li></ul>',
131+
'<ul><li>' +
132+
'<details class="yfm-cut"><summary class="yfm-cut-title">Cut 1</summary>' +
133+
'<div class="yfm-cut-content"><p>Some text</p>' +
134+
'<p>Some text</p>' +
135+
'</div></details></li></ul>',
124136
);
125137
});
126138

@@ -146,12 +158,16 @@ describe('Cut plugin', () => {
146158
'{% endcut %}',
147159
).replace(/(\r\n|\n|\r)/gm, ''),
148160
).toBe(
149-
'<ul><li><div class="yfm-cut"><div class="yfm-cut-title">Cut 1</div>' +
150-
'<div class="yfm-cut-content"><p>Some text</p></div></div></li>' +
151-
'<li><div class="yfm-cut"><div class="yfm-cut-title">Cut 2</div>' +
152-
'<div class="yfm-cut-content"><p>Some text</p></div></div></li>' +
153-
'<li><div class="yfm-cut"><div class="yfm-cut-title">Cut 3</div>' +
154-
'<div class="yfm-cut-content"><p>Some text</p></div></div></li></ul>',
161+
'<ul><li>' +
162+
'<details class="yfm-cut">' +
163+
'<summary class="yfm-cut-title">Cut 1</summary>' +
164+
'<div class="yfm-cut-content"><p>Some text</p></div>' +
165+
'</details></li>' +
166+
'<li><details class="yfm-cut">' +
167+
'<summary class="yfm-cut-title">Cut 2</summary><div class="yfm-cut-content">' +
168+
'<p>Some text</p></div></details></li><li><details class="yfm-cut">' +
169+
'<summary class="yfm-cut-title">Cut 3</summary>' +
170+
'<div class="yfm-cut-content"><p>Some text</p></div></details></li></ul>',
155171
);
156172
});
157173
});

0 commit comments

Comments
 (0)