-
Notifications
You must be signed in to change notification settings - Fork 29
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
Anchored Headings for Portable Text #52
Comments
Ah okay I've just ready the migration docs here... https://github.com/portabletext/react-portabletext/blob/main/MIGRATING.md and so... const { node, children } = props
const { style, _key } = node becomes... const { value, children } = props
const { style, _key } = value What about the return |
In case anyone else finds this helpful - here's how I did this in the end.... creating a url-safe kebab-case ID for the heading element and anchor ref using import * as React from 'react'
import { PortableText } from '@portabletext/react'
import slugify from 'slugify'
const getTextFromChildren = (children: React.ReactNode) => {
let text = ''
React.Children.map(children, child => {
if (typeof child === 'string') {
text += child
}
})
return text
}
type HeadingWithAnchorProps = {
heading: string
children: React.ReactNode
}
function HeadingWithAnchor({ heading, children }: HeadingWithAnchorProps) {
const text = getTextFromChildren(children)
const headingId = slugify(text, { lower: true })
const Element = heading as keyof JSX.IntrinsicElements
return (
<Element id={headingId}>
<a href={`#${headingId}`} aria-hidden="true" tabIndex={-1}>
#
</a>
<span>{children}</span>
</Element>
)
}
const components: PortableTextComponents = {
block: {
h2: ({ children }) => {
return <HeadingWithAnchor heading="h2">{children}</HeadingWithAnchor>
},
h3: ({ children }) => {
return <HeadingWithAnchor heading="h3">{children}</HeadingWithAnchor>
},
h4: ({ children }) => {
return <HeadingWithAnchor heading="h4">{children}</HeadingWithAnchor>
},
}
} |
Wondering how we would do something similar to this...
https://www.sanity.io/schemas/anchored-headings-for-portable-text-a6c70b6e - created by @kmelve
I think I understand how to create the new
block
definitions for h1, h2 etc..., or a complete handler like in the example above, but in the code below, I don't believenode
is available fromprops
? And I'm not sure what to return instead ofreturn PortableText.defaultSerializers.types.block(props)
(sincedefaultSerializers
is no longer onPortableText
)Any thoughts or suggestions greatly appreciated.
The text was updated successfully, but these errors were encountered: