@g1cloud/page-builder-editor 1.0.0-alpha.43 → 1.0.0-alpha.45

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

package/dist/{PbPropertyEditorHtml-Bpa0EKp9.js → PbPropertyEditorHtml-Jh4spLgs.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-DMnlRaKO.js";
+import { u as usePageBuilderEditor } from "./index-BtttVLpv.js";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorImage-D9sBmfaV.js → PbPropertyEditorImage-DaQ6AzHk.js}

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
-import { u as usePageBuilderEditor } from "./index-DMnlRaKO.js";
+import { u as usePageBuilderEditor } from "./index-BtttVLpv.js";
 import { useModal } from "@g1cloud/bluesea";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };

package/dist/{PbPropertyEditorMultilineText-DfvOukAA.js → PbPropertyEditorMultilineText-DHqDdVCb.js}

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

package/dist/{PbPropertyEditorText-DmfUyQGj.js → PbPropertyEditorText-CLz-HW0c.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
 import { BSMultiLangTextInput, BSTextInput } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-DMnlRaKO.js";
+import { u as usePageBuilderEditor } from "./index-BtttVLpv.js";
 const _hoisted_1 = { class: "property-editor property-editor-text flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorYoutube-D0EpPwPV.js → PbPropertyEditorYoutube-Dqi0T67b.js}

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

package/dist/{PbWidgetAddModal-BDzxd8h_.js → PbWidgetAddModal-eVGTb1x1.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString } from "vue";
 import { useModalHandle, BSModalFrame } from "@g1cloud/bluesea";
-import { w as widgetPartDefinitions } from "./index-DMnlRaKO.js";
+import { w as widgetPartDefinitions } from "./index-BtttVLpv.js";
 const _hoisted_1 = { class: "bs-layout-vertical pb-part-add-modal" };
 const _hoisted_2 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
 const _hoisted_3 = ["onClick", "textContent"];

package/dist/{index-DMnlRaKO.js → index-BtttVLpv.js}

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { ref, defineComponent, computed, openBlock, createElementBlock, Fragment, createElementVNode, normalizeStyle, createCommentVNode, toDisplayString, onMounted, onBeforeUnmount, createBlock as createBlock$1, resolveDynamicComponent, unref, provide, inject, watch, renderList, normalizeProps, mergeProps, normalizeClass, reactive, defineAsyncComponent, withDirectives, createVNode, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, markRaw, toHandlers, Teleport } from "vue";
+import { ref, defineComponent, computed, openBlock, createElementBlock, Fragment, createElementVNode, normalizeStyle, createCommentVNode, toDisplayString, onMounted, onBeforeUnmount, createBlock as createBlock$1, resolveDynamicComponent, unref, provide, inject, watch, renderList, normalizeProps, mergeProps, normalizeClass, withDirectives, vShow, reactive, defineAsyncComponent, createVNode, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, markRaw, toHandlers, Teleport } from "vue";
 import { notNull, BSTextInput, vClickOutside, useModal, BSSelect, BSTree, useContextMenu } from "@g1cloud/bluesea";
 import YouTube from "vue3-youtube";
 const create$5 = () => /* @__PURE__ */ new Map();
@@ -6879,14 +6879,21 @@ let Model$1 = class Model {
     this.rootPart = ref(new RootPart());
   }
 };
-const _hoisted_1$b$1 = ["data-part-id"];
-const _sfc_main$c$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$a$1 = ["data-part-id"];
+const _sfc_main$b$1 = /* @__PURE__ */ defineComponent({
   __name: "PbWidget",
   props: {
     part: {}
   },
-  setup(__props) {
+  emits: ["update:visible"],
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
+    const visible = ref(true);
+    const updateVisible = (value) => {
+      visible.value = value;
+      emit("update:visible", value);
+    };
     const classNames = computed(() => [getPartClassName(props.part), props.part.getClassNames()]);
     const styleTag = computed(() => props.part.getStyleTag());
     const style = computed(() => ({
@@ -6896,83 +6903,76 @@ const _sfc_main$c$1 = /* @__PURE__ */ defineComponent({
     const thisComponent = computed(() => createPartComponent(props.part));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
+        styleTag.value && visible.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
           key: 0,
           innerHTML: styleTag.value
         }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
-        createElementVNode("div", {
+        withDirectives(createElementVNode("div", {
           class: normalizeClass([classNames.value, "pb-widget"]),
           "data-part-id": _ctx.part.partId,
           style: normalizeStyle(style.value)
         }, [
           thisComponent.value ? (openBlock(), createBlock$1(resolveDynamicComponent(thisComponent.value), {
             key: 0,
-            part: _ctx.part
-          }, null, 8, ["part"])) : createCommentVNode("", true)
-        ], 14, _hoisted_1$b$1)
+            part: _ctx.part,
+            "onUpdate:visible": updateVisible
+          }, null, 40, ["part"])) : createCommentVNode("", true)
+        ], 14, _hoisted_1$a$1), [
+          [vShow, visible.value]
+        ])
       ], 64);
     };
   }
 });
-const _hoisted_1$a$1 = ["data-part-id"];
-const _sfc_main$b$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$9$1 = ["data-part-id"];
+const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
   __name: "PbBlock",
   props: {
     part: {},
     isMobilePage: { type: Boolean }
   },
-  setup(__props) {
+  emits: ["update:visible"],
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
+    const visible = ref(true);
+    const childrenVisible = {};
+    const updateVisible = (partId, value) => {
+      childrenVisible[partId] = value;
+      visible.value = props.part.children.some((child) => !(child.partId in childrenVisible) || childrenVisible[child.partId]);
+      emit("update:visible", visible.value);
+    };
     const classNames = computed(() => [getPartClassName(props.part), props.part.getClassNames()]);
     const styleTag = computed(() => props.part.getStyleTag());
     const style = computed(() => ({
       ...props.part.getStyles(props.isMobilePage),
       ...props.part.getInlineStyles()
     }));
-    computed(() => createPartComponents(props.part.children));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
+        styleTag.value && visible.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
           key: 0,
           innerHTML: styleTag.value
         }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
-        createElementVNode("div", {
+        withDirectives(createElementVNode("div", {
           class: normalizeClass([classNames.value, "pb-block"]),
           "data-part-id": _ctx.part.partId,
           style: normalizeStyle(style.value)
         }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (child) => {
-            return openBlock(), createBlock$1(_sfc_main$c$1, {
+          _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (child) => {
+            return openBlock(), createBlock$1(_sfc_main$b$1, {
               key: child.partId,
-              part: child
-            }, null, 8, ["part"]);
-          }), 128))
-        ], 14, _hoisted_1$a$1)
+              part: child,
+              "onUpdate:visible": (value) => updateVisible(child.partId, value)
+            }, null, 8, ["part", "onUpdate:visible"]);
+          }), 128)) : createCommentVNode("", true)
+        ], 14, _hoisted_1$9$1), [
+          [vShow, visible.value]
+        ])
       ], 64);
     };
   }
 });
-const _hoisted_1$9$1 = { class: "pb-block" };
-const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
-  __name: "PbLoginDepart",
-  props: {
-    part: {}
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$9$1, _cache[0] || (_cache[0] = [
-        createElementVNode("div", {
-          class: "pb-widget",
-          style: { "margin": "0 auto" }
-        }, [
-          createElementVNode("div", { class: "pb-login-widget" }, [
-            createElementVNode("h3", null, "Login Design Part")
-          ])
-        ], -1)
-      ]));
-    };
-  }
-});
 const _hoisted_1$8$1 = ["data-part-id"];
 const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
   __name: "PbSection",
@@ -6982,6 +6982,12 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
+    const visible = ref(true);
+    const childrenVisible = {};
+    const updateVisible = (partId, value) => {
+      childrenVisible[partId] = value;
+      visible.value = props.part.children.some((child) => !(child.partId in childrenVisible) || childrenVisible[child.partId]);
+    };
     const classNames = computed(() => [getPartClassName(props.part), props.part.getClassNames()]);
     const styleTag = computed(() => props.part.getStyleTag());
     const style = computed(() => ({
@@ -6989,28 +6995,27 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
       ...props.part.getInlineStyles()
     }));
     return (_ctx, _cache) => {
-      var _a;
       return openBlock(), createElementBlock(Fragment, null, [
-        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
+        styleTag.value && visible.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
           key: 0,
           innerHTML: styleTag.value
         }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
-        createElementVNode("div", {
+        withDirectives(createElementVNode("div", {
           class: normalizeClass([classNames.value, "pb-section"]),
           "data-part-id": _ctx.part.partId,
           style: normalizeStyle(style.value)
         }, [
-          ((_a = _ctx.part.properties) == null ? void 0 : _a.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$a$1, {
-            key: 0,
-            part: _ctx.part
-          }, null, 8, ["part"])) : _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.part.children, (block) => {
-            return openBlock(), createBlock$1(_sfc_main$b$1, {
-              key: block.partId,
+          _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (child) => {
+            return openBlock(), createBlock$1(_sfc_main$a$1, {
+              key: child.partId,
               "is-mobile-page": _ctx.isMobilePage,
-              part: block
-            }, null, 8, ["is-mobile-page", "part"]);
+              part: child,
+              "onUpdate:visible": (value) => updateVisible(child.partId, value)
+            }, null, 8, ["is-mobile-page", "part", "onUpdate:visible"]);
           }), 128)) : createCommentVNode("", true)
-        ], 14, _hoisted_1$8$1)
+        ], 14, _hoisted_1$8$1), [
+          [vShow, visible.value]
+        ])
       ], 64);
     };
   }
@@ -7280,7 +7285,7 @@ const defaultPartDefinitions = {
     partType: "Block",
     partName: "Block",
     className: "pb-block",
-    creator: () => _sfc_main$b$1
+    creator: () => _sfc_main$a$1
   },
   "TextWidget": {
     partType: "Widget",
@@ -8171,15 +8176,15 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-DmfUyQGj.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-CLz-HW0c.js")),
     "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-TTgo0zbQ.js")),
     "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-C7-iSAtn.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-DfvOukAA.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-DHqDdVCb.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-ECWITss2.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-D9sBmfaV.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-Bpa0EKp9.js")),
-    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-D0EpPwPV.js"))
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-DHIK8xLM.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-DaQ6AzHk.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-Jh4spLgs.js")),
+    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-Dqi0T67b.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -12533,7 +12538,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-BDzxd8h_.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-eVGTb1x1.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -12566,40 +12571,6 @@ const openWidgetAddModal = (modal, args, callback) => {
     }
   });
 };
