@grapesjs/studio-sdk-plugins 1.0.2 → 1.0.3

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

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

package/dist/dialogComponent/index.cjs.js

@@ -0,0 +1,59 @@
+"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.3",STUDIO_NPM_PACKAGE_VERSION:"1.0.20-rc.0"};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>
+  `,category:"Extra",content:{type:s},activate:!0,...t.block}),o.addType(s,{model:{defaults:{tagName:"div",attributes:{class:s,"data-type-role":s},components:[{type:a},{type:f}],draggable:W("wrapper"),droppable:W(s),styles:`
+          .${s} {
+            position: relative;
+            z-index: 1;
+          }
+        `,traits:[{type:"button",label:"Open dialog",name:"onActive",changeProp:!0,command(r){var e;(e=r.getSelected())==null||e.trigger("active")}},{type:"checkbox",label:"Close when pressing X",name:"closeWhenPressingX",default:!0,changeProp:!0},{type:"checkbox",label:"Close when pressing ESC",name:"closeWhenPressingEsc",default:!0,changeProp:!0},{type:"checkbox",label:"Open when leaving the window",name:"openWhenLeavingWindow",default:!1,changeProp:!0},{type:"number",label:"Open when scrolling to level",name:"openWhenScrollingToLevel",default:0,changeProp:!0}],"script-props":["closeWhenPressingX","closeWhenPressingEsc","openWhenLeavingWindow","openWhenScrollingToLevel"],script:function(r){const e=this;function C(c){const p=e.querySelector('[data-type-role="gjs-plg-dialog-overlay"]'),d=e.querySelector('[data-type-role="gjs-plg-dialog-close"]');function v(){p.style.display="none"}c?(e._onCloseWhenPressingX=v,d.addEventListener("click",e._onCloseWhenPressingX)):(d.removeEventListener("click",e._onCloseWhenPressingX),e._onCloseWhenPressingX=null)}function O(c){const p=e.querySelector('[data-type-role="gjs-plg-dialog-overlay"]');function d(v){v.key==="Escape"&&(p.style.display="none")}c?(e._onCloseWhenPressingEsc=d,e.addEventListener("keydown",e._onCloseWhenPressingEsc)):(e.removeEventListener("keydown",e._onCloseWhenPressingEsc),e._onCloseWhenPressingEsc=null)}function T(c){const p=e.querySelector('[data-type-role="gjs-plg-dialog-overlay"]');function d(){p.style.display="flex"}c?(e._onOpenWhenLeavingWindow=d,document.addEventListener("mouseleave",e._onOpenWhenLeavingWindow)):(document.removeEventListener("mouseleave",e._onOpenWhenLeavingWindow),e._onOpenWhenLeavingWindow=null)}function L(c){const p=e.querySelector('[data-type-role="gjs-plg-dialog-overlay"]');function d(){const v=document.documentElement.scrollTop;c&&v>=Number(c)&&(p.style.display="flex")}c?(e._onOpenWhenScrollingToLevel=d,document.addEventListener("scroll",e._onOpenWhenScrollingToLevel)):(document.removeEventListener("scroll",e._onOpenWhenScrollingToLevel),e._onOpenWhenScrollingToLevel=null)}C(r.closeWhenPressingX),O(r.closeWhenPressingEsc),T(r.openWhenLeavingWindow),L(r.openWhenScrollingToLevel)}},init(){this.on("active",this.handleOpenWhenClickPlaceholder)},handleOpenWhenClickPlaceholder(){this.view.el.querySelector('[data-type-role="gjs-plg-dialog-placeholder"]').addEventListener("click",()=>{const e=this.view.el.querySelector('[data-type-role="gjs-plg-dialog-overlay"]');e.style.display="flex"})}},view:{onActive(){const r=this.el.querySelector('[data-type-role="gjs-plg-dialog-overlay"]');r.style.display="flex"}}}),o.addType(a,{model:{defaults:{tagName:"div",attributes:{class:a,"data-type-role":a},components:{type:i},droppable:!1,draggable:!1,styles:`
+          .${a} {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            background-color: rgba(0, 0, 0, 0.5);
+          }
+        `}}}),o.addType(i,{model:{defaults:{tagName:"div",attributes:{class:i,"data-type-role":i},components:[{type:h},{type:u},{type:y}],droppable:!1,draggable:!1,styles:`
+          .${i} {
+            position: relative;
+            background-color: #fff;
+            border-radius: 10px;
+            border: 1px solid #eee;
+            padding: 20px;
+            width: 800px;
+            height: 600px;
+            box-sizing: border-box;
+          }
+        `}}}),o.addType(h,{model:{defaults:{tagName:"button",attributes:{class:h,"data-type-role":h},components:"&times;",droppable:!1,draggable:!1,styles:`
+          .${h} {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            width: 30px;
+            height: 30px;
+            background: none;
+            border: none;
+            font-size: 20px;
+            cursor: pointer;
+          }
+        `}}}),o.addType(u,{model:{defaults:{tagName:"h2",attributes:{class:u,"data-type-role":u},components:"Dialog Title",editable:!0,droppable:!1,draggable:!1,styles:`
+          .${u} {
+            margin: 0;
+            padding: 0 40px 20px 0;
+          }
+        `}}}),o.addType(y,{model:{defaults:{tagName:"div",attributes:{class:y,"data-type-role":y},components:[{type:m}],styles:`
+          .${y} {
+            height: 90%;
+            overflow: auto;
+          }
+        `}}}),o.addType(m,{model:{defaults:{tagName:"p",attributes:{class:m,"data-type-role":m},components:"This is a customizable dialog!",editable:!0,styles:`
+          .${m} {
+            margin: 0;
+          }
+        `}}}),o.addType(f,{model:{toHTML(){return""},defaults:{tagName:"button",attributes:{class:f,"data-type-role":f},components:"Dialog (click me to open)",droppable:!1,draggable:!1}},view:{init(){this.listenTo(this.em,"run:core:preview",()=>{this.el.style.display="none"}),this.listenTo(this.em,"stop:core:preview",()=>{this.el.style.display=""})}}}),X({editor:n,licenseKey:g,pluginName:M,cleanup:()=>{l.remove(s),o.removeType(s)}})},V=I(U);module.exports=V;

package/dist/dialogComponent/index.d.ts

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

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

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

package/dist/dialogComponent/index.es.js

@@ -0,0 +1,350 @@
+import "react";
+const b = "app.grapesjs.com", w = "app-stage.grapesjs.com", E = [
+  b,
+  w,
+  "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
+], 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.3", STUDIO_NPM_PACKAGE_VERSION: "1.0.20-rc.0" };
+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) => /* @__PURE__ */ 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>
+  `,
+    category: "Extra",
+    content: { type: s },
+    activate: !0,
+    ...t.block
+  }), o.addType(s, {
+    model: {
+      defaults: {
+        tagName: "div",
+        attributes: { class: s, "data-type-role": s },
+        components: [{ type: a }, { type: f }],
+        draggable: W("wrapper"),
+        droppable: W(s),
+        styles: `
+          .${s} {
+            position: relative;
+            z-index: 1;
+          }
+        `,
+        traits: [
+          {
+            type: "button",
+            label: "Open dialog",
+            name: "onActive",
+            changeProp: !0,
+            command(r) {
+              var e;
+              (e = r.getSelected()) == null || e.trigger("active");
+            }
+          },
+          {
+            type: "checkbox",
+            label: "Close when pressing X",
+            name: "closeWhenPressingX",
+            default: !0,
+            changeProp: !0
+          },
+          {
+            type: "checkbox",
+            label: "Close when pressing ESC",
+            name: "closeWhenPressingEsc",
+            default: !0,
+            changeProp: !0
+          },
+          {
+            type: "checkbox",
+            label: "Open when leaving the window",
+            name: "openWhenLeavingWindow",
+            default: !1,
+            changeProp: !0
+          },
+          {
+            type: "number",
+            label: "Open when scrolling to level",
+            name: "openWhenScrollingToLevel",
+            default: 0,
+            changeProp: !0
+          }
+        ],
+        "script-props": [
+          "closeWhenPressingX",
+          "closeWhenPressingEsc",
+          "openWhenLeavingWindow",
+          "openWhenScrollingToLevel"
+        ],
+        script: function(r) {
+          const e = this;
+          function C(c) {
+            const p = e.querySelector('[data-type-role="gjs-plg-dialog-overlay"]'), d = e.querySelector('[data-type-role="gjs-plg-dialog-close"]');
+            function v() {
+              p.style.display = "none";
+            }
+            c ? (e._onCloseWhenPressingX = v, d.addEventListener("click", e._onCloseWhenPressingX)) : (d.removeEventListener("click", e._onCloseWhenPressingX), e._onCloseWhenPressingX = null);
+          }
+          function O(c) {
+            const p = e.querySelector('[data-type-role="gjs-plg-dialog-overlay"]');
+            function d(v) {
+              v.key === "Escape" && (p.style.display = "none");
+            }
+            c ? (e._onCloseWhenPressingEsc = d, e.addEventListener("keydown", e._onCloseWhenPressingEsc)) : (e.removeEventListener("keydown", e._onCloseWhenPressingEsc), e._onCloseWhenPressingEsc = null);
+          }
+          function T(c) {
+            const p = e.querySelector('[data-type-role="gjs-plg-dialog-overlay"]');
+            function d() {
+              p.style.display = "flex";
+            }
+            c ? (e._onOpenWhenLeavingWindow = d, document.addEventListener("mouseleave", e._onOpenWhenLeavingWindow)) : (document.removeEventListener("mouseleave", e._onOpenWhenLeavingWindow), e._onOpenWhenLeavingWindow = null);
+          }
+          function L(c) {
+            const p = e.querySelector('[data-type-role="gjs-plg-dialog-overlay"]');
+            function d() {
+              const v = document.documentElement.scrollTop;
+              c && v >= Number(c) && (p.style.display = "flex");
+            }
+            c ? (e._onOpenWhenScrollingToLevel = d, document.addEventListener("scroll", e._onOpenWhenScrollingToLevel)) : (document.removeEventListener("scroll", e._onOpenWhenScrollingToLevel), e._onOpenWhenScrollingToLevel = null);
+          }
+          C(r.closeWhenPressingX), O(r.closeWhenPressingEsc), T(r.openWhenLeavingWindow), L(r.openWhenScrollingToLevel);
+        }
+      },
+      init() {
+        this.on("active", this.handleOpenWhenClickPlaceholder);
+      },
+      handleOpenWhenClickPlaceholder() {
+        this.view.el.querySelector(
+          '[data-type-role="gjs-plg-dialog-placeholder"]'
+        ).addEventListener("click", () => {
+          const e = this.view.el.querySelector(
+            '[data-type-role="gjs-plg-dialog-overlay"]'
+          );
+          e.style.display = "flex";
+        });
+      }
+    },
+    view: {
+      onActive() {
+        const r = this.el.querySelector('[data-type-role="gjs-plg-dialog-overlay"]');
+        r.style.display = "flex";
+      }
+    }
+  }), o.addType(a, {
+    model: {
+      defaults: {
+        tagName: "div",
+        attributes: { class: a, "data-type-role": a },
+        components: { type: i },
+        droppable: !1,
+        draggable: !1,
+        styles: `
+          .${a} {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            background-color: rgba(0, 0, 0, 0.5);
+          }
+        `
+      }
+    }
+  }), o.addType(i, {
+    model: {
+      defaults: {
+        tagName: "div",
+        attributes: { class: i, "data-type-role": i },
+        components: [{ type: h }, { type: u }, { type: y }],
+        droppable: !1,
+        draggable: !1,
+        styles: `
+          .${i} {
+            position: relative;
+            background-color: #fff;
+            border-radius: 10px;
+            border: 1px solid #eee;
+            padding: 20px;
+            width: 800px;
+            height: 600px;
+            box-sizing: border-box;
+          }
+        `
+      }
+    }
+  }), o.addType(h, {
+    model: {
+      defaults: {
+        tagName: "button",
+        attributes: { class: h, "data-type-role": h },
+        components: "&times;",
+        droppable: !1,
+        draggable: !1,
+        styles: `
+          .${h} {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            width: 30px;
+            height: 30px;
+            background: none;
+            border: none;
+            font-size: 20px;
+            cursor: pointer;
+          }
+        `
+      }
+    }
+  }), o.addType(u, {
+    model: {
+      defaults: {
+        tagName: "h2",
+        attributes: { class: u, "data-type-role": u },
+        components: "Dialog Title",
+        editable: !0,
+        droppable: !1,
+        draggable: !1,
+        styles: `
+          .${u} {
+            margin: 0;
+            padding: 0 40px 20px 0;
+          }
+        `
+      }
+    }
+  }), o.addType(y, {
+    model: {
+      defaults: {
+        tagName: "div",
+        attributes: { class: y, "data-type-role": y },
+        components: [{ type: m }],
+        styles: `
+          .${y} {
+            height: 90%;
+            overflow: auto;
+          }
+        `
+      }
+    }
+  }), o.addType(m, {
+    model: {
+      defaults: {
+        tagName: "p",
+        attributes: { class: m, "data-type-role": m },
+        components: "This is a customizable dialog!",
+        editable: !0,
+        styles: `
+          .${m} {
+            margin: 0;
+          }
+        `
+      }
+    }
+  }), o.addType(f, {
+    model: {
+      toHTML() {
+        return "";
+      },
+      defaults: {
+        tagName: "button",
+        attributes: { class: f, "data-type-role": f },
+        components: "Dialog (click me to open)",
+        droppable: !1,
+        draggable: !1
+      }
+    },
+    view: {
+      init() {
+        this.listenTo(this.em, "run:core:preview", () => {
+          this.el.style.display = "none";
+        }), this.listenTo(this.em, "stop:core:preview", () => {
+          this.el.style.display = "";
+        });
+      }
+    }
+  }), X({
+    editor: n,
+    licenseKey: g,
+    pluginName: M,
+    cleanup: () => {
+      l.remove(s), o.removeType(s);
+    }
+  });
+}, z = I(U);
+export {
+  z as default
+};

