@storyblok/react 1.1.5 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -54,6 +54,7 @@ Install the file from the CDN:
54
54
  ### Initialization
55
55
 
56
56
  Register the plugin on your application and add the [access token](https://www.storyblok.com/docs/api/content-delivery#topics/authentication?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-react) of your Storyblok space. You can also add the `apiPlugin` in case that you want to use the Storyblok API Client:
57
+ For Spaces created under `US` region, you should pass the region like `{ apiOptions: { region: 'us' } }`. If your space is under `EU`, no further configuration is required.
57
58
 
58
59
  ```js
59
60
  import { storyblokInit, apiPlugin } from "@storyblok/react";
@@ -61,7 +62,9 @@ import { storyblokInit, apiPlugin } from "@storyblok/react";
61
62
  storyblokInit({
62
63
  accessToken: "YOUR_ACCESS_TOKEN",
63
64
  // bridge: false,
64
- // apiOptions: { },
65
+ apiOptions: {
66
+ region: "us", // Pass this key/value if your space was created under US region
67
+ },
65
68
  use: [apiPlugin],
66
69
  components: {
67
70
  page: Page,
@@ -106,7 +109,7 @@ storyblokInit({
106
109
  },
107
110
  });
108
111
 
109
- const storyblokApi = getStoryblokApi()
112
+ const storyblokApi = getStoryblokApi();
110
113
  const { data } = await storyblokApi.get("cdn/stories", { version: "draft" });
111
114
  ```
112
115
 
@@ -166,7 +169,11 @@ Where `blok` is the actual blok data coming from [Storblok's Content Delivery AP
166
169
  As an example, you can check in our [Next.js example demo](https://stackblitz.com/edit/react-next-sdk-demo?file=src%2Fpages%2Findex.jsx) how we use APIs provided from React SDK to combine with Next.js projects.
167
170
 
168
171
  ```js
169
- import { useStoryblokState, getStoryblokApi, StoryblokComponent } from "@storyblok/react";
172
+ import {
173
+ useStoryblokState,
174
+ getStoryblokApi,
175
+ StoryblokComponent,
176
+ } from "@storyblok/react";
170
177
 
171
178
  export default function Home({ story: initialStory }) {
172
179
  const story = useStoryblokState(initialStory);
@@ -178,11 +185,10 @@ export default function Home({ story: initialStory }) {
178
185
  return <StoryblokComponent blok={story.content} />;
179
186
  }
180
187
 
181
-
182
188
  export async function getStaticProps({ preview = false }) {
183
- const storyblokApi = getStoryblokApi()
189
+ const storyblokApi = getStoryblokApi();
184
190
  let { data } = await storyblokApi.get(`cdn/stories/react`, {
185
- version: "draft"
191
+ version: "draft",
186
192
  });
187
193
 
188
194
  return {
@@ -241,6 +247,61 @@ sbBridge.on(["input", "published", "change"], (event) => {
241
247
  });
242
248
  ```
243
249
 
250
+ #### Rendering Rich Text
251
+
252
+ You can easily render rich text by using the `renderRichText` function that comes with `@storyblok/react`:
253
+
254
+ ```js
255
+ import { renderRichText } from "@storyblok/react";
256
+
257
+ const renderedRichText = renderRichText(blok.richtext);
258
+ ```
259
+
260
+ You can set a **custom Schema and component resolver globally** at init time by using the `richText` init option:
261
+
262
+ ```js
263
+ import { RichTextSchema, storyblokInit } from "@storyblok/react";
264
+ import cloneDeep from "clone-deep";
265
+
266
+ const mySchema = cloneDeep(RichTextSchema); // you can make a copy of the default RichTextSchema
267
+ // ... and edit the nodes and marks, or add your own.
268
+ // Check the base RichTextSchema source here https://github.com/storyblok/storyblok-js-client/blob/master/source/schema.js
269
+
270
+ storyblokInit({
271
+ accessToken: "<your-token>",
272
+ richText: {
273
+ schema: mySchema,
274
+ resolver: (component, blok) => {
275
+ switch (component) {
276
+ case "my-custom-component":
277
+ return `<div class="my-component-class">${blok.text}</div>`;
278
+ default:
279
+ return "Resolver not defined";
280
+ }
281
+ },
282
+ },
283
+ });
284
+ ```
285
+
286
+ You can also set a **custom Schema and component resolver only once** by passing the options as the second parameter to `renderRichText` function:
287
+
288
+ ```js
289
+ import { renderRichText } from "@storyblok/react";
290
+
291
+ renderRichText(blok.richTextField, {
292
+ schema: mySchema,
293
+ resolver: (component, blok) => {
294
+ switch (component) {
295
+ case "my-custom-component":
296
+ return `<div class="my-component-class">${blok.text}</div>`;
297
+ break;
298
+ default:
299
+ return `Component ${component} not found`;
300
+ }
301
+ },
302
+ });
303
+ ```
304
+
244
305
  ## 🔗 Related Links
245
306
 
246
307
  - **[Storyblok Technology Hub](https://www.storyblok.com/technologies?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-react)**: Storyblok integrates with every framework so that you are free to choose the best fit for your project. We prepared the technology hub so that you can find selected beginner tutorials, videos, boilerplates, and even cheatsheets all in one place.
@@ -1,5 +1,7 @@
1
- (function(l,h){typeof exports=="object"&&typeof module!="undefined"?h(exports,require("react"),require("axios")):typeof define=="function"&&define.amd?define(["exports","react","axios"],h):(l=typeof globalThis!="undefined"?globalThis:l||self,h(l.storyblokReact={},l.React,l.e))})(this,function(l,h,p){"use strict";var ht=Object.defineProperty;var v=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var N=(l,h,p)=>h in l?ht(l,h,{enumerable:!0,configurable:!0,writable:!0,value:p}):l[h]=p,q=(l,h)=>{for(var p in h||(h={}))x.call(h,p)&&N(l,p,h[p]);if(v)for(var p of v(h))I.call(h,p)&&N(l,p,h[p]);return l};var L=(l,h)=>{var p={};for(var f in l)x.call(l,f)&&h.indexOf(f)<0&&(p[f]=l[f]);if(l!=null&&v)for(var f of v(l))h.indexOf(f)<0&&I.call(l,f)&&(p[f]=l[f]);return p};function f(n){return n&&typeof n=="object"&&"default"in n?n:{default:n}}var _=f(h),B=f(p),z=Object.defineProperty,D=Object.defineProperties,U=Object.getOwnPropertyDescriptors,S=Object.getOwnPropertySymbols,H=Object.prototype.hasOwnProperty,V=Object.prototype.propertyIsEnumerable,R=(n,t,e)=>t in n?z(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e,g=(n,t)=>{for(var e in t||(t={}))H.call(t,e)&&R(n,e,t[e]);if(S)for(var e of S(t))V.call(t,e)&&R(n,e,t[e]);return n},T=(n,t)=>D(n,U(t));let O=!1;const P=[],J=n=>new Promise((t,e)=>{if(typeof window=="undefined"||(window.storyblokRegisterEvent=s=>{if(window.location===window.parent.location){console.warn("You are not in Draft Mode or in the Visual Editor.");return}O?s():P.push(s)},document.getElementById("storyblok-javascript-bridge")))return;const r=document.createElement("script");r.async=!0,r.src=n,r.id="storyblok-javascript-bridge",r.onerror=s=>e(s),r.onload=s=>{P.forEach(o=>o()),O=!0,t(s)},document.getElementsByTagName("head")[0].appendChild(r)}),Y=function(n,t){if(!n)return null;let e={};for(let r in n){let s=n[r];t.indexOf(r)>-1&&s!==null&&(e[r]=s)}return e},F=n=>n==="email";var G={nodes:{horizontal_rule(){return{singleTag:"hr"}},blockquote(){return{tag:"blockquote"}},bullet_list(){return{tag:"ul"}},code_block(n){return{tag:["pre",{tag:"code",attrs:n.attrs}]}},hard_break(){return{singleTag:"br"}},heading(n){return{tag:`h${n.attrs.level}`}},image(n){return{singleTag:[{tag:"img",attrs:Y(n.attrs,["src","alt","title"])}]}},list_item(){return{tag:"li"}},ordered_list(){return{tag:"ol"}},paragraph(){return{tag:"p"}}},marks:{bold(){return{tag:"b"}},strike(){return{tag:"strike"}},underline(){return{tag:"u"}},strong(){return{tag:"strong"}},code(){return{tag:"code"}},italic(){return{tag:"i"}},link(n){const t=g({},n.attrs),{linktype:e="url"}=n.attrs;return F(e)&&(t.href=`mailto:${t.href}`),t.anchor&&(t.href=`${t.href}#${t.anchor}`,delete t.anchor),{tag:[{tag:"a",attrs:t}]}},styled(n){return{tag:[{tag:"span",attrs:n.attrs}]}}}};const Q=function(n){const t={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},e=/[&<>"']/g,r=RegExp(e.source);return n&&r.test(n)?n.replace(e,s=>t[s]):n};class W{constructor(t){t||(t=G),this.marks=t.marks||[],this.nodes=t.nodes||[]}addNode(t,e){this.nodes[t]=e}addMark(t,e){this.marks[t]=e}render(t={}){if(t.content&&Array.isArray(t.content)){let e="";return t.content.forEach(r=>{e+=this.renderNode(r)}),e}return console.warn("The render method must receive an object with a content field, which is an array"),""}renderNode(t){let e=[];t.marks&&t.marks.forEach(s=>{const o=this.getMatchingMark(s);o&&e.push(this.renderOpeningTag(o.tag))});const r=this.getMatchingNode(t);return r&&r.tag&&e.push(this.renderOpeningTag(r.tag)),t.content?t.content.forEach(s=>{e.push(this.renderNode(s))}):t.text?e.push(Q(t.text)):r&&r.singleTag?e.push(this.renderTag(r.singleTag," /")):r&&r.html&&e.push(r.html),r&&r.tag&&e.push(this.renderClosingTag(r.tag)),t.marks&&t.marks.slice(0).reverse().forEach(s=>{const o=this.getMatchingMark(s);o&&e.push(this.renderClosingTag(o.tag))}),e.join("")}renderTag(t,e){return t.constructor===String?`<${t}${e}>`:t.map(s=>{if(s.constructor===String)return`<${s}${e}>`;{let o=`<${s.tag}`;if(s.attrs)for(let i in s.attrs){let a=s.attrs[i];a!==null&&(o+=` ${i}="${a}"`)}return`${o}${e}>`}}).join("")}renderOpeningTag(t){return this.renderTag(t,"")}renderClosingTag(t){return t.constructor===String?`</${t}>`:t.slice(0).reverse().map(r=>r.constructor===String?`</${r}>`:`</${r.tag}>`).join("")}getMatchingNode(t){if(typeof this.nodes[t.type]=="function")return this.nodes[t.type](t)}getMatchingMark(t){if(typeof this.marks[t.type]=="function")return this.marks[t.type](t)}}/*!
1
+ (function(l,h){typeof exports=="object"&&typeof module!="undefined"?h(exports,require("react"),require("axios")):typeof define=="function"&&define.amd?define(["exports","react","axios"],h):(l=typeof globalThis!="undefined"?globalThis:l||self,h(l.storyblokReact={},l.React,l.e))})(this,function(l,h,p){"use strict";var fe=Object.defineProperty;var T=Object.getOwnPropertySymbols;var B=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable;var L=(l,h,p)=>h in l?fe(l,h,{enumerable:!0,configurable:!0,writable:!0,value:p}):l[h]=p,D=(l,h)=>{for(var p in h||(h={}))B.call(h,p)&&L(l,p,h[p]);if(T)for(var p of T(h))z.call(h,p)&&L(l,p,h[p]);return l};var U=(l,h)=>{var p={};for(var f in l)B.call(l,f)&&h.indexOf(f)<0&&(p[f]=l[f]);if(l!=null&&T)for(var f of T(l))h.indexOf(f)<0&&z.call(l,f)&&(p[f]=l[f]);return p};function f(n){return n&&typeof n=="object"&&"default"in n?n:{default:n}}var _=f(h),H=f(p),V=Object.defineProperty,J=Object.defineProperties,Y=Object.getOwnPropertyDescriptors,E=Object.getOwnPropertySymbols,F=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable,O=(n,e,t)=>e in n?V(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,g=(n,e)=>{for(var t in e||(e={}))F.call(e,t)&&O(n,t,e[t]);if(E)for(var t of E(e))G.call(e,t)&&O(n,t,e[t]);return n},w=(n,e)=>J(n,Y(e));let P=!1;const j=[],Q=n=>new Promise((e,t)=>{if(typeof window=="undefined"||(window.storyblokRegisterEvent=s=>{if(window.location===window.parent.location){console.warn("You are not in Draft Mode or in the Visual Editor.");return}P?s():j.push(s)},document.getElementById("storyblok-javascript-bridge")))return;const r=document.createElement("script");r.async=!0,r.src=n,r.id="storyblok-javascript-bridge",r.onerror=s=>t(s),r.onload=s=>{j.forEach(o=>o()),P=!0,e(s)},document.getElementsByTagName("head")[0].appendChild(r)}),W=function(n,e){if(!n)return null;let t={};for(let r in n){let s=n[r];e.indexOf(r)>-1&&s!==null&&(t[r]=s)}return t},X=n=>n==="email";var A={nodes:{horizontal_rule(){return{singleTag:"hr"}},blockquote(){return{tag:"blockquote"}},bullet_list(){return{tag:"ul"}},code_block(n){return{tag:["pre",{tag:"code",attrs:n.attrs}]}},hard_break(){return{singleTag:"br"}},heading(n){return{tag:`h${n.attrs.level}`}},image(n){return{singleTag:[{tag:"img",attrs:W(n.attrs,["src","alt","title"])}]}},list_item(){return{tag:"li"}},ordered_list(){return{tag:"ol"}},paragraph(){return{tag:"p"}}},marks:{bold(){return{tag:"b"}},strike(){return{tag:"strike"}},underline(){return{tag:"u"}},strong(){return{tag:"strong"}},code(){return{tag:"code"}},italic(){return{tag:"i"}},link(n){const e=g({},n.attrs),{linktype:t="url"}=n.attrs;return X(t)&&(e.href=`mailto:${e.href}`),e.anchor&&(e.href=`${e.href}#${e.anchor}`,delete e.anchor),{tag:[{tag:"a",attrs:e}]}},styled(n){return{tag:[{tag:"span",attrs:n.attrs}]}}}};const Z=function(n){const e={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},t=/[&<>"']/g,r=RegExp(t.source);return n&&r.test(n)?n.replace(t,s=>e[s]):n};class C{constructor(e){e||(e=A),this.marks=e.marks||[],this.nodes=e.nodes||[]}addNode(e,t){this.nodes[e]=t}addMark(e,t){this.marks[e]=t}render(e={}){if(e.content&&Array.isArray(e.content)){let t="";return e.content.forEach(r=>{t+=this.renderNode(r)}),t}return console.warn("The render method must receive an object with a content field, which is an array"),""}renderNode(e){let t=[];e.marks&&e.marks.forEach(s=>{const o=this.getMatchingMark(s);o&&t.push(this.renderOpeningTag(o.tag))});const r=this.getMatchingNode(e);return r&&r.tag&&t.push(this.renderOpeningTag(r.tag)),e.content?e.content.forEach(s=>{t.push(this.renderNode(s))}):e.text?t.push(Z(e.text)):r&&r.singleTag?t.push(this.renderTag(r.singleTag," /")):r&&r.html&&t.push(r.html),r&&r.tag&&t.push(this.renderClosingTag(r.tag)),e.marks&&e.marks.slice(0).reverse().forEach(s=>{const o=this.getMatchingMark(s);o&&t.push(this.renderClosingTag(o.tag))}),t.join("")}renderTag(e,t){return e.constructor===String?`<${e}${t}>`:e.map(s=>{if(s.constructor===String)return`<${s}${t}>`;{let o=`<${s.tag}`;if(s.attrs)for(let a in s.attrs){let i=s.attrs[a];i!==null&&(o+=` ${a}="${i}"`)}return`${o}${t}>`}}).join("")}renderOpeningTag(e){return this.renderTag(e,"")}renderClosingTag(e){return e.constructor===String?`</${e}>`:e.slice(0).reverse().map(r=>r.constructor===String?`</${r}>`:`</${r.tag}>`).join("")}getMatchingNode(e){if(typeof this.nodes[e.type]=="function")return this.nodes[e.type](e)}getMatchingMark(e){if(typeof this.marks[e.type]=="function")return this.marks[e.type](e)}}/*!
2
2
  * storyblok-js-client v4.5.2
3
3
  * Universal JavaScript SDK for Storyblok's API
4
4
  * (c) 2020-2022 Stobylok Team
5
- */function j(n){return typeof n=="number"&&n==n&&n!==1/0&&n!==-1/0}function A(n,t,e){if(!j(t))throw new TypeError("Expected `limit` to be a finite number");if(!j(e))throw new TypeError("Expected `interval` to be a finite number");var r=[],s=[],o=0,i=function(){o++;var u=setTimeout(function(){o--,r.length>0&&i(),s=s.filter(function(d){return d!==u})},e);s.indexOf(u)<0&&s.push(u);var c=r.shift();c.resolve(n.apply(c.self,c.args))},a=function(){var u=arguments,c=this;return new Promise(function(d,k){r.push({resolve:d,reject:k,args:u,self:c}),o<t&&i()})};return a.abort=function(){s.forEach(clearTimeout),s=[],r.forEach(function(u){u.reject(new throttle.AbortError)}),r.length=0},a}A.AbortError=function(){Error.call(this,"Throttled function aborted"),this.name="AbortError"};const X=function(n,t){if(!n)return null;let e={};for(let r in n){let s=n[r];t.indexOf(r)>-1&&s!==null&&(e[r]=s)}return e};var Z={nodes:{horizontal_rule:()=>({singleTag:"hr"}),blockquote:()=>({tag:"blockquote"}),bullet_list:()=>({tag:"ul"}),code_block:n=>({tag:["pre",{tag:"code",attrs:n.attrs}]}),hard_break:()=>({singleTag:"br"}),heading:n=>({tag:`h${n.attrs.level}`}),image:n=>({singleTag:[{tag:"img",attrs:X(n.attrs,["src","alt","title"])}]}),list_item:()=>({tag:"li"}),ordered_list:()=>({tag:"ol"}),paragraph:()=>({tag:"p"})},marks:{bold:()=>({tag:"b"}),strike:()=>({tag:"strike"}),underline:()=>({tag:"u"}),strong:()=>({tag:"strong"}),code:()=>({tag:"code"}),italic:()=>({tag:"i"}),link(n){const t=g({},n.attrs),{linktype:e="url"}=n.attrs;return e==="email"&&(t.href=`mailto:${t.href}`),t.anchor&&(t.href=`${t.href}#${t.anchor}`,delete t.anchor),{tag:[{tag:"a",attrs:t}]}},styled:n=>({tag:[{tag:"span",attrs:n.attrs}]})}};class K{constructor(t){t||(t=Z),this.marks=t.marks||[],this.nodes=t.nodes||[]}addNode(t,e){this.nodes[t]=e}addMark(t,e){this.marks[t]=e}render(t={}){if(t.content&&Array.isArray(t.content)){let e="";return t.content.forEach(r=>{e+=this.renderNode(r)}),e}return console.warn("The render method must receive an object with a content field, which is an array"),""}renderNode(t){let e=[];t.marks&&t.marks.forEach(s=>{const o=this.getMatchingMark(s);o&&e.push(this.renderOpeningTag(o.tag))});const r=this.getMatchingNode(t);return r&&r.tag&&e.push(this.renderOpeningTag(r.tag)),t.content?t.content.forEach(s=>{e.push(this.renderNode(s))}):t.text?e.push(function(s){const o={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},i=/[&<>"']/g,a=RegExp(i.source);return s&&a.test(s)?s.replace(i,u=>o[u]):s}(t.text)):r&&r.singleTag?e.push(this.renderTag(r.singleTag," /")):r&&r.html&&e.push(r.html),r&&r.tag&&e.push(this.renderClosingTag(r.tag)),t.marks&&t.marks.slice(0).reverse().forEach(s=>{const o=this.getMatchingMark(s);o&&e.push(this.renderClosingTag(o.tag))}),e.join("")}renderTag(t,e){return t.constructor===String?`<${t}${e}>`:t.map(r=>{if(r.constructor===String)return`<${r}${e}>`;{let s=`<${r.tag}`;if(r.attrs)for(let o in r.attrs){let i=r.attrs[o];i!==null&&(s+=` ${o}="${i}"`)}return`${s}${e}>`}}).join("")}renderOpeningTag(t){return this.renderTag(t,"")}renderClosingTag(t){return t.constructor===String?`</${t}>`:t.slice(0).reverse().map(e=>e.constructor===String?`</${e}>`:`</${e.tag}>`).join("")}getMatchingNode(t){if(typeof this.nodes[t.type]=="function")return this.nodes[t.type](t)}getMatchingMark(t){if(typeof this.marks[t.type]=="function")return this.marks[t.type](t)}}const tt=(n=0,t=n)=>{const e=Math.abs(t-n)||0,r=n<t?1:-1;return((s=0,o)=>[...Array(s)].map(o))(e,(s,o)=>o*r+n)},w=(n,t,e)=>{const r=[];for(const s in n){if(!Object.prototype.hasOwnProperty.call(n,s))continue;const o=n[s],i=e?"":encodeURIComponent(s);let a;a=typeof o=="object"?w(o,t?t+encodeURIComponent("["+i+"]"):i,Array.isArray(o)):(t?t+encodeURIComponent("["+i+"]"):i)+"="+encodeURIComponent(o),r.push(a)}return r.join("&")};let b={},y={};class et{constructor(t,e){if(!e){let o=t.region?`-${t.region}`:"",i=t.https===!1?"http":"https";e=t.oauthToken===void 0?`${i}://api${o}.storyblok.com/v2`:`${i}://api${o}.storyblok.com/v1`}let r=Object.assign({},t.headers),s=5;t.oauthToken!==void 0&&(r.Authorization=t.oauthToken,s=3),t.rateLimit!==void 0&&(s=t.rateLimit),this.richTextResolver=new K(t.richTextSchema),typeof t.componentResolver=="function"&&this.setComponentResolver(t.componentResolver),this.maxRetries=t.maxRetries||5,this.throttle=A(this.throttledRequest,s,1e3),this.accessToken=t.accessToken,this.relations={},this.links={},this.cache=t.cache||{clear:"manual"},this.client=B.default.create({baseURL:e,timeout:t.timeout||0,headers:r,proxy:t.proxy||!1}),t.responseInterceptor&&this.client.interceptors.response.use(o=>t.responseInterceptor(o)),this.resolveNestedRelations=t.resolveNestedRelations||!0}setComponentResolver(t){this.richTextResolver.addNode("blok",e=>{let r="";return e.attrs.body.forEach(s=>{r+=t(s.component,s)}),{html:r}})}parseParams(t={}){return t.version||(t.version="published"),t.token||(t.token=this.getToken()),t.cv||(t.cv=y[t.token]),Array.isArray(t.resolve_relations)&&(t.resolve_relations=t.resolve_relations.join(",")),t}factoryParamOptions(t,e={}){return((r="")=>r.indexOf("/cdn/")>-1)(t)?this.parseParams(e):e}makeRequest(t,e,r,s){const o=this.factoryParamOptions(t,((i={},a=25,u=1)=>T(g({},i),{per_page:a,page:u}))(e,r,s));return this.cacheResponse(t,o)}get(t,e){let r=`/${t}`;const s=this.factoryParamOptions(r,e);return this.cacheResponse(r,s)}async getAll(t,e={},r){const s=e.per_page||25,o=`/${t}`,i=o.split("/");r=r||i[i.length-1];const a=await this.makeRequest(o,e,s,1),u=Math.ceil(a.total/s);return((c=[],d)=>c.map(d).reduce((k,ut)=>[...k,...ut],[]))([a,...await(async(c=[],d)=>Promise.all(c.map(d)))(tt(1,u),async c=>this.makeRequest(o,e,s,c+1))],c=>Object.values(c.data[r]))}post(t,e){let r=`/${t}`;return this.throttle("post",r,e)}put(t,e){let r=`/${t}`;return this.throttle("put",r,e)}delete(t,e){let r=`/${t}`;return this.throttle("delete",r,e)}getStories(t){return this.get("cdn/stories",t)}getStory(t,e){return this.get(`cdn/stories/${t}`,e)}setToken(t){this.accessToken=t}getToken(){return this.accessToken}_cleanCopy(t){return JSON.parse(JSON.stringify(t))}_insertLinks(t,e){const r=t[e];r&&r.fieldtype=="multilink"&&r.linktype=="story"&&typeof r.id=="string"&&this.links[r.id]?r.story=this._cleanCopy(this.links[r.id]):r&&r.linktype==="story"&&typeof r.uuid=="string"&&this.links[r.uuid]&&(r.story=this._cleanCopy(this.links[r.uuid]))}_insertRelations(t,e,r){if(r.indexOf(t.component+"."+e)>-1){if(typeof t[e]=="string")this.relations[t[e]]&&(t[e]=this._cleanCopy(this.relations[t[e]]));else if(t[e].constructor===Array){let s=[];t[e].forEach(o=>{this.relations[o]&&s.push(this._cleanCopy(this.relations[o]))}),t[e]=s}}}_insertAssetsRelations(t,e){e.forEach(r=>{t.id===r.id&&(t.original=r,t.original.filename=t.filename,t.original.filename=t.original.filename.includes("https://s3.amazonaws.com/")?t.original.filename:t.original.filename.replace("https://","https://s3.amazonaws.com/"),delete t.original.s3_filename)})}iterateTree(t,e){let r=s=>{if(s!=null){if(s.constructor===Array)for(let o=0;o<s.length;o++)r(s[o]);else if(s.constructor===Object){if(s._stopResolving)return;for(let o in s)s.component&&s._uid||s.type==="link"?(this._insertRelations(s,o,e),this._insertLinks(s,o)):"id"in s&&s.fieldtype==="asset"&&this._insertAssetsRelations(s,e),r(s[o])}}};r(t.content)}async resolveLinks(t,e){let r=[];if(t.link_uuids){const s=t.link_uuids.length;let o=[];const i=50;for(let a=0;a<s;a+=i){const u=Math.min(s,a+i);o.push(t.link_uuids.slice(a,u))}for(let a=0;a<o.length;a++)(await this.getStories({per_page:i,language:e.language,version:e.version,by_uuids:o[a].join(",")})).data.stories.forEach(u=>{r.push(u)})}else r=t.links;r.forEach(s=>{this.links[s.uuid]=T(g({},s),{_stopResolving:!0})})}async resolveRelations(t,e){let r=[];if(t.rel_uuids){const s=t.rel_uuids.length;let o=[];const i=50;for(let a=0;a<s;a+=i){const u=Math.min(s,a+i);o.push(t.rel_uuids.slice(a,u))}for(let a=0;a<o.length;a++)(await this.getStories({per_page:i,language:e.language,version:e.version,by_uuids:o[a].join(",")})).data.stories.forEach(u=>{r.push(u)})}else r=t.rels;r.forEach(s=>{this.relations[s.uuid]=T(g({},s),{_stopResolving:!0})})}async resolveStories(t,e){let r=[];if(e.resolve_relations!==void 0&&e.resolve_relations.length>0&&(t.rels||t.rel_uuids)&&(r=e.resolve_relations.split(","),await this.resolveRelations(t,e)),["1","story","url"].indexOf(e.resolve_links)>-1&&(t.links||t.link_uuids)&&await this.resolveLinks(t,e),this.resolveNestedRelations)for(const s in this.relations)this.iterateTree(this.relations[s],r);t.story?this.iterateTree(t.story,r):t.stories.forEach(s=>{this.iterateTree(s,r)})}resolveAssetsRelations(t){const{assets:e,stories:r,story:s}=t;if(r)for(const o of r)this.iterateTree(o,e);else{if(!s)return t;this.iterateTree(s,e)}}cacheResponse(t,e,r){return r===void 0&&(r=0),new Promise(async(s,o)=>{let i=w({url:t,params:e}),a=this.cacheProvider();if(this.cache.clear==="auto"&&e.version==="draft"&&await this.flushCache(),e.version==="published"&&t!="/cdn/spaces/me"){const c=await a.get(i);if(c)return s(c)}try{let c=await this.throttle("get",t,{params:e,paramsSerializer:k=>w(k)}),d={data:c.data,headers:c.headers};if(d.data.assets&&d.data.assets.length&&this.resolveAssetsRelations(d.data),c.headers["per-page"]&&(d=Object.assign({},d,{perPage:parseInt(c.headers["per-page"]),total:parseInt(c.headers.total)})),c.status!=200)return o(c);(d.data.story||d.data.stories)&&await this.resolveStories(d.data,e),e.version==="published"&&t!="/cdn/spaces/me"&&a.set(i,d),d.data.cv&&(e.version=="draft"&&y[e.token]!=d.data.cv&&this.flushCache(),y[e.token]=d.data.cv),s(d)}catch(c){if(c.response&&c.response.status===429&&(r+=1)<this.maxRetries)return console.log(`Hit rate limit. Retrying in ${r} seconds.`),await(u=1e3*r,new Promise(d=>setTimeout(d,u))),this.cacheResponse(t,e,r).then(s).catch(o);o(c)}var u})}throttledRequest(t,e,r){return this.client[t](e,r)}cacheVersions(){return y}cacheVersion(){return y[this.accessToken]}setCacheVersion(t){this.accessToken&&(y[this.accessToken]=t)}cacheProvider(){return this.cache.type==="memory"?{get:t=>b[t],getAll:()=>b,set(t,e){b[t]=e},flush(){b={}}}:{get(){},getAll(){},set(){},flush(){}}}async flushCache(){return await this.cacheProvider().flush(),this}}const rt=(n={})=>{const{apiOptions:t}=n;if(!t.accessToken){console.error("You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication");return}return{storyblokApi:new et(t)}};var st=n=>{if(typeof n!="object"||typeof n._editable=="undefined")return{};const t=JSON.parse(n._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return{"data-blok-c":JSON.stringify(t),"data-blok-uid":t.id+"-"+t.uid}};new W;const nt="https://app.storyblok.com/f/storyblok-v2-latest.js",$=(n,t,e={})=>{if(typeof window!="undefined"){if(typeof window.storyblokRegisterEvent=="undefined"){console.error("Storyblok Bridge is disabled. Please enable it to use it. Read https://github.com/storyblok/storyblok-js");return}if(!n){console.warn("Story ID is not defined. Please provide a valid ID.");return}window.storyblokRegisterEvent(()=>{new window.StoryblokBridge(e).on(["input","published","change"],s=>{s.story.id===n&&(s.action==="input"?t(s.story):window.location.reload())})})}},ot=(n={})=>{const{bridge:t,accessToken:e,use:r=[],apiOptions:s={}}=n;s.accessToken=s.accessToken||e;const o={bridge:t,apiOptions:s};let i={};return r.forEach(a=>{i=g(g({},i),a(o))}),t!==!1&&J(nt),i},it=e=>{var r=e,{blok:n}=r,t=L(r,["blok"]);if(!n)return console.error("Please provide a 'blok' property to the StoryblokComponent"),_.default.createElement("div",null,"Please provide a blok property to the StoryblokComponent");const s=M(n.component);return s?_.default.createElement(s,q({blok:n},t)):_.default.createElement("div",null)},at=(n,t={},e={})=>{let[r,s]=h.useState({});return m?(h.useEffect(()=>{$(r.id,i=>s(i),e);async function o(){const{data:i}=await m.get(`cdn/stories/${n}`,t);s(i.story)}o()},[n]),r):(console.error("You can't use useStoryblok if you're not loading apiPlugin."),null)},lt=(n={},t={},e=!0)=>{let[r,s]=h.useState(n);return e?(h.useEffect(()=>{$(r.id,o=>s(o),t),s(n)},[n]),r):n};let m=null;const C=()=>(m||console.error("You can't use getStoryblokApi if you're not loading apiPlugin."),m);let E={};const M=n=>E[n]?E[n]:(console.error(`Component ${n} doesn't exist.`),!1),ct=(n={})=>{const{storyblokApi:t}=ot(n);m=t,E=n.components};l.StoryblokComponent=it,l.apiPlugin=rt,l.getComponent=M,l.getStoryblokApi=C,l.storyblokEditable=st,l.storyblokInit=ct,l.useStoryblok=at,l.useStoryblokApi=C,l.useStoryblokBridge=$,l.useStoryblokState=lt,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
5
+ */function x(n){return typeof n=="number"&&n==n&&n!==1/0&&n!==-1/0}function M(n,e,t){if(!x(e))throw new TypeError("Expected `limit` to be a finite number");if(!x(t))throw new TypeError("Expected `interval` to be a finite number");var r=[],s=[],o=0,a=function(){o++;var u=setTimeout(function(){o--,r.length>0&&a(),s=s.filter(function(d){return d!==u})},t);s.indexOf(u)<0&&s.push(u);var c=r.shift();c.resolve(n.apply(c.self,c.args))},i=function(){var u=arguments,c=this;return new Promise(function(d,k){r.push({resolve:d,reject:k,args:u,self:c}),o<e&&a()})};return i.abort=function(){s.forEach(clearTimeout),s=[],r.forEach(function(u){u.reject(new throttle.AbortError)}),r.length=0},i}M.AbortError=function(){Error.call(this,"Throttled function aborted"),this.name="AbortError"};const K=function(n,e){if(!n)return null;let t={};for(let r in n){let s=n[r];e.indexOf(r)>-1&&s!==null&&(t[r]=s)}return t};var ee={nodes:{horizontal_rule:()=>({singleTag:"hr"}),blockquote:()=>({tag:"blockquote"}),bullet_list:()=>({tag:"ul"}),code_block:n=>({tag:["pre",{tag:"code",attrs:n.attrs}]}),hard_break:()=>({singleTag:"br"}),heading:n=>({tag:`h${n.attrs.level}`}),image:n=>({singleTag:[{tag:"img",attrs:K(n.attrs,["src","alt","title"])}]}),list_item:()=>({tag:"li"}),ordered_list:()=>({tag:"ol"}),paragraph:()=>({tag:"p"})},marks:{bold:()=>({tag:"b"}),strike:()=>({tag:"strike"}),underline:()=>({tag:"u"}),strong:()=>({tag:"strong"}),code:()=>({tag:"code"}),italic:()=>({tag:"i"}),link(n){const e=g({},n.attrs),{linktype:t="url"}=n.attrs;return t==="email"&&(e.href=`mailto:${e.href}`),e.anchor&&(e.href=`${e.href}#${e.anchor}`,delete e.anchor),{tag:[{tag:"a",attrs:e}]}},styled:n=>({tag:[{tag:"span",attrs:n.attrs}]})}};class te{constructor(e){e||(e=ee),this.marks=e.marks||[],this.nodes=e.nodes||[]}addNode(e,t){this.nodes[e]=t}addMark(e,t){this.marks[e]=t}render(e={}){if(e.content&&Array.isArray(e.content)){let t="";return e.content.forEach(r=>{t+=this.renderNode(r)}),t}return console.warn("The render method must receive an object with a content field, which is an array"),""}renderNode(e){let t=[];e.marks&&e.marks.forEach(s=>{const o=this.getMatchingMark(s);o&&t.push(this.renderOpeningTag(o.tag))});const r=this.getMatchingNode(e);return r&&r.tag&&t.push(this.renderOpeningTag(r.tag)),e.content?e.content.forEach(s=>{t.push(this.renderNode(s))}):e.text?t.push(function(s){const o={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},a=/[&<>"']/g,i=RegExp(a.source);return s&&i.test(s)?s.replace(a,u=>o[u]):s}(e.text)):r&&r.singleTag?t.push(this.renderTag(r.singleTag," /")):r&&r.html&&t.push(r.html),r&&r.tag&&t.push(this.renderClosingTag(r.tag)),e.marks&&e.marks.slice(0).reverse().forEach(s=>{const o=this.getMatchingMark(s);o&&t.push(this.renderClosingTag(o.tag))}),t.join("")}renderTag(e,t){return e.constructor===String?`<${e}${t}>`:e.map(r=>{if(r.constructor===String)return`<${r}${t}>`;{let s=`<${r.tag}`;if(r.attrs)for(let o in r.attrs){let a=r.attrs[o];a!==null&&(s+=` ${o}="${a}"`)}return`${s}${t}>`}}).join("")}renderOpeningTag(e){return this.renderTag(e,"")}renderClosingTag(e){return e.constructor===String?`</${e}>`:e.slice(0).reverse().map(t=>t.constructor===String?`</${t}>`:`</${t.tag}>`).join("")}getMatchingNode(e){if(typeof this.nodes[e.type]=="function")return this.nodes[e.type](e)}getMatchingMark(e){if(typeof this.marks[e.type]=="function")return this.marks[e.type](e)}}const re=(n=0,e=n)=>{const t=Math.abs(e-n)||0,r=n<e?1:-1;return((s=0,o)=>[...Array(s)].map(o))(t,(s,o)=>o*r+n)},R=(n,e,t)=>{const r=[];for(const s in n){if(!Object.prototype.hasOwnProperty.call(n,s))continue;const o=n[s],a=t?"":encodeURIComponent(s);let i;i=typeof o=="object"?R(o,e?e+encodeURIComponent("["+a+"]"):a,Array.isArray(o)):(e?e+encodeURIComponent("["+a+"]"):a)+"="+encodeURIComponent(o),r.push(i)}return r.join("&")};let b={},y={};class se{constructor(e,t){if(!t){let o=e.region?`-${e.region}`:"",a=e.https===!1?"http":"https";t=e.oauthToken===void 0?`${a}://api${o}.storyblok.com/v2`:`${a}://api${o}.storyblok.com/v1`}let r=Object.assign({},e.headers),s=5;e.oauthToken!==void 0&&(r.Authorization=e.oauthToken,s=3),e.rateLimit!==void 0&&(s=e.rateLimit),this.richTextResolver=new te(e.richTextSchema),typeof e.componentResolver=="function"&&this.setComponentResolver(e.componentResolver),this.maxRetries=e.maxRetries||5,this.throttle=M(this.throttledRequest,s,1e3),this.accessToken=e.accessToken,this.relations={},this.links={},this.cache=e.cache||{clear:"manual"},this.client=H.default.create({baseURL:t,timeout:e.timeout||0,headers:r,proxy:e.proxy||!1}),e.responseInterceptor&&this.client.interceptors.response.use(o=>e.responseInterceptor(o)),this.resolveNestedRelations=e.resolveNestedRelations||!0}setComponentResolver(e){this.richTextResolver.addNode("blok",t=>{let r="";return t.attrs.body.forEach(s=>{r+=e(s.component,s)}),{html:r}})}parseParams(e={}){return e.version||(e.version="published"),e.token||(e.token=this.getToken()),e.cv||(e.cv=y[e.token]),Array.isArray(e.resolve_relations)&&(e.resolve_relations=e.resolve_relations.join(",")),e}factoryParamOptions(e,t={}){return((r="")=>r.indexOf("/cdn/")>-1)(e)?this.parseParams(t):t}makeRequest(e,t,r,s){const o=this.factoryParamOptions(e,((a={},i=25,u=1)=>w(g({},a),{per_page:i,page:u}))(t,r,s));return this.cacheResponse(e,o)}get(e,t){let r=`/${e}`;const s=this.factoryParamOptions(r,t);return this.cacheResponse(r,s)}async getAll(e,t={},r){const s=t.per_page||25,o=`/${e}`,a=o.split("/");r=r||a[a.length-1];const i=await this.makeRequest(o,t,s,1),u=Math.ceil(i.total/s);return((c=[],d)=>c.map(d).reduce((k,pe)=>[...k,...pe],[]))([i,...await(async(c=[],d)=>Promise.all(c.map(d)))(re(1,u),async c=>this.makeRequest(o,t,s,c+1))],c=>Object.values(c.data[r]))}post(e,t){let r=`/${e}`;return this.throttle("post",r,t)}put(e,t){let r=`/${e}`;return this.throttle("put",r,t)}delete(e,t){let r=`/${e}`;return this.throttle("delete",r,t)}getStories(e){return this.get("cdn/stories",e)}getStory(e,t){return this.get(`cdn/stories/${e}`,t)}setToken(e){this.accessToken=e}getToken(){return this.accessToken}_cleanCopy(e){return JSON.parse(JSON.stringify(e))}_insertLinks(e,t){const r=e[t];r&&r.fieldtype=="multilink"&&r.linktype=="story"&&typeof r.id=="string"&&this.links[r.id]?r.story=this._cleanCopy(this.links[r.id]):r&&r.linktype==="story"&&typeof r.uuid=="string"&&this.links[r.uuid]&&(r.story=this._cleanCopy(this.links[r.uuid]))}_insertRelations(e,t,r){if(r.indexOf(e.component+"."+t)>-1){if(typeof e[t]=="string")this.relations[e[t]]&&(e[t]=this._cleanCopy(this.relations[e[t]]));else if(e[t].constructor===Array){let s=[];e[t].forEach(o=>{this.relations[o]&&s.push(this._cleanCopy(this.relations[o]))}),e[t]=s}}}_insertAssetsRelations(e,t){t.forEach(r=>{e.id===r.id&&(e.original=r,e.original.filename=e.filename,e.original.filename=e.original.filename.includes("https://s3.amazonaws.com/")?e.original.filename:e.original.filename.replace("https://","https://s3.amazonaws.com/"),delete e.original.s3_filename)})}iterateTree(e,t){let r=s=>{if(s!=null){if(s.constructor===Array)for(let o=0;o<s.length;o++)r(s[o]);else if(s.constructor===Object){if(s._stopResolving)return;for(let o in s)s.component&&s._uid||s.type==="link"?(this._insertRelations(s,o,t),this._insertLinks(s,o)):"id"in s&&s.fieldtype==="asset"&&this._insertAssetsRelations(s,t),r(s[o])}}};r(e.content)}async resolveLinks(e,t){let r=[];if(e.link_uuids){const s=e.link_uuids.length;let o=[];const a=50;for(let i=0;i<s;i+=a){const u=Math.min(s,i+a);o.push(e.link_uuids.slice(i,u))}for(let i=0;i<o.length;i++)(await this.getStories({per_page:a,language:t.language,version:t.version,by_uuids:o[i].join(",")})).data.stories.forEach(u=>{r.push(u)})}else r=e.links;r.forEach(s=>{this.links[s.uuid]=w(g({},s),{_stopResolving:!0})})}async resolveRelations(e,t){let r=[];if(e.rel_uuids){const s=e.rel_uuids.length;let o=[];const a=50;for(let i=0;i<s;i+=a){const u=Math.min(s,i+a);o.push(e.rel_uuids.slice(i,u))}for(let i=0;i<o.length;i++)(await this.getStories({per_page:a,language:t.language,version:t.version,by_uuids:o[i].join(",")})).data.stories.forEach(u=>{r.push(u)})}else r=e.rels;r.forEach(s=>{this.relations[s.uuid]=w(g({},s),{_stopResolving:!0})})}async resolveStories(e,t){let r=[];if(t.resolve_relations!==void 0&&t.resolve_relations.length>0&&(e.rels||e.rel_uuids)&&(r=t.resolve_relations.split(","),await this.resolveRelations(e,t)),["1","story","url"].indexOf(t.resolve_links)>-1&&(e.links||e.link_uuids)&&await this.resolveLinks(e,t),this.resolveNestedRelations)for(const s in this.relations)this.iterateTree(this.relations[s],r);e.story?this.iterateTree(e.story,r):e.stories.forEach(s=>{this.iterateTree(s,r)})}resolveAssetsRelations(e){const{assets:t,stories:r,story:s}=e;if(r)for(const o of r)this.iterateTree(o,t);else{if(!s)return e;this.iterateTree(s,t)}}cacheResponse(e,t,r){return r===void 0&&(r=0),new Promise(async(s,o)=>{let a=R({url:e,params:t}),i=this.cacheProvider();if(this.cache.clear==="auto"&&t.version==="draft"&&await this.flushCache(),t.version==="published"&&e!="/cdn/spaces/me"){const c=await i.get(a);if(c)return s(c)}try{let c=await this.throttle("get",e,{params:t,paramsSerializer:k=>R(k)}),d={data:c.data,headers:c.headers};if(d.data.assets&&d.data.assets.length&&this.resolveAssetsRelations(d.data),c.headers["per-page"]&&(d=Object.assign({},d,{perPage:parseInt(c.headers["per-page"]),total:parseInt(c.headers.total)})),c.status!=200)return o(c);(d.data.story||d.data.stories)&&await this.resolveStories(d.data,t),t.version==="published"&&e!="/cdn/spaces/me"&&i.set(a,d),d.data.cv&&(t.version=="draft"&&y[t.token]!=d.data.cv&&this.flushCache(),y[t.token]=d.data.cv),s(d)}catch(c){if(c.response&&c.response.status===429&&(r+=1)<this.maxRetries)return console.log(`Hit rate limit. Retrying in ${r} seconds.`),await(u=1e3*r,new Promise(d=>setTimeout(d,u))),this.cacheResponse(e,t,r).then(s).catch(o);o(c)}var u})}throttledRequest(e,t,r){return this.client[e](t,r)}cacheVersions(){return y}cacheVersion(){return y[this.accessToken]}setCacheVersion(e){this.accessToken&&(y[this.accessToken]=e)}cacheProvider(){return this.cache.type==="memory"?{get:e=>b[e],getAll:()=>b,set(e,t){b[e]=t},flush(){b={}}}:{get(){},getAll(){},set(){},flush(){}}}async flushCache(){return await this.cacheProvider().flush(),this}}const ne=(n={})=>{const{apiOptions:e}=n;if(!e.accessToken){console.error("You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication");return}return{storyblokApi:new se(e)}};var oe=n=>{if(typeof n!="object"||typeof n._editable=="undefined")return{};const e=JSON.parse(n._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return{"data-blok-c":JSON.stringify(e),"data-blok-uid":e.id+"-"+e.uid}};let v;const ie="https://app.storyblok.com/f/storyblok-v2-latest.js",S=(n,e,t={})=>{if(typeof window!="undefined"){if(typeof window.storyblokRegisterEvent=="undefined"){console.error("Storyblok Bridge is disabled. Please enable it to use it. Read https://github.com/storyblok/storyblok-js");return}if(!n){console.warn("Story ID is not defined. Please provide a valid ID.");return}window.storyblokRegisterEvent(()=>{new window.StoryblokBridge(t).on(["input","published","change"],s=>{s.story.id===n&&(s.action==="input"?e(s.story):window.location.reload())})})}},ae=(n={})=>{const{bridge:e,accessToken:t,use:r=[],apiOptions:s={},richText:o={}}=n;s.accessToken=s.accessToken||t;const a={bridge:e,apiOptions:s};let i={};return r.forEach(u=>{i=g(g({},i),u(a))}),e!==!1&&Q(ie),v=new C(o.schema),o.resolver&&N(v,o.resolver),i},N=(n,e)=>{n.addNode("blok",t=>{let r="";return t.attrs.body.forEach(s=>{r+=e(s.component,s)}),{html:r}})},le=(n,e)=>{if(!v){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}if(n==="")return"";if(!n)return console.warn(`${n} is not a valid Richtext object. This might be because the value of the richtext field is empty.
6
+
7
+ For more info about the richtext object check https://github.com/storyblok/storyblok-js#rendering-rich-text`),"";let t=v;return e&&(t=new C(e.schema),e.resolver&&N(t,e.resolver)),t.render(n)},ce=t=>{var r=t,{blok:n}=r,e=U(r,["blok"]);if(!n)return console.error("Please provide a 'blok' property to the StoryblokComponent"),_.default.createElement("div",null,"Please provide a blok property to the StoryblokComponent");const s=q(n.component);return s?_.default.createElement(s,D({blok:n},e)):_.default.createElement("div",null)},ue=(n,e={},t={})=>{let[r,s]=h.useState({});return m?(S(r.id,o=>s(o),t),h.useEffect(()=>{async function o(){const{data:a}=await m.get(`cdn/stories/${n}`,e);s(a.story)}o()},[n]),r):(console.error("You can't use useStoryblok if you're not loading apiPlugin."),null)},he=(n={},e={},t=!0)=>{let[r,s]=h.useState(n);return t?(h.useEffect(()=>{S(r.id,o=>s(o),e),s(n)},[n]),r):n};let m=null;const I=()=>(m||console.error("You can't use getStoryblokApi if you're not loading apiPlugin."),m);let $={};const q=n=>$[n]?$[n]:(console.error(`Component ${n} doesn't exist.`),!1),de=(n={})=>{const{storyblokApi:e}=ae(n);m=e,$=n.components};l.RichTextSchema=A,l.StoryblokComponent=ce,l.apiPlugin=ne,l.getComponent=q,l.getStoryblokApi=I,l.renderRichText=le,l.storyblokEditable=oe,l.storyblokInit=de,l.useStoryblok=ue,l.useStoryblokApi=I,l.useStoryblokBridge=S,l.useStoryblokState=he,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
@@ -712,7 +712,7 @@ var editable = (blok) => {
712
712
  "data-blok-uid": options.id + "-" + options.uid
713
713
  };
714
714
  };
715
- new RichTextResolver();
715
+ let richTextResolver;
716
716
  const bridgeLatest = "https://app.storyblok.com/f/storyblok-v2-latest.js";
717
717
  const useStoryblokBridge = (id, cb, options = {}) => {
718
718
  if (typeof window === "undefined") {
@@ -739,7 +739,13 @@ const useStoryblokBridge = (id, cb, options = {}) => {
739
739
  });
740
740
  };
741
741
  const storyblokInit$1 = (pluginOptions = {}) => {
742
- const { bridge, accessToken, use = [], apiOptions = {} } = pluginOptions;
742
+ const {
743
+ bridge,
744
+ accessToken,
745
+ use = [],
746
+ apiOptions = {},
747
+ richText = {}
748
+ } = pluginOptions;
743
749
  apiOptions.accessToken = apiOptions.accessToken || accessToken;
744
750
  const options = { bridge, apiOptions };
745
751
  let result = {};
@@ -749,8 +755,45 @@ const storyblokInit$1 = (pluginOptions = {}) => {
749
755
  if (bridge !== false) {
750
756
  loadBridge(bridgeLatest);
751
757
  }
758
+ richTextResolver = new RichTextResolver(richText.schema);
759
+ if (richText.resolver) {
760
+ setComponentResolver(richTextResolver, richText.resolver);
761
+ }
752
762
  return result;
753
763
  };
764
+ const setComponentResolver = (resolver, resolveFn) => {
765
+ resolver.addNode("blok", (node) => {
766
+ let html = "";
767
+ node.attrs.body.forEach((blok) => {
768
+ html += resolveFn(blok.component, blok);
769
+ });
770
+ return {
771
+ html
772
+ };
773
+ });
774
+ };
775
+ const renderRichText = (data, options) => {
776
+ if (!richTextResolver) {
777
+ console.error("Please initialize the Storyblok SDK before calling the renderRichText function");
778
+ return;
779
+ }
780
+ if (data === "") {
781
+ return "";
782
+ } else if (!data) {
783
+ console.warn(`${data} is not a valid Richtext object. This might be because the value of the richtext field is empty.
784
+
785
+ For more info about the richtext object check https://github.com/storyblok/storyblok-js#rendering-rich-text`);
786
+ return "";
787
+ }
788
+ let localResolver = richTextResolver;
789
+ if (options) {
790
+ localResolver = new RichTextResolver(options.schema);
791
+ if (options.resolver) {
792
+ setComponentResolver(localResolver, options.resolver);
793
+ }
794
+ }
795
+ return localResolver.render(data);
796
+ };
754
797
  const StoryblokComponent = (_a) => {
755
798
  var _b = _a, {
756
799
  blok
@@ -775,8 +818,8 @@ const useStoryblok = (slug, apiOptions = {}, bridgeOptions = {}) => {
775
818
  console.error("You can't use useStoryblok if you're not loading apiPlugin.");
776
819
  return null;
777
820
  }
821
+ useStoryblokBridge(story.id, (story2) => setStory(story2), bridgeOptions);
778
822
  useEffect(() => {
779
- useStoryblokBridge(story.id, (story2) => setStory(story2), bridgeOptions);
780
823
  async function fetchData() {
781
824
  const { data } = await storyblokApiInstance.get(`cdn/stories/${slug}`, apiOptions);
782
825
  setStory(data.story);
@@ -816,4 +859,4 @@ const storyblokInit = (pluginOptions = {}) => {
816
859
  storyblokApiInstance = storyblokApi;
817
860
  componentsMap = pluginOptions.components;
818
861
  };
819
- export { StoryblokComponent, apiFactory as apiPlugin, getComponent, useStoryblokApi as getStoryblokApi, editable as storyblokEditable, storyblokInit, useStoryblok, useStoryblokApi, useStoryblokBridge, useStoryblokState };
862
+ export { defaultHtmlSerializer as RichTextSchema, StoryblokComponent, apiFactory as apiPlugin, getComponent, useStoryblokApi as getStoryblokApi, renderRichText, editable as storyblokEditable, storyblokInit, useStoryblok, useStoryblokApi, useStoryblokBridge, useStoryblokState };
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { SbReactSDKOptions, StoriesParams, StoryblokBridgeConfigV2, StoryblokClient, StoryData } from "./types";
3
3
  export { default as StoryblokComponent } from "./components/storyblok-component";
4
- export { storyblokEditable, apiPlugin, useStoryblokBridge, } from "@storyblok/js";
4
+ export { storyblokEditable, apiPlugin, useStoryblokBridge, renderRichText, RichTextSchema, } from "@storyblok/js";
5
5
  export declare const useStoryblok: (slug: string, apiOptions?: StoriesParams, bridgeOptions?: StoryblokBridgeConfigV2) => StoryData<import("storyblok-js-client").StoryblokComponent<string> & {
6
6
  [index: string]: any;
7
7
  }>;
@@ -6,4 +6,4 @@ export interface SbReactComponentsMap {
6
6
  export interface SbReactSDKOptions extends SbSDKOptions {
7
7
  components?: SbReactComponentsMap;
8
8
  }
9
- export type { AlternateObject, Richtext, RichtextInstance, SbBlokData, SbBlokKeyDataTypes, SbSDKOptions, Stories, StoriesParams, Story, StoryData, StoryParams, StoryblokBridgeConfigV2, StoryblokBridgeV2, StoryblokCache, StoryblokCacheProvider, StoryblokClient, StoryblokComponentType, StoryblokConfig, StoryblokManagmentApiResult, StoryblokResult, apiPlugin, useStoryblokBridge, } from "@storyblok/js";
9
+ export type { AlternateObject, Richtext, RichtextInstance, SbBlokData, SbBlokKeyDataTypes, SbRichTextOptions, SbSDKOptions, Stories, StoriesParams, Story, StoryData, StoryParams, StoryblokBridgeConfigV2, StoryblokBridgeV2, StoryblokCache, StoryblokCacheProvider, StoryblokClient, StoryblokComponentType, StoryblokConfig, StoryblokManagmentApiResult, StoryblokResult, apiPlugin, useStoryblokBridge, } from "@storyblok/js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storyblok/react",
3
- "version": "1.1.5",
3
+ "version": "1.2.1",
4
4
  "description": "SDK to integrate Storyblok into your project using React.",
5
5
  "main": "./dist/storyblok-react.js",
6
6
  "module": "./dist/storyblok-react.mjs",
@@ -24,24 +24,24 @@
24
24
  "prepublishOnly": "npm run build && cp ../README.md ./"
25
25
  },
26
26
  "dependencies": {
27
- "@storyblok/js": "^1.7.2"
27
+ "@storyblok/js": "^1.8.0"
28
28
  },
29
29
  "devDependencies": {
30
- "@babel/core": "^7.18.10",
31
- "@babel/preset-env": "^7.18.10",
30
+ "@babel/core": "^7.19.0",
31
+ "@babel/preset-env": "^7.19.0",
32
32
  "@cypress/react": "^5.12.5",
33
33
  "@cypress/vite-dev-server": "^2.2.3",
34
34
  "@tsconfig/recommended": "^1.0.1",
35
- "@types/react": "18.0.17",
35
+ "@types/react": "18.0.18",
36
36
  "@vitejs/plugin-react": "^1.3.2",
37
- "babel-jest": "^28.1.3",
37
+ "babel-jest": "^29.0.2",
38
38
  "cypress": "^9.7.0",
39
39
  "eslint-plugin-cypress": "^2.12.1",
40
- "eslint-plugin-jest": "^26.8.2",
41
- "jest": "^28.1.3",
40
+ "eslint-plugin-jest": "^27.0.1",
41
+ "jest": "^29.0.2",
42
42
  "react": "^18.2.0",
43
43
  "react-dom": "^18.2.0",
44
- "vite": "^2.9.14"
44
+ "vite": "^2.9.15"
45
45
  },
46
46
  "peerDependencies": {
47
47
  "react": "^17.0.0 || ^18.0.0",