Skip to content

Commit

Permalink
feat: use <details> tag for cuts (#476)
Browse files Browse the repository at this point in the history 
* 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.
  • Loading branch information
@Pavel-Tyan
Pavel-Tyan authored Aug 5, 2024
1 parent ac1175c commit dca71bb
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 45 deletions.
23 changes: 11 additions & 12 deletions src/scss/_cut.scss
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,28 @@
.yfm-cut {
$class: &;

margin-bottom: 15px;

&-title {
list-style: none;
cursor: pointer;
position: relative;
user-select: none;
padding: 5px 0 5px 30px;

&::-webkit-details-marker {
display: none;
}

&:focus {
outline-color: $accentColor;
}

&:before {
content: '';
z-index: 1;
left: 0;
top: 50%;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgICA8cGF0aCBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0ibm9uZSIgZD0iTTMgNmw1IDUgNS01Ii8+Cjwvc3ZnPgo=");
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgICA8cGF0aCBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0ibm9uZSIgZD0iTTMgNmw1IDUgNS01Ii8+Cjwvc3ZnPgo=');
transform: translateY(-50%) rotate(-90deg);
transition: transform 0.3s ease;
height: 20px;
Expand All @@ -24,17 +32,10 @@
}

&-content {
display: none;
overflow: hidden;
transition: height 0.3s ease-in-out;
padding: 5px 0 15px 30px;
}

&.open {
> #{$class}-content {
display: revert;
padding: 5px 0 15px 30px;
}

> #{$class}-title:before {
transform: translateY(-50%);
}
Expand All @@ -52,5 +53,3 @@
}
}
}


8 changes: 4 additions & 4 deletions src/transform/plugins/cut.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,19 +39,19 @@ const cut: MarkdownItPluginCb = (md, {path, log}) => {
continue;
}

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

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

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

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

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

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

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

const insideTokens = [
Expand Down
74 changes: 45 additions & 29 deletions test/cut.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,10 @@ describe('Cut plugin', () => {
'{% cut "Cut title" %}\n' + '\n' + 'Cut content\n' + '\n' + '{% endcut %}',
).replace(/(\r\n|\n|\r)/gm, ''),
).toBe(
'<div class="yfm-cut"><div class="yfm-cut-title">Cut title</div>' +
'<div class="yfm-cut-content"><p>Cut content</p>' +
'</div></div>',
'<details class="yfm-cut">' +
'<summary class="yfm-cut-title">Cut title</summary>' +
'<div class="yfm-cut-content"><p>Cut content</p></div>' +
'</details>',
);
});

Expand All @@ -35,9 +36,12 @@ describe('Cut plugin', () => {
'{% endcut %}',
).replace(/(\r\n|\n|\r)/gm, ''),
).toBe(
'<div class="yfm-cut"><div class="yfm-cut-title">Cut title</div>' +
'<div class="yfm-cut-content"><pre><code class="hljs">Code</code></pre>' +
'</div></div>',
'<details class="yfm-cut">' +
'<summary class="yfm-cut-title">Cut title</summary>' +
'<div class="yfm-cut-content">' +
'<pre><code class="hljs">Code</code></pre>' +
'</div>' +
'</details>',
);
});

Expand All @@ -57,12 +61,15 @@ describe('Cut plugin', () => {
'{% endcut %}',
).replace(/(\r\n|\n|\r)/gm, ''),
).toBe(
'<div class="yfm-cut"><div class="yfm-cut-title">Cut title 1</div>' +
'<div class="yfm-cut-content"><p>Cut content 1</p></div>' +
'</div>' +
'<div class="yfm-cut"><div class="yfm-cut-title">Cut title 2</div>' +
'<div class="yfm-cut-content"><p>Cut content 2</p></div>' +
'</div>',
'<details class="yfm-cut">' +
'<summary class="yfm-cut-title">Cut title 1</summary>' +
'<div class="yfm-cut-content"><p>Cut content 1</p>' +
'</div></details>' +
'<details class="yfm-cut">' +
'<summary class="yfm-cut-title">Cut title 2</summary>' +
'<div class="yfm-cut-content">' +
'<p>Cut content 2</p>' +
'</div></details>',
);
});

