@storyblok/astro 2.3.5 → 2.4.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 +46 -2
- package/RichTextRenderer.astro +32 -0
- package/dist/storyblok-astro.js +3 -3
- package/dist/storyblok-astro.mjs +67 -67
- package/dist/types/index.d.ts +1 -1
- package/package.json +8 -6
package/README.md
CHANGED
|
@@ -256,9 +256,10 @@ If you want to deploy a dedicated preview environment with the Bridge enabled, a
|
|
|
256
256
|
|
|
257
257
|
### Rendering Rich Text
|
|
258
258
|
|
|
259
|
-
You can easily render rich text by using the `renderRichText` function
|
|
259
|
+
You can easily render rich text by using either the `renderRichText` function or the `<RichTextRenderer />` component, both of which are included in `@storyblok/astro`.
|
|
260
|
+
Use `renderRichText`, which only supports parsing and returning native HTML tags, if you are not embedding `bloks` in your rich text. Then you can use the [`set:html` directive](https://docs.astro.build/en/reference/directives-reference/#sethtml):
|
|
260
261
|
|
|
261
|
-
```
|
|
262
|
+
```jsx
|
|
262
263
|
---
|
|
263
264
|
import { renderRichText } from '@storyblok/astro';
|
|
264
265
|
|
|
@@ -270,6 +271,18 @@ const renderedRichText = renderRichText(blok.text)
|
|
|
270
271
|
<div set:html="{renderedRichText}"></div>
|
|
271
272
|
```
|
|
272
273
|
|
|
274
|
+
Use the `<RichTextRenderer />` component if you are embedding `bloks` in your rich text:
|
|
275
|
+
|
|
276
|
+
```jsx
|
|
277
|
+
---
|
|
278
|
+
import { renderRichText, RichTextRenderer } from '@storyblok/astro';
|
|
279
|
+
|
|
280
|
+
const { blok } = Astro.props
|
|
281
|
+
---
|
|
282
|
+
|
|
283
|
+
<RichTextRenderer richTextData="{blok.richtext}" />
|
|
284
|
+
```
|
|
285
|
+
|
|
273
286
|
You can also set a **custom Schema and component resolver** by passing the options as the second parameter of the `renderRichText` function:
|
|
274
287
|
|
|
275
288
|
```js
|
|
@@ -296,6 +309,37 @@ const renderedRichText = renderRichText(blok.text, {
|
|
|
296
309
|
});
|
|
297
310
|
```
|
|
298
311
|
|
|
312
|
+
The same can be done with the `<RichTextRenderer />` component by passing along the options via the `richTextOptions` prop:
|
|
313
|
+
|
|
314
|
+
```js
|
|
315
|
+
---
|
|
316
|
+
import { RichTextSchema, renderRichText, RichTextRenderer } from "@storyblok/astro";
|
|
317
|
+
import cloneDeep from "clone-deep";
|
|
318
|
+
|
|
319
|
+
const mySchema = cloneDeep(RichTextSchema); // you can make a copy of the default RichTextSchema
|
|
320
|
+
// ... and edit the nodes and marks, or add your own.
|
|
321
|
+
// Check the base RichTextSchema source here https://github.com/storyblok/storyblok-js-client/blob/v4/source/schema.js
|
|
322
|
+
|
|
323
|
+
const { blok } = Astro.props;
|
|
324
|
+
|
|
325
|
+
const options = {
|
|
326
|
+
schema: mySchema,
|
|
327
|
+
resolver: (component, blok) => {
|
|
328
|
+
switch (component) {
|
|
329
|
+
case "my-custom-component":
|
|
330
|
+
return `<div class="my-component-class">${blok.text}</div>`;
|
|
331
|
+
break;
|
|
332
|
+
default:
|
|
333
|
+
return `Component ${component} not found`;
|
|
334
|
+
}
|
|
335
|
+
},
|
|
336
|
+
};
|
|
337
|
+
---
|
|
338
|
+
|
|
339
|
+
<RichTextRenderer richTextData="{blok.richtext}" richTextOptions="{options}" />
|
|
340
|
+
|
|
341
|
+
```
|
|
342
|
+
|
|
299
343
|
## API
|
|
300
344
|
|
|
301
345
|
### useStoryblokApi()
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
---
|
|
2
|
+
import { renderRichText } from ".";
|
|
3
|
+
import type { ISbRichtext, SbBlokData, SbRichTextOptions } from "./dist/types";
|
|
4
|
+
|
|
5
|
+
import StoryblokComponent from "./StoryblokComponent.astro";
|
|
6
|
+
|
|
7
|
+
export interface Props {
|
|
8
|
+
richTextData?: ISbRichtext;
|
|
9
|
+
richTextOptions?: SbRichTextOptions;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
const { richTextData, richTextOptions } = Astro.props;
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
{
|
|
16
|
+
richTextData?.content?.map((richTextNode: ISbRichtext) => {
|
|
17
|
+
if (richTextNode.type === "blok") {
|
|
18
|
+
return richTextNode.attrs.body.map((blok: SbBlokData) => (
|
|
19
|
+
<StoryblokComponent blok={blok} />
|
|
20
|
+
));
|
|
21
|
+
} else {
|
|
22
|
+
return (
|
|
23
|
+
<Fragment
|
|
24
|
+
set:html={renderRichText(
|
|
25
|
+
{ type: richTextNode.type, content: [richTextNode] },
|
|
26
|
+
richTextOptions
|
|
27
|
+
)}
|
|
28
|
+
/>
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
})
|
|
32
|
+
}
|
package/dist/storyblok-astro.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(u,h){typeof exports=="object"&&typeof module<"u"?h(exports):typeof define=="function"&&define.amd?define(["exports"],h):(u=typeof globalThis<"u"?globalThis:u||self,h(u.storyblokAstro={}))})(this,function(u){"use strict";function h(r,e,t){const o="virtual:storyblok-init",
|
|
1
|
+
(function(u,h){typeof exports=="object"&&typeof module<"u"?h(exports):typeof define=="function"&&define.amd?define(["exports"],h):(u=typeof globalThis<"u"?globalThis:u||self,h(u.storyblokAstro={}))})(this,function(u){"use strict";function h(r,e,t){const o="virtual:storyblok-init",a="\0"+o;return{name:"vite-plugin-storyblok-init",async resolveId(s){if(s===o)return a},async load(s){if(s===a)return`
|
|
2
2
|
import { storyblokInit, apiPlugin } from "@storyblok/js";
|
|
3
3
|
const { storyblokApi } = storyblokInit({
|
|
4
4
|
accessToken: "${r}",
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
apiOptions: ${JSON.stringify(t)},
|
|
7
7
|
});
|
|
8
8
|
export const storyblokApiInstance = storyblokApi;
|
|
9
|
-
`}}}const x=/[\p{Lu}]/u,R=/[\p{Ll}]/u,k=/^[\p{Lu}](?![\p{Lu}])/gu,v=/([\p{Alpha}\p{N}_]|$)/u,b=/[_.\- ]+/,N=new RegExp("^"+b.source),$=new RegExp(b.source+v.source,"gu"),I=new RegExp("\\d+"+v.source,"gu"),O=(r,e,t,o)=>{let
|
|
9
|
+
`}}}const x=/[\p{Lu}]/u,R=/[\p{Ll}]/u,k=/^[\p{Lu}](?![\p{Lu}])/gu,v=/([\p{Alpha}\p{N}_]|$)/u,b=/[_.\- ]+/,N=new RegExp("^"+b.source),$=new RegExp(b.source+v.source,"gu"),I=new RegExp("\\d+"+v.source,"gu"),O=(r,e,t,o)=>{let a=!1,s=!1,n=!1,f=!1;for(let l=0;l<r.length;l++){const i=r[l];f=l>2?r[l-3]==="-":!0,a&&x.test(i)?(r=r.slice(0,l)+"-"+r.slice(l),a=!1,n=s,s=!0,l++):s&&n&&R.test(i)&&(!f||o)?(r=r.slice(0,l-1)+"-"+r.slice(l-1),n=s,s=!1,a=!0):(a=e(i)===i&&t(i)!==i,n=s,s=t(i)===i&&e(i)!==i)}return r},L=(r,e)=>(k.lastIndex=0,r.replace(k,t=>e(t))),M=(r,e)=>($.lastIndex=0,I.lastIndex=0,r.replace($,(t,o)=>e(o)).replace(I,t=>e(t)));function T(r,e){if(!(typeof r=="string"||Array.isArray(r)))throw new TypeError("Expected the input to be `string | string[]`");if(e={pascalCase:!1,preserveConsecutiveUppercase:!1,...e},Array.isArray(r)?r=r.map(s=>s.trim()).filter(s=>s.length).join("-"):r=r.trim(),r.length===0)return"";const t=e.locale===!1?s=>s.toLowerCase():s=>s.toLocaleLowerCase(e.locale),o=e.locale===!1?s=>s.toUpperCase():s=>s.toLocaleUpperCase(e.locale);return r.length===1?b.test(r)?"":e.pascalCase?o(r):t(r):(r!==t(r)&&(r=O(r,t,o,e.preserveConsecutiveUppercase)),r=r.replace(N,""),r=e.preserveConsecutiveUppercase?L(r,t):t(r),e.pascalCase&&(r=o(r.charAt(0))+r.slice(1)),M(r,o))}function P(r,e,t,o){const a="virtual:storyblok-components",s="\0"+a;return{name:"vite-plugin-storyblok-components",async resolveId(n){if(n===a)return s},async load(n){if(n===s){const f=[],l=[];for await(const[c,d]of Object.entries(e)){const p=await this.resolve("/"+r+"/"+d+".astro");if(p)f.push(`import ${T(c)} from "${p.id}"`);else if(t)l.push(c);else throw new Error(`Component could not be found for blok "${c}"! Does "${"/"+r+"/"+d}.astro" exist?`)}let i="";if(t)if(i=",FallbackComponent",o){const c=await this.resolve("/"+r+"/"+o+".astro");if(!c)throw new Error(`Custom fallback component could not be found. Does "${"/"+r+"/"+o}.astro" exist?`);f.push(`import FallbackComponent from "${c.id}"`)}else f.push("import FallbackComponent from '@storyblok/astro/FallbackComponent.astro';");return`${f.join(";")};export default {${Object.keys(e).filter(c=>!l.includes(c)).map(c=>T(c)).join(",")}${i}}`}}}}function _(r){const e="virtual:storyblok-options",t="\0"+e;return{name:"vite-plugin-storyblok-options",async resolveId(o){if(o===e)return t},async load(o){if(o===t)return`export default ${JSON.stringify(r)}`}}}let w=!1;const E=[],z=r=>new Promise((e,t)=>{if(typeof window>"u"||(window.storyblokRegisterEvent=a=>{if(window.location===window.parent.location){console.warn("You are not in Draft Mode or in the Visual Editor.");return}w?a():E.push(a)},document.getElementById("storyblok-javascript-bridge")))return;const o=document.createElement("script");o.async=!0,o.src=r,o.id="storyblok-javascript-bridge",o.onerror=a=>t(a),o.onload=a=>{E.forEach(s=>s()),w=!0,e(a)},document.getElementsByTagName("head")[0].appendChild(o)});var D=Object.defineProperty,U=(r,e,t)=>e in r?D(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,A=(r,e,t)=>(U(r,typeof e!="symbol"?e+"":e,t),t);const q=function(r,e){const t={};for(const o in r){const a=r[o];e.indexOf(o)>-1&&a!==null&&(t[o]=a)}return t},B=r=>r==="email",F=()=>({singleTag:"hr"}),J=()=>({tag:"blockquote"}),K=()=>({tag:"ul"}),V=r=>({tag:["pre",{tag:"code",attrs:r.attrs}]}),G=()=>({singleTag:"br"}),W=r=>({tag:`h${r.attrs.level}`}),H=r=>({singleTag:[{tag:"img",attrs:q(r.attrs,["src","alt","title"])}]}),Y=()=>({tag:"li"}),Q=()=>({tag:"ol"}),X=()=>({tag:"p"}),Z=r=>({tag:[{tag:"span",attrs:{["data-type"]:"emoji",["data-name"]:r.attrs.name,emoji:r.attrs.emoji}}]}),ee=()=>({tag:"b"}),te=()=>({tag:"strike"}),re=()=>({tag:"u"}),oe=()=>({tag:"strong"}),se=()=>({tag:"code"}),ae=()=>({tag:"i"}),ne=r=>{const e={...r.attrs},{linktype:t="url"}=r.attrs;if(B(t)&&(e.href=`mailto:${e.href}`),e.anchor&&(e.href=`${e.href}#${e.anchor}`,delete e.anchor),e.custom){for(const o in e.custom)e[o]=e.custom[o];delete e.custom}return{tag:[{tag:"a",attrs:e}]}},le=r=>({tag:[{tag:"span",attrs:r.attrs}]}),ie=()=>({tag:"sub"}),ce=()=>({tag:"sup"}),ue=r=>({tag:[{tag:"span",attrs:r.attrs}]}),ge=r=>{var e;return(e=r.attrs)!=null&&e.color?{tag:[{tag:"span",attrs:{style:`background-color:${r.attrs.color};`}}]}:{tag:""}},fe=r=>{var e;return(e=r.attrs)!=null&&e.color?{tag:[{tag:"span",attrs:{style:`color:${r.attrs.color}`}}]}:{tag:""}},C={nodes:{horizontal_rule:F,blockquote:J,bullet_list:K,code_block:V,hard_break:G,heading:W,image:H,list_item:Y,ordered_list:Q,paragraph:X,emoji:Z},marks:{bold:ee,strike:te,underline:re,strong:oe,code:se,italic:ae,link:ne,styled:le,subscript:ie,superscript:ce,anchor:ue,highlight:ge,textStyle:fe}},de=function(r){const e={"&":"&","<":"<",">":">",'"':""","'":"'"},t=/[&<>"']/g,o=RegExp(t.source);return r&&o.test(r)?r.replace(t,a=>e[a]):r};class S{constructor(e){A(this,"marks"),A(this,"nodes"),e||(e=C),this.marks=e.marks||[],this.nodes=e.nodes||[]}addNode(e,t){this.nodes[e]=t}addMark(e,t){this.marks[e]=t}render(e,t={optimizeImages:!1}){if(e&&e.content&&Array.isArray(e.content)){let o="";return e.content.forEach(a=>{o+=this.renderNode(a)}),t.optimizeImages?this.optimizeImages(o,t.optimizeImages):o}return console.warn(`The render method must receive an Object with a "content" field.
|
|
10
10
|
The "content" field must be an array of nodes as the type ISbRichtext.
|
|
11
11
|
ISbRichtext:
|
|
12
12
|
content?: ISbRichtext[]
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
}
|
|
30
30
|
],
|
|
31
31
|
type: 'doc'
|
|
32
|
-
}`),""}optimizeImages(e,t){let o=0,
|
|
32
|
+
}`),""}optimizeImages(e,t){let o=0,a=0,s="",n="";typeof t!="boolean"&&(typeof t.width=="number"&&t.width>0&&(s+=`width="${t.width}" `,o=t.width),typeof t.height=="number"&&t.height>0&&(s+=`height="${t.height}" `,a=t.height),(t.loading==="lazy"||t.loading==="eager")&&(s+=`loading="${t.loading}" `),typeof t.class=="string"&&t.class.length>0&&(s+=`class="${t.class}" `),t.filters&&(typeof t.filters.blur=="number"&&t.filters.blur>=0&&t.filters.blur<=100&&(n+=`:blur(${t.filters.blur})`),typeof t.filters.brightness=="number"&&t.filters.brightness>=-100&&t.filters.brightness<=100&&(n+=`:brightness(${t.filters.brightness})`),t.filters.fill&&(t.filters.fill.match(/[0-9A-Fa-f]{6}/g)||t.filters.fill==="transparent")&&(n+=`:fill(${t.filters.fill})`),t.filters.format&&["webp","png","jpeg"].includes(t.filters.format)&&(n+=`:format(${t.filters.format})`),typeof t.filters.grayscale=="boolean"&&t.filters.grayscale&&(n+=":grayscale()"),typeof t.filters.quality=="number"&&t.filters.quality>=0&&t.filters.quality<=100&&(n+=`:quality(${t.filters.quality})`),t.filters.rotate&&[90,180,270].includes(t.filters.rotate)&&(n+=`:rotate(${t.filters.rotate})`),n.length>0&&(n="/filters"+n))),s.length>0&&(e=e.replace(/<img/g,`<img ${s.trim()}`));const f=o>0||a>0||n.length>0?`${o}x${a}${n}`:"";return e=e.replace(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g,`a.storyblok.com/f/$1/$2.$3/m/${f}`),typeof t!="boolean"&&(t.sizes||t.srcset)&&(e=e.replace(/<img.*?src=["|'](.*?)["|']/g,l=>{var i,c;const d=l.match(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g);if(d&&d.length>0){const p={srcset:(i=t.srcset)==null?void 0:i.map(g=>{if(typeof g=="number")return`//${d}/m/${g}x0${n} ${g}w`;if(typeof g=="object"&&g.length===2){let y=0,j=0;return typeof g[0]=="number"&&(y=g[0]),typeof g[1]=="number"&&(j=g[1]),`//${d}/m/${y}x${j}${n} ${y}w`}}).join(", "),sizes:(c=t.sizes)==null?void 0:c.map(g=>g).join(", ")};let m="";return p.srcset&&(m+=`srcset="${p.srcset}" `),p.sizes&&(m+=`sizes="${p.sizes}" `),l.replace(/<img/g,`<img ${m.trim()}`)}return l})),e}renderNode(e){const t=[];e.marks&&e.marks.forEach(a=>{const s=this.getMatchingMark(a);s&&s.tag!==""&&t.push(this.renderOpeningTag(s.tag))});const o=this.getMatchingNode(e);return o&&o.tag&&t.push(this.renderOpeningTag(o.tag)),e.content?e.content.forEach(a=>{t.push(this.renderNode(a))}):e.text?t.push(de(e.text)):o&&o.singleTag?t.push(this.renderTag(o.singleTag," /")):o&&o.html?t.push(o.html):e.type==="emoji"&&t.push(this.renderEmoji(e)),o&&o.tag&&t.push(this.renderClosingTag(o.tag)),e.marks&&e.marks.slice(0).reverse().forEach(a=>{const s=this.getMatchingMark(a);s&&s.tag!==""&&t.push(this.renderClosingTag(s.tag))}),t.join("")}renderTag(e,t){return e.constructor===String?`<${e}${t}>`:e.map(o=>{if(o.constructor===String)return`<${o}${t}>`;{let a=`<${o.tag}`;if(o.attrs)for(const s in o.attrs){const n=o.attrs[s];n!==null&&(a+=` ${s}="${n}"`)}return`${a}${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){const t=this.nodes[e.type];if(typeof t=="function")return t(e)}getMatchingMark(e){const t=this.marks[e.type];if(typeof t=="function")return t(e)}renderEmoji(e){if(e.attrs.emoji)return e.attrs.emoji;const t=[{tag:"img",attrs:{src:e.attrs.fallbackImage,draggable:"false",loading:"lazy",align:"absmiddle"}}];return this.renderTag(t," /")}}const pe=r=>{if(typeof r!="object"||typeof r._editable>"u")return{};const e=JSON.parse(r._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return{"data-blok-c":JSON.stringify(e),"data-blok-uid":e.id+"-"+e.uid}};let he;const be="https://app.storyblok.com/f/storyblok-v2-latest.js",me=(r,e)=>{r.addNode("blok",t=>{let o="";return t.attrs.body.forEach(a=>{o+=e(a.component,a)}),{html:o}})},ye=r=>{var e,t;return!r||((e=r==null?void 0:r.content)==null?void 0:e[0].type)!=="blok"&&!((t=r==null?void 0:r.content)!=null&&t[0].content)},ke=(r,e,t)=>{let o=t||he;if(!o){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return ye(r)?"":(e&&(o=new S(e.schema),e.resolver&&me(o,e.resolver)),o.render(r))},ve=()=>z(be);function $e(){return globalThis.storyblokApiInstance||console.error("storyblokApiInstance has not been initialized correctly"),globalThis.storyblokApiInstance}function Ie(r,e){const t=globalThis.storyblokApiInstance.richTextResolver;if(!t){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return ke(r,e,t)}function Te(r){const e={useCustomApi:!1,bridge:!0,componentsDir:"src",enableFallbackComponent:!1,...r};return{name:"@storyblok/astro",hooks:{"astro:config:setup":({injectScript:t,updateConfig:o})=>{o({vite:{plugins:[h(e.accessToken,e.useCustomApi,e.apiOptions),P(e.componentsDir,e.components,e.enableFallbackComponent,e.customFallbackComponent),_(e)]}}),t("page-ssr",`
|
|
33
33
|
import { storyblokApiInstance } from "virtual:storyblok-init";
|
|
34
34
|
globalThis.storyblokApiInstance = storyblokApiInstance;
|
|
35
35
|
`),e.bridge&&t("page",`
|
package/dist/storyblok-astro.mjs
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
function T(r, e, t) {
|
|
2
|
-
const
|
|
2
|
+
const o = "virtual:storyblok-init", a = "\0" + o;
|
|
3
3
|
return {
|
|
4
4
|
name: "vite-plugin-storyblok-init",
|
|
5
|
-
async resolveId(
|
|
6
|
-
if (
|
|
5
|
+
async resolveId(s) {
|
|
6
|
+
if (s === o)
|
|
7
7
|
return a;
|
|
8
8
|
},
|
|
9
|
-
async load(
|
|
10
|
-
if (
|
|
9
|
+
async load(s) {
|
|
10
|
+
if (s === a)
|
|
11
11
|
return `
|
|
12
12
|
import { storyblokInit, apiPlugin } from "@storyblok/js";
|
|
13
13
|
const { storyblokApi } = storyblokInit({
|
|
@@ -20,14 +20,14 @@ function T(r, e, t) {
|
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
22
|
}
|
|
23
|
-
const x = /[\p{Lu}]/u, A = /[\p{Ll}]/u, y = /^[\p{Lu}](?![\p{Lu}])/gu, C = /([\p{Alpha}\p{N}_]|$)/u, m = /[_.\- ]+/, S = new RegExp("^" + m.source), k = new RegExp(m.source + C.source, "gu"), $ = new RegExp("\\d+" + C.source, "gu"), j = (r, e, t,
|
|
24
|
-
let a = !1,
|
|
23
|
+
const x = /[\p{Lu}]/u, A = /[\p{Ll}]/u, y = /^[\p{Lu}](?![\p{Lu}])/gu, C = /([\p{Alpha}\p{N}_]|$)/u, m = /[_.\- ]+/, S = new RegExp("^" + m.source), k = new RegExp(m.source + C.source, "gu"), $ = new RegExp("\\d+" + C.source, "gu"), j = (r, e, t, o) => {
|
|
24
|
+
let a = !1, s = !1, n = !1, u = !1;
|
|
25
25
|
for (let l = 0; l < r.length; l++) {
|
|
26
26
|
const i = r[l];
|
|
27
|
-
u = l > 2 ? r[l - 3] === "-" : !0, a && x.test(i) ? (r = r.slice(0, l) + "-" + r.slice(l), a = !1, n =
|
|
27
|
+
u = l > 2 ? r[l - 3] === "-" : !0, a && x.test(i) ? (r = r.slice(0, l) + "-" + r.slice(l), a = !1, n = s, s = !0, l++) : s && n && A.test(i) && (!u || o) ? (r = r.slice(0, l - 1) + "-" + r.slice(l - 1), n = s, s = !1, a = !0) : (a = e(i) === i && t(i) !== i, n = s, s = t(i) === i && e(i) !== i);
|
|
28
28
|
}
|
|
29
29
|
return r;
|
|
30
|
-
}, R = (r, e) => (y.lastIndex = 0, r.replace(y, (t) => e(t))), N = (r, e) => (k.lastIndex = 0, $.lastIndex = 0, r.replace(k, (t,
|
|
30
|
+
}, R = (r, e) => (y.lastIndex = 0, r.replace(y, (t) => e(t))), N = (r, e) => (k.lastIndex = 0, $.lastIndex = 0, r.replace(k, (t, o) => e(o)).replace($, (t) => e(t)));
|
|
31
31
|
function v(r, e) {
|
|
32
32
|
if (!(typeof r == "string" || Array.isArray(r)))
|
|
33
33
|
throw new TypeError("Expected the input to be `string | string[]`");
|
|
@@ -35,21 +35,21 @@ function v(r, e) {
|
|
|
35
35
|
pascalCase: !1,
|
|
36
36
|
preserveConsecutiveUppercase: !1,
|
|
37
37
|
...e
|
|
38
|
-
}, Array.isArray(r) ? r = r.map((
|
|
38
|
+
}, Array.isArray(r) ? r = r.map((s) => s.trim()).filter((s) => s.length).join("-") : r = r.trim(), r.length === 0)
|
|
39
39
|
return "";
|
|
40
|
-
const t = e.locale === !1 ? (
|
|
41
|
-
return r.length === 1 ? m.test(r) ? "" : e.pascalCase ?
|
|
40
|
+
const t = e.locale === !1 ? (s) => s.toLowerCase() : (s) => s.toLocaleLowerCase(e.locale), o = e.locale === !1 ? (s) => s.toUpperCase() : (s) => s.toLocaleUpperCase(e.locale);
|
|
41
|
+
return r.length === 1 ? m.test(r) ? "" : e.pascalCase ? o(r) : t(r) : (r !== t(r) && (r = j(r, t, o, e.preserveConsecutiveUppercase)), r = r.replace(S, ""), r = e.preserveConsecutiveUppercase ? R(r, t) : t(r), e.pascalCase && (r = o(r.charAt(0)) + r.slice(1)), N(r, o));
|
|
42
42
|
}
|
|
43
|
-
function O(r, e, t,
|
|
44
|
-
const a = "virtual:storyblok-components",
|
|
43
|
+
function O(r, e, t, o) {
|
|
44
|
+
const a = "virtual:storyblok-components", s = "\0" + a;
|
|
45
45
|
return {
|
|
46
46
|
name: "vite-plugin-storyblok-components",
|
|
47
47
|
async resolveId(n) {
|
|
48
48
|
if (n === a)
|
|
49
|
-
return
|
|
49
|
+
return s;
|
|
50
50
|
},
|
|
51
51
|
async load(n) {
|
|
52
|
-
if (n ===
|
|
52
|
+
if (n === s) {
|
|
53
53
|
const u = [], l = [];
|
|
54
54
|
for await (const [c, f] of Object.entries(e)) {
|
|
55
55
|
const p = await this.resolve(
|
|
@@ -66,13 +66,13 @@ function O(r, e, t, s) {
|
|
|
66
66
|
}
|
|
67
67
|
let i = "";
|
|
68
68
|
if (t)
|
|
69
|
-
if (i = ",FallbackComponent",
|
|
69
|
+
if (i = ",FallbackComponent", o) {
|
|
70
70
|
const c = await this.resolve(
|
|
71
|
-
"/" + r + "/" +
|
|
71
|
+
"/" + r + "/" + o + ".astro"
|
|
72
72
|
);
|
|
73
73
|
if (!c)
|
|
74
74
|
throw new Error(
|
|
75
|
-
`Custom fallback component could not be found. Does "${"/" + r + "/" +
|
|
75
|
+
`Custom fallback component could not be found. Does "${"/" + r + "/" + o}.astro" exist?`
|
|
76
76
|
);
|
|
77
77
|
u.push(
|
|
78
78
|
`import FallbackComponent from "${c.id}"`
|
|
@@ -90,12 +90,12 @@ function L(r) {
|
|
|
90
90
|
const e = "virtual:storyblok-options", t = "\0" + e;
|
|
91
91
|
return {
|
|
92
92
|
name: "vite-plugin-storyblok-options",
|
|
93
|
-
async resolveId(
|
|
94
|
-
if (
|
|
93
|
+
async resolveId(o) {
|
|
94
|
+
if (o === e)
|
|
95
95
|
return t;
|
|
96
96
|
},
|
|
97
|
-
async load(
|
|
98
|
-
if (
|
|
97
|
+
async load(o) {
|
|
98
|
+
if (o === t)
|
|
99
99
|
return `export default ${JSON.stringify(r)}`;
|
|
100
100
|
}
|
|
101
101
|
};
|
|
@@ -110,17 +110,17 @@ const w = [], z = (r) => new Promise((e, t) => {
|
|
|
110
110
|
I ? a() : w.push(a);
|
|
111
111
|
}, document.getElementById("storyblok-javascript-bridge")))
|
|
112
112
|
return;
|
|
113
|
-
const
|
|
114
|
-
|
|
115
|
-
w.forEach((
|
|
116
|
-
}, document.getElementsByTagName("head")[0].appendChild(
|
|
113
|
+
const o = document.createElement("script");
|
|
114
|
+
o.async = !0, o.src = r, o.id = "storyblok-javascript-bridge", o.onerror = (a) => t(a), o.onload = (a) => {
|
|
115
|
+
w.forEach((s) => s()), I = !0, e(a);
|
|
116
|
+
}, document.getElementsByTagName("head")[0].appendChild(o);
|
|
117
117
|
});
|
|
118
118
|
var M = Object.defineProperty, P = (r, e, t) => e in r ? M(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, E = (r, e, t) => (P(r, typeof e != "symbol" ? e + "" : e, t), t);
|
|
119
119
|
const _ = function(r, e) {
|
|
120
120
|
const t = {};
|
|
121
|
-
for (const
|
|
122
|
-
const a = r[
|
|
123
|
-
e.indexOf(
|
|
121
|
+
for (const o in r) {
|
|
122
|
+
const a = r[o];
|
|
123
|
+
e.indexOf(o) > -1 && a !== null && (t[o] = a);
|
|
124
124
|
}
|
|
125
125
|
return t;
|
|
126
126
|
}, D = (r) => r === "email", U = () => ({
|
|
@@ -177,11 +177,11 @@ const _ = function(r, e) {
|
|
|
177
177
|
tag: "code"
|
|
178
178
|
}), re = () => ({
|
|
179
179
|
tag: "i"
|
|
180
|
-
}),
|
|
180
|
+
}), oe = (r) => {
|
|
181
181
|
const e = { ...r.attrs }, { linktype: t = "url" } = r.attrs;
|
|
182
182
|
if (D(t) && (e.href = `mailto:${e.href}`), e.anchor && (e.href = `${e.href}#${e.anchor}`, delete e.anchor), e.custom) {
|
|
183
|
-
for (const
|
|
184
|
-
e[
|
|
183
|
+
for (const o in e.custom)
|
|
184
|
+
e[o] = e.custom[o];
|
|
185
185
|
delete e.custom;
|
|
186
186
|
}
|
|
187
187
|
return {
|
|
@@ -192,7 +192,7 @@ const _ = function(r, e) {
|
|
|
192
192
|
}
|
|
193
193
|
]
|
|
194
194
|
};
|
|
195
|
-
},
|
|
195
|
+
}, se = (r) => ({
|
|
196
196
|
tag: [
|
|
197
197
|
{
|
|
198
198
|
tag: "span",
|
|
@@ -259,8 +259,8 @@ const _ = function(r, e) {
|
|
|
259
259
|
strong: ee,
|
|
260
260
|
code: te,
|
|
261
261
|
italic: re,
|
|
262
|
-
link:
|
|
263
|
-
styled:
|
|
262
|
+
link: oe,
|
|
263
|
+
styled: se,
|
|
264
264
|
subscript: ae,
|
|
265
265
|
superscript: ne,
|
|
266
266
|
anchor: le,
|
|
@@ -274,8 +274,8 @@ const _ = function(r, e) {
|
|
|
274
274
|
">": ">",
|
|
275
275
|
'"': """,
|
|
276
276
|
"'": "'"
|
|
277
|
-
}, t = /[&<>"']/g,
|
|
278
|
-
return r &&
|
|
277
|
+
}, t = /[&<>"']/g, o = RegExp(t.source);
|
|
278
|
+
return r && o.test(r) ? r.replace(t, (a) => e[a]) : r;
|
|
279
279
|
};
|
|
280
280
|
class fe {
|
|
281
281
|
constructor(e) {
|
|
@@ -289,10 +289,10 @@ class fe {
|
|
|
289
289
|
}
|
|
290
290
|
render(e, t = { optimizeImages: !1 }) {
|
|
291
291
|
if (e && e.content && Array.isArray(e.content)) {
|
|
292
|
-
let
|
|
292
|
+
let o = "";
|
|
293
293
|
return e.content.forEach((a) => {
|
|
294
|
-
|
|
295
|
-
}), t.optimizeImages ? this.optimizeImages(
|
|
294
|
+
o += this.renderNode(a);
|
|
295
|
+
}), t.optimizeImages ? this.optimizeImages(o, t.optimizeImages) : o;
|
|
296
296
|
}
|
|
297
297
|
return console.warn(
|
|
298
298
|
`The render method must receive an Object with a "content" field.
|
|
@@ -322,9 +322,9 @@ class fe {
|
|
|
322
322
|
), "";
|
|
323
323
|
}
|
|
324
324
|
optimizeImages(e, t) {
|
|
325
|
-
let
|
|
326
|
-
typeof t != "boolean" && (typeof t.width == "number" && t.width > 0 && (
|
|
327
|
-
const u =
|
|
325
|
+
let o = 0, a = 0, s = "", n = "";
|
|
326
|
+
typeof t != "boolean" && (typeof t.width == "number" && t.width > 0 && (s += `width="${t.width}" `, o = t.width), typeof t.height == "number" && t.height > 0 && (s += `height="${t.height}" `, a = t.height), (t.loading === "lazy" || t.loading === "eager") && (s += `loading="${t.loading}" `), typeof t.class == "string" && t.class.length > 0 && (s += `class="${t.class}" `), t.filters && (typeof t.filters.blur == "number" && t.filters.blur >= 0 && t.filters.blur <= 100 && (n += `:blur(${t.filters.blur})`), typeof t.filters.brightness == "number" && t.filters.brightness >= -100 && t.filters.brightness <= 100 && (n += `:brightness(${t.filters.brightness})`), t.filters.fill && (t.filters.fill.match(/[0-9A-Fa-f]{6}/g) || t.filters.fill === "transparent") && (n += `:fill(${t.filters.fill})`), t.filters.format && ["webp", "png", "jpeg"].includes(t.filters.format) && (n += `:format(${t.filters.format})`), typeof t.filters.grayscale == "boolean" && t.filters.grayscale && (n += ":grayscale()"), typeof t.filters.quality == "number" && t.filters.quality >= 0 && t.filters.quality <= 100 && (n += `:quality(${t.filters.quality})`), t.filters.rotate && [90, 180, 270].includes(t.filters.rotate) && (n += `:rotate(${t.filters.rotate})`), n.length > 0 && (n = "/filters" + n))), s.length > 0 && (e = e.replace(/<img/g, `<img ${s.trim()}`));
|
|
327
|
+
const u = o > 0 || a > 0 || n.length > 0 ? `${o}x${a}${n}` : "";
|
|
328
328
|
return e = e.replace(
|
|
329
329
|
/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g,
|
|
330
330
|
`a.storyblok.com/f/$1/$2.$3/m/${u}`
|
|
@@ -354,27 +354,27 @@ class fe {
|
|
|
354
354
|
renderNode(e) {
|
|
355
355
|
const t = [];
|
|
356
356
|
e.marks && e.marks.forEach((a) => {
|
|
357
|
-
const
|
|
358
|
-
|
|
357
|
+
const s = this.getMatchingMark(a);
|
|
358
|
+
s && s.tag !== "" && t.push(this.renderOpeningTag(s.tag));
|
|
359
359
|
});
|
|
360
|
-
const
|
|
361
|
-
return
|
|
360
|
+
const o = this.getMatchingNode(e);
|
|
361
|
+
return o && o.tag && t.push(this.renderOpeningTag(o.tag)), e.content ? e.content.forEach((a) => {
|
|
362
362
|
t.push(this.renderNode(a));
|
|
363
|
-
}) : e.text ? t.push(ue(e.text)) :
|
|
364
|
-
const
|
|
365
|
-
|
|
363
|
+
}) : e.text ? t.push(ue(e.text)) : o && o.singleTag ? t.push(this.renderTag(o.singleTag, " /")) : o && o.html ? t.push(o.html) : e.type === "emoji" && t.push(this.renderEmoji(e)), o && o.tag && t.push(this.renderClosingTag(o.tag)), e.marks && e.marks.slice(0).reverse().forEach((a) => {
|
|
364
|
+
const s = this.getMatchingMark(a);
|
|
365
|
+
s && s.tag !== "" && t.push(this.renderClosingTag(s.tag));
|
|
366
366
|
}), t.join("");
|
|
367
367
|
}
|
|
368
368
|
renderTag(e, t) {
|
|
369
|
-
return e.constructor === String ? `<${e}${t}>` : e.map((
|
|
370
|
-
if (
|
|
371
|
-
return `<${
|
|
369
|
+
return e.constructor === String ? `<${e}${t}>` : e.map((o) => {
|
|
370
|
+
if (o.constructor === String)
|
|
371
|
+
return `<${o}${t}>`;
|
|
372
372
|
{
|
|
373
|
-
let a = `<${
|
|
374
|
-
if (
|
|
375
|
-
for (const
|
|
376
|
-
const n =
|
|
377
|
-
n !== null && (a += ` ${
|
|
373
|
+
let a = `<${o.tag}`;
|
|
374
|
+
if (o.attrs)
|
|
375
|
+
for (const s in o.attrs) {
|
|
376
|
+
const n = o.attrs[s];
|
|
377
|
+
n !== null && (a += ` ${s}="${n}"`);
|
|
378
378
|
}
|
|
379
379
|
return `${a}${t}>`;
|
|
380
380
|
}
|
|
@@ -427,25 +427,25 @@ const ye = (r) => {
|
|
|
427
427
|
let pe;
|
|
428
428
|
const de = "https://app.storyblok.com/f/storyblok-v2-latest.js", he = (r, e) => {
|
|
429
429
|
r.addNode("blok", (t) => {
|
|
430
|
-
let
|
|
430
|
+
let o = "";
|
|
431
431
|
return t.attrs.body.forEach((a) => {
|
|
432
|
-
|
|
432
|
+
o += e(a.component, a);
|
|
433
433
|
}), {
|
|
434
|
-
html:
|
|
434
|
+
html: o
|
|
435
435
|
};
|
|
436
436
|
});
|
|
437
437
|
}, me = (r) => {
|
|
438
438
|
var e, t;
|
|
439
439
|
return !r || ((e = r == null ? void 0 : r.content) == null ? void 0 : e[0].type) !== "blok" && !((t = r == null ? void 0 : r.content) != null && t[0].content);
|
|
440
440
|
}, be = (r, e, t) => {
|
|
441
|
-
let
|
|
442
|
-
if (!
|
|
441
|
+
let o = t || pe;
|
|
442
|
+
if (!o) {
|
|
443
443
|
console.error(
|
|
444
444
|
"Please initialize the Storyblok SDK before calling the renderRichText function"
|
|
445
445
|
);
|
|
446
446
|
return;
|
|
447
447
|
}
|
|
448
|
-
return me(r) ? "" : (e && (
|
|
448
|
+
return me(r) ? "" : (e && (o = new fe(e.schema), e.resolver && he(o, e.resolver)), o.render(r));
|
|
449
449
|
}, ke = () => z(de);
|
|
450
450
|
function $e() {
|
|
451
451
|
return globalThis.storyblokApiInstance || console.error("storyblokApiInstance has not been initialized correctly"), globalThis.storyblokApiInstance;
|
|
@@ -471,8 +471,8 @@ function Ie(r) {
|
|
|
471
471
|
return {
|
|
472
472
|
name: "@storyblok/astro",
|
|
473
473
|
hooks: {
|
|
474
|
-
"astro:config:setup": ({ injectScript: t, updateConfig:
|
|
475
|
-
|
|
474
|
+
"astro:config:setup": ({ injectScript: t, updateConfig: o }) => {
|
|
475
|
+
o({
|
|
476
476
|
vite: {
|
|
477
477
|
plugins: [
|
|
478
478
|
T(
|
package/dist/types/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import type { AstroIntegration } from "astro";
|
|
|
3
3
|
import type { ISbConfig, ISbRichtext, SbRichTextOptions } from "./types";
|
|
4
4
|
export { storyblokEditable, loadStoryblokBridge, RichTextResolver, RichTextSchema, } from "@storyblok/js";
|
|
5
5
|
export declare function useStoryblokApi(): StoryblokClient;
|
|
6
|
-
export declare function renderRichText(data
|
|
6
|
+
export declare function renderRichText(data?: ISbRichtext, options?: SbRichTextOptions): string;
|
|
7
7
|
export type IntegrationOptions = {
|
|
8
8
|
/**
|
|
9
9
|
* The access token from your space.
|
package/package.json
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storyblok/astro",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.4.1",
|
|
4
4
|
"description": "Official Astro integration for the Storyblok Headless CMS",
|
|
5
5
|
"main": "./dist/storyblok-astro.js",
|
|
6
6
|
"module": "./dist/storyblok-astro.mjs",
|
|
7
7
|
"files": [
|
|
8
8
|
"dist",
|
|
9
9
|
"StoryblokComponent.astro",
|
|
10
|
-
"FallbackComponent.astro"
|
|
10
|
+
"FallbackComponent.astro",
|
|
11
|
+
"RichTextRenderer.astro"
|
|
11
12
|
],
|
|
12
13
|
"exports": {
|
|
13
14
|
".": {
|
|
@@ -16,7 +17,8 @@
|
|
|
16
17
|
"require": "./dist/storyblok-astro.js"
|
|
17
18
|
},
|
|
18
19
|
"./StoryblokComponent.astro": "./StoryblokComponent.astro",
|
|
19
|
-
"./FallbackComponent.astro": "./FallbackComponent.astro"
|
|
20
|
+
"./FallbackComponent.astro": "./FallbackComponent.astro",
|
|
21
|
+
"./RichTextRenderer.astro": "./RichTextRenderer.astro"
|
|
20
22
|
},
|
|
21
23
|
"types": "./dist/types/index.d.ts",
|
|
22
24
|
"scripts": {
|
|
@@ -31,15 +33,15 @@
|
|
|
31
33
|
"prepublishOnly": "npm run build && cp ../README.md ./"
|
|
32
34
|
},
|
|
33
35
|
"dependencies": {
|
|
34
|
-
"@storyblok/js": "^2.2.
|
|
36
|
+
"@storyblok/js": "^2.2.1",
|
|
35
37
|
"camelcase": "^7.0.1"
|
|
36
38
|
},
|
|
37
39
|
"devDependencies": {
|
|
38
40
|
"@cypress/vite-dev-server": "^5.0.5",
|
|
39
41
|
"@rollup/plugin-dynamic-import-vars": "^2.0.3",
|
|
40
42
|
"@types/node": "20.3.1",
|
|
41
|
-
"astro": "2.
|
|
42
|
-
"cypress": "^12.
|
|
43
|
+
"astro": "2.7.0",
|
|
44
|
+
"cypress": "^12.15.0",
|
|
43
45
|
"eslint-plugin-cypress": "^2.13.3",
|
|
44
46
|
"start-server-and-test": "^2.0.0",
|
|
45
47
|
"typescript": "5.1.3",
|