feat: parse code blocks children to plain text

[remidej]

What does it do?

It adds a plainText prop to the renderer component for code blocks.

Why is it needed?

Like all other blocks, code blocks need to have an array of objects as children.

This makes it hard for users to implement syntax highlighting libraries that expect a plain text string. They need to parse the children to generate that string. This PR does this at the renderer level so they don't need to.

See this discord message

How to test it?

In a frontend app, use the renderer (link it via yarn), and pass a custom component for code that uses the plainText prop

[joshuaellis]

Are there any tests we can do to validate this feature / fix? :)

[remidej]

@joshuaellis there's a test in the PR already 🤔

[joshuaellis]

@joshuaellis there's a test in the PR already 🤔

That was weird, it didn't show – I think i checked on mobile so maybe it hadn't got all the data 🤦🏼‍♀️

[joshuaellis]

🎁 3 for 3 – on a roll!

[benjaminrobinet]

Hello!

It would be great to have a plainText for headings too. It would be much more easier to add an ID attribute to headings to be able to create anchors to them.

[remidej]

Interesting idea @benjaminrobinet, thanks. I think we could go a step further and instead generate a kebab-case slug attribute. Or do you need to control the text-to-slug logic?

[benjaminrobinet]

@remidej I only thought about a "slugify ids", but maybe there is some other needs behind this. Maybe we could add something like:

<BlocksRenderer content={content} transformers={{
    heading: ({ plainText }) => {
        return { attrs: { id: slugify(plainText) } };
    },
}} />

For the specific case of id's we could just return the index of the block to be able to create the attribute like:

<BlocksRenderer
    content={content}
    blocks={{
        heading: ({ children, level, index }) => {
            const HeadingLevel = `h${level}` as keyof React.JSX.IntrinsicElements;
            return <HeadingLevel id={`heading-${index}`}>{children}</HeadingLevel>;
        },
    }}
/>

[benjaminrobinet]

Just created an issue / pull request to discuss it, we a simple implementation for the plainText of headings #28