package/dist/dialogComponent/index.umd.js

@@ -0,0 +1,59 @@
+(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.3",STUDIO_NPM_PACKAGE_VERSION:"1.0.20-rc.0"};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>
+  `,category:"Extra",content:{type:s},activate:!0,...t.block}),o.addType(s,{model:{defaults:{tagName:"div",attributes:{class:s,"data-type-role":s},components:[{type:i},{type:E}],draggable:P("wrapper"),droppable:P(s),styles:`
+          .${s} {
+            position: relative;
+            z-index: 1;
+          }
+        `,traits:[{type:"button",label:"Open dialog",name:"onActive",changeProp:!0,command(r){var e;(e=r.getSelected())==null||e.trigger("active")}},{type:"checkbox",label:"Close when pressing X",name:"closeWhenPressingX",default:!0,changeProp:!0},{type:"checkbox",label:"Close when pressing ESC",name:"closeWhenPressingEsc",default:!0,changeProp:!0},{type:"checkbox",label:"Open when leaving the window",name:"openWhenLeavingWindow",default:!1,changeProp:!0},{type:"number",label:"Open when scrolling to level",name:"openWhenScrollingToLevel",default:0,changeProp:!0}],"script-props":["closeWhenPressingX","closeWhenPressingEsc","openWhenLeavingWindow","openWhenScrollingToLevel"],script:function(r){const e=this;function I(d){const g=e.querySelector('[data-type-role="gjs-plg-dialog-overlay"]'),c=e.querySelector('[data-type-role="gjs-plg-dialog-close"]');function b(){g.style.display="none"}d?(e._onCloseWhenPressingX=b,c.addEventListener("click",e._onCloseWhenPressingX)):(c.removeEventListener("click",e._onCloseWhenPressingX),e._onCloseWhenPressingX=null)}function X(d){const g=e.querySelector('[data-type-role="gjs-plg-dialog-overlay"]');function c(b){b.key==="Escape"&&(g.style.display="none")}d?(e._onCloseWhenPressingEsc=c,e.addEventListener("keydown",e._onCloseWhenPressingEsc)):(e.removeEventListener("keydown",e._onCloseWhenPressingEsc),e._onCloseWhenPressingEsc=null)}function q(d){const g=e.querySelector('[data-type-role="gjs-plg-dialog-overlay"]');function c(){g.style.display="flex"}d?(e._onOpenWhenLeavingWindow=c,document.addEventListener("mouseleave",e._onOpenWhenLeavingWindow)):(document.removeEventListener("mouseleave",e._onOpenWhenLeavingWindow),e._onOpenWhenLeavingWindow=null)}function M(d){const g=e.querySelector('[data-type-role="gjs-plg-dialog-overlay"]');function c(){const b=document.documentElement.scrollTop;d&&b>=Number(d)&&(g.style.display="flex")}d?(e._onOpenWhenScrollingToLevel=c,document.addEventListener("scroll",e._onOpenWhenScrollingToLevel)):(document.removeEventListener("scroll",e._onOpenWhenScrollingToLevel),e._onOpenWhenScrollingToLevel=null)}I(r.closeWhenPressingX),X(r.closeWhenPressingEsc),q(r.openWhenLeavingWindow),M(r.openWhenScrollingToLevel)}},init(){this.on("active",this.handleOpenWhenClickPlaceholder)},handleOpenWhenClickPlaceholder(){this.view.el.querySelector('[data-type-role="gjs-plg-dialog-placeholder"]').addEventListener("click",()=>{const e=this.view.el.querySelector('[data-type-role="gjs-plg-dialog-overlay"]');e.style.display="flex"})}},view:{onActive(){const r=this.el.querySelector('[data-type-role="gjs-plg-dialog-overlay"]');r.style.display="flex"}}}),o.addType(i,{model:{defaults:{tagName:"div",attributes:{class:i,"data-type-role":i},components:{type:a},droppable:!1,draggable:!1,styles:`
+          .${i} {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            background-color: rgba(0, 0, 0, 0.5);
+          }
+        `}}}),o.addType(a,{model:{defaults:{tagName:"div",attributes:{class:a,"data-type-role":a},components:[{type:y},{type:f},{type:m}],droppable:!1,draggable:!1,styles:`
+          .${a} {
+            position: relative;
+            background-color: #fff;
+            border-radius: 10px;
+            border: 1px solid #eee;
+            padding: 20px;
+            width: 800px;
+            height: 600px;
+            box-sizing: border-box;
+          }
+        `}}}),o.addType(y,{model:{defaults:{tagName:"button",attributes:{class:y,"data-type-role":y},components:"&times;",droppable:!1,draggable:!1,styles:`
+          .${y} {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            width: 30px;
+            height: 30px;
+            background: none;
+            border: none;
+            font-size: 20px;
+            cursor: pointer;
+          }
+        `}}}),o.addType(f,{model:{defaults:{tagName:"h2",attributes:{class:f,"data-type-role":f},components:"Dialog Title",editable:!0,droppable:!1,draggable:!1,styles:`
+          .${f} {
+            margin: 0;
+            padding: 0 40px 20px 0;
+          }
+        `}}}),o.addType(m,{model:{defaults:{tagName:"div",attributes:{class:m,"data-type-role":m},components:[{type:v}],styles:`
+          .${m} {
+            height: 90%;
+            overflow: auto;
+          }
+        `}}}),o.addType(v,{model:{defaults:{tagName:"p",attributes:{class:v,"data-type-role":v},components:"This is a customizable dialog!",editable:!0,styles:`
+          .${v} {
+            margin: 0;
+          }
+        `}}}),o.addType(E,{model:{toHTML(){return""},defaults:{tagName:"button",attributes:{class:E,"data-type-role":E},components:"Dialog (click me to open)",droppable:!1,draggable:!1}},view:{init(){this.listenTo(this.em,"run:core:preview",()=>{this.el.style.display="none"}),this.listenTo(this.em,"stop:core:preview",()=>{this.el.style.display=""})}}}),D({editor:n,licenseKey:h,pluginName:A,cleanup:()=>{l.remove(s),o.removeType(s)}})})});

package/dist/index.cjs.d.ts

@@ -1,2 +1 @@
-export { default as initPluginOne } from './initPluginOne';
-export { default as initPluginTwo } from './initPluginTwo';
+export { default as dialogComponent } from './dialogComponent';

package/dist/index.cjs.js

@@ -1 +1,59 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react");const r="app.grapesjs.com",u="app-stage.grapesjs.com",l=[r,u,"localhost","127.0.0.1",".local-credentialless.webcontainer.io","-sandpack.codesandbox.io"],m="license:check:start",f="license:check:end",d=()=>typeof window<"u",g=({isDev:n,isStage:o})=>`${n?"":`https://${o?u:r}`}/api`,E=()=>{const n=d()&&window.location.hostname;return!!n&&(l.includes(n)||l.some(o=>n.endsWith(o)))},N=()=>(d()&&window.location.hostname)===r;var w={NODE_ENV:"production",NPM_PACKAGE_VERSION:"1.0.2",STUDIO_NPM_PACKAGE_VERSION:"1.0.19-rc.1"};const _=w.NODE_ENV!=="production";async function y({path:n,method:o="GET",headers:t={},body:e}){const c=`${g({isDev:_,isStage:!N()})}${n}`,i={method:o,headers:{"Content-Type":"application/json",...t}};e&&(i.body=JSON.stringify(e));const a=await fetch(c,i);if(!a.ok)throw new Error(`HTTP error! status: ${a.status}`);return a.json()}function P(n){const o=n;return o.init=t=>e=>n(e,t),o}const p=n=>P(n);async function h({editor:n,pluginName:o,licenseKey:t,cleanup:e}){let s=!1;const c=E();n.on(m,()=>{s=!0}),n.on(f,({sdkLicense:i})=>{i||e()}),setTimeout(async()=>{if(!s){if(c)return;t&&await S({licenseKey:t,pluginName:o})||e()}},2e3)}async function S({licenseKey:n,pluginName:o}){try{const t=await y({path:`/sdk/${n}`,method:"POST",body:JSON.stringify({d:window.location.hostname,pn:o})}),{license:e}=t.result||{};return!!e}catch(t){return console.error("Error during SDK license check:",t),!1}}const O="initPluginOne",T=function(n,o={}){const{Blocks:t}=n,{licenseKey:e}=o,s="test-plugin-one";t.add(s,{label:s,content:{type:s,components:`initPluginOne, licenseKey: ${e}`}}),h({editor:n,licenseKey:e,pluginName:O,cleanup:()=>t.remove(s)})},k=p(T),I="initPluginTwo",b=function(n,o={}){const{Blocks:t}=n,{licenseKey:e}=o,s="test-plugin-two";t.add(s,{label:s,content:{type:s,components:`initPluginTwo, licenseKey: ${e}`}}),h({editor:n,licenseKey:e,pluginName:I,cleanup:()=>t.remove(s)})},C=p(b);exports.initPluginOne=k;exports.initPluginTwo=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});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"],L="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.3",STUDIO_NPM_PACKAGE_VERSION:"1.0.20-rc.0"};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(L,()=>{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>
+  `,category:"Extra",content:{type:s},activate:!0,...t.block}),o.addType(s,{model:{defaults:{tagName:"div",attributes:{class:s,"data-type-role":s},components:[{type:a},{type:f}],draggable:W("wrapper"),droppable:W(s),styles:`
+          .${s} {
+            position: relative;
+            z-index: 1;
+          }
+        `,traits:[{type:"button",label:"Open dialog",name:"onActive",changeProp:!0,command(r){var e;(e=r.getSelected())==null||e.trigger("active")}},{type:"checkbox",label:"Close when pressing X",name:"closeWhenPressingX",default:!0,changeProp:!0},{type:"checkbox",label:"Close when pressing ESC",name:"closeWhenPressingEsc",default:!0,changeProp:!0},{type:"checkbox",label:"Open when leaving the window",name:"openWhenLeavingWindow",default:!1,changeProp:!0},{type:"number",label:"Open when scrolling to level",name:"openWhenScrollingToLevel",default:0,changeProp:!0}],"script-props":["closeWhenPressingX","closeWhenPressingEsc","openWhenLeavingWindow","openWhenScrollingToLevel"],script:function(r){const e=this;function C(c){const p=e.querySelector('[data-type-role="gjs-plg-dialog-overlay"]'),d=e.querySelector('[data-type-role="gjs-plg-dialog-close"]');function v(){p.style.display="none"}c?(e._onCloseWhenPressingX=v,d.addEventListener("click",e._onCloseWhenPressingX)):(d.removeEventListener("click",e._onCloseWhenPressingX),e._onCloseWhenPressingX=null)}function O(c){const p=e.querySelector('[data-type-role="gjs-plg-dialog-overlay"]');function d(v){v.key==="Escape"&&(p.style.display="none")}c?(e._onCloseWhenPressingEsc=d,e.addEventListener("keydown",e._onCloseWhenPressingEsc)):(e.removeEventListener("keydown",e._onCloseWhenPressingEsc),e._onCloseWhenPressingEsc=null)}function T(c){const p=e.querySelector('[data-type-role="gjs-plg-dialog-overlay"]');function d(){p.style.display="flex"}c?(e._onOpenWhenLeavingWindow=d,document.addEventListener("mouseleave",e._onOpenWhenLeavingWindow)):(document.removeEventListener("mouseleave",e._onOpenWhenLeavingWindow),e._onOpenWhenLeavingWindow=null)}function S(c){const p=e.querySelector('[data-type-role="gjs-plg-dialog-overlay"]');function d(){const v=document.documentElement.scrollTop;c&&v>=Number(c)&&(p.style.display="flex")}c?(e._onOpenWhenScrollingToLevel=d,document.addEventListener("scroll",e._onOpenWhenScrollingToLevel)):(document.removeEventListener("scroll",e._onOpenWhenScrollingToLevel),e._onOpenWhenScrollingToLevel=null)}C(r.closeWhenPressingX),O(r.closeWhenPressingEsc),T(r.openWhenLeavingWindow),S(r.openWhenScrollingToLevel)}},init(){this.on("active",this.handleOpenWhenClickPlaceholder)},handleOpenWhenClickPlaceholder(){this.view.el.querySelector('[data-type-role="gjs-plg-dialog-placeholder"]').addEventListener("click",()=>{const e=this.view.el.querySelector('[data-type-role="gjs-plg-dialog-overlay"]');e.style.display="flex"})}},view:{onActive(){const r=this.el.querySelector('[data-type-role="gjs-plg-dialog-overlay"]');r.style.display="flex"}}}),o.addType(a,{model:{defaults:{tagName:"div",attributes:{class:a,"data-type-role":a},components:{type:i},droppable:!1,draggable:!1,styles:`
+          .${a} {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            background-color: rgba(0, 0, 0, 0.5);
+          }
+        `}}}),o.addType(i,{model:{defaults:{tagName:"div",attributes:{class:i,"data-type-role":i},components:[{type:h},{type:u},{type:y}],droppable:!1,draggable:!1,styles:`
+          .${i} {
+            position: relative;
+            background-color: #fff;
+            border-radius: 10px;
+            border: 1px solid #eee;
+            padding: 20px;
+            width: 800px;
+            height: 600px;
+            box-sizing: border-box;
+          }
+        `}}}),o.addType(h,{model:{defaults:{tagName:"button",attributes:{class:h,"data-type-role":h},components:"&times;",droppable:!1,draggable:!1,styles:`
+          .${h} {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            width: 30px;
+            height: 30px;
+            background: none;
+            border: none;
+            font-size: 20px;
+            cursor: pointer;
+          }
+        `}}}),o.addType(u,{model:{defaults:{tagName:"h2",attributes:{class:u,"data-type-role":u},components:"Dialog Title",editable:!0,droppable:!1,draggable:!1,styles:`
+          .${u} {
+            margin: 0;
+            padding: 0 40px 20px 0;
+          }
+        `}}}),o.addType(y,{model:{defaults:{tagName:"div",attributes:{class:y,"data-type-role":y},components:[{type:m}],styles:`
+          .${y} {
+            height: 90%;
+            overflow: auto;
+          }
+        `}}}),o.addType(m,{model:{defaults:{tagName:"p",attributes:{class:m,"data-type-role":m},components:"This is a customizable dialog!",editable:!0,styles:`
+          .${m} {
+            margin: 0;
+          }
+        `}}}),o.addType(f,{model:{toHTML(){return""},defaults:{tagName:"button",attributes:{class:f,"data-type-role":f},components:"Dialog (click me to open)",droppable:!1,draggable:!1}},view:{init(){this.listenTo(this.em,"run:core:preview",()=>{this.el.style.display="none"}),this.listenTo(this.em,"stop:core:preview",()=>{this.el.style.display=""})}}}),X({editor:n,licenseKey:g,pluginName:M,cleanup:()=>{l.remove(s),o.removeType(s)}})},V=I(U);exports.dialogComponent=V;

package/dist/index.d.ts

@@ -1,2 +1 @@
-export { default as initPluginOne } from './initPluginOne';
-export { default as initPluginTwo } from './initPluginTwo';
+export { default as dialogComponent } from './dialogComponent';

package/dist/index.es.d.ts

@@ -1,2 +1 @@
-export { default as initPluginOne } from './initPluginOne';
-export { default as initPluginTwo } from './initPluginTwo';
+export { default as dialogComponent } from './dialogComponent';