🚨 [BUG] Visual editing disappeared and became unusable in certain cases when using story.full_slug.

[JakiChen]

---

Expected Behavior

Whether using Astro.props to pass page data or getting data based on the full_slug value, the visual editor should be supported (tests have found that all page top-level pages generated in the form of slug support visual editing).

Current Behavior

When passing page data via Astro.props, the visual editor will not work when rendering the page via full_slug, but will work fine when using slug as the page route (especially for top-level pages).

Steps to Reproduce

@storyblok/[email protected]
[email protected]

1. src/pages/[...page].astro code Passing data via Astro.props

---
import BaseLayout from 'layouts/BaseLayout.astro';
import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro';
import { getStories } from 'utils/storyblok';
import { toMeta } from 'utils/meta';

export async function getStaticPaths() {
    const { data } = await getStories({
        content_type: 'Page',
        resolve_relations: 'ProgressCarousel.slide',
    });

    return data.stories.map((story) => {
        return {
            params: { page: story.slug === 'home' ? undefined : story.slug },
            props: { data: story },
        };
    });
}

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

<BaseLayout {...toMeta(data)} {...data.content}>
    <StoryblokComponent blok={data.content} />
</BaseLayout>

fig1: Working fine

2. src/pages/[...service].astro

---
import BaseLayout from 'layouts/BaseLayout.astro';
import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro';
import { getStories, getStory } from 'utils/storyblok';
import { toMeta } from 'utils/meta';

export async function getStaticPaths() {
    const { data } = await getStories({
        content_type: 'Service',
        version: 'published',
    });

    return data.stories.map((story) => {
        return {
            params: { service: story.full_slug.replace(/\/$/, '') },
            props: { data: story },
        };
    });
}

// const { data } = Astro.props;

const { service } = Astro.params;
const { data } = await getStory(service);
const content = data.story.content;
---

<BaseLayout {...toMeta(data.story)} {...content}>
    <StoryblokComponent blok={content} />
</BaseLayout>

When rendering a page with full_slug, the visual editor can only work properly if the page data is obtained through useStoryblokApi().getStory() (this should be considered a bug, compared to the top-level page, everything is normal.)

The following is the code for the visual editor not working properly

---
import BaseLayout from 'layouts/BaseLayout.astro';
import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro';
import { getStories } from 'utils/storyblok';
import { toMeta } from 'utils/meta';

export async function getStaticPaths() {
    const { data } = await getStories({
        language: 'en',
        content_type: 'Service',
        version: 'published',
    });

    return data.stories.map((story) => {
        return {
            params: {
                service: story.full_slug.replace(/\/$/, ''),
            },
            props: { data: story },
        };
    });
}

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

<BaseLayout {...toMeta(data)} {...data.content}>
    <StoryblokComponent blok={data.content} />
</BaseLayout>

fig3: Not working