@g1cloud/page-builder-editor 1.0.0-alpha.53 → 1.0.0-alpha.55

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

@@ -6880,8 +6880,8 @@ 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: {}
@@ -6919,15 +6919,15 @@ 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$b$1), [
+          ], 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: {},
@@ -6962,21 +6962,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             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$c$1, {
+              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$a$1), [
+          ], 14, _hoisted_1$9$1), [
             [vue.vShow, visible.value]
           ])
         ], 64);
       };
     }
   });
-  const _hoisted_1$9$1 = ["data-part-id"];
-  const _sfc_main$a$1 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$8$1 = ["data-part-id"];
+  const _sfc_main$9$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSection",
     props: {
       part: {},
@@ -7008,92 +7008,30 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             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, {
+              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$9$1), [
+          ], 14, _hoisted_1$8$1), [
             [vue.vShow, visible.value]
           ])
         ], 64);
       };
     }
   });
-  const _hoisted_1$8$1 = ["href", "target"];
-  const _hoisted_2$5$1 = ["alt", "src"];
-  const _hoisted_3$1$1 = ["alt", "src"];
-  const _hoisted_4$1$1 = {
-    key: 1,
-    class: "placeholder"
-  };
-  const _sfc_main$9$1 = /* @__PURE__ */ vue.defineComponent({
-    __name: "PbImageWidget",
-    props: {
-      part: {},
-      placeholder: { type: Boolean }
-    },
-    setup(__props) {
-      const props = __props;
-      const pageBuilder = usePageBuilder();
-      const altText = vue.computed(() => {
-        var _a;
-        const media = (_a = props.part.properties) == null ? void 0 : _a.media;
-        if (media && media.altText) {
-          const locale = pageBuilder.getLocale();
-          return media.altText[locale] || "";
-        }
-        return "";
-      });
-      const style = vue.computed(() => {
-        var _a;
-        const media = (_a = props.part.properties) == null ? void 0 : _a.media;
-        if (media.width && media.height) {
-          return {
-            aspectRatio: media.width / media.height
-          };
-        }
-        return {};
-      });
-      return (_ctx, _cache) => {
-        var _a, _b, _c, _d, _e, _f;
-        return ((_a = _ctx.part.properties) == null ? void 0 : _a.media) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          ((_b = _ctx.part.properties) == null ? void 0 : _b.link) ? (vue.openBlock(), vue.createElementBlock("a", {
-            key: 0,
-            href: (_c = _ctx.part.properties) == null ? void 0 : _c.link,
-            target: (_d = _ctx.part.properties) == null ? void 0 : _d.linkTarget
-          }, [
-            vue.createElementVNode("img", {
-              alt: altText.value,
-              src: ((_e = _ctx.part.properties) == null ? void 0 : _e.media).url,
-              style: vue.normalizeStyle(style.value),
-              class: "image"
-            }, null, 12, _hoisted_2$5$1)
-          ], 8, _hoisted_1$8$1)) : (vue.openBlock(), vue.createElementBlock("img", {
-            key: 1,
-            alt: altText.value,
-            src: ((_f = _ctx.part.properties) == null ? void 0 : _f.media).url,
-            style: vue.normalizeStyle(style.value),
-            class: "image"
-          }, null, 12, _hoisted_3$1$1))
-        ], 64)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1$1, _cache[0] || (_cache[0] = [
-          vue.createElementVNode("span", { class: "font-icon" }, "image", -1)
-        ]))) : vue.createCommentVNode("", true);
-      };
-    }
-  });
   const _hoisted_1$7$1 = ["href", "target"];
   const _hoisted_2$4$1 = ["alt", "src"];
-  const _hoisted_3$j = ["alt", "src"];
-  const _hoisted_4$e = ["poster"];
-  const _hoisted_5$a = ["src"];
+  const _hoisted_3$k = ["alt", "src"];
+  const _hoisted_4$f = ["poster"];
+  const _hoisted_5$b = ["src"];
   const _hoisted_6$a = {
     key: 1,
     class: "placeholder"
   };
-  const _hoisted_7$8 = { class: "font-icon" };
+  const _hoisted_7$9 = { class: "font-icon" };
   const _sfc_main$8$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbMediaWidget",
     props: {
@@ -7139,17 +7077,17 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             }, [
               vue.createElementVNode("img", {
                 alt: altText.value,
-                src: ((_d = _ctx.part.properties) == null ? void 0 : _d.media).url,
+                src: ((_d = _ctx.part.properties) == null ? void 0 : _d.media).fileUrl,
                 style: vue.normalizeStyle(style.value),
                 class: "image"
               }, null, 12, _hoisted_2$4$1)
             ], 8, _hoisted_1$7$1)) : (vue.openBlock(), vue.createElementBlock("img", {
               key: 1,
               alt: altText.value,
-              src: ((_e = _ctx.part.properties) == null ? void 0 : _e.media).url,
+              src: ((_e = _ctx.part.properties) == null ? void 0 : _e.media).fileUrl,
               style: vue.normalizeStyle(style.value),
               class: "image"
-            }, null, 12, _hoisted_3$j))
+            }, null, 12, _hoisted_3$k))
           ], 64)) : media.value.mediaType === "Video" ? (vue.openBlock(), vue.createElementBlock("video", {
             key: 1,
             ref: "video",
@@ -7158,11 +7096,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             controls: ""
           }, [
             vue.createElementVNode("source", {
-              src: `${media.value.url}#t=0.01`
-            }, null, 8, _hoisted_5$a)
-          ], 8, _hoisted_4$e)) : vue.createCommentVNode("", true)
+              src: `${media.value.fileUrl}#t=0.01`
+            }, null, 8, _hoisted_5$b)
+          ], 8, _hoisted_4$f)) : vue.createCommentVNode("", true)
         ], 64)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$a, [
-          vue.createElementVNode("span", _hoisted_7$8, vue.toDisplayString(placeholderIcon.value), 1)
+          vue.createElementVNode("span", _hoisted_7$9, vue.toDisplayString(placeholderIcon.value), 1)
         ])) : vue.createCommentVNode("", true);
       };
     }
@@ -7364,13 +7302,13 @@ ${_html.style}
       partType: "Section",
       partName: "Section",
       className: "pb-section",
-      creator: () => _sfc_main$a$1
+      creator: () => _sfc_main$9$1
     },
     "Block": {
       partType: "Block",
       partName: "Block",
       className: "pb-block",
-      creator: () => _sfc_main$b$1
+      creator: () => _sfc_main$a$1
     },
     "TextWidget": {
       partType: "Widget",
@@ -7378,12 +7316,6 @@ ${_html.style}
       className: "pb-text-widget",
       creator: () => _sfc_main$7$1
     },
-    "ImageWidget": {
-      partType: "Widget",
-      partName: "ImageWidget",
-      className: "pb-image-widget",
-      creator: () => _sfc_main$9$1
-    },
     "MediaWidget": {
       partType: "Widget",
       partName: "MediaWidget",
@@ -7582,7 +7514,7 @@ ${_html.style}
             style: vue.normalizeStyle(style.value)
           }, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.part.children, (section) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$a$1, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$9$1, {
                 key: section.partId,
                 "is-mobile-page": _ctx.isMobilePage,
                 part: section
@@ -9157,7 +9089,7 @@ ${_html.style}
       const acceptWidget = (pageBuilder2, target, droppedPart, mouseOffsetX, mouseOffsetY) => {
         const block = props.part;
         let update = void 0;
-        if (droppedPart.partName === "ImageWidget") {
+        if (droppedPart.partName === "MediaWidget") {
           update = [{
             partId: droppedPart.partId,
             properties: {
@@ -9374,12 +9306,12 @@ ${_html.style}
   });
   const _hoisted_1$C = { class: "group-editor group-editor-position" };
   const _hoisted_2$t = { class: "flex-align-center" };
-  const _hoisted_3$i = { class: "title" };
-  const _hoisted_4$d = { class: "flex-grow-1" };
-  const _hoisted_5$9 = { class: "bg-gray-100 py-5 rounded-8" };
+  const _hoisted_3$j = { class: "title" };
+  const _hoisted_4$e = { class: "flex-grow-1" };
+  const _hoisted_5$a = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_6$9 = { class: "text-center" };
-  const _hoisted_7$7 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
-  const _hoisted_8$6 = { class: "text-center" };
+  const _hoisted_7$8 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+  const _hoisted_8$7 = { class: "text-center" };
   const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorPosition",
     props: {
@@ -9406,13 +9338,13 @@ ${_html.style}
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
           vue.createElementVNode("div", _hoisted_2$t, [
-            vue.createElementVNode("div", _hoisted_3$i, [
+            vue.createElementVNode("div", _hoisted_3$j, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.position" }]
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_4$d, [
-              vue.createElementVNode("div", _hoisted_5$9, [
+            vue.createElementVNode("div", _hoisted_4$e, [
+              vue.createElementVNode("div", _hoisted_5$a, [
                 vue.createElementVNode("div", _hoisted_6$9, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": top.value,
@@ -9422,7 +9354,7 @@ ${_html.style}
                     "onUpdate:modelValue": updateTop
                   }, null, 8, ["model-value"])
                 ]),
-                vue.createElementVNode("div", _hoisted_7$7, [
+                vue.createElementVNode("div", _hoisted_7$8, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": left.value,
                     class: "ml-4",
@@ -9444,7 +9376,7 @@ ${_html.style}
                     "onUpdate:modelValue": updateRight
                   }, null, 8, ["model-value"])
                 ]),
-                vue.createElementVNode("div", _hoisted_8$6, [
+                vue.createElementVNode("div", _hoisted_8$7, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": bottom.value,
                     class: "ml-4",
@@ -9462,12 +9394,12 @@ ${_html.style}
   });
   const _hoisted_1$B = { class: "group-editor group-editor-size" };
   const _hoisted_2$s = { class: "flex-align-center" };
-  const _hoisted_3$h = { class: "title" };
-  const _hoisted_4$c = { class: "flex-grow-1 bs-layout-horizontal" };
-  const _hoisted_5$8 = { class: "flex-align-center mt-12" };
+  const _hoisted_3$i = { class: "title" };
+  const _hoisted_4$d = { class: "flex-grow-1 bs-layout-horizontal" };
+  const _hoisted_5$9 = { class: "flex-align-center mt-12" };
   const _hoisted_6$8 = { class: "title" };
-  const _hoisted_7$6 = { class: "flex-grow-1 bs-layout-horizontal" };
-  const _hoisted_8$5 = { class: "flex-align-center mt-12" };
+  const _hoisted_7$7 = { class: "flex-grow-1 bs-layout-horizontal" };
+  const _hoisted_8$6 = { class: "flex-align-center mt-12" };
   const _hoisted_9$3 = { class: "title" };
   const _hoisted_10$3 = { class: "flex-grow-1 bs-layout-horizontal" };
   const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
@@ -9500,12 +9432,12 @@ ${_html.style}
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, [
           vue.createElementVNode("div", _hoisted_2$s, [
-            vue.createElementVNode("div", _hoisted_3$h, [
+            vue.createElementVNode("div", _hoisted_3$i, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.size" }]
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_4$c, [
+            vue.createElementVNode("div", _hoisted_4$d, [
               vue.createVNode(vue.unref(bluesea.BSTextInput), {
                 "model-value": width.value,
                 class: "flex-grow-1 mr-2",
@@ -9520,13 +9452,13 @@ ${_html.style}
               }, null, 8, ["model-value"])
             ])
           ]),
-          vue.createElementVNode("div", _hoisted_5$8, [
+          vue.createElementVNode("div", _hoisted_5$9, [
             vue.createElementVNode("div", _hoisted_6$8, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.maxSize" }]
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_7$6, [
+            vue.createElementVNode("div", _hoisted_7$7, [
               vue.createVNode(vue.unref(bluesea.BSTextInput), {
                 "model-value": maxWidth.value,
                 class: "flex-grow-1 mr-2",
@@ -9541,7 +9473,7 @@ ${_html.style}
               }, null, 8, ["model-value"])
             ])
           ]),
-          vue.createElementVNode("div", _hoisted_8$5, [
+          vue.createElementVNode("div", _hoisted_8$6, [
             vue.createElementVNode("div", _hoisted_9$3, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.minSize" }]
@@ -9724,15 +9656,15 @@ ${_html.style}
   };
   const _hoisted_1$A = { class: "vc-alpha" };
   const _hoisted_2$r = { class: "vc-alpha-checkboard-wrap" };
-  const _hoisted_3$g = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_3$h = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-alpha-picker" },
     null,
     -1
     /* HOISTED */
   );
-  const _hoisted_4$b = [
-    _hoisted_3$g
+  const _hoisted_4$c = [
+    _hoisted_3$h
   ];
   function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_Checkboard = vue.resolveComponent("Checkboard");
@@ -9766,7 +9698,7 @@ ${_html.style}
               class: "vc-alpha-pointer",
               style: vue.normalizeStyle({ left: `${$options.colors.a * 100}%` })
             },
-            _hoisted_4$b,
+            _hoisted_4$c,
             4
             /* STYLE */
           )
@@ -10842,8 +10774,8 @@ ${_html.style}
   };
   const _hoisted_1$z = { class: "vc-editable-input" };
   const _hoisted_2$q = ["aria-labelledby"];
-  const _hoisted_3$f = ["id", "for"];
-  const _hoisted_4$a = { class: "vc-input__desc" };
+  const _hoisted_3$g = ["id", "for"];
+  const _hoisted_4$b = { class: "vc-input__desc" };
   function render$3(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, [
       vue.withDirectives(vue.createElementVNode("input", {
@@ -10860,10 +10792,10 @@ ${_html.style}
         id: $options.labelId,
         for: $props.label,
         class: "vc-input__label"
-      }, vue.toDisplayString($options.labelSpanText), 9, _hoisted_3$f),
+      }, vue.toDisplayString($options.labelSpanText), 9, _hoisted_3$g),
       vue.createElementVNode(
         "span",
-        _hoisted_4$a,
+        _hoisted_4$b,
         vue.toDisplayString($props.desc),
         1
         /* TEXT */
@@ -10954,15 +10886,15 @@ ${_html.style}
     -1
     /* HOISTED */
   );
-  const _hoisted_3$e = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_3$f = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-saturation-circle" },
     null,
     -1
     /* HOISTED */
   );
-  const _hoisted_4$9 = [
-    _hoisted_3$e
+  const _hoisted_4$a = [
+    _hoisted_3$f
   ];
   function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock(
@@ -10984,7 +10916,7 @@ ${_html.style}
             class: "vc-saturation-pointer",
             style: vue.normalizeStyle({ top: $options.pointerTop, left: $options.pointerLeft })
           },
-          _hoisted_4$9,
+          _hoisted_4$a,
           4
           /* STYLE */
         )
@@ -11133,7 +11065,7 @@ ${_html.style}
     -1
     /* HOISTED */
   );
-  const _hoisted_3$d = [
+  const _hoisted_3$e = [
     _hoisted_2$o
   ];
   function render$1(_ctx, _cache, $props, $setup, $data, $options) {
@@ -11161,7 +11093,7 @@ ${_html.style}
               style: vue.normalizeStyle({ top: $options.pointerTop, left: $options.pointerLeft }),
               role: "presentation"
             },
-            _hoisted_3$d,
+            _hoisted_3$e,
             4
             /* STYLE */
           )
@@ -11263,15 +11195,15 @@ ${_html.style}
   };
   const _hoisted_1$w = { class: "vc-sketch-saturation-wrap" };
   const _hoisted_2$n = { class: "vc-sketch-controls" };
-  const _hoisted_3$c = { class: "vc-sketch-sliders" };
-  const _hoisted_4$8 = { class: "vc-sketch-hue-wrap" };
-  const _hoisted_5$7 = {
+  const _hoisted_3$d = { class: "vc-sketch-sliders" };
+  const _hoisted_4$9 = { class: "vc-sketch-hue-wrap" };
+  const _hoisted_5$8 = {
     key: 0,
     class: "vc-sketch-alpha-wrap"
   };
   const _hoisted_6$7 = { class: "vc-sketch-color-wrap" };
-  const _hoisted_7$5 = ["aria-label"];
-  const _hoisted_8$4 = {
+  const _hoisted_7$6 = ["aria-label"];
+  const _hoisted_8$5 = {
     key: 0,
     class: "vc-sketch-field"
   };
@@ -11311,14 +11243,14 @@ ${_html.style}
           }, null, 8, ["value", "onChange"])
         ]),
         vue.createElementVNode("div", _hoisted_2$n, [
-          vue.createElementVNode("div", _hoisted_3$c, [
-            vue.createElementVNode("div", _hoisted_4$8, [
+          vue.createElementVNode("div", _hoisted_3$d, [
+            vue.createElementVNode("div", _hoisted_4$9, [
               vue.createVNode(_component_Hue, {
                 value: _ctx.colors,
                 onChange: $options.childChange
               }, null, 8, ["value", "onChange"])
             ]),
-            !$props.disableAlpha ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$7, [
+            !$props.disableAlpha ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$8, [
               vue.createVNode(_component_Alpha, {
                 value: _ctx.colors,
                 onChange: $options.childChange
@@ -11330,11 +11262,11 @@ ${_html.style}
               "aria-label": `Current color is ${$options.activeColor}`,
               class: "vc-sketch-active-color",
               style: vue.normalizeStyle({ background: $options.activeColor })
-            }, null, 12, _hoisted_7$5),
+            }, null, 12, _hoisted_7$6),
             vue.createVNode(_component_Checkboard)
           ])
         ]),
-        !$props.disableFields ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$4, [
+        !$props.disableFields ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$5, [
           vue.createCommentVNode(" rgba "),
           vue.createElementVNode("div", _hoisted_9$2, [
             vue.createVNode(_component_EdIn, {
@@ -11516,9 +11448,9 @@ ${_html.style}
   const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", _sfc_render]]);
   const _hoisted_1$u = { class: "group-editor group-editor-background" };
   const _hoisted_2$l = { class: "flex-align-center" };
-  const _hoisted_3$b = { class: "title" };
-  const _hoisted_4$7 = { class: "bs-layout-horizontal" };
-  const _hoisted_5$6 = { class: "color" };
+  const _hoisted_3$c = { class: "title" };
+  const _hoisted_4$8 = { class: "bs-layout-horizontal" };
+  const _hoisted_5$7 = { class: "color" };
   const _hoisted_6$6 = { class: "image" };
   const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorBackground",
@@ -11546,8 +11478,8 @@ ${_html.style}
         const imageProvider = pageBuilder.getProvider("imageProvider");
         if (imageProvider) {
           imageProvider({ modal, mediaTypes: ["Image"] }, (media) => {
-            if (media.mediaType === "Image") {
-              updatePropertyValue({ backgroundImage: media.url });
+            if (media.mediaType === "Image" && media.fileUrl) {
+              updatePropertyValue({ backgroundImage: media.fileUrl });
             }
           });
         }
@@ -11555,13 +11487,13 @@ ${_html.style}
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
           vue.createElementVNode("div", _hoisted_2$l, [
-            vue.createElementVNode("div", _hoisted_3$b, [
+            vue.createElementVNode("div", _hoisted_3$c, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.background" }]
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_4$7, [
-              vue.createElementVNode("div", _hoisted_5$6, [
+            vue.createElementVNode("div", _hoisted_4$8, [
+              vue.createElementVNode("div", _hoisted_5$7, [
                 vue.createVNode(PbColorPicker, {
                   value: color.value,
                   "hide-delete": "",
@@ -11594,12 +11526,12 @@ ${_html.style}
   const BottomRightCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%20transform='rotate(90)'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
   const _hoisted_1$t = { class: "group-editor group-editor-border" };
   const _hoisted_2$k = { class: "flex-align-center" };
-  const _hoisted_3$a = { class: "title" };
-  const _hoisted_4$6 = { class: "" };
-  const _hoisted_5$5 = { class: "sub-title" };
+  const _hoisted_3$b = { class: "title" };
+  const _hoisted_4$7 = { class: "" };
+  const _hoisted_5$6 = { class: "sub-title" };
   const _hoisted_6$5 = { class: "color" };
-  const _hoisted_7$4 = { class: "mt-8" };
-  const _hoisted_8$3 = { class: "sub-title" };
+  const _hoisted_7$5 = { class: "mt-8" };
+  const _hoisted_8$4 = { class: "sub-title" };
   const _hoisted_9$1 = { class: "flex-grow-1 mt-4" };
   const _hoisted_10$1 = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_11 = { class: "text-center" };
@@ -11651,13 +11583,13 @@ ${_html.style}
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
           vue.createElementVNode("div", _hoisted_2$k, [
-            vue.createElementVNode("div", _hoisted_3$a, [
+            vue.createElementVNode("div", _hoisted_3$b, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.border" }]
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_4$6, [
-              vue.createElementVNode("div", _hoisted_5$5, [
+            vue.createElementVNode("div", _hoisted_4$7, [
+              vue.createElementVNode("div", _hoisted_5$6, [
                 vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                   [vue.unref(bluesea.vT), { key: "pb.prop.borderColor" }]
                 ])
@@ -11680,8 +11612,8 @@ ${_html.style}
                 }, null, 8, ["model-value"])
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_7$4, [
-              vue.createElementVNode("div", _hoisted_8$3, [
+            vue.createElementVNode("div", _hoisted_7$5, [
+              vue.createElementVNode("div", _hoisted_8$4, [
                 vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                   [vue.unref(bluesea.vT), { key: "pb.prop.borderWidth" }]
                 ])
@@ -11781,12 +11713,12 @@ ${_html.style}
   });
   const _hoisted_1$s = { class: "group-editor group-editor-margin" };
   const _hoisted_2$j = { class: "flex-align-center" };
-  const _hoisted_3$9 = { class: "title" };
-  const _hoisted_4$5 = { class: "flex-grow-1" };
-  const _hoisted_5$4 = { class: "bg-gray-100 py-5 rounded-8" };
+  const _hoisted_3$a = { class: "title" };
+  const _hoisted_4$6 = { class: "flex-grow-1" };
+  const _hoisted_5$5 = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_6$4 = { class: "text-center" };
-  const _hoisted_7$3 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
-  const _hoisted_8$2 = { class: "text-center" };
+  const _hoisted_7$4 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+  const _hoisted_8$3 = { class: "text-center" };
   const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorMargin",
     props: {
@@ -11813,13 +11745,13 @@ ${_html.style}
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
           vue.createElementVNode("div", _hoisted_2$j, [
-            vue.createElementVNode("div", _hoisted_3$9, [
+            vue.createElementVNode("div", _hoisted_3$a, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.margin" }]
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_4$5, [
-              vue.createElementVNode("div", _hoisted_5$4, [
+            vue.createElementVNode("div", _hoisted_4$6, [
+              vue.createElementVNode("div", _hoisted_5$5, [
                 vue.createElementVNode("div", _hoisted_6$4, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": top.value,
@@ -11829,7 +11761,7 @@ ${_html.style}
                     "onUpdate:modelValue": updateTop
                   }, null, 8, ["model-value"])
                 ]),
-                vue.createElementVNode("div", _hoisted_7$3, [
+                vue.createElementVNode("div", _hoisted_7$4, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": left.value,
                     class: "ml-4",
@@ -11851,7 +11783,7 @@ ${_html.style}
                     "onUpdate:modelValue": updateRight
                   }, null, 8, ["model-value"])
                 ]),
-                vue.createElementVNode("div", _hoisted_8$2, [
+                vue.createElementVNode("div", _hoisted_8$3, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": bottom.value,
                     class: "ml-4",
@@ -11869,12 +11801,12 @@ ${_html.style}
   });
   const _hoisted_1$r = { class: "group-editor group-editor-padding" };
   const _hoisted_2$i = { class: "flex-align-center" };
-  const _hoisted_3$8 = { class: "title" };
-  const _hoisted_4$4 = { class: "flex-grow-1" };
-  const _hoisted_5$3 = { class: "bg-gray-100 py-5 rounded-8" };
+  const _hoisted_3$9 = { class: "title" };
+  const _hoisted_4$5 = { class: "flex-grow-1" };
+  const _hoisted_5$4 = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_6$3 = { class: "text-center" };
-  const _hoisted_7$2 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
-  const _hoisted_8$1 = { class: "text-center" };
+  const _hoisted_7$3 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+  const _hoisted_8$2 = { class: "text-center" };
   const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorPadding",
     props: {
@@ -11901,13 +11833,13 @@ ${_html.style}
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
           vue.createElementVNode("div", _hoisted_2$i, [
-            vue.createElementVNode("div", _hoisted_3$8, [
+            vue.createElementVNode("div", _hoisted_3$9, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.padding" }]
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_4$4, [
-              vue.createElementVNode("div", _hoisted_5$3, [
+            vue.createElementVNode("div", _hoisted_4$5, [
+              vue.createElementVNode("div", _hoisted_5$4, [
                 vue.createElementVNode("div", _hoisted_6$3, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": top.value,
@@ -11917,7 +11849,7 @@ ${_html.style}
                     "onUpdate:modelValue": updateTop
                   }, null, 8, ["model-value"])
                 ]),
-                vue.createElementVNode("div", _hoisted_7$2, [
+                vue.createElementVNode("div", _hoisted_7$3, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": left.value,
                     class: "ml-4",
@@ -11939,7 +11871,7 @@ ${_html.style}
                     "onUpdate:modelValue": updateRight
                   }, null, 8, ["model-value"])
                 ]),
-                vue.createElementVNode("div", _hoisted_8$1, [
+                vue.createElementVNode("div", _hoisted_8$2, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": bottom.value,
                     class: "ml-4",
@@ -12321,10 +12253,15 @@ ${_html.style}
   });
   const _hoisted_1$q = { class: "group-editor group-editor-media" };
   const _hoisted_2$h = { class: "title" };
-  const _hoisted_3$7 = { class: "title mt-12" };
-  const _hoisted_4$3 = { class: "title mt-12" };
-  const _hoisted_5$2 = { class: "title mt-12" };
+  const _hoisted_3$8 = {
+    key: 0,
+    class: "title mt-12"
+  };
+  const _hoisted_4$4 = { class: "mt-8" };
+  const _hoisted_5$3 = { class: "title mt-12" };
   const _hoisted_6$2 = { class: "title mt-12" };
+  const _hoisted_7$2 = { class: "title mt-12" };
+  const _hoisted_8$1 = { class: "title mt-12" };
   const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorMedia",
     props: {
@@ -12371,8 +12308,13 @@ ${_html.style}
         var _a, _b;
         return (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b.thumbnail;
       });
+      const copyUrl = () => {
+        if (!media.value || !media.value.fileUrl) return;
+        navigator.clipboard.writeText(media.value.fileUrl);
+        bluesea.showNotification({ key: "pb.prop.copied" });
+      };
       return (_ctx, _cache) => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
           vue.createElementVNode("div", _hoisted_2$h, [
             vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
@@ -12380,12 +12322,33 @@ ${_html.style}
             ])
           ]),
           vue.createElementVNode("div", null, [
-            vue.withDirectives(vue.createElementVNode("button", { onClick: selectMedia }, null, 512), [
+            vue.withDirectives(vue.createElementVNode("button", {
+              class: "select-button",
+              onClick: selectMedia
+            }, null, 512), [
               [vue.unref(bluesea.vT), { key: "pb.prop.selectMedia" }]
             ])
           ]),
-          ((_a = media.value) == null ? void 0 : _a.mediaType) === "Image" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-            vue.createElementVNode("div", _hoisted_3$7, [
+          ((_a = media.value) == null ? void 0 : _a.fileUrl) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$8, [
+            _cache[4] || (_cache[4] = vue.createElementVNode("label", null, "URL", -1)),
+            vue.createElementVNode("div", _hoisted_4$4, [
+              vue.createTextVNode(vue.toDisplayString((_b = media.value) == null ? void 0 : _b.fileUrl) + " ", 1),
+              vue.withDirectives(vue.createVNode(vue.unref(bluesea.BSButton), {
+                class: "border-0 mb-2 pl-0",
+                "left-icon": "content_copy",
+                onClick: copyUrl
+              }, null, 512), [
+                [
+                  vue.unref(bluesea.vT),
+                  { key: "pb.button.copy" },
+                  void 0,
+                  { title: true }
+                ]
+              ])
+            ])
+          ])) : vue.createCommentVNode("", true),
+          ((_c = media.value) == null ? void 0 : _c.mediaType) === "Image" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+            vue.createElementVNode("div", _hoisted_5$3, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.altText" }]
               ])
@@ -12398,7 +12361,7 @@ ${_html.style}
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => updateProperty({ altText: value }))
               }, null, 8, ["locales", "model-value"])
             ]),
-            vue.createElementVNode("div", _hoisted_4$3, [
+            vue.createElementVNode("div", _hoisted_6$2, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.link" }]
               ])
@@ -12410,7 +12373,7 @@ ${_html.style}
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = (value) => updateProperty({ link: value }))
               }, null, 8, ["model-value"])
             ]),
-            vue.createElementVNode("div", _hoisted_5$2, [
+            vue.createElementVNode("div", _hoisted_7$2, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.linkTarget" }]
               ])
@@ -12423,8 +12386,8 @@ ${_html.style}
               }, null, 8, ["model-value"])
             ])
           ], 64)) : vue.createCommentVNode("", true),
-          ((_b = media.value) == null ? void 0 : _b.mediaType) === "Video" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createElementVNode("div", _hoisted_6$2, [
+          ((_d = media.value) == null ? void 0 : _d.mediaType) === "Video" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+            vue.createElementVNode("div", _hoisted_8$1, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.thumbnail" }]
               ])
@@ -12570,50 +12533,6 @@ ${_html.style}
       allowsChild: () => false,
       creator: () => _sfc_main$7$1
     },
-    {
-      partType: "Widget",
-      partName: "ImageWidget",
-      caption: "Image",
-      icon: "image",
-      className: "pb-image-widget",
-      propertyGroups: [
-        {
-          groupName: "Image",
-          caption: "Image",
-          properties: [
-            {
-              propertyName: "image",
-              caption: "pb.prop.image",
-              propertyType: "image",
-              params: ""
-            },
-            {
-              propertyName: "altText",
-              caption: "pb.prop.altText",
-              propertyType: "text",
-              params: "",
-              multiLang: true
-            },
-            {
-              propertyName: "link",
-              caption: "pb.prop.link",
-              propertyType: "text",
-              params: ""
-            },
-            {
-              propertyName: "linkTarget",
-              caption: "pb.prop.linkTarget",
-              propertyType: "text",
-              params: ""
-            }
-          ]
-        },
-        ...defaultWidgetPropertyGroups()
-      ],
-      initialProperties: {},
-      allowsChild: () => false,
-      creator: () => _sfc_main$9$1
-    },
     {
       partType: "Widget",
       partName: "MediaWidget",
@@ -12862,7 +12781,7 @@ ${_html.style}
       bind: args,
       on: {
         selectHandler: (part) => {
-          if (["ImageWidget"].includes(part.partName)) {
+          if (["MediaWidget"].includes(part.partName)) {
             const imageProvider = args.pageBuilder.getProvider("imageProvider");
             if (imageProvider) {
               imageProvider({ modal }, (media) => {
@@ -13347,7 +13266,7 @@ ${_html.style}
     if (!selected) return;
     const newWidget = createPartWithDefinition(def, { image: args.image });
     if (!newWidget) return;
-    if (selected.isWidget() && def.partName === "ImageWidget") {
+    if (selected.isWidget() && def.partName === "MediaWidget") {
       if (!newWidget.properties) newWidget.properties = {};
       newWidget.properties.left = "25%";
       newWidget.properties.top = "25%";
@@ -14489,7 +14408,7 @@ ${_html.style}
   });
   const _hoisted_1$n = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
   const _hoisted_2$g = { class: "bs-layout-horizontal align-items-center" };
-  const _hoisted_3$6 = { class: "mr-8" };
+  const _hoisted_3$7 = { class: "mr-8" };
   const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     __name: "PbToolbar",
     props: {
@@ -14565,7 +14484,7 @@ ${_html.style}
             }, null, 8, ["modelValue"])
           ]),
           _cache[2] || (_cache[2] = vue.createElementVNode("div", { class: "flex-grow-1" }, null, -1)),
-          vue.createElementVNode("div", _hoisted_3$6, [
+          vue.createElementVNode("div", _hoisted_3$7, [
             _ctx.plugin ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent((_a = _ctx.plugin) == null ? void 0 : _a.component), vue.mergeProps({ key: 0 }, (_b = _ctx.plugin) == null ? void 0 : _b.bind, vue.toHandlers((_c = _ctx.plugin) == null ? void 0 : _c.on)), null, 16)) : vue.createCommentVNode("", true)
           ])
         ]);
@@ -14968,7 +14887,7 @@ ${_html.style}
       };
     }
   });
-  const canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\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\n.pb-page .pb-page-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\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\n.pb-page * {\n  box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\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\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\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  background-color: #fff;\n}\n\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\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\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\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\n.pb-section-static .pb-widget {\n  outline: none;\n}\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\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\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\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\n.pb-widget * {\n  pointer-events: none;\n}\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\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\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\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}\n\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-text-widget .text {\n  color: #333;\n}\n\n.pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-image-widget {\n  width: 100%;\n}\n\n.pb-image-widget .image {\n  width: 100%;\n}\n\n.pb-image-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-image-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-media-widget {\n  width: 100%;\n}\n\n.pb-media-widget .image {\n  width: 100%;\n}\n\n.pb-media-widget .video {\n  width: 100%;\n}\n\n.pb-media-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-media-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-youtube-widget {\n  width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-container-widget {\n  width: 100%;\n}\n\n.pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n\n.pb-login-widget h3 {\n  padding: 0;\n  margin: 0;\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: #aaa;\n  overflow: hidden;\n}\n\n.font-icon, .material-icons-outlined {\n  font-family: "Material Symbols Outlined", monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\n\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\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\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\n.pb-add-section-handle.bottom {\n  bottom: -32px;\n}\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\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-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\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\n.pb-page .pb-page-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\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\n.pb-page * {\n  box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\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\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\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  background-color: #fff;\n}\n\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\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\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\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\n.pb-section-static .pb-widget {\n  outline: none;\n}\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\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\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\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\n.pb-widget * {\n  pointer-events: none;\n}\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\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\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\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}\n\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-text-widget .text {\n  color: #333;\n}\n\n.pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-media-widget {\n  width: 100%;\n}\n\n.pb-media-widget .image {\n  width: 100%;\n}\n\n.pb-media-widget .video {\n  width: 100%;\n}\n\n.pb-media-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-media-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-youtube-widget {\n  width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-container-widget {\n  width: 100%;\n}\n\n.pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n\n.pb-login-widget h3 {\n  padding: 0;\n  margin: 0;\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: #aaa;\n  overflow: hidden;\n}\n\n.font-icon, .material-icons-outlined {\n  font-family: "Material Symbols Outlined", monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\n\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\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\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\n.pb-add-section-handle.bottom {\n  bottom: -32px;\n}\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\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$g = ["width"];
   const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPageFrame",
@@ -15462,6 +15381,10 @@ ${_html.style}
     {
       key: "pb.prop.hideParentWhenInvisible",
       text: "Hide block and section when invisible"
+    },
+    {
+      key: "pb.prop.copied",
+      text: "Copied."
     }
   ];
   const jaTexts = [
@@ -15788,6 +15711,10 @@ ${_html.style}
     {
       key: "pb.prop.hideParentWhenInvisible",
       text: "非表示の場合はブロックとセクションも隠す"
+    },
+    {
+      key: "pb.prop.copied",
+      text: "コピーされました。"
     }
   ];
   const koTexts = [
@@ -16114,6 +16041,10 @@ ${_html.style}
     {
       key: "pb.prop.hideParentWhenInvisible",
       text: "블록과 섹션도 함께 숨김처리하기"
+    },
+    {
+      key: "pb.prop.copied",
+      text: "복사되었습니다."
     }
   ];
   const zhTexts = [
@@ -16440,6 +16371,10 @@ ${_html.style}
     {
       key: "pb.prop.hideParentWhenInvisible",
       text: "不可见时隐藏区块和区域"
+    },
+    {
+      key: "pb.prop.copied",
+      text: "已复制。"
     }
   ];
   bluesea.i18n.addTexts("en", enTexts);
@@ -16517,7 +16452,7 @@ ${_html.style}
   });
   const _hoisted_1$d = { class: "property-editor property-editor-readonly-text" };
   const _hoisted_2$c = { class: "title" };
-  const _hoisted_3$5 = ["textContent"];
+  const _hoisted_3$6 = ["textContent"];
   const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorReadonlyText",
     props: {
@@ -16535,7 +16470,7 @@ ${_html.style}
           vue.createElementVNode("div", null, [
             vue.createElementVNode("div", {
               textContent: vue.toDisplayString(_ctx.value)
-            }, null, 8, _hoisted_3$5)
+            }, null, 8, _hoisted_3$6)
           ])
         ]);
       };
@@ -16784,7 +16719,7 @@ ${_html.style}
   }, Symbol.toStringTag, { value: "Module" }));
   const _hoisted_1$7 = { class: "property-editor property-editor-color" };
   const _hoisted_2$7 = { class: "title" };
-  const _hoisted_3$4 = { class: "bs-layout-horizontal flex-align-center color" };
+  const _hoisted_3$5 = { class: "bs-layout-horizontal flex-align-center color" };
   const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorColor",
     props: {
@@ -16811,7 +16746,7 @@ ${_html.style}
               [vue.unref(bluesea.vT), { key: _ctx.property.caption }]
             ])
           ]),
-          vue.createElementVNode("div", _hoisted_3$4, [
+          vue.createElementVNode("div", _hoisted_3$5, [
             vue.createVNode(PbColorPicker, {
               value: _ctx.value,
               "hide-delete": "",
@@ -16836,39 +16771,102 @@ ${_html.style}
     __proto__: null,
     default: _sfc_main$7
   }, Symbol.toStringTag, { value: "Module" }));
-  const _hoisted_1$6 = { class: "property-editor property-editor-image flex-align-center" };
+  const _hoisted_1$6 = { class: "property-editor property-editor-image" };
   const _hoisted_2$6 = { class: "title" };
+  const _hoisted_3$4 = {
+    key: 0,
+    class: "title mt-12"
+  };
+  const _hoisted_4$3 = { class: "mt-8" };
+  const _hoisted_5$2 = { class: "title mt-12" };
   const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorImage",
     props: {
       property: {},
       value: {}
     },
-    emits: ["update-property-value"],
-    setup(__props, { emit: __emit }) {
+    setup(__props) {
+      const props = __props;
       const pageBuilder = usePageBuilderEditor();
+      const part = pageBuilder.context.getSelectedParts();
       const modal = bluesea.useModal();
-      const emit = __emit;
-      const selectImage = () => {
+      const selectMedia = () => {
         const imageProvider = pageBuilder.getProvider("imageProvider");
         if (imageProvider) {
-          imageProvider({ modal }, (media) => {
-            emit("update-property-value", { media, altText: media.altText });
+          imageProvider({ modal, mediaTypes: ["Image"] }, (media2) => {
+            updateProperty({ [props.property.propertyName]: media2 });
           });
         }
       };
+      const updateProperty = (properties) => {
+        pageBuilder.commandRegistry.executeCommand(ChangePropertyCommand.COMMAND_ID, { properties, targetParts: part });
+      };
+      const updateAltText = (value) => {
+        updateProperty({ [props.property.propertyName]: { ...media.value, altText: value } });
+      };
+      const locales = vue.computed(() => pageBuilder.getLocales());
+      const media = vue.computed(() => {
+        var _a, _b;
+        return (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b[props.property.propertyName];
+      });
+      const altText = vue.computed(() => {
+        var _a;
+        return (_a = media.value) == null ? void 0 : _a.altText;
+      });
+      const copyUrl = () => {
+        if (!media.value || !media.value.fileUrl) return;
+        navigator.clipboard.writeText(media.value.fileUrl);
+        bluesea.showNotification({ key: "pb.prop.copied" });
+      };
       return (_ctx, _cache) => {
+        var _a, _b, _c;
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
           vue.createElementVNode("div", _hoisted_2$6, [
             vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
-              [vue.unref(bluesea.vT), { key: _ctx.property.caption }]
+              [vue.unref(bluesea.vT), { key: _ctx.property.caption || "pb.prop.image" }]
             ])
           ]),
           vue.createElementVNode("div", null, [
-            vue.withDirectives(vue.createElementVNode("button", { onClick: selectImage }, null, 512), [
-              [vue.unref(bluesea.vT), { key: "pb.prop.selectImage" }]
+            vue.withDirectives(vue.createElementVNode("button", {
+              class: "select-button",
+              onClick: selectMedia
+            }, null, 512), [
+              [vue.unref(bluesea.vT), { key: "pb.prop.selectMedia" }]
             ])
-          ])
+          ]),
+          ((_a = media.value) == null ? void 0 : _a.fileUrl) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$4, [
+            _cache[0] || (_cache[0] = vue.createElementVNode("label", null, "URL", -1)),
+            vue.createElementVNode("div", _hoisted_4$3, [
+              vue.createTextVNode(vue.toDisplayString((_b = media.value) == null ? void 0 : _b.fileUrl) + " ", 1),
+              vue.withDirectives(vue.createVNode(vue.unref(bluesea.BSButton), {
+                class: "border-0 mb-2 pl-0",
+                "left-icon": "content_copy",
+                onClick: copyUrl
+              }, null, 512), [
+                [
+                  vue.unref(bluesea.vT),
+                  { key: "pb.menu.copy" },
+                  void 0,
+                  { title: true }
+                ]
+              ])
+            ])
+          ])) : vue.createCommentVNode("", true),
+          ((_c = media.value) == null ? void 0 : _c.mediaType) === "Image" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+            vue.createElementVNode("div", _hoisted_5$2, [
+              vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
+                [vue.unref(bluesea.vT), { key: "pb.prop.altText" }]
+              ])
+            ]),
+            vue.createElementVNode("div", null, [
+              vue.createVNode(vue.unref(bluesea.BSMultiLangTextInput), {
+                locales: locales.value,
+                "model-value": altText.value,
+                width: "100%",
+                "onUpdate:modelValue": updateAltText
+              }, null, 8, ["locales", "model-value"])
+            ])
+          ], 64)) : vue.createCommentVNode("", true)
         ]);
       };
     }
@@ -17397,7 +17395,6 @@ ${_html.tags}` : "";
   exports2.PbCustomWidget = _sfc_main$F;
   exports2.PbHtmlWidget = _sfc_main$6$1;
   exports2.PbIframeWidget = _sfc_main$5$1;
-  exports2.PbImageWidget = _sfc_main$9$1;
   exports2.PbMediaWidget = _sfc_main$8$1;
   exports2.PbTextWidget = _sfc_main$7$1;
   exports2.PbYoutubeWidget = _sfc_main$4$1;