@storyblok/richtext - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

dist/images-optimization.d.ts

@@ -1,6 +0,6 @@
-import { SbRichTextImageOptimizationOptions } from './types';
+import { StoryblokRichTextImageOptimizationOptions } from './types';
 
-export declare function optimizeImage(src: string, options?: boolean | Partial<SbRichTextImageOptimizationOptions>): {
+export declare function optimizeImage(src: string, options?: boolean | Partial<StoryblokRichTextImageOptimizationOptions>): {
     src: string;
     attrs: Record<string, any>;
 };

dist/richtext.d.ts

@@ -1,2 +0,2 @@
-import { SbRichTextOptions, SbRichTextNode } from './types';
+import { StoryblokRichTextOptions, StoryblokRichTextNode } from './types';
 
@@ -8,7 +8,7 @@ /**
  * @template T
- * @param {SbRichTextOptions<T>} [options={}]
+ * @param {StoryblokRichTextOptions<T>} [options={}]
  * @return {*}
  */
-export declare function richTextResolver<T>(options?: SbRichTextOptions<T>): {
-    render: (node: SbRichTextNode<T>) => T;
+export declare function richTextResolver<T>(options?: StoryblokRichTextOptions<T>): {
+    render: (node: StoryblokRichTextNode<T>) => T;
 };

dist/storyblok-richtext.es.js

@@ -7,12 +7,12 @@ /**
  */
-var u = /* @__PURE__ */ ((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))(u || {}), o = /* @__PURE__ */ ((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 || {}), N = /* @__PURE__ */ ((e) => (e.TEXT = "text", e))(N || {}), w = /* @__PURE__ */ ((e) => (e.SELF = "_self", e.BLANK = "_blank", e))(w || {}), A = /* @__PURE__ */ ((e) => (e.URL = "url", e.STORY = "story", e.ASSET = "asset", e.EMAIL = "email", e))(A || {});
-function x(e, r) {
+var o = /* @__PURE__ */ ((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))(o || {}), u = /* @__PURE__ */ ((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))(u || {}), N = /* @__PURE__ */ ((e) => (e.TEXT = "text", e))(N || {}), _ = /* @__PURE__ */ ((e) => (e.SELF = "_self", e.BLANK = "_blank", e))(_ || {}), A = /* @__PURE__ */ ((e) => (e.URL = "url", e.STORY = "story", e.ASSET = "asset", e.EMAIL = "email", e))(A || {});
+function w(e, r) {
   if (!r) return { src: e, attrs: {} };
-  let l = 0, d = 0;
+  let a = 0, d = 0;
   const m = {}, s = [];
   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})`);
+    typeof c != "number" || c <= g || c >= $ ? console.warn(`[StoryblokRichText] - ${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, 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) {
+    if (typeof r.width == "number" && r.width > 0 ? (m.width = r.width, a = r.width) : console.warn("[StoryblokRichText] - 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("[StoryblokRichText] - 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 || {};
@@ -31,3 +31,3 @@ 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})`);
   let E = `${e}/m/`;
-  return l > 0 && d > 0 && (E = `${E}${l}x${d}/`), s.length > 0 && (E = `${E}filters:${s.join(":")}`), {
+  return a > 0 && d > 0 && (E = `${E}${a}x${d}/`), s.length > 0 && (E = `${E}filters:${s.join(":")}`), {
     src: E,
@@ -37,9 +37,9 @@ attrs: m
 }
-const P = (e = {}) => Object.keys(e).map((r) => `${r}="${e[r]}"`).join(" "), U = (e = {}) => Object.keys(e).map((r) => `${r}: ${e[r]}`).join("; ");
-function y(e) {
+const x = (e = {}) => Object.keys(e).map((r) => `${r}="${e[r]}"`).join(" "), P = (e = {}) => Object.keys(e).map((r) => `${r}: ${e[r]}`).join("; ");
+function U(e) {
   return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
 }
-function D(e, r = {}, l) {
-  const d = P(r);
-  return `<${d ? `${e} ${d}` : e}>${Array.isArray(l) ? l.join("") : l || ""}</${e}>`;
+function D(e, r = {}, a) {
+  const d = x(r);
+  return `<${d ? `${e} ${d}` : e}>${Array.isArray(a) ? a.join("") : a || ""}</${e}>`;
 }
@@ -49,16 +49,16 @@ function G(e = {}) {
   const {
-    renderFn: l = D,
-    textFn: d = y,
+    renderFn: a = D,
+    textFn: d = U,
     resolvers: m = {},
     optimizeImages: s = !1
-  } = e, h = (t) => (i) => l(t, { ...i.attrs, key: `${t}-${r}` }, i.children || null), E = (t) => {
-    const { src: i, alt: a, ...f } = t.attrs || {};
+  } = e, h = (t) => (i) => a(t, { ...i.attrs, key: `${t}-${r}` }, i.children || null), E = (t) => {
+    const { src: i, alt: l, ...f } = t.attrs || {};
     let b = i, S = {};
     if (s) {
-      const { src: H, attrs: _ } = x(i, s);
-      b = H, S = _;
+      const { src: y, attrs: H } = w(i, s);
+      b = y, S = H;
     }
     const C = {
       src: b,
-      alt: a || "",
+      alt: l || "",
       key: `img-${r}`,
@@ -68,14 +68,14 @@ ...f,
     };
-    return l("img", C, "");
+    return a("img", C, "");
   }, c = (t) => {
-    const { level: i, ...a } = t.attrs || {};
-    return l(`h${i}`, { ...a, key: `h${i}-${r}` }, t.children);
+    const { level: i, ...l } = t.attrs || {};
+    return a(`h${i}`, { ...l, key: `h${i}-${r}` }, t.children);
   }, g = (t) => {
-    var i, a, f, b;
-    return l("span", {
+    var i, l, f, b;
+    return a("span", {
       "data-type": "emoji",
       "data-name": (i = t.attrs) == null ? void 0 : i.name,
-      emoji: (a = t.attrs) == null ? void 0 : a.emoji,
+      emoji: (l = t.attrs) == null ? void 0 : l.emoji,
       key: `emoji-${r}`
-    }, l("img", {
+    }, a("img", {
       src: (f = t.attrs) == null ? void 0 : f.fallbackImage,
@@ -87,15 +87,15 @@ alt: (b = t.attrs) == null ? void 0 : b.alt,
     }, ""));
-  }, $ = (t) => l("pre", { ...t.attrs, key: `code-${r}` }, l("code", { key: `code-${r}` }, t.children || "")), n = (t, i = !1) => ({ text: a, attrs: f }) => l(t, i ? {
-    style: U(f),
+  }, $ = (t) => a("pre", { ...t.attrs, key: `code-${r}` }, a("code", { key: `code-${r}` }, t.children || "")), n = (t, i = !1) => ({ text: l, attrs: f }) => a(t, i ? {
+    style: P(f),
     key: `${t}-${r}`
-  } : { ...f, key: `${t}-${r}` }, a), R = (t) => v(t), O = (t) => {
-    const { marks: i, ...a } = t;
+  } : { ...f, key: `${t}-${r}` }, l), R = (t) => v(t), O = (t) => {
+    const { marks: i, ...l } = t;
     return "text" in t ? i ? i.reduce(
       (f, b) => R({ ...b, text: f }),
       // Fix: Ensure render function returns a string
-      R({ ...a, children: a.children })
+      R({ ...l, children: l.children })
       // Fix: Cast children to string
-    ) : d(a.text) : "";
+    ) : d(l.text) : "";
   }, I = (t) => {
-    const { linktype: i, href: a, anchor: f, ...b } = t.attrs || {};
+    const { linktype: i, href: l, anchor: f, ...b } = t.attrs || {};
     let S = "";
@@ -105,17 +105,17 @@ switch (i) {
       case A.URL:
-        S = a;
+        S = l;
         break;
       case A.EMAIL:
-        S = `mailto:${a}`;
+        S = `mailto:${l}`;
         break;
       case A.STORY:
-        S = a;
+        S = l;
         break;
     }
-    return f && (S = `${S}#${f}`), l("a", { ...b, href: S, key: `a-${r}` }, t.text);
+    return f && (S = `${S}#${f}`), a("a", { ...b, href: S, key: `a-${r}` }, t.text);
   }, L = (t) => {
-    var i, a;
-    return console.warn("[SbRichtText] - BLOK resolver is not available for vanilla usage"), l("span", {
+    var i, l;
+    return console.warn("[StoryblokRichtText] - 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: (a = t.attrs) == null ? void 0 : a.id,
+      id: (l = t.attrs) == null ? void 0 : l.id,
       key: `component-${r}`,
@@ -125,28 +125,28 @@ style: "display: none"
   }, j = new Map([
-    [u.DOCUMENT, h("div")],
-    [u.HEADING, c],
-    [u.PARAGRAPH, h("p")],
-    [u.UL_LIST, h("ul")],
-    [u.OL_LIST, h("ol")],
-    [u.LIST_ITEM, h("li")],
-    [u.IMAGE, E],
-    [u.EMOJI, g],
-    [u.CODE_BLOCK, $],
-    [u.HR, h("hr")],
-    [u.BR, h("br")],
-    [u.QUOTE, h("blockquote")],
-    [u.COMPONENT, L],
+    [o.DOCUMENT, h("div")],
+    [o.HEADING, c],
+    [o.PARAGRAPH, h("p")],
+    [o.UL_LIST, h("ul")],
+    [o.OL_LIST, h("ol")],
+    [o.LIST_ITEM, h("li")],
+    [o.IMAGE, E],
+    [o.EMOJI, g],
+    [o.CODE_BLOCK, $],
+    [o.HR, h("hr")],
+    [o.BR, h("br")],
+    [o.QUOTE, h("blockquote")],
+    [o.COMPONENT, L],
     [N.TEXT, O],
-    [o.LINK, I],
-    [o.ANCHOR, I],
-    [o.STYLED, n("span", !0)],
-    [o.BOLD, n("strong")],
-    [o.TEXT_STYLE, n("span", !0)],
-    [o.ITALIC, n("em")],
-    [o.UNDERLINE, n("u")],
-    [o.STRIKE, n("s")],
-    [o.CODE, n("code")],
-    [o.SUPERSCRIPT, n("sup")],
-    [o.SUBSCRIPT, n("sub")],
-    [o.HIGHLIGHT, n("mark")],
+    [u.LINK, I],
+    [u.ANCHOR, I],
+    [u.STYLED, n("span", !0)],
+    [u.BOLD, n("strong")],
+    [u.TEXT_STYLE, n("span", !0)],
+    [u.ITALIC, n("em")],
+    [u.UNDERLINE, n("u")],
+    [u.STRIKE, n("s")],
+    [u.CODE, n("code")],
+    [u.SUPERSCRIPT, n("sup")],
+    [u.SUBSCRIPT, n("sub")],
+    [u.HIGHLIGHT, n("mark")],
     ...Object.entries(m).map(([t, i]) => [t, i])
@@ -161,6 +161,6 @@ ]);
       return i(t);
-    const a = t.content ? t.content.map(v) : void 0;
+    const l = t.content ? t.content.map(v) : void 0;
     return i({
       ...t,
-      children: a
+      children: l
       // Fix: Update the type of 'children' to Node[]
@@ -177,8 +177,8 @@ });
 export {
-  u as BlockTypes,
-  w as LinkTargets,
+  o as BlockTypes,
+  _ as LinkTargets,
   A as LinkTypes,
-  o as MarkTypes,
+  u as MarkTypes,
   N as TextTypes,
   G as richTextResolver
 };

dist/storyblok-richtext.umd.js

@@ -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,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,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}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"})});
+(function(m,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(m=typeof globalThis<"u"?globalThis:m||self,n(m.StoryblokRichText={}))})(this,function(m){"use strict";var n=(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))(n||{}),u=(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))(u||{}),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(o,d,$,s,E){typeof o!="number"||o<=d||o>=$?console.warn(`[StoryblokRichText] - ${s.charAt(0).toUpperCase()+s.slice(1)} value must be a number between ${d} and ${$} (inclusive)`):E.push(`${s}(${o})`)}if(typeof r=="object"){if(typeof r.width=="number"&&r.width>0?(g.width=r.width,a=r.width):console.warn("[StoryblokRichText] - 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("[StoryblokRichText] - 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:o}=r||{},{blur:d,brightness:$,fill:s,format:E,grayscale:O,quality:L,rotate:v}=o||{};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(o=>{if(typeof o=="number")return`${e}/m/${o}x0/${c.length>0?"filters:"+c.join(":"):""} ${o}w`;if(Array.isArray(o)&&o.length===2){const[d,$]=o;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,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}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:l,...h}=t.attrs||{};let b=i,S={};if(c){const{src:p,attrs:k}=C(i,c);b=p,S=k}const D={src:b,alt:l||"",key:`img-${r}`,...h,...S};return a("img",D,"")},o=t=>{const{level:i,...l}=t.attrs||{};return a(`h${i}`,{...l,key:`h${i}-${r}`},t.children)},d=t=>{var i,l,h,b;return a("span",{"data-type":"emoji","data-name":(i=t.attrs)==null?void 0:i.name,emoji:(l=t.attrs)==null?void 0:l.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:l,attrs:h})=>a(t,i?{style:_(h),key:`${t}-${r}`}:{...h,key:`${t}-${r}`},l),E=t=>y(t),O=t=>{const{marks:i,...l}=t;return"text"in t?i?i.reduce((h,b)=>E({...b,text:h}),E({...l,children:l.children})):R(l.text):""},L=t=>{const{linktype:i,href:l,anchor:h,...b}=t.attrs||{};let S="";switch(i){case T.ASSET:case T.URL:S=l;break;case T.EMAIL:S=`mailto:${l}`;break;case T.STORY:S=l;break}return h&&(S=`${S}#${h}`),a("a",{...b,href:S,key:`a-${r}`},t.text)},v=t=>{var i,l;return console.warn("[StoryblokRichtText] - 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:(l=t.attrs)==null?void 0:l.id,key:`component-${r}`,style:"display: none"},"")},U=new Map([[n.DOCUMENT,f("div")],[n.HEADING,o],[n.PARAGRAPH,f("p")],[n.UL_LIST,f("ul")],[n.OL_LIST,f("ol")],[n.LIST_ITEM,f("li")],[n.IMAGE,I],[n.EMOJI,d],[n.CODE_BLOCK,$],[n.HR,f("hr")],[n.BR,f("br")],[n.QUOTE,f("blockquote")],[n.COMPONENT,v],[A.TEXT,O],[u.LINK,L],[u.ANCHOR,L],[u.STYLED,s("span",!0)],[u.BOLD,s("strong")],[u.TEXT_STYLE,s("span",!0)],[u.ITALIC,s("em")],[u.UNDERLINE,s("u")],[u.STRIKE,s("s")],[u.CODE,s("code")],[u.SUPERSCRIPT,s("sup")],[u.SUBSCRIPT,s("sub")],[u.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 l=t.content?t.content.map(y):void 0;return i({...t,children:l})}function y(t){return Array.isArray(t)?t.map(N):N(t)}return{render:y}}m.BlockTypes=n,m.LinkTargets=j,m.LinkTypes=T,m.MarkTypes=u,m.TextTypes=A,m.richTextResolver=P,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});

dist/types/index.d.ts

@@ -44,13 +44,13 @@ export declare enum BlockTypes {
 }
-export interface SbRichTextDocumentNode {
+export interface StoryblokRichTextDocumentNode {
     type: string;
-    content?: SbRichTextDocumentNode[];
+    content?: StoryblokRichTextDocumentNode[];
     attrs?: Record<string, any>;
     text?: string;
-    marks?: SbRichTextDocumentNode[];
+    marks?: StoryblokRichTextDocumentNode[];
 }
-export type SbRichTextNodeTypes = BlockTypes | MarkTypes | TextTypes;
-export interface SbRichTextNode<T = string> {
-    type: SbRichTextNodeTypes;
-    content: SbRichTextNode<T>[];
+export type StoryblokRichTextNodeTypes = BlockTypes | MarkTypes | TextTypes;
+export interface StoryblokRichTextNode<T = string> {
+    type: StoryblokRichTextNodeTypes;
+    content: StoryblokRichTextNode<T>[];
     children?: T;
@@ -60,3 +60,3 @@ attrs?: Record<string, any>;
 }
-export interface LinkNode<T = string> extends SbRichTextNode<T> {
+export interface LinkNode<T = string> extends StoryblokRichTextNode<T> {
     type: MarkTypes.LINK | MarkTypes.ANCHOR;
@@ -66,3 +66,3 @@ linktype: LinkTypes.ASSET | LinkTypes.EMAIL | LinkTypes.STORY | LinkTypes.URL;
 }
-export interface MarkNode<T = string> extends SbRichTextNode<T> {
+export interface MarkNode<T = string> extends StoryblokRichTextNode<T> {
     type: MarkTypes.BOLD | MarkTypes.ITALIC | MarkTypes.UNDERLINE | MarkTypes.STRIKE | MarkTypes.CODE | MarkTypes.LINK | MarkTypes.ANCHOR | MarkTypes.STYLED | MarkTypes.SUPERSCRIPT | MarkTypes.SUBSCRIPT | MarkTypes.TEXT_STYLE | MarkTypes.HIGHLIGHT;
@@ -72,3 +72,3 @@ attrs?: Record<string, any>;
 }
-export interface TextNode<T = string> extends SbRichTextNode<T> {
+export interface TextNode<T = string> extends StoryblokRichTextNode<T> {
     type: TextTypes.TEXT;
@@ -84,7 +84,7 @@ text: string;
  */
-export type SbRichTextNodeResolver<T = string> = (node: SbRichTextNode<T> | TextNode<T> | MarkNode<T> | LinkNode<T>) => T;
+export type StoryblokRichTextNodeResolver<T = string> = (node: StoryblokRichTextNode<T> | TextNode<T> | MarkNode<T> | LinkNode<T>) => T;
 /**
  * Represents the configuration options for optimizing images in rich text content.
  */
-export interface SbRichTextImageOptimizationOptions {
+export interface StoryblokRichTextImageOptimizationOptions {
     /**
@@ -112,3 +112,3 @@ * CSS class to be applied to the image.
      * ```typescript
-     * const filters: Partial<SbRichTextImageOptimizationOptions['filters']> = {
+     * const filters: Partial<StoryblokRichTextImageOptimizationOptions['filters']> = {
      *   blur: 5,
@@ -163,7 +163,7 @@ *   brightness: 150,
  */
-export type SbRichTextResolvers<T = string> = Partial<Record<SbRichTextNodeTypes, SbRichTextNodeResolver<T>>>;
+export type StoryblokRichTextResolvers<T = string> = Partial<Record<StoryblokRichTextNodeTypes, StoryblokRichTextNodeResolver<T>>>;
 /**
  * Represents the options for rendering rich text.
  */
-export interface SbRichTextOptions<T = string, S = (tag: string, attrs: Record<string, any>, text: string) => T> {
+export interface StoryblokRichTextOptions<T = string, S = (tag: string, attrs: Record<string, any>, text: string) => T> {
     /**
@@ -179,3 +179,3 @@ * Defines the function that will be used to render the final HTML string (vanilla) or Framework component (React, Vue).
      *
-     * const options: SbRichTextOptions = {
+     * const options: StoryblokRichTextOptions = {
      *  renderFn
@@ -194,3 +194,3 @@ * }
      *
-     * const options: SbRichTextOptions = {
+     * const options: StoryblokRichTextOptions = {
      *  renderFn: h,
@@ -208,5 +208,5 @@ *  textFn: createTextVNode
      * ```typescript
-     * const options: SbRichTextOptions = {
+     * const options: StoryblokRichTextOptions = {
      *  resolvers: {
-     *    [MarkTypes.LINK]: (node: SbRichTextNode) => {
+     *    [MarkTypes.LINK]: (node: StoryblokRichTextNode) => {
      *      return `<a href="${node.attrs.href}">${node.text}</a>`
@@ -218,3 +218,3 @@ *    }
      */
-    resolvers?: SbRichTextResolvers<T>;
+    resolvers?: StoryblokRichTextResolvers<T>;
     /**
@@ -226,3 +226,3 @@ * Defines opt-out image optimization options.
      * ```typescript
-     * const options: SbRichTextOptions = {
+     * const options: StoryblokRichTextOptions = {
      *  optimizeImages: true
@@ -235,3 +235,3 @@ * }
      * ```typescript
-     * const options: SbRichTextOptions = {
+     * const options: StoryblokRichTextOptions = {
      *    optimizeImages: {
@@ -245,3 +245,3 @@ *    class: 'my-image',
      */
-    optimizeImages?: boolean | Partial<SbRichTextImageOptimizationOptions>;
+    optimizeImages?: boolean | Partial<StoryblokRichTextImageOptimizationOptions>;
 }

package.json

 {
   "name": "@storyblok/richtext",
   "type": "module",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "packageManager": "pnpm@9.1.4",
@@ -69,3 +69,3 @@ "description": "Storyblok RichText Resolver",
     "vite-plugin-banner": "^0.7.1",
-    "vite-plugin-dts": "4.0.0-beta.2",
+    "vite-plugin-dts": "4.0.3",
     "vite-plugin-inspect": "^0.8.5",
@@ -76,2 +76,5 @@ "vite-plugin-qrcode": "^0.2.3",
   },
+  "dependencies": {
+    "consola": "^3.2.3"
+  },
   "lint-staged": {
@@ -118,5 +121,15 @@ "*.{vue,js,css,ts}": [
   },
-  "dependencies": {
-    "consola": "^3.2.3"
+  "release": {
+    "branches": [
+      "main",
+      {
+        "name": "next",
+        "prerelease": true
+      },
+      {
+        "name": "beta",
+        "prerelease": true
+      }
+    ]
   }
 }

README.md

@@ -100,3 +100,3 @@ ![](/.github/repo-banner.png)
 // Vanilla
-const options: SbRichtextOptions<string> = {
+const options: StoryblokRichTextOptions<string> = {
   resolvers: {
@@ -114,3 +114,3 @@ [MarkTypes.LINK]: (node: Node<string>) => {
 // Vue
-const options: SbRichtextOptions<VNode> = {
+const options: StoryblokRichTextOptions<VNode> = {
   renderFn: h,
@@ -117,0 +117,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35628

increased by1.39%

No dependency changes