@storyblok/richtext
Advanced tools
Comparing version 0.1.0 to 0.2.0
import { Node, SbRichtextOptions } from './types'; | ||
export declare function RichTextResolver<T>(options: SbRichtextOptions<T>): { | ||
export declare function richTextResolver<T>(options: SbRichtextOptions<T>): { | ||
render: (node: Node<T>) => T; | ||
}; |
@@ -11,11 +11,11 @@ /** | ||
return { src: e, attrs: {} }; | ||
let l = 0, S = 0; | ||
let l = 0, d = 0; | ||
const m = {}, s = []; | ||
function h(c, g, $, n, d) { | ||
typeof c != "number" || c <= g || c >= $ ? console.warn(`[SbRichText] - ${n.charAt(0).toUpperCase() + n.slice(1)} value must be a number between ${g} and ${$} (inclusive)`) : d.push(`${n}(${c})`); | ||
function h(c, g, $, n, R) { | ||
typeof c != "number" || c <= g || c >= $ ? console.warn(`[SbRichText] - ${n.charAt(0).toUpperCase() + n.slice(1)} value must be a number between ${g} and ${$} (inclusive)`) : R.push(`${n}(${c})`); | ||
} | ||
if (typeof r == "object") { | ||
if (typeof r.width == "number" && r.width > 0 ? (m.width = r.width, l = r.width) : console.warn("[SbRichText] - Width value must be a number greater than 0"), r.height && typeof r.height == "number" && r.height > 0 ? (m.height = r.height, S = r.height) : console.warn("[SbRichText] - Height value must be a number greater than 0"), r.loading && ["lazy", "eager"].includes(r.loading) && (m.loading = r.loading), r.class && (m.class = r.class), r.filters) { | ||
const { filters: c } = r || {}, { blur: g, brightness: $, fill: n, format: d, grayscale: O, quality: I, rotate: L } = c || {}; | ||
g && h(g, 0, 100, "blur", s), I && h(I, 0, 100, "quality", s), $ && h($, 0, 100, "brightness", s), n && s.push(`fill(${n})`), O && s.push("grayscale()"), L && [0, 90, 180, 270].includes(r.filters.rotate || 0) && s.push(`rotate(${L})`), d && ["webp", "png", "jpeg"].includes(d) && s.push(`format(${d})`); | ||
if (typeof r.width == "number" && r.width > 0 ? (m.width = r.width, l = r.width) : console.warn("[SbRichText] - Width value must be a number greater than 0"), r.height && typeof r.height == "number" && r.height > 0 ? (m.height = r.height, d = r.height) : console.warn("[SbRichText] - Height value must be a number greater than 0"), r.loading && ["lazy", "eager"].includes(r.loading) && (m.loading = r.loading), r.class && (m.class = r.class), r.filters) { | ||
const { filters: c } = r || {}, { blur: g, brightness: $, fill: n, format: R, grayscale: O, quality: I, rotate: L } = c || {}; | ||
g && h(g, 0, 100, "blur", s), I && h(I, 0, 100, "quality", s), $ && h($, 0, 100, "brightness", s), n && s.push(`fill(${n})`), O && s.push("grayscale()"), L && [0, 90, 180, 270].includes(r.filters.rotate || 0) && s.push(`rotate(${L})`), R && ["webp", "png", "jpeg"].includes(R) && s.push(`format(${R})`); | ||
} | ||
@@ -32,3 +32,3 @@ r.srcset && (m.srcset = r.srcset.map((c) => { | ||
let E = `${e}/m/`; | ||
return l > 0 && S > 0 && (E = `${E}${l}x${S}/`), s.length > 0 && (E = `${E}filters:${s.join(":")}`), { | ||
return l > 0 && d > 0 && (E = `${E}${l}x${d}/`), s.length > 0 && (E = `${E}filters:${s.join(":")}`), { | ||
src: E, | ||
@@ -43,4 +43,4 @@ attrs: m | ||
function D(e, r = {}, l) { | ||
const S = P(r); | ||
return `<${S ? `${e} ${S}` : e}>${Array.isArray(l) ? l.join("") : l || ""}</${e}>`; | ||
const d = P(r); | ||
return `<${d ? `${e} ${d}` : e}>${Array.isArray(l) ? l.join("") : l || ""}</${e}>`; | ||
} | ||
@@ -51,3 +51,3 @@ function G(e) { | ||
renderFn: l = D, | ||
textFn: S = y, | ||
textFn: d = y, | ||
resolvers: m = {}, | ||
@@ -57,6 +57,6 @@ optimizeImages: s = !1 | ||
const { src: i, alt: a, ...f } = t.attrs || {}; | ||
let b = i, R = {}; | ||
let b = i, S = {}; | ||
if (s) { | ||
const { src: H, attrs: _ } = x(i, s); | ||
b = H, R = _; | ||
b = H, S = _; | ||
} | ||
@@ -68,3 +68,3 @@ const C = { | ||
...f, | ||
...R | ||
...S | ||
}; | ||
@@ -92,26 +92,26 @@ return l("img", C, ""); | ||
key: `${t}-${r}` | ||
} : { ...f, key: `${t}-${r}` }, a), d = (t) => v(t), O = (t) => { | ||
} : { ...f, key: `${t}-${r}` }, a), R = (t) => v(t), O = (t) => { | ||
const { marks: i, ...a } = t; | ||
return "text" in t ? i ? i.reduce( | ||
(f, b) => d({ ...b, text: f }), | ||
(f, b) => R({ ...b, text: f }), | ||
// Fix: Ensure render function returns a string | ||
d({ ...a, children: a.children }) | ||
R({ ...a, children: a.children }) | ||
// Fix: Cast children to string | ||
) : S(a.text) : ""; | ||
) : d(a.text) : ""; | ||
}, I = (t) => { | ||
const { linktype: i, href: a, anchor: f, ...b } = t.attrs || {}; | ||
let R = ""; | ||
let S = ""; | ||
switch (i) { | ||
case A.ASSET: | ||
case A.URL: | ||
R = a; | ||
S = a; | ||
break; | ||
case A.EMAIL: | ||
R = `mailto:${a}`; | ||
S = `mailto:${a}`; | ||
break; | ||
case A.STORY: | ||
R = a; | ||
S = a; | ||
break; | ||
} | ||
return f && (R = `${R}#${f}`), l("a", { ...b, href: R, key: `a-${r}` }, t.text); | ||
return f && (S = `${S}#${f}`), l("a", { ...b, href: S, key: `a-${r}` }, t.text); | ||
}, L = (t) => { | ||
@@ -180,4 +180,4 @@ var i, a; | ||
o as MarkTypes, | ||
G as RichTextResolver, | ||
N as TextTypes | ||
N as TextTypes, | ||
G as richTextResolver | ||
}; |
@@ -7,2 +7,2 @@ /** | ||
*/ | ||
(function(m,l){typeof exports=="object"&&typeof module<"u"?l(exports):typeof define=="function"&&define.amd?define(["exports"],l):(m=typeof globalThis<"u"?globalThis:m||self,l(m.StoryblokRichtext={}))})(this,function(m){"use strict";var l=(e=>(e.DOCUMENT="doc",e.HEADING="heading",e.PARAGRAPH="paragraph",e.QUOTE="blockquote",e.OL_LIST="ordered_list",e.UL_LIST="bullet_list",e.LIST_ITEM="list_item",e.CODE_BLOCK="code_block",e.HR="horizontal_rule",e.BR="hard_break",e.IMAGE="image",e.EMOJI="emoji",e.COMPONENT="blok",e))(l||{}),o=(e=>(e.BOLD="bold",e.STRONG="strong",e.STRIKE="strike",e.UNDERLINE="underline",e.ITALIC="italic",e.CODE="code",e.LINK="link",e.ANCHOR="anchor",e.STYLED="styled",e.SUPERSCRIPT="superscript",e.SUBSCRIPT="subscript",e.TEXT_STYLE="textStyle",e.HIGHLIGHT="highlight",e))(o||{}),A=(e=>(e.TEXT="text",e))(A||{}),j=(e=>(e.SELF="_self",e.BLANK="_blank",e))(j||{}),T=(e=>(e.URL="url",e.STORY="story",e.ASSET="asset",e.EMAIL="email",e))(T||{});function C(e,r){if(!r)return{src:e,attrs:{}};let a=0,S=0;const g={},c=[];function f(u,d,$,s,E){typeof u!="number"||u<=d||u>=$?console.warn(`[SbRichText] - ${s.charAt(0).toUpperCase()+s.slice(1)} value must be a number between ${d} and ${$} (inclusive)`):E.push(`${s}(${u})`)}if(typeof r=="object"){if(typeof r.width=="number"&&r.width>0?(g.width=r.width,a=r.width):console.warn("[SbRichText] - Width value must be a number greater than 0"),r.height&&typeof r.height=="number"&&r.height>0?(g.height=r.height,S=r.height):console.warn("[SbRichText] - Height value must be a number greater than 0"),r.loading&&["lazy","eager"].includes(r.loading)&&(g.loading=r.loading),r.class&&(g.class=r.class),r.filters){const{filters:u}=r||{},{blur:d,brightness:$,fill:s,format:E,grayscale:O,quality:L,rotate:v}=u||{};d&&f(d,0,100,"blur",c),L&&f(L,0,100,"quality",c),$&&f($,0,100,"brightness",c),s&&c.push(`fill(${s})`),O&&c.push("grayscale()"),v&&[0,90,180,270].includes(r.filters.rotate||0)&&c.push(`rotate(${v})`),E&&["webp","png","jpeg"].includes(E)&&c.push(`format(${E})`)}r.srcset&&(g.srcset=r.srcset.map(u=>{if(typeof u=="number")return`${e}/m/${u}x0/${c.length>0?"filters:"+c.join(":"):""} ${u}w`;if(Array.isArray(u)&&u.length===2){const[d,$]=u;return`${e}/m/${d}x${$}/${c.length>0?"filters:"+c.join(":"):""} ${d}w`}}).join(", ")),r.sizes&&(g.sizes=r.sizes.join(", "))}let I=`${e}/m/`;return a>0&&S>0&&(I=`${I}${a}x${S}/`),c.length>0&&(I=`${I}filters:${c.join(":")}`),{src:I,attrs:g}}const H=(e={})=>Object.keys(e).map(r=>`${r}="${e[r]}"`).join(" "),_=(e={})=>Object.keys(e).map(r=>`${r}: ${e[r]}`).join("; ");function w(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function x(e,r={},a){const S=H(r);return`<${S?`${e} ${S}`:e}>${Array.isArray(a)?a.join(""):a||""}</${e}>`}function P(e){let r=0;const{renderFn:a=x,textFn:S=w,resolvers:g={},optimizeImages:c=!1}=e,f=t=>i=>a(t,{...i.attrs,key:`${t}-${r}`},i.children||null),I=t=>{const{src:i,alt:n,...h}=t.attrs||{};let b=i,R={};if(c){const{src:p,attrs:G}=C(i,c);b=p,R=G}const D={src:b,alt:n||"",key:`img-${r}`,...h,...R};return a("img",D,"")},u=t=>{const{level:i,...n}=t.attrs||{};return a(`h${i}`,{...n,key:`h${i}-${r}`},t.children)},d=t=>{var i,n,h,b;return a("span",{"data-type":"emoji","data-name":(i=t.attrs)==null?void 0:i.name,emoji:(n=t.attrs)==null?void 0:n.emoji,key:`emoji-${r}`},a("img",{src:(h=t.attrs)==null?void 0:h.fallbackImage,alt:(b=t.attrs)==null?void 0:b.alt,style:"width: 1.25em; height: 1.25em; vertical-align: text-top",draggable:"false",loading:"lazy"},""))},$=t=>a("pre",{...t.attrs,key:`code-${r}`},a("code",{key:`code-${r}`},t.children||"")),s=(t,i=!1)=>({text:n,attrs:h})=>a(t,i?{style:_(h),key:`${t}-${r}`}:{...h,key:`${t}-${r}`},n),E=t=>y(t),O=t=>{const{marks:i,...n}=t;return"text"in t?i?i.reduce((h,b)=>E({...b,text:h}),E({...n,children:n.children})):S(n.text):""},L=t=>{const{linktype:i,href:n,anchor:h,...b}=t.attrs||{};let R="";switch(i){case T.ASSET:case T.URL:R=n;break;case T.EMAIL:R=`mailto:${n}`;break;case T.STORY:R=n;break}return h&&(R=`${R}#${h}`),a("a",{...b,href:R,key:`a-${r}`},t.text)},v=t=>{var i,n;return console.warn("[SbRichtText] - BLOK resolver is not available for vanilla usage"),a("span",{blok:(i=t==null?void 0:t.attrs)==null?void 0:i.body[0],id:(n=t.attrs)==null?void 0:n.id,key:`component-${r}`,style:"display: none"},"")},U=new Map([[l.DOCUMENT,f("div")],[l.HEADING,u],[l.PARAGRAPH,f("p")],[l.UL_LIST,f("ul")],[l.OL_LIST,f("ol")],[l.LIST_ITEM,f("li")],[l.IMAGE,I],[l.EMOJI,d],[l.CODE_BLOCK,$],[l.HR,f("hr")],[l.BR,f("br")],[l.QUOTE,f("blockquote")],[l.COMPONENT,v],[A.TEXT,O],[o.LINK,L],[o.ANCHOR,L],[o.STYLED,s("span",!0)],[o.BOLD,s("strong")],[o.TEXT_STYLE,s("span",!0)],[o.ITALIC,s("em")],[o.UNDERLINE,s("u")],[o.STRIKE,s("s")],[o.CODE,s("code")],[o.SUPERSCRIPT,s("sup")],[o.SUBSCRIPT,s("sub")],[o.HIGHLIGHT,s("mark")],...Object.entries(g).map(([t,i])=>[t,i])]);function N(t){r+=1;const i=U.get(t.type);if(!i)return console.error("<Storyblok>",`No resolver found for node type ${t.type}`),"";if(t.type==="text")return i(t);const n=t.content?t.content.map(y):void 0;return i({...t,children:n})}function y(t){return Array.isArray(t)?t.map(N):N(t)}return{render:y}}m.BlockTypes=l,m.LinkTargets=j,m.LinkTypes=T,m.MarkTypes=o,m.RichTextResolver=P,m.TextTypes=A,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}); | ||
(function(m,l){typeof exports=="object"&&typeof module<"u"?l(exports):typeof define=="function"&&define.amd?define(["exports"],l):(m=typeof globalThis<"u"?globalThis:m||self,l(m.StoryblokRichtext={}))})(this,function(m){"use strict";var l=(e=>(e.DOCUMENT="doc",e.HEADING="heading",e.PARAGRAPH="paragraph",e.QUOTE="blockquote",e.OL_LIST="ordered_list",e.UL_LIST="bullet_list",e.LIST_ITEM="list_item",e.CODE_BLOCK="code_block",e.HR="horizontal_rule",e.BR="hard_break",e.IMAGE="image",e.EMOJI="emoji",e.COMPONENT="blok",e))(l||{}),o=(e=>(e.BOLD="bold",e.STRONG="strong",e.STRIKE="strike",e.UNDERLINE="underline",e.ITALIC="italic",e.CODE="code",e.LINK="link",e.ANCHOR="anchor",e.STYLED="styled",e.SUPERSCRIPT="superscript",e.SUBSCRIPT="subscript",e.TEXT_STYLE="textStyle",e.HIGHLIGHT="highlight",e))(o||{}),A=(e=>(e.TEXT="text",e))(A||{}),j=(e=>(e.SELF="_self",e.BLANK="_blank",e))(j||{}),T=(e=>(e.URL="url",e.STORY="story",e.ASSET="asset",e.EMAIL="email",e))(T||{});function C(e,r){if(!r)return{src:e,attrs:{}};let a=0,R=0;const g={},c=[];function f(u,d,$,s,E){typeof u!="number"||u<=d||u>=$?console.warn(`[SbRichText] - ${s.charAt(0).toUpperCase()+s.slice(1)} value must be a number between ${d} and ${$} (inclusive)`):E.push(`${s}(${u})`)}if(typeof r=="object"){if(typeof r.width=="number"&&r.width>0?(g.width=r.width,a=r.width):console.warn("[SbRichText] - Width value must be a number greater than 0"),r.height&&typeof r.height=="number"&&r.height>0?(g.height=r.height,R=r.height):console.warn("[SbRichText] - Height value must be a number greater than 0"),r.loading&&["lazy","eager"].includes(r.loading)&&(g.loading=r.loading),r.class&&(g.class=r.class),r.filters){const{filters:u}=r||{},{blur:d,brightness:$,fill:s,format:E,grayscale:O,quality:L,rotate:v}=u||{};d&&f(d,0,100,"blur",c),L&&f(L,0,100,"quality",c),$&&f($,0,100,"brightness",c),s&&c.push(`fill(${s})`),O&&c.push("grayscale()"),v&&[0,90,180,270].includes(r.filters.rotate||0)&&c.push(`rotate(${v})`),E&&["webp","png","jpeg"].includes(E)&&c.push(`format(${E})`)}r.srcset&&(g.srcset=r.srcset.map(u=>{if(typeof u=="number")return`${e}/m/${u}x0/${c.length>0?"filters:"+c.join(":"):""} ${u}w`;if(Array.isArray(u)&&u.length===2){const[d,$]=u;return`${e}/m/${d}x${$}/${c.length>0?"filters:"+c.join(":"):""} ${d}w`}}).join(", ")),r.sizes&&(g.sizes=r.sizes.join(", "))}let I=`${e}/m/`;return a>0&&R>0&&(I=`${I}${a}x${R}/`),c.length>0&&(I=`${I}filters:${c.join(":")}`),{src:I,attrs:g}}const H=(e={})=>Object.keys(e).map(r=>`${r}="${e[r]}"`).join(" "),_=(e={})=>Object.keys(e).map(r=>`${r}: ${e[r]}`).join("; ");function w(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function x(e,r={},a){const R=H(r);return`<${R?`${e} ${R}`:e}>${Array.isArray(a)?a.join(""):a||""}</${e}>`}function P(e){let r=0;const{renderFn:a=x,textFn:R=w,resolvers:g={},optimizeImages:c=!1}=e,f=t=>i=>a(t,{...i.attrs,key:`${t}-${r}`},i.children||null),I=t=>{const{src:i,alt:n,...h}=t.attrs||{};let b=i,S={};if(c){const{src:p,attrs:G}=C(i,c);b=p,S=G}const D={src:b,alt:n||"",key:`img-${r}`,...h,...S};return a("img",D,"")},u=t=>{const{level:i,...n}=t.attrs||{};return a(`h${i}`,{...n,key:`h${i}-${r}`},t.children)},d=t=>{var i,n,h,b;return a("span",{"data-type":"emoji","data-name":(i=t.attrs)==null?void 0:i.name,emoji:(n=t.attrs)==null?void 0:n.emoji,key:`emoji-${r}`},a("img",{src:(h=t.attrs)==null?void 0:h.fallbackImage,alt:(b=t.attrs)==null?void 0:b.alt,style:"width: 1.25em; height: 1.25em; vertical-align: text-top",draggable:"false",loading:"lazy"},""))},$=t=>a("pre",{...t.attrs,key:`code-${r}`},a("code",{key:`code-${r}`},t.children||"")),s=(t,i=!1)=>({text:n,attrs:h})=>a(t,i?{style:_(h),key:`${t}-${r}`}:{...h,key:`${t}-${r}`},n),E=t=>y(t),O=t=>{const{marks:i,...n}=t;return"text"in t?i?i.reduce((h,b)=>E({...b,text:h}),E({...n,children:n.children})):R(n.text):""},L=t=>{const{linktype:i,href:n,anchor:h,...b}=t.attrs||{};let S="";switch(i){case T.ASSET:case T.URL:S=n;break;case T.EMAIL:S=`mailto:${n}`;break;case T.STORY:S=n;break}return h&&(S=`${S}#${h}`),a("a",{...b,href:S,key:`a-${r}`},t.text)},v=t=>{var i,n;return console.warn("[SbRichtText] - BLOK resolver is not available for vanilla usage"),a("span",{blok:(i=t==null?void 0:t.attrs)==null?void 0:i.body[0],id:(n=t.attrs)==null?void 0:n.id,key:`component-${r}`,style:"display: none"},"")},U=new Map([[l.DOCUMENT,f("div")],[l.HEADING,u],[l.PARAGRAPH,f("p")],[l.UL_LIST,f("ul")],[l.OL_LIST,f("ol")],[l.LIST_ITEM,f("li")],[l.IMAGE,I],[l.EMOJI,d],[l.CODE_BLOCK,$],[l.HR,f("hr")],[l.BR,f("br")],[l.QUOTE,f("blockquote")],[l.COMPONENT,v],[A.TEXT,O],[o.LINK,L],[o.ANCHOR,L],[o.STYLED,s("span",!0)],[o.BOLD,s("strong")],[o.TEXT_STYLE,s("span",!0)],[o.ITALIC,s("em")],[o.UNDERLINE,s("u")],[o.STRIKE,s("s")],[o.CODE,s("code")],[o.SUPERSCRIPT,s("sup")],[o.SUBSCRIPT,s("sub")],[o.HIGHLIGHT,s("mark")],...Object.entries(g).map(([t,i])=>[t,i])]);function N(t){r+=1;const i=U.get(t.type);if(!i)return console.error("<Storyblok>",`No resolver found for node type ${t.type}`),"";if(t.type==="text")return i(t);const n=t.content?t.content.map(y):void 0;return i({...t,children:n})}function y(t){return Array.isArray(t)?t.map(N):N(t)}return{render:y}}m.BlockTypes=l,m.LinkTargets=j,m.LinkTypes=T,m.MarkTypes=o,m.TextTypes=A,m.richTextResolver=P,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}); |
{ | ||
"name": "@storyblok/richtext", | ||
"type": "module", | ||
"version": "0.1.0", | ||
"version": "0.2.0", | ||
"packageManager": "pnpm@8.10.2", | ||
@@ -6,0 +6,0 @@ "description": "Storyblok RichText Resolver", |
@@ -59,5 +59,5 @@ ![](/.github/repo-banner.png) | ||
```ts | ||
import { RichTextResolver } from '@storyblok/richtext' | ||
import { richTextResolver } from '@storyblok/richtext' | ||
const { render } = RichTextResolver() | ||
const { render } = richTextResolver() | ||
@@ -75,8 +75,8 @@ const html = render(doc) | ||
To overwrite an existing resolver, you can pass a property called resolvers available on the `RichTextResolver` options. | ||
To overwrite an existing resolver, you can pass a property called resolvers available on the `richTextResolver` options. | ||
```ts | ||
import { MarkTypes, RichTextResolver } from '@storyblok/richtext' | ||
import { MarkTypes, richTextResolver } from '@storyblok/richtext' | ||
const html = RichTextResolver({ | ||
const html = richTextResolver({ | ||
resolvers: { | ||
@@ -110,3 +110,3 @@ [MarkTypes.LINK]: (node) => { | ||
const html = RichTextResolver<string>(options).render(doc) | ||
const html = richTextResolver<string>(options).render(doc) | ||
``` | ||
@@ -119,3 +119,3 @@ | ||
} | ||
const root = () => RichTextResolver<VNode>(options).render(doc) | ||
const root = () => richTextResolver<VNode>(options).render(doc) | ||
``` | ||
@@ -122,0 +122,0 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package