@g1cloud/page-builder-editor 1.0.0-alpha.74 → 1.0.0-alpha.75

package/dist/{index-CBy4UB6h.js → index-Dlp_xq19.js}

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { ref, defineComponent, computed, openBlock, createElementBlock, Fragment, createElementVNode, normalizeStyle, createCommentVNode, toDisplayString, onMounted, onBeforeUnmount, createBlock as createBlock$1, resolveDynamicComponent, unref, provide, inject, watch, renderList, normalizeProps, mergeProps, normalizeClass, withDirectives, vShow, reactive, defineAsyncComponent, createVNode, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, createTextVNode, markRaw, toHandlers, Teleport } from "vue";
+import { ref, defineComponent, computed, openBlock, createElementBlock, Fragment, createElementVNode, normalizeStyle, createCommentVNode, toDisplayString, watch, onMounted, onBeforeUnmount, createBlock as createBlock$1, resolveDynamicComponent, unref, provide, inject, renderList, normalizeProps, mergeProps, normalizeClass, withDirectives, vShow, reactive, defineAsyncComponent, createVNode, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, createTextVNode, markRaw, toHandlers, Teleport } from "vue";
 import { notNull, vT, BSTextInput, vClickOutside, useModal, BSButton, BSMultiLangTextInput, showNotification, BSSelect, BSTree, useContextMenu, i18n } from "@g1cloud/bluesea";
 import YouTube from "vue3-youtube";
 const create$5 = () => /* @__PURE__ */ new Map();
@@ -7215,28 +7215,132 @@ const _sfc_main$5$1 = /* @__PURE__ */ defineComponent({
       if (!url2) return;
       if (typeof url2 !== "object") return;
       const locale = pageBuilder.getLocale();
-      return url2[locale];
+      let _url = url2[locale];
+      if (_url) {
+        const timestamp = (/* @__PURE__ */ new Date()).getTime();
+        _url = _url.indexOf("?") >= 0 ? `${_url}&` : `${_url}?`;
+        _url = `${_url}&widgetId=${props.part.partId}`;
+        _url = `${_url}&${timestamp}`;
+        return _url;
+      }
+      return "";
     });
