@grapesjs/studio-sdk-plugins 1.0.13 → 1.0.14-rc.0

package/dist/youtubeAssetProvider/index.cjs.js

@@ -1 +1 @@
-"use strict";require("grapesjs");var g=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(g||{}),h=(e=>(e.toastAdd="studio:toastAdd",e.dialogOpen="studio:dialogOpen",e.dialogClose="studio:dialogClose",e.sidebarLeftSet="studio:sidebarLeft:set",e.sidebarLeftGet="studio:sidebarLeft:get",e.sidebarLeftToggle="studio:sidebarLeft:toggle",e.sidebarRightSet="studio:sidebarRight:set",e.sidebarRightGet="studio:sidebarRight:get",e.sidebarRightToggle="studio:sidebarRight:toggle",e.sidebarTopSet="studio:sidebarTop:set",e.sidebarTopGet="studio:sidebarTop:get",e.sidebarTopToggle="studio:sidebarTop:toggle",e.sidebarBottomSet="studio:sidebarBottom:set",e.sidebarBottomGet="studio:sidebarBottom:get",e.sidebarBottomToggle="studio:sidebarBottom:toggle",e.symbolAdd="studio:symbolAdd",e.symbolDetach="studio:symbolDetach",e.symbolOverride="studio:symbolOverride",e.symbolPropagateStyles="studio:propagateStyles",e.getPagesConfig="studio:getPagesConfig",e.setPagesConfig="studio:setPagesConfig",e.getPageSettings="studio:getPageSettings",e.setPageSettings="studio:setPageSettings",e.projectFiles="studio:projectFiles",e.canvasReload="studio:canvasReload",e.getBlocksPanel="studio:getBlocksPanel",e.setBlocksPanel="studio:setBlocksPanel",e.getStateContextMenu="studio:getStateContextMenu",e.setStateContextMenu="studio:setStateContextMenu",e.contextMenuComponent="studio:contextMenuComponent",e.layoutAdd="studio:layoutAdd",e.layoutRemove="studio:layoutRemove",e.layoutToggle="studio:layoutToggle",e.getStateTheme="studio:getStateTheme",e.setStateTheme="studio:setStateTheme",e.assetProviderGet="studio:assetProviderGet",e.assetProviderAdd="studio:assetProviderAdd",e.assetProviderRemove="studio:assetProviderRemove",e))(h||{});const v="app.grapesjs.com",P="app-stage.grapesjs.com",f=[v,P,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],k="license:check:start",R="license:check:end",U=()=>typeof window<"u",x=({isDev:e,isStage:o})=>`${e?"":`https://${o?P:v}`}/api`,I=()=>{const e=U()&&window.location.hostname;return!!e&&(f.includes(e)||f.some(o=>e.endsWith(o)))};async function $({path:e,baseApiUrl:o,method:r="GET",headers:n={},params:c,body:l}){const t=`${o||x({isDev:!1,isStage:!1})}${e}`,i={method:r,headers:{"Content-Type":"application/json",...n}};l&&(i.body=JSON.stringify(l));const a=c?new URLSearchParams(c).toString():"",s=a?`?${a}`:"",u=await fetch(`${t}${s}`,i);if(!u.ok)throw new Error(`HTTP error! status: ${u.status}`);return u.json()}const T={[g.free]:0,[g.startup]:10,[g.business]:20,[g.enterprise]:30};function O(e){const o=e;return o.init=r=>n=>e(n,r),o}const M=e=>O(e);async function B({editor:e,plan:o,pluginName:r,licenseKey:n,cleanup:c}){let l="",d=!1;const t=I(),i=s=>{console.warn("Cleanup plugin:",r,"Reason:",s),c()},a=(s={})=>{var b;const{error:u,sdkLicense:y}=s,p=(b=s.plan)==null?void 0:b.category;if(!(y||s.license)||u)i(u||"Invalid license");else if(p){const A=T[o],L=T[p];A>L&&i({pluginRequiredPlan:o,licensePlan:p})}};e.on(k,s=>{l=s==null?void 0:s.baseApiUrl,d=!0}),e.on(R,s=>{a(s)}),setTimeout(async()=>{if(!d){if(t)return;if(n){const s=await E({licenseKey:n,pluginName:r,baseApiUrl:l});s&&a(s)}else i("The `licenseKey` option not provided")}},2e3)}async function E(e){const{licenseKey:o,pluginName:r,baseApiUrl:n}=e;try{return(await $({baseApiUrl:n,path:`/sdk/${o||"na"}`,method:"POST",params:{d:window.location.hostname,pn:r}})).result||{}}catch(c){return console.error("Error during SDK license check:",c),!1}}const j=e=>{const o={};for(const r of Object.keys(e)){let n=e[r];n&&(Array.isArray(n)?n=n.map(c=>c.toString()).join(","):n=n.toString(),o[r]=n)}return new URLSearchParams(o)},m=e=>{const{apiKey:o,searchParams:r,thumbnailQuality:n="high"}=e,c=(t={})=>{const a="https://www.googleapis.com/youtube/v3/search",s=j(t);return`${a}?${s}`},l=t=>{var i,a,s;return((i=t[n])==null?void 0:i.url)||((a=t.high)==null?void 0:a.url)||((s=t.medium)==null?void 0:s.url)||t.default.url},d=t=>{const i=l(t.snippet.thumbnails);return{id:t.id.videoId,src:`https://www.youtube.com/watch?v=${t.id.videoId}`,name:t.snippet.title,customData:{thumbnailUrl:i,videoItem:t}}};return{id:"youtube",types:["youtube-video"],label:"YouTube Videos",search:{reloadOnInput:!0,debounceMs:1e3},async onLoad({searchValue:t,pageCustomData:i}){var b;const a={maxResults:25,q:t,pageToken:i==null?void 0:i.token,type:["video"],key:o},s=r==null?void 0:r({searchValue:t}),u={...a,...s};u.part?u.part.includes("snippet")||u.part.push("snippet"):u.part=["snippet"];const p=await(await fetch(c(u))).json();return(b=p.items)!=null&&b.length?{items:p.items.map(d),nextPageCustomData:{token:p.nextPageToken},isLastPage:!p.nextPageToken}:{items:[],isLastPage:!0}},itemLayout:({assetProps:t,onSelect:i})=>({type:"column",onClick:()=>i(t),htmlAttrs:{title:t.name},style:{border:"1px solid gray",borderRadius:8,overflow:"hidden",cursor:"pointer"},children:[{type:"custom",render:()=>{var a;return`<img src="${(a=t.customData)==null?void 0:a.thumbnailUrl}" alt="${t.name}" style="width: 100%; height: 100px; object-fit: cover">`}},{type:"text",content:t.name,style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",paddingLeft:8,paddingRight:8}}]})}},D="youtubeAssetProvider",G=function(e,o){const{skipVideoComponent:r}=o,n=m(o);e.runCommand(h.assetProviderAdd,{provider:n});const c="search-on-youtube",l="video";if(!r){const d=e.Components.getType(l).model.prototype;e.Components.addType(l,{model:{getYoutubeTraits(){const[t,...i]=d.getYoutubeTraits.apply(this);return[t,{id:c,type:"button",label:e.I18n.t("youtube.searchBtn"),command:()=>{e.AssetManager.open({select:a=>{e.Assets.close(),this.set({videoId:a.attributes.id})},content:{header:{addUrl:!1,upload:!1}}})}},...i]}}})}B({editor:e,licenseKey:o.licenseKey,plan:g.startup,pluginName:D,cleanup:()=>{if(e.runCommand(h.assetProviderRemove,{id:n.id}),!r){const d=e.Components.getType(l).model.prototype;e.Components.addType(l,{model:{getYoutubeTraits(){return d.getYoutubeTraits.apply(this).filter(t=>t.id!==c)}}})}}})},N=M(G);module.exports=N;
+"use strict";require("grapesjs");var g=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(g||{}),h=(e=>(e.toastAdd="studio:toastAdd",e.dialogOpen="studio:dialogOpen",e.dialogClose="studio:dialogClose",e.sidebarLeftSet="studio:sidebarLeft:set",e.sidebarLeftGet="studio:sidebarLeft:get",e.sidebarLeftToggle="studio:sidebarLeft:toggle",e.sidebarRightSet="studio:sidebarRight:set",e.sidebarRightGet="studio:sidebarRight:get",e.sidebarRightToggle="studio:sidebarRight:toggle",e.sidebarTopSet="studio:sidebarTop:set",e.sidebarTopGet="studio:sidebarTop:get",e.sidebarTopToggle="studio:sidebarTop:toggle",e.sidebarBottomSet="studio:sidebarBottom:set",e.sidebarBottomGet="studio:sidebarBottom:get",e.sidebarBottomToggle="studio:sidebarBottom:toggle",e.symbolAdd="studio:symbolAdd",e.symbolDetach="studio:symbolDetach",e.symbolOverride="studio:symbolOverride",e.symbolPropagateStyles="studio:propagateStyles",e.getPagesConfig="studio:getPagesConfig",e.setPagesConfig="studio:setPagesConfig",e.getPageSettings="studio:getPageSettings",e.setPageSettings="studio:setPageSettings",e.projectFiles="studio:projectFiles",e.canvasReload="studio:canvasReload",e.getBlocksPanel="studio:getBlocksPanel",e.setBlocksPanel="studio:setBlocksPanel",e.getStateContextMenu="studio:getStateContextMenu",e.setStateContextMenu="studio:setStateContextMenu",e.contextMenuComponent="studio:contextMenuComponent",e.layoutAdd="studio:layoutAdd",e.layoutRemove="studio:layoutRemove",e.layoutToggle="studio:layoutToggle",e.getStateTheme="studio:getStateTheme",e.setStateTheme="studio:setStateTheme",e.assetProviderGet="studio:assetProviderGet",e.assetProviderAdd="studio:assetProviderAdd",e.assetProviderRemove="studio:assetProviderRemove",e))(h||{});const T="app.grapesjs.com",P="app-stage.grapesjs.com",f=[T,P,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],k="license:check:start",R="license:check:end",I=()=>typeof window<"u",U=({isDev:e,isStage:o})=>`${e?"":`https://${o?P:T}`}/api`,x=()=>{const e=I()&&window.location.hostname;return!!e&&(f.includes(e)||f.some(o=>e.endsWith(o)))};async function $({path:e,baseApiUrl:o,method:r="GET",headers:i={},params:c,body:u}){const t=`${o||U({isDev:!1,isStage:!1})}${e}`,n={method:r,headers:{"Content-Type":"application/json",...i}};u&&(n.body=JSON.stringify(u));const a=c?new URLSearchParams(c).toString():"",s=a?`?${a}`:"",l=await fetch(`${t}${s}`,n);if(!l.ok)throw new Error(`HTTP error! status: ${l.status}`);return l.json()}const v={[g.free]:0,[g.startup]:10,[g.business]:20,[g.enterprise]:30};function M(e){const o=e;return o.init=r=>i=>e(i,r),o}const O=e=>M(e);async function B({editor:e,plan:o,pluginName:r,licenseKey:i,cleanup:c}){let u="",d=!1;const t=x(),n=s=>{console.warn("Cleanup plugin:",r,"Reason:",s),c()},a=(s={})=>{var b;const{error:l,sdkLicense:y}=s,p=(b=s.plan)==null?void 0:b.category;if(!(y||s.license)||l)n(l||"Invalid license");else if(p){const A=v[o],L=v[p];A>L&&n({pluginRequiredPlan:o,licensePlan:p})}};e.on(k,s=>{u=s==null?void 0:s.baseApiUrl,d=!0}),e.on(R,s=>{a(s)}),setTimeout(async()=>{if(!d){if(t)return;if(i){const s=await E({licenseKey:i,pluginName:r,baseApiUrl:u});s&&a(s)}else n("The `licenseKey` option not provided")}},2e3)}async function E(e){const{licenseKey:o,pluginName:r,baseApiUrl:i}=e;try{return(await $({baseApiUrl:i,path:`/sdk/${o||"na"}`,method:"POST",params:{d:window.location.hostname,pn:r}})).result||{}}catch(c){return console.error("Error during SDK license check:",c),!1}}const j=e=>{const o={};for(const r of Object.keys(e)){let i=e[r];i&&(Array.isArray(i)?i=i.map(c=>c.toString()).join(","):i=i.toString(),o[r]=i)}return new URLSearchParams(o)},m=e=>{const{apiKey:o,searchParams:r,thumbnailQuality:i="high"}=e,c=(t={})=>{const a="https://www.googleapis.com/youtube/v3/search",s=j(t);return`${a}?${s}`},u=t=>{var n,a,s;return((n=t[i])==null?void 0:n.url)||((a=t.high)==null?void 0:a.url)||((s=t.medium)==null?void 0:s.url)||t.default.url},d=t=>{const n=u(t.snippet.thumbnails);return{id:t.id.videoId,src:`https://www.youtube.com/watch?v=${t.id.videoId}`,name:t.snippet.title,customData:{thumbnailUrl:n,videoItem:t}}};return{id:"youtube",types:["youtube-video"],label:({editor:t})=>t.I18n.t("youtubeAssetProvider.providerLabel"),search:{reloadOnInput:!0,debounceMs:1e3},async onLoad({searchValue:t,pageCustomData:n}){var b;const a={maxResults:25,q:t,pageToken:n==null?void 0:n.token,type:["video"],key:o},s=r==null?void 0:r({searchValue:t}),l={...a,...s};l.part?l.part.includes("snippet")||l.part.push("snippet"):l.part=["snippet"];const p=await(await fetch(c(l))).json();return(b=p.items)!=null&&b.length?{items:p.items.map(d),nextPageCustomData:{token:p.nextPageToken},isLastPage:!p.nextPageToken}:{items:[],isLastPage:!0}},itemLayout:({assetProps:t,onSelect:n})=>({type:"column",onClick:()=>n(t),htmlAttrs:{title:t.name},style:{border:"1px solid gray",borderRadius:8,overflow:"hidden",cursor:"pointer"},children:[{type:"custom",render:()=>{var a;return`<img src="${(a=t.customData)==null?void 0:a.thumbnailUrl}" alt="${t.name}" style="width: 100%; height: 100px; object-fit: cover">`}},{type:"text",content:t.name,style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",paddingLeft:8,paddingRight:8}}]})}},D={youtubeAssetProvider:{searchBtn:"Search on YouTube",providerLabel:"YouTube Videos"}},G="youtubeAssetProvider",N=function(e,o){const{skipVideoComponent:r,i18n:i={}}=o,c=m(o);e.runCommand(h.assetProviderAdd,{provider:c});const u="search-on-youtube",d="video";if(!r){const t=e.Components.getType(d).model.prototype;e.Components.addType(d,{model:{getYoutubeTraits(){const[n,...a]=t.getYoutubeTraits.apply(this);return[n,{id:u,type:"button",label:e.I18n.t("youtubeAssetProvider.searchBtn"),command:()=>{e.AssetManager.open({providerId:c.id,providers:[],types:[],select:s=>{e.Assets.close(),this.set({videoId:s.attributes.id})},content:{header:{addUrl:!1,upload:!1}}})}},...a]}}})}e.I18n.addMessages({en:D,...i}),B({editor:e,licenseKey:o.licenseKey,plan:g.startup,pluginName:G,cleanup:()=>{if(e.runCommand(h.assetProviderRemove,{id:c.id}),!r){const t=e.Components.getType(d).model.prototype;e.Components.addType(d,{model:{getYoutubeTraits(){return t.getYoutubeTraits.apply(this).filter(n=>n.id!==u)}}})}}})},W=O(N);module.exports=W;

