@g1cloud/page-builder-editor 1.0.0-alpha.11 → 1.0.0-alpha.13

package/css/page-builder-editor.scss

@@ -243,18 +243,21 @@
 
     .tags {
       height: 60%;
+
+      .content {
+        overflow-y: auto;
+      }
     }
 
     .style {
       height: 40%;
-    }
 
-    .bs-code-editor {
-      height: 100%;
+      .content {
+        overflow-y: auto;
+      }
     }
 
-    textarea {
-      width: 100%;
+    .bs-code-editor {
       height: 100%;
     }
   }

package/dist/HtmlEditorModal-CRzp6l55.js

@@ -0,0 +1,131 @@
+import { defineComponent, ref, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, createSlots, renderList } from "vue";
+import { useModalHandle, BSModalFrame, BSTabSheet, BSCodeEditor } from "@g1cloud/bluesea";
+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__ */ createElementVNode("div", { class: "title pb-4" }, "Preview", -1);
+const _hoisted_6 = ["innerHTML"];
+const _hoisted_7 = { class: "editor bs-layout-vertical pl-8" };
+const _hoisted_8 = { class: "tags bs-layout-vertical w-full" };
+const _hoisted_9 = /* @__PURE__ */ createElementVNode("div", { class: "title pb-4" }, "HTML", -1);
+const _hoisted_10 = { class: "content flex-grow-1" };
+const _hoisted_11 = { class: "style bs-layout-vertical w-full pt-8" };
+const _hoisted_12 = /* @__PURE__ */ createElementVNode("div", { class: "title pb-4" }, "Style", -1);
+const _hoisted_13 = { class: "content flex-grow-1" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "HtmlEditorModal",
+  props: {
+    html: {},
+    locales: {},
+    localeTabs: {}
+  },
+  emits: ["updateHtml"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const tabId = ref(props.localeTabs && props.localeTabs[0].tabId);
+    const modalHandle = useModalHandle();
+    const html = ref(props.html || {});
+    const preview = 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", html.value);
+      modalHandle.close();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(BSModalFrame), {
+        class: "pb-html-editor-modal",
+        title: "HTML Editor"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createVNode(unref(BSTabSheet), {
+              "tab-id": tabId.value,
+              "onUpdate:tabId": _cache[0] || (_cache[0] = ($event) => tabId.value = $event),
+              tabs: _ctx.localeTabs,
+              class: "flex-grow-1"
+            }, createSlots({ _: 2 }, [
+              renderList(_ctx.locales, (locale) => {
+                return {
+                  name: `tab-${locale}`,
+                  fn: withCtx(() => [
+                    createElementVNode("div", _hoisted_2, [
+                      createElementVNode("div", _hoisted_3, [
+                        createElementVNode("div", _hoisted_4, [
+                          _hoisted_5,
+                          createElementVNode("div", {
+                            class: "content flex-grow-1",
+                            innerHTML: preview.value[locale]
+                          }, null, 8, _hoisted_6)
+                        ])
+                      ]),
+                      createElementVNode("div", _hoisted_7, [
+                        createElementVNode("div", _hoisted_8, [
+                          _hoisted_9,
+                          createElementVNode("div", _hoisted_10, [
+                            createVNode(unref(BSCodeEditor), {
+                              "model-value": (html.value[locale] || {}).tags,
+                              "editor-height": "100%",
+                              lang: "html",
+                              "onUpdate:modelValue": (value) => updateTags(locale, value)
+                            }, null, 8, ["model-value", "onUpdate:modelValue"])
+                          ])
+                        ]),
+                        createElementVNode("div", _hoisted_11, [
+                          _hoisted_12,
+                          createElementVNode("div", _hoisted_13, [
+                            createVNode(unref(BSCodeEditor), {
+                              "model-value": (html.value[locale] || {}).style,
+                              "editor-height": "100%",
+                              lang: "css",
+                              "onUpdate:modelValue": (value) => updateStyle(locale, value)
+                            }, null, 8, ["model-value", "onUpdate:modelValue"])
+                          ])
+                        ])
+                      ])
+                    ])
+                  ])
+                };
+              })
+            ]), 1032, ["tab-id", "tabs"])
+          ])
+        ]),
+        buttons: withCtx(() => [
+          createElementVNode("div", { class: "bs-layout-horizontal justify-content-center" }, [
+            createElementVNode("button", {
+              class: "mr-4",
+              onClick: ok
+            }, "OK")
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/PageBuilderEditor.vue.d.ts

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

package/dist/{PbPropertyEditorColor-D3brNT4U.js → PbPropertyEditorColor-CTMG6AE0.js}

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

package/dist/{PbPropertyEditorHtml-D--QgdEp.js → PbPropertyEditorHtml-CH9j33dZ.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, defineAsyncComponent } from "vue";
 import { useModal } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-DdC6jCrv.js";
+import { u as usePageBuilderEditor } from "./index-CmE7SdtL.js";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];
@@ -17,13 +17,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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: defineAsyncComponent(() => import("./HtmlEditorModal-B2wOdZTD.js")),
+        component: defineAsyncComponent(() => import("./HtmlEditorModal-CRzp6l55.js")),
         style: {
           width: "80%",
           height: "80%",
@@ -31,16 +28,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           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 });
           }
         }
       });

