@storyblok/react 1.1.4 → 1.2.0
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 +67 -6
- package/dist/storyblok-react.js +4 -2
- package/dist/storyblok-react.mjs +51 -7
- package/dist/types/index.d.ts +1 -1
- package/dist/types/types.d.ts +1 -1
- package/package.json +9 -9
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
|
-
|
|
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 {
|
|
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.
|
package/dist/storyblok-react.js
CHANGED
|
@@ -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
|
|
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={"&":"&","<":"<",">":">",'"':""","'":"'"},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 i in s.attrs){let a=s.attrs[i];a!==null&&(o+=` ${i}="${a}"`)}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={"&":"&","<":"<",">":">",'"':""","'":"'"},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.action=="input"&&s.story.id===n?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,i=function(){o++;var u=setTimeout(function(){o--,r.length>0&&i(),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))},a=function(){var u=arguments,c=this;return new Promise(function(d,k){r.push({resolve:d,reject:k,args:u,self:c}),o<e&&i()})};return a.abort=function(){s.forEach(clearTimeout),s=[],r.forEach(function(u){u.reject(new throttle.AbortError)}),r.length=0},a}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={"&":"&","<":"<",">":">",'"':""","'":"'"},i=/[&<>"']/g,a=RegExp(i.source);return s&&a.test(s)?s.replace(i,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 i=r.attrs[o];i!==null&&(s+=` ${o}="${i}"`)}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],i=t?"":encodeURIComponent(s);let a;a=typeof o=="object"?R(o,e?e+encodeURIComponent("["+i+"]"):i,Array.isArray(o)):(e?e+encodeURIComponent("["+i+"]"):i)+"="+encodeURIComponent(o),r.push(a)}return r.join("&")};let b={},y={};class se{constructor(e,t){if(!t){let o=e.region?`-${e.region}`:"",i=e.https===!1?"http":"https";t=e.oauthToken===void 0?`${i}://api${o}.storyblok.com/v2`:`${i}://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,((i={},a=25,u=1)=>w(g({},i),{per_page:a,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}`,i=o.split("/");r=r||i[i.length-1];const a=await this.makeRequest(o,t,s,1),u=Math.ceil(a.total/s);return((c=[],d)=>c.map(d).reduce((k,pe)=>[...k,...pe],[]))([a,...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 i=50;for(let a=0;a<s;a+=i){const u=Math.min(s,a+i);o.push(e.link_uuids.slice(a,u))}for(let a=0;a<o.length;a++)(await this.getStories({per_page:i,language:t.language,version:t.version,by_uuids:o[a].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 i=50;for(let a=0;a<s;a+=i){const u=Math.min(s,a+i);o.push(e.rel_uuids.slice(a,u))}for(let a=0;a<o.length;a++)(await this.getStories({per_page:i,language:t.language,version:t.version,by_uuids:o[a].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 i=R({url:e,params:t}),a=this.cacheProvider();if(this.cache.clear==="auto"&&t.version==="draft"&&await this.flushCache(),t.version==="published"&&e!="/cdn/spaces/me"){const c=await a.get(i);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"&&a.set(i,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 i={bridge:e,apiOptions:s};let a={};return r.forEach(u=>{a=g(g({},a),u(i))}),e!==!1&&Q(ie),v=new C(o.schema),o.resolver&&N(v,o.resolver),a},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?(h.useEffect(()=>{S(r.id,i=>s(i),t);async function o(){const{data:i}=await m.get(`cdn/stories/${n}`,e);s(i.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"}})});
|
package/dist/storyblok-react.mjs
CHANGED
|
@@ -712,7 +712,7 @@ var editable = (blok) => {
|
|
|
712
712
|
"data-blok-uid": options.id + "-" + options.uid
|
|
713
713
|
};
|
|
714
714
|
};
|
|
715
|
-
|
|
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") {
|
|
@@ -729,16 +729,23 @@ const useStoryblokBridge = (id, cb, options = {}) => {
|
|
|
729
729
|
window.storyblokRegisterEvent(() => {
|
|
730
730
|
const sbBridge = new window.StoryblokBridge(options);
|
|
731
731
|
sbBridge.on(["input", "published", "change"], (event) => {
|
|
732
|
-
if (event.
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
732
|
+
if (event.story.id === id) {
|
|
733
|
+
if (event.action === "input")
|
|
734
|
+
cb(event.story);
|
|
735
|
+
else
|
|
736
|
+
window.location.reload();
|
|
736
737
|
}
|
|
737
738
|
});
|
|
738
739
|
});
|
|
739
740
|
};
|
|
740
741
|
const storyblokInit$1 = (pluginOptions = {}) => {
|
|
741
|
-
const {
|
|
742
|
+
const {
|
|
743
|
+
bridge,
|
|
744
|
+
accessToken,
|
|
745
|
+
use = [],
|
|
746
|
+
apiOptions = {},
|
|
747
|
+
richText = {}
|
|
748
|
+
} = pluginOptions;
|
|
742
749
|
apiOptions.accessToken = apiOptions.accessToken || accessToken;
|
|
743
750
|
const options = { bridge, apiOptions };
|
|
744
751
|
let result = {};
|
|
@@ -748,8 +755,45 @@ const storyblokInit$1 = (pluginOptions = {}) => {
|
|
|
748
755
|
if (bridge !== false) {
|
|
749
756
|
loadBridge(bridgeLatest);
|
|
750
757
|
}
|
|
758
|
+
richTextResolver = new RichTextResolver(richText.schema);
|
|
759
|
+
if (richText.resolver) {
|
|
760
|
+
setComponentResolver(richTextResolver, richText.resolver);
|
|
761
|
+
}
|
|
751
762
|
return result;
|
|
752
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
|
+
};
|
|
753
797
|
const StoryblokComponent = (_a) => {
|
|
754
798
|
var _b = _a, {
|
|
755
799
|
blok
|
|
@@ -815,4 +859,4 @@ const storyblokInit = (pluginOptions = {}) => {
|
|
|
815
859
|
storyblokApiInstance = storyblokApi;
|
|
816
860
|
componentsMap = pluginOptions.components;
|
|
817
861
|
};
|
|
818
|
-
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 };
|
package/dist/types/index.d.ts
CHANGED
|
@@ -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
|
}>;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -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.
|
|
3
|
+
"version": "1.2.0",
|
|
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.
|
|
27
|
+
"@storyblok/js": "^1.8.0"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@babel/core": "^7.
|
|
31
|
-
"@babel/preset-env": "^7.
|
|
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.
|
|
35
|
+
"@types/react": "18.0.18",
|
|
36
36
|
"@vitejs/plugin-react": "^1.3.2",
|
|
37
|
-
"babel-jest": "^
|
|
37
|
+
"babel-jest": "^29.0.2",
|
|
38
38
|
"cypress": "^9.7.0",
|
|
39
39
|
"eslint-plugin-cypress": "^2.12.1",
|
|
40
|
-
"eslint-plugin-jest": "^
|
|
41
|
-
"jest": "^
|
|
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.
|
|
44
|
+
"vite": "^2.9.15"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"react": "^17.0.0 || ^18.0.0",
|