Weird Whitespace behavior when using custom RichTextRenderer

[soerenmartius]

Thanks for providing this awesome package. I just integrated it into one of my projects. I am facing a weird behavior: Whenever rendering custom components (e.g. <Link/>) as explained in your example, the resolver renders a whitespace which results in ugly formatting. Here's an example:

See the whitespace after <Link> component. Here's my custom RichText component:

---
import type { RichTextType } from 'storyblok-rich-text-astro-renderer'
import { storyblokEditable } from '@storyblok/astro'
import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro'
import RichTextRenderer from 'storyblok-rich-text-astro-renderer/RichTextRenderer.astro'
import BulletList from './BulletList.astro'
import CodeBlock from './CodeBlock.astro'
import InlineCode from './InlineCode.astro'
import Link from './Link.astro'
import Strong from './Strong.astro'
import Text from './Text.astro'

export interface Props {
  content: RichTextType
}

const { content } = Astro.props
---

<RichTextRenderer
  content={content}
  schema={{
    nodes: {
      heading: ({ attrs: { level } }) => ({
        component: Text,
        props: { variant: `h${level}` },
      }),
      // ordered_list: () => ({
      //   component: 'ol',
      //   props: {
      //     class: 'ordered-list',
      //   },
      // }),
      bullet_list: () => ({
        component: BulletList,
      }),
      code_block: ({ attrs }) => ({
        component: CodeBlock,
        props: { lang: attrs.class?.split('-')[1] },
      }),
    },
    marks: {
      code: () => ({
        component: InlineCode,
      }),
      bold: () => ({
        component: Strong,
      }),
      link: ({ attrs }) => {
        const { custom, ...restAttrs } = attrs

        return {
          component: Link,
          props: {
            link: { ...custom, ...restAttrs },
            class: '',
          },
        }
      },
    },
  }}
  resolver={(blok) => {
    return {
      component: StoryblokComponent,
      props: { blok },
    }
  }}
  {...storyblokEditable(content)}
/>

The link component looks like this:

---
import type { HTMLAttributes } from 'astro/types'
import type { Link } from 'storyblok-rich-text-astro-renderer'

export interface Props extends HTMLAttributes<'a'> {
  link: Link['attrs']
}

const {
  link: { href, target },
  ...props
} = Astro.props
---

<a {href} {target} {...props}><slot /></a>

<style>
  a {
    color: var(--info-foreground);
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
</style>

I also ensured that no whitespace is inserted using the editor (see the screenshot).

I am using the custom RichText component in my components like this:

<RichText content={blok.subheadline} />

If I use the built-in storyblok-rich-text-astro-renderer/RichTextRenderer.astro component, it renders without the whitespace but obviously without my custom markup.

I would greatly appreciate any help!