fix: pass props down to styles

[aadgrant]

I needed props passed down to my Styles elements and Styles serializers (e.g. p, h2, h3, h4, blockquote, etc.) so I've tweaked this in Sanity Content.

Example use case - previously the below blocks would not render a class="hello-world" on <blockquote />

const blocks = [
  {
    _key: '03ed74fca82b',
    _type: 'block',
    class: 'hello-world',
    children: [],
    markDefs: [],
    style: 'blockquote'
  }
]

<blockquote class="hello-world"></blockquote>

I largely copied the code for the existing render() function, only tweak being to filter out markDefs from props.

markDefs aren't required or passed down to the Element - if we wanted to change this, this code could be used:

const props = Object.fromEntries(Object.entries(item).filter(([key]) => key !== '_type').map(
    ([key, value]) => {
      if (key === '_key') return ['key', value || null]
      **if (key === 'markDefs') return ['markDefs', value?.length ? value : null]**
      if (!isElement || validAttrs.includes(key)) return [key, value]
      return []
    },
  ))

[netlify]

✅ Deploy Preview for nuxt-sanity-module canceled.

Name	Link
🔨 Latest commit	2fd90af
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt-sanity-module/deploys/634c22dab9b3560007ba881c

[danielroe]

Would you add some snapshot tests to cover these changes? 🙏

[aadgrant]

Added tests, hope these are suitable!

Also added 'class' to validAttrs - not sure if this was excluded for any reason, but it means <p class="hello-world"> can render when a class is provided within the Sanity Blocks.

[danielroe]

Suggested change

	function renderStyle (item: Block, serializers: Required<Serializers>, children?: () => Children) {
	const { style, listItem } = item
	const serializer = serializers.styles[style]
	const isElement = typeof serializer === 'string'
	const props = Object.fromEntries(Object.entries(item).filter(([key]) => key !== '_type' && key !== 'markDefs' && key !== 'children').map(([key, value]) => {
	if (key === '_key')
	return ['key', value || null]
	if (!isElement || validAttrs.includes(key))
	return [key, value]
	return []
	}))
	if (!listItem && style && serializer) {
	return h(serializer as any, props, isVue2 ? children?.() : { default: children })
	}
	function renderStyle (item: Block, serializers: Required<Serializers>, children?: () => Children) {
	const serializer = item.style && serializers.styles[item.style]
	const isElement = typeof serializer === 'string'
	const props = Object.fromEntries(
	Object.entries(item)
	.filter(([key]) => key !== '_type' && key !== 'markDefs' && key !== 'children')
	.map(([key, value]) => {
	if (key === '_key') return ['key', value || null]
	if (!isElement || validAttrs.includes(key)) return [key, value]
	return []
	}),
	)
	if (!item.listItem && item.style && serializer) {
	return h(serializer as any, props, isVue2 ? children?.() : { default: children })
	}

[danielroe]

next time, please do tick the box to allow maintainers to commit changes directly to the PR branch. I'm remaking this PR ~> #523

[aadgrant]

Sorry, didn't realise that was a thing, will do in the future! :)

[danielroe]

No problem at all. Also very happy for you to pull in my commits on the other branch into this one so you get proper credit ❤️

[aadgrant]

Thanks! I think I've managed to do that! 😅

[danielroe]

Thank you! ❤️