@g1cloud/page-builder-editor 1.0.0-alpha.2 → 1.0.0-alpha.4

package/dist/{index-Dwk2ffWe.js → index-Mob7K7vK.js}

@@ -5,7 +5,7 @@ var __publicField = (obj, 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, withCtx } from "vue";
-import { notNull, BSTextInput, vClickOutside, useModal, useContextMenu, BSSelect, BSTabSheet, BSTree, BSDateRange } from "@g1cloud/bluesea";
+import { notNull, BSTextInput, vClickOutside, useModal, useContextMenu, BSSelect, BSLocaleSelect, BSTabSheet, BSTree, BSDateRange } from "@g1cloud/bluesea";
 const create$5 = () => /* @__PURE__ */ new Map();
 const copy = (m) => {
   const r = create$5();
@@ -6773,12 +6773,29 @@ class Part {
     if (this.parent)
       return this.parent.getPageBuilderId();
   }
+  getLanguage() {
+    if (this.isRoot())
+      return this.language;
+    if (this.parent)
+      return this.parent.getLanguage();
+  }
+  isGlobalDesignPart() {
+    return false;
+  }
+  isLocalDesignPart() {
+    return false;
+  }
+  isLocalMarketingPart() {
+    return false;
+  }
 }
 class RootPart extends Part {
   constructor() {
     super();
     __publicField2(this, "pageBuilderId");
+    __publicField2(this, "language");
     this.pageBuilderId = "";
+    this.language = "en";
     this.partType = ROOT_TYPE$1;
     this.partName = ROOT_TYPE$1;
   }
@@ -6805,6 +6822,18 @@ class Section extends Part {
   isSection() {
     return true;
   }
+  isGlobalDesignPart() {
+    var _a;
+    return ((_a = this.properties) == null ? void 0 : _a.sectionType) === "GlobalDesignPart";
+  }
+  isLocalDesignPart() {
+    var _a;
+    return ((_a = this.properties) == null ? void 0 : _a.sectionType) === "LocalDesignPart";
+  }
+  isLocalMarketingPart() {
+    var _a;
+    return ((_a = this.properties) == null ? void 0 : _a.sectionType) === "LocalMarketingPart";
+  }
 }
 class Block extends Part {
   constructor() {
@@ -6835,7 +6864,7 @@ let Model$1 = class Model {
     this.rootPart = ref(new RootPart());
   }
 };
-const _hoisted_1$8$1 = ["data-model-id"];
+const _hoisted_1$7$1 = ["data-model-id"];
 const _hoisted_2$3$1 = {
   key: 1,
   class: "pb-nested-widget"
@@ -6870,11 +6899,11 @@ const _sfc_main$8$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$7$1 = /* @__PURE__ */ defineComponent({
   __name: "PbBlock",
   props: {
@@ -6898,11 +6927,11 @@ const _sfc_main$7$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_1$5$1 = { class: "pb-block" };
 const _hoisted_2$2$1 = /* @__PURE__ */ createElementVNode("div", {
   class: "pb-widget",
   style: { "margin": "0 auto" }
@@ -6921,11 +6950,11 @@ const _sfc_main$6$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$2$1);
     };
   }
 });
-const _hoisted_1$5$1 = ["data-model-id"];
+const _hoisted_1$4$1 = ["data-model-id"];
 const _sfc_main$5$1 = /* @__PURE__ */ defineComponent({
   __name: "PbSection",
   props: {
@@ -6951,11 +6980,11 @@ const _sfc_main$5$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_1$3$1 = { class: "pb-image-widget" };
 const _hoisted_2$1$1 = ["src"];
 const _hoisted_3$1$1 = {
   key: 1,
@@ -6974,7 +7003,7 @@ const _sfc_main$4$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,
@@ -6985,7 +7014,7 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$3$1 = ["textContent"];
+const _hoisted_1$2$1 = ["textContent"];
 const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
   __name: "PbTextWidget",
   props: {
@@ -6994,6 +7023,19 @@ const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
+    const text = computed(() => {
+      var _a;
+      if ((_a = props.part.properties) == null ? void 0 : _a.text) {
+        if (typeof props.part.properties.text === "string") {
+          return props.part.properties.text;
+        } else {
+          return props.part.properties.text[props.part.getLanguage() || "en"];
+        }
+      } else if (!props.viewMode) {
+        return "Empty text";
+      }
+      return "";
+    });
     const style = computed(() => {
       var _a;
       return {
@@ -7003,13 +7045,12 @@ const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
       };
     });
     return (_ctx, _cache) => {
-      var _a, _b;
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass([[_ctx.viewMode && !((_a = _ctx.part.properties) == null ? void 0 : _a.text) ? "empty" : ""], "pb-text-widget"])
+        class: normalizeClass([[!_ctx.viewMode && !text.value ? "empty" : ""], "pb-text-widget"])
       }, [
         createElementVNode("div", mergeProps({ class: "text" }, style.value, {
-          textContent: toDisplayString(((_b = _ctx.part.properties) == null ? void 0 : _b.text) || (!_ctx.viewMode ? "Empty text" : " "))
-        }), null, 16, _hoisted_1$3$1)
+          textContent: toDisplayString(text.value)
+        }), null, 16, _hoisted_1$2$1)
       ], 2);
     };
   }
@@ -7048,7 +7089,7 @@ const PageBuilderViewerEvent = {
     }
   }
 };
