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

package/dist/PageBuilderEditor.vue.d.ts

@@ -8,8 +8,9 @@ declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimePr
     locales?: string[] | undefined;
     locale?: string | undefined;
     toolbarPlugin?: PageBuilderToolbarPlugin | undefined;
+    plugin?: unknown;
 }>, {
-    getLocalDesignPartContent: () => any[] | undefined;
+    getPageContent: () => string;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     instanceId?: string | undefined;
     title?: string | undefined;
@@ -18,6 +19,7 @@ declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimePr
     locales?: string[] | undefined;
     locale?: string | undefined;
     toolbarPlugin?: PageBuilderToolbarPlugin | undefined;
+    plugin?: unknown;
 }>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/{PbPropertyEditorColor-CZHXz7K6.js → PbPropertyEditorColor-DI5Bm25g.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
 import { BSTextInput } from "@g1cloud/bluesea";
-import { P as PbColorPicker } from "./index-CuI4K01B.js";
+import { P as PbColorPicker } from "./index-BIoyBfxM.js";
 const _hoisted_1 = { class: "property-editor property-editor-color" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorHtml-Bid2WYyb.js → PbPropertyEditorHtml-Bb_kuc4m.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, defineAsyncComponent } from "vue";
 import { useModal } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-CuI4K01B.js";
+import { u as usePageBuilderEditor } from "./index-BIoyBfxM.js";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorImage-N4VYkBhB.js → PbPropertyEditorImage-DbxF_eg7.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
 import { useModal } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor, a as PageBuilderEditorEvent } from "./index-CuI4K01B.js";
+import { u as usePageBuilderEditor, a as PageBuilderEditorEvent } from "./index-BIoyBfxM.js";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorMultilineText-BFGht6hc.js → PbPropertyEditorMultilineText-CefJbbiM.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
 import { BSMultiLangTextArea, BSTextArea } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-CuI4K01B.js";
+import { u as usePageBuilderEditor } from "./index-BIoyBfxM.js";
 const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{index-CuI4K01B.js → index-BIoyBfxM.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,18 @@ class PageBuilderViewerImpl {
   setLocale(locale) {
     this.locale.value = locale || "en";
   }
+  registerCustomPlugin(plugin) {
+    if (plugin.widgets) {
+      plugin.widgets.forEach((v) => {
+        partDefinitions$1[v.partName] = {
+          partType: "Widget",
+          partName: v.partName,
+          creator: () => _sfc_main$q,
+          component: v.component
+        };
+      });
+    }
+  }
   render(pageContent) {
     const rootPart = new RootPart();
     rootPart.pageBuilderId = this.instanceId;
@@ -7365,6 +7273,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 +7317,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 +7347,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 +7381,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 +7390,60 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  __name: "PbCustomWidget",
+  props: {
+    part: {},
+    viewMode: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const pageBuilder = usePageBuilder();
+    const comp = computed(() => pageBuilder.getCustomWidgetComponent(props.part));
+    const bind = computed(() => ({
+      pageBuilderId: pageBuilder.instanceId,
+      properties: props.part.properties,
+      placeholder: true
+    }));
+    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];
@@ -8058,12 +8029,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-CefJbbiM.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-DI5Bm25g.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-DbxF_eg7.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-Bb_kuc4m.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -12118,32 +12088,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 = {};
@@ -13381,6 +13325,12 @@ class PageBuilderEditorImpl {
   setLocales(locales) {
     this.locales.value = locales || ["en"];
   }
+  getCustomWidgetComponent(part) {
+    const def = this.partManager.getPartDefinition(part.partName);
+    if (def) {
+      return def.component;
+    }
+  }
   registerPlugin(plugin) {
     if (plugin.partDefinitions)
       this.partManager.registerPartDefinitions(plugin.partDefinitions);
@@ -13397,6 +13347,22 @@ 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.partName = "Widget";
+        w.creator = () => _sfc_main$q;
+        w.propertyGroups = [...w.propertyGroups, ...defaultWidgetPropertyGroups()];
+        partDefinitions2[v.partName] = w;
+      });
+      this.partManager.registerPartDefinitions(partDefinitions2);
+    }
+    if (plugin.propertyEditors) {
+      this.partManager.registerPartPropertyEditors(plugin.propertyEditors);
+    }
+  }
   initData(content) {
     this.model.rootPart.pageBuilderId = this.instanceId;
     this.model.rootPart.language = this.locale.value;
@@ -14364,7 +14330,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     pageContent: {},
     locales: {},
     locale: {},
-    toolbarPlugin: {}
+    toolbarPlugin: {},
+    plugin: {}
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
@@ -14377,6 +14344,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 +14362,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 +14394,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,

package/dist/model/page-builder-editor.d.ts

@@ -1,11 +1,11 @@
 import { ContextMenuRegistry, ContextMenuRegistryImpl, KeyHandlers, PageBuilderContext, PageBuilderContextImpl } from './context.ts';
 import { ToolButtonRegistry } from './toolbar.ts';
 import { PageBuilderPlugin } from './plugin.ts';
-import { PageBuilder } from '@g1cloud/page-builder-viewer';
+import { IPart, PageBuilder } from '@g1cloud/page-builder-viewer';
 import { CommandRegistry, CommandRegistryImpl } from './command';
 import { PartManager } from './part-manager';
 import { Model } from './model';
-import { Ref } from 'vue';
+import { Component, Ref } from 'vue';
 
 export type PageBuilderEditMode = 'template' | 'global' | 'local' | 'free';
 export declare const createPageBuilderEditor: () => PageBuilderEditor;
@@ -27,6 +27,7 @@ export interface PageBuilderEditor extends PageBuilder {
     scale: Ref<number>;
     locales: Ref<string[]>;
     registerPlugin(plugin: PageBuilderPlugin): void;
+    registerCustomPlugin(plugin: any): void;
     initData(content?: any): void;
     undo(): void;
     redo(): void;
@@ -55,7 +56,9 @@ export declare class PageBuilderEditorImpl implements PageBuilderEditor {
     setLocale(locale?: string): void;
     getLocales(): string[];
     setLocales(locales?: string[]): void;
+    getCustomWidgetComponent(part: IPart): Component | undefined;
     registerPlugin(plugin: PageBuilderPlugin): void;
+    registerCustomPlugin(plugin: any): void;
     initData(content?: any[]): void;
     undo(): void;
     redo(): void;