index.d.ts

declare module "storyblok-rich-text-react-renderer" {
  import { ReactNode } from "react";

  type LinkCustomAttributes = {
    rel?: string;
    title?: string;
    [key: string]: any;
  };

  export type StoryblokRichtextContentType =
    | "heading"
    | "code_block"
    | "paragraph"
    | "blockquote"
    | "ordered_list"
    | "bullet_list"
    | "list_item"
    | "horizontal_rule"
    | "hard_break"
    | "image"
    | "emoji"
    | "blok"
    | "text";

  export type StoryblokRichtextMark =
    | "bold"
    | "italic"
    | "strike"
    | "underline"
    | "code"
    | "link"
    | "styled"
    | "subscript"
    | "superscript"
    | "highlight"
    | "textStyle"
    | "anchor";

  export type StoryblokRichtextContent = {
    type: StoryblokRichtextContentType;
    attrs?: {
      level?: number;
      class?: string;
      src?: string;
      alt?: string;
      title?: string;
      order?: number;
      body?: Array<{
        _uid: string;
      }>;
    };
    marks?: {
      type: StoryblokRichtextMark;
      attrs?: {
        linktype?: string;
        href?: string;
        target?: string;
        anchor?: string;
        uuid?: string;
        class?: string;
        color?: string;
        id?: string;
        custom?: LinkCustomAttributes;
      };
    }[];
    text?: string;
    content?: StoryblokRichtextContent[];
  };

  export type StoryblokRichtext = {
    type: "doc";
    content: StoryblokRichtextContent[];
  };

  export const NODE_HEADING = "heading";
  export const NODE_CODEBLOCK = "code_block";
  export const NODE_PARAGRAPH = "paragraph";
  export const NODE_QUOTE = "blockquote";
  export const NODE_OL = "ordered_list";
  export const NODE_UL = "bullet_list";
  export const NODE_LI = "list_item";
  export const NODE_HR = "horizontal_rule";
  export const NODE_BR = "hard_break";
  export const NODE_IMAGE = "image";
  export const NODE_EMOJI = "emoji";

  export const MARK_BOLD = "bold";
  export const MARK_ITALIC = "italic";
  export const MARK_STRIKE = "strike";
  export const MARK_UNDERLINE = "underline";
  export const MARK_CODE = "code";
  export const MARK_LINK = "link";
  export const MARK_STYLED = "styled";
  export const MARK_SUBSCRIPT = "subscript";
  export const MARK_SUPERSCRIPT = "superscript";
  export const MARK_HIGHLIGHT = "highlight";
  export const MARK_TEXT_STYLE = "textStyle";
  export const MARK_ANCHOR = "anchor";

  export interface RenderOptions {
    blokResolvers?: {
      [key: string]: (props: Record<string, unknown>) => JSX.Element | null;
    };
    defaultBlokResolver?: (
      name: string,
      props: Record<string, unknown> & { _uid: string }
    ) => JSX.Element | null;
    markResolvers?: {
      [MARK_BOLD]?: (children: ReactNode) => JSX.Element | null;
      [MARK_CODE]?: (children: ReactNode) => JSX.Element | null;
      [MARK_ITALIC]?: (children: ReactNode) => JSX.Element | null;
      [MARK_STRIKE]?: (children: ReactNode) => JSX.Element | null;
      [MARK_UNDERLINE]?: (children: ReactNode) => JSX.Element | null;
      [MARK_SUBSCRIPT]?: (children: ReactNode) => JSX.Element | null;
      [MARK_SUPERSCRIPT]?: (children: ReactNode) => JSX.Element | null;
      [MARK_LINK]?: (
        children: ReactNode,
        props: {
          linktype?: string;
          href?: string;
          target?: string;
          anchor?: string;
          uuid?: string;
          custom?: LinkCustomAttributes;
        }
      ) => JSX.Element | null;
      [MARK_STYLED]?: (
        children: ReactNode,
        props: { class?: string }
      ) => JSX.Element | null;
      [MARK_HIGHLIGHT]?: (
        children: ReactNode,
        props: { color?: string }
      ) => JSX.Element | null;
      [MARK_TEXT_STYLE]?: (
        children: ReactNode,
        props: { color?: string }
      ) => JSX.Element | null;
      [MARK_ANCHOR]?: (
        children: ReactNode,
        props: { id?: string }
      ) => JSX.Element | null;
    };
    nodeResolvers?: {
      [NODE_BR]?: () => JSX.Element | null;
      [NODE_CODEBLOCK]?: (
        children: ReactNode,
        props: { class: string }
      ) => JSX.Element | null;
      [NODE_HEADING]?: (
        children: ReactNode,
        props: { level: 1 | 2 | 3 | 4 | 5 | 6 }
      ) => JSX.Element | null;
      [NODE_HR]?: () => JSX.Element | null;
      [NODE_IMAGE]?: (
        children: ReactNode,
        props: {
          alt?: string;
          title?: string;
          src?: string;
        }
      ) => JSX.Element | null;
      [NODE_EMOJI]?: (
        children: ReactNode,
        props: {
          name?: string;
          emoji?: string;
          fallbackImage?: string;
        }
      ) => JSX.Element | null;
      [NODE_LI]?: (children: ReactNode) => JSX.Element | null;
      [NODE_OL]?: (children: ReactNode) => JSX.Element | null;
      [NODE_PARAGRAPH]?: (children: ReactNode) => JSX.Element | null;
      [NODE_QUOTE]?: (children: ReactNode) => JSX.Element | null;
      [NODE_UL]?: (children: ReactNode) => JSX.Element | null;
    };
    defaultStringResolver?: (str: string) => JSX.Element;
    textResolver?: (str: string) => string;
  }

  export function render(
    document: StoryblokRichtext | unknown,
    options?: RenderOptions
  );
}