@g1cloud/page-builder-editor 1.0.0-alpha.10 → 1.0.0-alpha.12

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

@@ -7062,7 +7062,7 @@ var __publicField = (obj, key, value) => {
           if (typeof props.part.properties.text === "string") {
             return true;
           } else {
-            return !props.part.properties.text[pageBuilder.language.value];
+            return !props.part.properties.text[pageBuilder.locale.value];
           }
         } else {
           return true;
@@ -7078,7 +7078,7 @@ var __publicField = (obj, key, value) => {
               return "Empty text";
             }
           } else {
-            const t = props.part.properties.text[pageBuilder.language.value];
+            const t = props.part.properties.text[pageBuilder.locale.value];
             if (props.viewMode) {
               return t || "";
             } else {
@@ -7127,11 +7127,14 @@ var __publicField = (obj, key, value) => {
           return;
         if (typeof html2 !== "object")
           return;
-        const language = pageBuilder.language.value;
+        const language = pageBuilder.locale.value;
         let _html = html2[language];
         if (!_html && html2.tags) {
           _html = html2;
         }
+        if (!_html) {
+          return "";
+        }
         return `${_html.tags}
 <style>
 ${_html.style}
@@ -7196,7 +7199,7 @@ ${_html.style}
     }
   };
   const _hoisted_1$1$1 = { class: "pb-product-list-widget" };
-  const _hoisted_2$w = { class: "product" };
+  const _hoisted_2$v = { class: "product" };
   const _hoisted_3$s = { class: "image" };
   const _hoisted_4$i = ["src"];
   const _hoisted_5$8 = { class: "name" };
@@ -7243,7 +7246,7 @@ ${_html.style}
               key: index,
               class: "product-wrapper"
             }, [
-              vue.createElementVNode("div", _hoisted_2$w, [
+              vue.createElementVNode("div", _hoisted_2$v, [
                 products.value[index - 1] ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                   vue.createElementVNode("div", _hoisted_3$s, [
                     vue.createElementVNode("img", {
@@ -7314,14 +7317,14 @@ ${_html.style}
     constructor() {
       __publicField2(this, "instanceId");
       __publicField2(this, "model");
-      __publicField2(this, "language", vue.ref("en"));
+      __publicField2(this, "locale", vue.ref("en"));
       this.model = new Model$1();
     }
-    getLanguage() {
-      return this.language.value;
+    getLocale() {
+      return this.locale.value;
     }
-    setLanguage(language) {
-      this.language.value = language || "en";
+    setLocale(locale) {
+      this.locale.value = locale || "en";
     }
     render(pageContent) {
       const rootPart = new RootPart();
@@ -7431,7 +7434,7 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$F = { class: "pb-viewer" };
+  const _hoisted_1$E = { class: "pb-viewer" };
   const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     __name: "PageBuilderViewer",
     props: {
@@ -7444,7 +7447,7 @@ ${_html.style}
       const props = __props;
       const pageBuilderViewer = createPageBuilderViewer();
       pageBuilderViewer.instanceId = props.instanceId;
-      pageBuilderViewer.setLanguage(props.language);
+      pageBuilderViewer.setLocale(props.language);
       providePageBuilderViewer(pageBuilderViewer);
       providePageBuilder(pageBuilderViewer);
       const page = vue.computed(() => pageBuilderViewer.model.rootPart.value.children && pageBuilderViewer.model.rootPart.value.children[props.isMobilePage ? 0 : 1]);
@@ -7462,7 +7465,7 @@ ${_html.style}
         }
       );
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$F, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, [
           page.value ? (vue.openBlock(), vue.createBlock(_sfc_main$1$1, {
             key: 0,
             "is-mobile-page": _ctx.isMobilePage,
@@ -8301,15 +8304,15 @@ ${_html.style}
     return target;
   };
   const _sfc_main$A = {};
-  const _hoisted_1$E = { class: "pb-add-widget-button" };
-  const _hoisted_2$v = /* @__PURE__ */ vue.createElementVNode("span", { class: "icon material-icons-outlined" }, "add_box", -1);
+  const _hoisted_1$D = { class: "pb-add-widget-button" };
+  const _hoisted_2$u = /* @__PURE__ */ vue.createElementVNode("span", { class: "icon material-icons-outlined" }, "add_box", -1);
   const _hoisted_3$r = /* @__PURE__ */ vue.createElementVNode("span", { class: "text" }, "Add Widget", -1);
   const _hoisted_4$h = [
-    _hoisted_2$v,
+    _hoisted_2$u,
     _hoisted_3$r
   ];
   function _sfc_render$1(_ctx, _cache) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D, [
       vue.createElementVNode("button", {
         onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("add-widget", $event))
       }, _hoisted_4$h)
@@ -8346,8 +8349,8 @@ ${_html.style}
       throw Error(MOUSE_TRACKER_NOT_FOUND);
     return mouseTracker;
   };
-  const _hoisted_1$D = ["data-model-id", "draggable"];
-  const _hoisted_2$u = {
+  const _hoisted_1$C = ["data-model-id", "draggable"];
+  const _hoisted_2$t = {
     key: 1,
     class: "children"
   };
@@ -8797,7 +8800,7 @@ ${_html.style}
             key: 0,
             part: _ctx.part
           }, null, 8, ["part"])) : vue.createCommentVNode("", true),
-          childComponents.value && childComponents.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$u, [
+          childComponents.value && childComponents.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$t, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(childComponents.value, (child) => {
               return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(child.component), {
                 key: child.part.partId,
@@ -8815,13 +8818,13 @@ ${_html.style}
             class: "resize-handle",
             onMousedown: _resize_mousedown
           }, null, 32)) : vue.createCommentVNode("", true)
-        ], 16, _hoisted_1$D)), [
+        ], 16, _hoisted_1$C)), [
           [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
         ]);
       };
     }
   });
-  const _hoisted_1$C = ["data-model-id"];
+  const _hoisted_1$B = ["data-model-id"];
   const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     __name: "PbBlock",
     props: {
@@ -9017,14 +9020,14 @@ ${_html.style}
               part: child
             }, null, 8, ["part"]);
           }), 128))
-        ], 16, _hoisted_1$C)), [
+        ], 16, _hoisted_1$B)), [
           [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
         ]);
       };
     }
   });
-  const _hoisted_1$B = { class: "pb-block" };
-  const _hoisted_2$t = /* @__PURE__ */ vue.createElementVNode("div", {
+  const _hoisted_1$A = { class: "pb-block" };
+  const _hoisted_2$s = /* @__PURE__ */ vue.createElementVNode("div", {
     class: "pb-widget",
     style: { "margin": "0 auto" }
   }, [
@@ -9033,7 +9036,7 @@ ${_html.style}
     ])
   ], -1);
   const _hoisted_3$q = [
-    _hoisted_2$t
+    _hoisted_2$s
   ];
   const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     __name: "PbLoginDepart",
@@ -9042,11 +9045,11 @@ ${_html.style}
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, _hoisted_3$q);
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, _hoisted_3$q);
       };
     }
   });
-  const _hoisted_1$A = ["data-model-id"];
+  const _hoisted_1$z = ["data-model-id"];
   const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSection",
     props: {
@@ -9173,14 +9176,14 @@ ${_html.style}
               onAddWidget: addWidget
             }))
           ], 64))
-        ], 16, _hoisted_1$A)), [
+        ], 16, _hoisted_1$z)), [
           [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
         ]);
       };
     }
   });
-  const _hoisted_1$z = { class: "group-editor group-editor-position" };
-  const _hoisted_2$s = { class: "flex-align-center" };
+  const _hoisted_1$y = { class: "group-editor group-editor-position" };
+  const _hoisted_2$r = { class: "flex-align-center" };
   const _hoisted_3$p = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Position" })
   ], -1);
@@ -9219,8 +9222,8 @@ ${_html.style}
       const updateTop = (value) => updatePropertyValue({ top: value });
       const updateBottom = (value) => updatePropertyValue({ bottom: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, [
-          vue.createElementVNode("div", _hoisted_2$s, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, [
+          vue.createElementVNode("div", _hoisted_2$r, [
             _hoisted_3$p,
             vue.createElementVNode("div", _hoisted_4$g, [
               vue.createElementVNode("div", _hoisted_5$7, [
@@ -9266,8 +9269,8 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$y = { class: "group-editor group-editor-size" };
-  const _hoisted_2$r = { class: "flex-align-center" };
+  const _hoisted_1$x = { class: "group-editor group-editor-size" };
+  const _hoisted_2$q = { class: "flex-align-center" };
   const _hoisted_3$o = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Size" })
   ], -1);
@@ -9292,8 +9295,8 @@ ${_html.style}
       const updateWidth = (value) => updatePropertyValue({ width: value });
       const updateHeight = (value) => updatePropertyValue({ height: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, [
-          vue.createElementVNode("div", _hoisted_2$r, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
+          vue.createElementVNode("div", _hoisted_2$q, [
             _hoisted_3$o,
             vue.createElementVNode("div", _hoisted_4$f, [
               vue.createVNode(vue.unref(bluesea.BSTextInput), {
@@ -9471,8 +9474,8 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$x = { class: "vc-alpha" };
-  const _hoisted_2$q = { class: "vc-alpha-checkboard-wrap" };
+  const _hoisted_1$w = { class: "vc-alpha" };
+  const _hoisted_2$p = { class: "vc-alpha-checkboard-wrap" };
   const _hoisted_3$n = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-alpha-picker" },
@@ -9485,8 +9488,8 @@ ${_html.style}
   ];
   function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_Checkboard = vue.resolveComponent("Checkboard");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
-      vue.createElementVNode("div", _hoisted_2$q, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
+      vue.createElementVNode("div", _hoisted_2$p, [
         vue.createVNode(_component_Checkboard)
       ]),
       vue.createElementVNode(
@@ -10589,12 +10592,12 @@ ${_html.style}
       // }
     }
   };
-  const _hoisted_1$w = { class: "vc-editable-input" };
-  const _hoisted_2$p = ["aria-labelledby"];
+  const _hoisted_1$v = { class: "vc-editable-input" };
+  const _hoisted_2$o = ["aria-labelledby"];
   const _hoisted_3$m = ["id", "for"];
   const _hoisted_4$d = { class: "vc-input__desc" };
   function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
       vue.withDirectives(vue.createElementVNode("input", {
         ref: "input",
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $options.val = $event),
@@ -10602,7 +10605,7 @@ ${_html.style}
         class: "vc-input__input",
         onKeydown: _cache[1] || (_cache[1] = (...args) => $options.handleKeyDown && $options.handleKeyDown(...args)),
         onInput: _cache[2] || (_cache[2] = (...args) => $options.update && $options.update(...args))
-      }, null, 40, _hoisted_2$p), [
+      }, null, 40, _hoisted_2$o), [
         [vue.vModelText, $options.val]
       ]),
       vue.createElementVNode("span", {
@@ -10689,14 +10692,14 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$v = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_1$u = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-saturation--white" },
     null,
     -1
     /* HOISTED */
   );
-  const _hoisted_2$o = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_2$n = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-saturation--black" },
     null,
@@ -10725,8 +10728,8 @@ ${_html.style}
         onTouchstart: _cache[2] || (_cache[2] = (...args) => $options.handleChange && $options.handleChange(...args))
       },
       [
-        _hoisted_1$v,
-        _hoisted_2$o,
+        _hoisted_1$u,
+        _hoisted_2$n,
         vue.createElementVNode(
           "div",
           {
@@ -10874,8 +10877,8 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$u = ["aria-valuenow"];
-  const _hoisted_2$n = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_1$t = ["aria-valuenow"];
+  const _hoisted_2$m = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-hue-picker" },
     null,
@@ -10883,7 +10886,7 @@ ${_html.style}
     /* HOISTED */
   );
   const _hoisted_3$k = [
-    _hoisted_2$n
+    _hoisted_2$m
   ];
   function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock(
@@ -10914,7 +10917,7 @@ ${_html.style}
             4
             /* STYLE */
           )
-        ], 40, _hoisted_1$u)
+        ], 40, _hoisted_1$t)
       ],
       2
       /* CLASS */
@@ -11010,8 +11013,8 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$t = { class: "vc-sketch-saturation-wrap" };
-  const _hoisted_2$m = { class: "vc-sketch-controls" };
+  const _hoisted_1$s = { class: "vc-sketch-saturation-wrap" };
+  const _hoisted_2$l = { class: "vc-sketch-controls" };
   const _hoisted_3$j = { class: "vc-sketch-sliders" };
   const _hoisted_4$b = { class: "vc-sketch-hue-wrap" };
   const _hoisted_5$6 = {
@@ -11053,13 +11056,13 @@ ${_html.style}
         class: vue.normalizeClass(["vc-sketch", [$props.disableAlpha ? "vc-sketch__disable-alpha" : ""]])
       },
       [
-        vue.createElementVNode("div", _hoisted_1$t, [
+        vue.createElementVNode("div", _hoisted_1$s, [
           vue.createVNode(_component_Saturation, {
             value: _ctx.colors,
             onChange: $options.childChange
           }, null, 8, ["value", "onChange"])
         ]),
-        vue.createElementVNode("div", _hoisted_2$m, [
+        vue.createElementVNode("div", _hoisted_2$l, [
           vue.createElementVNode("div", _hoisted_3$j, [
             vue.createElementVNode("div", _hoisted_4$b, [
               vue.createVNode(_component_Hue, {
@@ -11206,7 +11209,7 @@ ${_html.style}
         () => setTimeout(() => {
           if (appliedColor.value)
             emit("change-color", appliedColor.value);
-        }),
+        }, 100),
         { deep: true }
       );
       vue.watch(
@@ -11229,10 +11232,10 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$s = { class: "buttons" };
-  const _hoisted_2$l = /* @__PURE__ */ vue.createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1);
+  const _hoisted_1$r = { class: "buttons" };
+  const _hoisted_2$k = /* @__PURE__ */ vue.createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1);
   const _hoisted_3$i = [
-    _hoisted_2$l
+    _hoisted_2$k
   ];
   const _hoisted_4$a = { class: "sketch-wrap" };
   function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -11243,7 +11246,7 @@ ${_html.style}
       onKeydown: _cache[3] || (_cache[3] = vue.withModifiers(() => {
       }, ["stop"]))
     }, [
-      vue.createElementVNode("div", _hoisted_1$s, [
+      vue.createElementVNode("div", _hoisted_1$r, [
         vue.renderSlot(_ctx.$slots, "button", vue.normalizeProps(vue.guardReactiveProps({ toggle: _ctx.toggle, color: _ctx.color })), () => [
           vue.createElementVNode("button", {
             class: vue.normalizeClass([{ none: !_ctx.color }, "pb-button picker-button"]),
@@ -11270,8 +11273,8 @@ ${_html.style}
     ]);
   }
   const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render]]);
-  const _hoisted_1$r = { class: "group-editor group-editor-background" };
-  const _hoisted_2$k = { class: "flex-align-center" };
+  const _hoisted_1$q = { class: "group-editor group-editor-background" };
+  const _hoisted_2$j = { class: "flex-align-center" };
   const _hoisted_3$h = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Background" })
   ], -1);
@@ -11307,8 +11310,8 @@ ${_html.style}
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
-          vue.createElementVNode("div", _hoisted_2$k, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
+          vue.createElementVNode("div", _hoisted_2$j, [
             _hoisted_3$h,
             vue.createElementVNode("div", _hoisted_4$9, [
               vue.createElementVNode("div", _hoisted_5$5, [
@@ -11340,8 +11343,8 @@ ${_html.style}
   const TopRightCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
   const BottomLeftCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%20transform='rotate(180)'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
   const BottomRightCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%20transform='rotate(90)'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
-  const _hoisted_1$q = { class: "group-editor group-editor-border" };
-  const _hoisted_2$j = { class: "flex-align-center" };
+  const _hoisted_1$p = { class: "group-editor group-editor-border" };
+  const _hoisted_2$i = { class: "flex-align-center" };
   const _hoisted_3$g = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Border" })
   ], -1);
@@ -11411,8 +11414,8 @@ ${_html.style}
       const updateBorderBottomLeftRadius = (value) => updatePropertyValue({ borderBottomLeftRadius: value });
       const updateBorderBottomRightRadius = (value) => updatePropertyValue({ borderBottomRightRadius: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
-          vue.createElementVNode("div", _hoisted_2$j, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
+          vue.createElementVNode("div", _hoisted_2$i, [
             _hoisted_3$g,
             vue.createElementVNode("div", _hoisted_4$8, [
               _hoisted_5$4,
@@ -11520,8 +11523,8 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$p = { class: "group-editor group-editor-margin" };
-  const _hoisted_2$i = { class: "flex-align-center" };
+  const _hoisted_1$o = { class: "group-editor group-editor-margin" };
+  const _hoisted_2$h = { class: "flex-align-center" };
   const _hoisted_3$f = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Margin" })
   ], -1);
@@ -11560,8 +11563,8 @@ ${_html.style}
       const updateTop = (value) => updatePropertyValue({ marginTop: value });
       const updateBottom = (value) => updatePropertyValue({ marginBottom: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
-          vue.createElementVNode("div", _hoisted_2$i, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
+          vue.createElementVNode("div", _hoisted_2$h, [
             _hoisted_3$f,
             vue.createElementVNode("div", _hoisted_4$7, [
               vue.createElementVNode("div", _hoisted_5$3, [
@@ -11607,8 +11610,8 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$o = { class: "group-editor group-editor-padding" };
-  const _hoisted_2$h = { class: "flex-align-center" };
+  const _hoisted_1$n = { class: "group-editor group-editor-padding" };
+  const _hoisted_2$g = { class: "flex-align-center" };
   const _hoisted_3$e = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Padding" })
   ], -1);
@@ -11647,8 +11650,8 @@ ${_html.style}
       const updateTop = (value) => updatePropertyValue({ paddingTop: value });
       const updateBottom = (value) => updatePropertyValue({ paddingBottom: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
-          vue.createElementVNode("div", _hoisted_2$h, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+          vue.createElementVNode("div", _hoisted_2$g, [
             _hoisted_3$e,
             vue.createElementVNode("div", _hoisted_4$6, [
               vue.createElementVNode("div", _hoisted_5$2, [
@@ -12045,7 +12048,8 @@ ${_html.style}
               caption: "Text",
               propertyType: "multiline-text",
               params: "",
-              localized: true
+              localized: true,
+              multiLang: true
             },
             {
               propertyName: "fontSize",
@@ -12113,7 +12117,8 @@ ${_html.style}
               caption: "HTML",
               propertyType: "html",
               params: "",
-              localized: true
+              localized: true,
+              multiLang: true
             }
           ]
         },
@@ -13333,11 +13338,11 @@ ${_html.style}
         }
       }
     }
-    addDocumentKeyEventListener(document2) {
-      document2.addEventListener("keydown", this.handleKeyDownEvent.bind(this));
+    addDocumentKeyEventListener(element) {
+      element.addEventListener("keydown", this.handleKeyDownEvent.bind(this));
     }
-    removeDocumentKeyEventListener(document2) {
-      document2.removeEventListener("keydown", this.handleKeyDownEvent.bind(this));
+    removeDocumentKeyEventListener(element) {
+      element.removeEventListener("keydown", this.handleKeyDownEvent.bind(this));
     }
   }
   const PAGE_BUILDER_EDITOR_KEY = "PageBuilderEditor";
@@ -13366,18 +13371,25 @@ ${_html.style}
       __publicField(this, "title");
       __publicField(this, "editMode");
       __publicField(this, "scale", vue.ref(1));
-      __publicField(this, "language", vue.ref("en"));
+      __publicField(this, "locale", vue.ref("en"));
+      __publicField(this, "locales", vue.ref(["en"]));
       this.model = new Model();
       this.context = new PageBuilderContextImpl(this);
       this.editMode = "free";
       this.scale.value = 1;
       this.initPlugins();
     }
-    getLanguage() {
-      return this.language.value;
+    getLocale() {
+      return this.locale.value;
+    }
+    setLocale(locale) {
+      this.locale.value = locale || "en";
+    }
+    getLocales() {
+      return this.locales.value;
     }
-    setLanguage(language) {
-      this.language.value = language || "en";
+    setLocales(locales) {
+      this.locales.value = locales || ["en"];
     }
     registerPlugin(plugin) {
       if (plugin.partDefinitions)
@@ -13397,7 +13409,7 @@ ${_html.style}
     }
     initData(content) {
       this.model.rootPart.pageBuilderId = this.instanceId;
-      this.model.rootPart.language = this.language.value;
+      this.model.rootPart.language = this.locale.value;
       let parts;
       if (content) {
         for (const p of content) {
@@ -13452,9 +13464,9 @@ ${_html.style}
       });
     }
   }
-  const _hoisted_1$n = /* @__PURE__ */ vue.createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1);
-  const _hoisted_2$g = [
-    _hoisted_1$n
+  const _hoisted_1$m = /* @__PURE__ */ vue.createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1);
+  const _hoisted_2$f = [
+    _hoisted_1$m
   ];
   const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPage",
@@ -13501,12 +13513,12 @@ ${_html.style}
               var _a2, _b;
               return insertSection(((_b = (_a2 = _ctx.page) == null ? void 0 : _a2.children) == null ? void 0 : _b.length) || 0);
             })
-          }, _hoisted_2$g)
+          }, _hoisted_2$f)
         ], 4);
       };
     }
   });
-  const _hoisted_1$m = /* @__PURE__ */ vue.createElementVNode("div", { style: { "width": "20px" } }, null, -1);
+  const _hoisted_1$l = /* @__PURE__ */ vue.createElementVNode("div", { style: { "width": "20px" } }, null, -1);
   const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     __name: "PbCanvas",
     setup(__props) {
@@ -13559,7 +13571,7 @@ ${_html.style}
               page: pageS.value,
               width: 420
             }, null, 8, ["page"]),
-            _hoisted_1$m,
+            _hoisted_1$l,
             vue.createVNode(_sfc_main$o, {
               "is-mobile-page": false,
               page: pageL.value,
@@ -13571,7 +13583,7 @@ ${_html.style}
     }
   });
   const canvasStyle = '.pb-page {\n  margin: 0 auto;\n  margin-top: 20px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n.pb-section {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected {\n  outline: 1px solid #e67e22;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n.pb-section-static .pb-widget {\n  outline: none;\n}\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-block.selected {\n  outline: 1px solid #8e44ad;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-widget.selected {\n  outline: 2px solid #27ae60;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n}\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n}\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-text-widget .text {\n  color: #333;\n}\n.pb-text-widget.empty .text {\n  color: #999;\n}\n.pb-image-widget {\n  width: 100%;\n}\n.pb-image-widget .image {\n  width: 100%;\n}\n.pb-image-widget .empty {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-image-widget .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-html-widget.empty {\n  padding: 4px 0;\n  font-size: 18px;\n  color: #999;\n}\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-login-widget h3 {\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\nbody {\n  background-color: white;\n  height: 100%;\n  margin: 0;\n}\n.pb-canvas-wrapper {\n  padding: 32px 40px 56px 40px;\n  height: 100%;\n  background-color: #aaa;\n  overflow: auto;\n}\n.pb-canvas-wrapper .pb-canvas {\n  display: flex;\n  flex-direction: row;\n  transform-origin: top left;\n  width: fit-content;\n  min-width: 40px;\n  min-height: 40px;\n  margin: 0 auto;\n}\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\n}\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: -20px;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}\n.pb-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  vertical-align: middle;\n}\n.pb-guideline {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.pb-guideline.selected {\n  z-index: 3;\n}\n.pb-guideline.preselect {\n  z-index: 4;\n}';
-  const _hoisted_1$l = { class: "pb-canvas-frame" };
+  const _hoisted_1$k = { class: "pb-canvas-frame" };
   const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     __name: "PbCanvasFrame",
     setup(__props) {
@@ -13607,14 +13619,14 @@ ${_html.style}
           <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet" />
           <style>${canvasStyle}</style>
         `;
-            pageBuilderEditor.keyHandlers.addDocumentKeyEventListener(iframeRef.value.contentWindow.document);
+            pageBuilderEditor.keyHandlers.addDocumentKeyEventListener(iframeRef.value.contentWindow.document.body);
             stopIframeWatch();
           }
         }
       );
       return (_ctx, _cache) => {
         var _a, _b, _c, _d;
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
           vue.createElementVNode("iframe", {
             ref_key: "iframeRef",
             ref: iframeRef,
@@ -13630,7 +13642,7 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$k = { class: "pb-tool-button bs-layout-horizontal flex-align-center" };
+  const _hoisted_1$j = { class: "pb-tool-button bs-layout-horizontal flex-align-center" };
   const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     __name: "PbToolbarButton",
     props: {
@@ -13644,7 +13656,7 @@ ${_html.style}
         (_b = (_a = props.button).handler) == null ? void 0 : _b.call(_a, pageBuilder);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
           vue.createElementVNode("div", {
             class: "tool-button bs-clickable",
             onClick: handleClick
@@ -13659,7 +13671,7 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$j = { class: "pb-tool-button-group bs-layout-horizontal flex-align-center" };
+  const _hoisted_1$i = { class: "pb-tool-button-group bs-layout-horizontal flex-align-center" };
   const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     __name: "PbToolbarButtonGroup",
     props: {
@@ -13667,7 +13679,7 @@ ${_html.style}
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.group.buttons, (button) => {
             return vue.openBlock(), vue.createBlock(_sfc_main$l, {
               key: button.buttonId,
@@ -13678,8 +13690,8 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$i = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
-  const _hoisted_2$f = { class: "bs-layout-horizontal" };
+  const _hoisted_1$h = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
+  const _hoisted_2$e = { class: "bs-layout-horizontal" };
   const _hoisted_3$d = /* @__PURE__ */ vue.createElementVNode("div", { class: "flex-grow-1" }, null, -1);
   const _hoisted_4$5 = { class: "ml-8 w-64" };
   const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
@@ -13695,8 +13707,8 @@ ${_html.style}
         pageBuilder.zoom(scale2);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
-          vue.createElementVNode("div", _hoisted_2$f, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+          vue.createElementVNode("div", _hoisted_2$e, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(buttonGroups), (group) => {
               return vue.openBlock(), vue.createBlock(_sfc_main$k, {
                 key: group.groupId,
@@ -13721,23 +13733,31 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$h = { class: "pb-menu bs-layout-vertical" };
+  const _hoisted_1$g = { class: "pb-menu bs-layout-vertical" };
   const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     __name: "PbMenu",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
           vue.createVNode(_sfc_main$j)
         ]);
       };
     }
   });
-  const _hoisted_1$g = { class: "pb-navigator" };
-  const _hoisted_2$e = { class: "pb-navigator" };
   const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     __name: "PbNavigator",
     setup(__props) {
       const pageBuilder = usePageBuilderEditor();
+      const treeS = vue.ref();
+      const treeL = vue.ref();
+      vue.watch(
+        () => treeS.value,
+        () => treeS.value && pageBuilder.keyHandlers.addDocumentKeyEventListener(treeS.value)
+      );
+      vue.watch(
+        () => treeL.value,
+        () => treeL.value && pageBuilder.keyHandlers.addDocumentKeyEventListener(treeL.value)
+      );
       const tabs = [
         { tabId: "pageS", caption: "Mobile", icon: "phone_iphone" },
         { tabId: "pageL", caption: "PC", icon: "desktop_windows" }
@@ -13879,7 +13899,12 @@ ${_html.style}
           tabs
         }, {
           pageS: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$g, [
+            vue.createElementVNode("div", {
+              ref_key: "treeS",
+              ref: treeS,
+              class: "pb-navigator",
+              tabindex: "0"
+            }, [
               vue.createVNode(vue.unref(bluesea.BSTree), {
                 expandedRows: expandedRows.value,
                 "onUpdate:expandedRows": [
@@ -13901,10 +13926,15 @@ ${_html.style}
                 "show-move-button": "",
                 onRowMoved: rowMoved
               }, null, 8, ["expandedRows", "selectedRows", "data", "key-provider"])
-            ])
+            ], 512)
           ]),
           pageL: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_2$e, [
+            vue.createElementVNode("div", {
+              ref_key: "treeL",
+              ref: treeL,
+              class: "pb-navigator",
+              tabindex: "0"
+            }, [
               vue.createVNode(vue.unref(bluesea.BSTree), {
                 expandedRows: expandedRows.value,
                 "onUpdate:expandedRows": [
@@ -13926,7 +13956,7 @@ ${_html.style}
                 "show-move-button": "",
                 onRowMoved: rowMoved
               }, null, 8, ["expandedRows", "selectedRows", "data", "key-provider"])
-            ])
+            ], 512)
           ]),
           _: 1
         }, 8, ["tab-id"]);
@@ -14216,7 +14246,8 @@ ${_html.style}
       title: {},
       editMode: {},
       pageContent: {},
-      language: {}
+      locales: {},
+      locale: {}
     },
     setup(__props, { expose: __expose }) {
       const props = __props;
@@ -14225,19 +14256,23 @@ ${_html.style}
       pageBuilderEditor.instanceId = props.instanceId;
       pageBuilderEditor.title = props.title;
       pageBuilderEditor.editMode = props.editMode || "free";
-      if (props.language)
-        pageBuilderEditor.setLanguage(props.language);
+      if (props.locales)
+        pageBuilderEditor.setLocales(props.locales);
+      if (props.locale)
+        pageBuilderEditor.setLocale(props.locale);
       pageBuilderEditor.registerPlugin({
         // TODO
         commands: createDefaultCommands(modal)
       });
-      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);
+      vue.watch(() => props.locale, (locale) => {
+        pageBuilderEditor.setLocale(locale);
+      });
+      vue.watch(() => props.locales, (locales) => {
+        pageBuilderEditor.setLocales(locales);
       });
       const colorHistory = vue.ref([]);
       vue.provide("colorHistory", colorHistory);
@@ -14389,29 +14424,21 @@ ${_html.style}
     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 = vue.computed(() => pageBuilder.language.value);
+      const locales = vue.computed(() => pageBuilder.getLocales());
       const text = vue.computed({
         get() {
-          return props.value && typeof props.value === "object" ? props.value[language.value] : "";
+          return props.value;
         },
-        set() {
+        // @ts-ignore
+        set(value) {
         }
       });
+      const emitUpdatePropertyValue = (value) => {
+        const properties = {};
+        properties[props.property.propertyName] = value;
+        emit("update-property-value", properties);
+      };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
           vue.createElementVNode("div", _hoisted_2$8, [
@@ -14420,16 +14447,26 @@ ${_html.style}
             }, null, 8, _hoisted_3$8)
           ]),
           vue.createElementVNode("div", null, [
-            vue.createVNode(vue.unref(bluesea.BSTextArea), {
+            _ctx.property.multiLang ? (vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSMultiLangTextArea), {
+              key: 0,
               modelValue: text.value,
               "onUpdate:modelValue": [
                 _cache[0] || (_cache[0] = ($event) => text.value = $event),
                 emitUpdatePropertyValue
               ],
-              prefix: language.value,
+              locales: locales.value,
               height: "60px",
               width: "100%"
-            }, null, 8, ["modelValue", "prefix"])
+            }, null, 8, ["modelValue", "locales"])) : (vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSTextArea), {
+              key: 1,
+              modelValue: text.value,
+              "onUpdate:modelValue": [
+                _cache[1] || (_cache[1] = ($event) => text.value = $event),
+                emitUpdatePropertyValue
+              ],
+              height: "60px",
+              width: "100%"
+            }, null, 8, ["modelValue"]))
           ])
         ]);
       };
