@g1cloud/page-builder-editor 1.0.0-alpha.7 → 1.0.0-alpha.9

package/css/page-builder-editor.scss

@@ -244,11 +244,8 @@
       height: 40%;
     }
 
-    textarea {
-      border: solid 1px #ccc;
-      width: 100%;
+    .bs-code-editor {
       height: 100%;
-      overflow-y: auto;
     }
   }
 

package/dist/{HtmlEditorModal-BV5E6G70.js → HtmlEditorModal-DDoVYM6n.js}

@@ -1,5 +1,5 @@
-import { defineComponent, ref, computed, onMounted, openBlock, createBlock, unref, withCtx, createElementVNode, withDirectives, vModelText } from "vue";
-import { useModalHandle, BSModalFrame } from "@g1cloud/bluesea";
+import { defineComponent, ref, computed, onMounted, 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" };
@@ -20,10 +20,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   emits: ["updateHtml"],
   setup(__props, { emit: __emit }) {
+    var _a, _b;
+    const props = __props;
     const emit = __emit;
     const modalHandle = useModalHandle();
-    const tags = ref();
-    const style = ref();
+    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>`);
     onMounted(async () => {
@@ -53,21 +55,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 createElementVNode("div", _hoisted_8, [
                   _hoisted_9,
                   createElementVNode("div", _hoisted_10, [
-                    withDirectives(createElementVNode("textarea", {
-                      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tags.value = $event)
-                    }, null, 512), [
-                      [vModelText, tags.value]
-                    ])
+                    createVNode(unref(BSCodeEditor), {
+                      modelValue: tags.value,
+                      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tags.value = $event),
+                      "editor-height": "100%",
+                      lang: "html"
+                    }, null, 8, ["modelValue"])
                   ])
                 ]),
                 createElementVNode("div", _hoisted_11, [
                   _hoisted_12,
                   createElementVNode("div", _hoisted_13, [
-                    withDirectives(createElementVNode("textarea", {
-                      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => style.value = $event)
-                    }, null, 512), [
-                      [vModelText, style.value]
-                    ])
+                    createVNode(unref(BSCodeEditor), {
+                      modelValue: style.value,
+                      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => style.value = $event),
+                      "editor-height": "100%",
+                      lang: "css"
+                    }, null, 8, ["modelValue"])
                   ])
                 ])
               ])

package/dist/{PbPropertyEditorColor-y7y6ZUQs.js → PbPropertyEditorColor-BKtQDQKF.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-BTlwA7HP.js";
+import { P as PbColorPicker } from "./index-DQ22qk5v.js";
 const _hoisted_1 = { class: "property-editor property-editor-color" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorHtml-CbQR_BzH.js → PbPropertyEditorHtml-Co4dM1CR.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-BTlwA7HP.js";
+import { u as usePageBuilderEditor } from "./index-DQ22qk5v.js";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];
@@ -23,26 +23,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         html = props.value[language];
       }
       modal.openModal({
-        component: defineAsyncComponent(() => import("./HtmlEditorModal-BV5E6G70.js")),
+        component: defineAsyncComponent(() => import("./HtmlEditorModal-DDoVYM6n.js")),
         style: {
           width: "80%",
           height: "80%",
-          maxWidth: "800px",
           minWidth: "500px",
-          maxHeight: "800px"
+          minHeight: "400px"
         },
         bind: {
           html
         },
         on: {
           updateHtml: (html2) => {
-            console.log(html2);
             const language2 = pageBuilder.getLanguage();
             const value = {
               ...props.value || {},
               [language2]: html2
             };
-            console.log(value);
             emit("update-property-value", { html: value });
           }
         }

package/dist/{PbPropertyEditorImage-BXEXm2Px.js → PbPropertyEditorImage-DRDbq11U.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-BTlwA7HP.js";
+import { u as usePageBuilderEditor, a as PageBuilderEditorEvent } from "./index-DQ22qk5v.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-sb-oS_gz.js → PbPropertyEditorMultilineText-DT15P558.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-BTlwA7HP.js";
+import { u as usePageBuilderEditor } from "./index-DQ22qk5v.js";
 const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorProduct-p0zOCA9R.js → PbPropertyEditorProduct-Xh2k14LD.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-BTlwA7HP.js";
+import { u as usePageBuilderEditor, a as PageBuilderEditorEvent } from "./index-DQ22qk5v.js";
 const _hoisted_1 = { class: "property-editor property-editor-product flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{index-BTlwA7HP.js → index-DQ22qk5v.js}

@@ -7136,12 +7136,8 @@ ${_html.style}
 </style>`;
     };
     const html = computed(() => {
-      var _a, _b;
-      console.log("---------");
-      console.log((_a = props.part.properties) == null ? void 0 : _a.html);
-      console.log("---------");
-      console.log(props.part);
-      return getHtml((_b = props.part.properties) == null ? void 0 : _b.html);
+      var _a;
+      return getHtml((_a = props.part.properties) == null ? void 0 : _a.html);
     });
     const emptyClass = computed(() => {
       if (props.viewMode) {
@@ -7605,7 +7601,7 @@ const syncProperties = (part, element) => {
       }
     }
     for (const name in part.properties) {
-      if (!attrs[name])
+      if (!attrs[name] && !attrs[`${name}.object`])
         delete part.properties[name];
     }
     if (Object.keys(part.properties).length === 0) {
@@ -8067,12 +8063,12 @@ const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
     "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-BWOKvwD9.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-sb-oS_gz.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-DT15P558.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-y7y6ZUQs.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-BXEXm2Px.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-CbQR_BzH.js")),
-    "product": () => defineAsyncComponent(() => import("./PbPropertyEditorProduct-p0zOCA9R.js"))
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-BKtQDQKF.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-DRDbq11U.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-Co4dM1CR.js")),
+    "product": () => defineAsyncComponent(() => import("./PbPropertyEditorProduct-Xh2k14LD.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {

package/dist/model/model.d.ts

@@ -1,4 +1,4 @@
-import { IPart, MultiLangText } from '@g1cloud/page-builder-viewer';
+import { IPart } from '@g1cloud/page-builder-viewer';
 import * as Y from 'yjs';
 export declare const ROOT_TYPE = "Root";
 export declare const PAGE_TYPE = "Page";
@@ -49,7 +49,7 @@ export type PartInsertResult = {
 };
 export type PartUpdateResult = {
     element: Y.XmlElement;
-    properties: Record<string, MultiLangText>;
+    properties: Record<string, unknown>;
     removeOtherProperties?: boolean;
 };
 export type PartDeleteResult = {

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-BTlwA7HP.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-DQ22qk5v.js";
 export {
   B as BLOCK_TYPE,
   b as Block,

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

@@ -7138,12 +7138,8 @@ ${_html.style}
 </style>`;
       };
       const html = vue.computed(() => {
-        var _a, _b;
-        console.log("---------");
-        console.log((_a = props.part.properties) == null ? void 0 : _a.html);
-        console.log("---------");
-        console.log(props.part);
-        return getHtml((_b = props.part.properties) == null ? void 0 : _b.html);
+        var _a;
+        return getHtml((_a = props.part.properties) == null ? void 0 : _a.html);
       });
       const emptyClass = vue.computed(() => {
         if (props.viewMode) {
@@ -7607,7 +7603,7 @@ ${_html.style}
         }
       }
       for (const name in part.properties) {
-        if (!attrs[name])
+        if (!attrs[name] && !attrs[`${name}.object`])
           delete part.properties[name];
       }
       if (Object.keys(part.properties).length === 0) {
@@ -14607,22 +14603,19 @@ ${_html.style}
           style: {
             width: "80%",
             height: "80%",
-            maxWidth: "800px",
             minWidth: "500px",
-            maxHeight: "800px"
+            minHeight: "400px"
           },
           bind: {
             html
           },
           on: {
             updateHtml: (html2) => {
-              console.log(html2);
               const language2 = pageBuilder.getLanguage();
               const value = {
                 ...props.value || {},
                 [language2]: html2
               };
-              console.log(value);
               emit("update-property-value", { html: value });
             }
           }
@@ -14816,10 +14809,12 @@ ${_html.style}
     },
     emits: ["updateHtml"],
     setup(__props, { emit: __emit }) {
+      var _a, _b;
+      const props = __props;
       const emit = __emit;
       const modalHandle = bluesea.useModalHandle();
-      const tags = vue.ref();
-      const style = vue.ref();
+      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>`);
       vue.onMounted(async () => {
@@ -14849,21 +14844,23 @@ ${_html.style}
                   vue.createElementVNode("div", _hoisted_8, [
                     _hoisted_9,
                     vue.createElementVNode("div", _hoisted_10, [
-                      vue.withDirectives(vue.createElementVNode("textarea", {
-                        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tags.value = $event)
-                      }, null, 512), [
-                        [vue.vModelText, tags.value]
-                      ])
+                      vue.createVNode(vue.unref(bluesea.BSCodeEditor), {
+                        modelValue: tags.value,
+                        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tags.value = $event),
+                        "editor-height": "100%",
+                        lang: "html"
+                      }, null, 8, ["modelValue"])
                     ])
                   ]),
                   vue.createElementVNode("div", _hoisted_11, [
                     _hoisted_12,
                     vue.createElementVNode("div", _hoisted_13, [
-                      vue.withDirectives(vue.createElementVNode("textarea", {
-                        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => style.value = $event)
-                      }, null, 512), [
-                        [vue.vModelText, style.value]
-                      ])
+                      vue.createVNode(vue.unref(bluesea.BSCodeEditor), {
+                        modelValue: style.value,
+                        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => style.value = $event),
+                        "editor-height": "100%",
+                        lang: "css"
+                      }, null, 8, ["modelValue"])
                     ])
                   ])
                 ])

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@g1cloud/page-builder-editor",
   "private": false,
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.9",
   "engins": {
     "node": ">= 20.0.0"
   },
@@ -16,7 +16,7 @@
   "author": "zag@g1project.net",
   "license": "LicenseRef-LICENSE",
   "peerDependencies": {
-    "@g1cloud/bluesea": "5.0.0-alpha.58"
+    "@g1cloud/bluesea": "5.0.0-alpha.60"
   },
   "dependencies": {
     "@ckpack/vue-color": "^1.5.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.7"
+    "@g1cloud/page-builder-viewer": "1.0.0-alpha.9"
   },
   "devDependencies": {
     "@types/node": "^20.12.7",