How to configure the option object

[moritzlaube]

First of all: Thanks for that marvelous plugin. It works just perfectly out of the box. Now I am trying to customize what is being rendered by your plugin. I am not the smartest developer under the sun, so pleas forgive me if I've overseen any obvious solutions. I just couldn't make sense out of the documentation... By the way, I am using it with Gridsome.

So in the main.js file I am importing and configuring the plugin like so (in this case trying to change how the image is rendered:

Vue.use(RichTextRenderer, {
    resolvers: {
      Block: {
        IMAGE: (h, node) => {
          const { alt, src, title } = node.attrs
          return <img src={src} alt="{alt}" title={title} />
        }
      }
    }
  }) 

For now I just copy pasted the code that I found in the docs. I am just unsure, how the option object is structured. I am guessing my mistake is to be found there.

Thanks for your help!

[m4rvr]

Thank you for checking out the plugin! :)

Here you can check out how the options are structured: https://github.com/MarvinRudolph/storyblok-rich-text-renderer/blob/master/packages/vue-plugin/src/plugin/index.ts

The property resolvers is subdivided in blocks, marks and components. So the correct configuration would be:

Vue.use(VueRichTextRenderer, {
  resolvers: {
    blocks: {
      image: (h, node) => {
        const { alt, src, title } = node.attrs;
        return <img src={src} alt={alt} title={title} />;
      }
    }
  }
});

Let me know if you need any help!

[moritzlaube]

That’s it! Thanks so much!

Am 17.04.2020 um 14:42 schrieb Marvin Rudolph notifications@github.com:

Thank you for checking out the plugin! :)

Here you can check out how the options are structured: https://github.com/MarvinRudolph/storyblok-rich-text-renderer/blob/master/packages/vue-plugin/src/plugin/index.ts https://github.com/MarvinRudolph/storyblok-rich-text-renderer/blob/master/packages/vue-plugin/src/plugin/index.ts The property resolvers is subdivided in blocks, marks and components. So the correct configuration would be:

Vue.use(VueRichTextRenderer, { resolvers: { blocks: { image: (h, node) => { const { alt, src, title } = node.attrs; return ; } } } }); Let me know if you need any help!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/MarvinRudolph/storyblok-rich-text-renderer/issues/2#issuecomment-615222583, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJMFY2YBMDYCLC7DVYZWEGTRNBFB3ANCNFSM4MJ4XQHA.