@g1cloud/page-builder-editor 1.0.0-alpha.15 → 1.0.0-alpha.16

package/dist/page-builder-editor.umd.cjs

@@ -7021,7 +7021,7 @@ var __publicField = (obj, key, value) => {
     class: "empty"
   };
   const _hoisted_4$i = /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "image", -1);
-  const _hoisted_5$8 = [
+  const _hoisted_5$9 = [
     _hoisted_4$i
   ];
   const _sfc_main$5$1 = /* @__PURE__ */ vue.defineComponent({
@@ -7039,7 +7039,7 @@ var __publicField = (obj, key, value) => {
             src: (_b = _ctx.part.properties) == null ? void 0 : _b.image,
             alt: "",
             class: "image"
-          }, null, 8, _hoisted_2$1$1)) : !_ctx.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$s, _hoisted_5$8)) : vue.createCommentVNode("", true)
+          }, null, 8, _hoisted_2$1$1)) : !_ctx.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$s, _hoisted_5$9)) : vue.createCommentVNode("", true)
         ]);
       };
     }
@@ -7225,15 +7225,25 @@ ${_html.style}
     registerCustomPlugin(plugin) {
       if (plugin.widgets) {
         plugin.widgets.forEach((v) => {
-          partDefinitions$1[v.partName] = {
-            partType: "Widget",
-            partName: v.partName,
-            creator: () => _sfc_main$B,
-            component: v.component
-          };
+          const w = { ...v };
+          w.partType = "Widget";
+          w.creator = () => _sfc_main$B;
+          partDefinitions$1[v.partName] = w;
         });
       }
     }
+    watchCustomWidgetData(part) {
+      const def = partDefinitions$1[part.partName];
+      if (!def || !def.dataWatcher)
+        return false;
+      return def.dataWatcher(part.properties);
+    }
+    provideCustomWidgetData(part) {
+      const def = partDefinitions$1[part.partName];
+      if (!def || !def.dataProvider)
+        return Promise.resolve();
+      return def.dataProvider(part.properties);
+    }
     render(pageContent) {
       const rootPart = new RootPart();
       rootPart.pageBuilderId = this.instanceId;
@@ -7396,17 +7406,28 @@ ${_html.style}
     __name: "PbCustomWidget",
     props: {
       part: {},
-      viewMode: { type: Boolean, default: false }
+      dataWatcher: { type: Function },
+      dataProvider: { type: Function }
     },
     setup(__props) {
       const props = __props;
       const pageBuilder = usePageBuilder();
       const comp = vue.computed(() => pageBuilder.getCustomWidgetComponent(props.part));
+      const data = vue.ref({});
       const bind = vue.computed(() => ({
         pageBuilderId: pageBuilder.instanceId,
-        properties: props.part.properties,
-        placeholder: true
+        ...props.part.properties || {},
+        placeholder: true,
+        ...data.value || {}
       }));
+      const updateData = async () => {
+        data.value = await pageBuilder.provideCustomWidgetData(props.part);
+      };
+      vue.onMounted(updateData);
+      vue.watch(
+        () => pageBuilder.watchCustomWidgetData(props.part),
+        () => updateData()
+      );
       return (_ctx, _cache) => {
         return comp.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(comp.value), vue.normalizeProps(vue.mergeProps({ key: 0 }, bind.value)), null, 16)) : vue.createCommentVNode("", true);
       };
@@ -7938,20 +7959,6 @@ ${_html.style}
         }
       }
     }
-    getLocalDesignPartPropertyDefinitions(partName) {
-      let properties;
-      const partDef = this.getPartDefinition(partName);
-      if (!partDef || !partDef.propertyGroups)
-        return;
-      for (const group of partDef.propertyGroups) {
-        for (const property of group.properties) {
-          if (property.localized) {
-            properties = [...properties || [], property];
-          }
-        }
-      }
-      return properties;
-    }
     createPartComponent(part) {
       if (part) {
         const def = this.getPartDefinition(part.partName);
@@ -9150,10 +9157,10 @@ ${_html.style}
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Position" })
   ], -1);
   const _hoisted_4$g = { class: "flex-grow-1" };
-  const _hoisted_5$7 = { class: "bg-gray-100 py-5 rounded-8" };
-  const _hoisted_6$6 = { class: "text-center" };
-  const _hoisted_7$5 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
-  const _hoisted_8$5 = /* @__PURE__ */ vue.createElementVNode("div", {
+  const _hoisted_5$8 = { class: "bg-gray-100 py-5 rounded-8" };
+  const _hoisted_6$7 = { class: "text-center" };
+  const _hoisted_7$6 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+  const _hoisted_8$6 = /* @__PURE__ */ vue.createElementVNode("div", {
     class: "d-inline-block text-center text-gray-300",
     style: { "width": "30%", "font-size": "12px" }
   }, [
@@ -9188,8 +9195,8 @@ ${_html.style}
           vue.createElementVNode("div", _hoisted_2$r, [
             _hoisted_3$p,
             vue.createElementVNode("div", _hoisted_4$g, [
-              vue.createElementVNode("div", _hoisted_5$7, [
-                vue.createElementVNode("div", _hoisted_6$6, [
+              vue.createElementVNode("div", _hoisted_5$8, [
+                vue.createElementVNode("div", _hoisted_6$7, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": top.value,
                     class: "ml-4",
@@ -9198,7 +9205,7 @@ ${_html.style}
                     "onUpdate:modelValue": updateTop
                   }, null, 8, ["model-value"])
                 ]),
-                vue.createElementVNode("div", _hoisted_7$5, [
+                vue.createElementVNode("div", _hoisted_7$6, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": left.value,
                     class: "ml-4",
@@ -9206,7 +9213,7 @@ ${_html.style}
                     width: "30%",
                     "onUpdate:modelValue": updateLeft
                   }, null, 8, ["model-value"]),
-                  _hoisted_8$5,
+                  _hoisted_8$6,
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": right.value,
                     class: "ml-4",
@@ -10979,13 +10986,13 @@ ${_html.style}
   const _hoisted_2$l = { class: "vc-sketch-controls" };
   const _hoisted_3$j = { class: "vc-sketch-sliders" };
   const _hoisted_4$b = { class: "vc-sketch-hue-wrap" };
-  const _hoisted_5$6 = {
+  const _hoisted_5$7 = {
     key: 0,
     class: "vc-sketch-alpha-wrap"
   };
-  const _hoisted_6$5 = { class: "vc-sketch-color-wrap" };
-  const _hoisted_7$4 = ["aria-label"];
-  const _hoisted_8$4 = {
+  const _hoisted_6$6 = { class: "vc-sketch-color-wrap" };
+  const _hoisted_7$5 = ["aria-label"];
+  const _hoisted_8$5 = {
     key: 0,
     class: "vc-sketch-field"
   };
@@ -11032,23 +11039,23 @@ ${_html.style}
                 onChange: $options.childChange
               }, null, 8, ["value", "onChange"])
             ]),
-            !$props.disableAlpha ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$6, [
+            !$props.disableAlpha ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$7, [
               vue.createVNode(_component_Alpha, {
                 value: _ctx.colors,
                 onChange: $options.childChange
               }, null, 8, ["value", "onChange"])
             ])) : vue.createCommentVNode("v-if", true)
           ]),
-          vue.createElementVNode("div", _hoisted_6$5, [
+          vue.createElementVNode("div", _hoisted_6$6, [
             vue.createElementVNode("div", {
               "aria-label": `Current color is ${$options.activeColor}`,
               class: "vc-sketch-active-color",
               style: vue.normalizeStyle({ background: $options.activeColor })
-            }, null, 12, _hoisted_7$4),
+            }, null, 12, _hoisted_7$5),
             vue.createVNode(_component_Checkboard)
           ])
         ]),
-        !$props.disableFields ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$4, [
+        !$props.disableFields ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$5, [
           vue.createCommentVNode(" rgba "),
           vue.createElementVNode("div", _hoisted_9$4, [
             vue.createVNode(_component_EdIn, {
@@ -11241,7 +11248,7 @@ ${_html.style}
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Background" })
   ], -1);
   const _hoisted_4$9 = { class: "bs-layout-horizontal" };
-  const _hoisted_5$5 = { class: "color" };
+  const _hoisted_5$6 = { class: "color" };
   const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorBackground",
     props: {
@@ -11276,7 +11283,7 @@ ${_html.style}
           vue.createElementVNode("div", _hoisted_2$j, [
             _hoisted_3$h,
             vue.createElementVNode("div", _hoisted_4$9, [
-              vue.createElementVNode("div", _hoisted_5$5, [
+              vue.createElementVNode("div", _hoisted_5$6, [
                 vue.createVNode(PbColorPicker, {
                   value: color.value,
                   "hide-delete": "",
@@ -11311,12 +11318,12 @@ ${_html.style}
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Border" })
   ], -1);
   const _hoisted_4$8 = { class: "" };
-  const _hoisted_5$4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "sub-title" }, [
+  const _hoisted_5$5 = /* @__PURE__ */ vue.createElementVNode("div", { class: "sub-title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Color" })
   ], -1);
-  const _hoisted_6$4 = { class: "color" };
-  const _hoisted_7$3 = { class: "mt-8" };
-  const _hoisted_8$3 = /* @__PURE__ */ vue.createElementVNode("div", { class: "sub-title" }, [
+  const _hoisted_6$5 = { class: "color" };
+  const _hoisted_7$4 = { class: "mt-8" };
+  const _hoisted_8$4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "sub-title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Border Width" })
   ], -1);
   const _hoisted_9$3 = { class: "flex-grow-1 mt-4" };
@@ -11380,8 +11387,8 @@ ${_html.style}
           vue.createElementVNode("div", _hoisted_2$i, [
             _hoisted_3$g,
             vue.createElementVNode("div", _hoisted_4$8, [
-              _hoisted_5$4,
-              vue.createElementVNode("div", _hoisted_6$4, [
+              _hoisted_5$5,
+              vue.createElementVNode("div", _hoisted_6$5, [
                 vue.createVNode(PbColorPicker, {
                   value: color.value,
                   "hide-delete": "",
@@ -11399,8 +11406,8 @@ ${_html.style}
                 }, null, 8, ["model-value"])
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_7$3, [
-              _hoisted_8$3,
+            vue.createElementVNode("div", _hoisted_7$4, [
+              _hoisted_8$4,
               vue.createElementVNode("div", _hoisted_9$3, [
                 vue.createElementVNode("div", _hoisted_10$1, [
                   vue.createElementVNode("div", _hoisted_11$1, [
@@ -11491,10 +11498,10 @@ ${_html.style}
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Margin" })
   ], -1);
   const _hoisted_4$7 = { class: "flex-grow-1" };
-  const _hoisted_5$3 = { class: "bg-gray-100 py-5 rounded-8" };
-  const _hoisted_6$3 = { class: "text-center" };
-  const _hoisted_7$2 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
-  const _hoisted_8$2 = /* @__PURE__ */ vue.createElementVNode("div", {
+  const _hoisted_5$4 = { class: "bg-gray-100 py-5 rounded-8" };
+  const _hoisted_6$4 = { class: "text-center" };
+  const _hoisted_7$3 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+  const _hoisted_8$3 = /* @__PURE__ */ vue.createElementVNode("div", {
     class: "d-inline-block text-center text-gray-300",
     style: { "width": "30%", "font-size": "12px" }
   }, [
@@ -11529,8 +11536,8 @@ ${_html.style}
           vue.createElementVNode("div", _hoisted_2$h, [
             _hoisted_3$f,
             vue.createElementVNode("div", _hoisted_4$7, [
-              vue.createElementVNode("div", _hoisted_5$3, [
-                vue.createElementVNode("div", _hoisted_6$3, [
+              vue.createElementVNode("div", _hoisted_5$4, [
+                vue.createElementVNode("div", _hoisted_6$4, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": top.value,
                     class: "ml-4",
@@ -11539,7 +11546,7 @@ ${_html.style}
                     "onUpdate:modelValue": updateTop
                   }, null, 8, ["model-value"])
                 ]),
-                vue.createElementVNode("div", _hoisted_7$2, [
+                vue.createElementVNode("div", _hoisted_7$3, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": left.value,
                     class: "ml-4",
@@ -11547,7 +11554,7 @@ ${_html.style}
                     width: "30%",
                     "onUpdate:modelValue": updateLeft
                   }, null, 8, ["model-value"]),
-                  _hoisted_8$2,
+                  _hoisted_8$3,
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": right.value,
                     class: "ml-4",
@@ -11578,10 +11585,10 @@ ${_html.style}
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Padding" })
   ], -1);
   const _hoisted_4$6 = { class: "flex-grow-1" };
-  const _hoisted_5$2 = { class: "bg-gray-100 py-5 rounded-8" };
-  const _hoisted_6$2 = { class: "text-center" };
-  const _hoisted_7$1 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
-  const _hoisted_8$1 = /* @__PURE__ */ vue.createElementVNode("div", {
+  const _hoisted_5$3 = { class: "bg-gray-100 py-5 rounded-8" };
+  const _hoisted_6$3 = { class: "text-center" };
+  const _hoisted_7$2 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+  const _hoisted_8$2 = /* @__PURE__ */ vue.createElementVNode("div", {
     class: "d-inline-block text-center text-gray-300",
     style: { "width": "30%", "font-size": "12px" }
   }, [
@@ -11616,8 +11623,8 @@ ${_html.style}
           vue.createElementVNode("div", _hoisted_2$g, [
             _hoisted_3$e,
             vue.createElementVNode("div", _hoisted_4$6, [
-              vue.createElementVNode("div", _hoisted_5$2, [
-                vue.createElementVNode("div", _hoisted_6$2, [
+              vue.createElementVNode("div", _hoisted_5$3, [
+                vue.createElementVNode("div", _hoisted_6$3, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": top.value,
                     class: "ml-4",
@@ -11626,7 +11633,7 @@ ${_html.style}
                     "onUpdate:modelValue": updateTop
                   }, null, 8, ["model-value"])
                 ]),
-                vue.createElementVNode("div", _hoisted_7$1, [
+                vue.createElementVNode("div", _hoisted_7$2, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": left.value,
                     class: "ml-4",
@@ -11634,7 +11641,7 @@ ${_html.style}
                     width: "30%",
                     "onUpdate:modelValue": updateLeft
                   }, null, 8, ["model-value"]),
-                  _hoisted_8$1,
+                  _hoisted_8$2,
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": right.value,
                     class: "ml-4",
@@ -11998,7 +12005,7 @@ ${_html.style}
     {
       partType: "Widget",
       partName: "TextWidget",
-      caption: "Text Widget",
+      caption: "Text",
       icon: "insert_text",
       propertyGroups: [
         {
@@ -12041,7 +12048,7 @@ ${_html.style}
     {
       partType: "Widget",
       partName: "ImageWidget",
-      caption: "Image Widget",
+      caption: "Image",
       icon: "imagesmode",
       propertyGroups: [
         {
@@ -12067,7 +12074,7 @@ ${_html.style}
     {
       partType: "Widget",
       partName: "HtmlWidget",
-      caption: "HTML Widget",
+      caption: "HTML",
       icon: "code",
       propertyGroups: [
         {
@@ -12122,6 +12129,13 @@ ${_html.style}
       ]
     }
   ];
+  const widgetPartDefinitions = [
+    {
+      groupName: "Widget",
+      caption: "Widget",
+      partDefinitions: widgets
+    }
+  ];
   const blockWidgetPartDefinitions = [
     {
       groupName: "Block",
@@ -12315,6 +12329,36 @@ ${_html.style}
   };
   __publicField(_AddPartCommand, "COMMAND_ID", "AddPart");
   let AddPartCommand = _AddPartCommand;
+  const _AddSectionCommand = class _AddSectionCommand {
+    constructor(modal) {
+      __publicField(this, "commandId", _AddSectionCommand.COMMAND_ID);
+      __publicField(this, "caption", "Add Section");
+      this.modal = modal;
+    }
+    execute(pageBuilder, args) {
+      const def = pageBuilder.partManager.getSectionDefinition();
+      if (!def)
+        return;
+      addPart(pageBuilder, def);
+    }
+  };
+  __publicField(_AddSectionCommand, "COMMAND_ID", "AddSection");
+  let AddSectionCommand = _AddSectionCommand;
+  const _AddBlockCommand = class _AddBlockCommand {
+    constructor(modal) {
+      __publicField(this, "commandId", _AddBlockCommand.COMMAND_ID);
+      __publicField(this, "caption", "Add Block");
+      this.modal = modal;
+    }
+    execute(pageBuilder, args) {
+      const def = pageBuilder.partManager.getBlockDefinition();
+      if (!def)
+        return;
+      addPart(pageBuilder, def);
+    }
+  };
+  __publicField(_AddBlockCommand, "COMMAND_ID", "AddBlock");
+  let AddBlockCommand = _AddBlockCommand;
   const addPart = (pageBuilder, def, attrs) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
     const selected = pageBuilder.context.getSelectedParts()[0];
@@ -12403,29 +12447,13 @@ ${_html.style}
     }
   };
   const addSectionBefore = (pageBuilder, modal, args) => {
-    const def = args && args.partDefinition;
-    if (!def) {
-      const partDefinitionGroups = designPartDefinitions;
-      openPartAddModal(modal, {
-        ...args || {},
-        pageBuilder,
-        partDefinitionGroups
-      }, (part, attrs) => {
-        addSectionBefore(pageBuilder, modal, {
-          ...args || {},
-          partDefinition: part,
-          ...attrs || {}
-        });
-      });
-      return;
-    }
     const selected = pageBuilder.context.getSelectedParts()[0];
     if (!selected)
       return;
     const section = pageBuilder.partManager.findNearestSection(selected);
     if (!section || !section.parent || !section.parent.children)
       return;
-    const newSection = createPartWithDefinition(def);
+    const newSection = createSection(pageBuilder);
     if (!newSection)
       return;
     const child = createBlock(pageBuilder);
@@ -12434,29 +12462,13 @@ ${_html.style}
     insertParts(pageBuilder, section.parent.partId, index, [newSection], true);
   };
   const addSectionAfter = (pageBuilder, modal, args) => {
-    const def = args && args.partDefinition;
-    if (!def) {
-      const partDefinitionGroups = designPartDefinitions;
-      openPartAddModal(modal, {
-        ...args || {},
-        pageBuilder,
-        partDefinitionGroups
-      }, (part, attrs) => {
-        addSectionAfter(pageBuilder, modal, {
-          ...args || {},
-          partDefinition: part,
-          ...attrs || {}
-        });
-      });
-      return;
-    }
     const selected = pageBuilder.context.getSelectedParts()[0];
     if (!selected)
       return;
     const section = pageBuilder.partManager.findNearestSection(selected);
     if (!section || !section.parent || !section.parent.children)
       return;
-    const newSection = createPartWithDefinition(def);
+    const newSection = createSection(pageBuilder);
     if (!newSection)
       return;
     const child = createBlock(pageBuilder);
@@ -12579,7 +12591,7 @@ ${_html.style}
       this.modal = modal;
     }
     execute(pageBuilder, args) {
-      addSectionBefore(pageBuilder, this.modal, args);
+      addSectionBefore(pageBuilder, this.modal);
     }
   };
   __publicField(_AddSectionAboveCommand, "COMMAND_ID", "AddSectionAbove");
@@ -12592,7 +12604,7 @@ ${_html.style}
       this.modal = modal;
     }
     execute(pageBuilder, args) {
-      addSectionAfter(pageBuilder, this.modal, args);
+      addSectionAfter(pageBuilder, this.modal);
     }
   };
   __publicField(_AddSectionBelowCommand, "COMMAND_ID", "AddSectionBelow");
@@ -12804,6 +12816,8 @@ ${_html.style}
       new OpenAddPartModalCommand(modal),
       new OpenAddWidgetModalCommand(modal),
       new AddPartCommand(modal),
+      new AddSectionCommand(modal),
+      new AddBlockCommand(modal),
       new AddSectionAboveCommand(modal),
       new AddSectionBelowCommand(modal),
       new AddBlockLeftCommand(),
@@ -13096,14 +13110,20 @@ ${_html.style}
         groupId: "add",
         buttons: [
           {
-            buttonId: "core:openAddPartLayer",
-            caption: "Add Design Part...",
+            buttonId: "core:addSection",
+            caption: "Add Section",
             icon: "add_row_below",
-            handler: (modeler) => modeler.commandRegistry.executeCommand(OpenAddPartModalCommand.COMMAND_ID)
+            handler: (modeler) => modeler.commandRegistry.executeCommand(AddSectionCommand.COMMAND_ID)
           },
           {
-            buttonId: "core:openAddWidgetLayer",
-            caption: "Add Widget...",
+            buttonId: "core:addBlock",
+            caption: "Add Block",
+            icon: "add_column_right",
+            handler: (modeler) => modeler.commandRegistry.executeCommand(AddBlockCommand.COMMAND_ID)
+          },
+          {
+            buttonId: "core:addWidget",
+            caption: "Add Widget",
             icon: "desktop_landscape_add",
             handler: (modeler) => modeler.commandRegistry.executeCommand(OpenAddWidgetModalCommand.COMMAND_ID)
           }
@@ -13309,6 +13329,8 @@ ${_html.style}
       __publicField(this, "scale", vue.ref(1));
       __publicField(this, "locale", vue.ref("en"));
       __publicField(this, "locales", vue.ref(["en"]));
+      __publicField(this, "customWidgets", []);
+      __publicField(this, "providers", {});
       this.model = new Model();
       this.context = new PageBuilderContextImpl(this);
       this.editMode = "free";
@@ -13333,6 +13355,21 @@ ${_html.style}
         return def.component;
       }
     }
+    getProvider(name) {
+      return this.providers[name];
+    }
+    watchCustomWidgetData(part) {
+      const def = this.partManager.getPartDefinition(part.partName);
+      if (!def || !def.dataWatcher)
+        return false;
+      return def.dataWatcher(part.properties);
+    }
+    provideCustomWidgetData(part) {
+      const def = this.partManager.getPartDefinition(part.partName);
+      if (!def || !def.dataProvider)
+        return Promise.resolve();
+      return def.dataProvider(part.properties);
+    }
     registerPlugin(plugin) {
       if (plugin.partDefinitions)
         this.partManager.registerPartDefinitions(plugin.partDefinitions);
@@ -13354,13 +13391,23 @@ ${_html.style}
         const partDefinitions2 = {};
         plugin.widgets.forEach((v) => {
           const w = { ...v };
-          w.partName = "Widget";
+          w.partType = "Widget";
           w.creator = () => _sfc_main$B;
           w.propertyGroups = [...w.propertyGroups, ...defaultWidgetPropertyGroups()];
           partDefinitions2[v.partName] = w;
+          const found = this.customWidgets.find((x) => x.partName === v.partName);
+          if (!found) {
+            this.customWidgets.push(w);
+          }
         });
         this.partManager.registerPartDefinitions(partDefinitions2);
       }
+      if (plugin.providers) {
+        this.providers = {
+          ...this.providers,
+          ...plugin.providers
+        };
+      }
       if (plugin.propertyEditors) {
         this.partManager.registerPartPropertyEditors(plugin.propertyEditors);
       }
@@ -13436,6 +13483,9 @@ ${_html.style}
         ]
       });
     }
+    getCustomWidgets() {
+      return this.customWidgets;
+    }
     getEmptyPageContent() {
       const block = new Block();
       const section = new Section();
@@ -13481,7 +13531,7 @@ ${_html.style}
       const insertSection = (index) => {
         if (!props.page)
           return;
-        editor.commandRegistry.executeCommand(OpenAddPartModalCommand.COMMAND_ID);
+        editor.commandRegistry.executeCommand(AddSectionCommand.COMMAND_ID);
       };
       return (_ctx, _cache) => {
         var _a;
@@ -14171,9 +14221,9 @@ ${_html.style}
   ], -1);
   const _hoisted_3$b = { class: "bs-layout-horizontal" };
   const _hoisted_4$4 = { class: "mr-2" };
-  const _hoisted_5$1 = /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "more_horiz", -1);
-  const _hoisted_6$1 = [
-    _hoisted_5$1
+  const _hoisted_5$2 = /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "more_horiz", -1);
+  const _hoisted_6$2 = [
+    _hoisted_5$2
   ];
   const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyLocalMarketingPart",
@@ -14256,7 +14306,7 @@ ${_html.style}
               }, null, 8, ["from-value", "to-value"])
             ]),
             vue.createElementVNode("div", null, [
-              vue.createElementVNode("button", { onClick: selectSchedule }, _hoisted_6$1)
+              vue.createElementVNode("button", { onClick: selectSchedule }, _hoisted_6$2)
             ])
           ])
         ]);
@@ -14628,16 +14678,16 @@ ${_html.style}
     },
     emits: ["update-property-value"],
     setup(__props, { emit: __emit }) {
-      bluesea.useModal();
       const pageBuilder = usePageBuilderEditor();
+      const modal = bluesea.useModal();
       const emit = __emit;
       const selectImage = () => {
-        PageBuilderEditorEvent.emit.requestImage({
-          pageBuilderId: pageBuilder.instanceId,
-          callback: (url) => {
+        const imageProvider = pageBuilder.getProvider("image");
+        if (imageProvider) {
+          imageProvider({ modal }, (url) => {
             emit("update-property-value", { image: url });
-          }
-        });
+          });
+        }
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
@@ -14763,9 +14813,19 @@ ${_html.style}
     default: _sfc_main$3
   }, Symbol.toStringTag, { value: "Module" }));
   const _hoisted_1$2 = { class: "bs-layout-vertical pb-part-add-modal" };
-  const _hoisted_2$2 = ["textContent"];
+  const _hoisted_2$2 = /* @__PURE__ */ vue.createElementVNode("div", {
+    class: "mb-8",
+    textContent: "Basic Widgets"
+  }, null, -1);
   const _hoisted_3$2 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
   const _hoisted_4$1 = ["onClick", "textContent"];
+  const _hoisted_5$1 = { class: "group mb-16" };
+  const _hoisted_6$1 = /* @__PURE__ */ vue.createElementVNode("div", {
+    class: "mb-8",
+    textContent: "Custom Widgets"
+  }, null, -1);
+  const _hoisted_7$1 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
+  const _hoisted_8$1 = ["onClick", "textContent"];
   const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbWidgetAddModal",
     props: {
@@ -14774,9 +14834,12 @@ ${_html.style}
     },
     emits: ["selectHandler"],
     setup(__props, { emit: __emit }) {
+      const props = __props;
       const emit = __emit;
       const modalHandle = bluesea.useModalHandle();
+      const customWidgets = vue.computed(() => props.pageBuilder.getCustomWidgets());
       const select = (partDefinition) => {
+        console.log(partDefinition);
         emit("selectHandler", partDefinition);
         modalHandle.close();
       };
@@ -14784,15 +14847,12 @@ ${_html.style}
         return vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSModalFrame), { title: "Add Block/Widget" }, {
           default: vue.withCtx(() => [
             vue.createElementVNode("div", _hoisted_1$2, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.partDefinitionGroups, (group) => {
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(widgetPartDefinitions), (group) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
                   key: group.groupName,
                   class: "group mb-16"
                 }, [
-                  vue.createElementVNode("div", {
-                    class: "mb-8",
-                    textContent: vue.toDisplayString(group.caption)
-                  }, null, 8, _hoisted_2$2),
+                  _hoisted_2$2,
                   vue.createElementVNode("div", _hoisted_3$2, [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(group.partDefinitions, (part) => {
                       return vue.openBlock(), vue.createElementBlock("div", {
@@ -14804,7 +14864,20 @@ ${_html.style}
                     }), 128))
                   ])
                 ]);
-              }), 128))
+              }), 128)),
+              vue.createElementVNode("div", _hoisted_5$1, [
+                _hoisted_6$1,
+                vue.createElementVNode("div", _hoisted_7$1, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(customWidgets.value, (part) => {
+                    return vue.openBlock(), vue.createElementBlock("div", {
+                      key: part.partName,
+                      class: "part",
+                      onClick: ($event) => select(part),
+                      textContent: vue.toDisplayString(part.caption)
+                    }, null, 8, _hoisted_8$1);
+                  }), 128))
+                ])
+              ])
             ])
           ]),
           _: 1