package/dist/youtubeAssetProvider/index.es.js

@@ -1,7 +1,7 @@
 import "grapesjs";
 var g = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(g || {}), h = /* @__PURE__ */ ((e) => (e.toastAdd = "studio:toastAdd", e.dialogOpen = "studio:dialogOpen", e.dialogClose = "studio:dialogClose", e.sidebarLeftSet = "studio:sidebarLeft:set", e.sidebarLeftGet = "studio:sidebarLeft:get", e.sidebarLeftToggle = "studio:sidebarLeft:toggle", e.sidebarRightSet = "studio:sidebarRight:set", e.sidebarRightGet = "studio:sidebarRight:get", e.sidebarRightToggle = "studio:sidebarRight:toggle", e.sidebarTopSet = "studio:sidebarTop:set", e.sidebarTopGet = "studio:sidebarTop:get", e.sidebarTopToggle = "studio:sidebarTop:toggle", e.sidebarBottomSet = "studio:sidebarBottom:set", e.sidebarBottomGet = "studio:sidebarBottom:get", e.sidebarBottomToggle = "studio:sidebarBottom:toggle", e.symbolAdd = "studio:symbolAdd", e.symbolDetach = "studio:symbolDetach", e.symbolOverride = "studio:symbolOverride", e.symbolPropagateStyles = "studio:propagateStyles", e.getPagesConfig = "studio:getPagesConfig", e.setPagesConfig = "studio:setPagesConfig", e.getPageSettings = "studio:getPageSettings", e.setPageSettings = "studio:setPageSettings", e.projectFiles = "studio:projectFiles", e.canvasReload = "studio:canvasReload", e.getBlocksPanel = "studio:getBlocksPanel", e.setBlocksPanel = "studio:setBlocksPanel", e.getStateContextMenu = "studio:getStateContextMenu", e.setStateContextMenu = "studio:setStateContextMenu", e.contextMenuComponent = "studio:contextMenuComponent", e.layoutAdd = "studio:layoutAdd", e.layoutRemove = "studio:layoutRemove", e.layoutToggle = "studio:layoutToggle", e.getStateTheme = "studio:getStateTheme", e.setStateTheme = "studio:setStateTheme", e.assetProviderGet = "studio:assetProviderGet", e.assetProviderAdd = "studio:assetProviderAdd", e.assetProviderRemove = "studio:assetProviderRemove", e))(h || {});