-const findInsertTargetAndIndex = (pageBuilder, partType) => {
-  var _a, _b, _c;
-  const selected = pageBuilder.context.getSelectedParts()[0];
-  const page = pageBuilder.context.getSelectedPage();
-  if (!page) return {};
-  if (partType === SECTION_TYPE) {
-    const section = pageBuilder.partManager.findNearestSection(selected);
-    return {
-      target: page,
-      index: section ? page.children.indexOf(section) + 1 : (_a = page.children) == null ? void 0 : _a.length
-    };
-  } else if (partType === BLOCK_TYPE) {
-    let section = pageBuilder.partManager.findNearestSection(selected);
-    let block = pageBuilder.partManager.findNearestBlock(selected);
-    if (!section) {
-      section = page.children[page.children.length - 1];
-    }
-    return {
-      target: section,
-      index: block ? section.children.indexOf(block) + 1 : (_b = section.children) == null ? void 0 : _b.length
-    };
-  } else {
-    let block = pageBuilder.partManager.findNearestBlock(selected);
-    let widget = selected.parent.isWidget() ? selected.parent : selected;
-    if (!block) {
-      const section = page.children[page.children.length - 1];
-      block = section.children[section.children.length - 1];
-    }
-    return {
-      target: block,
-      index: widget ? block.children.indexOf(widget) + 1 : (_c = block.children) == null ? void 0 : _c.length
-    };
-  }
-};
 const createPartWithDefinition = (def, properties) => {
   const part = createPart(def.partType, def.partName, def.initialProperties);
   if (part && properties) {
@@ -13128,7 +13099,7 @@ const _PastePartCommand = class _PastePartCommand {
     __publicField(this, "commandId", _PastePartCommand.COMMAND_ID);
   }
   async execute(pageBuilder) {
-    var _a;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const json = await navigator.clipboard.readText();
     const object = JSON.parse(json);
     if (object.partType === ROOT_TYPE) {
@@ -13196,7 +13167,7 @@ const _PastePartCommand = class _PastePartCommand {
         else if (part.partType === WIDGET_TYPE && !pasteType) pasteType = WIDGET_TYPE;
       });
       if (!pasteType) return;
-      const partsToInsert = parts.map((part) => {
+      const partsToPaste = parts.map((part) => {
         if (pasteType === SECTION_TYPE) {
           if (part.partType === SECTION_TYPE) {
             return part;
@@ -13227,11 +13198,76 @@ const _PastePartCommand = class _PastePartCommand {
           return part;
         }
       }).filter(notNull);
-      const targetType = pasteType === SECTION_TYPE ? SECTION_TYPE : pasteType === BLOCK_TYPE ? BLOCK_TYPE : WIDGET_TYPE;
-      const { target, index } = findInsertTargetAndIndex(pageBuilder, targetType);
-      if (target && index !== void 0 && partsToInsert) {
-        insertParts(pageBuilder, target.partId, index, partsToInsert, false);
+      const selectedPage = pageBuilder.context.getSelectedPage();
+      const selected = pageBuilder.context.getSelectedParts()[0] || selectedPage;
+      if (!selectedPage || !selected) return;
+      let selectedWidget;
+      if (selected && selected.isWidget()) selectedWidget = selected;
+      if (selectedWidget && selectedWidget.isNestedWidget()) selectedWidget = selectedWidget.parent;
+      let selectedBlock;
+      if (selectedWidget) selectedBlock = selectedWidget.parent;
+      else if (selected && selected.isBlock()) selectedBlock = selected;
+      let selectedSection;
+      if (selectedBlock) selectedSection = selectedBlock.parent;
+      else if (selected && selected.isSection()) selectedSection = selected;
+      let targetPartId;
+      let targetIndex = -1;
+      let partsToInsert;
+      if (pasteType === SECTION_TYPE) {
+        targetPartId = selectedPage.partId;
+        targetIndex = selectedSection ? selectedPage.children.indexOf(selectedSection) + 1 : ((_b = selectedPage.children) == null ? void 0 : _b.length) || 0;
+        partsToInsert = partsToPaste;
+      } else if (pasteType === BLOCK_TYPE) {
+        if (selectedSection) {
+          targetPartId = selectedSection.partId;
+          targetIndex = selectedBlock ? selectedSection.children.indexOf(selectedBlock) + 1 : ((_c = selectedSection.children) == null ? void 0 : _c.length) || 0;
+          partsToInsert = partsToPaste;
+        } else if ((_d = selectedPage.children) == null ? void 0 : _d.length) {
+          selectedSection = selectedPage.children[selectedPage.children.length - 1];
+          targetPartId = selectedSection.partId;
+          targetIndex = ((_e = selectedSection.children) == null ? void 0 : _e.length) || 0;
+          partsToInsert = partsToPaste;
+        } else {
+          const newSection = createSection(pageBuilder);
+          if (!newSection) return;
+          newSection.children = partsToPaste;
+          targetPartId = selectedPage.partId;
+          targetIndex = 0;
+          partsToInsert = [newSection];
+        }
+      } else if (pasteType === WIDGET_TYPE) {
+        if (selectedBlock) {
+          targetPartId = selectedBlock.partId;
+          targetIndex = selectedWidget ? selectedBlock.children.indexOf(selectedWidget) + 1 : ((_f = selectedBlock.children) == null ? void 0 : _f.length) || 0;
+          partsToInsert = partsToPaste;
+        } else if (selectedSection || ((_g = selectedPage.children) == null ? void 0 : _g.length)) {
+          if (!selectedSection) selectedSection = selectedPage.children[selectedPage.children.length - 1];
+          if ((_h = selectedSection.children) == null ? void 0 : _h.length) {
+            selectedBlock = selectedSection.children[selectedSection.children.length - 1];
+            targetPartId = selectedBlock.partId;
+            targetIndex = ((_i = selectedBlock.children) == null ? void 0 : _i.length) || 0;
+            partsToInsert = partsToPaste;
+          } else {
+            const newBlock = createBlock(pageBuilder);
+            if (!newBlock) return;
+            newBlock.children = partsToPaste;
+            targetPartId = selectedSection.partId;
+            targetIndex = 0;
+            partsToInsert = [newBlock];
+          }
+        } else {
+          const newBlock = createBlock(pageBuilder);
+          const newSection = createSection(pageBuilder);
+          if (!newBlock || !newSection) return;
+          newSection.children = [newBlock];
+          newBlock.children = partsToPaste;
+          targetPartId = selectedPage.partId;
+          targetIndex = 0;
+          partsToInsert = [newSection];
+        }
       }
+      if (!targetPartId || targetIndex < 0 || !partsToInsert) return;
+      insertParts(pageBuilder, targetPartId, targetIndex, partsToInsert, false);
     }
   }
 };
@@ -13636,8 +13672,8 @@ class PageBuilderContextImpl {
     const pages = this.model.rootPart.children;
     let part = this.selection[0];
     if (!part) return pages && pages[0];
-    while (part.parent) {
-      if (part.parent.isPage()) return part.parent;
+    while (part) {
+      if (part.isPage()) return part;
       part = part.parent;
     }
   }

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, m, n, R, o, S, p, W, q, r, t, v, x, y, z, A, C } from "./index-DMnlRaKO.js";
+import { B, b, M, c, d, e, _, a, f, g, h, i, j, k, l, m, n, R, o, S, p, W, q, r, t, v, x, y, z, A, C } from "./index-BtttVLpv.js";
 export {
   B as BLOCK_TYPE,
   b as Block,

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

@@ -6880,14 +6880,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.rootPart = vue.ref(new RootPart());
     }
   };
-  const _hoisted_1$b$1 = ["data-part-id"];
-  const _sfc_main$c$1 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$a$1 = ["data-part-id"];
+  const _sfc_main$b$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbWidget",
     props: {
       part: {}
     },
-    setup(__props) {
+    emits: ["update:visible"],
+    setup(__props, { emit: __emit }) {
       const props = __props;
+      const emit = __emit;
+      const visible = vue.ref(true);
+      const updateVisible = (value) => {
+        visible.value = value;
+        emit("update:visible", value);
+      };
       const classNames = vue.computed(() => [getPartClassName(props.part), props.part.getClassNames()]);
       const styleTag = vue.computed(() => props.part.getStyleTag());
       const style = vue.computed(() => ({
@@ -6897,83 +6904,76 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const thisComponent = vue.computed(() => createPartComponent(props.part));
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          styleTag.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent("style"), {
+          styleTag.value && visible.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent("style"), {
             key: 0,
             innerHTML: styleTag.value
           }, null, 8, ["innerHTML"])) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", {
+          vue.withDirectives(vue.createElementVNode("div", {
             class: vue.normalizeClass([classNames.value, "pb-widget"]),
             "data-part-id": _ctx.part.partId,
             style: vue.normalizeStyle(style.value)
           }, [
             thisComponent.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(thisComponent.value), {
               key: 0,
-              part: _ctx.part
-            }, null, 8, ["part"])) : vue.createCommentVNode("", true)
-          ], 14, _hoisted_1$b$1)
+              part: _ctx.part,
+              "onUpdate:visible": updateVisible
+            }, null, 40, ["part"])) : vue.createCommentVNode("", true)
+          ], 14, _hoisted_1$a$1), [
+            [vue.vShow, visible.value]
+          ])
         ], 64);
       };
     }
   });
-  const _hoisted_1$a$1 = ["data-part-id"];
-  const _sfc_main$b$1 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$9$1 = ["data-part-id"];
+  const _sfc_main$a$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbBlock",
     props: {
       part: {},
       isMobilePage: { type: Boolean }
     },
-    setup(__props) {
+    emits: ["update:visible"],
+    setup(__props, { emit: __emit }) {
       const props = __props;
+      const emit = __emit;
+      const visible = vue.ref(true);
+      const childrenVisible = {};
+      const updateVisible = (partId, value) => {
+        childrenVisible[partId] = value;
+        visible.value = props.part.children.some((child) => !(child.partId in childrenVisible) || childrenVisible[child.partId]);
+        emit("update:visible", visible.value);
+      };
       const classNames = vue.computed(() => [getPartClassName(props.part), props.part.getClassNames()]);
       const styleTag = vue.computed(() => props.part.getStyleTag());
       const style = vue.computed(() => ({
         ...props.part.getStyles(props.isMobilePage),
         ...props.part.getInlineStyles()
       }));
-      vue.computed(() => createPartComponents(props.part.children));
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          styleTag.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent("style"), {
+          styleTag.value && visible.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent("style"), {
             key: 0,
             innerHTML: styleTag.value
           }, null, 8, ["innerHTML"])) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", {
+          vue.withDirectives(vue.createElementVNode("div", {
             class: vue.normalizeClass([classNames.value, "pb-block"]),
             "data-part-id": _ctx.part.partId,
             style: vue.normalizeStyle(style.value)
           }, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.part.children, (child) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$c$1, {
+            _ctx.part.children && _ctx.part.children.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.part.children, (child) => {
+              return vue.openBlock(), vue.createBlock(_sfc_main$b$1, {
                 key: child.partId,
-                part: child
-              }, null, 8, ["part"]);
-            }), 128))
-          ], 14, _hoisted_1$a$1)
+                part: child,
+                "onUpdate:visible": (value) => updateVisible(child.partId, value)
+              }, null, 8, ["part", "onUpdate:visible"]);
+            }), 128)) : vue.createCommentVNode("", true)
+          ], 14, _hoisted_1$9$1), [
+            [vue.vShow, visible.value]
+          ])
         ], 64);
       };
     }
   });
-  const _hoisted_1$9$1 = { class: "pb-block" };
-  const _sfc_main$a$1 = /* @__PURE__ */ vue.defineComponent({
-    __name: "PbLoginDepart",
-    props: {
-      part: {}
-    },
-    setup(__props) {
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9$1, _cache[0] || (_cache[0] = [
-          vue.createElementVNode("div", {
-            class: "pb-widget",
-            style: { "margin": "0 auto" }
-          }, [
-            vue.createElementVNode("div", { class: "pb-login-widget" }, [
-              vue.createElementVNode("h3", null, "Login Design Part")
-            ])
-          ], -1)
-        ]));
-      };
-    }
-  });
   const _hoisted_1$8$1 = ["data-part-id"];
   const _sfc_main$9$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSection",
@@ -6983,6 +6983,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     },
     setup(__props) {
       const props = __props;
+      const visible = vue.ref(true);
+      const childrenVisible = {};
+      const updateVisible = (partId, value) => {
+        childrenVisible[partId] = value;
+        visible.value = props.part.children.some((child) => !(child.partId in childrenVisible) || childrenVisible[child.partId]);
+      };
       const classNames = vue.computed(() => [getPartClassName(props.part), props.part.getClassNames()]);
       const styleTag = vue.computed(() => props.part.getStyleTag());
       const style = vue.computed(() => ({
@@ -6990,28 +6996,27 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         ...props.part.getInlineStyles()
       }));
       return (_ctx, _cache) => {
-        var _a;
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          styleTag.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent("style"), {
+          styleTag.value && visible.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent("style"), {
             key: 0,
             innerHTML: styleTag.value
           }, null, 8, ["innerHTML"])) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", {
+          vue.withDirectives(vue.createElementVNode("div", {
             class: vue.normalizeClass([classNames.value, "pb-section"]),
             "data-part-id": _ctx.part.partId,
             style: vue.normalizeStyle(style.value)
           }, [
-            ((_a = _ctx.part.properties) == null ? void 0 : _a.name) === "Login Design Part" ? (vue.openBlock(), vue.createBlock(_sfc_main$a$1, {
-              key: 0,
-              part: _ctx.part
-            }, null, 8, ["part"])) : _ctx.part.children && _ctx.part.children.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.part.children, (block) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$b$1, {
-                key: block.partId,
+            _ctx.part.children && _ctx.part.children.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.part.children, (child) => {
+              return vue.openBlock(), vue.createBlock(_sfc_main$a$1, {
+                key: child.partId,
                 "is-mobile-page": _ctx.isMobilePage,
-                part: block
-              }, null, 8, ["is-mobile-page", "part"]);
+                part: child,
+                "onUpdate:visible": (value) => updateVisible(child.partId, value)
+              }, null, 8, ["is-mobile-page", "part", "onUpdate:visible"]);
             }), 128)) : vue.createCommentVNode("", true)
-          ], 14, _hoisted_1$8$1)
+          ], 14, _hoisted_1$8$1), [
+            [vue.vShow, visible.value]
+          ])
         ], 64);
       };
     }
