Comments (2)
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 slugify
and a helper function to extract the text from the heading element.
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>
},
}
}
from react-portabletext.
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 defaultSerializers
? (or the 'components') equivalent?
from react-portabletext.
Related Issues (20)
- Build Fail due to ReferenceError: createElement is not defined HOT 6
- unknownBlockStyle is not working / does nothing
- Children prop no longer available in custom block content HOT 1
- Marks Not Rendering HOT 1
- Issue passing client components on Next.js v14.* HOT 2
- Lists do not work with Styles properly
- Certain custom components cause a 500 internal server error HOT 1
- Cannot render elements with `type` of `text` or `span` using `types` HOT 4
- Can't get item position a list HOT 1
- Dependency Dashboard
- Version 2.0.1 breaks backwards compatibility HOT 3
- Can't Get Component to work HOT 1
- ReactServerComponentsError when using with Dynamic Routing in Next.js 13.4 App Router configuration HOT 1
- Nested Lists? HOT 2
- react-portable-text has no property 'toPlainText" HOT 4
- PortableText Typescript Error HOT 5
- Cannot render embedded image HOT 2
- [Feature request] Add a component wrapper prop
- Issues using with Nextjs and tailwind HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-portabletext.