RichText with DOMPurify

richTextField.js

const StoryblokClient require('storyblok-js-client')
const createDOMPurify = require('dompurify')
const { JSDOM } = require('jsdom')

// Storyblok is now available as variable which contains the richTextResolver functionality
const Storyblok = new StoryblokClient({})

// For Node this needs to use the jhttps://github.com/cure53/DOMPurify#okay-makes-sense-lets-move-on
const jsDomWindow = new JSDOM('').window;
const DOMPurify = createDOMPurify(jsDomWindow);

function createMarkup(storyblokHTML) {
  return {
    __html: DOMPurify.sanitize(Storyblok.richTextResolver.render(storyblokHTML))
  }
}

const RichTextField = ({ data }) => {
  return <div dangerouslySetInnerHTML={createMarkup(data)} />
}

export default RichTextField

// Usage in other components -> import that richTextField Component
// and use like: <RichTextField data=your_field></RichTextField>