@storyblok/react 5.4.22 → 6.1.0

package/dist/core/init.mjs

@@ -1,17 +1,17 @@
 import { storyblokInit as n } from "@storyblok/js";
-import { setStoryblokApiInstance as a, setComponents as m, setEnableFallbackComponent as l, setCustomFallbackComponent as b, getStoryblokApiInstance as c } from "./state.mjs";
+import { setComponents as a, setEnableFallbackComponent as m, setCustomFallbackComponent as l, setStoryblokApiInstance as b, getStoryblokApiInstance as c } from "./state.mjs";
 import { getComponent as f, getCustomFallbackComponent as p, getEnableFallbackComponent as y } from "./state.mjs";
 const k = (o = {}) => {
   const t = c();
   if (t)
     return () => t;
   const { storyblokApi: e } = n(o);
-  return a(e), o.components && m(o.components), o.enableFallbackComponent !== void 0 && l(o.enableFallbackComponent), o.customFallbackComponent && b(o.customFallbackComponent), () => e;
+  return b(e), o.components && a(o.components), o.enableFallbackComponent !== void 0 && m(o.enableFallbackComponent), o.customFallbackComponent && l(o.customFallbackComponent), () => e;
 };
 export {
   f as getComponent,
   p as getCustomFallbackComponent,
   y as getEnableFallbackComponent,
-  m as setComponents,
+  a as setComponents,
   k as storyblokInit
 };

package/dist/core/richtext-hoc.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),l=require("@storyblok/js");function u(c,{isServerContext:t=!1}={}){return function(e){var o,n;const r=(o=e==null?void 0:e.attrs)==null?void 0:o.body;if(!Array.isArray(r)||r.length===0)return[];const a=((n=e.attrs)==null?void 0:n.id)||(t?`fallback-key-${JSON.stringify(e.attrs)}`:void 0);return r.map((i,m)=>s.createElement(c,{blok:i,key:`${a}-${m}`}))}}function R(c,{isServerContext:t=!1}={}){return function(e){const r=u(c,{isServerContext:t}),{resolvers:a,...o}=e,n={...t?e:{},renderFn:s.createElement,textFn:i=>s.createElement(s.Fragment,{key:Math.random().toString(36).substring(2,15)},i),resolvers:{[l.BlockTypes.COMPONENT]:r,...a},keyedResolvers:!0,...t?{}:o};return l.richTextResolver(n)}}exports.createComponentResolver=u;exports.createRichTextHook=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),o=require("@storyblok/js");function m(c,{isServerContext:n=!1}={}){return function(r){const{tiptapExtensions:i,...s}=r,a={...n?r:{},renderFn:t.createElement,textFn:e=>t.createElement(t.Fragment,{key:Math.random().toString(36).substring(2,15)},e),keyedResolvers:!0,...n?{}:s,tiptapExtensions:{blok:o.ComponentBlok.configure({renderComponent:(e,u)=>{const l=u||(n?`fallback-key-${JSON.stringify(e)}`:void 0);return t.createElement(c,{blok:e,key:l})}}),...i}};return o.richTextResolver(a)}}exports.createRichTextHook=m;

package/dist/core/richtext-hoc.mjs

@@ -1,43 +1,33 @@
-import s from "react";
-import { BlockTypes as u, richTextResolver as f } from "@storyblok/js";
-function y(c, {
-  isServerContext: t = !1
+import t from "react";
+import { ComponentBlok as l, richTextResolver as p } from "@storyblok/js";
+function d(o, {
+  isServerContext: n = !1
 } = {}) {
-  return function(e) {
-    var o, n;
-    const r = (o = e == null ? void 0 : e.attrs) == null ? void 0 : o.body;
-    if (!Array.isArray(r) || r.length === 0)
-      return [];
-    const a = ((n = e.attrs) == null ? void 0 : n.id) || (t ? `fallback-key-${JSON.stringify(e.attrs)}` : void 0);
-    return r.map(
-      (i, m) => s.createElement(c, {
-        blok: i,
-        key: `${a}-${m}`
-      })
-    );
-  };
-}
-function k(c, {
-  isServerContext: t = !1
-} = {}) {
-  return function(e) {
-    const r = y(c, { isServerContext: t }), { resolvers: a, ...o } = e, n = {
-      ...t ? e : {},
-      renderFn: s.createElement,
-      textFn: (i) => s.createElement(s.Fragment, {
+  return function(r) {
+    const { tiptapExtensions: c, ...i } = r, s = {
+      ...n ? r : {},
+      renderFn: t.createElement,
+      textFn: (e) => t.createElement(t.Fragment, {
         key: Math.random().toString(36).substring(2, 15)
-      }, i),
-      resolvers: {
-        [u.COMPONENT]: r,
-        ...a
-      },
+      }, e),
       keyedResolvers: !0,
-      ...t ? {} : o
+      ...n ? {} : i,
+      tiptapExtensions: {
+        blok: l.configure({
+          renderComponent: (e, a) => {
+            const m = a || (n ? `fallback-key-${JSON.stringify(e)}` : void 0);
+            return t.createElement(o, {
+              blok: e,
+              key: m
+            });
+          }
+        }),
+        ...c
+      }
     };
-    return f(n);
+    return p(s);
   };
 }
 export {
-  y as createComponentResolver,
-  k as createRichTextHook
+  d as createRichTextHook
 };

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 import { apiPlugin } from '@storyblok/js';
 import { ArrayFn } from '@storyblok/js';
+import { asTag } from '@storyblok/js';
 import { AsyncFn } from '@storyblok/js';
 import { BlockTypes } from '@storyblok/js';
+import { ComponentBlok } from '@storyblok/js';
 import { default as default_2 } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { ISbAlternateObject } from '@storyblok/js';
@@ -36,14 +38,13 @@ import { StoryblokBridgeV2 } from '@storyblok/js';
 import { StoryblokClient } from '@storyblok/js';
 import { StoryblokComponentType } from '@storyblok/js';
 import { storyblokEditable } from '@storyblok/js';
+import { StoryblokRichTextDocumentNode } from '@storyblok/richtext';
 import { StoryblokRichTextImageOptimizationOptions } from '@storyblok/js';
 import { StoryblokRichTextNode } from '@storyblok/js';
 import { StoryblokRichTextNode as StoryblokRichTextNode_2 } from '@storyblok/richtext';
-import { StoryblokRichTextNodeResolver } from '@storyblok/js';
 import { StoryblokRichTextNodeTypes } from '@storyblok/js';
 import { StoryblokRichTextOptions } from '@storyblok/js';
 import { StoryblokRichTextOptions as StoryblokRichTextOptions_2 } from '@storyblok/richtext';
-import { StoryblokRichTextResolvers } from '@storyblok/js';
 import { TextTypes } from '@storyblok/js';
 import { useStoryblokBridge } from '@storyblok/js';
 
@@ -51,10 +52,14 @@ export { apiPlugin }
 
 export { ArrayFn }
 
+export { asTag }
+
 export { AsyncFn }
 
 export { BlockTypes }
 
+export { ComponentBlok }
+
 /**
  * Recursively converts HTML attributes in a React element tree to their JSX property names.
  *
@@ -168,19 +173,15 @@ export { StoryblokRichTextImageOptimizationOptions }
 
 export { StoryblokRichTextNode }
 
-export { StoryblokRichTextNodeResolver }
-
 export { StoryblokRichTextNodeTypes }
 
 export { StoryblokRichTextOptions }
 
 export declare interface StoryblokRichTextProps {
     doc: StoryblokRichTextNode<default_2.ReactElement>;
-    resolvers?: StoryblokRichTextResolvers<default_2.ReactElement>;
+    tiptapExtensions?: StoryblokRichTextOptions<default_2.ReactElement>['tiptapExtensions'];
 }
 
-export { StoryblokRichTextResolvers }
-
 export { TextTypes }
 
 export declare type TUseStoryblokState = <T = void>(initialStory: ISbStoryData<T> | null, bridgeOptions?: StoryblokBridgeConfigV2) => ISbStoryData<T> | null;
@@ -196,12 +197,12 @@ export { useStoryblokApi }
 export { useStoryblokBridge }
 
 export declare const useStoryblokRichText: (options: StoryblokRichTextOptions_2<React.ReactElement>) => {
-    render: (node: StoryblokRichTextNode_2<ReactNode>) => ReactNode;
+    render: (node: StoryblokRichTextDocumentNode | StoryblokRichTextNode_2<ReactNode>) => ReactNode;
 };
 
 /** @deprecated Use useStoryblokRichText instead */
 export declare const useStoryblokRichTextResolver: (options: StoryblokRichTextOptions_2<React.ReactElement>) => {
-    render: (node: StoryblokRichTextNode_2<ReactNode>) => ReactNode;
+    render: (node: StoryblokRichTextDocumentNode | StoryblokRichTextNode_2<ReactNode>) => ReactNode;
 };
 
 export declare const useStoryblokState: TUseStoryblokState;

package/dist/index.js

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

package/dist/index.mjs

@@ -1,65 +1,67 @@
-import { useState as f, useEffect as u } from "react";
-import { registerStoryblokBridge as k } from "@storyblok/js";
-import { BlockTypes as T, MarkTypes as B, TextTypes as E, apiPlugin as w, loadStoryblokBridge as C, registerStoryblokBridge as h, renderRichText as A, richTextResolver as I, storyblokEditable as L, useStoryblokBridge as F } from "@storyblok/js";
-import { storyblokInit as _ } from "./core/init.mjs";
-import { useStoryblokApi as m } from "./core/use-storyblok-api.mjs";
-import { default as M } from "./core/storyblok-component.mjs";
-import { useStoryblokState as V } from "./core/use-storyblok-state.mjs";
+import { useState as f, useEffect as k } from "react";
+import { registerStoryblokBridge as u } from "@storyblok/js";
+import { BlockTypes as B, ComponentBlok as R, MarkTypes as C, TextTypes as E, apiPlugin as w, asTag as h, loadStoryblokBridge as A, registerStoryblokBridge as I, renderRichText as L, richTextResolver as F, storyblokEditable as P, useStoryblokBridge as _ } from "@storyblok/js";
+import { storyblokInit as M } from "./core/init.mjs";
+import { getStoryblokApi as m } from "./core/use-storyblok-api.mjs";
+import { default as V } from "./core/storyblok-component.mjs";
+import { useStoryblokState as $ } from "./core/use-storyblok-state.mjs";
 import { useStoryblokRichText as c } from "./richtext.mjs";
-import { default as $ } from "./storyblok-rich-text.mjs";
-import { convertAttributesInElement as q, isBridgeLoaded as z, isBrowser as D, isIframe as G, isServer as H, isVisualEditor as K } from "./utils.mjs";
-import { getComponent as U, getCustomFallbackComponent as W, getEnableFallbackComponent as X, setComponents as Z } from "./core/state.mjs";
-const x = (s, e = {}, o = {}) => {
+import { default as q } from "./storyblok-rich-text.mjs";
+import { convertAttributesInElement as D, isBridgeLoaded as G, isBrowser as H, isIframe as K, isServer as Q, isVisualEditor as U } from "./utils.mjs";
+import { getComponent as X, getCustomFallbackComponent as Z, getEnableFallbackComponent as O, setComponents as oo } from "./core/state.mjs";
+const g = (s, e = {}, o = {}) => {
   const [n, l] = f({}), i = typeof window < "u" && typeof window.storyblokRegisterEvent < "u", t = m();
-  return u(() => {
+  return k(() => {
     if (!t) {
       console.error(
         "You can't use useStoryblok if you're not loading apiPlugin."
       );
       return;
     }
-    async function y() {
+    async function a() {
       const { data: r } = await t.get(
         `cdn/stories/${s}`,
         e
       );
-      l(r.story), i && r.story.id && k(
+      l(r.story), i && r.story.id && u(
         r.story.id,
-        (a) => l(a),
+        (y) => l(y),
         o
       );
     }
-    y();
+    a();
   }, [s, JSON.stringify(e), t]), t ? (o.resolveRelations = o.resolveRelations ?? e.resolve_relations, o.resolveLinks = o.resolveLinks ?? e.resolve_links, n) : null;
-}, g = c;
+}, x = c;
 export {
-  T as BlockTypes,
-  B as MarkTypes,
-  M as StoryblokComponent,
-  $ as StoryblokRichText,
+  B as BlockTypes,
+  R as ComponentBlok,
+  C as MarkTypes,
+  V as StoryblokComponent,
+  q as StoryblokRichText,
   E as TextTypes,
   w as apiPlugin,
-  q as convertAttributesInElement,
-  U as getComponent,
-  W as getCustomFallbackComponent,
-  X as getEnableFallbackComponent,
+  h as asTag,
+  D as convertAttributesInElement,
+  X as getComponent,
+  Z as getCustomFallbackComponent,
+  O as getEnableFallbackComponent,
   m as getStoryblokApi,
-  z as isBridgeLoaded,
-  D as isBrowser,
-  G as isIframe,
-  H as isServer,
-  K as isVisualEditor,
-  C as loadStoryblokBridge,
-  h as registerStoryblokBridge,
-  A as renderRichText,
-  I as richTextResolver,
-  Z as setComponents,
-  L as storyblokEditable,
-  _ as storyblokInit,
-  x as useStoryblok,
+  G as isBridgeLoaded,
+  H as isBrowser,
+  K as isIframe,
+  Q as isServer,
+  U as isVisualEditor,
+  A as loadStoryblokBridge,
+  I as registerStoryblokBridge,
+  L as renderRichText,
+  F as richTextResolver,
+  oo as setComponents,
+  P as storyblokEditable,
+  M as storyblokInit,
+  g as useStoryblok,
   m as useStoryblokApi,
-  F as useStoryblokBridge,
+  _ as useStoryblokBridge,
   c as useStoryblokRichText,
-  g as useStoryblokRichTextResolver,
-  V as useStoryblokState
+  x as useStoryblokRichTextResolver,
+  $ as useStoryblokState
 };

package/dist/rsc.d.ts

@@ -1,7 +1,9 @@
 import { apiPlugin } from '@storyblok/js';
 import { ArrayFn } from '@storyblok/js';
+import { asTag } from '@storyblok/js';
 import { AsyncFn } from '@storyblok/js';
 import { BlockTypes } from '@storyblok/js';
+import { ComponentBlok } from '@storyblok/js';
 import { default as default_2 } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { ISbAlternateObject } from '@storyblok/js';
@@ -35,14 +37,13 @@ import { StoryblokBridgeV2 } from '@storyblok/js';
 import { StoryblokClient } from '@storyblok/js';
 import { StoryblokComponentType } from '@storyblok/js';
 import { storyblokEditable } from '@storyblok/js';
+import { StoryblokRichTextDocumentNode } from '@storyblok/richtext';
 import { StoryblokRichTextImageOptimizationOptions } from '@storyblok/js';
 import { StoryblokRichTextNode } from '@storyblok/js';
 import { StoryblokRichTextNode as StoryblokRichTextNode_2 } from '@storyblok/richtext';
-import { StoryblokRichTextNodeResolver } from '@storyblok/js';
 import { StoryblokRichTextNodeTypes } from '@storyblok/js';
 import { StoryblokRichTextOptions } from '@storyblok/js';
 import { StoryblokRichTextOptions as StoryblokRichTextOptions_2 } from '@storyblok/richtext';
-import { StoryblokRichTextResolvers } from '@storyblok/js';
 import { TextTypes } from '@storyblok/js';
 import { useStoryblokBridge } from '@storyblok/js';
 
@@ -50,10 +51,14 @@ export { apiPlugin }
 
 export { ArrayFn }
 
+export { asTag }
+
 export { AsyncFn }
 
 export { BlockTypes }
 
+export { ComponentBlok }
+
 export declare const getComponent: (componentKey: string) => React.ElementType | false;
 
 export declare const getCustomFallbackComponent: () => React.ElementType;
@@ -147,19 +152,15 @@ export { StoryblokRichTextImageOptimizationOptions }
 
 export { StoryblokRichTextNode }
 
-export { StoryblokRichTextNodeResolver }
-
 export { StoryblokRichTextNodeTypes }
 
 export { StoryblokRichTextOptions }
 
 export declare interface StoryblokRichTextProps {
     doc: StoryblokRichTextNode<default_2.ReactElement>;
-    resolvers?: StoryblokRichTextResolvers<default_2.ReactElement>;
+    tiptapExtensions?: StoryblokRichTextOptions<default_2.ReactElement>['tiptapExtensions'];
 }
 
-export { StoryblokRichTextResolvers }
-
 export declare const StoryblokServerComponent: ForwardRefExoticComponent<Omit<SbServerComponentProps, "ref"> & RefAttributes<HTMLElement>>;
 
 export declare const StoryblokServerRichText: default_2.ForwardRefExoticComponent<StoryblokRichTextProps & default_2.RefAttributes<HTMLDivElement>>;
@@ -188,7 +189,7 @@ export declare type TUseStoryblokState = <T = void>(initialStory: ISbStoryData<T
 export { useStoryblokBridge }
 
 export declare const useStoryblokServerRichText: (options: StoryblokRichTextOptions_2<React.ReactElement>) => {
-    render: (node: StoryblokRichTextNode_2<ReactNode>) => ReactNode;
+    render: (node: StoryblokRichTextDocumentNode | StoryblokRichTextNode_2<ReactNode>) => ReactNode;
 };
 
 export { }

package/dist/rsc.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./core/init.js"),o=require("./server/richtext.js"),n=require("./server/server-component.js"),i=require("./server/server-story.js"),l=require("./server/server-storyblok-richtext-component.js"),b=require("./rsc/live-editing.js"),s=require("./rsc/story.js"),e=require("@storyblok/js"),t=require("./core/state.js"),u=require("./core/use-storyblok-api.js");exports.storyblokInit=r.storyblokInit;exports.useStoryblokServerRichText=o.useStoryblokServerRichText;exports.StoryblokServerComponent=n;exports.StoryblokServerStory=i;exports.StoryblokServerRichText=l;exports.StoryblokLiveEditing=b;exports.StoryblokStory=s;Object.defineProperty(exports,"BlockTypes",{enumerable:!0,get:()=>e.BlockTypes});Object.defineProperty(exports,"MarkTypes",{enumerable:!0,get:()=>e.MarkTypes});Object.defineProperty(exports,"TextTypes",{enumerable:!0,get:()=>e.TextTypes});Object.defineProperty(exports,"apiPlugin",{enumerable:!0,get:()=>e.apiPlugin});Object.defineProperty(exports,"loadStoryblokBridge",{enumerable:!0,get:()=>e.loadStoryblokBridge});Object.defineProperty(exports,"registerStoryblokBridge",{enumerable:!0,get:()=>e.registerStoryblokBridge});Object.defineProperty(exports,"renderRichText",{enumerable:!0,get:()=>e.renderRichText});Object.defineProperty(exports,"richTextResolver",{enumerable:!0,get:()=>e.richTextResolver});Object.defineProperty(exports,"storyblokEditable",{enumerable:!0,get:()=>e.storyblokEditable});Object.defineProperty(exports,"useStoryblokBridge",{enumerable:!0,get:()=>e.useStoryblokBridge});exports.getComponent=t.getComponent;exports.getCustomFallbackComponent=t.getCustomFallbackComponent;exports.getEnableFallbackComponent=t.getEnableFallbackComponent;exports.setComponents=t.setComponents;exports.getStoryblokApi=u.useStoryblokApi;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./core/init.js"),o=require("./server/richtext.js"),n=require("./server/server-component.js"),i=require("./server/server-story.js"),l=require("./server/server-storyblok-richtext-component.js"),b=require("./rsc/live-editing.js"),u=require("./rsc/story.js"),e=require("@storyblok/js"),t=require("./core/state.js"),s=require("./core/use-storyblok-api.js");exports.storyblokInit=r.storyblokInit;exports.useStoryblokServerRichText=o.useStoryblokServerRichText;exports.StoryblokServerComponent=n;exports.StoryblokServerStory=i;exports.StoryblokServerRichText=l;exports.StoryblokLiveEditing=b;exports.StoryblokStory=u;Object.defineProperty(exports,"BlockTypes",{enumerable:!0,get:()=>e.BlockTypes});Object.defineProperty(exports,"ComponentBlok",{enumerable:!0,get:()=>e.ComponentBlok});Object.defineProperty(exports,"MarkTypes",{enumerable:!0,get:()=>e.MarkTypes});Object.defineProperty(exports,"TextTypes",{enumerable:!0,get:()=>e.TextTypes});Object.defineProperty(exports,"apiPlugin",{enumerable:!0,get:()=>e.apiPlugin});Object.defineProperty(exports,"asTag",{enumerable:!0,get:()=>e.asTag});Object.defineProperty(exports,"loadStoryblokBridge",{enumerable:!0,get:()=>e.loadStoryblokBridge});Object.defineProperty(exports,"registerStoryblokBridge",{enumerable:!0,get:()=>e.registerStoryblokBridge});Object.defineProperty(exports,"renderRichText",{enumerable:!0,get:()=>e.renderRichText});Object.defineProperty(exports,"richTextResolver",{enumerable:!0,get:()=>e.richTextResolver});Object.defineProperty(exports,"storyblokEditable",{enumerable:!0,get:()=>e.storyblokEditable});Object.defineProperty(exports,"useStoryblokBridge",{enumerable:!0,get:()=>e.useStoryblokBridge});exports.getComponent=t.getComponent;exports.getCustomFallbackComponent=t.getCustomFallbackComponent;exports.getEnableFallbackComponent=t.getEnableFallbackComponent;exports.setComponents=t.setComponents;exports.getStoryblokApi=s.getStoryblokApi;

package/dist/rsc.mjs

@@ -1,34 +1,36 @@
 import { storyblokInit as r } from "./core/init.mjs";
 import { useStoryblokServerRichText as l } from "./server/richtext.mjs";
-import { default as a } from "./server/server-component.mjs";
-import { default as y } from "./server/server-story.mjs";
-import { default as i } from "./server/server-storyblok-richtext-component.mjs";
-import { default as S } from "./rsc/live-editing.mjs";
-import { default as f } from "./rsc/story.mjs";
-import { BlockTypes as x, MarkTypes as d, TextTypes as g, apiPlugin as u, loadStoryblokBridge as T, registerStoryblokBridge as c, renderRichText as v, richTextResolver as C, storyblokEditable as h, useStoryblokBridge as B } from "@storyblok/js";
-import { getComponent as E, getCustomFallbackComponent as A, getEnableFallbackComponent as F, setComponents as I } from "./core/state.mjs";
-import { useStoryblokApi as M } from "./core/use-storyblok-api.mjs";
+import { default as p } from "./server/server-component.mjs";
+import { default as k } from "./server/server-story.mjs";
+import { default as n } from "./server/server-storyblok-richtext-component.mjs";
+import { default as b } from "./rsc/live-editing.mjs";
+import { default as S } from "./rsc/story.mjs";
+import { BlockTypes as x, ComponentBlok as d, MarkTypes as g, TextTypes as u, apiPlugin as T, asTag as c, loadStoryblokBridge as C, registerStoryblokBridge as v, renderRichText as B, richTextResolver as h, storyblokEditable as R, useStoryblokBridge as E } from "@storyblok/js";
+import { getComponent as A, getCustomFallbackComponent as I, getEnableFallbackComponent as L, setComponents as M } from "./core/state.mjs";
+import { getStoryblokApi as j } from "./core/use-storyblok-api.mjs";
 export {
   x as BlockTypes,
-  d as MarkTypes,
-  S as StoryblokLiveEditing,
-  a as StoryblokServerComponent,
-  i as StoryblokServerRichText,
-  y as StoryblokServerStory,
-  f as StoryblokStory,
-  g as TextTypes,
-  u as apiPlugin,
-  E as getComponent,
-  A as getCustomFallbackComponent,
-  F as getEnableFallbackComponent,
-  M as getStoryblokApi,
-  T as loadStoryblokBridge,
-  c as registerStoryblokBridge,
-  v as renderRichText,
-  C as richTextResolver,
-  I as setComponents,
-  h as storyblokEditable,
+  d as ComponentBlok,
+  g as MarkTypes,
+  b as StoryblokLiveEditing,
+  p as StoryblokServerComponent,
+  n as StoryblokServerRichText,
+  k as StoryblokServerStory,
+  S as StoryblokStory,
+  u as TextTypes,
+  T as apiPlugin,
+  c as asTag,
+  A as getComponent,
+  I as getCustomFallbackComponent,
+  L as getEnableFallbackComponent,
+  j as getStoryblokApi,
+  C as loadStoryblokBridge,
+  v as registerStoryblokBridge,
+  B as renderRichText,
+  h as richTextResolver,
+  M as setComponents,
+  R as storyblokEditable,
   r as storyblokInit,
-  B as useStoryblokBridge,
+  E as useStoryblokBridge,
   l as useStoryblokServerRichText
 };

package/dist/server/server-storyblok-richtext-component.js

@@ -1 +1 @@
-"use strict";const c=require("react/jsx-runtime"),i=require("react"),u=require("../utils.js"),l=require("./richtext.js"),x=i.forwardRef(({doc:t,resolvers:e},r)=>{if(!t)return null;const{render:n}=l.useStoryblokServerRichText({resolvers:e}),s=n(t),o=u.convertAttributesInElement(s);return c.jsx("div",{ref:r,children:o})});module.exports=x;
+"use strict";const c=require("react/jsx-runtime"),i=require("react"),u=require("../utils.js"),l=require("./richtext.js"),x=i.forwardRef(({doc:t,tiptapExtensions:e},r)=>{if(!t)return null;const{render:n}=l.useStoryblokServerRichText({tiptapExtensions:e}),s=n(t),o=u.convertAttributesInElement(s);return c.jsx("div",{ref:r,children:o})});module.exports=x;

package/dist/server/server-storyblok-richtext-component.mjs

@@ -3,11 +3,11 @@ import { forwardRef as f } from "react";
 import { convertAttributesInElement as l } from "../utils.mjs";
 import { useStoryblokServerRichText as s } from "./richtext.mjs";
 const a = f(
-  ({ doc: r, resolvers: t }, o) => {
+  ({ doc: r, tiptapExtensions: t }, o) => {
     if (!r)
       return null;
     const { render: e } = s({
-      resolvers: t
+      tiptapExtensions: t
     }), m = e(r), n = l(m);
     return /* @__PURE__ */ i("div", { ref: o, children: n });
   }

package/dist/ssr.d.ts

@@ -1,7 +1,9 @@
 import { apiPlugin } from '@storyblok/js';
 import { ArrayFn } from '@storyblok/js';
+import { asTag } from '@storyblok/js';
 import { AsyncFn } from '@storyblok/js';
 import { BlockTypes } from '@storyblok/js';
+import { ComponentBlok } from '@storyblok/js';
 import { default as default_2 } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { ISbAlternateObject } from '@storyblok/js';
@@ -35,14 +37,13 @@ import { StoryblokBridgeV2 } from '@storyblok/js';
 import { StoryblokClient } from '@storyblok/js';
 import { StoryblokComponentType } from '@storyblok/js';
 import { storyblokEditable } from '@storyblok/js';
+import { StoryblokRichTextDocumentNode } from '@storyblok/richtext';
 import { StoryblokRichTextImageOptimizationOptions } from '@storyblok/js';
 import { StoryblokRichTextNode } from '@storyblok/js';
 import { StoryblokRichTextNode as StoryblokRichTextNode_2 } from '@storyblok/richtext';
-import { StoryblokRichTextNodeResolver } from '@storyblok/js';
 import { StoryblokRichTextNodeTypes } from '@storyblok/js';
 import { StoryblokRichTextOptions } from '@storyblok/js';
 import { StoryblokRichTextOptions as StoryblokRichTextOptions_2 } from '@storyblok/richtext';
-import { StoryblokRichTextResolvers } from '@storyblok/js';
 import { TextTypes } from '@storyblok/js';
 import { useStoryblokBridge } from '@storyblok/js';
 
@@ -50,10 +51,14 @@ export { apiPlugin }
 
 export { ArrayFn }
 
+export { asTag }
+
 export { AsyncFn }
 
 export { BlockTypes }
 
+export { ComponentBlok }
+
 export declare const getComponent: (componentKey: string) => React.ElementType | false;
 
 export declare const getCustomFallbackComponent: () => React.ElementType;
@@ -146,19 +151,15 @@ export { StoryblokRichTextImageOptimizationOptions }
 
 export { StoryblokRichTextNode }
 
-export { StoryblokRichTextNodeResolver }
-
 export { StoryblokRichTextNodeTypes }
 
 export { StoryblokRichTextOptions }
 
 export declare interface StoryblokRichTextProps {
     doc: StoryblokRichTextNode<default_2.ReactElement>;
-    resolvers?: StoryblokRichTextResolvers<default_2.ReactElement>;
+    tiptapExtensions?: StoryblokRichTextOptions<default_2.ReactElement>['tiptapExtensions'];
 }
 
-export { StoryblokRichTextResolvers }
-
 export declare const StoryblokServerComponent: ForwardRefExoticComponent<Omit<SbServerComponentProps, "ref"> & RefAttributes<HTMLElement>>;
 
 export declare const StoryblokServerRichText: default_2.ForwardRefExoticComponent<StoryblokRichTextProps & default_2.RefAttributes<HTMLDivElement>>;
@@ -184,7 +185,7 @@ export { useStoryblokApi }
 export { useStoryblokBridge }
 
 export declare const useStoryblokServerRichText: (options: StoryblokRichTextOptions_2<React.ReactElement>) => {
-    render: (node: StoryblokRichTextNode_2<ReactNode>) => ReactNode;
+    render: (node: StoryblokRichTextDocumentNode | StoryblokRichTextNode_2<ReactNode>) => ReactNode;
 };
 
 export declare const useStoryblokState: TUseStoryblokState;

package/dist/ssr.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./core/init.js"),r=require("./core/use-storyblok-api.js"),n=require("./core/storyblok-component.js"),l=require("./core/use-storyblok-state.js"),e=require("@storyblok/js"),b=require("./server/richtext.js"),i=require("./server/server-component.js"),s=require("./server/server-story.js"),u=require("./server/server-storyblok-richtext-component.js"),t=require("./core/state.js");exports.storyblokInit=o.storyblokInit;exports.getStoryblokApi=r.useStoryblokApi;exports.useStoryblokApi=r.useStoryblokApi;exports.StoryblokComponent=n;exports.useStoryblokState=l.useStoryblokState;Object.defineProperty(exports,"BlockTypes",{enumerable:!0,get:()=>e.BlockTypes});Object.defineProperty(exports,"MarkTypes",{enumerable:!0,get:()=>e.MarkTypes});Object.defineProperty(exports,"TextTypes",{enumerable:!0,get:()=>e.TextTypes});Object.defineProperty(exports,"apiPlugin",{enumerable:!0,get:()=>e.apiPlugin});Object.defineProperty(exports,"loadStoryblokBridge",{enumerable:!0,get:()=>e.loadStoryblokBridge});Object.defineProperty(exports,"registerStoryblokBridge",{enumerable:!0,get:()=>e.registerStoryblokBridge});Object.defineProperty(exports,"renderRichText",{enumerable:!0,get:()=>e.renderRichText});Object.defineProperty(exports,"richTextResolver",{enumerable:!0,get:()=>e.richTextResolver});Object.defineProperty(exports,"storyblokEditable",{enumerable:!0,get:()=>e.storyblokEditable});Object.defineProperty(exports,"useStoryblokBridge",{enumerable:!0,get:()=>e.useStoryblokBridge});exports.useStoryblokServerRichText=b.useStoryblokServerRichText;exports.StoryblokServerComponent=i;exports.StoryblokServerStory=s;exports.StoryblokServerRichText=u;exports.getComponent=t.getComponent;exports.getCustomFallbackComponent=t.getCustomFallbackComponent;exports.getEnableFallbackComponent=t.getEnableFallbackComponent;exports.setComponents=t.setComponents;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./core/init.js"),r=require("./core/use-storyblok-api.js"),n=require("./core/storyblok-component.js"),l=require("./core/use-storyblok-state.js"),e=require("@storyblok/js"),b=require("./server/richtext.js"),i=require("./server/server-component.js"),u=require("./server/server-story.js"),s=require("./server/server-storyblok-richtext-component.js"),t=require("./core/state.js");exports.storyblokInit=o.storyblokInit;exports.getStoryblokApi=r.getStoryblokApi;exports.useStoryblokApi=r.getStoryblokApi;exports.StoryblokComponent=n;exports.useStoryblokState=l.useStoryblokState;Object.defineProperty(exports,"BlockTypes",{enumerable:!0,get:()=>e.BlockTypes});Object.defineProperty(exports,"ComponentBlok",{enumerable:!0,get:()=>e.ComponentBlok});Object.defineProperty(exports,"MarkTypes",{enumerable:!0,get:()=>e.MarkTypes});Object.defineProperty(exports,"TextTypes",{enumerable:!0,get:()=>e.TextTypes});Object.defineProperty(exports,"apiPlugin",{enumerable:!0,get:()=>e.apiPlugin});Object.defineProperty(exports,"asTag",{enumerable:!0,get:()=>e.asTag});Object.defineProperty(exports,"loadStoryblokBridge",{enumerable:!0,get:()=>e.loadStoryblokBridge});Object.defineProperty(exports,"registerStoryblokBridge",{enumerable:!0,get:()=>e.registerStoryblokBridge});Object.defineProperty(exports,"renderRichText",{enumerable:!0,get:()=>e.renderRichText});Object.defineProperty(exports,"richTextResolver",{enumerable:!0,get:()=>e.richTextResolver});Object.defineProperty(exports,"storyblokEditable",{enumerable:!0,get:()=>e.storyblokEditable});Object.defineProperty(exports,"useStoryblokBridge",{enumerable:!0,get:()=>e.useStoryblokBridge});exports.useStoryblokServerRichText=b.useStoryblokServerRichText;exports.StoryblokServerComponent=i;exports.StoryblokServerStory=u;exports.StoryblokServerRichText=s;exports.getComponent=t.getComponent;exports.getCustomFallbackComponent=t.getCustomFallbackComponent;exports.getEnableFallbackComponent=t.getEnableFallbackComponent;exports.setComponents=t.setComponents;

package/dist/ssr.mjs

@@ -1,35 +1,37 @@
 import { storyblokInit as r } from "./core/init.mjs";
-import { useStoryblokApi as l, useStoryblokApi as p } from "./core/use-storyblok-api.mjs";
-import { default as a } from "./core/storyblok-component.mjs";
-import { useStoryblokState as k } from "./core/use-storyblok-state.mjs";
-import { BlockTypes as S, MarkTypes as m, TextTypes as n, apiPlugin as i, loadStoryblokBridge as x, registerStoryblokBridge as f, renderRichText as u, richTextResolver as d, storyblokEditable as g, useStoryblokBridge as T } from "@storyblok/js";
-import { useStoryblokServerRichText as C } from "./server/richtext.mjs";
-import { default as h } from "./server/server-component.mjs";
-import { default as R } from "./server/server-story.mjs";
-import { default as E } from "./server/server-storyblok-richtext-component.mjs";
-import { getComponent as I, getCustomFallbackComponent as M, getEnableFallbackComponent as P, setComponents as j } from "./core/state.mjs";
+import { getStoryblokApi as l, getStoryblokApi as p } from "./core/use-storyblok-api.mjs";
+import { default as s } from "./core/storyblok-component.mjs";
+import { useStoryblokState as b } from "./core/use-storyblok-state.mjs";
+import { BlockTypes as n, ComponentBlok as y, MarkTypes as S, TextTypes as i, apiPlugin as x, asTag as f, loadStoryblokBridge as g, registerStoryblokBridge as d, renderRichText as u, richTextResolver as T, storyblokEditable as C, useStoryblokBridge as c } from "@storyblok/js";
+import { useStoryblokServerRichText as B } from "./server/richtext.mjs";
+import { default as R } from "./server/server-component.mjs";
+import { default as E } from "./server/server-story.mjs";
+import { default as I } from "./server/server-storyblok-richtext-component.mjs";
+import { getComponent as P, getCustomFallbackComponent as j, getEnableFallbackComponent as q, setComponents as w } from "./core/state.mjs";
 export {
-  S as BlockTypes,
-  m as MarkTypes,
-  a as StoryblokComponent,
-  h as StoryblokServerComponent,
-  E as StoryblokServerRichText,
-  R as StoryblokServerStory,
-  n as TextTypes,
-  i as apiPlugin,
-  I as getComponent,
-  M as getCustomFallbackComponent,
-  P as getEnableFallbackComponent,
+  n as BlockTypes,
+  y as ComponentBlok,
+  S as MarkTypes,
+  s as StoryblokComponent,
+  R as StoryblokServerComponent,
+  I as StoryblokServerRichText,
+  E as StoryblokServerStory,
+  i as TextTypes,
+  x as apiPlugin,
+  f as asTag,
+  P as getComponent,
+  j as getCustomFallbackComponent,
+  q as getEnableFallbackComponent,
   l as getStoryblokApi,
-  x as loadStoryblokBridge,
-  f as registerStoryblokBridge,
+  g as loadStoryblokBridge,
+  d as registerStoryblokBridge,
   u as renderRichText,
-  d as richTextResolver,
-  j as setComponents,
-  g as storyblokEditable,
+  T as richTextResolver,
+  w as setComponents,
+  C as storyblokEditable,
   r as storyblokInit,
   p as useStoryblokApi,
-  T as useStoryblokBridge,
-  C as useStoryblokServerRichText,
-  k as useStoryblokState
+  c as useStoryblokBridge,
+  B as useStoryblokServerRichText,
+  b as useStoryblokState
 };

package/dist/storyblok-rich-text.js

@@ -1 +1 @@
-"use strict";const n=require("react/jsx-runtime"),i=require("react"),u=require("./utils.js"),l=require("./richtext.js"),x=i.forwardRef(({doc:t,resolvers:e},r)=>{const{render:o}=l.useStoryblokRichText({resolvers:e}),s=o(t),c=u.convertAttributesInElement(s);return n.jsx("div",{ref:r,children:c})});module.exports=x;
+"use strict";const n=require("react/jsx-runtime"),i=require("react"),u=require("./utils.js"),l=require("./richtext.js"),x=i.forwardRef(({doc:t,tiptapExtensions:e},r)=>{const{render:o}=l.useStoryblokRichText({tiptapExtensions:e}),s=o(t),c=u.convertAttributesInElement(s);return n.jsx("div",{ref:r,children:c})});module.exports=x;

package/dist/storyblok-rich-text.mjs

@@ -3,9 +3,9 @@ import { forwardRef as c } from "react";
 import { convertAttributesInElement as f } from "./utils.mjs";
 import { useStoryblokRichText as s } from "./richtext.mjs";
 const h = c(
-  ({ doc: t, resolvers: r }, o) => {
+  ({ doc: t, tiptapExtensions: r }, o) => {
     const { render: e } = s({
-      resolvers: r
+      tiptapExtensions: r
     }), m = e(t), n = f(m);
     return /* @__PURE__ */ i("div", { ref: o, children: n });
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@storyblok/react",
   "type": "module",
-  "version": "5.4.22",
+  "version": "6.1.0",
   "private": false,
   "description": "SDK to integrate Storyblok into your project using React.",
   "author": "Storyblok",
@@ -49,7 +49,7 @@
     }
   },
   "dependencies": {
-    "@storyblok/js": "4.4.5"
+    "@storyblok/js": "5.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.27.1",
@@ -59,7 +59,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@tsconfig/recommended": "^1.0.8",
-    "@types/node": "^22.15.18",
+    "@types/node": "^24.11.0",
     "@types/react": "19.1.4",
     "@vitejs/plugin-react": "^4.4.1",
     "babel-jest": "^29.7.0",
@@ -76,7 +76,7 @@
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.3",
     "vitest": "^3.1.3",
-    "@storyblok/eslint-config": "0.4.1"
+    "@storyblok/eslint-config": "0.5.0"
   },
   "babel": {
     "presets": [
@@ -107,9 +107,8 @@
     "dev": "vite build --watch",
     "build": "vite build",
     "test:types": "tsc --noEmit --skipLibCheck",
-    "test": "pnpm run test:unit:ci && pnpm run test:e2e-next-13 && pnpm run test:e2e-next-latest",
-    "test:unit": "vitest",
-    "test:unit:ci": "vitest run",
+    "test": "pnpm run test:unit && pnpm run test:e2e-next-13 && pnpm run test:e2e-next-latest",
+    "test:unit": "vitest run",
     "test:unit:ui": "vitest --ui",
     "test:e2e-next-13": "start-server-and-test playground:next-13 http://localhost:3000/ cy:run",
     "test:e2e-next-latest": "start-server-and-test playground:next-latest http://localhost:3000/ cy:run",