How to create a table of contents from Strapi rich text field

Question

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

Answer 1

Use can use filter to get headlines, and in the blocks renderer you have to create id’s for headlines so you can scroll to anchor. However this is not going to be supported by blocks, so likely you gonna need to fork blocks render repo. And modify the functions…