Expand All @@ -82,11 +89,12 @@ describe('Cut plugin', () => {
'{% endcut %}',
).replace(/(\r\n|\n|\r)/gm, ''),
).toBe(
'<div class="yfm-cut"><div class="yfm-cut-title">Outer title</div>' +
'<div class="yfm-cut-content"><p>Outer content</p>' +
'<div class="yfm-cut"><div class="yfm-cut-title">Inner title</div>' +
'<div class="yfm-cut-content"><p>Inner content</p></div>' +
'</div></div></div>',
'<details class="yfm-cut"><summary class="yfm-cut-title">' +
'Outer title</summary><div class="yfm-cut-content">' +
'<p>Outer content</p><details class="yfm-cut">' +
'<summary class="yfm-cut-title">Inner title</summary>' +
'<div class="yfm-cut-content"><p>Inner content</p>' +
'</div></details></div></details>',
);
});

Expand All @@ -100,10 +108,11 @@ describe('Cut plugin', () => {
'{% endcut %}',
).replace(/(\r\n|\n|\r)/gm, ''),
).toBe(
'<div class="yfm-cut">' +
'<div class="yfm-cut-title"><strong>Strong cut title</strong></div>' +
'<div class="yfm-cut-content"><p>Content we want to hide</p></div>' +
'</div>',
'<details class="yfm-cut"><summary class="yfm-cut-title">' +
'<strong>Strong cut title</strong>' +
'</summary><div class="yfm-cut-content">' +
'<p>Content we want to hide</p>' +
'</div></details>',
);
});

Expand All @@ -119,8 +128,11 @@ describe('Cut plugin', () => {
'{% endcut %}',
).replace(/(\r\n|\n|\r)/gm, ''),
).toBe(
'<ul><li><div class="yfm-cut"><div class="yfm-cut-title">Cut 1</div>' +
'<div class="yfm-cut-content"><p>Some text</p><p>Some text</p></div></div></li></ul>',
'<ul><li>' +
'<details class="yfm-cut"><summary class="yfm-cut-title">Cut 1</summary>' +
'<div class="yfm-cut-content"><p>Some text</p>' +
'<p>Some text</p>' +
'</div></details></li></ul>',
);
});

Expand All @@ -146,12 +158,16 @@ describe('Cut plugin', () => {
'{% endcut %}',
).replace(/(\r\n|\n|\r)/gm, ''),
).toBe(
'<ul><li><div class="yfm-cut"><div class="yfm-cut-title">Cut 1</div>' +
'<div class="yfm-cut-content"><p>Some text</p></div></div></li>' +
'<li><div class="yfm-cut"><div class="yfm-cut-title">Cut 2</div>' +
'<div class="yfm-cut-content"><p>Some text</p></div></div></li>' +
'<li><div class="yfm-cut"><div class="yfm-cut-title">Cut 3</div>' +
'<div class="yfm-cut-content"><p>Some text</p></div></div></li></ul>',
'<ul><li>' +
'<details class="yfm-cut">' +
'<summary class="yfm-cut-title">Cut 1</summary>' +
'<div class="yfm-cut-content"><p>Some text</p></div>' +
'</details></li>' +
'<li><details class="yfm-cut">' +
'<summary class="yfm-cut-title">Cut 2</summary><div class="yfm-cut-content">' +
'<p>Some text</p></div></details></li><li><details class="yfm-cut">' +
'<summary class="yfm-cut-title">Cut 3</summary>' +
'<div class="yfm-cut-content"><p>Some text</p></div></details></li></ul>',
);
});
});

0 comments on commit dca71bb

Please sign in to comment.