-const v = "app.grapesjs.com", P = "app-stage.grapesjs.com", f = [
-  v,
+const T = "app.grapesjs.com", P = "app-stage.grapesjs.com", f = [
+  T,
   P,
   "localhost",
   "127.0.0.1",
@@ -11,82 +11,82 @@ const v = "app.grapesjs.com", P = "app-stage.grapesjs.com", f = [
   // For stackblitz.com demos
   "-sandpack.codesandbox.io"
   // For Sandpack demos
-], k = "license:check:start", R = "license:check:end", U = () => typeof window < "u", x = ({ isDev: e, isStage: o }) => `${e ? "" : `https://${o ? P : v}`}/api`, I = () => {
-  const e = U() && window.location.hostname;
+], k = "license:check:start", R = "license:check:end", I = () => typeof window < "u", U = ({ isDev: e, isStage: o }) => `${e ? "" : `https://${o ? P : T}`}/api`, x = () => {
+  const e = I() && window.location.hostname;
   return !!e && (f.includes(e) || f.some((o) => e.endsWith(o)));
 };
 async function $({
   path: e,
   baseApiUrl: o,
   method: r = "GET",
-  headers: n = {},
+  headers: i = {},
   params: l,
-  body: c
+  body: u
 }) {
-  const t = `${o || x({ isDev: !1, isStage: !1 })}${e}`, i = {
+  const t = `${o || U({ isDev: !1, isStage: !1 })}${e}`, n = {
     method: r,
     headers: {
       "Content-Type": "application/json",
-      ...n
+      ...i
     }
   };
-  c && (i.body = JSON.stringify(c));
-  const a = l ? new URLSearchParams(l).toString() : "", s = a ? `?${a}` : "", u = await fetch(`${t}${s}`, i);
-  if (!u.ok)
-    throw new Error(`HTTP error! status: ${u.status}`);
-  return u.json();
+  u && (n.body = JSON.stringify(u));
+  const a = l ? new URLSearchParams(l).toString() : "", s = a ? `?${a}` : "", c = await fetch(`${t}${s}`, n);
+  if (!c.ok)
+    throw new Error(`HTTP error! status: ${c.status}`);
+  return c.json();
 }
-const T = {
+const v = {
   [g.free]: 0,
   [g.startup]: 10,
   [g.business]: 20,
   [g.enterprise]: 30
 };
-function O(e) {
+function M(e) {
   const o = e;
-  return o.init = (r) => (n) => e(n, r), o;
+  return o.init = (r) => (i) => e(i, r), o;
 }
-const M = (e) => /* @__PURE__ */ O(e);
+const O = (e) => /* @__PURE__ */ M(e);
 async function B({
   editor: e,
   plan: o,
   pluginName: r,
-  licenseKey: n,
+  licenseKey: i,
   cleanup: l
 }) {
-  let c = "", d = !1;
-  const t = I(), i = (s) => {
+  let u = "", d = !1;
+  const t = x(), n = (s) => {
     console.warn("Cleanup plugin:", r, "Reason:", s), l();
   }, a = (s = {}) => {
     var b;
-    const { error: u, sdkLicense: y } = s, p = (b = s.plan) == null ? void 0 : b.category;
-    if (!(y || s.license) || u)
-      i(u || "Invalid license");
+    const { error: c, sdkLicense: y } = s, p = (b = s.plan) == null ? void 0 : b.category;
+    if (!(y || s.license) || c)
+      n(c || "Invalid license");
     else if (p) {
-      const A = T[o], L = T[p];
-      A > L && i({ pluginRequiredPlan: o, licensePlan: p });
+      const A = v[o], L = v[p];
+      A > L && n({ pluginRequiredPlan: o, licensePlan: p });
     }
   };
   e.on(k, (s) => {
-    c = s == null ? void 0 : s.baseApiUrl, d = !0;
+    u = s == null ? void 0 : s.baseApiUrl, d = !0;
   }), e.on(R, (s) => {
     a(s);
   }), setTimeout(async () => {
     if (!d) {
       if (t) return;
-      if (n) {
-        const s = await E({ licenseKey: n, pluginName: r, baseApiUrl: c });
+      if (i) {
+        const s = await E({ licenseKey: i, pluginName: r, baseApiUrl: u });
         s && a(s);
       } else
-        i("The `licenseKey` option not provided");
+        n("The `licenseKey` option not provided");
     }
   }, 2e3);
 }
 async function E(e) {
-  const { licenseKey: o, pluginName: r, baseApiUrl: n } = e;
+  const { licenseKey: o, pluginName: r, baseApiUrl: i } = e;
   try {
     return (await $({
-      baseApiUrl: n,
+      baseApiUrl: i,
       path: `/sdk/${o || "na"}`,
       method: "POST",
       params: {
@@ -101,54 +101,54 @@ async function E(e) {
 const j = (e) => {
   const o = {};
   for (const r of Object.keys(e)) {
-    let n = e[r];
-    n && (Array.isArray(n) ? n = n.map((l) => l.toString()).join(",") : n = n.toString(), o[r] = n);
+    let i = e[r];
+    i && (Array.isArray(i) ? i = i.map((l) => l.toString()).join(",") : i = i.toString(), o[r] = i);
   }
   return new URLSearchParams(o);
 }, m = (e) => {
-  const { apiKey: o, searchParams: r, thumbnailQuality: n = "high" } = e, l = (t = {}) => {
+  const { apiKey: o, searchParams: r, thumbnailQuality: i = "high" } = e, l = (t = {}) => {
     const a = "https://www.googleapis.com/youtube/v3/search", s = j(t);
     return `${a}?${s}`;
-  }, c = (t) => {
-    var i, a, s;
-    return ((i = t[n]) == null ? void 0 : i.url) || ((a = t.high) == null ? void 0 : a.url) || ((s = t.medium) == null ? void 0 : s.url) || t.default.url;
+  }, u = (t) => {
+    var n, a, s;
+    return ((n = t[i]) == null ? void 0 : n.url) || ((a = t.high) == null ? void 0 : a.url) || ((s = t.medium) == null ? void 0 : s.url) || t.default.url;
   }, d = (t) => {
-    const i = c(t.snippet.thumbnails);
+    const n = u(t.snippet.thumbnails);
     return {
       id: t.id.videoId,
       src: `https://www.youtube.com/watch?v=${t.id.videoId}`,
       name: t.snippet.title,
-      customData: { thumbnailUrl: i, videoItem: t }
+      customData: { thumbnailUrl: n, videoItem: t }
     };
   };
   return {
     id: "youtube",
     types: ["youtube-video"],
-    label: "YouTube Videos",
+    label: ({ editor: t }) => t.I18n.t("youtubeAssetProvider.providerLabel"),
     search: { reloadOnInput: !0, debounceMs: 1e3 },
-    async onLoad({ searchValue: t, pageCustomData: i }) {
+    async onLoad({ searchValue: t, pageCustomData: n }) {
       var b;
       const a = {
         maxResults: 25,
         q: t,
-        pageToken: i == null ? void 0 : i.token,
+        pageToken: n == null ? void 0 : n.token,
         type: ["video"],
         key: o
-      }, s = r == null ? void 0 : r({ searchValue: t }), u = {
+      }, s = r == null ? void 0 : r({ searchValue: t }), c = {
         ...a,
         ...s
       };
-      u.part ? u.part.includes("snippet") || u.part.push("snippet") : u.part = ["snippet"];
-      const p = await (await fetch(l(u))).json();
+      c.part ? c.part.includes("snippet") || c.part.push("snippet") : c.part = ["snippet"];
+      const p = await (await fetch(l(c))).json();
       return (b = p.items) != null && b.length ? {
         items: p.items.map(d),
         nextPageCustomData: { token: p.nextPageToken },
         isLastPage: !p.nextPageToken
       } : { items: [], isLastPage: !0 };
     },
-    itemLayout: ({ assetProps: t, onSelect: i }) => ({
+    itemLayout: ({ assetProps: t, onSelect: n }) => ({
       type: "column",
-      onClick: () => i(t),
+      onClick: () => n(t),
       htmlAttrs: {
         title: t.name
       },
@@ -180,26 +180,34 @@ const j = (e) => {
       ]
     })
   };
-}, D = "youtubeAssetProvider", G = function(e, o) {
-  const { skipVideoComponent: r } = o, n = m(o);
-  e.runCommand(h.assetProviderAdd, { provider: n });
-  const l = "search-on-youtube", c = "video";
+}, D = {
+  youtubeAssetProvider: {
+    searchBtn: "Search on YouTube",
+    providerLabel: "YouTube Videos"
+  }
+}, G = "youtubeAssetProvider", N = function(e, o) {
+  const { skipVideoComponent: r, i18n: i = {} } = o, l = m(o);
+  e.runCommand(h.assetProviderAdd, { provider: l });
+  const u = "search-on-youtube", d = "video";
   if (!r) {
-    const d = e.Components.getType(c).model.prototype;
-    e.Components.addType(c, {
+    const t = e.Components.getType(d).model.prototype;
+    e.Components.addType(d, {
       model: {
         getYoutubeTraits() {
-          const [t, ...i] = d.getYoutubeTraits.apply(this);
+          const [n, ...a] = t.getYoutubeTraits.apply(this);
           return [
-            t,
+            n,
             {
-              id: l,
+              id: u,
               type: "button",
-              label: e.I18n.t("youtube.searchBtn"),
+              label: e.I18n.t("youtubeAssetProvider.searchBtn"),
               command: () => {
                 e.AssetManager.open({
-                  select: (a) => {
-                    e.Assets.close(), this.set({ videoId: a.attributes.id });
+                  providerId: l.id,
+                  providers: [],
+                  types: [],
+                  select: (s) => {
+                    e.Assets.close(), this.set({ videoId: s.attributes.id });
                   },
                   content: {
                     header: {
@@ -210,31 +218,34 @@ const j = (e) => {
                 });
               }
             },
-            ...i
+            ...a
           ];
         }
       }
     });
   }
-  B({
+  e.I18n.addMessages({
+    en: D,
+    ...i
+  }), B({
     editor: e,
     licenseKey: o.licenseKey,
     plan: g.startup,
-    pluginName: D,
+    pluginName: G,
     cleanup: () => {
-      if (e.runCommand(h.assetProviderRemove, { id: n.id }), !r) {
-        const d = e.Components.getType(c).model.prototype;
-        e.Components.addType(c, {
+      if (e.runCommand(h.assetProviderRemove, { id: l.id }), !r) {
+        const t = e.Components.getType(d).model.prototype;
+        e.Components.addType(d, {
           model: {
             getYoutubeTraits() {
-              return d.getYoutubeTraits.apply(this).filter((t) => t.id !== l);
+              return t.getYoutubeTraits.apply(this).filter((n) => n.id !== u);
             }
           }
         });
       }
     }
   });
-}, W = M(G);
+}, Y = O(N);
 export {
-  W as default
+  Y as default
 };

package/dist/youtubeAssetProvider/index.umd.js

@@ -1 +1 @@
-(function(d,b){typeof exports=="object"&&typeof module<"u"?module.exports=b(require("grapesjs")):typeof define=="function"&&define.amd?define(["grapesjs"],b):(d=typeof globalThis<"u"?globalThis:d||self,d.StudioSdkPlugins_youtubeAssetProvider=b())})(this,function(){"use strict";var d=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(d||{}),b=(e=>(e.toastAdd="studio:toastAdd",e.dialogOpen="studio:dialogOpen",e.dialogClose="studio:dialogClose",e.sidebarLeftSet="studio:sidebarLeft:set",e.sidebarLeftGet="studio:sidebarLeft:get",e.sidebarLeftToggle="studio:sidebarLeft:toggle",e.sidebarRightSet="studio:sidebarRight:set",e.sidebarRightGet="studio:sidebarRight:get",e.sidebarRightToggle="studio:sidebarRight:toggle",e.sidebarTopSet="studio:sidebarTop:set",e.sidebarTopGet="studio:sidebarTop:get",e.sidebarTopToggle="studio:sidebarTop:toggle",e.sidebarBottomSet="studio:sidebarBottom:set",e.sidebarBottomGet="studio:sidebarBottom:get",e.sidebarBottomToggle="studio:sidebarBottom:toggle",e.symbolAdd="studio:symbolAdd",e.symbolDetach="studio:symbolDetach",e.symbolOverride="studio:symbolOverride",e.symbolPropagateStyles="studio:propagateStyles",e.getPagesConfig="studio:getPagesConfig",e.setPagesConfig="studio:setPagesConfig",e.getPageSettings="studio:getPageSettings",e.setPageSettings="studio:setPageSettings",e.projectFiles="studio:projectFiles",e.canvasReload="studio:canvasReload",e.getBlocksPanel="studio:getBlocksPanel",e.setBlocksPanel="studio:setBlocksPanel",e.getStateContextMenu="studio:getStateContextMenu",e.setStateContextMenu="studio:setStateContextMenu",e.contextMenuComponent="studio:contextMenuComponent",e.layoutAdd="studio:layoutAdd",e.layoutRemove="studio:layoutRemove",e.layoutToggle="studio:layoutToggle",e.getStateTheme="studio:getStateTheme",e.setStateTheme="studio:setStateTheme",e.assetProviderGet="studio:assetProviderGet",e.assetProviderAdd="studio:assetProviderAdd",e.assetProviderRemove="studio:assetProviderRemove",e))(b||{});const f="app.grapesjs.com",y="app-stage.grapesjs.com",T=[f,y,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],w="license:check:start",A="license:check:end",k=()=>typeof window<"u",L=({isDev:e,isStage:o})=>`${e?"":`https://${o?y:f}`}/api`,R=()=>{const e=k()&&window.location.hostname;return!!e&&(T.includes(e)||T.some(o=>e.endsWith(o)))};async function x({path:e,baseApiUrl:o,method:r="GET",headers:n={},params:l,body:c}){const t=`${o||L({isDev:!1,isStage:!1})}${e}`,i={method:r,headers:{"Content-Type":"application/json",...n}};c&&(i.body=JSON.stringify(c));const a=l?new URLSearchParams(l).toString():"",s=a?`?${a}`:"",u=await fetch(`${t}${s}`,i);if(!u.ok)throw new Error(`HTTP error! status: ${u.status}`);return u.json()}const v={[d.free]:0,[d.startup]:10,[d.business]:20,[d.enterprise]:30};function U(e){const o=e;return o.init=r=>n=>e(n,r),o}const I=e=>U(e);async function $({editor:e,plan:o,pluginName:r,licenseKey:n,cleanup:l}){let c="",p=!1;const t=R(),i=s=>{console.warn("Cleanup plugin:",r,"Reason:",s),l()},a=(s={})=>{var h;const{error:u,sdkLicense:P}=s,g=(h=s.plan)==null?void 0:h.category;if(!(P||s.license)||u)i(u||"Invalid license");else if(g){const E=v[o],D=v[g];E>D&&i({pluginRequiredPlan:o,licensePlan:g})}};e.on(w,s=>{c=s==null?void 0:s.baseApiUrl,p=!0}),e.on(A,s=>{a(s)}),setTimeout(async()=>{if(!p){if(t)return;if(n){const s=await j({licenseKey:n,pluginName:r,baseApiUrl:c});s&&a(s)}else i("The `licenseKey` option not provided")}},2e3)}async function j(e){const{licenseKey:o,pluginName:r,baseApiUrl:n}=e;try{return(await x({baseApiUrl:n,path:`/sdk/${o||"na"}`,method:"POST",params:{d:window.location.hostname,pn:r}})).result||{}}catch(l){return console.error("Error during SDK license check:",l),!1}}const O=e=>{const o={};for(const r of Object.keys(e)){let n=e[r];n&&(Array.isArray(n)?n=n.map(l=>l.toString()).join(","):n=n.toString(),o[r]=n)}return new URLSearchParams(o)},M=e=>{const{apiKey:o,searchParams:r,thumbnailQuality:n="high"}=e,l=(t={})=>{const a="https://www.googleapis.com/youtube/v3/search",s=O(t);return`${a}?${s}`},c=t=>{var i,a,s;return((i=t[n])==null?void 0:i.url)||((a=t.high)==null?void 0:a.url)||((s=t.medium)==null?void 0:s.url)||t.default.url},p=t=>{const i=c(t.snippet.thumbnails);return{id:t.id.videoId,src:`https://www.youtube.com/watch?v=${t.id.videoId}`,name:t.snippet.title,customData:{thumbnailUrl:i,videoItem:t}}};return{id:"youtube",types:["youtube-video"],label:"YouTube Videos",search:{reloadOnInput:!0,debounceMs:1e3},async onLoad({searchValue:t,pageCustomData:i}){var h;const a={maxResults:25,q:t,pageToken:i==null?void 0:i.token,type:["video"],key:o},s=r==null?void 0:r({searchValue:t}),u={...a,...s};u.part?u.part.includes("snippet")||u.part.push("snippet"):u.part=["snippet"];const g=await(await fetch(l(u))).json();return(h=g.items)!=null&&h.length?{items:g.items.map(p),nextPageCustomData:{token:g.nextPageToken},isLastPage:!g.nextPageToken}:{items:[],isLastPage:!0}},itemLayout:({assetProps:t,onSelect:i})=>({type:"column",onClick:()=>i(t),htmlAttrs:{title:t.name},style:{border:"1px solid gray",borderRadius:8,overflow:"hidden",cursor:"pointer"},children:[{type:"custom",render:()=>{var a;return`<img src="${(a=t.customData)==null?void 0:a.thumbnailUrl}" alt="${t.name}" style="width: 100%; height: 100px; object-fit: cover">`}},{type:"text",content:t.name,style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",paddingLeft:8,paddingRight:8}}]})}},m="youtubeAssetProvider";return I(function(e,o){const{skipVideoComponent:r}=o,n=M(o);e.runCommand(b.assetProviderAdd,{provider:n});const l="search-on-youtube",c="video";if(!r){const p=e.Components.getType(c).model.prototype;e.Components.addType(c,{model:{getYoutubeTraits(){const[t,...i]=p.getYoutubeTraits.apply(this);return[t,{id:l,type:"button",label:e.I18n.t("youtube.searchBtn"),command:()=>{e.AssetManager.open({select:a=>{e.Assets.close(),this.set({videoId:a.attributes.id})},content:{header:{addUrl:!1,upload:!1}}})}},...i]}}})}$({editor:e,licenseKey:o.licenseKey,plan:d.startup,pluginName:m,cleanup:()=>{if(e.runCommand(b.assetProviderRemove,{id:n.id}),!r){const p=e.Components.getType(c).model.prototype;e.Components.addType(c,{model:{getYoutubeTraits(){return p.getYoutubeTraits.apply(this).filter(t=>t.id!==l)}}})}}})})});
+(function(u,b){typeof exports=="object"&&typeof module<"u"?module.exports=b(require("grapesjs")):typeof define=="function"&&define.amd?define(["grapesjs"],b):(u=typeof globalThis<"u"?globalThis:u||self,u.StudioSdkPlugins_youtubeAssetProvider=b())})(this,function(){"use strict";var u=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(u||{}),b=(e=>(e.toastAdd="studio:toastAdd",e.dialogOpen="studio:dialogOpen",e.dialogClose="studio:dialogClose",e.sidebarLeftSet="studio:sidebarLeft:set",e.sidebarLeftGet="studio:sidebarLeft:get",e.sidebarLeftToggle="studio:sidebarLeft:toggle",e.sidebarRightSet="studio:sidebarRight:set",e.sidebarRightGet="studio:sidebarRight:get",e.sidebarRightToggle="studio:sidebarRight:toggle",e.sidebarTopSet="studio:sidebarTop:set",e.sidebarTopGet="studio:sidebarTop:get",e.sidebarTopToggle="studio:sidebarTop:toggle",e.sidebarBottomSet="studio:sidebarBottom:set",e.sidebarBottomGet="studio:sidebarBottom:get",e.sidebarBottomToggle="studio:sidebarBottom:toggle",e.symbolAdd="studio:symbolAdd",e.symbolDetach="studio:symbolDetach",e.symbolOverride="studio:symbolOverride",e.symbolPropagateStyles="studio:propagateStyles",e.getPagesConfig="studio:getPagesConfig",e.setPagesConfig="studio:setPagesConfig",e.getPageSettings="studio:getPageSettings",e.setPageSettings="studio:setPageSettings",e.projectFiles="studio:projectFiles",e.canvasReload="studio:canvasReload",e.getBlocksPanel="studio:getBlocksPanel",e.setBlocksPanel="studio:setBlocksPanel",e.getStateContextMenu="studio:getStateContextMenu",e.setStateContextMenu="studio:setStateContextMenu",e.contextMenuComponent="studio:contextMenuComponent",e.layoutAdd="studio:layoutAdd",e.layoutRemove="studio:layoutRemove",e.layoutToggle="studio:layoutToggle",e.getStateTheme="studio:getStateTheme",e.setStateTheme="studio:setStateTheme",e.assetProviderGet="studio:assetProviderGet",e.assetProviderAdd="studio:assetProviderAdd",e.assetProviderRemove="studio:assetProviderRemove",e))(b||{});const y="app.grapesjs.com",f="app-stage.grapesjs.com",v=[y,f,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],w="license:check:start",A="license:check:end",L=()=>typeof window<"u",k=({isDev:e,isStage:o})=>`${e?"":`https://${o?f:y}`}/api`,R=()=>{const e=L()&&window.location.hostname;return!!e&&(v.includes(e)||v.some(o=>e.endsWith(o)))};async function x({path:e,baseApiUrl:o,method:r="GET",headers:i={},params:l,body:d}){const t=`${o||k({isDev:!1,isStage:!1})}${e}`,n={method:r,headers:{"Content-Type":"application/json",...i}};d&&(n.body=JSON.stringify(d));const a=l?new URLSearchParams(l).toString():"",s=a?`?${a}`:"",c=await fetch(`${t}${s}`,n);if(!c.ok)throw new Error(`HTTP error! status: ${c.status}`);return c.json()}const T={[u.free]:0,[u.startup]:10,[u.business]:20,[u.enterprise]:30};function I(e){const o=e;return o.init=r=>i=>e(i,r),o}const U=e=>I(e);async function $({editor:e,plan:o,pluginName:r,licenseKey:i,cleanup:l}){let d="",p=!1;const t=R(),n=s=>{console.warn("Cleanup plugin:",r,"Reason:",s),l()},a=(s={})=>{var h;const{error:c,sdkLicense:P}=s,g=(h=s.plan)==null?void 0:h.category;if(!(P||s.license)||c)n(c||"Invalid license");else if(g){const D=T[o],G=T[g];D>G&&n({pluginRequiredPlan:o,licensePlan:g})}};e.on(w,s=>{d=s==null?void 0:s.baseApiUrl,p=!0}),e.on(A,s=>{a(s)}),setTimeout(async()=>{if(!p){if(t)return;if(i){const s=await j({licenseKey:i,pluginName:r,baseApiUrl:d});s&&a(s)}else n("The `licenseKey` option not provided")}},2e3)}async function j(e){const{licenseKey:o,pluginName:r,baseApiUrl:i}=e;try{return(await x({baseApiUrl:i,path:`/sdk/${o||"na"}`,method:"POST",params:{d:window.location.hostname,pn:r}})).result||{}}catch(l){return console.error("Error during SDK license check:",l),!1}}const M=e=>{const o={};for(const r of Object.keys(e)){let i=e[r];i&&(Array.isArray(i)?i=i.map(l=>l.toString()).join(","):i=i.toString(),o[r]=i)}return new URLSearchParams(o)},O=e=>{const{apiKey:o,searchParams:r,thumbnailQuality:i="high"}=e,l=(t={})=>{const a="https://www.googleapis.com/youtube/v3/search",s=M(t);return`${a}?${s}`},d=t=>{var n,a,s;return((n=t[i])==null?void 0:n.url)||((a=t.high)==null?void 0:a.url)||((s=t.medium)==null?void 0:s.url)||t.default.url},p=t=>{const n=d(t.snippet.thumbnails);return{id:t.id.videoId,src:`https://www.youtube.com/watch?v=${t.id.videoId}`,name:t.snippet.title,customData:{thumbnailUrl:n,videoItem:t}}};return{id:"youtube",types:["youtube-video"],label:({editor:t})=>t.I18n.t("youtubeAssetProvider.providerLabel"),search:{reloadOnInput:!0,debounceMs:1e3},async onLoad({searchValue:t,pageCustomData:n}){var h;const a={maxResults:25,q:t,pageToken:n==null?void 0:n.token,type:["video"],key:o},s=r==null?void 0:r({searchValue:t}),c={...a,...s};c.part?c.part.includes("snippet")||c.part.push("snippet"):c.part=["snippet"];const g=await(await fetch(l(c))).json();return(h=g.items)!=null&&h.length?{items:g.items.map(p),nextPageCustomData:{token:g.nextPageToken},isLastPage:!g.nextPageToken}:{items:[],isLastPage:!0}},itemLayout:({assetProps:t,onSelect:n})=>({type:"column",onClick:()=>n(t),htmlAttrs:{title:t.name},style:{border:"1px solid gray",borderRadius:8,overflow:"hidden",cursor:"pointer"},children:[{type:"custom",render:()=>{var a;return`<img src="${(a=t.customData)==null?void 0:a.thumbnailUrl}" alt="${t.name}" style="width: 100%; height: 100px; object-fit: cover">`}},{type:"text",content:t.name,style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",paddingLeft:8,paddingRight:8}}]})}},B={youtubeAssetProvider:{searchBtn:"Search on YouTube",providerLabel:"YouTube Videos"}},m="youtubeAssetProvider";return U(function(e,o){const{skipVideoComponent:r,i18n:i={}}=o,l=O(o);e.runCommand(b.assetProviderAdd,{provider:l});const d="search-on-youtube",p="video";if(!r){const t=e.Components.getType(p).model.prototype;e.Components.addType(p,{model:{getYoutubeTraits(){const[n,...a]=t.getYoutubeTraits.apply(this);return[n,{id:d,type:"button",label:e.I18n.t("youtubeAssetProvider.searchBtn"),command:()=>{e.AssetManager.open({providerId:l.id,providers:[],types:[],select:s=>{e.Assets.close(),this.set({videoId:s.attributes.id})},content:{header:{addUrl:!1,upload:!1}}})}},...a]}}})}e.I18n.addMessages({en:B,...i}),$({editor:e,licenseKey:o.licenseKey,plan:u.startup,pluginName:m,cleanup:()=>{if(e.runCommand(b.assetProviderRemove,{id:l.id}),!r){const t=e.Components.getType(p).model.prototype;e.Components.addType(p,{model:{getYoutubeTraits(){return t.getYoutubeTraits.apply(this).filter(n=>n.id!==d)}}})}}})})});

package/dist/youtubeAssetProvider/locale/en.d.ts

@@ -0,0 +1,7 @@
+export default i18n;
+declare namespace i18n {
+    namespace youtubeAssetProvider {
+        let searchBtn: string;
+        let providerLabel: string;
+    }
+}

package/dist/youtubeAssetProvider/types.d.ts

@@ -1,3 +1,4 @@
+import { Messages } from 'grapesjs';
 import { SDKPluginOptions } from '../utils';
 /**
  * https://github.com/googleapis/google-api-nodejs-client/blob/f4848c7295f887ae311c93967ee4723e336f263c/src/apis/youtube/v3.ts#L11315
@@ -238,4 +239,5 @@ export interface YoutubeAssetProviderOptions extends SDKPluginOptions {
      * @default false
      */
     skipVideoComponent?: boolean;
+    i18n?: Messages;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grapesjs/studio-sdk-plugins",
-  "version": "1.0.13",
+  "version": "1.0.14-rc.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },