@storyblok/react 4.2.0 → 4.3.0

package/README.md

@@ -522,7 +522,114 @@ sbBridge.on(['input', 'published', 'change'], (event) => {
 })
 ```
 
-### Rendering Rich Text
+## Rendering Rich Text 
+
+> [!WARNING]  
+> We have identified issues with richtext and Types on React 19 and Next.js 15. As a temporary measure, we advise you to continue using React 18 and Next.js 14 until we have fully resolved the issues.
+
+You can render rich text fields by using the `StoryblokRichText` component:
+
+```ts
+import { StoryblokRichText, useStoryblok } from '@storyblok/react';
+
+function App() {
+  const story = useStoryblok('home', { version: 'draft' });
+
+  if (!story?.content) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <StoryblokRichText doc={story.content.richText} />
+    </div>
+  );
+}
+```
+
+Or you can have more control by using the `useStoryblokRichText` hook:
+
+```ts
+import { useStoryblokRichText, convertAttributesInElement } from '@storyblok/react';
+import Codeblock from './Codeblock';
+
+function App() {
+  const { render } = useStoryblokRichTextResolver({
+    // options like resolvers
+  });
+
+  const html = render(doc);
+  const formattedHtml = convertAttributesInElement(html as React.ReactElement); // JSX
+
+  return (
+    <div ref={ref}>
+      {formattedHtml}
+    </div>
+  );
+}
+```
+
+For more incredible options you can pass to the `useStoryblokRichText`, please consult the [Full options](https://github.com/storyblok/richtext?tab=readme-ov-file#options) documentation.
+
+### Overriding the default resolvers
+
+You can override the default resolvers by passing a `resolvers` prop to the `StoryblokRichText` component, for example, to use NextJS Link component or add a custom codeblok component:
+
+```ts
+import { StoryblokRichText, useStoryblok, MarkTypes, type StoryblokRichTextNode } from '@storyblok/react';
+import Link from 'next/link';
+import CodeBlock from './components/CodeBlock';
+
+function App() {
+  const story = useStoryblok('home', { version: 'draft' });
+
+  if (!story?.content) {
+    return <div>Loading...</div>;
+  }
+
+  const resolvers = {
+     [MarkTypes.LINK]: (node: StoryblokRichTextNode<ReactElement>) => {
+      return node.attrs?.linktype === 'story'
+         ? (
+            <Link
+              href={node.attrs?.href}
+              target={node.attrs?.target}
+            >
+              {node.text}
+            </Link>
+          )
+        : (
+            <a
+              href={node.attrs?.href}
+              target={node.attrs?.target}
+            >
+              {node.text}
+            </a>
+          );
+    },
+    [BlockTypes.CODE_BLOCK]: (node) => 
+      <CodeBlock 
+        class={node?.attrs?.class}
+      >
+        {node.children}  
+      </CodeBlock>;
+  }
+
+  return (
+    <div>
+      <StoryblokRichText 
+        doc={story.content.richText}
+        resolvers={resolvers} 
+      />
+    </div>
+  );
+}
+```
+
+### Legacy Rich Text Resolver
+
+> [!WARNING]  
+> The legacy `renderRichText` is soon to be deprecated. We recommend migrating to the new approach described above instead.
 
 You can easily render rich text by using the `renderRichText` function that comes with `@storyblok/react`:
 

package/dist/client.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),b=require("./storyblok-js.js"),f=(e=null,u={})=>{const[d,s]=r.useState(e),o=(e==null?void 0:e.internalId)??(e==null?void 0:e.id)??0,t=typeof window<"u"&&typeof window.storyblokRegisterEvent<"u";return r.useEffect(()=>{s(e),!(!t||!e)&&b.registerStoryblokBridge(o,c=>s(c),u)},[e]),d};exports.useStoryblokState=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),b=require("./storyblok-js.js"),f=(e=null,o={})=>{const[u,s]=d.useState(e),r=(e==null?void 0:e.internalId)??(e==null?void 0:e.id)??0,t=typeof window<"u"&&typeof window.storyblokRegisterEvent<"u";return d.useEffect(()=>{s(e),!(!t||!e)&&b.registerStoryblokBridge(r,c=>s(c),o)},[e]),u};exports.useStoryblokState=f;

package/dist/common/index.d.ts

@@ -1,12 +1,12 @@
 import type { SbReactComponentsMap, SbReactSDKOptions, StoryblokClient } from '@/types';
+export * from '../types';
 export declare const useStoryblokApi: () => StoryblokClient;
 export declare const setComponents: (newComponentsMap: SbReactComponentsMap) => SbReactComponentsMap;
 export declare const getComponent: (componentKey: string) => false | import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>;
 export declare const getEnableFallbackComponent: () => boolean;
 export declare const getCustomFallbackComponent: () => import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>;
 export declare const storyblokInit: (pluginOptions?: SbReactSDKOptions) => void;
-export * from '../types';
 export { useStoryblokApi as getStoryblokApi };
 export { default as StoryblokComponent } from './storyblok-component';
-export { apiPlugin, loadStoryblokBridge, registerStoryblokBridge, renderRichText, RichTextResolver, RichTextSchema, storyblokEditable, useStoryblokBridge, } from '@storyblok/js';
+export { apiPlugin, BlockTypes, loadStoryblokBridge, MarkTypes, registerStoryblokBridge, renderRichText, RichTextResolver, richTextResolver, RichTextSchema, storyblokEditable, type StoryblokRichTextImageOptimizationOptions, type StoryblokRichTextNode, type StoryblokRichTextNodeResolver, type StoryblokRichTextNodeTypes, type StoryblokRichTextOptions, type StoryblokRichTextResolvers, TextTypes, useStoryblokBridge, } from '@storyblok/js';
 //# sourceMappingURL=index.d.ts.map

package/dist/common/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/common/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,EAChB,MAAM,SAAS,CAAC;AAOjB,eAAO,MAAM,eAAe,QAAO,eAQlC,CAAC;AAEF,eAAO,MAAM,aAAa,qBAAsB,oBAAoB,yBAGnE,CAAC;AAEF,eAAO,MAAM,YAAY,iBAAkB,MAAM,0FAOhD,CAAC;AAEF,eAAO,MAAM,0BAA0B,eAAgC,CAAC;AACxE,eAAO,MAAM,0BAA0B,qFAAgC,CAAC;AAExE,eAAO,MAAM,aAAa,mBAAmB,iBAAiB,SAO7D,CAAC;AAEF,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,eAAe,IAAI,eAAe,EAAE,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,EACL,SAAS,EACT,mBAAmB,EACnB,uBAAuB,EACvB,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/common/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,EAChB,MAAM,SAAS,CAAC;AAEjB,cAAc,UAAU,CAAC;AAOzB,eAAO,MAAM,eAAe,QAAO,eAQlC,CAAC;AAEF,eAAO,MAAM,aAAa,qBAAsB,oBAAoB,yBAGnE,CAAC;AAEF,eAAO,MAAM,YAAY,iBAAkB,MAAM,0FAOhD,CAAC;AAEF,eAAO,MAAM,0BAA0B,eAAgC,CAAC;AACxE,eAAO,MAAM,0BAA0B,qFAAgC,CAAC;AAExE,eAAO,MAAM,aAAa,mBAAmB,iBAAiB,SAO7D,CAAC;AAEF,OAAO,EAAE,eAAe,IAAI,eAAe,EAAE,CAAC;AAE9C,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,EACL,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,SAAS,EACT,uBAAuB,EACvB,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,KAAK,yCAAyC,EAC9C,KAAK,qBAAqB,EAC1B,KAAK,6BAA6B,EAClC,KAAK,0BAA0B,EAC/B,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,EAC/B,SAAS,EACT,kBAAkB,GACnB,MAAM,eAAe,CAAC"}

package/dist/index.d.ts

@@ -4,4 +4,7 @@ export declare const useStoryblok: (slug: string, apiOptions?: ISbStoriesParams,
 }>;
 export * from './common/client';
 export * from './common/index';
+export { useStoryblokRichTextResolver } from './richtext';
+export { default as StoryblokRichText } from './storyblok-rich-text';
+export * from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,gBAAgB,EAChB,YAAY,EACZ,uBAAuB,EACxB,MAAM,SAAS,CAAC;AAIjB,eAAO,MAAM,YAAY,SACjB,MAAM,eACA,gBAAgB,kBACb,uBAAuB;;EAgDvC,CAAC;AAEF,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,gBAAgB,EAChB,YAAY,EACZ,uBAAuB,EACxB,MAAM,SAAS,CAAC;AAIjB,eAAO,MAAM,YAAY,SACjB,MAAM,eACA,gBAAgB,kBACb,uBAAuB;;EAgDvC,CAAC;AAEF,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,4BAA4B,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AACrE,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),e=require("./storyblok-js.js"),o=require("./index2.js"),c=require("./client.js"),S=require("./storyblok-component.js"),d=(s,r={},t={})=>{const[u,i]=y.useState({}),a=typeof window<"u"&&typeof window.storyblokRegisterEvent<"u",n=o.useStoryblokApi();return y.useEffect(()=>{if(!n){console.error("You can't use useStoryblok if you're not loading apiPlugin.");return}async function b(){const{data:l}=await n.get(`cdn/stories/${s}`,r);i(l.story),a&&l.story.id&&e.registerStoryblokBridge(l.story.id,k=>i(k),t)}b()},[s,JSON.stringify(r),n]),n?(t.resolveRelations=t.resolveRelations??r.resolve_relations,t.resolveLinks=t.resolveLinks??r.resolve_links,u):null};exports.RichTextResolver=e.RichTextResolver;exports.RichTextSchema=e.RichTextSchema;exports.apiPlugin=e.apiPlugin;exports.loadStoryblokBridge=e.loadStoryblokBridge;exports.registerStoryblokBridge=e.registerStoryblokBridge;exports.renderRichText=e.renderRichText;exports.storyblokEditable=e.storyblokEditable;exports.useStoryblokBridge=e.registerStoryblokBridge;exports.getComponent=o.getComponent;exports.getCustomFallbackComponent=o.getCustomFallbackComponent;exports.getEnableFallbackComponent=o.getEnableFallbackComponent;exports.getStoryblokApi=o.useStoryblokApi;exports.setComponents=o.setComponents;exports.storyblokInit=o.storyblokInit;exports.useStoryblokApi=o.useStoryblokApi;exports.useStoryblokState=c.useStoryblokState;exports.StoryblokComponent=S;exports.useStoryblok=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),e=require("./storyblok-js.js"),t=require("./index2.js"),a=require("./client.js"),S=require("./richtext.js"),d=require("./storyblok-rich-text.js"),g=require("./utils.js"),T=require("./storyblok-component.js"),R=(n,r={},o={})=>{const[c,i]=y.useState({}),u=typeof window<"u"&&typeof window.storyblokRegisterEvent<"u",s=t.useStoryblokApi();return y.useEffect(()=>{if(!s){console.error("You can't use useStoryblok if you're not loading apiPlugin.");return}async function k(){const{data:l}=await s.get(`cdn/stories/${n}`,r);i(l.story),u&&l.story.id&&e.registerStoryblokBridge(l.story.id,b=>i(b),o)}k()},[n,JSON.stringify(r),s]),s?(o.resolveRelations=o.resolveRelations??r.resolve_relations,o.resolveLinks=o.resolveLinks??r.resolve_links,c):null};exports.BlockTypes=e.BlockTypes;exports.MarkTypes=e.MarkTypes;exports.RichTextResolver=e.RichTextResolver;exports.RichTextSchema=e.RichTextSchema;exports.TextTypes=e.TextTypes;exports.apiPlugin=e.apiPlugin;exports.loadStoryblokBridge=e.loadStoryblokBridge;exports.registerStoryblokBridge=e.registerStoryblokBridge;exports.renderRichText=e.renderRichText;exports.richTextResolver=e.richTextResolver;exports.storyblokEditable=e.storyblokEditable;exports.useStoryblokBridge=e.registerStoryblokBridge;exports.getComponent=t.getComponent;exports.getCustomFallbackComponent=t.getCustomFallbackComponent;exports.getEnableFallbackComponent=t.getEnableFallbackComponent;exports.getStoryblokApi=t.useStoryblokApi;exports.setComponents=t.setComponents;exports.storyblokInit=t.storyblokInit;exports.useStoryblokApi=t.useStoryblokApi;exports.useStoryblokState=a.useStoryblokState;exports.useStoryblokRichTextResolver=S.useStoryblokRichTextResolver;exports.StoryblokRichText=d;exports.convertAttributesInElement=g.convertAttributesInElement;exports.StoryblokComponent=T;exports.useStoryblok=R;

package/dist/index.mjs

@@ -1,13 +1,16 @@
-import { useState as f, useEffect as u } from "react";
+import { useState as f, useEffect as c } from "react";
 import { registerStoryblokBridge as k } from "./storyblok-js.mjs";
-import { RichTextResolver as v, RichTextSchema as x, apiPlugin as R, loadStoryblokBridge as C, renderRichText as w, storyblokEditable as B } from "./storyblok-js.mjs";
-import { useStoryblokApi as c } from "./index2.mjs";
-import { getComponent as h, getCustomFallbackComponent as A, getEnableFallbackComponent as T, setComponents as F, storyblokInit as I } from "./index2.mjs";
-import { useStoryblokState as P } from "./client.mjs";
-import { default as q } from "./storyblok-component.mjs";
-const b = (s, e = {}, o = {}) => {
-  const [l, n] = f({}), i = typeof window < "u" && typeof window.storyblokRegisterEvent < "u", t = c();
-  return u(() => {
+import { BlockTypes as g, MarkTypes as v, RichTextResolver as R, RichTextSchema as T, TextTypes as h, apiPlugin as B, loadStoryblokBridge as C, renderRichText as E, richTextResolver as w, storyblokEditable as A } from "./storyblok-js.mjs";
+import { useStoryblokApi as u } from "./index2.mjs";
+import { getComponent as F, getCustomFallbackComponent as L, getEnableFallbackComponent as P, setComponents as _, storyblokInit as q } from "./index2.mjs";
+import { useStoryblokState as M } from "./client.mjs";
+import { useStoryblokRichTextResolver as Y } from "./richtext.mjs";
+import { default as j } from "./storyblok-rich-text.mjs";
+import { convertAttributesInElement as D } from "./utils.mjs";
+import { default as H } from "./storyblok-component.mjs";
+const d = (s, o = {}, e = {}) => {
+  const [n, l] = f({}), i = typeof window < "u" && typeof window.storyblokRegisterEvent < "u", t = u();
+  return c(() => {
     if (!t) {
       console.error(
         "You can't use useStoryblok if you're not loading apiPlugin."
@@ -17,34 +20,41 @@ const b = (s, e = {}, o = {}) => {
     async function a() {
       const { data: r } = await t.get(
         `cdn/stories/${s}`,
-        e
+        o
       );
-      n(r.story), i && r.story.id && k(
+      l(r.story), i && r.story.id && k(
         r.story.id,
-        (y) => n(y),
-        o
+        (y) => l(y),
+        e
       );
     }
     a();
-  }, [s, JSON.stringify(e), t]), t ? (o.resolveRelations = o.resolveRelations ?? e.resolve_relations, o.resolveLinks = o.resolveLinks ?? e.resolve_links, l) : null;
+  }, [s, JSON.stringify(o), t]), t ? (e.resolveRelations = e.resolveRelations ?? o.resolve_relations, e.resolveLinks = e.resolveLinks ?? o.resolve_links, n) : null;
 };
 export {
-  v as RichTextResolver,
-  x as RichTextSchema,
-  q as StoryblokComponent,
-  R as apiPlugin,
-  h as getComponent,
-  A as getCustomFallbackComponent,
-  T as getEnableFallbackComponent,
-  c as getStoryblokApi,
+  g as BlockTypes,
+  v as MarkTypes,
+  R as RichTextResolver,
+  T as RichTextSchema,
+  H as StoryblokComponent,
+  j as StoryblokRichText,
+  h as TextTypes,
+  B as apiPlugin,
+  D as convertAttributesInElement,
+  F as getComponent,
+  L as getCustomFallbackComponent,
+  P as getEnableFallbackComponent,
+  u as getStoryblokApi,
   C as loadStoryblokBridge,
   k as registerStoryblokBridge,
-  w as renderRichText,
-  F as setComponents,
-  B as storyblokEditable,
-  I as storyblokInit,
-  b as useStoryblok,
-  c as useStoryblokApi,
+  E as renderRichText,
+  w as richTextResolver,
+  _ as setComponents,
+  A as storyblokEditable,
+  q as storyblokInit,
+  d as useStoryblok,
+  u as useStoryblokApi,
   k as useStoryblokBridge,
-  P as useStoryblokState
+  Y as useStoryblokRichTextResolver,
+  M as useStoryblokState
 };

package/dist/index2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./storyblok-js.js"),b=require("./storyblok-component.js");let l=null,t={},n=!1,r=null;const s=()=>(l||console.error("You can't use getStoryblokApi if you're not loading apiPlugin."),l),i=o=>(t=o,t),c=o=>t[o]?t[o]:(console.error(`Component ${o} doesn't exist.`),!1),k=()=>n,m=()=>r,u=(o={})=>{const{storyblokApi:a}=e.storyblokInit(o);l=a,t=o.components,n=o.enableFallbackComponent,r=o.customFallbackComponent};exports.RichTextResolver=e.RichTextResolver;exports.RichTextSchema=e.RichTextSchema;exports.apiPlugin=e.apiPlugin;exports.loadStoryblokBridge=e.loadStoryblokBridge;exports.registerStoryblokBridge=e.registerStoryblokBridge;exports.renderRichText=e.renderRichText;exports.storyblokEditable=e.storyblokEditable;exports.useStoryblokBridge=e.registerStoryblokBridge;exports.StoryblokComponent=b;exports.getComponent=c;exports.getCustomFallbackComponent=m;exports.getEnableFallbackComponent=k;exports.getStoryblokApi=s;exports.setComponents=i;exports.storyblokInit=u;exports.useStoryblokApi=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./storyblok-js.js"),i=require("./storyblok-component.js");let r=null,t={},l=!1,n=null;const s=()=>(r||console.error("You can't use getStoryblokApi if you're not loading apiPlugin."),r),c=o=>(t=o,t),b=o=>t[o]?t[o]:(console.error(`Component ${o} doesn't exist.`),!1),k=()=>l,y=()=>n,p=(o={})=>{const{storyblokApi:a}=e.storyblokInit(o);r=a,t=o.components,l=o.enableFallbackComponent,n=o.customFallbackComponent};exports.BlockTypes=e.BlockTypes;exports.MarkTypes=e.MarkTypes;exports.RichTextResolver=e.RichTextResolver;exports.RichTextSchema=e.RichTextSchema;exports.TextTypes=e.TextTypes;exports.apiPlugin=e.apiPlugin;exports.loadStoryblokBridge=e.loadStoryblokBridge;exports.registerStoryblokBridge=e.registerStoryblokBridge;exports.renderRichText=e.renderRichText;exports.richTextResolver=e.richTextResolver;exports.storyblokEditable=e.storyblokEditable;exports.useStoryblokBridge=e.registerStoryblokBridge;exports.StoryblokComponent=i;exports.getComponent=b;exports.getCustomFallbackComponent=y;exports.getEnableFallbackComponent=k;exports.getStoryblokApi=s;exports.setComponents=c;exports.storyblokInit=p;exports.useStoryblokApi=s;

package/dist/index2.mjs

@@ -1,28 +1,32 @@
 import { storyblokInit as s } from "./storyblok-js.mjs";
-import { RichTextResolver as g, RichTextSchema as C, apiPlugin as d, loadStoryblokBridge as f, registerStoryblokBridge as S, renderRichText as x, storyblokEditable as F, registerStoryblokBridge as A } from "./storyblok-js.mjs";
-import { default as B } from "./storyblok-component.mjs";
+import { BlockTypes as g, MarkTypes as C, RichTextResolver as d, RichTextSchema as f, TextTypes as x, apiPlugin as S, loadStoryblokBridge as T, registerStoryblokBridge as F, renderRichText as h, richTextResolver as A, storyblokEditable as B, registerStoryblokBridge as R } from "./storyblok-js.mjs";
+import { default as v } from "./storyblok-component.mjs";
 let t = null, e = {}, r = !1, l = null;
-const b = () => (t || console.error(
+const c = () => (t || console.error(
   "You can't use getStoryblokApi if you're not loading apiPlugin."
-), t), c = (o) => (e = o, e), i = (o) => e[o] ? e[o] : (console.error(`Component ${o} doesn't exist.`), !1), k = () => r, m = () => l, p = (o = {}) => {
+), t), b = (o) => (e = o, e), i = (o) => e[o] ? e[o] : (console.error(`Component ${o} doesn't exist.`), !1), k = () => r, p = () => l, m = (o = {}) => {
   const { storyblokApi: n } = s(o);
   t = n, e = o.components, r = o.enableFallbackComponent, l = o.customFallbackComponent;
 };
 export {
-  g as RichTextResolver,
-  C as RichTextSchema,
-  B as StoryblokComponent,
-  d as apiPlugin,
+  g as BlockTypes,
+  C as MarkTypes,
+  d as RichTextResolver,
+  f as RichTextSchema,
+  v as StoryblokComponent,
+  x as TextTypes,
+  S as apiPlugin,
   i as getComponent,
-  m as getCustomFallbackComponent,
+  p as getCustomFallbackComponent,
   k as getEnableFallbackComponent,
-  b as getStoryblokApi,
-  f as loadStoryblokBridge,
-  S as registerStoryblokBridge,
-  x as renderRichText,
-  c as setComponents,
-  F as storyblokEditable,
-  p as storyblokInit,
-  b as useStoryblokApi,
-  A as useStoryblokBridge
+  c as getStoryblokApi,
+  T as loadStoryblokBridge,
+  F as registerStoryblokBridge,
+  h as renderRichText,
+  A as richTextResolver,
+  b as setComponents,
+  B as storyblokEditable,
+  m as storyblokInit,
+  c as useStoryblokApi,
+  R as useStoryblokBridge
 };

package/dist/live-editing.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";const l=require("./storyblok-js.js"),n=require("react"),o=require("./live-edit-update-action.js"),u=({story:e=null,bridgeOptions:t={}})=>{if(typeof window>"u")return null;const r=i=>{i&&n.startTransition(()=>{o.liveEditUpdateAction({story:i,pathToRevalidate:window.location.pathname})})},d=(e==null?void 0:e.internalId)??(e==null?void 0:e.id)??0;return n.useEffect(()=>{l.registerStoryblokBridge(d,i=>r(i),t)},[]),null};module.exports=u;
+"use strict";const r=require("./storyblok-js.js"),t=require("react"),o=require("./live-edit-update-action.js"),a=({story:e=null,bridgeOptions:i={}})=>{if(typeof window>"u")return null;const d=n=>{n&&t.startTransition(()=>{o.liveEditUpdateAction({story:n,pathToRevalidate:window.location.pathname})})},l=(e==null?void 0:e.internalId)??(e==null?void 0:e.id)??0;return t.useEffect(()=>{r.registerStoryblokBridge(l,n=>d(n),i)},[]),null};module.exports=a;

package/dist/richtext.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { StoryblokRichTextNode, StoryblokRichTextOptions } from '@storyblok/js';
+export declare function componentResolver(node: StoryblokRichTextNode<React.ReactElement>): React.ReactElement;
+export declare function useStoryblokRichTextResolver(options: StoryblokRichTextOptions<React.ReactElement>): {
+    render: (node: StoryblokRichTextNode<React.ReactNode>) => React.ReactNode;
+};
+//# sourceMappingURL=richtext.d.ts.map

package/dist/richtext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"richtext.d.ts","sourceRoot":"","sources":["../src/richtext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAGrF,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,qBAAqB,CAAC,KAAK,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC,YAAY,CAMrG;AAED,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,wBAAwB,CAAC,KAAK,CAAC,YAAY,CAAC;;EAWtD"}

package/dist/richtext.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),c=require("./storyblok-component.js"),s=require("./storyblok-js.js");function n(e){var t,o;const r=(t=e==null?void 0:e.attrs)==null?void 0:t.body;return l.createElement(c,{blok:Array.isArray(r)?r[0]:void 0,key:(o=e.attrs)==null?void 0:o.id})}function i(e){const r={renderFn:l.createElement,resolvers:{[s.BlockTypes.COMPONENT]:n,...e.resolvers},keyedResolvers:!0};return s.richTextResolver(r)}exports.componentResolver=n;exports.useStoryblokRichTextResolver=i;

package/dist/richtext.mjs

@@ -0,0 +1,26 @@
+import s from "react";
+import l from "./storyblok-component.mjs";
+import { BlockTypes as n, richTextResolver as c } from "./storyblok-js.mjs";
+function i(e) {
+  var t, o;
+  const r = (t = e == null ? void 0 : e.attrs) == null ? void 0 : t.body;
+  return s.createElement(l, {
+    blok: Array.isArray(r) ? r[0] : void 0,
+    key: (o = e.attrs) == null ? void 0 : o.id
+  });
+}
+function p(e) {
+  const r = {
+    renderFn: s.createElement,
+    resolvers: {
+      [n.COMPONENT]: i,
+      ...e.resolvers
+    },
+    keyedResolvers: !0
+  };
+  return c(r);
+}
+export {
+  i as componentResolver,
+  p as useStoryblokRichTextResolver
+};

package/dist/rsc/index.d.ts

@@ -1,3 +1,6 @@
+export { useStoryblokRichTextResolver } from '../richtext';
+export { default as StoryblokRichText } from '../storyblok-rich-text';
 export * from './common';
 export { default as StoryblokStory } from './story';
+export { BlockTypes, MarkTypes, richTextResolver, type StoryblokRichTextImageOptimizationOptions, type StoryblokRichTextNode, type StoryblokRichTextNodeResolver, type StoryblokRichTextNodeTypes, type StoryblokRichTextOptions, type StoryblokRichTextResolvers, TextTypes, } from '@storyblok/js';
 //# sourceMappingURL=index.d.ts.map

package/dist/rsc/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/rsc/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/rsc/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EACL,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,KAAK,yCAAyC,EAC9C,KAAK,qBAAqB,EAC1B,KAAK,6BAA6B,EAClC,KAAK,0BAA0B,EAC/B,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,EAC/B,SAAS,GACV,MAAM,eAAe,CAAC"}

package/dist/rsc.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./common.js"),t=require("./story.js"),r=require("./server-component.js"),e=require("./storyblok-js.js");exports.getComponent=o.getComponent;exports.getCustomFallbackComponent=o.getCustomFallbackComponent;exports.getEnableFallbackComponent=o.getEnableFallbackComponent;exports.getStoryblokApi=o.useStoryblokApi;exports.setComponents=o.setComponents;exports.storyblokInit=o.storyblokInit;exports.useStoryblokApi=o.useStoryblokApi;exports.StoryblokStory=t;exports.StoryblokServerComponent=r;exports.RichTextResolver=e.RichTextResolver;exports.RichTextSchema=e.RichTextSchema;exports.apiPlugin=e.apiPlugin;exports.loadStoryblokBridge=e.loadStoryblokBridge;exports.registerStoryblokBridge=e.registerStoryblokBridge;exports.renderRichText=e.renderRichText;exports.storyblokEditable=e.storyblokEditable;exports.useStoryblokBridge=e.registerStoryblokBridge;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./richtext.js"),r=require("./storyblok-rich-text.js"),o=require("./common.js"),l=require("./story.js"),e=require("./storyblok-js.js"),s=require("./server-component.js");exports.useStoryblokRichTextResolver=t.useStoryblokRichTextResolver;exports.StoryblokRichText=r;exports.getComponent=o.getComponent;exports.getCustomFallbackComponent=o.getCustomFallbackComponent;exports.getEnableFallbackComponent=o.getEnableFallbackComponent;exports.getStoryblokApi=o.useStoryblokApi;exports.setComponents=o.setComponents;exports.storyblokInit=o.storyblokInit;exports.useStoryblokApi=o.useStoryblokApi;exports.StoryblokStory=l;exports.BlockTypes=e.BlockTypes;exports.MarkTypes=e.MarkTypes;exports.RichTextResolver=e.RichTextResolver;exports.RichTextSchema=e.RichTextSchema;exports.TextTypes=e.TextTypes;exports.apiPlugin=e.apiPlugin;exports.loadStoryblokBridge=e.loadStoryblokBridge;exports.registerStoryblokBridge=e.registerStoryblokBridge;exports.renderRichText=e.renderRichText;exports.richTextResolver=e.richTextResolver;exports.storyblokEditable=e.storyblokEditable;exports.useStoryblokBridge=e.registerStoryblokBridge;exports.StoryblokServerComponent=s;

package/dist/rsc.mjs

@@ -1,23 +1,31 @@
-import { getComponent as t, getCustomFallbackComponent as r, getEnableFallbackComponent as l, useStoryblokApi as i, setComponents as a, storyblokInit as b, useStoryblokApi as s } from "./common.mjs";
-import { default as k } from "./story.mjs";
-import { default as y } from "./server-component.mjs";
-import { RichTextResolver as g, RichTextSchema as m, apiPlugin as d, loadStoryblokBridge as u, registerStoryblokBridge as x, renderRichText as c, storyblokEditable as f, registerStoryblokBridge as C } from "./storyblok-js.mjs";
+import { useStoryblokRichTextResolver as t } from "./richtext.mjs";
+import { default as l } from "./storyblok-rich-text.mjs";
+import { getComponent as i, getCustomFallbackComponent as a, getEnableFallbackComponent as p, useStoryblokApi as b, setComponents as k, storyblokInit as y, useStoryblokApi as n } from "./common.mjs";
+import { default as m } from "./story.mjs";
+import { BlockTypes as g, MarkTypes as c, RichTextResolver as d, RichTextSchema as T, TextTypes as f, apiPlugin as u, loadStoryblokBridge as R, registerStoryblokBridge as h, renderRichText as C, richTextResolver as B, storyblokEditable as v, registerStoryblokBridge as A } from "./storyblok-js.mjs";
+import { default as F } from "./server-component.mjs";
 export {
-  g as RichTextResolver,
-  m as RichTextSchema,
-  y as StoryblokServerComponent,
-  k as StoryblokStory,
-  d as apiPlugin,
-  t as getComponent,
-  r as getCustomFallbackComponent,
-  l as getEnableFallbackComponent,
-  i as getStoryblokApi,
-  u as loadStoryblokBridge,
-  x as registerStoryblokBridge,
-  c as renderRichText,
-  a as setComponents,
-  f as storyblokEditable,
-  b as storyblokInit,
-  s as useStoryblokApi,
-  C as useStoryblokBridge
+  g as BlockTypes,
+  c as MarkTypes,
+  d as RichTextResolver,
+  T as RichTextSchema,
+  l as StoryblokRichText,
+  F as StoryblokServerComponent,
+  m as StoryblokStory,
+  f as TextTypes,
+  u as apiPlugin,
+  i as getComponent,
+  a as getCustomFallbackComponent,
+  p as getEnableFallbackComponent,
+  b as getStoryblokApi,
+  R as loadStoryblokBridge,
+  h as registerStoryblokBridge,
+  C as renderRichText,
+  B as richTextResolver,
+  k as setComponents,
+  v as storyblokEditable,
+  y as storyblokInit,
+  n as useStoryblokApi,
+  A as useStoryblokBridge,
+  t as useStoryblokRichTextResolver
 };

package/dist/server-component.js

@@ -1 +1 @@
-"use strict";const e=require("./jsx-runtime.js"),m=require("react"),t=require("./common.js");require("./story.js");const i=m.forwardRef(({blok:o,...r},p)=>{if(!o)return console.error("Please provide a 'blok' property to the StoryblokComponent"),e.jsxRuntimeExports.jsx("div",{children:"Please provide a blok property to the StoryblokServerComponent"});const n=t.getComponent(o.component);if(n)return e.jsxRuntimeExports.jsx(n,{ref:p,blok:o,...r});if(t.getEnableFallbackComponent()){const s=t.getCustomFallbackComponent();return s?e.jsxRuntimeExports.jsx(s,{blok:o,...r}):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:e.jsxRuntimeExports.jsxs("p",{children:["Component could not be found for blok"," ",e.jsxRuntimeExports.jsx("strong",{children:o.component}),"! Is it configured correctly?"]})})}return e.jsxRuntimeExports.jsx("div",{})});i.displayName="StoryblokServerComponent";module.exports=i;
+"use strict";const e=require("react/jsx-runtime"),l=require("react");require("./storyblok-component.js");require("./storyblok-rich-text.js");const r=require("./common.js");require("./story.js");const c=l.forwardRef(({blok:o,...n},i)=>{if(!o)return console.error("Please provide a 'blok' property to the StoryblokComponent"),e.jsx("div",{children:"Please provide a blok property to the StoryblokServerComponent"});const t=r.getComponent(o.component);if(t)return e.jsx(t,{ref:i,blok:o,...n});if(r.getEnableFallbackComponent()){const s=r.getCustomFallbackComponent();return s?e.jsx(s,{blok:o,...n}):e.jsx(e.Fragment,{children:e.jsxs("p",{children:["Component could not be found for blok"," ",e.jsx("strong",{children:o.component}),"! Is it configured correctly?"]})})}return e.jsx("div",{})});c.displayName="StoryblokServerComponent";module.exports=c;

package/dist/server-component.mjs

@@ -1,29 +1,31 @@
-import { j as o } from "./jsx-runtime.mjs";
-import { forwardRef as m } from "react";
-import { getComponent as l, getEnableFallbackComponent as s, getCustomFallbackComponent as i } from "./common.mjs";
+import { jsx as o, Fragment as m, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import "./storyblok-component.mjs";
+import "./storyblok-rich-text.mjs";
+import { getComponent as a, getEnableFallbackComponent as c, getCustomFallbackComponent as d } from "./common.mjs";
 import "./story.mjs";
-const a = m(
+const s = i(
   ({ blok: e, ...r }, p) => {
     if (!e)
       return console.error(
         "Please provide a 'blok' property to the StoryblokComponent"
-      ), /* @__PURE__ */ o.jsx("div", { children: "Please provide a blok property to the StoryblokServerComponent" });
-    const t = l(e.component);
+      ), /* @__PURE__ */ o("div", { children: "Please provide a blok property to the StoryblokServerComponent" });
+    const t = a(e.component);
     if (t)
-      return /* @__PURE__ */ o.jsx(t, { ref: p, blok: e, ...r });
-    if (s()) {
-      const n = i();
-      return n ? /* @__PURE__ */ o.jsx(n, { blok: e, ...r }) : /* @__PURE__ */ o.jsx(o.Fragment, { children: /* @__PURE__ */ o.jsxs("p", { children: [
+      return /* @__PURE__ */ o(t, { ref: p, blok: e, ...r });
+    if (c()) {
+      const n = d();
+      return n ? /* @__PURE__ */ o(n, { blok: e, ...r }) : /* @__PURE__ */ o(m, { children: /* @__PURE__ */ l("p", { children: [
         "Component could not be found for blok",
         " ",
-        /* @__PURE__ */ o.jsx("strong", { children: e.component }),
+        /* @__PURE__ */ o("strong", { children: e.component }),
         "! Is it configured correctly?"
       ] }) });
     }
-    return /* @__PURE__ */ o.jsx("div", {});
+    return /* @__PURE__ */ o("div", {});
   }
 );
-a.displayName = "StoryblokServerComponent";
+s.displayName = "StoryblokServerComponent";
 export {
-  a as default
+  s as default
 };

package/dist/story.js

@@ -1 +1 @@
-"use strict";const r=require("./jsx-runtime.js"),s=require("react");require("./common.js");const c=require("./live-editing.js"),u=require("./server-component.js"),l=s.forwardRef(({story:e,bridgeOptions:t,...o},n)=>{if(!e)return console.error("Please provide a 'story' property to the StoryblokServerComponent"),null;if(globalThis.storyCache.has(e.uuid)&&(e=globalThis.storyCache.get(e.uuid)),typeof e.content=="string")try{e.content=JSON.parse(e.content)}catch(i){console.error("An error occurred while trying to parse the story content",i),e.content={}}return r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsx(u,{ref:n,blok:e.content,...o}),r.jsxRuntimeExports.jsx(c,{story:e,bridgeOptions:t})]})});module.exports=l;
+"use strict";const r=require("react/jsx-runtime"),i=require("react");require("./common.js");const s=require("./live-editing.js"),l=require("./server-component.js"),u=i.forwardRef(({story:e,bridgeOptions:t,...o},n)=>{if(!e)return console.error("Please provide a 'story' property to the StoryblokServerComponent"),null;if(globalThis.storyCache.has(e.uuid)&&(e=globalThis.storyCache.get(e.uuid)),typeof e.content=="string")try{e.content=JSON.parse(e.content)}catch(c){console.error("An error occurred while trying to parse the story content",c),e.content={}}return r.jsxs(r.Fragment,{children:[r.jsx(l,{ref:n,blok:e.content,...o}),r.jsx(s,{story:e,bridgeOptions:t})]})});module.exports=u;

package/dist/story.mjs

@@ -1,9 +1,9 @@
-import { j as o } from "./jsx-runtime.mjs";
-import { forwardRef as l } from "react";
+import { jsxs as l, Fragment as c, jsx as o } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
 import "./common.mjs";
-import c from "./live-editing.mjs";
-import a from "./server-component.mjs";
-const u = l(
+import p from "./live-editing.mjs";
+import m from "./server-component.mjs";
+const S = a(
   ({ story: r, bridgeOptions: e, ...t }, n) => {
     if (!r)
       return console.error(
@@ -18,12 +18,12 @@ const u = l(
           i
         ), r.content = {};
       }
-    return /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-      /* @__PURE__ */ o.jsx(a, { ref: n, blok: r.content, ...t }),
-      /* @__PURE__ */ o.jsx(c, { story: r, bridgeOptions: e })
+    return /* @__PURE__ */ l(c, { children: [
+      /* @__PURE__ */ o(m, { ref: n, blok: r.content, ...t }),
+      /* @__PURE__ */ o(p, { story: r, bridgeOptions: e })
     ] });
   }
 );
 export {
-  u as default
+  S as default
 };

package/dist/storyblok-component.js

@@ -1 +1 @@
-"use strict";const e=require("./jsx-runtime.js"),x=require("react"),t=require("./index2.js"),i=x.forwardRef(({blok:o,...n},p)=>{if(!o)return console.error("Please provide a 'blok' property to the StoryblokComponent"),e.jsxRuntimeExports.jsx("div",{children:"Please provide a blok property to the StoryblokComponent"});const r=t.getComponent(o.component);if(r)return e.jsxRuntimeExports.jsx(r,{ref:p,blok:o,...n});if(t.getEnableFallbackComponent()){const s=t.getCustomFallbackComponent();return s?e.jsxRuntimeExports.jsx(s,{blok:o,...n}):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:e.jsxRuntimeExports.jsxs("p",{children:["Component could not be found for blok"," ",e.jsxRuntimeExports.jsx("strong",{children:o.component}),"! Is it configured correctly?"]})})}return e.jsxRuntimeExports.jsx("div",{})});i.displayName="StoryblokComponent";module.exports=i;
+"use strict";const o=require("react/jsx-runtime"),l=require("react"),n=require("./index2.js"),c=l.forwardRef(({blok:e,...t},i)=>{if(!e)return console.error("Please provide a 'blok' property to the StoryblokComponent"),o.jsx("div",{children:"Please provide a blok property to the StoryblokComponent"});const r=n.getComponent(e.component);if(r)return o.jsx(r,{ref:i,blok:e,...t});if(n.getEnableFallbackComponent()){const s=n.getCustomFallbackComponent();return s?o.jsx(s,{blok:e,...t}):o.jsx(o.Fragment,{children:o.jsxs("p",{children:["Component could not be found for blok"," ",o.jsx("strong",{children:e.component}),"! Is it configured correctly?"]})})}return o.jsx("div",{})});c.displayName="StoryblokComponent";module.exports=c;

package/dist/storyblok-component.mjs

@@ -1,28 +1,28 @@
-import { j as o } from "./jsx-runtime.mjs";
-import { forwardRef as m } from "react";
-import { getComponent as l, getEnableFallbackComponent as s, getCustomFallbackComponent as i } from "./index2.mjs";
-const a = m(
+import { jsx as o, Fragment as l, jsxs as m } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { getComponent as a, getEnableFallbackComponent as c, getCustomFallbackComponent as d } from "./index2.mjs";
+const s = i(
   ({ blok: e, ...t }, p) => {
     if (!e)
       return console.error(
         "Please provide a 'blok' property to the StoryblokComponent"
-      ), /* @__PURE__ */ o.jsx("div", { children: "Please provide a blok property to the StoryblokComponent" });
-    const n = l(e.component);
+      ), /* @__PURE__ */ o("div", { children: "Please provide a blok property to the StoryblokComponent" });
+    const n = a(e.component);
     if (n)
-      return /* @__PURE__ */ o.jsx(n, { ref: p, blok: e, ...t });
-    if (s()) {
-      const r = i();
-      return r ? /* @__PURE__ */ o.jsx(r, { blok: e, ...t }) : /* @__PURE__ */ o.jsx(o.Fragment, { children: /* @__PURE__ */ o.jsxs("p", { children: [
+      return /* @__PURE__ */ o(n, { ref: p, blok: e, ...t });
+    if (c()) {
+      const r = d();
+      return r ? /* @__PURE__ */ o(r, { blok: e, ...t }) : /* @__PURE__ */ o(l, { children: /* @__PURE__ */ m("p", { children: [
         "Component could not be found for blok",
         " ",
-        /* @__PURE__ */ o.jsx("strong", { children: e.component }),
+        /* @__PURE__ */ o("strong", { children: e.component }),
         "! Is it configured correctly?"
       ] }) });
     }
-    return /* @__PURE__ */ o.jsx("div", {});
+    return /* @__PURE__ */ o("div", {});
   }
 );
-a.displayName = "StoryblokComponent";
+s.displayName = "StoryblokComponent";
 export {
-  a as default
+  s as default
 };