@@ -7281,7 +7286,7 @@ ${_html.style}
       partType: "Block",
       partName: "Block",
       className: "pb-block",
-      creator: () => _sfc_main$b$1
+      creator: () => _sfc_main$a$1
     },
     "TextWidget": {
       partType: "Widget",
@@ -12567,40 +12572,6 @@ ${_html.style}
       }
     });
   };
-  const findInsertTargetAndIndex = (pageBuilder, partType) => {
-    var _a, _b, _c;
-    const selected = pageBuilder.context.getSelectedParts()[0];
-    const page = pageBuilder.context.getSelectedPage();
-    if (!page) return {};
-    if (partType === SECTION_TYPE) {
-      const section = pageBuilder.partManager.findNearestSection(selected);
-      return {
-        target: page,
-        index: section ? page.children.indexOf(section) + 1 : (_a = page.children) == null ? void 0 : _a.length
-      };
-    } else if (partType === BLOCK_TYPE) {
-      let section = pageBuilder.partManager.findNearestSection(selected);
-      let block = pageBuilder.partManager.findNearestBlock(selected);
-      if (!section) {
-        section = page.children[page.children.length - 1];
-      }
-      return {
-        target: section,
-        index: block ? section.children.indexOf(block) + 1 : (_b = section.children) == null ? void 0 : _b.length
-      };
-    } else {
-      let block = pageBuilder.partManager.findNearestBlock(selected);
-      let widget = selected.parent.isWidget() ? selected.parent : selected;
-      if (!block) {
-        const section = page.children[page.children.length - 1];
-        block = section.children[section.children.length - 1];
-      }
-      return {
-        target: block,
-        index: widget ? block.children.indexOf(widget) + 1 : (_c = block.children) == null ? void 0 : _c.length
-      };
-    }
-  };
   const createPartWithDefinition = (def, properties) => {
     const part = createPart(def.partType, def.partName, def.initialProperties);
     if (part && properties) {
@@ -13129,7 +13100,7 @@ ${_html.style}
       __publicField(this, "commandId", _PastePartCommand.COMMAND_ID);
     }
     async execute(pageBuilder) {
-      var _a;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i;
       const json = await navigator.clipboard.readText();
       const object = JSON.parse(json);
       if (object.partType === ROOT_TYPE) {
@@ -13197,7 +13168,7 @@ ${_html.style}
           else if (part.partType === WIDGET_TYPE && !pasteType) pasteType = WIDGET_TYPE;
         });
         if (!pasteType) return;
-        const partsToInsert = parts.map((part) => {
+        const partsToPaste = parts.map((part) => {
           if (pasteType === SECTION_TYPE) {
             if (part.partType === SECTION_TYPE) {
               return part;
@@ -13228,11 +13199,76 @@ ${_html.style}
             return part;
           }
         }).filter(bluesea.notNull);
-        const targetType = pasteType === SECTION_TYPE ? SECTION_TYPE : pasteType === BLOCK_TYPE ? BLOCK_TYPE : WIDGET_TYPE;
-        const { target, index } = findInsertTargetAndIndex(pageBuilder, targetType);
-        if (target && index !== void 0 && partsToInsert) {
-          insertParts(pageBuilder, target.partId, index, partsToInsert, false);
+        const selectedPage = pageBuilder.context.getSelectedPage();
+        const selected = pageBuilder.context.getSelectedParts()[0] || selectedPage;
+        if (!selectedPage || !selected) return;
+        let selectedWidget;
+        if (selected && selected.isWidget()) selectedWidget = selected;
+        if (selectedWidget && selectedWidget.isNestedWidget()) selectedWidget = selectedWidget.parent;
+        let selectedBlock;
+        if (selectedWidget) selectedBlock = selectedWidget.parent;
+        else if (selected && selected.isBlock()) selectedBlock = selected;
+        let selectedSection;
+        if (selectedBlock) selectedSection = selectedBlock.parent;
+        else if (selected && selected.isSection()) selectedSection = selected;
+        let targetPartId;
+        let targetIndex = -1;
+        let partsToInsert;
+        if (pasteType === SECTION_TYPE) {
+          targetPartId = selectedPage.partId;
+          targetIndex = selectedSection ? selectedPage.children.indexOf(selectedSection) + 1 : ((_b = selectedPage.children) == null ? void 0 : _b.length) || 0;
+          partsToInsert = partsToPaste;
+        } else if (pasteType === BLOCK_TYPE) {
+          if (selectedSection) {
+            targetPartId = selectedSection.partId;
+            targetIndex = selectedBlock ? selectedSection.children.indexOf(selectedBlock) + 1 : ((_c = selectedSection.children) == null ? void 0 : _c.length) || 0;
+            partsToInsert = partsToPaste;
+          } else if ((_d = selectedPage.children) == null ? void 0 : _d.length) {
+            selectedSection = selectedPage.children[selectedPage.children.length - 1];
+            targetPartId = selectedSection.partId;
+            targetIndex = ((_e = selectedSection.children) == null ? void 0 : _e.length) || 0;
+            partsToInsert = partsToPaste;
+          } else {
+            const newSection = createSection(pageBuilder);
+            if (!newSection) return;
+            newSection.children = partsToPaste;
+            targetPartId = selectedPage.partId;
+            targetIndex = 0;
+            partsToInsert = [newSection];
+          }
+        } else if (pasteType === WIDGET_TYPE) {
+          if (selectedBlock) {
+            targetPartId = selectedBlock.partId;
+            targetIndex = selectedWidget ? selectedBlock.children.indexOf(selectedWidget) + 1 : ((_f = selectedBlock.children) == null ? void 0 : _f.length) || 0;
+            partsToInsert = partsToPaste;
+          } else if (selectedSection || ((_g = selectedPage.children) == null ? void 0 : _g.length)) {
+            if (!selectedSection) selectedSection = selectedPage.children[selectedPage.children.length - 1];
+            if ((_h = selectedSection.children) == null ? void 0 : _h.length) {
+              selectedBlock = selectedSection.children[selectedSection.children.length - 1];
+              targetPartId = selectedBlock.partId;
+              targetIndex = ((_i = selectedBlock.children) == null ? void 0 : _i.length) || 0;
+              partsToInsert = partsToPaste;
+            } else {
+              const newBlock = createBlock(pageBuilder);
+              if (!newBlock) return;
+              newBlock.children = partsToPaste;
+              targetPartId = selectedSection.partId;
+              targetIndex = 0;
+              partsToInsert = [newBlock];
+            }
+          } else {
+            const newBlock = createBlock(pageBuilder);
+            const newSection = createSection(pageBuilder);
+            if (!newBlock || !newSection) return;
+            newSection.children = [newBlock];
+            newBlock.children = partsToPaste;
+            targetPartId = selectedPage.partId;
+            targetIndex = 0;
+            partsToInsert = [newSection];
+          }
         }
+        if (!targetPartId || targetIndex < 0 || !partsToInsert) return;
+        insertParts(pageBuilder, targetPartId, targetIndex, partsToInsert, false);
       }
     }
   };
@@ -13637,8 +13673,8 @@ ${_html.style}
       const pages = this.model.rootPart.children;
       let part = this.selection[0];
       if (!part) return pages && pages[0];
-      while (part.parent) {
-        if (part.parent.isPage()) return part.parent;
+      while (part) {
+        if (part.isPage()) return part;
         part = part.parent;
       }
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@g1cloud/page-builder-editor",
   "private": false,
-  "version": "1.0.0-alpha.43",
+  "version": "1.0.0-alpha.45",
   "engins": {
     "node": ">= 20.0.0"
   },
@@ -16,7 +16,7 @@
   "author": "zag@g1project.net",
   "license": "LicenseRef-LICENSE",
   "peerDependencies": {
-    "@g1cloud/bluesea": "5.0.0-alpha.80",
+    "@g1cloud/bluesea": "5.0.0-alpha.84",
     "vue3-youtube": "^0.1.9"
   },
   "dependencies": {
@@ -30,7 +30,7 @@
     "vue-router": "^4.4.3",
     "vue3-click-away": "^1.2.4",
     "yjs": "^13.6.14",
-    "@g1cloud/page-builder-viewer": "1.0.0-alpha.43"
+    "@g1cloud/page-builder-viewer": "1.0.0-alpha.45"
   },
   "devDependencies": {
     "@types/node": "^20.12.7",