Packages
Storyblok
Storyblok Richtext

@natu/storyblok-richtext

Handling the Storyblok-specific rich text. Already includes some basic resolvers and can be extended if needed.

ℹ️

Used in storyblok-ui package component

Usage

Import package as dependency in package.json

"dependencies": {
    "@natu/storyblok-richtext": "*",
}

Use StoryblokRichtext component to render the richtext

packages/storyblok-ui/src/components/elements/SBRichtext/SBRichtext.tsx
import { type StoryblokRichTextData, StoryblokRichtext } from '@natu/storyblok-richtext';
import { sbEditable } from '@natu/storyblok-utils';
 
interface SBRichtextProps {
  content?: StoryblokRichTextData;
}
 
export const SBRichtext = ({ blok }: SBProps<SBRichtextProps>) => {
  const { content } = blok;
 
  return <StoryblokRichtext data={content} {...sbEditable(blok)} />;
};

Components included

DefaultBlokResolver

A catch-all solution for component not included in markResolvers and nodeResolvers see docs ↗ (opens in a new tab). Usage:

/src/components/StoryblokRichtext/getStoryblokRichText.tsx
import type { ISbRichtext } from '@storyblok/react';
import { DefaultBlokResolver } from '../DefaultBlokResolver';
import { render } from 'storyblok-rich-text-react-renderer';
 
export const getStoryblokRichText = (data: ISbRichtext) =>
  render(data, {
    markResolvers: ..., // custom resolvers
    nodeResolvers: ..., // custom resolvers
    defaultBlokResolver: DefaultBlokResolver,
  });

markResolvers

See storyblok-rich-text-react-renderer markResolvers docs ↗ (opens in a new tab) for more details. Already used in StoryblockRichtext component. Resolvers included in the package:

  • MarkCode - for the code component
  • MarkLink - for the link component

Usage:

/src/components/StoryblokRichtext/getStoryblokRichText.tsx
import type { ISbRichtext } from '@storyblok/react';
import { render, MARK_CODE, MARK_LINK } from 'storyblok-rich-text-react-renderer';
 
import { MarkCode } from '../MarkCode';
import { MarkLink } from '../MarkLink';
 
export const getStoryblokRichText = (data: ISbRichtext) =>
  render(data, {
    markResolvers: {
      [MARK_CODE]: MarkCode,
      [MARK_LINK]: MarkLink,
    },
  });

nodeResolvers

See storyblok-rich-text-react-renderer nodeResolvers docs ↗ (opens in a new tab) for more details. Already used in StoryblockRichtext component. Resolvers included in the package:

  • NodeCodeblock - for codeblock component
  • NodeHeading - for heading component
  • NodeImage - for image component
  • NodeLi - for list item component

Usage:

/src/components/StoryblokRichtext/getStoryblokRichText.tsx
import type { ISbRichtext } from '@storyblok/react';
import {
  render,
  NODE_IMAGE,
  NODE_HEADING,
  NODE_CODEBLOCK,
  NODE_LI,
} from 'storyblok-rich-text-react-renderer';
 
import { NodeCodeblock } from '../NodeCodeblock';
import { NodeHeading } from '../NodeHeading';
import { NodeImage } from '../NodeImage';
import { NodeLi } from '../NodeLi';
 
export const getStoryblokRichText = (data: ISbRichtext) =>
  render(data, {
    nodeResolvers: {
      [NODE_HEADING]: NodeHeading,
      [NODE_IMAGE]: NodeImage,
      [NODE_CODEBLOCK]: NodeCodeblock,
      [NODE_LI]: NodeLi,
    },
  });

StoryblokRichtext

The main component of this package aggregating all resolvers into one reusable component to render Storyblok richtext content type. Usage:

import { type StoryblokRichTextData, StoryblokRichtext } from '@natu/storyblok-richtext';
 
interface SBRichtextProps {
  content?: StoryblokRichTextData;
}
 
export const SBRichtext = ({ blok }: SBProps<SBRichtextProps>) => {
  const { content } = blok;
 
  return <StoryblokRichtext data={content} />;
};
Storyblok RevalidateStoryblok Seo