Skip to content

Commit

Permalink
fix: clean up empty paragraphs
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: empty <p></p> tags now properly sourround the following element, eg pictures
  • Loading branch information
@tripodsan
tripodsan committed May 10, 2022
1 parent 529facf commit 30547b7
Show file tree
Hide file tree
Showing 5 changed files with 152 additions and 236 deletions.
2 changes: 1 addition & 1 deletion src/utils/heading-handler.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { toString } from 'mdast-util-to-string';
import strip from 'strip-markdown';

/**
*Injects heading identifiers during the MDAST to VDOM transformation.
* Injects heading identifiers during the MDAST to VDOM transformation.
*/
export default function heading(slugger) {
return function handler(h, node) {
Expand Down
25 changes: 0 additions & 25 deletions src/utils/mdast-to-hast.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
*/
import { toHast as mdast2hast, defaultHandlers } from 'mdast-util-to-hast';
import { raw } from 'hast-util-raw';
import { visit, CONTINUE } from 'unist-util-visit';

import section from './section-handler.js';
import heading from './heading-handler.js';
Expand All @@ -32,29 +31,5 @@ export default function getHast(mdast, slugger) {
allowDangerousHtml: true,
});

// TODO: remove for cleanup
// the following recreates a bug with the old vdom transformer that would create a
// <p></p> for all raw `<p>` before a block with void elements.
visit(hast, (node, idx, parent) => {
if (node.type !== 'raw' || node.value !== '<p>') {
return CONTINUE;
}
// check if any other raw empty nodes follow until the </p>
for (let i = idx + 1; i < parent.children.length; i += 1) {
const next = parent.children[i];
if (next.type === 'raw') {
if (next.value === '</p>') {
return i + 1;
}
if (next.value === '<br>' || next.value.startsWith('<img ')) {
node.value = '<p></p>';
return i + 1;
}
}
}
/* c8 ignore next */
return CONTINUE;
});

return raw(hast);
}
35 changes: 19 additions & 16 deletions test/fixtures/content/page-block-1-col.html
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,26 @@
<main>
<div><h1 id="single-col-block">Single col block</h1></div>
<div>
<h1 id="single-col-block">Single col block</h1>
</div>
<div>
<div class="about-bio">
<div>
<div><p></p>
<picture>
<source media="(max-width: 400px)" srcset="./media_c8248664afb141a601d00412936eff2a20f8d5d4.png?width=750&amp;format=webply&amp;optimize=medium">
<img src="./media_c8248664afb141a601d00412936eff2a20f8d5d4.png?width=2000&amp;format=webply&amp;optimize=medium" loading="eager">
</picture>
<p></p>
<h2 id="jesus-ramirez">Jesus Ramirez</h2><h4 id="one-of-the-worlds-top-photoshop-instructors-jesus-has-taught-millions-of-creatives-like-you">One of the world's top Photoshop instructors, Jesus
has taught millions of creatives like you.</h4>
<p></p>
<picture>
<source media="(max-width: 400px)" srcset="./media_450460dcb5e742c3065ed87d0fd7c117757cb519.png?width=750&amp;format=webply&amp;optimize=medium">
<img src="./media_450460dcb5e742c3065ed87d0fd7c117757cb519.png?width=2000&amp;format=webply&amp;optimize=medium" loading="lazy">
</picture>
<a href="https://www.behance.net/JRfromPTC">Follow Me</a>
<p></p></div>
<div>
<p>
<picture>
<source media="(max-width: 400px)" srcset="./media_c8248664afb141a601d00412936eff2a20f8d5d4.png?width=750&#x26;format=webply&#x26;optimize=medium">
<img src="./media_c8248664afb141a601d00412936eff2a20f8d5d4.png?width=2000&#x26;format=webply&#x26;optimize=medium" loading="eager">
</picture>
</p>
<h2 id="jesus-ramirez">Jesus Ramirez</h2>
<h4 id="one-of-the-worlds-top-photoshop-instructors-jesus-has-taught-millions-of-creatives-like-you">One of the world's top Photoshop instructors, Jesus has taught millions of creatives like you.</h4>
<p>
<picture>
<source media="(max-width: 400px)" srcset="./media_450460dcb5e742c3065ed87d0fd7c117757cb519.png?width=750&#x26;format=webply&#x26;optimize=medium">
<img src="./media_450460dcb5e742c3065ed87d0fd7c117757cb519.png?width=2000&#x26;format=webply&#x26;optimize=medium" loading="lazy">
</picture><a href="https://www.behance.net/JRfromPTC">Follow Me</a>
</p>
</div>
</div>
</div>
</div>
Expand Down
35 changes: 19 additions & 16 deletions test/fixtures/content/page-block-1-col.plain.html
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,26 @@
<body>
<div><h1 id="single-col-block">Single col block</h1></div>
<div>
<h1 id="single-col-block">Single col block</h1>
</div>
<div>
<div class="about-bio">
<div>
<div><p></p>
<picture>
<source media="(max-width: 400px)" srcset="./media_c8248664afb141a601d00412936eff2a20f8d5d4.png?width=750&amp;format=webply&amp;optimize=medium">
<img src="./media_c8248664afb141a601d00412936eff2a20f8d5d4.png?width=2000&amp;format=webply&amp;optimize=medium" loading="eager">
</picture>
<p></p>
<h2 id="jesus-ramirez">Jesus Ramirez</h2><h4 id="one-of-the-worlds-top-photoshop-instructors-jesus-has-taught-millions-of-creatives-like-you">One of the world's top Photoshop instructors, Jesus has
taught millions of creatives like you.</h4>
<p></p>
<picture>
<source media="(max-width: 400px)" srcset="./media_450460dcb5e742c3065ed87d0fd7c117757cb519.png?width=750&amp;format=webply&amp;optimize=medium">
<img src="./media_450460dcb5e742c3065ed87d0fd7c117757cb519.png?width=2000&amp;format=webply&amp;optimize=medium" loading="lazy">
</picture>
<a href="https://www.behance.net/JRfromPTC">Follow Me</a>
<p></p></div>
<div>
<p>
<picture>
<source media="(max-width: 400px)" srcset="./media_c8248664afb141a601d00412936eff2a20f8d5d4.png?width=750&#x26;format=webply&#x26;optimize=medium">
<img src="./media_c8248664afb141a601d00412936eff2a20f8d5d4.png?width=2000&#x26;format=webply&#x26;optimize=medium" loading="eager">
</picture>
</p>
<h2 id="jesus-ramirez">Jesus Ramirez</h2>
<h4 id="one-of-the-worlds-top-photoshop-instructors-jesus-has-taught-millions-of-creatives-like-you">One of the world's top Photoshop instructors, Jesus has taught millions of creatives like you.</h4>
<p>
<picture>
<source media="(max-width: 400px)" srcset="./media_450460dcb5e742c3065ed87d0fd7c117757cb519.png?width=750&#x26;format=webply&#x26;optimize=medium">
<img src="./media_450460dcb5e742c3065ed87d0fd7c117757cb519.png?width=2000&#x26;format=webply&#x26;optimize=medium" loading="lazy">
</picture><a href="https://www.behance.net/JRfromPTC">Follow Me</a>
</p>
</div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 30547b7

Please sign in to comment.