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

package/dist/PageBuilderEditor.vue.d.ts

@@ -3,6 +3,8 @@ declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimePr
     title?: string | undefined;
     editMode?: string | undefined;
     pageContent?: any;
+    locales?: string[] | undefined;
+    language?: string | undefined;
 }>, {
     getLocalDesignPartContent: () => any[] | undefined;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
@@ -10,6 +12,8 @@ declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimePr
     title?: string | undefined;
     editMode?: string | undefined;
     pageContent?: any;
+    locales?: string[] | undefined;
+    language?: string | undefined;
 }>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/{PbPropertyEditorImage-B4sYTAHu.js → PbPropertyEditorImage-EuqsavTF.js}

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

package/dist/PbPropertyEditorMultilineText-CfRbKELF.js

@@ -0,0 +1,65 @@
+import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
+import { BSTextArea } from "@g1cloud/bluesea";
+import { u as usePageBuilderEditor } from "./index-Mob7K7vK.js";
+const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
+const _hoisted_2 = { class: "label" };
+const _hoisted_3 = ["textContent"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "PbPropertyEditorMultilineText",
+  props: {
+    property: {},
+    value: {}
+  },
+  emits: ["update-property-value"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const emitUpdatePropertyValue = (value) => {
+      const properties = {};
+      if (props.value && typeof props.value === "object") {
+        properties[props.property.propertyName] = {
+          ...props.value,
+          [language.value]: value
+        };
+      } else {
+        properties[props.property.propertyName] = {
+          [language.value]: value
+        };
+      }
+      emit("update-property-value", properties);
+    };
+    const pageBuilder = usePageBuilderEditor();
+    const language = computed(() => pageBuilder.language.value);
+    const text = computed({
+      get() {
+        return props.value && typeof props.value === "object" ? props.value[language.value] : "";
+      },
+      set() {
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("label", {
+            textContent: toDisplayString(_ctx.property.caption)
+          }, null, 8, _hoisted_3)
+        ]),
+        createElementVNode("div", null, [
+          createVNode(unref(BSTextArea), {
+            modelValue: text.value,
+            "onUpdate:modelValue": [
+              _cache[0] || (_cache[0] = ($event) => text.value = $event),
+              emitUpdatePropertyValue
+            ],
+            prefix: language.value,
+            height: "60px",
+            width: "100%"
+          }, null, 8, ["modelValue", "prefix"])
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/{PbPropertyEditorProduct-qHnu5dvM.js → PbPropertyEditorProduct-COnCyYJl.js}

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

package/dist/components/sidebar/property/PbPropertyEditorMultilineText.vue.d.ts

@@ -1,15 +1,16 @@
+import { MultiLangText } from '@g1cloud/page-builder-viewer';
 import { PartProperty } from '../../../model/part-property.ts';
 
 declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
     property: PartProperty;
-    value?: string | undefined;
+    value?: MultiLangText | undefined;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update-property-value": (properties: Record<string, string>) => void;
+    "update-property-value": (properties: Record<string, MultiLangText>) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     property: PartProperty;
-    value?: string | undefined;
+    value?: MultiLangText | undefined;
 }>>> & {
-    "onUpdate-property-value"?: ((properties: Record<string, string>) => any) | undefined;
+    "onUpdate-property-value"?: ((properties: Record<string, MultiLangText>) => any) | undefined;
 }, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/{index-DSV66_zQ.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() {
@@ -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,12 +7045,11 @@ 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" : " "))
+          textContent: toDisplayString(text.value)
         }), null, 16, _hoisted_1$2$1)
       ], 2);
     };
@@ -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) {
@@ -7263,12 +7312,14 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   props: {
     instanceId: {},
     pageContent: {},
-    isMobilePage: { type: Boolean }
+    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[props.isMobilePage ? 0 : 1]);
     onMounted(() => {
@@ -7413,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) {
@@ -7645,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);
             }
           }
@@ -7684,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]);
         }
       }
     }
@@ -7696,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;
@@ -7737,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 });
@@ -7866,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-B4sYTAHu.js")),
-    "product": () => defineAsyncComponent(() => import("./PbPropertyEditorProduct-qHnu5dvM.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;
 };
@@ -8858,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;
     });
@@ -11144,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"));
@@ -13047,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";
@@ -13071,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) {
@@ -13105,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();
@@ -13359,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)
@@ -13366,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) => {
@@ -13388,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"])
         ])
       ]);
     };
@@ -13602,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;
           }
@@ -13616,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;
           }
@@ -13627,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) => {
@@ -13660,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;
           }
@@ -13674,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, [
@@ -13821,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, [
@@ -13872,7 +13963,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     instanceId: {},
     title: {},
     editMode: {},
-    pageContent: {}
+    pageContent: {},
+    locales: {},
+    language: {}
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
@@ -13881,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)
@@ -13899,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 = {

package/dist/model/model.d.ts

@@ -1,4 +1,4 @@
-import { IPart } from '@g1cloud/page-builder-viewer';
+import { IPart, MultiLangText } from '@g1cloud/page-builder-viewer';
 import * as Y from 'yjs';
 export declare const ROOT_TYPE = "Root";
 export declare const PAGE_TYPE = "Page";
@@ -28,6 +28,8 @@ export declare class Model {
     private updateParts;
     private deleteParts;
     private createElement;
+    private setElementAttribute;
+    private getElementAttribute;
     private getIndexOfElement;
     private emitUpdateModelEvent;
 }
@@ -47,7 +49,7 @@ export type PartInsertResult = {
 };
 export type PartUpdateResult = {
     element: Y.XmlElement;
-    properties: Record<string, string>;
+    properties: Record<string, MultiLangText>;
     removeOtherProperties?: boolean;
 };
 export type PartDeleteResult = {

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

@@ -22,11 +22,15 @@ export interface PageBuilderEditor {
     title?: string;
     editMode: PageBuilderEditMode;
     scale: Ref<number>;
+    locales: Ref<string[]>;
+    language: Ref<string>;
     registerPlugin(plugin: PageBuilderPlugin): void;
     initData(content?: any): void;
     undo(): void;
     redo(): void;
     zoom(scale: number): void;
+    setLocales(locales: string[]): void;
+    setLanguage(language: string): void;
 }
 export declare class PageBuilderEditorImpl implements PageBuilderEditor {
     instanceId?: string;
@@ -40,12 +44,16 @@ export declare class PageBuilderEditorImpl implements PageBuilderEditor {
     title?: string;
     editMode: PageBuilderEditMode;
     scale: Ref<number>;
+    locales: Ref<string[]>;
+    language: Ref<string>;
     constructor();
     registerPlugin(plugin: PageBuilderPlugin): void;
     initData(content?: any[]): void;
     undo(): void;
     redo(): void;
     zoom(scale: number): void;
+    setLocales(locales: string[]): void;
+    setLanguage(language: string): void;
     private getEmptyPageContent;
     private initPlugins;
 }

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

@@ -1,5 +1,5 @@
-import { IPart } from '@g1cloud/page-builder-viewer';
+import { IPart, MultiLangText } from '@g1cloud/page-builder-viewer';
 
-export declare const getPropertyValueOfParts: (parts: IPart[], propertyName: string) => string | undefined;
+export declare const getPropertyValueOfParts: (parts: IPart[], propertyName: string) => MultiLangText | undefined;
 export declare const isCursorInElement: (event: MouseEvent, element: Element) => boolean;
 export declare const extractCommonStylesFromProperties: (properties: Record<string, string>) => Record<string, unknown>;

package/dist/page-builder-editor.js

@@ -1,4 +1,4 @@
-import { B, a, M, b, c, _, P, d, e, f, g, h, i, R, j, S, k, W, l, m, n, o, p, q } from "./index-DSV66_zQ.js";
+import { B, a, M, b, c, _, P, d, e, f, g, h, i, R, j, S, k, W, l, m, n, o, p, q } from "./index-Mob7K7vK.js";
 export {
   B as BLOCK_TYPE,
   a as Block,

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

@@ -6775,12 +6775,29 @@ var __publicField = (obj, key, value) => {
       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;
     }
@@ -6807,6 +6824,18 @@ var __publicField = (obj, key, value) => {
     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() {
@@ -6996,6 +7025,19 @@ var __publicField = (obj, key, value) => {
     },
     setup(__props) {
       const props = __props;
+      const text = vue.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 = vue.computed(() => {
         var _a;
         return {
@@ -7005,12 +7047,11 @@ var __publicField = (obj, key, value) => {
         };
       });
       return (_ctx, _cache) => {
-        var _a, _b;
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass([[_ctx.viewMode && !((_a = _ctx.part.properties) == null ? void 0 : _a.text) ? "empty" : ""], "pb-text-widget"])
+          class: vue.normalizeClass([[!_ctx.viewMode && !text.value ? "empty" : ""], "pb-text-widget"])
         }, [
           vue.createElementVNode("div", vue.mergeProps({ class: "text" }, style.value, {
-            textContent: vue.toDisplayString(((_b = _ctx.part.properties) == null ? void 0 : _b.text) || (!_ctx.viewMode ? "Empty text" : " "))
+            textContent: vue.toDisplayString(text.value)
           }), null, 16, _hoisted_1$2$1)
         ], 2);
       };
@@ -7163,11 +7204,14 @@ var __publicField = (obj, key, value) => {
     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) {
@@ -7186,7 +7230,12 @@ var __publicField = (obj, key, value) => {
       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) {
@@ -7265,12 +7314,14 @@ var __publicField = (obj, key, value) => {
     props: {
       instanceId: {},
       pageContent: {},
-      isMobilePage: { type: Boolean }
+      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 = vue.computed(() => pageBuilderViewer.model.rootPart.value.children && pageBuilderViewer.model.rootPart.value.children[props.isMobilePage ? 0 : 1]);
       vue.onMounted(() => {
@@ -7415,10 +7466,16 @@ var __publicField = (obj, key, value) => {
       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) {
@@ -7647,13 +7704,14 @@ var __publicField = (obj, key, value) => {
         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);
               }
             }
@@ -7686,7 +7744,7 @@ var __publicField = (obj, key, value) => {
       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]);
           }
         }
       }
@@ -7698,6 +7756,23 @@ var __publicField = (obj, key, value) => {
       }
       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;
@@ -7739,7 +7814,7 @@ var __publicField = (obj, key, value) => {
           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 });
@@ -7875,7 +7950,13 @@ var __publicField = (obj, key, value) => {
     };
   };
   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;
   };
@@ -8860,12 +8941,12 @@ var __publicField = (obj, key, value) => {
       });
       const properties = vue.computed(() => ({ style: props.part.getStyles() }));
       const disabled = vue.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;
       });
@@ -11146,7 +11227,7 @@ var __publicField = (obj, key, value) => {
       const emptyColor = () => {
       };
       const borderLeftWidth = vue.computed(() => getPropertyValueOfParts(props.selectedParts, "borderLeftWidth"));
-      const borderRightWidth = vue.computed(() => getPropertyValueOfParts(props.selectedParts, "borderRigthWidth"));
+      const borderRightWidth = vue.computed(() => getPropertyValueOfParts(props.selectedParts, "borderRightWidth"));
       const borderTopWidth = vue.computed(() => getPropertyValueOfParts(props.selectedParts, "borderTopWidth"));
       const borderBottomWidth = vue.computed(() => getPropertyValueOfParts(props.selectedParts, "borderBottomWidth"));
       const borderTopLeftRadius = vue.computed(() => getPropertyValueOfParts(props.selectedParts, "borderTopLeftRadius"));
@@ -13049,6 +13130,8 @@ var __publicField = (obj, key, value) => {
       __publicField(this, "title");
       __publicField(this, "editMode");
       __publicField(this, "scale", vue.ref(1));
+      __publicField(this, "locales", vue.ref(["en"]));
+      __publicField(this, "language", vue.ref("en"));
       this.model = new Model();
       this.context = new PageBuilderContextImpl(this);
       this.editMode = "free";
@@ -13073,6 +13156,7 @@ var __publicField = (obj, key, value) => {
     }
     initData(content) {
       this.model.rootPart.pageBuilderId = this.instanceId;
+      this.model.rootPart.language = this.language.value;
       let parts;
       if (content) {
         for (const p of content) {
@@ -13107,6 +13191,15 @@ var __publicField = (obj, key, value) => {
     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();
@@ -13361,6 +13454,9 @@ var __publicField = (obj, key, value) => {
     setup(__props) {
       const pageBuilder = usePageBuilderEditor();
       const buttonGroups = pageBuilder.toolButtonRegistry.getToolButtonGroups();
+      const locales = vue.computed(() => {
+        return pageBuilder.locales.value;
+      });
       const scale = vue.computed(() => `${Math.round(100 * pageBuilder.scale.value)}%`);
       const zoom = async (scaleString) => {
         if (!scaleString)
@@ -13368,7 +13464,9 @@ var __publicField = (obj, key, value) => {
         const scale2 = parseInt(scaleString.replaceAll(/[^0-9]+/g, "")) / 100;
         pageBuilder.zoom(scale2);
       };
-      const lang = vue.ref("English");
+      const changeLocale = (locale) => {
+        pageBuilder.setLanguage(locale);
+      };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(buttonGroups), (group) => {
@@ -13390,13 +13488,10 @@ var __publicField = (obj, key, value) => {
             }, null, 8, ["modelValue"])
           ]),
           vue.createElementVNode("div", _hoisted_3$9, [
-            vue.createVNode(vue.unref(bluesea.BSSelect), {
-              modelValue: lang.value,
-              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => lang.value = $event),
-              items: ["English", "日本語", "한국어"],
-              "view-mode": false,
-              placeholder: "English"
-            }, null, 8, ["modelValue"])
+            vue.createVNode(vue.unref(bluesea.BSLocaleSelect), {
+              locales: locales.value,
+              onChangeLocale: changeLocale
+            }, null, 8, ["locales"])
           ])
         ]);
       };
@@ -13604,13 +13699,13 @@ var __publicField = (obj, key, value) => {
       const props = __props;
       const pageBuilder = usePageBuilderEditor();
       const propertyEditor = vue.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;
             }
@@ -13618,7 +13713,7 @@ var __publicField = (obj, key, value) => {
         }
         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;
             }
@@ -13629,7 +13724,7 @@ var __publicField = (obj, key, value) => {
           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 = vue.computed(() => getPropertyValueOfParts(props.selectedParts, props.property.propertyName));
       const updatePropertyValue = (properties) => {
@@ -13662,13 +13757,13 @@ var __publicField = (obj, key, value) => {
       const props = __props;
       const pageBuilder = usePageBuilderEditor();
       const groupEditor = vue.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;
             }
@@ -13676,13 +13771,13 @@ var __publicField = (obj, key, value) => {
         }
         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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
@@ -13823,16 +13918,12 @@ var __publicField = (obj, key, value) => {
         }
       });
       const showLocalMarketingPart = vue.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
@@ -13874,7 +13965,9 @@ var __publicField = (obj, key, value) => {
       instanceId: {},
       title: {},
       editMode: {},
-      pageContent: {}
+      pageContent: {},
+      locales: {},
+      language: {}
     },
     setup(__props, { expose: __expose }) {
       const props = __props;
@@ -13883,6 +13976,10 @@ var __publicField = (obj, key, value) => {
       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)
@@ -13901,9 +13998,8 @@ var __publicField = (obj, key, value) => {
         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)
@@ -14044,9 +14140,27 @@ var __publicField = (obj, key, value) => {
       const emit = __emit;
       const emitUpdatePropertyValue = (value) => {
         const properties = {};
-        properties[props.property.propertyName] = value;
+        if (props.value && typeof props.value === "object") {
+          properties[props.property.propertyName] = {
+            ...props.value,
+            [language.value]: value
+          };
+        } else {
+          properties[props.property.propertyName] = {
+            [language.value]: value
+          };
+        }
         emit("update-property-value", properties);
       };
+      const pageBuilder = usePageBuilderEditor();
+      const language = vue.computed(() => pageBuilder.language.value);
+      const text = vue.computed({
+        get() {
+          return props.value && typeof props.value === "object" ? props.value[language.value] : "";
+        },
+        set() {
+        }
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
           vue.createElementVNode("div", _hoisted_2$5, [
@@ -14056,11 +14170,15 @@ var __publicField = (obj, key, value) => {
           ]),
           vue.createElementVNode("div", null, [
             vue.createVNode(vue.unref(bluesea.BSTextArea), {
-              "model-value": _ctx.value,
+              modelValue: text.value,
+              "onUpdate:modelValue": [
+                _cache[0] || (_cache[0] = ($event) => text.value = $event),
+                emitUpdatePropertyValue
+              ],
+              prefix: language.value,
               height: "60px",
-              width: "100%",
-              "onUpdate:modelValue": emitUpdatePropertyValue
-            }, null, 8, ["model-value"])
+              width: "100%"
+            }, null, 8, ["modelValue", "prefix"])
           ])
         ]);
       };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@g1cloud/page-builder-editor",
   "private": false,
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.4",
   "engins": {
     "node": ">= 20.0.0"
   },
@@ -16,7 +16,7 @@
   "author": "zag@g1project.net",
   "license": "LicenseRef-LICENSE",
   "peerDependencies": {
-    "@g1cloud/bluesea": "5.0.0-alpha.38"
+    "@g1cloud/bluesea": "5.0.0-alpha.46"
   },
   "dependencies": {
     "@ckpack/vue-color": "^1.5.0",
@@ -27,7 +27,7 @@
     "vue-router": "^4.3.2",
     "vue3-click-away": "^1.2.4",
     "yjs": "^13.6.14",
-    "@g1cloud/page-builder-viewer": "1.0.0-alpha.3"
+    "@g1cloud/page-builder-viewer": "1.0.0-alpha.4"
   },
   "devDependencies": {
     "@types/node": "^20.12.7",

package/dist/PbPropertyEditorMultilineText-BMeNUGm8.js

@@ -1,42 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
-import { BSTextArea } from "@g1cloud/bluesea";
-const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
-const _hoisted_2 = { class: "label" };
-const _hoisted_3 = ["textContent"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "PbPropertyEditorMultilineText",
-  props: {
-    property: {},
-    value: {}
-  },
-  emits: ["update-property-value"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const emitUpdatePropertyValue = (value) => {
-      const properties = {};
-      properties[props.property.propertyName] = value;
-      emit("update-property-value", properties);
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
-          createElementVNode("label", {
-            textContent: toDisplayString(_ctx.property.caption)
-          }, null, 8, _hoisted_3)
-        ]),
-        createElementVNode("div", null, [
-          createVNode(unref(BSTextArea), {
-            "model-value": _ctx.value,
-            height: "60px",
-            width: "100%",
-            "onUpdate:modelValue": emitUpdatePropertyValue
-          }, null, 8, ["model-value"])
-        ])
-      ]);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};