@@ -14593,11 +14630,8 @@ ${_html.style}
       const pageBuilder = usePageBuilderEditor();
       const emit = __emit;
       const editHtml = () => {
-        const language = pageBuilder.getLanguage();
-        let html;
-        if (props.value && typeof props.value === "object") {
-          html = props.value[language];
-        }
+        const locales = pageBuilder.getLocales();
+        const localeTabs = locales.map((v) => ({ tabId: `tab-${v}`, caption: v }));
         modal.openModal({
           component: vue.defineAsyncComponent(() => Promise.resolve().then(() => HtmlEditorModal)),
           style: {
@@ -14607,16 +14641,13 @@ ${_html.style}
             minHeight: "400px"
           },
           bind: {
-            html
+            html: JSON.parse(JSON.stringify(props.value || {})),
+            locales,
+            localeTabs
           },
           on: {
-            updateHtml: (html2) => {
-              const language2 = pageBuilder.getLanguage();
-              const value = {
-                ...props.value || {},
-                [language2]: html2
-              };
-              emit("update-property-value", { html: value });
+            updateHtml: (html) => {
+              emit("update-property-value", { html });
             }
           }
         });
@@ -14789,8 +14820,8 @@ ${_html.style}
     __proto__: null,
     default: _sfc_main$1
   }, Symbol.toStringTag, { value: "Module" }));
