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

How do I render custom html in the marks serializer for block content? #551

Open
toddpadwick opened this issue Nov 8, 2022 · 3 comments
Labels
question Further information is requested

Comments

@toddpadwick
Copy link

I have a sanity block field which contains a 'pullquote' mark. What i need to do is clone the contents of this text and append it to the containing paragraph text, while leaving the original text as is. This way I can style up the pulled quote tag but leave the original text rendering as normal. Here is the desired result:
Screenshot 2022-11-08 at 16 42 22

I tried something like this, but the HTML renders as a string, not HTML:

marks: {
      pullquote:(props,children) =>{return `<span class="pullquote">${children.slots.default()[0].children}</span><span class="pulledquote">${children.slots.default()[0].children}</span>`}
    }

@toddpadwick toddpadwick added the question Further information is requested label Nov 8, 2022
Copy link
Collaborator

danielroe commented Nov 8, 2022

Vue render syntax works like this:

import { h } from 'vue'

export default {
  render: () => h('div', { innerHTML: '<span>hi</span>' })
}

See https://vuejs.org/api/render-function.html#render-function-apis.

@toddpadwick
Copy link
Author

toddpadwick commented Nov 8, 2022

Thanks @danielroe I think thats what I need, however, I'm still struggling to interpret that in the context of the Nuxt Sanity serializer. I've tried this with no luck:

marks: {
      pullquote:( props, children ) => {
        return h('span', {class:'pullquote', innerHTML:children.slots.default()[0].children)
      }
    }

@hajiskyy
Copy link

hajiskyy commented Sep 5, 2024

2 years later, incase anyone else is seeking a solution for this here's a simple solution i figured

const serializers = {
	marks: {
		textColor: (props: any, children: any) =>
			h("span", { style: { color: props.value } }, children.slots),
	},
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

3 participants