delucis / astro-embed

Low-JavaScript embed components for Astro websites
https://astro-embed.netlify.app
MIT License
172 stars 25 forks source link

MDX integration embeds replace their parent paragraph instead of their link node #66

Closed delucis closed 9 months ago

delucis commented 9 months ago

Fixes #65

Previously, the remark plugin looked for the equivalent of p > a:only-child to find URLs to potentially replace with an embed and, when finding a URL match, replaced the link node. This resulted in DOM like p > embed.

65 noticed this was causing issues if embed code included elements not permitted inside <p> (<blockquote> in the case of Twitter’s oEmbed markup). This causes HTML parsing to do some creative stuff and can cause some layout weirdness depending on what a user’s CSS looks like.

This PR updates the remark plugin to replace the full paragraph node with the embed instead of just the link, so this should no longer be an issue.

Existing embeds should render as expected without the wrapper <p> — although spacing between embeds may be impacted (<p> has default margins, but the embed nodes do not).

changeset-bot[bot] commented 9 months ago

🦋 Changeset detected

Latest commit: 9ab9c82bd4fb35a37d18905c189e0ddbb60f8a9e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages | Name | Type | | ---------------------------------------- | ----- | | @astro-community/astro-embed-integration | Minor | | astro-embed | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR