@storyblok/react 2.2.1 → 2.3.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 +6 -7
- package/dist/bridge-loader.js +2 -0
- package/dist/bridge-loader.mjs +11 -0
- package/dist/client.js +1 -0
- package/dist/client.mjs +18 -0
- package/dist/index.js +1 -0
- package/dist/index.mjs +48 -0
- package/dist/index2.js +1 -0
- package/dist/index2.mjs +26 -0
- package/dist/rsc.js +1 -0
- package/dist/rsc.mjs +23 -0
- package/dist/story.js +2 -0
- package/dist/story.mjs +10 -0
- package/dist/storyblok-component.js +1 -0
- package/dist/storyblok-component.mjs +16 -0
- package/dist/storyblok-js.js +24 -0
- package/dist/storyblok-js.mjs +866 -0
- package/dist/types/rsc/index.d.ts +2 -0
- package/package.json +18 -18
- package/dist/client-8bf0d228.js +0 -1
- package/dist/client-d552e212.mjs +0 -22
- package/dist/index-9ce0eb0d.mjs +0 -51
- package/dist/index-f2312f95.js +0 -1
- package/dist/storyblok-js-1fc8cce4.js +0 -1
- package/dist/storyblok-js-82c403db.mjs +0 -864
- package/dist/storyblok-react.js +0 -1
- package/dist/storyblok-react.mjs +0 -53
- package/dist/storyblok-react2.js +0 -1
- package/dist/storyblok-react2.mjs +0 -19
- package/dist/storyblok-react3.js +0 -1
- package/dist/storyblok-react3.mjs +0 -17
- package/dist/storyblok-react4.js +0 -1
- package/dist/storyblok-react4.mjs +0 -17
package/README.md
CHANGED
|
@@ -253,8 +253,7 @@ The `getStoryblokApi` function, which is an instance of [storyblok-js-client](ht
|
|
|
253
253
|
You can render the content of your route with the `StoryblokStory` component, which will automatically handle the Visual Editor live events when editing the story. In `app/page.jsx`, use them as follows:
|
|
254
254
|
|
|
255
255
|
```js
|
|
256
|
-
import { getStoryblokApi } from "@storyblok/react/rsc";
|
|
257
|
-
import StoryblokStory from "@storyblok/react/story";
|
|
256
|
+
import { getStoryblokApi, StoryblokStory } from "@storyblok/react/rsc";
|
|
258
257
|
|
|
259
258
|
export default async function Home() {
|
|
260
259
|
const { data } = await fetchData();
|
|
@@ -272,9 +271,10 @@ export async function fetchData() {
|
|
|
272
271
|
}
|
|
273
272
|
```
|
|
274
273
|
|
|
275
|
-
`StoryblokStory` keeps the state for thet story behind the scenes and uses `StoryblokComponent` to render the route components dynamically, using the list of components loaded during the initialization inside the `storyblokInit` function. You can use the `StoryblokComponent` inside the components to render the nested components dynamically. You can also pass bridge options to `StoryblokStory` using the prop `bridgeOptions`.
|
|
274
|
+
`StoryblokStory` keeps the state for thet story behind the scenes and uses `StoryblokComponent` to render the route components dynamically, using the list of components loaded during the initialization inside the `storyblokInit` function. You can use the `StoryblokComponent` inside the components to render the nested components dynamically. You can also pass bridge options to `StoryblokStory` using the prop `bridgeOptions`.
|
|
275
|
+
|
|
276
276
|
```js
|
|
277
|
-
|
|
277
|
+
<StoryblokStory story={data.story} bridgeOptions={bridgeOptions} />
|
|
278
278
|
```
|
|
279
279
|
|
|
280
280
|
> Note: To use this approach (with `getStoryblokApi`), you need to include the `apiPlugin` module when calling `storyblokInit` function. If you don't use `apiPlugin`, you can use your preferred method or function to fetch your data.
|
|
@@ -295,8 +295,7 @@ The initialzation remains the same here as well. Please refer to the above secti
|
|
|
295
295
|
In `app/layout.jsx`, call the `storyblokInit` function and use the new `StoryblokBridgeLoader` component to set up the Storyblok bridge. This Bridge Loader can be imported from `@storyblok/react/bridge-loader`:
|
|
296
296
|
|
|
297
297
|
```js
|
|
298
|
-
import { storyblokInit, apiPlugin } from "@storyblok/react/rsc";
|
|
299
|
-
import StoryblokBridgeLoader from "@storyblok/react/bridge-loader";
|
|
298
|
+
import { storyblokInit, apiPlugin, StoryblokBridgeLoader } from "@storyblok/react/rsc";
|
|
300
299
|
|
|
301
300
|
import Page from "../components/Page";
|
|
302
301
|
import Teaser from "../components/Teaser";
|
|
@@ -481,7 +480,7 @@ export default function Home({
|
|
|
481
480
|
+ feature: Feature,
|
|
482
481
|
+ page: Page,
|
|
483
482
|
+ })
|
|
484
|
-
|
|
483
|
+
|
|
485
484
|
const story = useStoryblokState(initialStory);
|
|
486
485
|
|
|
487
486
|
if (!story.content) {
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
"use strict";const o=require("react"),r=require("./storyblok-js.js"),t=async e=>{await r.loadStoryblokBridge(),new window.StoryblokBridge(e).on(["published","change"],()=>{window.location.reload()})},n=({options:e})=>(t(e),o.createElement(o.Fragment,null));module.exports=n;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import o from "react";
|
|
3
|
+
import { loadStoryblokBridge as r } from "./storyblok-js.mjs";
|
|
4
|
+
const t = async (e) => {
|
|
5
|
+
await r(), new window.StoryblokBridge(e).on(["published", "change"], () => {
|
|
6
|
+
window.location.reload();
|
|
7
|
+
});
|
|
8
|
+
}, i = ({ options: e }) => (t(e), /* @__PURE__ */ o.createElement(o.Fragment, null));
|
|
9
|
+
export {
|
|
10
|
+
i as default
|
|
11
|
+
};
|
package/dist/client.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),u=require("./storyblok-js.js"),l=(e=null,s={})=>{let[t,r]=o.useState(e);if(!(typeof window<"u"&&typeof window.storyblokRegisterEvent<"u")||!e)return e;const n=t.internalId||t.id;return o.useEffect(()=>{r(e),u.registerStoryblokBridge(n,d=>r(d),s)},[e]),t};exports.useStoryblokState=l;
|
package/dist/client.mjs
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { useState as d, useEffect as f } from "react";
|
|
2
|
+
import { registerStoryblokBridge as u } from "./storyblok-js.mjs";
|
|
3
|
+
const i = (e = null, o = {}) => {
|
|
4
|
+
let [t, r] = d(e);
|
|
5
|
+
if (!(typeof window < "u" && typeof window.storyblokRegisterEvent < "u") || !e)
|
|
6
|
+
return e;
|
|
7
|
+
const s = t.internalId || t.id;
|
|
8
|
+
return f(() => {
|
|
9
|
+
r(e), u(
|
|
10
|
+
s,
|
|
11
|
+
(n) => r(n),
|
|
12
|
+
o
|
|
13
|
+
);
|
|
14
|
+
}, [e]), t;
|
|
15
|
+
};
|
|
16
|
+
export {
|
|
17
|
+
i as useStoryblokState
|
|
18
|
+
};
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),e=require("./storyblok-js.js"),o=require("./index2.js"),S=require("./client.js"),k=require("./storyblok-component.js"),a=(r,i={},y={})=>{const n=o.useStoryblokApi();if(!n)return console.error("You can't use useStoryblok if you're not loading apiPlugin."),null;let[b,s]=l.useState({});const u=typeof window<"u"&&typeof window.storyblokRegisterEvent<"u";return l.useEffect(()=>{async function c(){const{data:t}=await n.get(`cdn/stories/${r}`,i);s(t.story),u&&t.story.id&&e.registerStoryblokBridge(t.story.id,d=>s(d),y)}c()},[r,JSON.stringify(i)]),b};exports.RichTextResolver=e.RichTextResolver;exports.RichTextSchema=e.RichTextSchema;exports.apiPlugin=e.apiPlugin;exports.loadStoryblokBridge=e.loadStoryblokBridge;exports.registerStoryblokBridge=e.registerStoryblokBridge;exports.renderRichText=e.renderRichText;exports.storyblokEditable=e.storyblokEditable;exports.useStoryblokBridge=e.registerStoryblokBridge;exports.getComponent=o.getComponent;exports.getStoryblokApi=o.useStoryblokApi;exports.setComponents=o.setComponents;exports.storyblokInit=o.storyblokInit;exports.useStoryblokApi=o.useStoryblokApi;exports.useStoryblokState=S.useStoryblokState;exports.StoryblokComponent=k;exports.useStoryblok=a;
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { useState as d, useEffect as f } from "react";
|
|
2
|
+
import { registerStoryblokBridge as u } from "./storyblok-js.mjs";
|
|
3
|
+
import { RichTextResolver as x, RichTextSchema as w, apiPlugin as B, loadStoryblokBridge as R, renderRichText as h, storyblokEditable as E } from "./storyblok-js.mjs";
|
|
4
|
+
import { useStoryblokApi as p } from "./index2.mjs";
|
|
5
|
+
import { getComponent as C, setComponents as T, storyblokInit as v } from "./index2.mjs";
|
|
6
|
+
import { useStoryblokState as P } from "./client.mjs";
|
|
7
|
+
import { default as N } from "./storyblok-component.mjs";
|
|
8
|
+
const g = (t, e = {}, s = {}) => {
|
|
9
|
+
const r = p();
|
|
10
|
+
if (!r)
|
|
11
|
+
return console.error(
|
|
12
|
+
"You can't use useStoryblok if you're not loading apiPlugin."
|
|
13
|
+
), null;
|
|
14
|
+
let [n, i] = d({});
|
|
15
|
+
const l = typeof window < "u" && typeof window.storyblokRegisterEvent < "u";
|
|
16
|
+
return f(() => {
|
|
17
|
+
async function y() {
|
|
18
|
+
const { data: o } = await r.get(
|
|
19
|
+
`cdn/stories/${t}`,
|
|
20
|
+
e
|
|
21
|
+
);
|
|
22
|
+
i(o.story), l && o.story.id && u(
|
|
23
|
+
o.story.id,
|
|
24
|
+
(a) => i(a),
|
|
25
|
+
s
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
y();
|
|
29
|
+
}, [t, JSON.stringify(e)]), n;
|
|
30
|
+
};
|
|
31
|
+
export {
|
|
32
|
+
x as RichTextResolver,
|
|
33
|
+
w as RichTextSchema,
|
|
34
|
+
N as StoryblokComponent,
|
|
35
|
+
B as apiPlugin,
|
|
36
|
+
C as getComponent,
|
|
37
|
+
p as getStoryblokApi,
|
|
38
|
+
R as loadStoryblokBridge,
|
|
39
|
+
u as registerStoryblokBridge,
|
|
40
|
+
h as renderRichText,
|
|
41
|
+
T as setComponents,
|
|
42
|
+
E as storyblokEditable,
|
|
43
|
+
v as storyblokInit,
|
|
44
|
+
g as useStoryblok,
|
|
45
|
+
p as useStoryblokApi,
|
|
46
|
+
u as useStoryblokBridge,
|
|
47
|
+
P as useStoryblokState
|
|
48
|
+
};
|
package/dist/index2.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./storyblok-js.js"),l=require("./storyblok-component.js");let r=null,t={};const n=()=>(r||console.error("You can't use getStoryblokApi if you're not loading apiPlugin."),r),s=e=>(t=e,t),b=e=>t[e]?t[e]:(console.error(`Component ${e} doesn't exist.`),!1),c=(e={})=>{const{storyblokApi:i}=o.storyblokInit(e);r=i,t=e.components};exports.RichTextResolver=o.RichTextResolver;exports.RichTextSchema=o.RichTextSchema;exports.apiPlugin=o.apiPlugin;exports.loadStoryblokBridge=o.loadStoryblokBridge;exports.registerStoryblokBridge=o.registerStoryblokBridge;exports.renderRichText=o.renderRichText;exports.storyblokEditable=o.storyblokEditable;exports.useStoryblokBridge=o.registerStoryblokBridge;exports.StoryblokComponent=l;exports.getComponent=b;exports.getStoryblokApi=n;exports.setComponents=s;exports.storyblokInit=c;exports.useStoryblokApi=n;
|
package/dist/index2.mjs
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { storyblokInit as n } from "./storyblok-js.mjs";
|
|
2
|
+
import { RichTextResolver as k, RichTextSchema as u, apiPlugin as y, loadStoryblokBridge as g, registerStoryblokBridge as d, renderRichText as m, storyblokEditable as S, registerStoryblokBridge as f } from "./storyblok-js.mjs";
|
|
3
|
+
import { default as A } from "./storyblok-component.mjs";
|
|
4
|
+
let e = null, t = {};
|
|
5
|
+
const l = () => (e || console.error(
|
|
6
|
+
"You can't use getStoryblokApi if you're not loading apiPlugin."
|
|
7
|
+
), e), i = (o) => (t = o, t), a = (o) => t[o] ? t[o] : (console.error(`Component ${o} doesn't exist.`), !1), b = (o = {}) => {
|
|
8
|
+
const { storyblokApi: r } = n(o);
|
|
9
|
+
e = r, t = o.components;
|
|
10
|
+
};
|
|
11
|
+
export {
|
|
12
|
+
k as RichTextResolver,
|
|
13
|
+
u as RichTextSchema,
|
|
14
|
+
A as StoryblokComponent,
|
|
15
|
+
y as apiPlugin,
|
|
16
|
+
a as getComponent,
|
|
17
|
+
l as getStoryblokApi,
|
|
18
|
+
g as loadStoryblokBridge,
|
|
19
|
+
d as registerStoryblokBridge,
|
|
20
|
+
m as renderRichText,
|
|
21
|
+
i as setComponents,
|
|
22
|
+
S as storyblokEditable,
|
|
23
|
+
b as storyblokInit,
|
|
24
|
+
l as useStoryblokApi,
|
|
25
|
+
f as useStoryblokBridge
|
|
26
|
+
};
|
package/dist/rsc.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./index2.js"),r=require("./story.js"),t=require("./bridge-loader.js"),i=require("./storyblok-component.js"),e=require("./storyblok-js.js");exports.getComponent=o.getComponent;exports.getStoryblokApi=o.useStoryblokApi;exports.setComponents=o.setComponents;exports.storyblokInit=o.storyblokInit;exports.useStoryblokApi=o.useStoryblokApi;exports.StoryblokStory=r;exports.BridgeLoader=t;exports.StoryblokComponent=i;exports.RichTextResolver=e.RichTextResolver;exports.RichTextSchema=e.RichTextSchema;exports.apiPlugin=e.apiPlugin;exports.loadStoryblokBridge=e.loadStoryblokBridge;exports.registerStoryblokBridge=e.registerStoryblokBridge;exports.renderRichText=e.renderRichText;exports.storyblokEditable=e.storyblokEditable;exports.useStoryblokBridge=e.registerStoryblokBridge;
|
package/dist/rsc.mjs
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { getComponent as r, useStoryblokApi as t, setComponents as l, storyblokInit as i, useStoryblokApi as s } from "./index2.mjs";
|
|
2
|
+
import { default as b } from "./story.mjs";
|
|
3
|
+
import { default as p } from "./bridge-loader.mjs";
|
|
4
|
+
import { default as k } from "./storyblok-component.mjs";
|
|
5
|
+
import { RichTextResolver as g, RichTextSchema as m, apiPlugin as n, loadStoryblokBridge as f, registerStoryblokBridge as x, renderRichText as u, storyblokEditable as B, registerStoryblokBridge as c } from "./storyblok-js.mjs";
|
|
6
|
+
export {
|
|
7
|
+
p as BridgeLoader,
|
|
8
|
+
g as RichTextResolver,
|
|
9
|
+
m as RichTextSchema,
|
|
10
|
+
k as StoryblokComponent,
|
|
11
|
+
b as StoryblokStory,
|
|
12
|
+
n as apiPlugin,
|
|
13
|
+
r as getComponent,
|
|
14
|
+
t as getStoryblokApi,
|
|
15
|
+
f as loadStoryblokBridge,
|
|
16
|
+
x as registerStoryblokBridge,
|
|
17
|
+
u as renderRichText,
|
|
18
|
+
l as setComponents,
|
|
19
|
+
B as storyblokEditable,
|
|
20
|
+
i as storyblokInit,
|
|
21
|
+
s as useStoryblokApi,
|
|
22
|
+
c as useStoryblokBridge
|
|
23
|
+
};
|
package/dist/story.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
"use strict";const t=require("react"),c=require("./client.js"),i=require("./storyblok-component.js"),l=t.forwardRef(({story:e,bridgeOptions:n,...o},r)=>(typeof e.content=="string"&&(e.content=JSON.parse(e.content)),e=c.useStoryblokState(e,n),t.createElement(i,{ref:r,blok:e.content,...o})));module.exports=l;
|
package/dist/story.mjs
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import r, { forwardRef as f } from "react";
|
|
3
|
+
import { useStoryblokState as m } from "./client.mjs";
|
|
4
|
+
import a from "./storyblok-component.mjs";
|
|
5
|
+
const S = f(
|
|
6
|
+
({ story: t, bridgeOptions: o, ...e }, n) => (typeof t.content == "string" && (t.content = JSON.parse(t.content)), t = m(t, o), /* @__PURE__ */ r.createElement(a, { ref: n, blok: t.content, ...e }))
|
|
7
|
+
);
|
|
8
|
+
export {
|
|
9
|
+
S as default
|
|
10
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const e=require("react"),p=require("./index2.js"),r=e.forwardRef(({blok:o,...n},l)=>{if(!o)return console.error("Please provide a 'blok' property to the StoryblokComponent"),e.createElement("div",null,"Please provide a blok property to the StoryblokComponent");const t=p.getComponent(o.component);return t?e.createElement(t,{ref:l,blok:o,...n}):e.createElement("div",null)});r.displayName="StoryblokComponent";module.exports=r;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import o, { forwardRef as p } from "react";
|
|
2
|
+
import { getComponent as l } from "./index2.mjs";
|
|
3
|
+
const m = p(
|
|
4
|
+
({ blok: e, ...r }, n) => {
|
|
5
|
+
if (!e)
|
|
6
|
+
return console.error(
|
|
7
|
+
"Please provide a 'blok' property to the StoryblokComponent"
|
|
8
|
+
), /* @__PURE__ */ o.createElement("div", null, "Please provide a blok property to the StoryblokComponent");
|
|
9
|
+
const t = l(e.component);
|
|
10
|
+
return t ? /* @__PURE__ */ o.createElement(t, { ref: n, blok: e, ...r }) : /* @__PURE__ */ o.createElement("div", null);
|
|
11
|
+
}
|
|
12
|
+
);
|
|
13
|
+
m.displayName = "StoryblokComponent";
|
|
14
|
+
export {
|
|
15
|
+
m as default
|
|
16
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let R=!1;const _=[],E=n=>new Promise((t,e)=>{if(typeof window>"u"||(window.storyblokRegisterEvent=r=>{if(window.location===window.parent.location){console.warn("You are not in Draft Mode or in the Visual Editor.");return}R?r():_.push(r)},document.getElementById("storyblok-javascript-bridge")))return;const s=document.createElement("script");s.async=!0,s.src=n,s.id="storyblok-javascript-bridge",s.onerror=r=>e(r),s.onload=r=>{_.forEach(i=>i()),R=!0,t(r)},document.getElementsByTagName("head")[0].appendChild(s)});var A=Object.defineProperty,N=(n,t,e)=>t in n?A(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e,h=(n,t,e)=>(N(n,typeof t!="symbol"?t+"":t,e),e);function j(n){return!(n!==n||n===1/0||n===-1/0)}function M(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");const s=[];let r=[],i=0;const o=function(){i++;const a=setTimeout(function(){i--,s.length>0&&o(),r=r.filter(function(u){return u!==a})},e);r.indexOf(a)<0&&r.push(a);const l=s.shift();l.resolve(n.apply(l.self,l.args))},c=function(...a){const l=this;return new Promise(function(u,d){s.push({resolve:u,reject:d,args:a,self:l}),i<t&&o()})};return c.abort=function(){r.forEach(clearTimeout),r=[],s.forEach(function(a){a.reject(function(){Error.call(this,"Throttled function aborted"),this.name="AbortError"})}),s.length=0},c}const L=function(n,t){const e={};for(const s in n){const r=n[s];t.indexOf(s)>-1&&r!==null&&(e[s]=r)}return e},z=n=>n==="email",U=()=>({singleTag:"hr"}),q=()=>({tag:"blockquote"}),H=()=>({tag:"ul"}),B=n=>({tag:["pre",{tag:"code",attrs:n.attrs}]}),V=()=>({singleTag:"br"}),D=n=>({tag:`h${n.attrs.level}`}),J=n=>({singleTag:[{tag:"img",attrs:L(n.attrs,["src","alt","title"])}]}),F=()=>({tag:"li"}),Y=()=>({tag:"ol"}),K=()=>({tag:"p"}),W=n=>({tag:[{tag:"span",attrs:{"data-type":"emoji","data-name":n.attrs.name,emoji:n.attrs.emoji}}]}),G=()=>({tag:"b"}),Q=()=>({tag:"strike"}),X=()=>({tag:"u"}),Z=()=>({tag:"strong"}),tt=()=>({tag:"code"}),et=()=>({tag:"i"}),st=n=>{const t={...n.attrs},{linktype:e="url"}=n.attrs;if(z(e)&&(t.href=`mailto:${t.href}`),t.anchor&&(t.href=`${t.href}#${t.anchor}`,delete t.anchor),t.custom){for(const s in t.custom)t[s]=t.custom[s];delete t.custom}return{tag:[{tag:"a",attrs:t}]}},rt=n=>({tag:[{tag:"span",attrs:n.attrs}]}),it=()=>({tag:"sub"}),ot=()=>({tag:"sup"}),nt=n=>({tag:[{tag:"span",attrs:n.attrs}]}),at=n=>{var t;return(t=n.attrs)!=null&&t.color?{tag:[{tag:"span",attrs:{style:`background-color:${n.attrs.color};`}}]}:{tag:""}},lt=n=>{var t;return(t=n.attrs)!=null&&t.color?{tag:[{tag:"span",attrs:{style:`color:${n.attrs.color}`}}]}:{tag:""}},P={nodes:{horizontal_rule:U,blockquote:q,bullet_list:H,code_block:B,hard_break:V,heading:D,image:J,list_item:F,ordered_list:Y,paragraph:K,emoji:W},marks:{bold:G,strike:Q,underline:X,strong:Z,code:tt,italic:et,link:st,styled:rt,subscript:it,superscript:ot,anchor:nt,highlight:at,textStyle:lt}},ct=function(n){const t={"&":"&","<":"<",">":">",'"':""","'":"'"},e=/[&<>"']/g,s=RegExp(e.source);return n&&s.test(n)?n.replace(e,r=>t[r]):n};class m{constructor(t){h(this,"marks"),h(this,"nodes"),t||(t=P),this.marks=t.marks||[],this.nodes=t.nodes||[]}addNode(t,e){this.nodes[t]=e}addMark(t,e){this.marks[t]=e}render(t,e={optimizeImages:!1}){if(t&&t.content&&Array.isArray(t.content)){let s="";return t.content.forEach(r=>{s+=this.renderNode(r)}),e.optimizeImages?this.optimizeImages(s,e.optimizeImages):s}return console.warn(`The render method must receive an Object with a "content" field.
|
|
2
|
+
The "content" field must be an array of nodes as the type ISbRichtext.
|
|
3
|
+
ISbRichtext:
|
|
4
|
+
content?: ISbRichtext[]
|
|
5
|
+
marks?: ISbRichtext[]
|
|
6
|
+
attrs?: any
|
|
7
|
+
text?: string
|
|
8
|
+
type: string
|
|
9
|
+
|
|
10
|
+
Example:
|
|
11
|
+
{
|
|
12
|
+
content: [
|
|
13
|
+
{
|
|
14
|
+
content: [
|
|
15
|
+
{
|
|
16
|
+
text: 'Hello World',
|
|
17
|
+
type: 'text'
|
|
18
|
+
}
|
|
19
|
+
],
|
|
20
|
+
type: 'paragraph'
|
|
21
|
+
}
|
|
22
|
+
],
|
|
23
|
+
type: 'doc'
|
|
24
|
+
}`),""}optimizeImages(t,e){let s=0,r=0,i="",o="";typeof e!="boolean"&&(typeof e.width=="number"&&e.width>0&&(i+=`width="${e.width}" `,s=e.width),typeof e.height=="number"&&e.height>0&&(i+=`height="${e.height}" `,r=e.height),(e.loading==="lazy"||e.loading==="eager")&&(i+=`loading="${e.loading}" `),typeof e.class=="string"&&e.class.length>0&&(i+=`class="${e.class}" `),e.filters&&(typeof e.filters.blur=="number"&&e.filters.blur>=0&&e.filters.blur<=100&&(o+=`:blur(${e.filters.blur})`),typeof e.filters.brightness=="number"&&e.filters.brightness>=-100&&e.filters.brightness<=100&&(o+=`:brightness(${e.filters.brightness})`),e.filters.fill&&(e.filters.fill.match(/[0-9A-Fa-f]{6}/g)||e.filters.fill==="transparent")&&(o+=`:fill(${e.filters.fill})`),e.filters.format&&["webp","png","jpeg"].includes(e.filters.format)&&(o+=`:format(${e.filters.format})`),typeof e.filters.grayscale=="boolean"&&e.filters.grayscale&&(o+=":grayscale()"),typeof e.filters.quality=="number"&&e.filters.quality>=0&&e.filters.quality<=100&&(o+=`:quality(${e.filters.quality})`),e.filters.rotate&&[90,180,270].includes(e.filters.rotate)&&(o+=`:rotate(${e.filters.rotate})`),o.length>0&&(o="/filters"+o))),i.length>0&&(t=t.replace(/<img/g,`<img ${i.trim()}`));const c=s>0||r>0||o.length>0?`${s}x${r}${o}`:"";return t=t.replace(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g,`a.storyblok.com/f/$1/$2.$3/m/${c}`),typeof e!="boolean"&&(e.sizes||e.srcset)&&(t=t.replace(/<img.*?src=["|'](.*?)["|']/g,a=>{var l,u;const d=a.match(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g);if(d&&d.length>0){const p={srcset:(l=e.srcset)==null?void 0:l.map(g=>{if(typeof g=="number")return`//${d}/m/${g}x0${o} ${g}w`;if(typeof g=="object"&&g.length===2){let v=0,T=0;return typeof g[0]=="number"&&(v=g[0]),typeof g[1]=="number"&&(T=g[1]),`//${d}/m/${v}x${T}${o} ${v}w`}}).join(", "),sizes:(u=e.sizes)==null?void 0:u.map(g=>g).join(", ")};let b="";return p.srcset&&(b+=`srcset="${p.srcset}" `),p.sizes&&(b+=`sizes="${p.sizes}" `),a.replace(/<img/g,`<img ${b.trim()}`)}return a})),t}renderNode(t){const e=[];t.marks&&t.marks.forEach(r=>{const i=this.getMatchingMark(r);i&&i.tag!==""&&e.push(this.renderOpeningTag(i.tag))});const s=this.getMatchingNode(t);return s&&s.tag&&e.push(this.renderOpeningTag(s.tag)),t.content?t.content.forEach(r=>{e.push(this.renderNode(r))}):t.text?e.push(ct(t.text)):s&&s.singleTag?e.push(this.renderTag(s.singleTag," /")):s&&s.html?e.push(s.html):t.type==="emoji"&&e.push(this.renderEmoji(t)),s&&s.tag&&e.push(this.renderClosingTag(s.tag)),t.marks&&t.marks.slice(0).reverse().forEach(r=>{const i=this.getMatchingMark(r);i&&i.tag!==""&&e.push(this.renderClosingTag(i.tag))}),e.join("")}renderTag(t,e){return t.constructor===String?`<${t}${e}>`:t.map(s=>{if(s.constructor===String)return`<${s}${e}>`;{let r=`<${s.tag}`;if(s.attrs)for(const i in s.attrs){const o=s.attrs[i];o!==null&&(r+=` ${i}="${o}"`)}return`${r}${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){const e=this.nodes[t.type];if(typeof e=="function")return e(t)}getMatchingMark(t){const e=this.marks[t.type];if(typeof e=="function")return e(t)}renderEmoji(t){if(t.attrs.emoji)return t.attrs.emoji;const e=[{tag:"img",attrs:{src:t.attrs.fallbackImage,draggable:"false",loading:"lazy",align:"absmiddle"}}];return this.renderTag(e," /")}}class w{constructor(){h(this,"isCDNUrl",(t="")=>t.indexOf("/cdn/")>-1),h(this,"getOptionsPage",(t,e=25,s=1)=>({...t,per_page:e,page:s})),h(this,"delay",t=>new Promise(e=>setTimeout(e,t))),h(this,"arrayFrom",(t=0,e)=>[...Array(t)].map(e)),h(this,"range",(t=0,e=t)=>{const s=Math.abs(e-t)||0,r=t<e?1:-1;return this.arrayFrom(s,(i,o)=>o*r+t)}),h(this,"asyncMap",async(t,e)=>Promise.all(t.map(e))),h(this,"flatMap",(t=[],e)=>t.map(e).reduce((s,r)=>[...s,...r],[]))}stringify(t,e,s){const r=[];for(const i in t){if(!Object.prototype.hasOwnProperty.call(t,i))continue;const o=t[i],c=s?"":encodeURIComponent(i);let a;typeof o=="object"?a=this.stringify(o,e?e+encodeURIComponent("["+c+"]"):c,Array.isArray(o)):a=(e?e+encodeURIComponent("["+c+"]"):c)+"="+encodeURIComponent(o),r.push(a)}return r.join("&")}getRegionURL(t){const e="api.storyblok.com",s="api-us.storyblok.com",r="app.storyblokchina.cn";switch(t){case"us":return s;case"cn":return r;default:return e}}}class ht{constructor(t){h(this,"baseURL"),h(this,"timeout"),h(this,"headers"),h(this,"responseInterceptor"),h(this,"fetch"),h(this,"ejectInterceptor"),h(this,"url"),h(this,"parameters"),this.baseURL=t.baseURL,this.headers=t.headers||new Headers,this.timeout=t!=null&&t.timeout?t.timeout*1e3:0,this.responseInterceptor=t.responseInterceptor,this.fetch=(...e)=>t.fetch?t.fetch(...e):fetch(...e),this.ejectInterceptor=!1,this.url="",this.parameters={}}get(t,e){return this.url=t,this.parameters=e,this._methodHandler("get")}post(t,e){return this.url=t,this.parameters=e,this._methodHandler("post")}put(t,e){return this.url=t,this.parameters=e,this._methodHandler("put")}delete(t,e){return this.url=t,this.parameters=e,this._methodHandler("delete")}async _responseHandler(t){const e=[],s={data:{},headers:{},status:0,statusText:""};t.status!==204&&await t.json().then(r=>{s.data=r});for(const r of t.headers.entries())e[r[0]]=r[1];return s.headers={...e},s.status=t.status,s.statusText=t.statusText,s}async _methodHandler(t){let e=`${this.baseURL}${this.url}`,s=null;if(t==="get"){const a=new w;e=`${this.baseURL}${this.url}?${a.stringify(this.parameters)}`}else s=JSON.stringify(this.parameters);const r=new URL(e),i=new AbortController,{signal:o}=i;let c;this.timeout&&(c=setTimeout(()=>i.abort(),this.timeout));try{const a=await this.fetch(`${r}`,{method:t,headers:this.headers,body:s,signal:o});this.timeout&&clearTimeout(c);const l=await this._responseHandler(a);return this.responseInterceptor&&!this.ejectInterceptor?this._statusHandler(this.responseInterceptor(l)):this._statusHandler(l)}catch(a){return{message:a}}}eject(){this.ejectInterceptor=!0}_statusHandler(t){const e=/20[0-6]/g;return new Promise((s,r)=>{if(e.test(`${t.status}`))return s(t);const i={message:new Error(t.statusText),status:t.status,response:Array.isArray(t.data)?t.data[0]:t.data.error||t.data.slug};r(i)})}}const x="SB-Agent",k={defaultAgentName:"SB-JS-CLIENT",defaultAgentVersion:"SB-Agent-Version",packageVersion:"2.2.4"};let y={};const f={};class ut{constructor(t,e){h(this,"client"),h(this,"maxRetries"),h(this,"throttle"),h(this,"accessToken"),h(this,"cache"),h(this,"helpers"),h(this,"resolveCounter"),h(this,"relations"),h(this,"links"),h(this,"richTextResolver"),h(this,"resolveNestedRelations");let s=t.endpoint||e;if(!s){const o=new w().getRegionURL,c=t.https===!1?"http":"https";t.oauthToken?s=`${c}://${o(t.region)}/v1`:s=`${c}://${o(t.region)}/v2`}const r=new Headers;if(r.set("Content-Type","application/json"),r.set("Accept","application/json"),t.headers)for(const o in t.headers)r.set(o,t.headers[o]);r.has(x)||(r.set(x,k.defaultAgentName),r.set(k.defaultAgentVersion,k.packageVersion));let i=5;t.oauthToken&&(r.set("Authorization",t.oauthToken),i=3),t.rateLimit&&(i=t.rateLimit),t.richTextSchema?this.richTextResolver=new m(t.richTextSchema):this.richTextResolver=new m,t.componentResolver&&this.setComponentResolver(t.componentResolver),this.maxRetries=t.maxRetries||5,this.throttle=M(this.throttledRequest,i,1e3),this.accessToken=t.accessToken||"",this.relations={},this.links={},this.cache=t.cache||{clear:"manual"},this.helpers=new w,this.resolveCounter=0,this.resolveNestedRelations=t.resolveNestedRelations||!0,this.client=new ht({baseURL:s,timeout:t.timeout||0,headers:r,responseInterceptor:t.responseInterceptor,fetch:t.fetch})}setComponentResolver(t){this.richTextResolver.addNode("blok",e=>{let s="";return e.attrs.body&&e.attrs.body.forEach(r=>{s+=t(r.component,r)}),{html:s}})}parseParams(t){return t.version||(t.version="published"),t.token||(t.token=this.getToken()),t.cv||(t.cv=f[t.token]),Array.isArray(t.resolve_relations)&&(t.resolve_relations=t.resolve_relations.join(",")),t}factoryParamOptions(t,e){return this.helpers.isCDNUrl(t)?this.parseParams(e):e}makeRequest(t,e,s,r){const i=this.factoryParamOptions(t,this.helpers.getOptionsPage(e,s,r));return this.cacheResponse(t,i)}get(t,e){e||(e={});const s=`/${t}`,r=this.factoryParamOptions(s,e);return this.cacheResponse(s,r)}async getAll(t,e,s){const r=(e==null?void 0:e.per_page)||25,i=`/${t}`,o=i.split("/"),c=s||o[o.length-1],a=1,l=await this.makeRequest(i,e,r,a),u=l.total?Math.ceil(l.total/r):1,d=await this.helpers.asyncMap(this.helpers.range(a,u),p=>this.makeRequest(i,e,r,p+1));return this.helpers.flatMap([l,...d],p=>Object.values(p.data[c]))}post(t,e){const s=`/${t}`;return Promise.resolve(this.throttle("post",s,e))}put(t,e){const s=`/${t}`;return Promise.resolve(this.throttle("put",s,e))}delete(t,e){const s=`/${t}`;return Promise.resolve(this.throttle("delete",s,e))}getStories(t){return this.get("cdn/stories",t)}getStory(t,e){return this.get(`cdn/stories/${t}`,e)}getToken(){return this.accessToken}ejectInterceptor(){this.client.eject()}_cleanCopy(t){return JSON.parse(JSON.stringify(t))}_insertLinks(t,e,s){const r=t[e];r&&r.fieldtype=="multilink"&&r.linktype=="story"&&typeof r.id=="string"&&this.links[s][r.id]?r.story=this._cleanCopy(this.links[s][r.id]):r&&r.linktype==="story"&&typeof r.uuid=="string"&&this.links[s][r.uuid]&&(r.story=this._cleanCopy(this.links[s][r.uuid]))}_insertRelations(t,e,s,r){if(s.indexOf(`${t.component}.${e}`)>-1){if(typeof t[e]=="string")this.relations[r][t[e]]&&(t[e]=this._cleanCopy(this.relations[r][t[e]]));else if(t[e]&&t[e].constructor===Array){const i=[];t[e].forEach(o=>{this.relations[r][o]&&i.push(this._cleanCopy(this.relations[r][o]))}),t[e]=i}}}iterateTree(t,e,s){const r=i=>{if(i!=null){if(i.constructor===Array)for(let o=0;o<i.length;o++)r(i[o]);else if(i.constructor===Object){if(i._stopResolving)return;for(const o in i)(i.component&&i._uid||i.type==="link")&&(this._insertRelations(i,o,e,s),this._insertLinks(i,o,s)),r(i[o])}}};r(t.content)}async resolveLinks(t,e,s){let r=[];if(t.link_uuids){const i=t.link_uuids.length,o=[],c=50;for(let a=0;a<i;a+=c){const l=Math.min(i,a+c);o.push(t.link_uuids.slice(a,l))}for(let a=0;a<o.length;a++)(await this.getStories({per_page:c,language:e.language,version:e.version,by_uuids:o[a].join(",")})).data.stories.forEach(l=>{r.push(l)})}else r=t.links;r.forEach(i=>{this.links[s][i.uuid]={...i,_stopResolving:!0}})}async resolveRelations(t,e,s){let r=[];if(t.rel_uuids){const i=t.rel_uuids.length,o=[],c=50;for(let a=0;a<i;a+=c){const l=Math.min(i,a+c);o.push(t.rel_uuids.slice(a,l))}for(let a=0;a<o.length;a++)(await this.getStories({per_page:c,language:e.language,version:e.version,by_uuids:o[a].join(",")})).data.stories.forEach(l=>{r.push(l)})}else r=t.rels;r&&r.length>0&&r.forEach(i=>{this.relations[s][i.uuid]={...i,_stopResolving:!0}})}async resolveStories(t,e,s){var r,i;let o=[];if(this.links[s]={},this.relations[s]={},typeof e.resolve_relations<"u"&&e.resolve_relations.length>0&&(typeof e.resolve_relations=="string"&&(o=e.resolve_relations.split(",")),await this.resolveRelations(t,e,s)),e.resolve_links&&["1","story","url"].indexOf(e.resolve_links)>-1&&((r=t.links)!=null&&r.length||(i=t.link_uuids)!=null&&i.length)&&await this.resolveLinks(t,e,s),this.resolveNestedRelations)for(const c in this.relations[s])this.iterateTree(this.relations[s][c],o,s);t.story?this.iterateTree(t.story,o,s):t.stories.forEach(c=>{this.iterateTree(c,o,s)}),delete this.links[s],delete this.relations[s]}async cacheResponse(t,e,s){const r=this.helpers.stringify({url:t,params:e}),i=this.cacheProvider();if(this.cache.clear==="auto"&&e.version==="draft"&&await this.flushCache(),e.version==="published"&&t!="/cdn/spaces/me"){const o=await i.get(r);if(o)return Promise.resolve(o)}return new Promise((o,c)=>{try{(async()=>{var a;try{const l=await this.throttle("get",t,e);let u={data:l.data,headers:l.headers};if((a=l.headers)!=null&&a["per-page"]&&(u=Object.assign({},u,{perPage:l.headers["per-page"]?parseInt(l.headers["per-page"]):0,total:l.headers["per-page"]?parseInt(l.headers.total):0})),l.status!=200)return c(l);if(u.data.story||u.data.stories){const d=this.resolveCounter=++this.resolveCounter%1e3;await this.resolveStories(u.data,e,`${d}`)}return e.version==="published"&&t!="/cdn/spaces/me"&&await i.set(r,u),u.data.cv&&e.token&&(e.version=="draft"&&f[e.token]!=u.data.cv&&await this.flushCache(),f[e.token]=u.data.cv),o(u)}catch(l){return c(l)}})()}catch{}})}throttledRequest(t,e,s){return this.client[t](e,s)}cacheVersions(){return f}cacheVersion(){return f[this.accessToken]}setCacheVersion(t){this.accessToken&&(f[this.accessToken]=t)}cacheProvider(){switch(this.cache.type){case"memory":return{get(t){return Promise.resolve(y[t])},getAll(){return Promise.resolve(y)},set(t,e){return y[t]=e,Promise.resolve(void 0)},flush(){return y={},Promise.resolve(void 0)}};case"custom":if(this.cache.custom)return this.cache.custom;default:return{get(){return Promise.resolve(void 0)},getAll(){return Promise.resolve(void 0)},set(){return Promise.resolve(void 0)},flush(){return Promise.resolve(void 0)}}}}async flushCache(){return await this.cacheProvider().flush(),this}}const dt=(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 ut(t)}},gt=n=>{if(typeof n!="object"||typeof n._editable>"u")return{};const t=JSON.parse(n._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return{"data-blok-c":JSON.stringify(t),"data-blok-uid":t.id+"-"+t.uid}};let $;const S="https://app.storyblok.com/f/storyblok-v2-latest.js",I=(n,t,e={})=>{var s;const r=!(typeof window>"u")&&typeof window.storyblokRegisterEvent<"u",i=+new URL((s=window.location)==null?void 0:s.href).searchParams.get("_storyblok")===n;if(!(!r||!i)){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"],o=>{o.action==="input"&&o.story.id===n?t(o.story):(o.action==="change"||o.action==="published")&&o.storyId===n&&window.location.reload()})})}},pt=(n={})=>{var t,e;const{bridge:s,accessToken:r,use:i=[],apiOptions:o={},richText:c={}}=n;o.accessToken=o.accessToken||r;const a={bridge:s,apiOptions:o};let l={};i.forEach(d=>{l={...l,...d(a)}});const u=!(typeof window>"u")&&((e=(t=window.location)==null?void 0:t.search)==null?void 0:e.includes("_storyblok_tk"));return s!==!1&&u&&E(S),$=new m(c.schema),c.resolver&&O($,c.resolver),l},O=(n,t)=>{n.addNode("blok",e=>{let s="";return e.attrs.body.forEach(r=>{s+=t(r.component,r)}),{html:s}})},C=n=>{var t,e;return!n||((t=n==null?void 0:n.content)==null?void 0:t[0].type)!=="blok"&&!((e=n==null?void 0:n.content)!=null&&e[0].content)},ft=(n,t,e)=>{let s=e||$;if(!s){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return C(n)?"":(t&&(s=new m(t.schema),t.resolver&&O(s,t.resolver)),s.render(n))},mt=()=>E(S);exports.RichTextResolver=m;exports.RichTextSchema=P;exports.apiPlugin=dt;exports.isRichTextEmpty=C;exports.loadStoryblokBridge=mt;exports.registerStoryblokBridge=I;exports.renderRichText=ft;exports.storyblokEditable=gt;exports.storyblokInit=pt;exports.useStoryblokBridge=I;
|