How to use visual editor with custom components?

[abranhe]

Description

The library has the storyblokEditable action which allow the component to be used in the visual editor by adding this:

node.setAttribute("data-blok-c", options["data-blok-c"]);
node.setAttribute("data-blok-uid", options["data-blok-uid"]);
node.classList.add("storyblok__outline");

to the HTML element.

If the person wants to use a custom UI library, storyblokEditable won't work because actions cannot be used on components. There for something like this won't work:

<script lang="ts">
import { storyblokEditable } from '@storyblok/svelte';
import { Button } from 'my-reusable-ui-library';

export let block;
</script>

<Button use:storyblokEditable={blok} title={blok.title}/>

Is there a workaround for this, or another way to implement it on custom components?

Additional context

No response

Validations

• Follow our Code of Conduct

[josefineschaefer]

Hi @abranhe, Thank you for your message and sorry for the delay. We will get back to you shortly.

[HalCodes]

My workaround is using a wrapper div

<div use:storyblokEditable={blok}>
  <Button title={blok.title}/>
</div>

[maoberlehner]

Not a Svelte expert, but I think this is the correct answer. If the (UI library) component does not support Storyblok props and actions, you need to use a wrapper. Same in Vue or React, for example.

[josefineschaefer]

Thanks for sharing @HalCodes!

[roberto-butti]

Hi @abranhe , I see your question here, I just had the same problem with another framework (not Svelte, but the concept is the same), I solved it as shown by @HalCodes (super!), putting a div wrapper.
The problem here is that the custom component provided by the library doesn't pass and render in the HTML element the extra parameters.