-const _hoisted_1$2$1 = { class: "pb-product-list-widget" };
+const _hoisted_1$1$1 = { class: "pb-product-list-widget" };
 const _hoisted_2$l = { class: "product" };
 const _hoisted_3$g = { class: "image" };
 const _hoisted_4$d = ["src"];
@@ -7090,7 +7131,7 @@ const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
       return (_a = props.part.properties) == null ? void 0 : _a.products;
     }, () => updateProducts());
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2$1, [
+      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,
@@ -7161,11 +7202,14 @@ class PageBuilderViewerImpl {
   constructor() {
     __publicField2(this, "instanceId");
     __publicField2(this, "model");
+    __publicField2(this, "language");
     this.model = new Model$1();
+    this.language = "en";
   }
   render(pageContent) {
     const rootPart = new RootPart();
     rootPart.pageBuilderId = this.instanceId;
+    rootPart.language = this.language;
     rootPart.children = this.parsePageContent(pageContent);
     if (rootPart.children) {
       for (let page of rootPart.children) {
@@ -7184,7 +7228,12 @@ class PageBuilderViewerImpl {
     part.partType = partContent.partType;
     part.partName = partContent.partName;
     part.properties = partContent.properties ? JSON.parse(JSON.stringify(partContent.properties)) : null;
-    part.children = (partContent.children || []).map((child) => this.parsePartContent(child)).filter((part2) => !!part2);
+    part.children = (partContent.children || []).map((child) => {
+      const childPart = this.parsePartContent(child);
+      if (childPart)
+        childPart.parent = part;
+      return childPart;
+    }).filter((part2) => !!part2);
     return part;
   }
   createPart(partType) {
@@ -7228,11 +7277,11 @@ const createPartComponent = (part) => {
   }
 };
 const getPartDefinition = (partName) => partDefinitions$1[partName];
-const _hoisted_1$1$1 = { class: "pb-page-content" };
 const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
   __name: "PbPage",
   props: {
-    page: {}
+    page: {},
+    isMobilePage: { type: Boolean }
   },
   setup(__props) {
     const properties = computed(() => ({
@@ -7243,14 +7292,16 @@ const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       var _a;
       return openBlock(), createElementBlock("div", mergeProps({ class: "pb-page" }, properties.value), [
-        createElementVNode("div", _hoisted_1$1$1, [
+        createElementVNode("div", {
+          class: normalizeClass([[_ctx.isMobilePage ? "mobile" : "pc"], "pb-page-content"])
+        }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList((_a = _ctx.page) == null ? void 0 : _a.children, (section) => {
             return openBlock(), createBlock$1(_sfc_main$5$1, {
               key: section.partId,
               part: section
             }, null, 8, ["part"]);
           }), 128))
-        ])
+        ], 2)
       ], 16);
     };
   }
@@ -7260,14 +7311,17 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "PageBuilderViewer",
   props: {
     instanceId: {},
-    pageContent: {}
+    pageContent: {},
+    isMobilePage: { type: Boolean },
+    language: {}
   },
   setup(__props) {
     const props = __props;
     const pageBuilderViewer = createPageBuilderViewer();
     pageBuilderViewer.instanceId = props.instanceId;
+    pageBuilderViewer.language = props.language || "en";
     providePageBuilderViewer(pageBuilderViewer);
-    const page = computed(() => pageBuilderViewer.model.rootPart.value.children && pageBuilderViewer.model.rootPart.value.children[0]);
+    const page = computed(() => pageBuilderViewer.model.rootPart.value.children && pageBuilderViewer.model.rootPart.value.children[props.isMobilePage ? 0 : 1]);
     onMounted(() => {
       if (props.pageContent) {
         pageBuilderViewer.render(props.pageContent);
@@ -7285,8 +7339,9 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", _hoisted_1$u, [
         page.value ? (openBlock(), createBlock$1(_sfc_main$1$1, {
           key: 0,
+          "is-mobile-page": _ctx.isMobilePage,
           page: page.value
-        }, null, 8, ["page"])) : createCommentVNode("", true)
+        }, null, 8, ["is-mobile-page", "page"])) : createCommentVNode("", true)
       ]);
     };
   }
@@ -7409,10 +7464,16 @@ const syncProperties = (part, element) => {
     for (const name in attrs) {
       if (!RESERVED_ATTRIBUTES.includes(name)) {
         const value = attrs[name];
-        if (value)
-          part.properties[name] = value;
-        else
+        if (value) {
+          if (name.indexOf(".object") > 0) {
+            const _name = name.substring(0, name.length - ".object".length);
+            part.properties[_name] = JSON.parse(value);
+          } else {
+            part.properties[name] = value;
+          }
+        } else {
           delete part.properties[name];
+        }
       }
     }
     for (const name in part.properties) {
@@ -7641,13 +7702,14 @@ class Model2 {
       if (element) {
         for (const name in param.properties) {
           if (!RESERVED_ATTRIBUTES.includes(name)) {
-            element.setAttribute(name, param.properties[name]);
+            this.setElementAttribute(element, name, param.properties[name]);
           }
         }
         if (param.removeOtherAttributes) {
           const allAttributes = element.getAttributes();
           for (const name in allAttributes) {
-            if (!RESERVED_ATTRIBUTES.includes(name) && !param.properties.hasOwnProperty(name)) {
+            const _name = name.indexOf(".object") > 0 ? name.substring(0, name.length - ".object".length) : name;
+            if (!RESERVED_ATTRIBUTES.includes(name) && !param.properties.hasOwnProperty(_name)) {
               element.removeAttribute(name);
             }
           }
@@ -7680,7 +7742,7 @@ class Model2 {
     if (part.properties) {
       for (const name in part.properties) {
         if (!RESERVED_ATTRIBUTES.includes(name)) {
-          node.setAttribute(name, part.properties[name]);
+          this.setElementAttribute(node, name, part.properties[name]);
         }
       }
     }
@@ -7692,6 +7754,23 @@ class Model2 {
     }
     return node;
   }
+  setElementAttribute(node, name, value) {
+    if (!value)
+      return;
+    if (typeof value === "string") {
+      node.setAttribute(name, value);
+    } else if (typeof value === "object") {
+      node.setAttribute(`${name}.object`, JSON.stringify(value));
+    }
+  }
+  getElementAttribute(node, name) {
+    let value = node.getAttribute(name);
+    if (value)
+      return value;
+    value = node.getAttribute(`${name}.object`);
+    if (value)
+      return JSON.parse(value);
+  }
   getIndexOfElement(element) {
     if (element.parent instanceof YXmlElement) {
       let index = 0;
@@ -7733,7 +7812,7 @@ class Model2 {
         const properties = {};
         event.changes.keys.forEach((_, key) => {
           if (!RESERVED_ATTRIBUTES.includes(key)) {
-            properties[key] = element.getAttribute(key) || "";
+            properties[key] = this.getElementAttribute(element, key) || "";
           }
         });
         (_a = result.updated) == null ? void 0 : _a.push({ element, properties });
@@ -7862,14 +7941,20 @@ const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Bk0WJxA0.js")),
     "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-DNdXl-Tr.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BMeNUGm8.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-CfRbKELF.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-BJovN1su.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-DA92v7AE.js")),
-    "product": () => defineAsyncComponent(() => import("./PbPropertyEditorProduct-CkydxTwD.js"))
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-EuqsavTF.js")),
+    "product": () => defineAsyncComponent(() => import("./PbPropertyEditorProduct-COnCyYJl.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
-  const values = parts.map((part) => part.getProperty(propertyName) || "");
+  if (parts.length === 1) {
+    return parts[0].getProperty(propertyName);
+  }
+  const values = parts.map((part) => {
+    const val = part.getProperty(propertyName);
+    return val && typeof val === "string" ? val : "";
+  });
   const unique = values.filter((val, index) => values.indexOf(val) === index);
   return unique.length === 1 ? unique[0] : void 0;
 };
@@ -8854,12 +8939,12 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     });
     const properties = computed(() => ({ style: props.part.getStyles() }));
     const disabled = computed(() => {
-      var _a, _b, _c;
+      var _a;
       if (["static"].includes(((_a = props.part.properties) == null ? void 0 : _a.sectionType) || ""))
         return true;
-      if (pageBuilder.editMode === "local" && ["GlobalDesignPart"].includes(((_b = props.part.properties) == null ? void 0 : _b.sectionType) || ""))
+      if (pageBuilder.editMode === "local" && props.part.isGlobalDesignPart())
         return true;
-      if (pageBuilder.editMode === "global" && ["LocalDesignPart", "LocalMarketingPart"].includes(((_c = props.part.properties) == null ? void 0 : _c.sectionType) || ""))
+      if (pageBuilder.editMode === "global" && (props.part.isLocalDesignPart() || props.part.isLocalMarketingPart()))
         return true;
       return false;
     });
@@ -11140,7 +11225,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const emptyColor = () => {
     };
     const borderLeftWidth = computed(() => getPropertyValueOfParts(props.selectedParts, "borderLeftWidth"));
-    const borderRightWidth = computed(() => getPropertyValueOfParts(props.selectedParts, "borderRigthWidth"));
+    const borderRightWidth = computed(() => getPropertyValueOfParts(props.selectedParts, "borderRightWidth"));
     const borderTopWidth = computed(() => getPropertyValueOfParts(props.selectedParts, "borderTopWidth"));
     const borderBottomWidth = computed(() => getPropertyValueOfParts(props.selectedParts, "borderBottomWidth"));
     const borderTopLeftRadius = computed(() => getPropertyValueOfParts(props.selectedParts, "borderTopLeftRadius"));
@@ -13043,6 +13128,8 @@ class PageBuilderEditorImpl {
     __publicField(this, "title");
     __publicField(this, "editMode");
     __publicField(this, "scale", ref(1));
+    __publicField(this, "locales", ref(["en"]));
+    __publicField(this, "language", ref("en"));
     this.model = new Model2();
     this.context = new PageBuilderContextImpl(this);
     this.editMode = "free";
@@ -13067,6 +13154,7 @@ class PageBuilderEditorImpl {
   }
   initData(content) {
     this.model.rootPart.pageBuilderId = this.instanceId;
+    this.model.rootPart.language = this.language.value;
     let parts;
     if (content) {
       for (const p of content) {
@@ -13101,6 +13189,15 @@ class PageBuilderEditorImpl {
   zoom(scale) {
     this.scale.value = scale;
   }
+  setLocales(locales) {
+    this.locales.value = locales;
+    if (!locales.includes(this.language.value)) {
+      this.language.value = locales[0];
+    }
+  }
+  setLanguage(language) {
+    this.language.value = language;
+  }
   getEmptyPageContent() {
     const block = new Block();
     const section = new Section();
@@ -13355,6 +13452,9 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const pageBuilder = usePageBuilderEditor();
     const buttonGroups = pageBuilder.toolButtonRegistry.getToolButtonGroups();
+    const locales = computed(() => {
+      return pageBuilder.locales.value;
+    });
     const scale = computed(() => `${Math.round(100 * pageBuilder.scale.value)}%`);
     const zoom = async (scaleString) => {
       if (!scaleString)
@@ -13362,7 +13462,9 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       const scale2 = parseInt(scaleString.replaceAll(/[^0-9]+/g, "")) / 100;
       pageBuilder.zoom(scale2);
     };
-    const lang = ref("English");
+    const changeLocale = (locale) => {
+      pageBuilder.setLanguage(locale);
+    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$7, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(buttonGroups), (group) => {
@@ -13384,13 +13486,10 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           }, null, 8, ["modelValue"])
         ]),
         createElementVNode("div", _hoisted_3$1, [
-          createVNode(unref(BSSelect), {
-            modelValue: lang.value,
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => lang.value = $event),
-            items: ["English", "日本語", "한국어"],
-            "view-mode": false,
-            placeholder: "English"
-          }, null, 8, ["modelValue"])
+          createVNode(unref(BSLocaleSelect), {
+            locales: locales.value,
+            onChangeLocale: changeLocale
+          }, null, 8, ["locales"])
         ])
       ]);
     };
@@ -13598,13 +13697,13 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const pageBuilder = usePageBuilderEditor();
     const propertyEditor = computed(() => {
-      var _a, _b, _c, _d;
+      var _a;
       if (pageBuilder.editMode === "local" && props.selectedParts.length > 0) {
         const section = pageBuilder.partManager.findNearestSection(props.selectedParts[0]);
-        if (section && ["GlobalDesignPart"].includes(((_a = section.properties) == null ? void 0 : _a.sectionType) || "")) {
+        if (section && section.isGlobalDesignPart()) {
           return;
         }
-        if (section && ["LocalDesignPart", "LocalMarketingPart"].includes(((_b = section.properties) == null ? void 0 : _b.sectionType) || "")) {
+        if (section && (section.isLocalDesignPart() || section.isLocalMarketingPart())) {
           if (!props.property.localized) {
             return;
           }
@@ -13612,7 +13711,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       }
       if (pageBuilder.editMode === "template" && props.selectedParts.length > 0) {
         const section = pageBuilder.partManager.findNearestSection(props.selectedParts[0]);
-        if (section && ["LocalDesignPart", "LocalMarketingPart"].includes(((_c = section.properties) == null ? void 0 : _c.sectionType) || "")) {
+        if (section && (section.isLocalDesignPart() || section.isLocalMarketingPart())) {
           if (props.property.localized) {
             return;
           }
@@ -13623,7 +13722,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         if (editor)
           return editor;
       }
-      return (_d = pageBuilder.partManager.getPartPropertyEditor(props.property.propertyType)) == null ? void 0 : _d(props.property, props.selectedParts);
+      return (_a = pageBuilder.partManager.getPartPropertyEditor(props.property.propertyType)) == null ? void 0 : _a(props.property, props.selectedParts);
     });
     const value = computed(() => getPropertyValueOfParts(props.selectedParts, props.property.propertyName));
     const updatePropertyValue = (properties) => {
@@ -13656,13 +13755,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const pageBuilder = usePageBuilderEditor();
     const groupEditor = computed(() => {
-      var _a, _b, _c, _d, _e;
+      var _a, _b;
       if (pageBuilder.editMode === "local" && props.selectedParts.length > 0) {
         const section = pageBuilder.partManager.findNearestSection(props.selectedParts[0]);
-        if (section && ["GlobalDesignPart"].includes(((_a = section.properties) == null ? void 0 : _a.sectionType) || "")) {
+        if (section && section.isGlobalDesignPart()) {
           return;
         }
-        if (section && ["LocalDesignPart", "LocalMarketingPart"].includes(((_b = section.properties) == null ? void 0 : _b.sectionType) || "")) {
+        if (section && (section.isLocalDesignPart() || section.isLocalMarketingPart())) {
           if (!props.group.localized) {
             return;
           }
@@ -13670,13 +13769,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       }
       if (pageBuilder.editMode === "template" && props.selectedParts.length > 0) {
         const section = pageBuilder.partManager.findNearestSection(props.selectedParts[0]);
-        if (section && ["LocalDesignPart", "LocalMarketingPart"].includes(((_c = section.properties) == null ? void 0 : _c.sectionType) || "")) {
+        if (section && (section.isLocalDesignPart() || section.isLocalMarketingPart())) {
           if (props.group.localized) {
             return;
           }
         }
       }
-      return (_e = (_d = props.group).propertyGroupEditor) == null ? void 0 : _e.call(_d, props.group, props.selectedParts);
+      return (_b = (_a = props.group).propertyGroupEditor) == null ? void 0 : _b.call(_a, props.group, props.selectedParts);
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$4, [
@@ -13817,16 +13916,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
     });
     const showLocalMarketingPart = computed(() => {
-      var _a;
       if (pageBuilder.editMode === "template")
         return false;
       if (!selectedParts.length || selectedParts.length !== 1)
         return false;
       const part = selectedParts[0];
-      if (part.isSection() && ((_a = part.properties) == null ? void 0 : _a.sectionType) === "LocalMarketingPart") {
-        return true;
-      }
-      return false;
+      return part.isLocalMarketingPart();
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$2, [
@@ -13868,7 +13963,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     instanceId: {},
     title: {},
     editMode: {},
-    pageContent: {}
+    pageContent: {},
+    locales: {},
+    language: {}
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
@@ -13877,6 +13974,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     pageBuilderEditor.instanceId = props.instanceId;
     pageBuilderEditor.title = props.title;
     pageBuilderEditor.editMode = props.editMode || "free";
+    if (props.locales)
+      pageBuilderEditor.setLocales(props.locales);
+    if (props.language)
+      pageBuilderEditor.setLanguage(props.language);
     pageBuilderEditor.registerPlugin({
       // TODO
       commands: createDefaultCommands(modal)
@@ -13895,9 +13996,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return content;
     };
     const doGetLocalDesignPartContent = (part) => {
-      var _a;
       let content;
-      if (((_a = part.properties) == null ? void 0 : _a.sectionType) && ["LocalDesignPart", "LocalMarketingPart"].includes(part.properties.sectionType)) {
+      if (part.isGlobalDesignPart() || part.isLocalMarketingPart()) {
         const properties = getLocalDesignPartProperties(part);
         if (properties) {
           if (!content)

package/dist/model/context.d.ts

@@ -35,7 +35,7 @@ export declare class PageBuilderContextImpl implements PageBuilderContext {
         partType: string;
         partName: string;
         partId: string;
-        properties?: Record<string, string> | undefined;
+        properties?: Record<string, import('@g1cloud/page-builder-viewer').MultiLangText> | undefined;
         children?: any[] | undefined;
         parent?: any | undefined;
         isRoot: () => boolean;
@@ -45,16 +45,20 @@ export declare class PageBuilderContextImpl implements PageBuilderContext {
         isWidget: () => boolean;
         isNestedWidget: () => boolean;
         getName: () => string | undefined;
-        getProperty: (propertyName: string) => string | undefined;
+        getProperty: (propertyName: string) => import('@g1cloud/page-builder-viewer').MultiLangText | undefined;
         getClassNames: () => string;
         getStyles: () => Record<string, string>;
         getPageBuilderId: () => string | undefined;
+        getLanguage: () => string | undefined;
+        isGlobalDesignPart: () => boolean;
+        isLocalDesignPart: () => boolean;
+        isLocalMarketingPart: () => boolean;
     } | undefined;
     getSingleSelectedBlock(): {
         partType: string;
         partName: string;
         partId: string;
-        properties?: Record<string, string> | undefined;
+        properties?: Record<string, import('@g1cloud/page-builder-viewer').MultiLangText> | undefined;
         children?: any[] | undefined;
         parent?: any | undefined;
         isRoot: () => boolean;
@@ -64,16 +68,20 @@ export declare class PageBuilderContextImpl implements PageBuilderContext {
         isWidget: () => boolean;
         isNestedWidget: () => boolean;
         getName: () => string | undefined;
-        getProperty: (propertyName: string) => string | undefined;
+        getProperty: (propertyName: string) => import('@g1cloud/page-builder-viewer').MultiLangText | undefined;
         getClassNames: () => string;
         getStyles: () => Record<string, string>;
         getPageBuilderId: () => string | undefined;
+        getLanguage: () => string | undefined;
+        isGlobalDesignPart: () => boolean;
+        isLocalDesignPart: () => boolean;
+        isLocalMarketingPart: () => boolean;
     } | undefined;
     getSingleSelectedSection(): {
         partType: string;
         partName: string;
         partId: string;
-        properties?: Record<string, string> | undefined;
+        properties?: Record<string, import('@g1cloud/page-builder-viewer').MultiLangText> | undefined;
         children?: any[] | undefined;
         parent?: any | undefined;
         isRoot: () => boolean;
@@ -83,10 +91,14 @@ export declare class PageBuilderContextImpl implements PageBuilderContext {
         isWidget: () => boolean;
         isNestedWidget: () => boolean;
         getName: () => string | undefined;
-        getProperty: (propertyName: string) => string | undefined;
+        getProperty: (propertyName: string) => import('@g1cloud/page-builder-viewer').MultiLangText | undefined;
         getClassNames: () => string;
         getStyles: () => Record<string, string>;
         getPageBuilderId: () => string | undefined;
+        getLanguage: () => string | undefined;
+        isGlobalDesignPart: () => boolean;
+        isLocalDesignPart: () => boolean;
+        isLocalMarketingPart: () => boolean;
     } | undefined;
 }
 export type ContextMenu = {