@grapesjs/studio-sdk-plugins 1.0.7 → 1.0.8

package/dist/dialogComponent/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";require("react");const b="app.grapesjs.com",w="app-stage.grapesjs.com",E=[b,w,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],S="license:check:start",_="license:check:end",P=()=>typeof window<"u",k=({isDev:n,isStage:t})=>`${n?"":`https://${t?w:b}`}/api`,x=()=>{const n=P()&&window.location.hostname;return!!n&&(E.includes(n)||E.some(t=>n.endsWith(t)))},N=()=>(P()&&window.location.hostname)===b;var j={NODE_ENV:"production",NPM_PACKAGE_VERSION:"1.0.7",STUDIO_NPM_PACKAGE_VERSION:"1.0.25"};const D=j.NODE_ENV!=="production";async function $({path:n,method:t="GET",headers:l={},body:o}){const s=`${k({isDev:D,isStage:!N()})}${n}`,a={method:t,headers:{"Content-Type":"application/json",...l}};o&&(a.body=JSON.stringify(o));const i=await fetch(s,a);if(!i.ok)throw new Error(`HTTP error! status: ${i.status}`);return i.json()}function A(n){const t=n;return t.init=l=>o=>n(o,l),t}const I=n=>A(n);async function X({editor:n,pluginName:t,licenseKey:l,cleanup:o}){let g=!1;const s=x();n.on(S,()=>{g=!0}),n.on(_,({sdkLicense:a})=>{a||o()}),setTimeout(async()=>{if(!g){if(s)return;l&&await q({licenseKey:l,pluginName:t})||o()}},2e3)}async function q({licenseKey:n,pluginName:t}){try{const l=await $({path:`/sdk/${n}`,method:"POST",body:JSON.stringify({d:window.location.hostname,pn:t})}),{license:o}=l.result||{};return!!o}catch(l){return console.error("Error during SDK license check:",l),!1}}const W=(...n)=>n.map(t=>`[data-gjs-type="${t}"]`).join(","),M="dialogComponent",U=function(n,t={}){const{Blocks:l,Components:o}=n,{licenseKey:g}=t,s="gjs-plg-dialog",a="gjs-plg-dialog-overlay",i="gjs-plg-dialog-content",h="gjs-plg-dialog-close",u="gjs-plg-dialog-title",y="gjs-plg-dialog-body",m="gjs-plg-dialog-description",f="gjs-plg-dialog-placeholder";l.add(s,{label:"Dialog",media:`
+"use strict";require("react");const b="app.grapesjs.com",w="app-stage.grapesjs.com",E=[b,w,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],S="license:check:start",_="license:check:end",P=()=>typeof window<"u",k=({isDev:n,isStage:t})=>`${n?"":`https://${t?w:b}`}/api`,x=()=>{const n=P()&&window.location.hostname;return!!n&&(E.includes(n)||E.some(t=>n.endsWith(t)))},N=()=>(P()&&window.location.hostname)===b;var j={NODE_ENV:"production",NPM_PACKAGE_VERSION:"1.0.8",STUDIO_NPM_PACKAGE_VERSION:"1.0.25"};const D=j.NODE_ENV!=="production";async function $({path:n,method:t="GET",headers:l={},body:o}){const s=`${k({isDev:D,isStage:!N()})}${n}`,a={method:t,headers:{"Content-Type":"application/json",...l}};o&&(a.body=JSON.stringify(o));const i=await fetch(s,a);if(!i.ok)throw new Error(`HTTP error! status: ${i.status}`);return i.json()}function A(n){const t=n;return t.init=l=>o=>n(o,l),t}const I=n=>A(n);async function X({editor:n,pluginName:t,licenseKey:l,cleanup:o}){let g=!1;const s=x();n.on(S,()=>{g=!0}),n.on(_,({sdkLicense:a})=>{a||o()}),setTimeout(async()=>{if(!g){if(s)return;l&&await q({licenseKey:l,pluginName:t})||o()}},2e3)}async function q({licenseKey:n,pluginName:t}){try{const l=await $({path:`/sdk/${n}`,method:"POST",body:JSON.stringify({d:window.location.hostname,pn:t})}),{license:o}=l.result||{};return!!o}catch(l){return console.error("Error during SDK license check:",l),!1}}const W=(...n)=>n.map(t=>`[data-gjs-type="${t}"]`).join(","),M="dialogComponent",U=function(n,t={}){const{Blocks:l,Components:o}=n,{licenseKey:g}=t,s="gjs-plg-dialog",a="gjs-plg-dialog-overlay",i="gjs-plg-dialog-content",h="gjs-plg-dialog-close",u="gjs-plg-dialog-title",y="gjs-plg-dialog-body",m="gjs-plg-dialog-description",f="gjs-plg-dialog-placeholder";l.add(s,{label:"Dialog",media:`
     <svg viewBox="0 0 24 24">
       <path d="M4 4h16v10H8l-4 4V4z"></path>
     </svg>

package/dist/dialogComponent/index.es.js

