Can't use autoplay attribute in video tag in Markdown

[thely]

Version

@nuxt/content: 1.5.0
nuxt: 2.13.0

Reproduction Link

https://codesandbox.io/s/nuxtcontent-demo-p9v26?file=/content/about.md

Steps to reproduce

Basically: Make a video tag that should autoplay inside of a nuxt/content Markdown file. Give it the gif treatment: autoplay, loop, muted, playsinline.

In the codesandbox: Check the about page. The video renders, but doesn't autoplay. Interestingly, since #304 is still an issue, I tested this first with 0.3.0, which had no video autoplay problems. I updated the codesandbox to 1.5.0, and only then did the hyphenation start. So it's only in later versions that this is happening.

What is Expected?

Video tag that looks like this, as it appears in the markdown file, which should autoplay!

<video autoplay loop muted playsinline>
  <source src="/videos/space/bloop-flowers.mov" type="video/mp4">
</video>

What is actually happening?

@nuxt/content seems to be splitting up the attributes, like it does for normal components, which breaks autoplaying.

<video auto-play="true" loop="loop" muted="muted" plays-inline="true">
  <source src="/videos/space/bloop-flowers.mov" type="video/mp4">
</video>

If I right-click on the video, it's clearly looping and muted, but the dash in the middle of autoplay prevents it from actually autoplaying. I haven't tested this yet, but I'm sure playsinline getting split up means it won't autoplay on mobile Safari, either.

[violoncelloCH]

I just realized that my svgs inside markdown which are fetched over @nuxt/content aren't scaling because viewBox="..." gets transformed to view-box="..." what effectively breaks it.
This seems to be the same or at least related.

Update:
Looks to me like all params are transformed to kebab-case instead of just those of actual vue-components here:

content/lib/parsers/markdown/handlers/html.js

Lines 5 to 13 in 00e6fef

	function html (h, node) {
	const tagName = getTagName(node.value)
	// transform to kebab-case (useful for PascalCase vue components)
	if (tagName) {
	node.value = node.value.replace(tagName, paramCase(tagName))
	}
	return handlers.html(h, node)
	}

[Azurewarth0920]

The markdown parser parses the video tag as

[
  {
    type: 'element',
    tag: 'video',
    props: {
      autoPlay: true,
      loop: true,
      muted: true,
      playsInline: true
    },
    children: [
      [Object],
      [Object],
      [Object]
    ]
  }
]

The double word props are parsed as camel case, so vue render the camel case props into kebab case props and it broke.
Maybe we should try to fix the markdown parser.

[benjamincanac]

The issue is here:

content/packages/content/templates/nuxt-content.js

Line 39 in 34439eb

obj[hyphenate(key)] = value

When the nuxt-content renders the AST we transform all camelCase prop to kebab-case since #139.

[benjamincanac]

#359 should fix this issue for good!