-    const style = computed(() => ({
+    const contentHeight = ref(0);
+    const style = ref({
       width: "100%",
-      height: `${height.value}px`
-    }));
-    const height = ref(200);
-    const updateHeight = (event) => {
-      console.log(event);
-      if (event.data && event.data.height) {
-        height.value = event.data.height;
+      height: ""
+    });
+    const iframeHeight = ref(0);
+    watch(
+      () => {
+        var _a;
+        return [iframeHeight.value, contentHeight.value, (_a = props.part.properties) == null ? void 0 : _a.height];
+      },
+      () => {
+        var _a;
+        if (iframeHeight.value) {
+          style.value.height = `${iframeHeight.value}px`;
+        } else if (contentHeight.value) {
+          style.value.height = `${contentHeight.value}px`;
+        } else if ((_a = props.part.properties) == null ? void 0 : _a.height) {
+          style.value.height = props.part.properties.height;
+        } else {
+          style.value.height = "200px";
+        }
+      },
+      { immediate: true }
+    );
+    const updateHeightByMessage = (event) => {
+      if (event.data && event.data.widgetId === props.part.partId && event.data.height) {
+        contentHeight.value = event.data.height;
+      }
+    };
+    onMounted(() => {
+      window.addEventListener("message", updateHeightByMessage);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("message", updateHeightByMessage);
+    });
+    const iframeRef = ref();
+    let resizeObserver;
+    let mutationObserver;
+    let setupInterval;
+    function getContentHeight(doc) {
+      const body = doc.body;
+      const html = doc.documentElement;
+      const scrollH = Math.max((body == null ? void 0 : body.scrollHeight) || 0, (html == null ? void 0 : html.scrollHeight) || 0);
+      const boundH = Math.max(
+        (body == null ? void 0 : body.getBoundingClientRect().height) || 0,
+        (html == null ? void 0 : html.getBoundingClientRect().height) || 0
+      );
+      return Math.max(scrollH, boundH);
+    }
+    const updateHeight = () => {
+      var _a;
+      const iframe = iframeRef.value;
+      if (!iframe) return;
+      try {
+        const doc = iframe.contentDocument || ((_a = iframe.contentWindow) == null ? void 0 : _a.document);
+        if (!doc) return;
+        const newHeight = getContentHeight(doc);
+        if (newHeight !== iframeHeight.value) {
+          iframeHeight.value = newHeight;
+        }
+      } catch (e) {
       }
     };
+    const setupObservers = () => {
+      const iframe = iframeRef.value;
+      const doc = iframe == null ? void 0 : iframe.contentDocument;
+      const body = doc == null ? void 0 : doc.body;
+      if (!doc || !body) return;
+      resizeObserver = new ResizeObserver(updateHeight);
+      resizeObserver.observe(body);
+      mutationObserver = new MutationObserver(updateHeight);
+      mutationObserver.observe(body, {
+        childList: true,
+        subtree: true,
+        attributes: true
+      });
+      updateHeight();
+    };
     onMounted(() => {
-      window.addEventListener("message", updateHeight);
+      setupInterval = setInterval(() => {
+        if (!iframeRef.value) return;
+        const doc = iframeRef.value.contentDocument;
+        if ((doc == null ? void 0 : doc.readyState) === "complete") {
+          setupObservers();
+          if (setupInterval) {
+            clearInterval(setupInterval);
+            setupInterval = void 0;
+          }
+        }
+      }, 1e3);
     });
     onBeforeUnmount(() => {
-      window.removeEventListener("message", updateHeight);
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      mutationObserver == null ? void 0 : mutationObserver.disconnect();
+      if (setupInterval) {
+        clearInterval(setupInterval);
+        setupInterval = void 0;
+      }
     });
+    watch(
+      () => [iframeRef.value],
+      () => {
+        if (iframeRef.value) {
+          iframeRef.value.addEventListener("load", () => {
+            setupObservers();
+          });
+        }
+      },
+      { immediate: true }
+    );
     return (_ctx, _cache) => {
       return url.value ? (openBlock(), createElementBlock("iframe", {
         key: 0,
+        ref_key: "iframeRef",
+        ref: iframeRef,
         src: url.value,
         style: normalizeStyle(style.value)
       }, null, 12, _hoisted_1$4$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_2$1$1)) : createCommentVNode("", true);
@@ -7533,7 +7637,7 @@ const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$1$1 = ["innerHTML"];
-const _hoisted_2$h = { class: "pb-viewer" };
+const _hoisted_2$i = { class: "pb-viewer" };
 const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
   __name: "PageBuilderViewer",
   props: {
@@ -7574,7 +7678,7 @@ const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
           key: 0,
           innerHTML: unref(externalCss)
         }, null, 8, _hoisted_1$1$1)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$h, [
+        createElementVNode("div", _hoisted_2$i, [
           part.value ? (openBlock(), createBlock$1(_sfc_main$3$1, {
             key: 0,
             "is-mobile-page": _ctx.isMobilePage,
@@ -8214,16 +8318,16 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-BJ5qx69O.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-B71kpUsZ.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-BJK-i2RV.js")),
     "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-B76ArSb5.js")),
     "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-c5CNiTpt.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BihLD7YL.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-RbI_6mDe.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-B5sfulvx.js")),
-    "css-length": () => defineAsyncComponent(() => import("./PbPropertyEditorCssLength-lQ3q_Hcj.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-Gyf7NmiL.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-XRvUWl4r.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-CZt1GGd3.js")),
-    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-CTziBWaJ.js"))
+    "css-length": () => defineAsyncComponent(() => import("./PbPropertyEditorCssLength-DECtcGWr.js")),
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-CRUPv7e6.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-PEILG_Cx.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-DKeEg8Q2.js")),
+    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-BEzsNZG-.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -8513,7 +8617,7 @@ const useMouseTracker = () => {
   return mouseTracker;
 };
 const _hoisted_1$s = ["data-part-id", "draggable"];
-const _hoisted_2$g = {
+const _hoisted_2$h = {
   key: 1,
   class: "invalid-widget",
   textContent: "Invalid Widget"
@@ -8943,7 +9047,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           draggable: draggable.value,
           style: normalizeStyle(style.value)
         }, [
-          component.value ? (openBlock(), createBlock$1(resolveDynamicComponent(component.value), normalizeProps(mergeProps({ key: 0 }, bind.value)), null, 16)) : (openBlock(), createElementBlock("div", _hoisted_2$g)),
+          component.value ? (openBlock(), createBlock$1(resolveDynamicComponent(component.value), normalizeProps(mergeProps({ key: 0 }, bind.value)), null, 16)) : (openBlock(), createElementBlock("div", _hoisted_2$h)),
           selected.value && _ctx.part.isNestedWidget() ? (openBlock(), createElementBlock("div", {
             key: 2,
             class: "pan-handle",
@@ -9334,7 +9438,7 @@ function toCssLength(value) {
   return `${numberMatch[0]}px`;
 }
 const _hoisted_1$o = { class: "group-editor group-editor-position" };
-const _hoisted_2$f = { class: "flex-align-center" };
+const _hoisted_2$g = { class: "flex-align-center" };
 const _hoisted_3$c = { class: "title" };
 const _hoisted_4$a = { class: "flex-grow-1" };
 const _hoisted_5$7 = { class: "bg-gray-100 py-5 rounded-8" };
@@ -9366,7 +9470,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     const updateBottom = (value) => updatePropertyValue({ bottom: toCssLength(value) });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$o, [
-        createElementVNode("div", _hoisted_2$f, [
+        createElementVNode("div", _hoisted_2$g, [
           createElementVNode("div", _hoisted_3$c, [
             withDirectives(createElementVNode("label", null, null, 512), [
               [unref(vT), { key: "pb.prop.position" }]
@@ -9422,7 +9526,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$n = { class: "group-editor group-editor-size" };
-const _hoisted_2$e = { class: "flex-align-center" };
+const _hoisted_2$f = { class: "flex-align-center" };
 const _hoisted_3$b = { class: "title" };
 const _hoisted_4$9 = { class: "flex-grow-1 bs-layout-horizontal" };
 const _hoisted_5$6 = { class: "flex-align-center mt-12" };
@@ -9460,7 +9564,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     const updateMinHeight = (value) => updatePropertyValue({ minHeight: toCssLength(value) });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$n, [
-        createElementVNode("div", _hoisted_2$e, [
+        createElementVNode("div", _hoisted_2$f, [
           createElementVNode("div", _hoisted_3$b, [
             withDirectives(createElementVNode("label", null, null, 512), [
               [unref(vT), { key: "pb.prop.size" }]
@@ -9684,7 +9788,7 @@ var script$4 = {
   }
 };
 const _hoisted_1$m = { class: "vc-alpha" };
-const _hoisted_2$d = { class: "vc-alpha-checkboard-wrap" };
+const _hoisted_2$e = { class: "vc-alpha-checkboard-wrap" };
 const _hoisted_3$a = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-alpha-picker" },
@@ -9698,7 +9802,7 @@ const _hoisted_4$8 = [
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Checkboard = resolveComponent("Checkboard");
   return openBlock(), createElementBlock("div", _hoisted_1$m, [
-    createElementVNode("div", _hoisted_2$d, [
+    createElementVNode("div", _hoisted_2$e, [
       createVNode(_component_Checkboard)
     ]),
     createElementVNode(
@@ -10802,7 +10906,7 @@ var script$3 = {
   }
 };
 const _hoisted_1$l = { class: "vc-editable-input" };
-const _hoisted_2$c = ["aria-labelledby"];
+const _hoisted_2$d = ["aria-labelledby"];
 const _hoisted_3$9 = ["id", "for"];
 const _hoisted_4$7 = { class: "vc-input__desc" };
 function render$3(_ctx, _cache, $props, $setup, $data, $options) {
@@ -10814,7 +10918,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       class: "vc-input__input",
       onKeydown: _cache[1] || (_cache[1] = (...args) => $options.handleKeyDown && $options.handleKeyDown(...args)),
       onInput: _cache[2] || (_cache[2] = (...args) => $options.update && $options.update(...args))
-    }, null, 40, _hoisted_2$c), [
+    }, null, 40, _hoisted_2$d), [
       [vModelText, $options.val]
     ]),
     createElementVNode("span", {
@@ -10908,7 +11012,7 @@ const _hoisted_1$k = /* @__PURE__ */ createElementVNode(
   -1
   /* HOISTED */
 );
-const _hoisted_2$b = /* @__PURE__ */ createElementVNode(
+const _hoisted_2$c = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-saturation--black" },
   null,
@@ -10938,7 +11042,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     },
     [
       _hoisted_1$k,
-      _hoisted_2$b,
+      _hoisted_2$c,
       createElementVNode(
         "div",
         {
@@ -11087,7 +11191,7 @@ var script$1 = {
   }
 };
 const _hoisted_1$j = ["aria-valuenow"];
-const _hoisted_2$a = /* @__PURE__ */ createElementVNode(
+const _hoisted_2$b = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-hue-picker" },
   null,
@@ -11095,7 +11199,7 @@ const _hoisted_2$a = /* @__PURE__ */ createElementVNode(
   /* HOISTED */
 );
 const _hoisted_3$7 = [
-  _hoisted_2$a
+  _hoisted_2$b
 ];
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
@@ -11223,7 +11327,7 @@ var script = {
   }
 };
 const _hoisted_1$i = { class: "vc-sketch-saturation-wrap" };
-const _hoisted_2$9 = { class: "vc-sketch-controls" };
+const _hoisted_2$a = { class: "vc-sketch-controls" };
 const _hoisted_3$6 = { class: "vc-sketch-sliders" };
 const _hoisted_4$5 = { class: "vc-sketch-hue-wrap" };
 const _hoisted_5$5 = {
@@ -11271,7 +11375,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onChange: $options.childChange
         }, null, 8, ["value", "onChange"])
       ]),
-      createElementVNode("div", _hoisted_2$9, [
+      createElementVNode("div", _hoisted_2$a, [
         createElementVNode("div", _hoisted_3$6, [
           createElementVNode("div", _hoisted_4$5, [
             createVNode(_component_Hue, {
@@ -11438,7 +11542,7 @@ const _sfc_main$i = defineComponent({
   }
 });
 const _hoisted_1$h = { class: "buttons" };
-const _hoisted_2$8 = { class: "sketch-wrap" };
+const _hoisted_2$9 = { class: "sketch-wrap" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Sketch = resolveComponent("Sketch");
   const _directive_click_outside = resolveDirective("click-outside");
@@ -11462,7 +11566,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1)
       ]))) : createCommentVNode("", true)
     ]),
-    createElementVNode("div", _hoisted_2$8, [
+    createElementVNode("div", _hoisted_2$9, [
       _ctx.isShowColorPicker ? (openBlock(), createBlock$1(_component_Sketch, {
         key: 0,
         modelValue: _ctx.color,
@@ -11476,7 +11580,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render]]);
 const _hoisted_1$g = { class: "group-editor group-editor-background" };
-const _hoisted_2$7 = { class: "flex-align-center" };
+const _hoisted_2$8 = { class: "flex-align-center" };
 const _hoisted_3$5 = { class: "title" };
 const _hoisted_4$4 = { class: "bs-layout-horizontal" };
 const _hoisted_5$4 = { class: "color" };
@@ -11515,7 +11619,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$g, [
-        createElementVNode("div", _hoisted_2$7, [
+        createElementVNode("div", _hoisted_2$8, [
           createElementVNode("div", _hoisted_3$5, [
             withDirectives(createElementVNode("label", null, null, 512), [
               [unref(vT), { key: "pb.prop.background" }]
@@ -11554,7 +11658,7 @@ const TopRightCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//
 const BottomLeftCornerIcon = "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(180)'%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 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$f = { class: "group-editor group-editor-border" };
-const _hoisted_2$6 = { class: "flex-align-center" };
+const _hoisted_2$7 = { class: "flex-align-center" };
 const _hoisted_3$4 = { class: "title" };
 const _hoisted_4$3 = { class: "" };
 const _hoisted_5$3 = { class: "sub-title" };
@@ -11611,7 +11715,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const updateBorderBottomRightRadius = (value) => updatePropertyValue({ borderBottomRightRadius: toCssLength(value) });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$f, [
-        createElementVNode("div", _hoisted_2$6, [
+        createElementVNode("div", _hoisted_2$7, [
           createElementVNode("div", _hoisted_3$4, [
             withDirectives(createElementVNode("label", null, null, 512), [
               [unref(vT), { key: "pb.prop.border" }]
@@ -11741,7 +11845,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$e = { class: "group-editor group-editor-margin" };
-const _hoisted_2$5 = { class: "flex-align-center" };
+const _hoisted_2$6 = { class: "flex-align-center" };
 const _hoisted_3$3 = { class: "title" };
 const _hoisted_4$2 = { class: "flex-grow-1" };
 const _hoisted_5$2 = { class: "bg-gray-100 py-5 rounded-8" };
@@ -11773,7 +11877,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     const updateBottom = (value) => updatePropertyValue({ marginBottom: toCssLength(value) });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$e, [
-        createElementVNode("div", _hoisted_2$5, [
+        createElementVNode("div", _hoisted_2$6, [
           createElementVNode("div", _hoisted_3$3, [
             withDirectives(createElementVNode("label", null, null, 512), [
               [unref(vT), { key: "pb.prop.margin" }]
@@ -11829,7 +11933,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$d = { class: "group-editor group-editor-padding" };
-const _hoisted_2$4 = { class: "flex-align-center" };
+const _hoisted_2$5 = { class: "flex-align-center" };
 const _hoisted_3$2 = { class: "title" };
 const _hoisted_4$1 = { class: "flex-grow-1" };
 const _hoisted_5$1 = { class: "bg-gray-100 py-5 rounded-8" };
@@ -11861,7 +11965,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     const updateBottom = (value) => updatePropertyValue({ paddingBottom: toCssLength(value) });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$d, [
-        createElementVNode("div", _hoisted_2$4, [
+        createElementVNode("div", _hoisted_2$5, [
           createElementVNode("div", _hoisted_3$2, [
             withDirectives(createElementVNode("label", null, null, 512), [
               [unref(vT), { key: "pb.prop.padding" }]
@@ -12257,7 +12361,7 @@ const defaultWidgetPropertyGroups = () => {
   return [alignSelfGroup(), positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup(), hideParentGroup()];
 };
 const _hoisted_1$c = { class: "group-editor group-editor-media" };
-const _hoisted_2$3 = { class: "title" };
+const _hoisted_2$4 = { class: "title" };
 const _hoisted_3$1 = {
   key: 0,
   class: "title mt-12"
@@ -12321,7 +12425,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       var _a, _b, _c, _d;
       return openBlock(), createElementBlock("div", _hoisted_1$c, [
-        createElementVNode("div", _hoisted_2$3, [
+        createElementVNode("div", _hoisted_2$4, [
           withDirectives(createElementVNode("label", null, null, 512), [
             [unref(vT), { key: "pb.prop.media" }]
           ])
@@ -12779,7 +12883,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-BM6etjo4.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-B_mxaSD-.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -14427,7 +14531,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$9 = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
-const _hoisted_2$2 = { class: "bs-layout-horizontal align-items-center" };
+const _hoisted_2$3 = { class: "bs-layout-horizontal align-items-center" };
 const _hoisted_3 = { class: "mr-8" };
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "PbToolbar",
@@ -14479,7 +14583,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       var _a, _b, _c;
       return openBlock(), createElementBlock("div", _hoisted_1$9, [
-        createElementVNode("div", _hoisted_2$2, [
+        createElementVNode("div", _hoisted_2$3, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(buttonGroups), (group) => {
             return openBlock(), createBlock$1(_sfc_main$b, {
               key: group.groupId,
@@ -14676,7 +14780,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             "icon-provider": iconProvider,
             "key-provider": (part) => part.partId,
             "label-provider": labelProvider,
-            class: "max-w-320",
+            class: "max-w-320 h-full",
             "dont-change-data-when-row-moved": "",
             "multi-select": "",
             "show-move-button": "",
@@ -14723,7 +14827,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$6 = { class: "pb-sidebar-property-group" };
-const _hoisted_2$1 = {
+const _hoisted_2$2 = {
   key: 0,
   class: "group-title"
 };
@@ -14742,7 +14846,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$6, [
-        _ctx.group.showGroupName ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
+        _ctx.group.showGroupName ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
           withDirectives(createElementVNode("label", null, null, 512), [
             [unref(vT), { key: _ctx.group.caption }]
           ])
@@ -14769,6 +14873,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$5 = { class: "pb-sidebar-properties" };
+const _hoisted_2$1 = {
+  key: 0,
+  class: "bg-primary-500 text-white pl-16 py-8"
+};
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "PbSidebarProperties",
   setup(__props) {
@@ -14786,8 +14894,16 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         return [];
       }
     });
+    const partName = computed(() => {
+      if (selectedParts.length === 1) {
+        const part = selectedParts[0];
+        const def = pageBuilder.partManager.getPartDefinition(part.partName);
+        if (def) return def.caption;
+      }
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$5, [
+        partName.value ? (openBlock(), createElementBlock("div", _hoisted_2$1, toDisplayString(partName.value), 1)) : createCommentVNode("", true),
         (openBlock(true), createElementBlock(Fragment, null, renderList(properties.value, (group) => {
           return openBlock(), createElementBlock("div", {
             key: `${partsKey.value}_${group.groupName}`
@@ -16425,10 +16541,345 @@ const zhTexts = [
     text: "已复制。"
   }
 ];
+const frTexts = [
+  {
+    key: "pb.button.undo",
+    text: "Annuler"
+  },
+  {
+    key: "pb.button.redo",
+    text: "Rétablir"
+  },
+  {
+    key: "pb.button.copyAll",
+    text: "Copier tout"
+  },
+  {
+    key: "pb.button.copy",
+    text: "Copier"
+  },
+  {
+    key: "pb.button.cut",
+    text: "Couper"
+  },
+  {
+    key: "pb.button.paste",
+    text: "Coller"
+  },
+  {
+    key: "pb.button.delete",
+    text: "Supprimer"
+  },
+  {
+    key: "pb.button.addSection",
+    text: "Ajouter une section"
+  },
+  {
+    key: "pb.button.addBlock",
+    text: "Ajouter un bloc"
+  },
+  {
+    key: "pb.button.addWidget",
+    text: "Ajouter un widget"
+  },
+  {
+    key: "pb.menu.addSectionAbove",
+    text: "Ajouter une section au-dessus"
+  },
+  {
+    key: "pb.menu.addSectionBelow",
+    text: "Ajouter une section en dessous"
+  },
+  {
+    key: "pb.menu.addBlockLeft",
+    text: "Ajouter un bloc à gauche"
+  },
+  {
+    key: "pb.menu.addBlockRight",
+    text: "Ajouter un bloc à droite"
+  },
+  {
+    key: "pb.menu.addBlockAbove",
+    text: "Ajouter un bloc au-dessus"
+  },
+  {
+    key: "pb.menu.addBlockBelow",
+    text: "Ajouter un bloc en dessous"
+  },
+  {
+    key: "pb.menu.addWidgetLeft",
+    text: "Ajouter un widget à gauche"
+  },
+  {
+    key: "pb.menu.addWidgetRight",
+    text: "Ajouter un widget à droite"
+  },
+  {
+    key: "pb.menu.addWidgetAbove",
+    text: "Ajouter un widget au-dessus"
+  },
+  {
+    key: "pb.menu.addWidgetBelow",
+    text: "Ajouter un widget en dessous"
+  },
+  {
+    key: "pb.menu.addWidgetInside",
+    text: "Ajouter un widget à l'intérieur"
+  },
+  {
+    key: "pb.menu.deletePart",
+    text: "Supprimer"
+  },
+  {
+    key: "pb.prop.name",
+    text: "Nom"
+  },
+  {
+    key: "pb.prop.id",
+    text: "ID de balise"
+  },
+  {
+    key: "pb.prop.classNames",
+    text: "Noms de classes CSS"
+  },
+  {
+    key: "pb.prop.inlineStyle",
+    text: "Style CSS en ligne"
+  },
+  {
+    key: "pb.prop.style",
+    text: "Style CSS"
+  },
+  {
+    key: "pb.prop.widgetClassNames",
+    text: "Noms de classes du widget"
+  },
+  {
+    key: "pb.prop.partId",
+    text: "ID"
+  },
+  {
+    key: "pb.prop.size",
+    text: "Taille"
+  },
+  {
+    key: "pb.prop.maxSize",
+    text: "Taille maximale"
+  },
+  {
+    key: "pb.prop.minSize",
+    text: "Taille minimale"
+  },
+  {
+    key: "pb.prop.margin",
+    text: "Marge"
+  },
+  {
+    key: "pb.prop.padding",
+    text: "Rembourrage"
+  },
+  {
+    key: "pb.prop.background",
+    text: "Arrière-plan"
+  },
+  {
+    key: "pb.prop.selectImage",
+    text: "Sélectionner une image"
+  },
+  {
+    key: "pb.prop.border",
+    text: "Bordure"
+  },
+  {
+    key: "pb.prop.borderColor",
+    text: "Couleur"
+  },
+  {
+    key: "pb.prop.borderWidth",
+    text: "Largeur de bordure"
+  },
+  {
+    key: "pb.prop.borderRadius",
+    text: "Rayon de bordure"
+  },
+  {
+    key: "pb.prop.position",
+    text: "Position"
+  },
+  {
+    key: "pb.prop.editHtml",
+    text: "Modifier le HTML"
+  },
+  {
+    key: "pb.prop.selectMedia",
+    text: "Sélectionner un média"
+  },
+  {
+    key: "pb.prop.altText",
+    text: "Texte alternatif"
+  },
+  {
+    key: "pb.prop.link",
+    text: "Lien"
+  },
+  {
+    key: "pb.prop.linkTarget",
+    text: "Cible du lien"
+  },
+  {
+    key: "pb.prop.thumbnail",
+    text: "Miniature"
+  },
+  {
+    key: "pb.prop.layout",
+    text: "Disposition"
+  },
+  {
+    key: "pb.prop.direction",
+    text: "Direction"
+  },
+  {
+    key: "pb.prop.wrap",
+    text: "Retour à la ligne"
+  },
+  {
+    key: "pb.prop.gap",
+    text: "Espacement"
+  },
+  {
+    key: "pb.prop.align",
+    text: "Aligner"
+  },
+  {
+    key: "pb.prop.alignItems",
+    text: "Aligner les éléments"
+  },
+  {
+    key: "pb.prop.justifyContent",
+    text: "Justifier le contenu"
+  },
+  {
+    key: "pb.prop.alignSelf",
+    text: "Auto-alignement"
+  },
+  {
+    key: "pb.prop.maxWidth",
+    text: "Largeur maximale"
+  },
+  {
+    key: "pb.prop.text",
+    text: "Texte"
+  },
+  {
+    key: "pb.prop.fontSize",
+    text: "Taille de police"
+  },
+  {
+    key: "pb.prop.fontWeight",
+    text: "Épaisseur de police"
+  },
+  {
+    key: "pb.prop.textAlign",
+    text: "Alignement du texte"
+  },
+  {
+    key: "pb.prop.fontColor",
+    text: "Couleur de police"
+  },
+  {
+    key: "pb.prop.image",
+    text: "Image"
+  },
+  {
+    key: "pb.prop.media",
+    text: "Média"
+  },
+  {
+    key: "pb.prop.html",
+    text: "HTML"
+  },
+  {
+    key: "pb.prop.url",
+    text: "URL"
+  },
+  {
+    key: "pb.prop.aspectRatio",
+    text: "Rapport hauteur/largeur"
+  },
+  {
+    key: "pb.prop.selectVideo",
+    text: "Sélectionner une vidéo"
+  },
+  {
+    key: "pb.button.ok",
+    text: "OK"
+  },
+  {
+    key: "pb.button.cancel",
+    text: "Annuler"
+  },
+  {
+    key: "pb.modal.addWidget.title",
+    text: "Ajouter un widget"
+  },
+  {
+    key: "pb.modal.youtube.title",
+    text: "Vidéo YouTube"
+  },
+  {
+    key: "pb.modal.youtube.url",
+    text: "URL"
+  },
+  {
+    key: "pb.modal.youtube.preview",
+    text: "Aperçu"
+  },
+  {
+    key: "pb.modal.screenSelect.title",
+    text: "Sélectionner un écran"
+  },
+  {
+    key: "pb.modal.screenSelect.message",
+    text: "Quel écran souhaitez-vous conserver ?"
+  },
+  {
+    key: "pb.modal.screenSelect.pc",
+    text: "PC"
+  },
+  {
+    key: "pb.modal.screenSelect.mobile",
+    text: "Mobile"
+  },
+  {
+    key: "pb.modal.htmlEditor.title",
+    text: "Éditeur HTML"
+  },
+  {
+    key: "pb.modal.htmlEditor.preview",
+    text: "Aperçu"
+  },
+  {
+    key: "pb.modal.htmlEditor.tags",
+    text: "Balises"
+  },
+  {
+    key: "pb.modal.htmlEditor.style",
+    text: "Style"
+  },
+  {
+    key: "pb.prop.hideParentWhenInvisible",
+    text: "Masquer le bloc et la section si le widget est invisible"
+  },
+  {
+    key: "pb.prop.copied",
+    text: "Copié."
+  }
+];
 i18n.addTexts("en", enTexts);
 i18n.addTexts("ja", jaTexts);
 i18n.addTexts("ko", koTexts);
 i18n.addTexts("zh", zhTexts);
+i18n.addTexts("fr", frTexts);
 const _hoisted_1 = { class: "pb-editor bs-layout-vertical flex-grow-1" };
 const _hoisted_2 = { class: "pb-editor-body bs-layout-horizontal flex-grow-1" };
 const _sfc_main = /* @__PURE__ */ defineComponent({