Class not being applied on StoryblokRichText component

[martinarcejoviva]

Describe the issue you're facing

On a Nuxt project I want to use the StoryblokRichText component and apply a css class.

I get this:
<span style="class: myBeautifulClass">Hello</span>

but I want to get this:
<span class="myBeautifulClass">Hello</span>

Is it possible to get this out of the box or is it necessary to write a custom resolver for this?

Reproduction

See below

Steps to reproduce

Add the following component on a Nuxt page:

  <div class="wrapperClass">
    <StoryblokRichText
      :doc="{
        type: 'doc',
        content: [
          {
            type: 'paragraph',
            content: [
              {
                type: 'text',
                text: 'Hello',
                marks: [
                  {
                    type: 'styled',
                    attrs: {
                      class: 'myBeautifulClass',
                    },
                  },
                ],
              },
            ],
          },
        ],
      }"
    />
  </div>

On the browser, this is the generated HTML:

<div class="wrapperClass">
  <div>
      <p>
        <span style="class: myBeautifulClass">Hello</span>
    </p>
  </div>
</div>

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (12) x64 AMD Ryzen 5 PRO 8540U w/ Radeon 740M Graphics
    Memory: 17.50 GB / 30.01 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 20.17.0 - ~/.config/nvm/versions/node/v20.17.0/bin/node
    Yarn: 1.22.22 - ~/.config/nvm/versions/node/v20.17.0/bin/yarn
    npm: 10.8.2 - ~/.config/nvm/versions/node/v20.17.0/bin/npm
    pnpm: 9.15.1 - ~/.config/nvm/versions/node/v20.17.0/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.204

Used Package Manager

yarn

Error logs (Optional)

N/A

Validations

• Follow our Code of Conduct

[alvarosabu]

hI @martinarcejoviva which version of the SDK are you using?

[martinarcejoviva]

Hi, we're using this:

"storyblok-js-client": "^6.10.6",
"@storyblok/nuxt": "^6.2.0",

[adamleemiller]

I am having a similar issue but with @storyblok/vue: 8.1.4. I had to downgrade from 8.1.9 due to another issue found here: #768

My issue here is that not even the "class" or "style" attribute is added. I copy and pasted in 5 Lorem Ipsum paragraphs and then tried to add a custom CSS class with the name Paragraph Spacing and the value py-6 border border-black which are TailwindCSS classes but nothing changes. I simply get all 5 paragraphs wrapped in plain <p></p> tags.

[alvarosabu]

Hi @adamleemiller @martinarcejoviva do you have a reproduction I can take a look? Maybe a stackblitz demo. I'm not able to
to reproduce it with the latest version of the storyblok-vue package 8.1.9 (see pic above)

[adamleemiller]

Hi @adamleemiller @martinarcejoviva do you have a reproduction I can take a look? Maybe a stackblitz demo. I'm not able to to reproduce it with the latest version of the storyblok-vue package 8.1.9 (see pic above)

Have a look here https://stackblitz.com/edit/vitejs-vite-wakyq3yz - This is a very simple implementation. If you inspect the first and second paragraph, they have an added <span style=""></span> that wraps the paragraph but does not have the expected class="p-6 border border-black" as defined in the custom CSS classes and selected selected for the first two paragraphs as shown in the screenshots.

Again, this is using 8.1.4 due to the other issue previously mentioned.

[alvarosabu]

Hi @adamleemiller thanks for providing a reproduction, tho I wasn't able to run it. It remains in the loading component for a while with a 404 on the console

The issue was fixed after 8.1.4, so I suggest updating to the last one >8.1.9, after this is merged #808

[adamleemiller]

@alvarosabu I am not sure why that stackblitz does not work because it did the other night when I put it together. If you still need it, let me know and I will do my best to recreate it or fix this one.