@@ -14,7 +14,7 @@ const b = "app.grapesjs.com", w = "app-stage.grapesjs.com", E = [
   const n = P() && window.location.hostname;
   return !!n && (E.includes(n) || E.some((t) => n.endsWith(t)));
 }, N = () => (P() && window.location.hostname) === b;
-var j = { NODE_ENV: "production", NPM_PACKAGE_VERSION: "1.0.7", STUDIO_NPM_PACKAGE_VERSION: "1.0.25" };
+var j = { NODE_ENV: "production", NPM_PACKAGE_VERSION: "1.0.8", STUDIO_NPM_PACKAGE_VERSION: "1.0.25" };
 const D = j.NODE_ENV !== "production";
 async function $({
   path: n,

package/dist/dialogComponent/index.umd.js

@@ -1,4 +1,4 @@
-(function(p,u){typeof exports=="object"&&typeof module<"u"?module.exports=u(require("react")):typeof define=="function"&&define.amd?define(["react"],u):(p=typeof globalThis<"u"?globalThis:p||self,p.StudioSdkPlugins_dialogComponent=u())})(this,function(){"use strict";const p="app.grapesjs.com",u="app-stage.grapesjs.com",W=[p,u,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],T="license:check:start",C="license:check:end",w=()=>typeof window<"u",O=({isDev:n,isStage:t})=>`${n?"":`https://${t?u:p}`}/api`,S=()=>{const n=w()&&window.location.hostname;return!!n&&(W.includes(n)||W.some(t=>n.endsWith(t)))},L=()=>(w()&&window.location.hostname)===p;var _={NODE_ENV:"production",NPM_PACKAGE_VERSION:"1.0.7",STUDIO_NPM_PACKAGE_VERSION:"1.0.25"};const k=_.NODE_ENV!=="production";async function x({path:n,method:t="GET",headers:l={},body:o}){const s=`${O({isDev:k,isStage:!L()})}${n}`,i={method:t,headers:{"Content-Type":"application/json",...l}};o&&(i.body=JSON.stringify(o));const a=await fetch(s,i);if(!a.ok)throw new Error(`HTTP error! status: ${a.status}`);return a.json()}function N(n){const t=n;return t.init=l=>o=>n(o,l),t}const j=n=>N(n);async function D({editor:n,pluginName:t,licenseKey:l,cleanup:o}){let h=!1;const s=S();n.on(T,()=>{h=!0}),n.on(C,({sdkLicense:i})=>{i||o()}),setTimeout(async()=>{if(!h){if(s)return;l&&await $({licenseKey:l,pluginName:t})||o()}},2e3)}async function $({licenseKey:n,pluginName:t}){try{const l=await x({path:`/sdk/${n}`,method:"POST",body:JSON.stringify({d:window.location.hostname,pn:t})}),{license:o}=l.result||{};return!!o}catch(l){return console.error("Error during SDK license check:",l),!1}}const P=(...n)=>n.map(t=>`[data-gjs-type="${t}"]`).join(","),A="dialogComponent";return j(function(n,t={}){const{Blocks:l,Components:o}=n,{licenseKey:h}=t,s="gjs-plg-dialog",i="gjs-plg-dialog-overlay",a="gjs-plg-dialog-content",y="gjs-plg-dialog-close",f="gjs-plg-dialog-title",m="gjs-plg-dialog-body",v="gjs-plg-dialog-description",E="gjs-plg-dialog-placeholder";l.add(s,{label:"Dialog",media:`
+(function(p,u){typeof exports=="object"&&typeof module<"u"?module.exports=u(require("react")):typeof define=="function"&&define.amd?define(["react"],u):(p=typeof globalThis<"u"?globalThis:p||self,p.StudioSdkPlugins_dialogComponent=u())})(this,function(){"use strict";const p="app.grapesjs.com",u="app-stage.grapesjs.com",W=[p,u,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],T="license:check:start",C="license:check:end",w=()=>typeof window<"u",O=({isDev:n,isStage:t})=>`${n?"":`https://${t?u:p}`}/api`,S=()=>{const n=w()&&window.location.hostname;return!!n&&(W.includes(n)||W.some(t=>n.endsWith(t)))},L=()=>(w()&&window.location.hostname)===p;var _={NODE_ENV:"production",NPM_PACKAGE_VERSION:"1.0.8",STUDIO_NPM_PACKAGE_VERSION:"1.0.25"};const k=_.NODE_ENV!=="production";async function x({path:n,method:t="GET",headers:l={},body:o}){const s=`${O({isDev:k,isStage:!L()})}${n}`,i={method:t,headers:{"Content-Type":"application/json",...l}};o&&(i.body=JSON.stringify(o));const a=await fetch(s,i);if(!a.ok)throw new Error(`HTTP error! status: ${a.status}`);return a.json()}function N(n){const t=n;return t.init=l=>o=>n(o,l),t}const j=n=>N(n);async function D({editor:n,pluginName:t,licenseKey:l,cleanup:o}){let h=!1;const s=S();n.on(T,()=>{h=!0}),n.on(C,({sdkLicense:i})=>{i||o()}),setTimeout(async()=>{if(!h){if(s)return;l&&await $({licenseKey:l,pluginName:t})||o()}},2e3)}async function $({licenseKey:n,pluginName:t}){try{const l=await x({path:`/sdk/${n}`,method:"POST",body:JSON.stringify({d:window.location.hostname,pn:t})}),{license:o}=l.result||{};return!!o}catch(l){return console.error("Error during SDK license check:",l),!1}}const P=(...n)=>n.map(t=>`[data-gjs-type="${t}"]`).join(","),A="dialogComponent";return j(function(n,t={}){const{Blocks:l,Components:o}=n,{licenseKey:h}=t,s="gjs-plg-dialog",i="gjs-plg-dialog-overlay",a="gjs-plg-dialog-content",y="gjs-plg-dialog-close",f="gjs-plg-dialog-title",m="gjs-plg-dialog-body",v="gjs-plg-dialog-description",E="gjs-plg-dialog-placeholder";l.add(s,{label:"Dialog",media:`
     <svg viewBox="0 0 24 24">
       <path d="M4 4h16v10H8l-4 4V4z"></path>
     </svg>

package/dist/fsLightboxComponent/index.cjs.d.ts

@@ -0,0 +1,3 @@
+import { FsLightboxComponentOptions } from './types';
+declare const _default: import('../utils').PluginWithInit<FsLightboxComponentOptions>;
+export default _default;

package/dist/fsLightboxComponent/index.cjs.js

@@ -0,0 +1,6 @@
+"use strict";require("react");const _="app.grapesjs.com",D="app-stage.grapesjs.com",O=[_,D,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],$="license:check:start",B="license:check:end",M=()=>typeof window<"u",W=({isDev:o,isStage:i})=>`${o?"":`https://${i?D:_}`}/api`,R=()=>{const o=M()&&window.location.hostname;return!!o&&(O.includes(o)||O.some(i=>o.endsWith(i)))},U=()=>(M()&&window.location.hostname)===_;var G={NODE_ENV:"production",NPM_PACKAGE_VERSION:"1.0.8",STUDIO_NPM_PACKAGE_VERSION:"1.0.25"};const K=G.NODE_ENV!=="production";async function F({path:o,method:i="GET",headers:c={},body:a}){const u=`${W({isDev:K,isStage:!U()})}${o}`,r={method:i,headers:{"Content-Type":"application/json",...c}};a&&(r.body=JSON.stringify(a));const v=await fetch(u,r);if(!v.ok)throw new Error(`HTTP error! status: ${v.status}`);return v.json()}function Z(o){const i=o;return i.init=c=>a=>o(a,c),i}const q=o=>Z(o);async function J({editor:o,pluginName:i,licenseKey:c,cleanup:a}){let h=!1;const u=R();o.on($,()=>{h=!0}),o.on(B,({sdkLicense:r})=>{r||a()}),setTimeout(async()=>{if(!h){if(u)return;c&&await z({licenseKey:c,pluginName:i})||a()}},2e3)}async function z({licenseKey:o,pluginName:i}){try{const c=await F({path:`/sdk/${o}`,method:"POST",body:JSON.stringify({d:window.location.hostname,pn:i})}),{license:a}=c.result||{};return!!a}catch(c){return console.error("Error during SDK license check:",c),!1}}const X="gjs-plg-",Y="fsLightboxComponent",T="data-fslightbox",L="data-type",Q="fslightbox-open",b="fslightbox",f={image:'<svg viewBox="0 0 24 24"><path d="m8.5 13.5 2.5 3 3.5-4.5 4.5 6H5m16 1V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2Z"/></svg>',video:'<svg viewBox="0 0 24 24"><path d="M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4Z"/></svg>',imageLightbox:'<svg viewBox="0 0 24 24"><path d="M4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H16L12,22L8,18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2M19,15V7L15,11L13,9L7,15H19M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z" /></svg>',external:'<svg viewBox="0 0 24 24"><path d="M14 3v2h3.6l-9.8 9.8 1.4 1.4L19 6.4V10h2V3m-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-7h-2v7z"/></svg>',eye:'<svg viewBox="0 0 24 24"><path d="M12 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5 5 5 0 0 1 5-5 5 5 0 0 1 5 5 5 5 0 0 1-5 5m0-12.5C7 4.5 2.7 7.6 1 12a11.8 11.8 0 0 0 22 0c-1.7-4.4-6-7.5-11-7.5Z"/></svg>'},tt=function(o,i={}){const{Blocks:c,Components:a}=o,h="Lightbox",u=`${X}${b}`,r={toolbarIconOpen:f.eye,block:{},defaultSrc:"https://placehold.co/300/777/white.png?text=Image",cdnScript:"https://cdn.jsdelivr.net/npm/fslightbox@3.4.2/index.js",...i},{block:v,toolbarIconOpen:w,defaultSrc:A}=r,j=function(e){const t=this,n="data-fslightbox",s=window,p=()=>{var E;const d=s.refreshFsLightbox;d==null||d();const x=t.getAttribute(n);if((E=s.fsLightboxInstances)==null||E[x],!s._isEditor)return;Array.from(document.querySelectorAll(`[${n}]`)).forEach(g=>{const m=g.onclick;g.onclick=function(S){S.preventDefault();const N=g;!N.__skipLb&&(m==null||m(S)),N.__skipLb=!0}})};if(s.refreshFsLightbox)p();else{const d=document.createElement("script");d.src=e.cdnScript,d.onload=p,document.head.appendChild(d)}},H=e=>({id:`${b}-open-lb`,label:w,command:()=>{const t=e.getView();t==null||t.toggleLightbox()}}),l="source-type",k={type:"radio",name:l,label:"Source type",changeProp:!0,options:[{id:"image",label:"Image",icon:f.image},{id:"video",label:"Video",icon:f.video},{id:"el",label:"Custom Element",icon:f.external}],labelToTitle:!0},I={id:"href-image",name:"href",type:"file",label:"Source Image"},C={id:"href-video",name:"href",label:"Source Video",placeholder:"https://www.youtube.com/watch?v=..."},V={id:"href-el",name:"href",label:"Source Element",placeholder:"#custom-element-id"},P={image:[I],video:[C],el:[V]};a.addType(b,{block:v&&{label:h,media:f.imageLightbox,category:"Extra",select:!0,...r.block},isComponent:e=>{var t;return(t=e.hasAttribute)==null?void 0:t.call(e,T)},extendFn:["initToolbar"],model:{defaults:{tagName:"a",name:h,icon:f.imageLightbox,classes:u,draggable:(e,t)=>!t.is(b),attributes:{[T]:"lightbox",[L]:"image",href:A},components:{type:"image",src:A},script:j,cdnScript:r.cdnScript,"script-props":["attributes","cdnScript"],[l]:"image",traits:[k,{name:T,label:"Group name"},{type:"button",label:"Toggle Lightbox",command(e,t){var s;const n=(s=t.target)==null?void 0:s.getView();n==null||n.toggleLightbox()}}],styles:`
+          .${u} {
+            display: inline-block;
+            padding: 10px;
+          }
+        `},init(){const e=[l].map(t=>`change:${t}`).join(" ");this.on(e,this.updateTraits),this.on(`change:${l}`,this.onSourceTypeChange),this.on("change:attributes:href",this.adjustSourceType),this.updateTraits({init:!0}),this.adjustSourceType()},onSourceTypeChange(e,t,n){if(n.adjust)return;const p=this.get(l)==="video"?"video":"image";this.addAttributes({[L]:p,href:""})},adjustSourceType(){const e=this.get(l),t=this.getAttributes().href||"",n={adjust:!0};if(e==="video"){const s=t.includes("youtube.com")?"youtube":"video";this.addAttributes({[L]:s},n)}else e!=="el"&&t.startsWith("#")?this.set(l,"el",n):e==="image"&&this.addAttributes({[L]:"image"},n)},updateTraits(e={}){const{changed:t}=this,{init:n}=e;if(t[k.name]||n){this.removeTrait([I.name,C.name,V.name]);const s=this.get(l)||"image",p=this.getTraitIndex(l)+1;this.addTrait(P[s],{at:p})}},initToolbar(){if(!w)return;const{toolbar:e}=this,t=H(this);!e.find(s=>s.id===t.id)&&(e==null||e.unshift(t))}},view:{onRender(){this.el.__skipLb=!0},toggleLightbox(){var g;const{em:e,el:t,model:n}=this,{Canvas:s}=e,p=n.getAttributes()[T],{defaultView:d,documentElement:x}=t.ownerDocument,y=(g=d.fsLightboxInstances)==null?void 0:g[p];if(x.classList.contains(Q))y.close();else{t.__skipLb=!1;let m;y.props.onOpen=()=>{m=s.getSpots(),setTimeout(()=>s.removeSpots())},y.props.onClose=()=>{m.forEach(S=>s.addSpot(S.attributes))},t.click()}}}}),J({editor:o,licenseKey:r.licenseKey,pluginName:Y,cleanup:()=>{c.remove(b),a.removeType(b)}})},et=q(tt);module.exports=et;

package/dist/fsLightboxComponent/index.d.ts

@@ -0,0 +1,3 @@
+import { FsLightboxComponentOptions } from './types';
+declare const _default: import('../utils').PluginWithInit<FsLightboxComponentOptions>;
+export default _default;

package/dist/fsLightboxComponent/index.es.d.ts

@@ -0,0 +1,3 @@
+import { FsLightboxComponentOptions } from './types';
+declare const _default: import('../utils').PluginWithInit<FsLightboxComponentOptions>;
+export default _default;

package/dist/fsLightboxComponent/index.es.js

@@ -0,0 +1,265 @@
+import "react";
+const _ = "app.grapesjs.com", D = "app-stage.grapesjs.com", O = [
+  _,
+  D,
+  "localhost",
+  "127.0.0.1",
+  ".local-credentialless.webcontainer.io",
+  // For stackblitz.com demos
+  ".local.webcontainer.io",
+  // For stackblitz.com demos
+  "-sandpack.codesandbox.io"
+  // For Sandpack demos
+], $ = "license:check:start", B = "license:check:end", M = () => typeof window < "u", W = ({ isDev: o, isStage: i }) => `${o ? "" : `https://${i ? D : _}`}/api`, R = () => {
+  const o = M() && window.location.hostname;
+  return !!o && (O.includes(o) || O.some((i) => o.endsWith(i)));
+}, U = () => (M() && window.location.hostname) === _;
+var G = { NODE_ENV: "production", NPM_PACKAGE_VERSION: "1.0.8", STUDIO_NPM_PACKAGE_VERSION: "1.0.25" };
+const K = G.NODE_ENV !== "production";
+async function F({
+  path: o,
+  method: i = "GET",
+  headers: c = {},
+  body: a
+}) {
+  const u = `${W({ isDev: K, isStage: !U() })}${o}`, r = {
+    method: i,
+    headers: {
+      "Content-Type": "application/json",
+      ...c
+    }
+  };
+  a && (r.body = JSON.stringify(a));
+  const v = await fetch(u, r);
+  if (!v.ok)
+    throw new Error(`HTTP error! status: ${v.status}`);
+  return v.json();
+}
+function Z(o) {
+  const i = o;
+  return i.init = (c) => (a) => o(a, c), i;
+}
+const J = (o) => /* @__PURE__ */ Z(o);
+async function q({
+  editor: o,
+  pluginName: i,
+  licenseKey: c,
+  cleanup: a
+}) {
+  let h = !1;
+  const u = R();
+  o.on($, () => {
+    h = !0;
+  }), o.on(B, ({ sdkLicense: r }) => {
+    r || a();
+  }), setTimeout(async () => {
+    if (!h) {
+      if (u) return;
+      c && await z({ licenseKey: c, pluginName: i }) || a();
+    }
+  }, 2e3);
+}
+async function z({ licenseKey: o, pluginName: i }) {
+  try {
+    const c = await F({
+      path: `/sdk/${o}`,
+      method: "POST",
+      body: JSON.stringify({
+        d: window.location.hostname,
+        pn: i
+      })
+    }), { license: a } = c.result || {};
+    return !!a;
+  } catch (c) {
+    return console.error("Error during SDK license check:", c), !1;
+  }
+}
+const X = "gjs-plg-", Y = "fsLightboxComponent", T = "data-fslightbox", L = "data-type", Q = "fslightbox-open", b = "fslightbox", f = {
+  image: '<svg viewBox="0 0 24 24"><path d="m8.5 13.5 2.5 3 3.5-4.5 4.5 6H5m16 1V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2Z"/></svg>',
+  video: '<svg viewBox="0 0 24 24"><path d="M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4Z"/></svg>',
+  imageLightbox: '<svg viewBox="0 0 24 24"><path d="M4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H16L12,22L8,18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2M19,15V7L15,11L13,9L7,15H19M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z" /></svg>',
+  external: '<svg viewBox="0 0 24 24"><path d="M14 3v2h3.6l-9.8 9.8 1.4 1.4L19 6.4V10h2V3m-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-7h-2v7z"/></svg>',
+  eye: '<svg viewBox="0 0 24 24"><path d="M12 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5 5 5 0 0 1 5-5 5 5 0 0 1 5 5 5 5 0 0 1-5 5m0-12.5C7 4.5 2.7 7.6 1 12a11.8 11.8 0 0 0 22 0c-1.7-4.4-6-7.5-11-7.5Z"/></svg>'
+}, tt = function(o, i = {}) {
+  const { Blocks: c, Components: a } = o, h = "Lightbox", u = `${X}${b}`, r = {
+    toolbarIconOpen: f.eye,
+    block: {},
+    defaultSrc: "https://placehold.co/300/777/white.png?text=Image",
+    cdnScript: "https://cdn.jsdelivr.net/npm/fslightbox@3.4.2/index.js",
+    ...i
+  }, { block: v, toolbarIconOpen: w, defaultSrc: A } = r, j = function(e) {
+    const t = this, n = "data-fslightbox", s = window, p = () => {
+      var E;
+      const d = s.refreshFsLightbox;
+      d == null || d();
+      const x = t.getAttribute(n);
+      if ((E = s.fsLightboxInstances) == null || E[x], !s._isEditor) return;
+      Array.from(document.querySelectorAll(`[${n}]`)).forEach((g) => {
+        const m = g.onclick;
+        g.onclick = function(S) {
+          S.preventDefault();
+          const N = g;
+          !N.__skipLb && (m == null || m(S)), N.__skipLb = !0;
+        };
+      });
+    };
+    if (s.refreshFsLightbox)
+      p();
+    else {
+      const d = document.createElement("script");
+      d.src = e.cdnScript, d.onload = p, document.head.appendChild(d);
+    }
+  }, H = (e) => ({
+    id: `${b}-open-lb`,
+    label: w,
+    command: () => {
+      const t = e.getView();
+      t == null || t.toggleLightbox();
+    }
+  }), l = "source-type", k = {
+    type: "radio",
+    name: l,
+    label: "Source type",
+    changeProp: !0,
+    options: [
+      { id: "image", label: "Image", icon: f.image },
+      { id: "video", label: "Video", icon: f.video },
+      { id: "el", label: "Custom Element", icon: f.external }
+    ],
+    // @ts-expect-error Studio related prop
+    labelToTitle: !0
+  }, I = {
+    id: "href-image",
+    name: "href",
+    type: "file",
+    label: "Source Image"
+  }, C = {
+    id: "href-video",
+    name: "href",
+    label: "Source Video",
+    placeholder: "https://www.youtube.com/watch?v=..."
+  }, V = {
+    id: "href-el",
+    name: "href",
+    label: "Source Element",
+    placeholder: "#custom-element-id"
+  }, P = {
+    image: [I],
+    video: [C],
+    el: [V]
+  };
+  a.addType(b, {
+    block: v && {
+      label: h,
+      media: f.imageLightbox,
+      category: "Extra",
+      select: !0,
+      ...r.block
+    },
+    isComponent: (e) => {
+      var t;
+      return (t = e.hasAttribute) == null ? void 0 : t.call(e, T);
+    },
+    extendFn: ["initToolbar"],
+    model: {
+      defaults: {
+        tagName: "a",
+        name: h,
+        icon: f.imageLightbox,
+        classes: u,
+        draggable: (e, t) => !t.is(b),
+        attributes: {
+          [T]: "lightbox",
+          [L]: "image",
+          href: A
+        },
+        components: { type: "image", src: A },
+        script: j,
+        cdnScript: r.cdnScript,
+        "script-props": ["attributes", "cdnScript"],
+        [l]: "image",
+        traits: [
+          k,
+          {
+            name: T,
+            label: "Group name"
+          },
+          {
+            type: "button",
+            label: "Toggle Lightbox",
+            command(e, t) {
+              var s;
+              const n = (s = t.target) == null ? void 0 : s.getView();
+              n == null || n.toggleLightbox();
+            }
+          }
+        ],
+        styles: `
+          .${u} {
+            display: inline-block;
+            padding: 10px;
+          }
+        `
+      },
+      init() {
+        const e = [l].map((t) => `change:${t}`).join(" ");
+        this.on(e, this.updateTraits), this.on(`change:${l}`, this.onSourceTypeChange), this.on("change:attributes:href", this.adjustSourceType), this.updateTraits({ init: !0 }), this.adjustSourceType();
+      },
+      onSourceTypeChange(e, t, n) {
+        if (n.adjust) return;
+        const p = this.get(l) === "video" ? "video" : "image";
+        this.addAttributes({ [L]: p, href: "" });
+      },
+      adjustSourceType() {
+        const e = this.get(l), t = this.getAttributes().href || "", n = { adjust: !0 };
+        if (e === "video") {
+          const s = t.includes("youtube.com") ? "youtube" : "video";
+          this.addAttributes({ [L]: s }, n);
+        } else e !== "el" && t.startsWith("#") ? this.set(l, "el", n) : e === "image" && this.addAttributes({ [L]: "image" }, n);
+      },
+      updateTraits(e = {}) {
+        const { changed: t } = this, { init: n } = e;
+        if (t[k.name] || n) {
+          this.removeTrait([I.name, C.name, V.name]);
+          const s = this.get(l) || "image", p = this.getTraitIndex(l) + 1;
+          this.addTrait(P[s], { at: p });
+        }
+      },
+      initToolbar() {
+        if (!w) return;
+        const { toolbar: e } = this, t = H(this);
+        !e.find((s) => s.id === t.id) && (e == null || e.unshift(t));
+      }
+    },
+    view: {
+      onRender() {
+        this.el.__skipLb = !0;
+      },
+      toggleLightbox() {
+        var g;
+        const { em: e, el: t, model: n } = this, { Canvas: s } = e, p = n.getAttributes()[T], { defaultView: d, documentElement: x } = t.ownerDocument, y = (g = d.fsLightboxInstances) == null ? void 0 : g[p];
+        if (x.classList.contains(Q))
+          y.close();
+        else {
+          t.__skipLb = !1;
+          let m;
+          y.props.onOpen = () => {
+            m = s.getSpots(), setTimeout(() => s.removeSpots());
+          }, y.props.onClose = () => {
+            m.forEach((S) => s.addSpot(S.attributes));
+          }, t.click();
+        }
+      }
+    }
+  }), q({
+    editor: o,
+    licenseKey: r.licenseKey,
+    pluginName: Y,
+    cleanup: () => {
+      c.remove(b), a.removeType(b);
+    }
+  });
+}, ot = J(tt);
+export {
+  ot as default
+};

package/dist/fsLightboxComponent/index.umd.js

@@ -0,0 +1,6 @@
+(function(u,h){typeof exports=="object"&&typeof module<"u"?module.exports=h(require("react")):typeof define=="function"&&define.amd?define(["react"],h):(u=typeof globalThis<"u"?globalThis:u||self,u.StudioSdkPlugins_fsLightboxComponent=h())})(this,function(){"use strict";const u="app.grapesjs.com",h="app-stage.grapesjs.com",A=[u,h,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],M="license:check:start",P="license:check:end",k=()=>typeof window<"u",H=({isDev:o,isStage:i})=>`${o?"":`https://${i?h:u}`}/api`,$=()=>{const o=k()&&window.location.hostname;return!!o&&(A.includes(o)||A.some(i=>o.endsWith(i)))},B=()=>(k()&&window.location.hostname)===u;var W={NODE_ENV:"production",NPM_PACKAGE_VERSION:"1.0.8",STUDIO_NPM_PACKAGE_VERSION:"1.0.25"};const R=W.NODE_ENV!=="production";async function U({path:o,method:i="GET",headers:c={},body:a}){const f=`${H({isDev:R,isStage:!B()})}${o}`,r={method:i,headers:{"Content-Type":"application/json",...c}};a&&(r.body=JSON.stringify(a));const T=await fetch(f,r);if(!T.ok)throw new Error(`HTTP error! status: ${T.status}`);return T.json()}function G(o){const i=o;return i.init=c=>a=>o(a,c),i}const K=o=>G(o);async function F({editor:o,pluginName:i,licenseKey:c,cleanup:a}){let b=!1;const f=$();o.on(M,()=>{b=!0}),o.on(P,({sdkLicense:r})=>{r||a()}),setTimeout(async()=>{if(!b){if(f)return;c&&await Z({licenseKey:c,pluginName:i})||a()}},2e3)}async function Z({licenseKey:o,pluginName:i}){try{const c=await U({path:`/sdk/${o}`,method:"POST",body:JSON.stringify({d:window.location.hostname,pn:i})}),{license:a}=c.result||{};return!!a}catch(c){return console.error("Error during SDK license check:",c),!1}}const q="gjs-plg-",J="fsLightboxComponent",v="data-fslightbox",L="data-type",z="fslightbox-open",g="fslightbox",m={image:'<svg viewBox="0 0 24 24"><path d="m8.5 13.5 2.5 3 3.5-4.5 4.5 6H5m16 1V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2Z"/></svg>',video:'<svg viewBox="0 0 24 24"><path d="M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4Z"/></svg>',imageLightbox:'<svg viewBox="0 0 24 24"><path d="M4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H16L12,22L8,18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2M19,15V7L15,11L13,9L7,15H19M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z" /></svg>',external:'<svg viewBox="0 0 24 24"><path d="M14 3v2h3.6l-9.8 9.8 1.4 1.4L19 6.4V10h2V3m-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-7h-2v7z"/></svg>',eye:'<svg viewBox="0 0 24 24"><path d="M12 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5 5 5 0 0 1 5-5 5 5 0 0 1 5 5 5 5 0 0 1-5 5m0-12.5C7 4.5 2.7 7.6 1 12a11.8 11.8 0 0 0 22 0c-1.7-4.4-6-7.5-11-7.5Z"/></svg>'};return K(function(o,i={}){const{Blocks:c,Components:a}=o,b="Lightbox",f=`${q}${g}`,r={toolbarIconOpen:m.eye,block:{},defaultSrc:"https://placehold.co/300/777/white.png?text=Image",cdnScript:"https://cdn.jsdelivr.net/npm/fslightbox@3.4.2/index.js",...i},{block:T,toolbarIconOpen:C,defaultSrc:I}=r,X=function(t){const e=this,s="data-fslightbox",n=window,p=()=>{var w;const d=n.refreshFsLightbox;d==null||d();const E=e.getAttribute(s);if((w=n.fsLightboxInstances)==null||w[E],!n._isEditor)return;Array.from(document.querySelectorAll(`[${s}]`)).forEach(y=>{const S=y.onclick;y.onclick=function(_){_.preventDefault();const D=y;!D.__skipLb&&(S==null||S(_)),D.__skipLb=!0}})};if(n.refreshFsLightbox)p();else{const d=document.createElement("script");d.src=t.cdnScript,d.onload=p,document.head.appendChild(d)}},Y=t=>({id:`${g}-open-lb`,label:C,command:()=>{const e=t.getView();e==null||e.toggleLightbox()}}),l="source-type",V={type:"radio",name:l,label:"Source type",changeProp:!0,options:[{id:"image",label:"Image",icon:m.image},{id:"video",label:"Video",icon:m.video},{id:"el",label:"Custom Element",icon:m.external}],labelToTitle:!0},N={id:"href-image",name:"href",type:"file",label:"Source Image"},O={id:"href-video",name:"href",label:"Source Video",placeholder:"https://www.youtube.com/watch?v=..."},j={id:"href-el",name:"href",label:"Source Element",placeholder:"#custom-element-id"},Q={image:[N],video:[O],el:[j]};a.addType(g,{block:T&&{label:b,media:m.imageLightbox,category:"Extra",select:!0,...r.block},isComponent:t=>{var e;return(e=t.hasAttribute)==null?void 0:e.call(t,v)},extendFn:["initToolbar"],model:{defaults:{tagName:"a",name:b,icon:m.imageLightbox,classes:f,draggable:(t,e)=>!e.is(g),attributes:{[v]:"lightbox",[L]:"image",href:I},components:{type:"image",src:I},script:X,cdnScript:r.cdnScript,"script-props":["attributes","cdnScript"],[l]:"image",traits:[V,{name:v,label:"Group name"},{type:"button",label:"Toggle Lightbox",command(t,e){var n;const s=(n=e.target)==null?void 0:n.getView();s==null||s.toggleLightbox()}}],styles:`
+          .${f} {
+            display: inline-block;
+            padding: 10px;
+          }
+        `},init(){const t=[l].map(e=>`change:${e}`).join(" ");this.on(t,this.updateTraits),this.on(`change:${l}`,this.onSourceTypeChange),this.on("change:attributes:href",this.adjustSourceType),this.updateTraits({init:!0}),this.adjustSourceType()},onSourceTypeChange(t,e,s){if(s.adjust)return;const p=this.get(l)==="video"?"video":"image";this.addAttributes({[L]:p,href:""})},adjustSourceType(){const t=this.get(l),e=this.getAttributes().href||"",s={adjust:!0};if(t==="video"){const n=e.includes("youtube.com")?"youtube":"video";this.addAttributes({[L]:n},s)}else t!=="el"&&e.startsWith("#")?this.set(l,"el",s):t==="image"&&this.addAttributes({[L]:"image"},s)},updateTraits(t={}){const{changed:e}=this,{init:s}=t;if(e[V.name]||s){this.removeTrait([N.name,O.name,j.name]);const n=this.get(l)||"image",p=this.getTraitIndex(l)+1;this.addTrait(Q[n],{at:p})}},initToolbar(){if(!C)return;const{toolbar:t}=this,e=Y(this);!t.find(n=>n.id===e.id)&&(t==null||t.unshift(e))}},view:{onRender(){this.el.__skipLb=!0},toggleLightbox(){var y;const{em:t,el:e,model:s}=this,{Canvas:n}=t,p=s.getAttributes()[v],{defaultView:d,documentElement:E}=e.ownerDocument,x=(y=d.fsLightboxInstances)==null?void 0:y[p];if(E.classList.contains(z))x.close();else{e.__skipLb=!1;let S;x.props.onOpen=()=>{S=n.getSpots(),setTimeout(()=>n.removeSpots())},x.props.onClose=()=>{S.forEach(_=>n.addSpot(_.attributes))},e.click()}}}}),F({editor:o,licenseKey:r.licenseKey,pluginName:J,cleanup:()=>{c.remove(g),a.removeType(g)}})})});

package/dist/fsLightboxComponent/types.d.ts

@@ -0,0 +1,37 @@
+import { SetAttrOptions } from 'grapesjs';
+import { SDKPluginOptions } from '../utils';
+export interface FsLightboxComponentOptions extends SDKPluginOptions {
+    /**
+     * Block options for the component. See https://grapesjs.com/docs/api/block.html#properties for more information.
+     * @example
+     * { category: 'Extra', label: 'My label' }
+     */
+    block?: object | false;
+    /**
+     * SVG toolbar button icon for opening the lightbox.
+     * You can pass an empty string to avoid adding the toolbar button.
+     * @example
+     * '<svg viewBox="0 0 24 24"><path d="M12 9a3 3 0...'
+     */
+    toolbarIconOpen?: string;
+    /**
+     * Default source for the lightbox component.
+     * @example
+     * 'https://placehold.co/300/777/white.png?text=Image'
+     */
+    defaultSrc?: string;
+    /**
+     * CDN script to load dynamically in case the library is not available.
+     * @example
+     * 'https://cdn.jsdelivr.net/npm/fslightbox@3.4.2/index.js'
+     */
+    cdnScript?: string;
+}
+export interface AdjustOptions extends SetAttrOptions {
+    adjust?: boolean;
+}
+export interface ComponentWindow extends Window {
+    refreshFsLightbox?: () => void;
+    fsLightboxInstances?: Record<string, any>;
+    _isEditor?: boolean;
+}

package/dist/fsLightboxComponent/typesSchema.d.ts

@@ -0,0 +1,3 @@
+import { FsLightboxComponentOptions } from './types';
+export interface FsLightboxComponentOptionsSchema extends FsLightboxComponentOptions {
+}

package/dist/index.cjs.d.ts

@@ -1,4 +1,5 @@
 export { default as dialogComponent } from './dialogComponent';
 export { default as tableComponent } from './tableComponent';
 export { default as listPagesComponent } from './listPagesComponent';
+export { default as fsLightboxComponent } from './fsLightboxComponent';
 export { default as rteProseMirror } from './prosemirror';