Rehype like behavior storyblok astro

[delicate ivy]

@spare jay looking for a way to unwrap the p tag surrounding img in richtext coming from storyblok... is it also possible to wrap this img inside a figure tag and then use the title attribute value as figcaption?

[spare jay]

Hi @delicate ivy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To address your question about modifying the behavior of rich text content from Storyblok in Astro, particularly unwrapping <p> tags around images and wrapping images in <figure> tags with captions, we can use a custom rehype plugin. However, the knowledge sources provided don't contain specific information about this exact use case with Storyblok and Astro.

That said, we can approach this using Astro's markdown plugin system, which allows for customization of the markdown rendering process. Here's a general approach you could take:

1. Create a custom rehype plugin to transform the HTML structure as desired.
2. Add this plugin to your Astro configuration.

Here's an example of how you might set up a custom rehype plugin in your Astro config:

import { defineConfig } from 'astro/config';
import storyblok from '@storyblok/astro';

// Custom rehype plugin (you'll need to implement this)
import rehypeCustomImageTransform from './rehypeCustomImageTransform';

export default defineConfig({
  integrations: [
    storyblok({
      // ... your Storyblok configuration
    })
  ],
  markdown: {
    rehypePlugins: [rehypeCustomImageTransform],
  },
});

The rehypeCustomImageTransform plugin would need to:

1. Find <p> tags containing only an <img>.
2. Unwrap the <img> from the <p>.
3. Wrap the <img> in a <figure>.
4. Create a <figcaption> using the title attribute of the <img>.

Unfortunately, I don't have enough information to provide the exact implementation of this plugin for your Storyblok and Astro setup. You might need to experiment with creating a custom rehype plugin or explore if Storyblok's Astro integration offers any built-in options for this kind of transformation.

For more information on customizing markdown plugins in Astro, you can refer to the Astro documentation on Markdown plugins (https://docs.astro.build/en/guides/markdown-content/#markdown-plugins).

If you need further assistance with implementing this specific functionality, you might want to consult the Storyblok and Astro documentation or reach out to their respective community forums for more targeted advice.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: