I've searched everywhere for this but I could only find one article about it which was pretty vague.
So I'm rendering the rich text content using the BlocksRenderer component from Strapi itself. Is it possible to create a table of contents from the data gotten from strapi rich text?
This is my Blog component:
import { BlocksRenderer, type BlocksContent} from "@strapi/blocks-react-renderer";
const Blog = () => {
const { data } = useGetBlogsByIdQuery(slug);
const content: BlocksContent = data ? .data ? .attributes ? .content;
return (
<BlocksRenderer content = {content} />
)
}
I would appreciate any tips
Just finding out the solution for the same and came across this approach which somehow worked for me.
heading: ({ children, level }) => {
const idString = children
.map((child) => child.props.text)
.join("-");
const id = String(idString)
.toLowerCase()
.replace(/<\/?[^>]+(>|$)/g, "")
.trim()
.replace(/\s+/g, "-")
.replace(/[^\w-]+/g, "");
switch (level) {
case 1:
return (
<h1 variant="h1" id={id}>
{children}
</h1>
);
case 2:
return (
<h2 variant="h2" id={id}>
{children}
</h2>
);
case 3:
return (
<h3 variant="h3" id={id}>
{children}
</h3>
);
case 4:
return (
<h4 variant="h4" id={id}>
{children}
</h4>
);
case 5:
return (
<h5 variant="h5" id={id}>
{children}
</h5>
);
case 6:
return (
<h6 variant="h6" id={id}>
{children}
</h6>
);
default:
return <p variant="p">{children}</p>;
}
},
<aside className="hidden lg:block md:w-1/4">
<div className="sticky top-10 h-screen">
<h3 className="text-lg my-2">Table of Content</h3>
<ul className="list-none my-4">
{tableOfContents.map((heading) => (
<li className="my-2" key={heading.id}>
<a
href={`#${heading.id}`}
className={
activeHeading === heading.id
? "text-blue-700"
: "text-gray-600"
}
>
{heading.text}
</a>
</li>
))}
</ul>
</div>
</aside>