-  const _hoisted_1 = { class: "bs-layout-vertical pb-html-editor-modal flex-grow-1 h-full" };
-  const _hoisted_2 = { class: "bs-layout-horizontal flex-grow-1" };
+  const _hoisted_1 = { class: "bs-layout-vertical flex-grow-1 h-full" };
+  const _hoisted_2 = { class: "bs-layout-horizontal h-full pt-8" };
   const _hoisted_3 = { class: "preview flex-grow-1" };
   const _hoisted_4 = { class: "bs-layout-vertical w-full h-full" };
   const _hoisted_5 = /* @__PURE__ */ vue.createElementVNode("div", { class: "title pb-4" }, "Preview", -1);
@@ -14805,78 +14836,109 @@ ${_html.style}
   const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     __name: "HtmlEditorModal",
     props: {
-      html: {}
+      html: {},
+      locales: {},
+      localeTabs: {}
     },
     emits: ["updateHtml"],
     setup(__props, { emit: __emit }) {
-      var _a, _b;
       const props = __props;
       const emit = __emit;
+      const tabId = vue.ref(props.localeTabs && props.localeTabs[0].tabId);
       const modalHandle = bluesea.useModalHandle();
-      const tags = vue.ref(((_a = props.html) == null ? void 0 : _a.tags) || "");
-      const style = vue.ref(((_b = props.html) == null ? void 0 : _b.style) || "");
-      const html = vue.computed(() => `${tags.value || ""}
-<style>${style.value || ""}</style>`);
-      const updateHtml = (value) => {
+      const html = vue.ref(props.html || {});
+      const preview = vue.computed(() => {
+        var _a;
+        let data = {};
+        (_a = props.locales) == null ? void 0 : _a.forEach((locale) => {
+          const _html = html.value[locale] || { tags: "", style: "" };
+          data[locale] = _html.tags ? `${_html.tags}
+<style>${_html.style}</style>` : "";
+        });
+        return data;
+      });
+      const updateTags = (locale, value) => {
+        if (!html.value)
+          html.value = {};
+        if (!html.value[locale])
+          html.value[locale] = {};
+        html.value[locale].tags = value;
+      };
+      const updateStyle = (locale, value) => {
+        if (!html.value)
+          html.value = {};
+        if (!html.value[locale])
+          html.value[locale] = {};
+        html.value[locale].style = value;
       };
       const ok = () => {
-        emit("updateHtml", {
-          tags: tags.value || "",
-          style: style.value || ""
-        });
+        emit("updateHtml", html.value);
         modalHandle.close();
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSModalFrame), { title: "HTML Editor" }, {
+        return vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSModalFrame), {
+          class: "pb-html-editor-modal",
+          title: "HTML Editor"
+        }, {
           default: vue.withCtx(() => [
             vue.createElementVNode("div", _hoisted_1, [
-              vue.createElementVNode("div", _hoisted_2, [
-                vue.createElementVNode("div", _hoisted_3, [
-                  vue.createElementVNode("div", _hoisted_4, [
-                    _hoisted_5,
-                    vue.createElementVNode("div", {
-                      class: "content flex-grow-1",
-                      innerHTML: html.value
-                    }, null, 8, _hoisted_6)
-                  ])
-                ]),
-                vue.createElementVNode("div", _hoisted_7, [
-                  vue.createElementVNode("div", _hoisted_8, [
-                    _hoisted_9,
-                    vue.createElementVNode("div", _hoisted_10, [
-                      vue.createVNode(vue.unref(bluesea.BSCodeEditor), {
-                        modelValue: tags.value,
-                        "onUpdate:modelValue": [
-                          _cache[0] || (_cache[0] = ($event) => tags.value = $event),
-                          updateHtml
-                        ],
-                        "editor-height": "100%",
-                        lang: "html"
-                      }, null, 8, ["modelValue"])
+              vue.createVNode(vue.unref(bluesea.BSTabSheet), {
+                "tab-id": tabId.value,
+                "onUpdate:tabId": _cache[0] || (_cache[0] = ($event) => tabId.value = $event),
+                tabs: _ctx.localeTabs,
+                class: "flex-grow-1"
+              }, vue.createSlots({ _: 2 }, [
+                vue.renderList(_ctx.locales, (locale) => {
+                  return {
+                    name: `tab-${locale}`,
+                    fn: vue.withCtx(() => [
+                      vue.createElementVNode("div", _hoisted_2, [
+                        vue.createElementVNode("div", _hoisted_3, [
+                          vue.createElementVNode("div", _hoisted_4, [
+                            _hoisted_5,
+                            vue.createElementVNode("div", {
+                              class: "content flex-grow-1",
+                              innerHTML: preview.value[locale]
+                            }, null, 8, _hoisted_6)
+                          ])
+                        ]),
+                        vue.createElementVNode("div", _hoisted_7, [
+                          vue.createElementVNode("div", _hoisted_8, [
+                            _hoisted_9,
+                            vue.createElementVNode("div", _hoisted_10, [
+                              vue.createVNode(vue.unref(bluesea.BSCodeEditor), {
+                                "model-value": (html.value[locale] || {}).tags,
+                                "editor-height": "100%",
+                                lang: "html",
+                                "onUpdate:modelValue": (value) => updateTags(locale, value)
+                              }, null, 8, ["model-value", "onUpdate:modelValue"])
+                            ])
+                          ]),
+                          vue.createElementVNode("div", _hoisted_11, [
+                            _hoisted_12,
+                            vue.createElementVNode("div", _hoisted_13, [
+                              vue.createVNode(vue.unref(bluesea.BSCodeEditor), {
+                                "model-value": (html.value[locale] || {}).style,
+                                "editor-height": "100%",
+                                lang: "css",
+                                "onUpdate:modelValue": (value) => updateStyle(locale, value)
+                              }, null, 8, ["model-value", "onUpdate:modelValue"])
+                            ])
+                          ])
+                        ])
+                      ])
                     ])
-                  ]),
-                  vue.createElementVNode("div", _hoisted_11, [
-                    _hoisted_12,
-                    vue.createElementVNode("div", _hoisted_13, [
-                      vue.createVNode(vue.unref(bluesea.BSCodeEditor), {
-                        modelValue: style.value,
-                        "onUpdate:modelValue": [
-                          _cache[1] || (_cache[1] = ($event) => style.value = $event),
-                          updateHtml
-                        ],
-                        "editor-height": "100%",
-                        lang: "css"
-                      }, null, 8, ["modelValue"])
-                    ])
-                  ])
-                ])
-              ]),
-              vue.createElementVNode("div", { class: "buttons pt-24" }, [
-                vue.createElementVNode("button", {
-                  class: "mr-4",
-                  onClick: ok
-                }, "OK")
-              ])
+                  };
+                })
+              ]), 1032, ["tab-id", "tabs"])
+            ])
+          ]),
+          buttons: vue.withCtx(() => [
+            vue.createElementVNode("div", { class: "bs-layout-horizontal justify-content-center" }, [
+              vue.createElementVNode("button", {
+                class: "mr-4",
+                onClick: ok
+              }, "OK")
             ])
           ]),
           _: 1