Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

controls attribute for video element is not rendered for markdoc #12409

Open
1 task
ayZagen opened this issue Nov 11, 2024 · 3 comments
Open
1 task

controls attribute for video element is not rendered for markdoc #12409

ayZagen opened this issue Nov 11, 2024 · 3 comments
Labels
- P3: minor bug An edge case that only affects very specific usage (priority) pkg: markdoc Related to the `@astrojs/markdoc` package (scope)

Comments

@ayZagen
Copy link

ayZagen commented Nov 11, 2024

Astro Info

Astro                    v5.0.0-beta.5
Node                     v22.10.0
System                   Linux (x64)
Package Manager          unknown
Output                   server
Adapter                  @astrojs/node
Integrations             astro-expressive-code
                         @astrojs/markdoc
                         @astrojs/mdx
                         @astrojs/tailwind
                         @astrojs/vue

Describe the Bug

when you include a video element with controls attribute, the control attribute is not rendered in final html. It works with astro@4

What's the expected result?

It should render correctly as it is a valid attribute. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#controls

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-kq641b?file=src%2Fcontent%2Fdocs%2Fintro.mdoc

Participation

  • I am willing to submit a pull request for this issue.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Nov 11, 2024
@ayZagen
Copy link
Author

ayZagen commented Nov 11, 2024

I tried to reproduce this with Markdoc by using utils in integrations/markdoc but it seems render fine with markdoc renderer. Something is happening with astro renderer.

@ayZagen
Copy link
Author

ayZagen commented Nov 11, 2024

Thankfully, using controls="true" seems working.

@ayZagen ayZagen changed the title markdoc removes controls attribute for video element controls attribute for video element is not rendered for markdoc Nov 11, 2024
@ematipico ematipico added - P3: minor bug An edge case that only affects very specific usage (priority) pkg: markdoc Related to the `@astrojs/markdoc` package (scope) and removed needs triage Issue needs to be triaged labels Nov 11, 2024
@bluwy
Copy link
Member

bluwy commented Nov 12, 2024

HTML support in markdoc is supported through here:

return new Markdoc.Tag(name, safeAttributes, children);

When control is passed, the attributes received is { control: '' }, and that seems to trip markdoc into thinking that there's no value and remove it (?). I don't know if there's a markdoc API or option to treat rendering boolean attributes properly, otherwise we might have to manually check the attributes and mutate as { control: true } instead.

FWIW we have our own list of boolean attributes:

const htmlBooleanAttributes =
/^(?:allowfullscreen|async|autofocus|autoplay|checked|controls|default|defer|disabled|disablepictureinpicture|disableremoteplayback|formnovalidate|hidden|loop|nomodule|novalidate|open|playsinline|readonly|required|reversed|scoped|seamless|selected|itemscope)$/i;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
- P3: minor bug An edge case that only affects very specific usage (priority) pkg: markdoc Related to the `@astrojs/markdoc` package (scope)
Projects
None yet
Development

No branches or pull requests

3 participants