@g1cloud/page-builder-editor 1.0.0-alpha.86 → 1.0.0-alpha.88

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

@@ -5,12 +5,14 @@ export declare const sizeGroup: () => PartPropertyGroup;
 export declare const marginGroup: () => PartPropertyGroup;
 export declare const paddingGroup: () => PartPropertyGroup;
 export declare const commonGroup: () => PartPropertyGroup;
-export declare const layoutGroup: () => PartPropertyGroup;
+export declare const sectionLayoutGroup: () => PartPropertyGroup;
+export declare const blockLayoutGroup: () => PartPropertyGroup;
 export declare const alignGroup: () => PartPropertyGroup;
 export declare const alignItemsGroup: () => PartPropertyGroup;
 export declare const alignSelfGroup: () => PartPropertyGroup;
 export declare const backgroundGroup: () => PartPropertyGroup;
 export declare const borderGroup: () => PartPropertyGroup;
 export declare const hideParentGroup: () => PartPropertyGroup;
-export declare const defaultPropertyGroups: () => PartPropertyGroup[];
+export declare const defaultSectionPropertyGroups: () => PartPropertyGroup[];
+export declare const defaultBlockPropertyGroups: () => PartPropertyGroup[];
 export declare const defaultWidgetPropertyGroups: () => 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, m, n, R, o, S, p, W, q, r, v, x, y, z, A, D, E } from "./index-BkwtXDoX.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, v, x, y, z, A, D, E } from "./index-DUYDGuPh.js";
 export {
   B as BLOCK_TYPE,
   b as Block,

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

@@ -6881,7 +6881,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.rootPart = vue.ref(new RootPart());
     }
   };
-  const _hoisted_1$a$1 = ["data-part-id"];
+  const _hoisted_1$8$1 = ["data-part-id"];
   const _sfc_main$b$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbWidget",
     props: {
@@ -6941,13 +6941,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             part: _ctx.part,
             "onUpdate:visible": updateVisible
           }, null, 40, ["part"])) : vue.createCommentVNode("", true)
-        ], 14, _hoisted_1$a$1)), [
+        ], 14, _hoisted_1$8$1)), [
           [vue.vShow, visible.value]
         ]);
       };
     }
   });
-  const _hoisted_1$9$1 = ["data-part-id"];
   const _sfc_main$a$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbBlock",
     props: {
@@ -6965,6 +6964,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
         emit("update:visible", visible.value, hideParentWhenInvisible);
       };
+      const validTags = ["div", "section", "li"];
+      const tag = vue.computed(() => {
+        var _a;
+        const _tag = (_a = props.part.properties) == null ? void 0 : _a.tag;
+        return validTags.includes(_tag) ? _tag : "div";
+      });
       const classNames = vue.computed(() => [getPartClassName(props.part), props.part.getClassNames()]);
       const style = vue.computed(() => ({
         ...props.part.getStyles(props.isMobilePage),
@@ -6998,25 +7003,29 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         removeStyleTag();
       });
       return (_ctx, _cache) => {
-        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(classNames.value),
-          "data-part-id": _ctx.part.partId,
-          style: vue.normalizeStyle(style.value)
-        }, [
-          _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,
-              "onUpdate:visible": _cache[0] || (_cache[0] = (value, hideParentWhenInvisible) => updateVisible(value, hideParentWhenInvisible))
-            }, null, 8, ["part"]);
-          }), 128)) : vue.createCommentVNode("", true)
-        ], 14, _hoisted_1$9$1)), [
+        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("template", null, [
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tag.value), {
+            class: vue.normalizeClass(classNames.value),
+            "data-part-id": _ctx.part.partId,
+            style: vue.normalizeStyle(style.value)
+          }, {
+            default: vue.withCtx(() => [
+              _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,
+                  "onUpdate:visible": _cache[0] || (_cache[0] = (value, hideParentWhenInvisible) => updateVisible(value, hideParentWhenInvisible))
+                }, null, 8, ["part"]);
+              }), 128)) : vue.createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["class", "data-part-id", "style"]))
+        ], 512)), [
           [vue.vShow, visible.value]
         ]);
       };
     }
   });
-  const _hoisted_1$8$1 = ["data-part-id"];
   const _sfc_main$9$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSection",
     props: {
@@ -7031,6 +7040,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           visible.value = false;
         }
       };
+      const validTags = ["div", "section", "ul"];
+      const tag = vue.computed(() => {
+        var _a;
+        const _tag = (_a = props.part.properties) == null ? void 0 : _a.tag;
+        return validTags.includes(_tag) ? _tag : "div";
+      });
       const classNames = vue.computed(() => [getPartClassName(props.part), props.part.getClassNames()]);
       const style = vue.computed(() => ({
         ...props.part.getStyles(props.isMobilePage),
@@ -7064,27 +7079,32 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         removeStyleTag();
       });
       return (_ctx, _cache) => {
-        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(classNames.value),
-          "data-part-id": _ctx.part.partId,
-          style: vue.normalizeStyle(style.value)
-        }, [
-          _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: child,
-              "onUpdate:visible": _cache[0] || (_cache[0] = (value, hideParentWhenInvisible) => updateVisible(value, hideParentWhenInvisible))
-            }, null, 8, ["is-mobile-page", "part"]);
-          }), 128)) : vue.createCommentVNode("", true)
-        ], 14, _hoisted_1$8$1)), [
+        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("template", null, [
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tag.value), {
+            class: vue.normalizeClass(classNames.value),
+            "data-part-id": _ctx.part.partId,
+            style: vue.normalizeStyle(style.value)
+          }, {
+            default: vue.withCtx(() => [
+              _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: child,
+                  "onUpdate:visible": _cache[0] || (_cache[0] = (value, hideParentWhenInvisible) => updateVisible(value, hideParentWhenInvisible))
+                }, null, 8, ["is-mobile-page", "part"]);
+              }), 128)) : vue.createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["class", "data-part-id", "style"]))
+        ], 512)), [
           [vue.vShow, visible.value]
         ]);
       };
     }
   });
   const _hoisted_1$7$1 = ["href", "target"];
-  const _hoisted_2$4$1 = ["alt", "src"];
+  const _hoisted_2$3$1 = ["alt", "src"];
   const _hoisted_3$k = ["alt", "src"];
   const _hoisted_4$f = ["poster"];
   const _hoisted_5$b = ["src"];
@@ -7143,7 +7163,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 src: ((_d = _ctx.part.properties) == null ? void 0 : _d.media).fileUrl,
                 style: vue.normalizeStyle(style.value),
                 class: "image"
-              }, null, 12, _hoisted_2$4$1)
+              }, null, 12, _hoisted_2$3$1)
             ], 8, _hoisted_1$7$1)) : (vue.openBlock(), vue.createElementBlock("img", {
               key: 1,
               alt: altText.value,
@@ -7168,8 +7188,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const _hoisted_1$6$1 = ["textContent"];
-  const _hoisted_2$3$1 = {
+  const _hoisted_1$6$1 = {
     key: 1,
     class: "placeholder",
     textContent: "Empty Text"
@@ -7183,6 +7202,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     setup(__props) {
       const props = __props;
       const pageBuilder = usePageBuilder();
+      const validTags = ["div", "h1", "h2", "h3", "h4", "h5", "h6", "p", "span"];
+      const tag = vue.computed(() => {
+        var _a;
+        const _tag = (_a = props.part.properties) == null ? void 0 : _a.tag;
+        return validTags.includes(_tag) ? _tag : "div";
+      });
       const text = vue.computed(() => {
         var _a;
         if ((_a = props.part.properties) == null ? void 0 : _a.text) {
@@ -7204,12 +7229,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         };
       });
       return (_ctx, _cache) => {
-        return text.value ? (vue.openBlock(), vue.createElementBlock("div", {
+        return text.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tag.value), {
           key: 0,
           style: vue.normalizeStyle(style.value),
           class: "text",
           textContent: vue.toDisplayString(text.value)
-        }, null, 12, _hoisted_1$6$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3$1)) : vue.createCommentVNode("", true);
+        }, null, 8, ["style", "textContent"])) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6$1)) : vue.createCommentVNode("", true);
       };
     }
   });
@@ -7484,7 +7509,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       vue.onMounted(() => {
         const interval = setInterval(() => {
           try {
-            if (window && window.YT) {
+            if (window && window.YT && window.YT.Player) {
               isYTReady.value = true;
               clearInterval(interval);
             }
@@ -7853,7 +7878,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const _hoisted_1$J = {
+  const _hoisted_1$H = {
     key: 1,
     class: "placeholder",
     textContent: "Empty Widget"
@@ -7874,7 +7899,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             key: child.part.partId,
             part: child.part
           }, null, 8, ["part"]);
-        }), 128)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$J)) : vue.createCommentVNode("", true);
+        }), 128)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$H)) : vue.createCommentVNode("", true);
       };
     }
   });
@@ -8741,9 +8766,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     return target;
   };
   const _sfc_main$E = {};
-  const _hoisted_1$I = { class: "pb-add-widget-button" };
+  const _hoisted_1$G = { class: "pb-add-widget-button" };
   function _sfc_render$1(_ctx, _cache) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$I, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$G, [
       vue.createElementVNode("button", {
         onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("add-widget", $event))
       }, _cache[1] || (_cache[1] = [
@@ -8780,7 +8805,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     if (!mouseTracker) throw Error(MOUSE_TRACKER_NOT_FOUND);
     return mouseTracker;
   };
-  const _hoisted_1$H = ["data-part-id", "draggable"];
+  const _hoisted_1$F = ["data-part-id", "draggable"];
   const _hoisted_2$v = {
     key: 1,
     class: "invalid-widget",
@@ -9250,13 +9275,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             class: "resize-handle",
             onMousedown: resizeChild
           }, null, 32)) : vue.createCommentVNode("", true)
-        ], 14, _hoisted_1$H)), [
+        ], 14, _hoisted_1$F)), [
           [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
         ]);
       };
     }
   });
-  const _hoisted_1$G = ["data-part-id"];
   const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     __name: "PbBlock",
     props: {
@@ -9267,6 +9291,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     setup(__props) {
       const props = __props;
       const pageBuilder = usePageBuilderEditor();
+      const validTags = ["div", "section", "li"];
+      const tag = vue.computed(() => {
+        var _a;
+        const _tag = (_a = props.part.properties) == null ? void 0 : _a.tag;
+        return validTags.includes(_tag) ? _tag : "div";
+      });
       const selected = vue.computed(() => pageBuilder.context.isSelected(props.part));
       const classNames = vue.computed(() => [
         selected.value ? "selected" : "",
@@ -9466,31 +9496,37 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         return index;
       };
       return (_ctx, _cache) => {
-        var _a, _b;
-        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        var _a;
+        return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tag.value), vue.mergeProps({
           ref_key: "partRef",
           ref: partRef,
           class: [classNames.value, "pb-block"],
           "data-part-id": _ctx.part.partId,
           style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
-        }, properties.value), [
-          !_ctx.part.children || ((_b = _ctx.part.children) == null ? void 0 : _b.length) === 0 ? (vue.openBlock(), vue.createBlock(PbAddWidgetButton, {
-            key: 0,
-            onAddWidget: addWidget
-          })) : vue.createCommentVNode("", true),
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.part.children, (child) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$D, {
-              key: child.partId,
-              part: child
-            }, null, 8, ["part"]);
-          }), 128))
-        ], 16, _hoisted_1$G)), [
+        }, properties.value), {
+          default: vue.withCtx(() => {
+            var _a2;
+            return [
+              !_ctx.part.children || ((_a2 = _ctx.part.children) == null ? void 0 : _a2.length) === 0 ? (vue.openBlock(), vue.createBlock(PbAddWidgetButton, {
+                key: 0,
+                onAddWidget: addWidget
+              })) : vue.createCommentVNode("", true),
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.part.children, (child) => {
+                return vue.openBlock(), vue.createBlock(_sfc_main$D, {
+                  key: child.partId,
+                  part: child
+                }, null, 8, ["part"]);
+              }), 128))
+            ];
+          }),
+          _: 1
+        }, 16, ["class", "data-part-id", "style"])), [
           [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
         ]);
       };
     }
   });
-  const _hoisted_1$F = { class: "pb-block" };
+  const _hoisted_1$E = { class: "pb-block" };
   const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     __name: "PbLoginDepart",
     props: {
@@ -9498,7 +9534,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$F, _cache[0] || (_cache[0] = [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, _cache[0] || (_cache[0] = [
           vue.createElementVNode("div", {
             class: "pb-widget",
             style: { "margin": "0 auto" }
@@ -9511,7 +9547,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const _hoisted_1$E = ["data-part-id"];
   const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSection",
     props: {
@@ -9522,6 +9557,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     setup(__props) {
       const props = __props;
       const pageBuilder = usePageBuilderEditor();
+      const validTags = ["div", "section", "ul"];
+      const tag = vue.computed(() => {
+        var _a;
+        const _tag = (_a = props.part.properties) == null ? void 0 : _a.tag;
+        return validTags.includes(_tag) ? _tag : "div";
+      });
       const selected = vue.computed(() => pageBuilder.context.isSelected(props.part));
       const classNames = vue.computed(() => {
         return [
@@ -9645,32 +9686,38 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         return index;
       };
       return (_ctx, _cache) => {
-        var _a, _b, _c;
-        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        var _a;
+        return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tag.value), vue.mergeProps({
           ref_key: "partRef",
           ref: partRef,
           class: [classNames.value, "pb-section"],
           "data-part-id": _ctx.part.partId,
           style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
-        }, properties.value), [
-          ((_b = _ctx.part.properties) == null ? void 0 : _b.sectionType) === "static" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-            ((_c = _ctx.part.properties) == null ? void 0 : _c.name) === "Login Design Part" ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
-              key: 0,
-              part: _ctx.part
-            }, null, 8, ["part"])) : vue.createCommentVNode("", true)
-          ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            _ctx.part.children && _ctx.part.children.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.part.children, (block) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$C, {
-                key: block.partId,
-                "is-mobile-page": _ctx.isMobilePage,
-                part: block
-              }, null, 8, ["is-mobile-page", "part"]);
-            }), 128)) : (vue.openBlock(), vue.createBlock(PbAddWidgetButton, {
-              key: 1,
-              onAddWidget: addWidget
-            }))
-          ], 64))
-        ], 16, _hoisted_1$E)), [
+        }, properties.value), {
+          default: vue.withCtx(() => {
+            var _a2, _b;
+            return [
+              ((_a2 = _ctx.part.properties) == null ? void 0 : _a2.sectionType) === "static" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                ((_b = _ctx.part.properties) == null ? void 0 : _b.name) === "Login Design Part" ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
+                  key: 0,
+                  part: _ctx.part
+                }, null, 8, ["part"])) : vue.createCommentVNode("", true)
+              ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                _ctx.part.children && _ctx.part.children.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.part.children, (block) => {
+                  return vue.openBlock(), vue.createBlock(_sfc_main$C, {
+                    key: block.partId,
+                    "is-mobile-page": _ctx.isMobilePage,
+                    part: block
+                  }, null, 8, ["is-mobile-page", "part"]);
+                }), 128)) : (vue.openBlock(), vue.createBlock(PbAddWidgetButton, {
+                  key: 1,
+                  onAddWidget: addWidget
+                }))
+              ], 64))
+            ];
+          }),
+          _: 1
+        }, 16, ["class", "data-part-id", "style"])), [
           [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
         ]);
       };
@@ -12440,7 +12487,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       ]
     };
   };
-  const layoutGroup = () => {
+  const sectionLayoutGroup = () => {
     return {
       groupName: "layout",
       caption: "pb.prop.layout",
@@ -12461,6 +12508,43 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           propertyName: "gap",
           caption: "pb.prop.gap",
           propertyType: "text"
+        },
+        {
+          propertyName: "tag",
+          caption: "pb.prop.tag",
+          propertyType: "select",
+          params: "div,section,ul"
+        }
+      ]
+    };
+  };
+  const blockLayoutGroup = () => {
+    return {
+      groupName: "layout",
+      caption: "pb.prop.layout",
+      properties: [
+        {
+          propertyName: "direction",
+          caption: "pb.prop.layout",
+          propertyType: "select",
+          params: "vertical,horizontal"
+        },
+        {
+          propertyName: "wrap",
+          caption: "pb.prop.wrap",
+          propertyType: "select",
+          params: "nowrap,wrap"
+        },
+        {
+          propertyName: "gap",
+          caption: "pb.prop.gap",
+          propertyType: "text"
+        },
+        {
+          propertyName: "tag",
+          caption: "pb.prop.tag",
+          propertyType: "select",
+          params: "div,section,li"
         }
       ]
     };
@@ -12605,8 +12689,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       ]
     };
   };
-  const defaultPropertyGroups = () => {
-    return [layoutGroup(), alignGroup(), sizeGroup(), marginGroup(), paddingGroup(), backgroundGroup(), commonGroup()];
+  const defaultSectionPropertyGroups = () => {
+    return [sectionLayoutGroup(), alignGroup(), sizeGroup(), marginGroup(), paddingGroup(), backgroundGroup(), commonGroup()];
+  };
+  const defaultBlockPropertyGroups = () => {
+    return [blockLayoutGroup(), alignGroup(), sizeGroup(), marginGroup(), paddingGroup(), backgroundGroup(), commonGroup()];
   };
   const defaultWidgetPropertyGroups = () => {
     return [alignSelfGroup(), positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup(), hideParentGroup()];
@@ -12807,7 +12894,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       icon: "rectangle",
       className: "pb-section",
       propertyGroups: [
-        ...defaultPropertyGroups()
+        ...defaultSectionPropertyGroups()
       ],
       initialProperties: {
         direction: "horizontal",
@@ -12826,7 +12913,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       icon: "space_dashboard",
       className: "pb-block",
       propertyGroups: [
-        ...defaultPropertyGroups()
+        ...defaultBlockPropertyGroups()
       ],
       initialProperties: {
         direction: "vertical",
@@ -12879,6 +12966,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               caption: "pb.prop.fontColor",
               propertyType: "color",
               params: ""
+            },
+            {
+              propertyName: "tag",
+              caption: "pb.prop.tag",
+              propertyType: "select",
+              params: "div,h1,h2,h3,h4,h5,h6,p,span"
             }
           ]
         },
@@ -12891,7 +12984,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         paddingBottom: "12px",
         paddingLeft: "12px",
         paddingRight: "12px",
-        align: "center"
+        align: "center",
+        tag: "div"
       },
       allowsChild: () => false,
       creator: () => _sfc_main$7$1
@@ -15303,7 +15397,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const canvasStyle = '.pb-page {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  overflow-x: hidden;\n}\n.pb-page .pb-section {\n  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-section .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}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-page .pb-section .pb-block .pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-text-widget .text {\n  color: #333;\n}\n.pb-page .pb-section .pb-block .pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-media-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .image {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .video {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-container-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.pb-page .pb-section .pb-block .mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-page .pb-section .pb-block .pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .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.pb-page * {\n  box-sizing: border-box;\n}\n.pb-viewer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  overflow-y: auto;\n}\n.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 100px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-color: #fff;\n}\n.pb-page .pb-page-content.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n}\n.pb-section:empty {\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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  pointer-events: auto !important;\n  min-height: 50px;\n}\n.pb-widget * {\n  pointer-events: none;\n}\n.pb-widget > .invalid-widget {\n  display: flex;\n  height: 50px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-widget.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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  pointer-events: auto !important;\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  pointer-events: auto !important;\n}\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: var(--color-canvas-frame-bg);\n  overflow: hidden;\n}\n.font-icon, .material-icons-outlined {\n  font-family: "Material Symbols Outlined", monospace;\n  font-size: 1rem;\n  max-width: 1em;\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  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  font-style: normal;\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}';
+  const canvasStyle = '.pb-page {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  overflow-x: hidden;\n}\n.pb-page .pb-section {\n  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-section .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}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-page .pb-section .pb-block .pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-text-widget .text {\n  display: block;\n  color: #333;\n}\n.pb-page .pb-section .pb-block .pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-media-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .image {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .video {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-container-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.pb-page .pb-section .pb-block .mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-page .pb-section .pb-block .pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .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.pb-page * {\n  box-sizing: border-box;\n}\n.pb-viewer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  overflow-y: auto;\n}\n.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 100px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-color: #fff;\n}\n.pb-page .pb-page-content.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n}\n.pb-section:empty {\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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  pointer-events: auto !important;\n  min-height: 50px;\n}\n.pb-widget * {\n  pointer-events: none;\n}\n.pb-widget > .invalid-widget {\n  display: flex;\n  height: 50px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-widget.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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  pointer-events: auto !important;\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  pointer-events: auto !important;\n}\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: var(--color-canvas-frame-bg);\n  overflow: hidden;\n}\n.font-icon, .material-icons-outlined {\n  font-family: "Material Symbols Outlined", monospace;\n  font-size: 1rem;\n  max-width: 1em;\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  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  font-style: normal;\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}';
   const _hoisted_1$h = ["width"];
   const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPageFrame",
@@ -15728,6 +15822,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       key: "pb.prop.fontColor",
       text: "Font Color"
     },
+    {
+      key: "pb.prop.tag",
+      text: "HTML Tag"
+    },
     {
       key: "pb.prop.image",
       text: "Image"
@@ -16062,6 +16160,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       key: "pb.prop.fontColor",
       text: "フォントの色"
     },
+    {
+      key: "pb.prop.tag",
+      text: "HTMLのタグ"
+    },
     {
       key: "pb.prop.image",
       text: "画像"
@@ -16396,6 +16498,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       key: "pb.prop.fontColor",
       text: "텍스트 색상"
     },
+    {
+      key: "pb.prop.tag",
+      text: "HTML 태그"
+    },
     {
       key: "pb.prop.image",
       text: "이미지"
@@ -16730,6 +16836,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       key: "pb.prop.fontColor",
       text: "字体颜色"
     },
+    {
+      key: "pb.prop.tag",
+      text: "HTML 标签"
+    },
     {
       key: "pb.prop.image",
       text: "图片"
@@ -17064,6 +17174,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       key: "pb.prop.fontColor",
       text: "Couleur de police"
     },
+    {
+      key: "pb.prop.tag",
+      text: "balise HTML"
+    },
     {
       key: "pb.prop.image",
       text: "Image"