nordsecurity / storyblok-rich-text-astro-renderer Goto Github PK

Whenever I create an unordered list or ordered list inside my rich text it does not show up on my site. How can I add it? I've tried doing this:

<RichTextRenderer
  content={text}
  schema={{
    nodes: {
      heading: ({ attrs: { level } }) => ({
        component: Text,
        props: { variant: `h${level}` },
      }),
      list_item: () => ({
        component: UL,
      }),
    },
  }}
  resolver={(blok) => {
    return {
      component: StoryblokComponent,
      props: { blok },
    };
  }}
  {...storyblokEditable(blok)}
/>

And then in UL.astro:

---
const { ...props } = Astro.props;
---

<ul {...props}>
  <slot />
</ul>

Still no luck on getting it to show. When I change it to a heading or paragraph it shows up fine.

reproduction: https://stackblitz.com/edit/github-xvrhmy?file=src%2Fpages%2Findex.astro

TODO

• Add ordered_list and button_list support

Context

There might be some cases which requires controlling the text values in text nodes. Some of the use cases are:

• translations (register/translate text value via custom admin solution, f.e. adding ICU message syntax support)
• text sanitisation, encoding/decoding
• text replacement (f.e. have some replacable placeholders like {date} so the app depending on business logic would inject the correct)

TODO

• Add textResolver to support preprocessing of the text values in rich text
• Add DEMO example
• Update README about the possibility of such functionality
• Cover with TS types

Storyblok's default rich-text rendering renders image captions as a title attribute, so I used your project to define my own image component using figure and figcaption, like so:

ImageWithCaption.astro

---
interface Props {
  src: string;
  alt?: string;
  title?: string;
}

const { src, alt, title } = Astro.props;
---
<p>
  <figure>
    <img src={src} alt={alt} loading="lazy" />
    { title && <figcaption>{title}</figcaption> }
  </figure>
</p>

and

article.astro

    <RichTextRenderer
      content={body}
      schema={{
        nodes: {
          image: ({ attrs }) => ({
            component: ImageWithCaption,
            props: attrs,
          })
        }
      }}
      {...storyblokEditable(blok)} />

Problem is, when the rich text content is rendered, the node that follows an image node doesn't get rendered, instead the text content is output as-is. This is typically a paragraph, so it can be worked around with CSS by giving it as the same appearance as a p tag:

If you add an empty paragraph under the image in Storyblok's rich-text editor, the text is rendered as a paragraph using a p tag – which is what's expected:

Not sure if this is a bug in this project or if my code is at fault.

It turns out that Astro has a built-in component that provides syntax highlighting for code blocks (<Code />). However, the string that needs to be converted should be passed as a prop, making it incompatible with your current implementation.

The following won't work:

---
import { Code } from "astro:components";
---
<RichTextRenderer
  content={text}
  schema={{
    nodes: {
      ...,
      code_block: ({ attrs }) => ({
        component: Code,
        props: {
          lang: attrs.class?.split("-")[1],
          theme: "solarized-dark",
        },
      }),
      ...
    },
    ...
  }}
  ...
/>

I've implemented a workaround by introducing a "metaprop" called contentPropName to specify the prop name to which the content will be passed. For instance, the following will render correctly because the component requires the content to be passed to a prop called code:

---
import { Code } from "astro:components";
---
<RichTextRenderer
  content={text}
  schema={{
    nodes: {
      ...,
      code_block: ({ attrs }) => ({
        component: Code,
        props: {
          lang: attrs.class?.split("-")[1],
          theme: "solarized-dark",
+         contentPropName: "code",
        },
      }),
      ...
    },
    ...
  }}
  ...
/>

I can create a pull request for these changes, or perhaps you have other suggestions?

Context

With the initial version of this package some of the marks where not implemented (see https://github.com/NordSecurity/storyblok-rich-text-astro-renderer#schema), leaving to add them later on-demand.

TODO

• Add missing marks support
  • strike
  • superscript
  • subscript
  • code
  • anchor
  • emoji
  • textStyle
  • highlight

Context

With the initial version of this package some of the nodes and marks where not implemented (see https://github.com/NordSecurity/storyblok-rich-text-astro-renderer#schema), leaving to add them later on-demand.

It seems there is a need to add image / horizontal_rule and blockquote nodes support.

TODO

• add image, horizontal_rule and blockquote nodes support.

Context

It seems the ResponseSchemaAttrsFn are too generic, thus the users do not get sufficient attrs type when add resolver functions:

TODO

• Improve types, so users can see exact attrs types instead of any right-now