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

package/dist/{index-CuI4K01B.js → index-BcD7YsdY.js}

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { ref, defineComponent, openBlock, createElementBlock, createCommentVNode, computed, normalizeClass, createElementVNode, mergeProps, toDisplayString, onMounted, watch, Fragment, renderList, provide, inject, createBlock as createBlock$1, resolveDynamicComponent, reactive, defineAsyncComponent, withDirectives, unref, createVNode, normalizeStyle, resolveComponent, vModelText, onBeforeUnmount, resolveDirective, withModifiers, renderSlot, normalizeProps, guardReactiveProps, markRaw, Teleport, toHandlers, withCtx } from "vue";
+import { ref, defineComponent, openBlock, createElementBlock, createCommentVNode, computed, normalizeClass, createElementVNode, mergeProps, toDisplayString, provide, inject, onMounted, watch, createBlock as createBlock$1, resolveDynamicComponent, normalizeProps, Fragment, renderList, reactive, defineAsyncComponent, withDirectives, unref, createVNode, normalizeStyle, resolveComponent, vModelText, onBeforeUnmount, resolveDirective, withModifiers, renderSlot, guardReactiveProps, markRaw, Teleport, toHandlers, withCtx } from "vue";
 import { notNull, BSTextInput, vClickOutside, useContextMenu, useModal, BSSelect, BSTabSheet, BSTree, BSDateRange } from "@g1cloud/bluesea";
 const create$5 = () => /* @__PURE__ */ new Map();
 const copy = (m) => {
@@ -6892,8 +6892,8 @@ let Model$1 = class Model {
     this.rootPart = ref(new RootPart());
   }
 };
-const _hoisted_1$8$1 = ["data-model-id"];
-const _hoisted_2$4$1 = {
+const _hoisted_1$7$1 = ["data-model-id"];
+const _hoisted_2$3$1 = {
   key: 1,
   class: "pb-nested-widget"
 };
@@ -6919,7 +6919,7 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
           key: 0,
           part: _ctx.part
         }, null, 8, ["part"])) : createCommentVNode("", true),
-        childComponents.value && childComponents.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$4$1, [
+        childComponents.value && childComponents.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$3$1, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(childComponents.value, (child) => {
             return openBlock(), createBlock$1(resolveDynamicComponent(child.component), {
               key: child.part.partId,
@@ -6927,11 +6927,11 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
             }, null, 8, ["part"]);
           }), 128))
         ])) : createCommentVNode("", true)
-      ], 16, _hoisted_1$8$1);
+      ], 16, _hoisted_1$7$1);
     };
   }
 });
-const _hoisted_1$7$1 = ["data-model-id"];
+const _hoisted_1$6$1 = ["data-model-id"];
 const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
   __name: "PbBlock",
   props: {
@@ -6955,12 +6955,12 @@ const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
             part: child
           }, null, 8, ["part"]);
         }), 128))
-      ], 16, _hoisted_1$7$1);
+      ], 16, _hoisted_1$6$1);
     };
   }
 });
-const _hoisted_1$6$1 = { class: "pb-block" };
-const _hoisted_2$3$1 = /* @__PURE__ */ createElementVNode("div", {
+const _hoisted_1$5$1 = { class: "pb-block" };
+const _hoisted_2$2$1 = /* @__PURE__ */ createElementVNode("div", {
   class: "pb-widget",
   style: { "margin": "0 auto" }
 }, [
@@ -6968,8 +6968,8 @@ const _hoisted_2$3$1 = /* @__PURE__ */ createElementVNode("div", {
     /* @__PURE__ */ createElementVNode("h3", null, "Login Design Part")
   ])
 ], -1);
-const _hoisted_3$2$1 = [
-  _hoisted_2$3$1
+const _hoisted_3$1$1 = [
+  _hoisted_2$2$1
 ];
 const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
   __name: "PbLoginDepart",
@@ -6978,11 +6978,11 @@ const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$6$1, _hoisted_3$2$1);
+      return openBlock(), createElementBlock("div", _hoisted_1$5$1, _hoisted_3$1$1);
     };
   }
 });
-const _hoisted_1$5$1 = ["data-model-id"];
+const _hoisted_1$4$1 = ["data-model-id"];
 const _sfc_main$6$1 = /* @__PURE__ */ defineComponent({
   __name: "PbSection",
   props: {
@@ -7008,19 +7008,19 @@ const _sfc_main$6$1 = /* @__PURE__ */ defineComponent({
             part: block
           }, null, 8, ["part"]);
         }), 128)) : createCommentVNode("", true)
-      ], 16, _hoisted_1$5$1);
+      ], 16, _hoisted_1$4$1);
     };
   }
 });
-const _hoisted_1$4$1 = { class: "pb-image-widget" };
-const _hoisted_2$2$1 = ["src"];
-const _hoisted_3$1$1 = {
+const _hoisted_1$3$1 = { class: "pb-image-widget" };
+const _hoisted_2$1$1 = ["src"];
+const _hoisted_3$h = {
   key: 1,
   class: "empty"
 };
-const _hoisted_4$1$1 = /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "image", -1);
-const _hoisted_5$1$1 = [
-  _hoisted_4$1$1
+const _hoisted_4$e = /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "image", -1);
+const _hoisted_5$7 = [
+  _hoisted_4$e
 ];
 const _sfc_main$5$1 = /* @__PURE__ */ defineComponent({
   __name: "PbImageWidget",
@@ -7031,18 +7031,18 @@ const _sfc_main$5$1 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       var _a, _b;
-      return openBlock(), createElementBlock("div", _hoisted_1$4$1, [
+      return openBlock(), createElementBlock("div", _hoisted_1$3$1, [
         ((_a = _ctx.part.properties) == null ? void 0 : _a.image) ? (openBlock(), createElementBlock("img", {
           key: 0,
           src: (_b = _ctx.part.properties) == null ? void 0 : _b.image,
           alt: "",
           class: "image"
-        }, null, 8, _hoisted_2$2$1)) : !_ctx.viewMode ? (openBlock(), createElementBlock("div", _hoisted_3$1$1, _hoisted_5$1$1)) : createCommentVNode("", true)
+        }, null, 8, _hoisted_2$1$1)) : !_ctx.viewMode ? (openBlock(), createElementBlock("div", _hoisted_3$h, _hoisted_5$7)) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const _hoisted_1$3$1 = ["textContent"];
+const _hoisted_1$2$1 = ["textContent"];
 const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
   __name: "PbTextWidget",
   props: {
@@ -7104,13 +7104,13 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("div", mergeProps({ class: "text" }, style.value, {
           textContent: toDisplayString(text.value)
-        }), null, 16, _hoisted_1$3$1)
+        }), null, 16, _hoisted_1$2$1)
       ], 2);
     };
   }
 });
-const _hoisted_1$2$1 = ["innerHTML"];
-const _hoisted_2$1$1 = { key: 1 };
+const _hoisted_1$1$1 = ["innerHTML"];
+const _hoisted_2$k = { key: 1 };
 const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
   __name: "PbHtmlWidget",
   props: {
@@ -7157,112 +7157,12 @@ ${_html.style}
           key: 0,
           class: "html",
           innerHTML: html.value
-        }, null, 8, _hoisted_1$2$1)) : (openBlock(), createElementBlock("span", _hoisted_2$1$1, "Empty HTML"))
+        }, null, 8, _hoisted_1$1$1)) : (openBlock(), createElementBlock("span", _hoisted_2$k, "Empty HTML"))
       ], 2);
     };
   }
 });