package/dist/{PbPropertyEditorImage-BB25lcTu.js → PbPropertyEditorImage-CwzqZPij.js}

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

package/dist/{PbPropertyEditorMultilineText-BN2Q1P1o.js → PbPropertyEditorMultilineText-DtQgTGo7.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-DdC6jCrv.js";
+import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
+import { BSMultiLangTextArea, BSTextArea } from "@g1cloud/bluesea";
+import { u as usePageBuilderEditor } from "./index-CmE7SdtL.js";
 const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];
@@ -14,29 +14,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const emitUpdatePropertyValue = (value) => {
-      const properties = {};
-      if (props.value && typeof props.value === "object") {
-        properties[props.property.propertyName] = {
-          ...props.value,
-          [language.value]: value
-        };
-      } else {
-        properties[props.property.propertyName] = {
-          [language.value]: value
-        };
-      }
-      emit("update-property-value", properties);
-    };
     const pageBuilder = usePageBuilderEditor();
-    const language = computed(() => pageBuilder.language.value);
+    const locales = computed(() => pageBuilder.getLocales());
     const text = 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 openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", _hoisted_2, [
@@ -45,16 +37,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, null, 8, _hoisted_3)
         ]),
         createElementVNode("div", null, [
-          createVNode(unref(BSTextArea), {
+          _ctx.property.multiLang ? (openBlock(), createBlock(unref(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", "locales"])) : (openBlock(), createBlock(unref(BSTextArea), {
+            key: 1,
+            modelValue: text.value,
+            "onUpdate:modelValue": [
+              _cache[1] || (_cache[1] = ($event) => text.value = $event),
+              emitUpdatePropertyValue
+            ],
             height: "60px",
             width: "100%"
-          }, null, 8, ["modelValue", "prefix"])
+          }, null, 8, ["modelValue"]))
         ])
       ]);
     };

package/dist/{PbPropertyEditorProduct-CBk2DLhW.js → PbPropertyEditorProduct-BHpPwsjx.js}

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

package/dist/components/modal/HtmlEditorModal.vue.d.ts

@@ -1,15 +1,17 @@
-type Html = {
-    tags: string;
-    style: string;
-};
+import { TabEntry } from '@g1cloud/bluesea';
+
 declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    html?: Html | undefined;
+    html?: Record<string, unknown> | undefined;
+    locales?: string[] | undefined;
+    localeTabs?: TabEntry[] | undefined;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    updateHtml: (html: Html) => void;
+    updateHtml: (html: Record<string, unknown>) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    html?: Html | undefined;
+    html?: Record<string, unknown> | undefined;
+    locales?: string[] | undefined;
+    localeTabs?: TabEntry[] | undefined;
 }>>> & {
-    onUpdateHtml?: ((html: Html) => any) | undefined;
+    onUpdateHtml?: ((html: Record<string, unknown>) => any) | undefined;
 }, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

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

package/dist/{index-DdC6jCrv.js → index-CmE7SdtL.js}

@@ -7060,7 +7060,7 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
         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;
@@ -7076,7 +7076,7 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
             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 {
@@ -7125,11 +7125,14 @@ const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
         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}
@@ -7312,14 +7315,14 @@ class PageBuilderViewerImpl {
   constructor() {
     __publicField2(this, "instanceId");
     __publicField2(this, "model");
-    __publicField2(this, "language", ref("en"));
+    __publicField2(this, "locale", 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();
@@ -7442,7 +7445,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     const props = __props;
     const pageBuilderViewer = createPageBuilderViewer();
     pageBuilderViewer.instanceId = props.instanceId;
-    pageBuilderViewer.setLanguage(props.language);
+    pageBuilderViewer.setLocale(props.language);
     providePageBuilderViewer(pageBuilderViewer);
     providePageBuilder(pageBuilderViewer);
     const page = computed(() => pageBuilderViewer.model.rootPart.value.children && pageBuilderViewer.model.rootPart.value.children[props.isMobilePage ? 0 : 1]);
@@ -8063,12 +8066,12 @@ const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
     "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-BWOKvwD9.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BN2Q1P1o.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-DtQgTGo7.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-D3brNT4U.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-BB25lcTu.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-D--QgdEp.js")),
-    "product": () => defineAsyncComponent(() => import("./PbPropertyEditorProduct-CBk2DLhW.js"))
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-CTMG6AE0.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-CwzqZPij.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-CH9j33dZ.js")),
+    "product": () => defineAsyncComponent(() => import("./PbPropertyEditorProduct-BHpPwsjx.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -12043,7 +12046,8 @@ const widgets = [
             caption: "Text",
             propertyType: "multiline-text",
             params: "",
-            localized: true
+            localized: true,
+            multiLang: true
           },
           {
             propertyName: "fontSize",
@@ -12111,7 +12115,8 @@ const widgets = [
             caption: "HTML",
             propertyType: "html",
             params: "",
-            localized: true
+            localized: true,
+            multiLang: true
           }
         ]
       },
@@ -13364,18 +13369,25 @@ class PageBuilderEditorImpl {
     __publicField(this, "title");
     __publicField(this, "editMode");
     __publicField(this, "scale", ref(1));
-    __publicField(this, "language", ref("en"));
+    __publicField(this, "locale", ref("en"));
+    __publicField(this, "locales", ref(["en"]));
     this.model = new Model2();
     this.context = new PageBuilderContextImpl(this);
     this.editMode = "free";
     this.scale.value = 1;
     this.initPlugins();
   }
-  getLanguage() {
-    return this.language.value;
+  getLocale() {
+    return this.locale.value;
   }
-  setLanguage(language) {
-    this.language.value = language || "en";
+  setLocale(locale) {
+    this.locale.value = locale || "en";
+  }
+  getLocales() {
+    return this.locales.value;
+  }
+  setLocales(locales) {
+    this.locales.value = locales || ["en"];
   }
   registerPlugin(plugin) {
     if (plugin.partDefinitions)
@@ -13395,7 +13407,7 @@ class PageBuilderEditorImpl {
   }
   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) {
@@ -13568,7 +13580,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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 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  padding: 0;\n  margin: 0;\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$9 = { class: "pb-canvas-frame" };
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "PbCanvasFrame",
@@ -14232,7 +14244,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     title: {},
     editMode: {},
     pageContent: {},
-    language: {}
+    locales: {},
+    locale: {}
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
@@ -14241,8 +14254,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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)
@@ -14251,8 +14266,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     providePageBuilder(pageBuilderEditor);
     onMounted(() => pageBuilderEditor.initData(props.pageContent));
     watch(() => props.pageContent, (pageContent) => pageContent && pageBuilderEditor.initData(pageContent));
-    watch(() => props.language, (language) => {
-      pageBuilderEditor.setLanguage(language);
+    watch(() => props.locale, (locale) => {
+      pageBuilderEditor.setLocale(locale);
+    });
+    watch(() => props.locales, (locales) => {
+      pageBuilderEditor.setLocales(locales);
     });
     const colorHistory = ref([]);
     provide("colorHistory", colorHistory);

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

@@ -25,11 +25,14 @@ export interface PageBuilderEditor extends PageBuilder {
     title?: string;
     editMode: PageBuilderEditMode;
     scale: Ref<number>;
+    locales: Ref<string[]>;
     registerPlugin(plugin: PageBuilderPlugin): void;
     initData(content?: any): void;
     undo(): void;
     redo(): void;
     zoom(scale: number): void;
+    getLocales(): string[];
+    setLocales(locales?: string[]): void;
 }
 export declare class PageBuilderEditorImpl implements PageBuilderEditor {
     instanceId?: string;
@@ -43,10 +46,13 @@ export declare class PageBuilderEditorImpl implements PageBuilderEditor {
     title?: string;
     editMode: PageBuilderEditMode;
     scale: Ref<number>;
-    language: Ref<string>;
+    locale: Ref<string>;
+    locales: Ref<string[]>;
     constructor();
-    getLanguage(): string;
-    setLanguage(language?: string): void;
+    getLocale(): string;
+    setLocale(locale?: string): void;
+    getLocales(): string[];
+    setLocales(locales?: string[]): void;
     registerPlugin(plugin: PageBuilderPlugin): void;
     initData(content?: any[]): void;
     undo(): void;

package/dist/model/part-property.d.ts

@@ -10,6 +10,7 @@ export type PartProperty = {
     params?: any;
     propertyEditor?: PartPropertyEditor;
     localized?: boolean;
+    multiLang?: boolean;
 };
 export type PartPropertyGroupEditor = (group: PartPropertyGroup, parts: IPart[]) => Component | undefined;
 export type PartPropertyGroup = {

package/dist/page-builder-editor.js

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

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}
@@ -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();
@@ -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]);
@@ -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
             }
           ]
         },
@@ -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) {
@@ -13570,7 +13582,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 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  padding: 0;\n  margin: 0;\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$k = { class: "pb-canvas-frame" };
   const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     __name: "PbCanvasFrame",
@@ -14234,7 +14246,8 @@ ${_html.style}
       title: {},
       editMode: {},
       pageContent: {},
-      language: {}
+      locales: {},
+      locale: {}
     },
     setup(__props, { expose: __expose }) {
       const props = __props;
@@ -14243,8 +14256,10 @@ ${_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)
@@ -14253,8 +14268,11 @@ ${_html.style}
       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);
@@ -14406,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, [
@@ -14437,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"]))
           ])
         ]);
       };
@@ -14610,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: {
@@ -14624,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 });
             }
           }
         });
@@ -14806,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);
@@ -14822,76 +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 updateTags = (value) => {
-        tags.value = value;
-      };
-      const updateStyle = (value) => {
-        style.value = 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), {
-                        "model-value": tags.value,
-                        "editor-height": "100%",
-                        lang: "html",
-                        "onUpdate:modelValue": updateTags
-                      }, null, 8, ["model-value"])
-                    ])
-                  ]),
-                  vue.createElementVNode("div", _hoisted_11, [
-                    _hoisted_12,
-                    vue.createElementVNode("div", _hoisted_13, [
-                      vue.createVNode(vue.unref(bluesea.BSCodeEditor), {
-                        "model-value": style.value,
-                        "editor-height": "100%",
-                        lang: "css",
-                        "onUpdate:modelValue": updateStyle
-                      }, null, 8, ["model-value"])
+              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", { 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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@g1cloud/page-builder-editor",
   "private": false,
-  "version": "1.0.0-alpha.11",
+  "version": "1.0.0-alpha.13",
   "engins": {
     "node": ">= 20.0.0"
   },
@@ -28,7 +28,7 @@
     "vue-router": "^4.3.2",
     "vue3-click-away": "^1.2.4",
     "yjs": "^13.6.14",
-    "@g1cloud/page-builder-viewer": "1.0.0-alpha.11"
+    "@g1cloud/page-builder-viewer": "1.0.0-alpha.13"
   },
   "devDependencies": {
     "@types/node": "^20.12.7",

package/dist/HtmlEditorModal-B2wOdZTD.js

@@ -1,98 +0,0 @@
-import { defineComponent, ref, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode } from "vue";
-import { useModalHandle, BSModalFrame, BSCodeEditor } from "@g1cloud/bluesea";
-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_3 = { class: "preview flex-grow-1" };
-const _hoisted_4 = { class: "bs-layout-vertical w-full h-full" };
-const _hoisted_5 = /* @__PURE__ */ createElementVNode("div", { class: "title pb-4" }, "Preview", -1);
-const _hoisted_6 = ["innerHTML"];
-const _hoisted_7 = { class: "editor bs-layout-vertical pl-8" };
-const _hoisted_8 = { class: "tags bs-layout-vertical w-full" };
-const _hoisted_9 = /* @__PURE__ */ createElementVNode("div", { class: "title pb-4" }, "HTML", -1);
-const _hoisted_10 = { class: "content flex-grow-1" };
-const _hoisted_11 = { class: "style bs-layout-vertical w-full pt-8" };
-const _hoisted_12 = /* @__PURE__ */ createElementVNode("div", { class: "title pb-4" }, "Style", -1);
-const _hoisted_13 = { class: "content flex-grow-1" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "HtmlEditorModal",
-  props: {
-    html: {}
-  },
-  emits: ["updateHtml"],
-  setup(__props, { emit: __emit }) {
-    var _a, _b;
-    const props = __props;
-    const emit = __emit;
-    const modalHandle = useModalHandle();
-    const tags = ref(((_a = props.html) == null ? void 0 : _a.tags) || "");
-    const style = ref(((_b = props.html) == null ? void 0 : _b.style) || "");
-    const html = computed(() => `${tags.value || ""}
-<style>${style.value || ""}</style>`);
-    const updateTags = (value) => {
-      tags.value = value;
-    };
-    const updateStyle = (value) => {
-      style.value = value;
-    };
-    const ok = () => {
-      emit("updateHtml", {
-        tags: tags.value || "",
-        style: style.value || ""
-      });
-      modalHandle.close();
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(BSModalFrame), { title: "HTML Editor" }, {
-        default: withCtx(() => [
-          createElementVNode("div", _hoisted_1, [
-            createElementVNode("div", _hoisted_2, [
-              createElementVNode("div", _hoisted_3, [
-                createElementVNode("div", _hoisted_4, [
-                  _hoisted_5,
-                  createElementVNode("div", {
-                    class: "content flex-grow-1",
-                    innerHTML: html.value
-                  }, null, 8, _hoisted_6)
-                ])
-              ]),
-              createElementVNode("div", _hoisted_7, [
-                createElementVNode("div", _hoisted_8, [
-                  _hoisted_9,
-                  createElementVNode("div", _hoisted_10, [
-                    createVNode(unref(BSCodeEditor), {
-                      "model-value": tags.value,
-                      "editor-height": "100%",
-                      lang: "html",
-                      "onUpdate:modelValue": updateTags
-                    }, null, 8, ["model-value"])
-                  ])
-                ]),
-                createElementVNode("div", _hoisted_11, [
-                  _hoisted_12,
-                  createElementVNode("div", _hoisted_13, [
-                    createVNode(unref(BSCodeEditor), {
-                      "model-value": style.value,
-                      "editor-height": "100%",
-                      lang: "css",
-                      "onUpdate:modelValue": updateStyle
-                    }, null, 8, ["model-value"])
-                  ])
-                ])
-              ])
-            ]),
-            createElementVNode("div", { class: "buttons pt-24" }, [
-              createElementVNode("button", {
-                class: "mr-4",
-                onClick: ok
-              }, "OK")
-            ])
-          ])
-        ]),
-        _: 1
-      });
-    };
-  }
-});
-export {
-  _sfc_main as default
-};