@g1cloud/page-builder-editor 1.0.0-alpha.5 → 1.0.0-alpha.6

package/dist/PageBuilderEditor.vue.d.ts

@@ -3,7 +3,6 @@ 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;
@@ -12,7 +11,6 @@ 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;

package/dist/{PbPropertyEditorImage-EuqsavTF.js → PbPropertyEditorImage-D85hteOg.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-Mob7K7vK.js";
+import { u as usePageBuilderEditor, P as PageBuilderEditorEvent } from "./index-DQLcq5fP.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 → PbPropertyEditorMultilineText-BFzT7dlG.js}

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

package/dist/{PbPropertyEditorProduct-COnCyYJl.js → PbPropertyEditorProduct-CUSpnV8o.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-Mob7K7vK.js";
+import { u as usePageBuilderEditor, P as PageBuilderEditorEvent } from "./index-DQLcq5fP.js";
 const _hoisted_1 = { class: "property-editor property-editor-product flex-align-center" };
 const _hoisted_2 = { class: "label" };
 const _hoisted_3 = ["textContent"];

package/dist/{index-Mob7K7vK.js → index-DQLcq5fP.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, BSLocaleSelect, BSTabSheet, BSTree, BSDateRange } from "@g1cloud/bluesea";
+import { notNull, BSTextInput, vClickOutside, useModal, useContextMenu, BSSelect, BSTabSheet, BSTree, BSDateRange } from "@g1cloud/bluesea";
 const create$5 = () => /* @__PURE__ */ new Map();
 const copy = (m) => {
   const r = create$5();
@@ -6773,12 +6773,6 @@ 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;
   }
@@ -7023,18 +7017,43 @@ const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
+    const pageBuilder = usePageBuilder();
+    const emptyClass = computed(() => {
+      var _a;
+      if (props.viewMode) {
+        return false;
+      } else if ((_a = props.part.properties) == null ? void 0 : _a.text) {
+        if (typeof props.part.properties.text === "string") {
+          return true;
+        } else {
+          return !props.part.properties.text[pageBuilder.language.value];
+        }
+      } else {
+        return true;
+      }
+    });
     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;
+          if (props.viewMode) {
+            return "";
+          } else {
+            return "Empty text";
+          }
         } else {
-          return props.part.properties.text[props.part.getLanguage() || "en"];
+          const t = props.part.properties.text[pageBuilder.language.value];
+          if (props.viewMode) {
+            return t || "";
+          } else {
+            return t || "Empty text";
+          }
         }
-      } else if (!props.viewMode) {
+      } else if (props.viewMode) {
+        return "";
+      } else {
         return "Empty text";
       }
-      return "";
     });
     const style = computed(() => {
       var _a;
@@ -7046,7 +7065,7 @@ const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass([[!_ctx.viewMode && !text.value ? "empty" : ""], "pb-text-widget"])
+        class: normalizeClass([[emptyClass.value ? "empty" : ""], "pb-text-widget"])
       }, [
         createElementVNode("div", mergeProps({ class: "text" }, style.value, {
           textContent: toDisplayString(text.value)
@@ -7091,7 +7110,7 @@ const PageBuilderViewerEvent = {
 };
 const _hoisted_1$1$1 = { class: "pb-product-list-widget" };
 const _hoisted_2$l = { class: "product" };
-const _hoisted_3$g = { class: "image" };
+const _hoisted_3$f = { class: "image" };
 const _hoisted_4$d = ["src"];
 const _hoisted_5$8 = { class: "name" };
 const _hoisted_6$7 = { class: "price" };
@@ -7139,7 +7158,7 @@ const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
           }, [
             createElementVNode("div", _hoisted_2$l, [
               products.value[index - 1] ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                createElementVNode("div", _hoisted_3$g, [
+                createElementVNode("div", _hoisted_3$f, [
                   createElementVNode("img", {
                     src: products.value[index - 1].image,
                     alt: ""
@@ -7197,19 +7216,18 @@ const partDefinitions$1 = {
     creator: () => _sfc_main$2$1
   }
 };
+const PAGE_BUILDER_KEY = "PageBuilder";
 const PAGE_BUILDER_VIEWER_KEY = "PageBuilderViewer";
 class PageBuilderViewerImpl {
   constructor() {
     __publicField2(this, "instanceId");
     __publicField2(this, "model");
-    __publicField2(this, "language");
+    __publicField2(this, "language", ref("en"));
     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) {
@@ -7253,13 +7271,22 @@ const createPageBuilderViewer = () => {
   const viewer = new PageBuilderViewerImpl();
   return viewer;
 };
+const providePageBuilder = (pageBuilder) => {
+  provide(PAGE_BUILDER_KEY, pageBuilder);
+};
 const providePageBuilderViewer = (pageBuilderViewer) => {
   provide(PAGE_BUILDER_VIEWER_KEY, pageBuilderViewer);
 };
+const usePageBuilder = () => {
+  const pageBuilder = inject(PAGE_BUILDER_KEY);
+  if (!pageBuilder)
+    throw Error("PageBuilder not found");
+  return pageBuilder;
+};
 const usePageBuilderViewer = () => {
   const pageBuilderViewer = inject(PAGE_BUILDER_VIEWER_KEY);
   if (!pageBuilderViewer)
-    throw Error("PageBuilder not found");
+    throw Error("PageBuilderViewer not found");
   return pageBuilderViewer;
 };
 const createPartComponents = (parts) => {
@@ -7319,8 +7346,9 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     const props = __props;
     const pageBuilderViewer = createPageBuilderViewer();
     pageBuilderViewer.instanceId = props.instanceId;
-    pageBuilderViewer.language = props.language || "en";
+    pageBuilderViewer.language.value = props.language || "en";
     providePageBuilderViewer(pageBuilderViewer);
+    providePageBuilder(pageBuilderViewer);
     const page = computed(() => pageBuilderViewer.model.rootPart.value.children && pageBuilderViewer.model.rootPart.value.children[props.isMobilePage ? 0 : 1]);
     onMounted(() => {
       if (props.pageContent) {
@@ -7941,10 +7969,10 @@ const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Bk0WJxA0.js")),
     "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-DNdXl-Tr.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-CfRbKELF.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BFzT7dlG.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-BJovN1su.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-EuqsavTF.js")),
-    "product": () => defineAsyncComponent(() => import("./PbPropertyEditorProduct-COnCyYJl.js"))
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-D85hteOg.js")),
+    "product": () => defineAsyncComponent(() => import("./PbPropertyEditorProduct-CUSpnV8o.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -8177,10 +8205,10 @@ const _export_sfc = (sfc, props) => {
 const _sfc_main$p = {};
 const _hoisted_1$t = { class: "pb-add-widget-button" };
 const _hoisted_2$k = /* @__PURE__ */ createElementVNode("span", { class: "icon material-icons-outlined" }, "add_box", -1);
-const _hoisted_3$f = /* @__PURE__ */ createElementVNode("span", { class: "text" }, "Add Widget", -1);
+const _hoisted_3$e = /* @__PURE__ */ createElementVNode("span", { class: "text" }, "Add Widget", -1);
 const _hoisted_4$c = [
   _hoisted_2$k,
-  _hoisted_3$f
+  _hoisted_3$e
 ];
 function _sfc_render$1(_ctx, _cache) {
   return openBlock(), createElementBlock("div", _hoisted_1$t, [
@@ -8906,7 +8934,7 @@ const _hoisted_2$i = /* @__PURE__ */ createElementVNode("div", {
     /* @__PURE__ */ createElementVNode("h3", null, "Login Design Part")
   ])
 ], -1);
-const _hoisted_3$e = [
+const _hoisted_3$d = [
   _hoisted_2$i
 ];
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
@@ -8916,7 +8944,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$q, _hoisted_3$e);
+      return openBlock(), createElementBlock("div", _hoisted_1$q, _hoisted_3$d);
     };
   }
 });
@@ -9055,7 +9083,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$o = { class: "group-editor group-editor-position" };
 const _hoisted_2$h = { class: "flex-align-center" };
-const _hoisted_3$d = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
+const _hoisted_3$c = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
   /* @__PURE__ */ createElementVNode("label", null, "Position")
 ], -1);
 const _hoisted_4$b = { class: "flex-grow-1" };
@@ -9089,7 +9117,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$o, [
         createElementVNode("div", _hoisted_2$h, [
-          _hoisted_3$d,
+          _hoisted_3$c,
           createElementVNode("div", _hoisted_4$b, [
             createElementVNode("div", null, [
               _hoisted_5$7,
@@ -9129,7 +9157,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$n = { class: "group-editor group-editor-size" };
 const _hoisted_2$g = { class: "flex-align-center" };
-const _hoisted_3$c = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
+const _hoisted_3$b = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
   /* @__PURE__ */ createElementVNode("label", null, "Size")
 ], -1);
 const _hoisted_4$a = { class: "flex-grow-1" };
@@ -9157,7 +9185,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$n, [
         createElementVNode("div", _hoisted_2$g, [
-          _hoisted_3$c,
+          _hoisted_3$b,
           createElementVNode("div", _hoisted_4$a, [
             _hoisted_5$6,
             createVNode(unref(BSTextInput), {
@@ -9338,7 +9366,7 @@ var script$4 = {
 };
 const _hoisted_1$m = { class: "vc-alpha" };
 const _hoisted_2$f = { class: "vc-alpha-checkboard-wrap" };
-const _hoisted_3$b = /* @__PURE__ */ createElementVNode(
+const _hoisted_3$a = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-alpha-picker" },
   null,
@@ -9346,7 +9374,7 @@ const _hoisted_3$b = /* @__PURE__ */ createElementVNode(
   /* HOISTED */
 );
 const _hoisted_4$9 = [
-  _hoisted_3$b
+  _hoisted_3$a
 ];
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Checkboard = resolveComponent("Checkboard");
@@ -10456,7 +10484,7 @@ var script$3 = {
 };
 const _hoisted_1$l = { class: "vc-editable-input" };
 const _hoisted_2$e = ["aria-labelledby"];
-const _hoisted_3$a = ["id", "for"];
+const _hoisted_3$9 = ["id", "for"];
 const _hoisted_4$8 = { class: "vc-input__desc" };
 function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$l, [
@@ -10474,7 +10502,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       id: $options.labelId,
       for: $props.label,
       class: "vc-input__label"
-    }, toDisplayString($options.labelSpanText), 9, _hoisted_3$a),
+    }, toDisplayString($options.labelSpanText), 9, _hoisted_3$9),
     createElementVNode(
       "span",
       _hoisted_4$8,
@@ -10568,7 +10596,7 @@ const _hoisted_2$d = /* @__PURE__ */ createElementVNode(
   -1
   /* HOISTED */
 );
-const _hoisted_3$9 = /* @__PURE__ */ createElementVNode(
+const _hoisted_3$8 = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-saturation-circle" },
   null,
@@ -10576,7 +10604,7 @@ const _hoisted_3$9 = /* @__PURE__ */ createElementVNode(
   /* HOISTED */
 );
 const _hoisted_4$7 = [
-  _hoisted_3$9
+  _hoisted_3$8
 ];
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
@@ -10747,7 +10775,7 @@ const _hoisted_2$c = /* @__PURE__ */ createElementVNode(
   -1
   /* HOISTED */
 );
-const _hoisted_3$8 = [
+const _hoisted_3$7 = [
   _hoisted_2$c
 ];
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
@@ -10775,7 +10803,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
             style: normalizeStyle({ top: $options.pointerTop, left: $options.pointerLeft }),
             role: "presentation"
           },
-          _hoisted_3$8,
+          _hoisted_3$7,
           4
           /* STYLE */
         )
@@ -10877,7 +10905,7 @@ var script = {
 };
 const _hoisted_1$i = { class: "vc-sketch-saturation-wrap" };
 const _hoisted_2$b = { class: "vc-sketch-controls" };
-const _hoisted_3$7 = { class: "vc-sketch-sliders" };
+const _hoisted_3$6 = { class: "vc-sketch-sliders" };
 const _hoisted_4$6 = { class: "vc-sketch-hue-wrap" };
 const _hoisted_5$5 = {
   key: 0,
@@ -10925,7 +10953,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         }, null, 8, ["value", "onChange"])
       ]),
       createElementVNode("div", _hoisted_2$b, [
-        createElementVNode("div", _hoisted_3$7, [
+        createElementVNode("div", _hoisted_3$6, [
           createElementVNode("div", _hoisted_4$6, [
             createVNode(_component_Hue, {
               value: _ctx.colors,
@@ -11090,7 +11118,7 @@ const _sfc_main$i = defineComponent({
 });
 const _hoisted_1$h = { class: "buttons" };
 const _hoisted_2$a = /* @__PURE__ */ createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1);
-const _hoisted_3$6 = [
+const _hoisted_3$5 = [
   _hoisted_2$a
 ];
 const _hoisted_4$5 = { class: "sketch-wrap" };
@@ -11114,7 +11142,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         class: "pb-button",
         onClick: _cache[1] || (_cache[1] = (...args) => _ctx.emptyColor && _ctx.emptyColor(...args))
-      }, _hoisted_3$6)) : createCommentVNode("", true)
+      }, _hoisted_3$5)) : createCommentVNode("", true)
     ]),
     createElementVNode("div", _hoisted_4$5, [
       _ctx.isShowColorPicker ? (openBlock(), createBlock$1(_component_Sketch, {
@@ -11131,7 +11159,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render]]);
 const _hoisted_1$g = { class: "group-editor group-editor-background" };
 const _hoisted_2$9 = { class: "flex-align-center" };
-const _hoisted_3$5 = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
+const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
   /* @__PURE__ */ createElementVNode("label", null, "Background")
 ], -1);
 const _hoisted_4$4 = { class: "bs-layout-horizontal" };
@@ -11169,7 +11197,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$g, [
         createElementVNode("div", _hoisted_2$9, [
-          _hoisted_3$5,
+          _hoisted_3$4,
           createElementVNode("div", _hoisted_4$4, [
             createElementVNode("div", _hoisted_5$4, [
               createVNode(PbColorPicker, {
@@ -11198,7 +11226,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$f = { class: "group-editor group-editor-border" };
 const _hoisted_2$8 = { class: "flex-align-center" };
-const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
+const _hoisted_3$3 = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
   /* @__PURE__ */ createElementVNode("label", null, "Border")
 ], -1);
 const _hoisted_4$3 = { class: "color" };
@@ -11252,7 +11280,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$f, [
         createElementVNode("div", _hoisted_2$8, [
-          _hoisted_3$4,
+          _hoisted_3$3,
           createElementVNode("div", _hoisted_4$3, [
             createVNode(PbColorPicker, {
               value: color.value,
@@ -11340,7 +11368,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$e = { class: "group-editor group-editor-margin" };
 const _hoisted_2$7 = { class: "flex-align-center" };
-const _hoisted_3$3 = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
+const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
   /* @__PURE__ */ createElementVNode("label", null, "Margin")
 ], -1);
 const _hoisted_4$2 = { class: "flex-grow-1" };
@@ -11374,7 +11402,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$e, [
         createElementVNode("div", _hoisted_2$7, [
-          _hoisted_3$3,
+          _hoisted_3$2,
           createElementVNode("div", _hoisted_4$2, [
             createElementVNode("div", null, [
               _hoisted_5$2,
@@ -11414,7 +11442,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$d = { class: "group-editor group-editor-margin" };
 const _hoisted_2$6 = { class: "flex-align-center" };
-const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
+const _hoisted_3$1 = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
   /* @__PURE__ */ createElementVNode("label", null, "Padding")
 ], -1);
 const _hoisted_4$1 = { class: "flex-grow-1" };
@@ -11448,7 +11476,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$d, [
         createElementVNode("div", _hoisted_2$6, [
-          _hoisted_3$2,
+          _hoisted_3$1,
           createElementVNode("div", _hoisted_4$1, [
             createElementVNode("div", null, [
               _hoisted_5$1,
@@ -13128,7 +13156,6 @@ 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);
@@ -13189,12 +13216,6 @@ 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;
   }
@@ -13446,15 +13467,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$7 = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
 const _hoisted_2$4 = { class: "ml-8 w-64" };
-const _hoisted_3$1 = { class: "ml-8 w-80" };
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "PbToolbar",
   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)
@@ -13462,9 +13479,6 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       const scale2 = parseInt(scaleString.replaceAll(/[^0-9]+/g, "")) / 100;
       pageBuilder.zoom(scale2);
     };
-    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) => {
@@ -13484,12 +13498,6 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             "view-mode": false,
             placeholder: "Scale"
           }, null, 8, ["modelValue"])
-        ]),
-        createElementVNode("div", _hoisted_3$1, [
-          createVNode(unref(BSLocaleSelect), {
-            locales: locales.value,
-            onChangeLocale: changeLocale
-          }, null, 8, ["locales"])
         ])
       ]);
     };
@@ -13964,7 +13972,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     title: {},
     editMode: {},
     pageContent: {},
-    locales: {},
     language: {}
   },
   setup(__props, { expose: __expose }) {
@@ -13974,8 +13981,6 @@ 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({
@@ -13984,8 +13989,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     pageBuilderEditor.keyHandlers.addDocumentKeyEventListener(window.document);
     providePageBuilderEditor(pageBuilderEditor);
+    providePageBuilder(pageBuilderEditor);
     onMounted(() => pageBuilderEditor.initData(props.pageContent));
     watch(() => props.pageContent, (pageContent) => pageContent && pageBuilderEditor.initData(pageContent));
+    watch(() => props.language, (language) => {
+      pageBuilderEditor.setLanguage(language || "en");
+    });
     const colorHistory = ref([]);
     provide("colorHistory", colorHistory);
     const getLocalDesignPartContent = () => {
@@ -14061,21 +14070,24 @@ export {
   WIDGET_TYPE$1 as W,
   _sfc_main as _,
   Block as a,
-  PAGE_TYPE$1 as b,
-  Page as c,
-  _sfc_main$q as d,
-  PageBuilderViewerEvent as e,
-  Part as f,
-  _sfc_main$4$1 as g,
-  _sfc_main$2$1 as h,
-  _sfc_main$3$1 as i,
-  RootPart as j,
-  Section as k,
-  Widget as l,
-  createPageBuilderViewer as m,
-  createPartComponent as n,
-  createPartComponents as o,
-  providePageBuilderViewer as p,
-  usePageBuilderViewer as q,
+  PAGE_BUILDER_KEY as b,
+  PAGE_TYPE$1 as c,
+  Page as d,
+  _sfc_main$q as e,
+  PageBuilderViewerEvent as f,
+  Part as g,
+  _sfc_main$4$1 as h,
+  _sfc_main$2$1 as i,
+  _sfc_main$3$1 as j,
+  RootPart as k,
+  Section as l,
+  Widget as m,
+  createPageBuilderViewer as n,
+  createPartComponent as o,
+  createPartComponents as p,
+  providePageBuilder as q,
+  providePageBuilderViewer as r,
+  usePageBuilder as s,
+  usePageBuilderViewer as t,
   usePageBuilderEditor as u
 };

package/dist/model/context.d.ts

@@ -49,7 +49,6 @@ export declare class PageBuilderContextImpl implements PageBuilderContext {
         getClassNames: () => string;
         getStyles: () => Record<string, string>;
         getPageBuilderId: () => string | undefined;
-        getLanguage: () => string | undefined;
         isGlobalDesignPart: () => boolean;
         isLocalDesignPart: () => boolean;
         isLocalMarketingPart: () => boolean;
@@ -72,7 +71,6 @@ export declare class PageBuilderContextImpl implements PageBuilderContext {
         getClassNames: () => string;
         getStyles: () => Record<string, string>;
         getPageBuilderId: () => string | undefined;
-        getLanguage: () => string | undefined;
         isGlobalDesignPart: () => boolean;
         isLocalDesignPart: () => boolean;
         isLocalMarketingPart: () => boolean;
@@ -95,7 +93,6 @@ export declare class PageBuilderContextImpl implements PageBuilderContext {
         getClassNames: () => string;
         getStyles: () => Record<string, string>;
         getPageBuilderId: () => string | undefined;
-        getLanguage: () => string | undefined;
         isGlobalDesignPart: () => boolean;
         isLocalDesignPart: () => boolean;
         isLocalMarketingPart: () => boolean;

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

@@ -1,6 +1,7 @@
 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 { CommandRegistry, CommandRegistryImpl } from './command';
 import { PartManager } from './part-manager';
 import { Model } from './model';
@@ -8,9 +9,11 @@ import { Ref } from 'vue';
 
 export type PageBuilderEditMode = 'template' | 'global' | 'local' | 'free';
 export declare const createPageBuilderEditor: () => PageBuilderEditor;
+export declare const providePageBuilder: (pageBuilder: PageBuilder) => void;
 export declare const providePageBuilderEditor: (pageBuilderEditor: PageBuilderEditor) => void;
+export declare const usePageBuilder: () => PageBuilder;
 export declare const usePageBuilderEditor: () => PageBuilderEditor;
-export interface PageBuilderEditor {
+export interface PageBuilderEditor extends PageBuilder {
     instanceId?: string;
     partManager: PartManager;
     model: Model;
@@ -22,14 +25,11 @@ 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 {
@@ -44,7 +44,6 @@ export declare class PageBuilderEditorImpl implements PageBuilderEditor {
     title?: string;
     editMode: PageBuilderEditMode;
     scale: Ref<number>;
-    locales: Ref<string[]>;
     language: Ref<string>;
     constructor();
     registerPlugin(plugin: PageBuilderPlugin): void;
@@ -52,7 +51,6 @@ export declare class PageBuilderEditorImpl implements PageBuilderEditor {
     undo(): void;
     redo(): void;
     zoom(scale: number): void;
-    setLocales(locales: string[]): void;
     setLanguage(language: string): void;
     private getEmptyPageContent;
     private initPlugins;

package/dist/page-builder-editor.js

@@ -1,27 +1,30 @@
-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";
+import { B, a, M, b, c, d, _, P, e, f, g, h, i, j, R, k, S, l, W, m, n, o, p, q, r, s, t } from "./index-DQLcq5fP.js";
 export {
   B as BLOCK_TYPE,
   a as Block,
   M as Model,
-  b as PAGE_TYPE,
-  c as Page,
+  b as PAGE_BUILDER_KEY,
+  c as PAGE_TYPE,
+  d as Page,
   _ as PageBuilderEditor,
   P as PageBuilderEditorEvent,
-  d as PageBuilderViewer,
-  e as PageBuilderViewerEvent,
-  f as Part,
-  g as PbImageWidget,
-  h as PbProductListWidget,
-  i as PbTextWidget,
+  e as PageBuilderViewer,
+  f as PageBuilderViewerEvent,
+  g as Part,
+  h as PbImageWidget,
+  i as PbProductListWidget,
+  j as PbTextWidget,
   R as ROOT_TYPE,
-  j as RootPart,
+  k as RootPart,
   S as SECTION_TYPE,
-  k as Section,
+  l as Section,
   W as WIDGET_TYPE,
-  l as Widget,
-  m as createPageBuilderViewer,
-  n as createPartComponent,
-  o as createPartComponents,
-  p as providePageBuilderViewer,
-  q as usePageBuilderViewer
+  m as Widget,
+  n as createPageBuilderViewer,
+  o as createPartComponent,
+  p as createPartComponents,
+  q as providePageBuilder,
+  r as providePageBuilderViewer,
+  s as usePageBuilder,
+  t as usePageBuilderViewer
 };

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

@@ -6775,12 +6775,6 @@ 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;
     }
@@ -7025,18 +7019,43 @@ var __publicField = (obj, key, value) => {
     },
     setup(__props) {
       const props = __props;
+      const pageBuilder = usePageBuilder();
+      const emptyClass = vue.computed(() => {
+        var _a;
+        if (props.viewMode) {
+          return false;
+        } else if ((_a = props.part.properties) == null ? void 0 : _a.text) {
+          if (typeof props.part.properties.text === "string") {
+            return true;
+          } else {
+            return !props.part.properties.text[pageBuilder.language.value];
+          }
+        } else {
+          return true;
+        }
+      });
       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;
+            if (props.viewMode) {
+              return "";
+            } else {
+              return "Empty text";
+            }
           } else {
-            return props.part.properties.text[props.part.getLanguage() || "en"];
+            const t = props.part.properties.text[pageBuilder.language.value];
+            if (props.viewMode) {
+              return t || "";
+            } else {
+              return t || "Empty text";
+            }
           }
-        } else if (!props.viewMode) {
+        } else if (props.viewMode) {
+          return "";
+        } else {
           return "Empty text";
         }
-        return "";
       });
       const style = vue.computed(() => {
         var _a;
@@ -7048,7 +7067,7 @@ var __publicField = (obj, key, value) => {
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass([[!_ctx.viewMode && !text.value ? "empty" : ""], "pb-text-widget"])
+          class: vue.normalizeClass([[emptyClass.value ? "empty" : ""], "pb-text-widget"])
         }, [
           vue.createElementVNode("div", vue.mergeProps({ class: "text" }, style.value, {
             textContent: vue.toDisplayString(text.value)
@@ -7093,7 +7112,7 @@ var __publicField = (obj, key, value) => {
   };
   const _hoisted_1$1$1 = { class: "pb-product-list-widget" };
   const _hoisted_2$t = { class: "product" };
-  const _hoisted_3$o = { class: "image" };
+  const _hoisted_3$n = { class: "image" };
   const _hoisted_4$f = ["src"];
   const _hoisted_5$8 = { class: "name" };
   const _hoisted_6$7 = { class: "price" };
@@ -7141,7 +7160,7 @@ var __publicField = (obj, key, value) => {
             }, [
               vue.createElementVNode("div", _hoisted_2$t, [
                 products.value[index - 1] ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                  vue.createElementVNode("div", _hoisted_3$o, [
+                  vue.createElementVNode("div", _hoisted_3$n, [
                     vue.createElementVNode("img", {
                       src: products.value[index - 1].image,
                       alt: ""
@@ -7199,19 +7218,18 @@ var __publicField = (obj, key, value) => {
       creator: () => _sfc_main$2$1
     }
   };
+  const PAGE_BUILDER_KEY = "PageBuilder";
   const PAGE_BUILDER_VIEWER_KEY = "PageBuilderViewer";
   class PageBuilderViewerImpl {
     constructor() {
       __publicField2(this, "instanceId");
       __publicField2(this, "model");
-      __publicField2(this, "language");
+      __publicField2(this, "language", vue.ref("en"));
       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) {
@@ -7255,13 +7273,22 @@ var __publicField = (obj, key, value) => {
     const viewer = new PageBuilderViewerImpl();
     return viewer;
   };
+  const providePageBuilder = (pageBuilder) => {
+    vue.provide(PAGE_BUILDER_KEY, pageBuilder);
+  };
   const providePageBuilderViewer = (pageBuilderViewer) => {
     vue.provide(PAGE_BUILDER_VIEWER_KEY, pageBuilderViewer);
   };
+  const usePageBuilder = () => {
+    const pageBuilder = vue.inject(PAGE_BUILDER_KEY);
+    if (!pageBuilder)
+      throw Error("PageBuilder not found");
+    return pageBuilder;
+  };
   const usePageBuilderViewer = () => {
     const pageBuilderViewer = vue.inject(PAGE_BUILDER_VIEWER_KEY);
     if (!pageBuilderViewer)
-      throw Error("PageBuilder not found");
+      throw Error("PageBuilderViewer not found");
     return pageBuilderViewer;
   };
   const createPartComponents = (parts) => {
@@ -7321,8 +7348,9 @@ var __publicField = (obj, key, value) => {
       const props = __props;
       const pageBuilderViewer = createPageBuilderViewer();
       pageBuilderViewer.instanceId = props.instanceId;
-      pageBuilderViewer.language = props.language || "en";
+      pageBuilderViewer.language.value = props.language || "en";
       providePageBuilderViewer(pageBuilderViewer);
+      providePageBuilder(pageBuilderViewer);
       const page = vue.computed(() => pageBuilderViewer.model.rootPart.value.children && pageBuilderViewer.model.rootPart.value.children[props.isMobilePage ? 0 : 1]);
       vue.onMounted(() => {
         if (props.pageContent) {
@@ -8179,10 +8207,10 @@ var __publicField = (obj, key, value) => {
   const _sfc_main$x = {};
   const _hoisted_1$B = { class: "pb-add-widget-button" };
   const _hoisted_2$s = /* @__PURE__ */ vue.createElementVNode("span", { class: "icon material-icons-outlined" }, "add_box", -1);
-  const _hoisted_3$n = /* @__PURE__ */ vue.createElementVNode("span", { class: "text" }, "Add Widget", -1);
+  const _hoisted_3$m = /* @__PURE__ */ vue.createElementVNode("span", { class: "text" }, "Add Widget", -1);
   const _hoisted_4$e = [
     _hoisted_2$s,
-    _hoisted_3$n
+    _hoisted_3$m
   ];
   function _sfc_render$1(_ctx, _cache) {
     return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, [
@@ -8908,7 +8936,7 @@ var __publicField = (obj, key, value) => {
       /* @__PURE__ */ vue.createElementVNode("h3", null, "Login Design Part")
     ])
   ], -1);
-  const _hoisted_3$m = [
+  const _hoisted_3$l = [
     _hoisted_2$q
   ];
   const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
@@ -8918,7 +8946,7 @@ var __publicField = (obj, key, value) => {
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, _hoisted_3$m);
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, _hoisted_3$l);
       };
     }
   });
@@ -9057,7 +9085,7 @@ var __publicField = (obj, key, value) => {
   });
   const _hoisted_1$w = { class: "group-editor group-editor-position" };
   const _hoisted_2$p = { class: "flex-align-center" };
-  const _hoisted_3$l = /* @__PURE__ */ vue.createElementVNode("div", { class: "label" }, [
+  const _hoisted_3$k = /* @__PURE__ */ vue.createElementVNode("div", { class: "label" }, [
     /* @__PURE__ */ vue.createElementVNode("label", null, "Position")
   ], -1);
   const _hoisted_4$d = { class: "flex-grow-1" };
@@ -9091,7 +9119,7 @@ var __publicField = (obj, key, value) => {
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
           vue.createElementVNode("div", _hoisted_2$p, [
-            _hoisted_3$l,
+            _hoisted_3$k,
             vue.createElementVNode("div", _hoisted_4$d, [
               vue.createElementVNode("div", null, [
                 _hoisted_5$7,
@@ -9131,7 +9159,7 @@ var __publicField = (obj, key, value) => {
   });
   const _hoisted_1$v = { class: "group-editor group-editor-size" };
   const _hoisted_2$o = { class: "flex-align-center" };
-  const _hoisted_3$k = /* @__PURE__ */ vue.createElementVNode("div", { class: "label" }, [
+  const _hoisted_3$j = /* @__PURE__ */ vue.createElementVNode("div", { class: "label" }, [
     /* @__PURE__ */ vue.createElementVNode("label", null, "Size")
   ], -1);
   const _hoisted_4$c = { class: "flex-grow-1" };
@@ -9159,7 +9187,7 @@ var __publicField = (obj, key, value) => {
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
           vue.createElementVNode("div", _hoisted_2$o, [
-            _hoisted_3$k,
+            _hoisted_3$j,
             vue.createElementVNode("div", _hoisted_4$c, [
               _hoisted_5$6,
               vue.createVNode(vue.unref(bluesea.BSTextInput), {
@@ -9340,7 +9368,7 @@ var __publicField = (obj, key, value) => {
   };
   const _hoisted_1$u = { class: "vc-alpha" };
   const _hoisted_2$n = { class: "vc-alpha-checkboard-wrap" };
-  const _hoisted_3$j = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_3$i = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-alpha-picker" },
     null,
@@ -9348,7 +9376,7 @@ var __publicField = (obj, key, value) => {
     /* HOISTED */
   );
   const _hoisted_4$b = [
-    _hoisted_3$j
+    _hoisted_3$i
   ];
   function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_Checkboard = vue.resolveComponent("Checkboard");
@@ -10458,7 +10486,7 @@ var __publicField = (obj, key, value) => {
   };
   const _hoisted_1$t = { class: "vc-editable-input" };
   const _hoisted_2$m = ["aria-labelledby"];
-  const _hoisted_3$i = ["id", "for"];
+  const _hoisted_3$h = ["id", "for"];
   const _hoisted_4$a = { class: "vc-input__desc" };
   function render$3(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
@@ -10476,7 +10504,7 @@ var __publicField = (obj, key, value) => {
         id: $options.labelId,
         for: $props.label,
         class: "vc-input__label"
-      }, vue.toDisplayString($options.labelSpanText), 9, _hoisted_3$i),
+      }, vue.toDisplayString($options.labelSpanText), 9, _hoisted_3$h),
       vue.createElementVNode(
         "span",
         _hoisted_4$a,
@@ -10570,7 +10598,7 @@ var __publicField = (obj, key, value) => {
     -1
     /* HOISTED */
   );
-  const _hoisted_3$h = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_3$g = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-saturation-circle" },
     null,
@@ -10578,7 +10606,7 @@ var __publicField = (obj, key, value) => {
     /* HOISTED */
   );
   const _hoisted_4$9 = [
-    _hoisted_3$h
+    _hoisted_3$g
   ];
   function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock(
@@ -10749,7 +10777,7 @@ var __publicField = (obj, key, value) => {
     -1
     /* HOISTED */
   );
-  const _hoisted_3$g = [
+  const _hoisted_3$f = [
     _hoisted_2$k
   ];
   function render$1(_ctx, _cache, $props, $setup, $data, $options) {
@@ -10777,7 +10805,7 @@ var __publicField = (obj, key, value) => {
               style: vue.normalizeStyle({ top: $options.pointerTop, left: $options.pointerLeft }),
               role: "presentation"
             },
-            _hoisted_3$g,
+            _hoisted_3$f,
             4
             /* STYLE */
           )
@@ -10879,7 +10907,7 @@ var __publicField = (obj, key, value) => {
   };
   const _hoisted_1$q = { class: "vc-sketch-saturation-wrap" };
   const _hoisted_2$j = { class: "vc-sketch-controls" };
-  const _hoisted_3$f = { class: "vc-sketch-sliders" };
+  const _hoisted_3$e = { class: "vc-sketch-sliders" };
   const _hoisted_4$8 = { class: "vc-sketch-hue-wrap" };
   const _hoisted_5$5 = {
     key: 0,
@@ -10927,7 +10955,7 @@ var __publicField = (obj, key, value) => {
           }, null, 8, ["value", "onChange"])
         ]),
         vue.createElementVNode("div", _hoisted_2$j, [
-          vue.createElementVNode("div", _hoisted_3$f, [
+          vue.createElementVNode("div", _hoisted_3$e, [
             vue.createElementVNode("div", _hoisted_4$8, [
               vue.createVNode(_component_Hue, {
                 value: _ctx.colors,
@@ -11092,7 +11120,7 @@ var __publicField = (obj, key, value) => {
   });
   const _hoisted_1$p = { class: "buttons" };
   const _hoisted_2$i = /* @__PURE__ */ vue.createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1);
-  const _hoisted_3$e = [
+  const _hoisted_3$d = [
     _hoisted_2$i
   ];
   const _hoisted_4$7 = { class: "sketch-wrap" };
@@ -11116,7 +11144,7 @@ var __publicField = (obj, key, value) => {
           key: 0,
           class: "pb-button",
           onClick: _cache[1] || (_cache[1] = (...args) => _ctx.emptyColor && _ctx.emptyColor(...args))
-        }, _hoisted_3$e)) : vue.createCommentVNode("", true)
+        }, _hoisted_3$d)) : vue.createCommentVNode("", true)
       ]),
       vue.createElementVNode("div", _hoisted_4$7, [
         _ctx.isShowColorPicker ? (vue.openBlock(), vue.createBlock(_component_Sketch, {
@@ -11133,7 +11161,7 @@ var __publicField = (obj, key, value) => {
   const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render]]);
   const _hoisted_1$o = { class: "group-editor group-editor-background" };
   const _hoisted_2$h = { class: "flex-align-center" };
-  const _hoisted_3$d = /* @__PURE__ */ vue.createElementVNode("div", { class: "label" }, [
+  const _hoisted_3$c = /* @__PURE__ */ vue.createElementVNode("div", { class: "label" }, [
     /* @__PURE__ */ vue.createElementVNode("label", null, "Background")
   ], -1);
   const _hoisted_4$6 = { class: "bs-layout-horizontal" };
@@ -11171,7 +11199,7 @@ var __publicField = (obj, key, value) => {
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
           vue.createElementVNode("div", _hoisted_2$h, [
-            _hoisted_3$d,
+            _hoisted_3$c,
             vue.createElementVNode("div", _hoisted_4$6, [
               vue.createElementVNode("div", _hoisted_5$4, [
                 vue.createVNode(PbColorPicker, {
@@ -11200,7 +11228,7 @@ var __publicField = (obj, key, value) => {
   });
   const _hoisted_1$n = { class: "group-editor group-editor-border" };
   const _hoisted_2$g = { class: "flex-align-center" };
-  const _hoisted_3$c = /* @__PURE__ */ vue.createElementVNode("div", { class: "label" }, [
+  const _hoisted_3$b = /* @__PURE__ */ vue.createElementVNode("div", { class: "label" }, [
     /* @__PURE__ */ vue.createElementVNode("label", null, "Border")
   ], -1);
   const _hoisted_4$5 = { class: "color" };
@@ -11254,7 +11282,7 @@ var __publicField = (obj, key, value) => {
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
           vue.createElementVNode("div", _hoisted_2$g, [
-            _hoisted_3$c,
+            _hoisted_3$b,
             vue.createElementVNode("div", _hoisted_4$5, [
               vue.createVNode(PbColorPicker, {
                 value: color.value,
@@ -11342,7 +11370,7 @@ var __publicField = (obj, key, value) => {
   });
   const _hoisted_1$m = { class: "group-editor group-editor-margin" };
   const _hoisted_2$f = { class: "flex-align-center" };
-  const _hoisted_3$b = /* @__PURE__ */ vue.createElementVNode("div", { class: "label" }, [
+  const _hoisted_3$a = /* @__PURE__ */ vue.createElementVNode("div", { class: "label" }, [
     /* @__PURE__ */ vue.createElementVNode("label", null, "Margin")
   ], -1);
   const _hoisted_4$4 = { class: "flex-grow-1" };
@@ -11376,7 +11404,7 @@ var __publicField = (obj, key, value) => {
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
           vue.createElementVNode("div", _hoisted_2$f, [
-            _hoisted_3$b,
+            _hoisted_3$a,
             vue.createElementVNode("div", _hoisted_4$4, [
               vue.createElementVNode("div", null, [
                 _hoisted_5$2,
@@ -11416,7 +11444,7 @@ var __publicField = (obj, key, value) => {
   });
   const _hoisted_1$l = { class: "group-editor group-editor-margin" };
   const _hoisted_2$e = { class: "flex-align-center" };
-  const _hoisted_3$a = /* @__PURE__ */ vue.createElementVNode("div", { class: "label" }, [
+  const _hoisted_3$9 = /* @__PURE__ */ vue.createElementVNode("div", { class: "label" }, [
     /* @__PURE__ */ vue.createElementVNode("label", null, "Padding")
   ], -1);
   const _hoisted_4$3 = { class: "flex-grow-1" };
@@ -11450,7 +11478,7 @@ var __publicField = (obj, key, value) => {
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
           vue.createElementVNode("div", _hoisted_2$e, [
-            _hoisted_3$a,
+            _hoisted_3$9,
             vue.createElementVNode("div", _hoisted_4$3, [
               vue.createElementVNode("div", null, [
                 _hoisted_5$1,
@@ -13130,7 +13158,6 @@ 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);
@@ -13191,12 +13218,6 @@ 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;
     }
@@ -13448,15 +13469,11 @@ var __publicField = (obj, key, value) => {
   });
   const _hoisted_1$f = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
   const _hoisted_2$c = { class: "ml-8 w-64" };
-  const _hoisted_3$9 = { class: "ml-8 w-80" };
   const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     __name: "PbToolbar",
     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)
@@ -13464,9 +13481,6 @@ var __publicField = (obj, key, value) => {
         const scale2 = parseInt(scaleString.replaceAll(/[^0-9]+/g, "")) / 100;
         pageBuilder.zoom(scale2);
       };
-      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) => {
@@ -13486,12 +13500,6 @@ var __publicField = (obj, key, value) => {
               "view-mode": false,
               placeholder: "Scale"
             }, null, 8, ["modelValue"])
-          ]),
-          vue.createElementVNode("div", _hoisted_3$9, [
-            vue.createVNode(vue.unref(bluesea.BSLocaleSelect), {
-              locales: locales.value,
-              onChangeLocale: changeLocale
-            }, null, 8, ["locales"])
           ])
         ]);
       };
@@ -13966,7 +13974,6 @@ var __publicField = (obj, key, value) => {
       title: {},
       editMode: {},
       pageContent: {},
-      locales: {},
       language: {}
     },
     setup(__props, { expose: __expose }) {
@@ -13976,8 +13983,6 @@ 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({
@@ -13986,8 +13991,12 @@ var __publicField = (obj, key, value) => {
       });
       pageBuilderEditor.keyHandlers.addDocumentKeyEventListener(window.document);
       providePageBuilderEditor(pageBuilderEditor);
+      providePageBuilder(pageBuilderEditor);
       vue.onMounted(() => pageBuilderEditor.initData(props.pageContent));
       vue.watch(() => props.pageContent, (pageContent) => pageContent && pageBuilderEditor.initData(pageContent));
+      vue.watch(() => props.language, (language) => {
+        pageBuilderEditor.setLanguage(language || "en");
+      });
       const colorHistory = vue.ref([]);
       vue.provide("colorHistory", colorHistory);
       const getLocalDesignPartContent = () => {
@@ -14424,6 +14433,7 @@ var __publicField = (obj, key, value) => {
   exports2.BLOCK_TYPE = BLOCK_TYPE$1;
   exports2.Block = Block;
   exports2.Model = Model$1;
+  exports2.PAGE_BUILDER_KEY = PAGE_BUILDER_KEY;
   exports2.PAGE_TYPE = PAGE_TYPE$1;
   exports2.Page = Page;
   exports2.PageBuilderEditor = _sfc_main$8;
@@ -14443,7 +14453,9 @@ var __publicField = (obj, key, value) => {
   exports2.createPageBuilderViewer = createPageBuilderViewer;
   exports2.createPartComponent = createPartComponent;
   exports2.createPartComponents = createPartComponents;
+  exports2.providePageBuilder = providePageBuilder;
   exports2.providePageBuilderViewer = providePageBuilderViewer;
+  exports2.usePageBuilder = usePageBuilder;
   exports2.usePageBuilderViewer = usePageBuilderViewer;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@g1cloud/page-builder-editor",
   "private": false,
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "engins": {
     "node": ">= 20.0.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.5"
+    "@g1cloud/page-builder-viewer": "1.0.0-alpha.6"
   },
   "devDependencies": {
     "@types/node": "^20.12.7",