-function mitt(n) {
-  return { all: n = n || /* @__PURE__ */ new Map(), on: function(t, e) {
-    var i = n.get(t);
-    i ? i.push(e) : n.set(t, [e]);
-  }, off: function(t, e) {
-    var i = n.get(t);
-    i && (e ? i.splice(i.indexOf(e) >>> 0, 1) : n.set(t, []));
-  }, emit: function(t, e) {
-    var i = n.get(t);
-    i && i.slice().map(function(n2) {
-      n2(e);
-    }), (i = n.get("*")) && i.slice().map(function(n2) {
-      n2(t, e);
-    });
-  } };
-}
-const emitter = mitt();
-const PageBuilderViewerEvent = {
-  on: {
-    requestProductMapping: (listener) => {
-      emitter.on("requestProductMapping", listener);
-    }
-  },
-  off: {
-    requestProductMapping: (listener) => {
-      emitter.off("requestProductMapping", listener);
-    }
-  },
-  emit: {
-    requestProductMapping: (param) => {
-      emitter.emit("requestProductMapping", param);
-    }
-  }
-};
-const _hoisted_1$1$1 = { class: "pb-product-list-widget" };
-const _hoisted_2$k = { class: "product" };
-const _hoisted_3$h = { class: "image" };
-const _hoisted_4$e = ["src"];
-const _hoisted_5$7 = { class: "name" };
-const _hoisted_6$6 = { class: "price" };
-const _hoisted_7$5 = {
-  key: 1,
-  class: "empty"
-};
-const _hoisted_8$5 = /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "image", -1);
-const _hoisted_9$5 = [
-  _hoisted_8$5
-];
-const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
-  __name: "PbProductListWidget",
-  props: {
-    part: {},
-    viewMode: { type: Boolean, default: false }
-  },
-  setup(__props) {
-    const props = __props;
-    const products = ref([]);
-    const productCount = computed(() => props.viewMode ? products.value.length : Math.max(4, products.value.length));
-    const updateProducts = () => {
-      var _a, _b;
-      if ((_a = props.part.properties) == null ? void 0 : _a.products) {
-        PageBuilderViewerEvent.emit.requestProductMapping({
-          pageBuilderId: props.part.getPageBuilderId(),
-          itemCodes: (_b = props.part.properties) == null ? void 0 : _b.products,
-          callback: (_products) => {
-            products.value = _products;
-          }
-        });
-      }
-    };
-    onMounted(() => updateProducts());
-    watch(() => {
-      var _a;
-      return (_a = props.part.properties) == null ? void 0 : _a.products;
-    }, () => updateProducts());
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$1$1, [
-        products.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(productCount.value, (index) => {
-          return openBlock(), createElementBlock("div", {
-            key: index,
-            class: "product-wrapper"
-          }, [
-            createElementVNode("div", _hoisted_2$k, [
-              products.value[index - 1] ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                createElementVNode("div", _hoisted_3$h, [
-                  createElementVNode("img", {
-                    src: products.value[index - 1].image,
-                    alt: ""
-                  }, null, 8, _hoisted_4$e)
-                ]),
-                createElementVNode("div", _hoisted_5$7, toDisplayString(products.value[index - 1].itemName), 1),
-                createElementVNode("div", _hoisted_6$6, toDisplayString(products.value[index - 1].price), 1)
-              ], 64)) : (openBlock(), createElementBlock("div", _hoisted_7$5, _hoisted_9$5))
-            ])
-          ]);
-        }), 128)) : createCommentVNode("", true)
-      ]);
-    };
-  }
-});
-const partDefinitions$1 = {
+const defaultPartDefinitions = {
   "Section": {
     partType: "Section",
     partName: "Section",
@@ -7302,15 +7202,11 @@ const partDefinitions$1 = {
     partType: "Widget",
     partName: "HtmlWidget",
     creator: () => _sfc_main$3$1
-  },
-  "ProductListWidget": {
-    partType: "Widget",
-    partName: "ProductListWidget",
-    creator: () => _sfc_main$2$1
   }
 };
 const PAGE_BUILDER_KEY = "PageBuilder";
 const PAGE_BUILDER_VIEWER_KEY = "PageBuilderViewer";
+let partDefinitions$1 = { ...defaultPartDefinitions };
 class PageBuilderViewerImpl {
   constructor() {
     __publicField2(this, "instanceId");
@@ -7324,6 +7220,28 @@ class PageBuilderViewerImpl {
   setLocale(locale) {
     this.locale.value = locale || "en";
   }
+  registerCustomPlugin(plugin) {
+    if (plugin.widgets) {
+      plugin.widgets.forEach((v) => {
+        const w = { ...v };
+        w.partType = "Widget";
+        w.creator = () => _sfc_main$q;
+        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;
@@ -7365,6 +7283,12 @@ class PageBuilderViewerImpl {
         return new Widget();
     }
   }
+  getCustomWidgetComponent(part) {
+    const def = getPartDefinition(part.partName);
+    if (def) {
+      return def.component;
+    }
+  }
 }
 const createPageBuilderViewer = () => {
   const viewer = new PageBuilderViewerImpl();
@@ -7403,7 +7327,7 @@ const createPartComponent = (part) => {
   }
 };
 const getPartDefinition = (partName) => partDefinitions$1[partName];
-const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
   __name: "PbPage",
   props: {
     page: {},
@@ -7433,19 +7357,22 @@ const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$u = { class: "pb-viewer" };
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
   __name: "PageBuilderViewer",
   props: {
     instanceId: {},
     pageContent: {},
     isMobilePage: { type: Boolean },
-    language: {}
+    language: {},
+    plugin: {}
   },
   setup(__props) {
     const props = __props;
     const pageBuilderViewer = createPageBuilderViewer();
     pageBuilderViewer.instanceId = props.instanceId;
     pageBuilderViewer.setLocale(props.language);
+    if (props.plugin)
+      pageBuilderViewer.registerCustomPlugin(props.plugin);
     providePageBuilderViewer(pageBuilderViewer);
     providePageBuilder(pageBuilderViewer);
     const page = computed(() => pageBuilderViewer.model.rootPart.value.children && pageBuilderViewer.model.rootPart.value.children[props.isMobilePage ? 0 : 1]);
@@ -7464,7 +7391,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$u, [
-        page.value ? (openBlock(), createBlock$1(_sfc_main$1$1, {
+        page.value ? (openBlock(), createBlock$1(_sfc_main$2$1, {
           key: 0,
           "is-mobile-page": _ctx.isMobilePage,
           page: page.value
@@ -7473,6 +7400,71 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  __name: "PbCustomWidget",
+  props: {
+    part: {},
+    dataWatcher: { type: Function },
+    dataProvider: { type: Function }
+  },
+  setup(__props) {
+    const props = __props;
+    const pageBuilder = usePageBuilder();
+    const comp = computed(() => pageBuilder.getCustomWidgetComponent(props.part));
+    const data = ref({});
+    const bind = computed(() => ({
+      pageBuilderId: pageBuilder.instanceId,
+      ...props.part.properties || {},
+      placeholder: true,
+      ...data.value || {}
+    }));
+    const updateData = async () => {
+      data.value = await pageBuilder.provideCustomWidgetData(props.part);
+    };
+    onMounted(updateData);
+    watch(
+      () => pageBuilder.watchCustomWidgetData(props.part),
+      () => updateData()
+    );
+    return (_ctx, _cache) => {
+      return comp.value ? (openBlock(), createBlock$1(resolveDynamicComponent(comp.value), normalizeProps(mergeProps({ key: 0 }, bind.value)), null, 16)) : createCommentVNode("", true);
+    };
+  }
+});
+function mitt(n) {
+  return { all: n = n || /* @__PURE__ */ new Map(), on: function(t, e) {
+    var i = n.get(t);
+    i ? i.push(e) : n.set(t, [e]);
+  }, off: function(t, e) {
+    var i = n.get(t);
+    i && (e ? i.splice(i.indexOf(e) >>> 0, 1) : n.set(t, []));
+  }, emit: function(t, e) {
+    var i = n.get(t);
+    i && i.slice().map(function(n2) {
+      n2(e);
+    }), (i = n.get("*")) && i.slice().map(function(n2) {
+      n2(t, e);
+    });
+  } };
+}
+const emitter = mitt();
+const PageBuilderViewerEvent = {
+  on: {
+    requestProductMapping: (listener) => {
+      emitter.on("requestProductMapping", listener);
+    }
+  },
+  off: {
+    requestProductMapping: (listener) => {
+      emitter.off("requestProductMapping", listener);
+    }
+  },
+  emit: {
+    requestProductMapping: (param) => {
+      emitter.emit("requestProductMapping", param);
+    }
+  }
+};
 const PART_ID_KEY = "partId";
 const PART_NAME_KEY = "partName";
 const RESERVED_ATTRIBUTES = [PART_ID_KEY, PART_NAME_KEY];
@@ -7965,20 +7957,6 @@ class PartManager {
       }
     }
   }
-  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);
@@ -8058,12 +8036,11 @@ const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
     "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-BWOKvwD9.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BFGht6hc.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-B5HryveI.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-CZHXz7K6.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-N4VYkBhB.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-Bid2WYyb.js")),
-    "product": () => defineAsyncComponent(() => import("./PbPropertyEditorProduct-myd2_r0t.js"))
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-Bw7qz0-r.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-GN536Jw2.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-DH2Qep1X.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -12026,7 +12003,7 @@ const widgets = [
   {
     partType: "Widget",
     partName: "TextWidget",
-    caption: "Text Widget",
+    caption: "Text",
     icon: "insert_text",
     propertyGroups: [
       {
@@ -12069,7 +12046,7 @@ const widgets = [
   {
     partType: "Widget",
     partName: "ImageWidget",
-    caption: "Image Widget",
+    caption: "Image",
     icon: "imagesmode",
     propertyGroups: [
       {
@@ -12095,7 +12072,7 @@ const widgets = [
   {
     partType: "Widget",
     partName: "HtmlWidget",
-    caption: "HTML Widget",
+    caption: "HTML",
     icon: "code",
     propertyGroups: [
       {
@@ -12118,32 +12095,6 @@ const widgets = [
     localized: true,
     allowsChild: () => false,
     creator: () => _sfc_main$3$1
-  },
-  {
-    partType: "Widget",
-    partName: "ProductListWidget",
-    caption: "Product List Widget",
-    icon: "lists",
-    propertyGroups: [
-      {
-        groupName: "productList",
-        caption: "Product List",
-        properties: [
-          {
-            propertyName: "product",
-            caption: "Product",
-            propertyType: "product",
-            params: "",
-            localized: true
-          }
-        ]
-      },
-      ...defaultWidgetPropertyGroups()
-    ],
-    initialProperties: {},
-    localized: true,
-    allowsChild: () => false,
-    creator: () => _sfc_main$2$1
   }
 ];
 const partDefinitions = {};
@@ -12176,6 +12127,13 @@ const designPartDefinitions = [
     ]
   }
 ];
+const widgetPartDefinitions = [
+  {
+    groupName: "Widget",
+    caption: "Widget",
+    partDefinitions: widgets
+  }
+];
 const blockWidgetPartDefinitions = [
   {
     groupName: "Block",
@@ -12265,7 +12223,7 @@ const openPartAddModal = (modal, args, callback) => {
 };
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-CQvFYzfU.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-Zpo-ZeNH.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -12369,6 +12327,36 @@ const _AddPartCommand = class _AddPartCommand {
 };
 __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];
@@ -12457,29 +12445,13 @@ const addPart = (pageBuilder, def, attrs) => {
   }
 };
 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);
@@ -12488,29 +12460,13 @@ const addSectionBefore = (pageBuilder, modal, args) => {
   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);
@@ -12633,7 +12589,7 @@ const _AddSectionAboveCommand = class _AddSectionAboveCommand {
     this.modal = modal;
   }
   execute(pageBuilder, args) {
-    addSectionBefore(pageBuilder, this.modal, args);
+    addSectionBefore(pageBuilder, this.modal);
   }
 };
 __publicField(_AddSectionAboveCommand, "COMMAND_ID", "AddSectionAbove");
@@ -12646,7 +12602,7 @@ const _AddSectionBelowCommand = class _AddSectionBelowCommand {
     this.modal = modal;
   }
   execute(pageBuilder, args) {
-    addSectionAfter(pageBuilder, this.modal, args);
+    addSectionAfter(pageBuilder, this.modal);
   }
 };
 __publicField(_AddSectionBelowCommand, "COMMAND_ID", "AddSectionBelow");
@@ -12858,6 +12814,8 @@ const createDefaultCommands = (modal) => {
     new OpenAddPartModalCommand(modal),
     new OpenAddWidgetModalCommand(modal),
     new AddPartCommand(modal),
+    new AddSectionCommand(modal),
+    new AddBlockCommand(modal),
     new AddSectionAboveCommand(modal),
     new AddSectionBelowCommand(modal),
     new AddBlockLeftCommand(),
@@ -13150,14 +13108,20 @@ const createDefaultToolButtonGroups = () => {
       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)
         }
@@ -13363,6 +13327,8 @@ class PageBuilderEditorImpl {
     __publicField(this, "scale", ref(1));
     __publicField(this, "locale", ref("en"));
     __publicField(this, "locales", ref(["en"]));
+    __publicField(this, "customWidgets", []);
+    __publicField(this, "providers", {});
     this.model = new Model2();
     this.context = new PageBuilderContextImpl(this);
     this.editMode = "free";
@@ -13381,6 +13347,27 @@ class PageBuilderEditorImpl {
   setLocales(locales) {
     this.locales.value = locales || ["en"];
   }
+  getCustomWidgetComponent(part) {
+    const def = this.partManager.getPartDefinition(part.partName);
+    if (def) {
+      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);
@@ -13397,6 +13384,32 @@ class PageBuilderEditorImpl {
     if (plugin.toolButtonGroups)
       this.toolButtonRegistry.registerToolButtonGroups(plugin.toolButtonGroups);
   }
+  registerCustomPlugin(plugin) {
+    if (plugin.widgets) {
+      const partDefinitions2 = {};
+      plugin.widgets.forEach((v) => {
+        const w = { ...v };
+        w.partType = "Widget";
+        w.creator = () => _sfc_main$q;
+        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);
+    }
+  }
   initData(content) {
     this.model.rootPart.pageBuilderId = this.instanceId;
     this.model.rootPart.language = this.locale.value;
@@ -13468,6 +13481,9 @@ class PageBuilderEditorImpl {
       ]
     });
   }
+  getCustomWidgets() {
+    return this.customWidgets;
+  }
   getEmptyPageContent() {
     const block = new Block();
     const section = new Section();
@@ -13513,7 +13529,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     const insertSection = (index) => {
       if (!props.page)
         return;
-      editor.commandRegistry.executeCommand(OpenAddPartModalCommand.COMMAND_ID);
+      editor.commandRegistry.executeCommand(AddSectionCommand.COMMAND_ID);
     };
     return (_ctx, _cache) => {
       var _a;
@@ -14364,7 +14380,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     pageContent: {},
     locales: {},
     locale: {},
-    toolbarPlugin: {}
+    toolbarPlugin: {},
+    plugin: {}
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
@@ -14377,6 +14394,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       pageBuilderEditor.setLocales(props.locales);
     if (props.locale)
       pageBuilderEditor.setLocale(props.locale);
+    if (props.plugin)
+      pageBuilderEditor.registerCustomPlugin(props.plugin);
     pageBuilderEditor.registerPlugin({
       // TODO
       commands: createDefaultCommands(modal)
@@ -14393,57 +14412,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const colorHistory = ref([]);
     provide("colorHistory", colorHistory);
-    const getLocalDesignPartContent = () => {
-      let content;
-      if (pageBuilderEditor.model.rootPart) {
-        content = doGetLocalDesignPartContent(pageBuilderEditor.model.rootPart);
-      }
-      return content;
-    };
-    const doGetLocalDesignPartContent = (part) => {
-      let content;
-      if (part.isGlobalDesignPart() || part.isLocalMarketingPart()) {
-        const properties = getLocalDesignPartProperties(part);
-        if (properties) {
-          if (!content)
-            content = [];
-          content.push({ partId: part.partId, data: properties });
-        }
-      }
-      if (part.children) {
-        for (const child of part.children) {
-          const childContent = doGetLocalDesignPartContent(child);
-          if (childContent)
-            content = [...content || [], ...childContent];
-        }
-      }
-      return content;
-    };
-    const getLocalDesignPartProperties = (part) => {
-      let properties;
-      if (part.isWidget()) {
-        const defs = pageBuilderEditor.partManager.getLocalDesignPartPropertyDefinitions(part.partName);
-        if (defs) {
-          const data = {};
-          for (const def of defs) {
-            if (part.properties)
-              data[def.propertyName] = part.properties[def.propertyName];
-          }
-          properties = { [part.partId]: data };
-        }
-      }
-      if (part.children) {
-        for (const child of part.children) {
-          const childProperties = getLocalDesignPartProperties(child);
-          if (childProperties) {
-            properties = { ...properties, ...childProperties };
-          }
-        }
-      }
-      return properties;
+    const getPageContent = () => {
+      const partIds = (pageBuilderEditor.model.rootPart.children || []).map((v) => v.partId);
+      return pageBuilderEditor.model.serializePageModel(partIds);
     };
     __expose({
-      getLocalDesignPartContent
+      getPageContent
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
@@ -14470,12 +14444,12 @@ export {
   PAGE_BUILDER_KEY as c,
   PAGE_TYPE$1 as d,
   Page as e,
-  _sfc_main$q as f,
+  _sfc_main$1$1 as f,
   PageBuilderViewerEvent as g,
   Part as h,
-  _sfc_main$3$1 as i,
-  _sfc_main$5$1 as j,
-  _sfc_main$2$1 as k,
+  _sfc_main$q as i,
+  _sfc_main$3$1 as j,
+  _sfc_main$5$1 as k,
   _sfc_main$4$1 as l,
   RootPart as m,
   Section as n,
@@ -14487,5 +14461,6 @@ export {
   providePageBuilderViewer as t,
   usePageBuilderEditor as u,
   usePageBuilder as v,
-  usePageBuilderViewer as w
+  widgetPartDefinitions as w,
+  usePageBuilderViewer as x
 };