@elementor/editor-canvas 3.33.0-293 → 3.33.0-295

package/dist/index.js

@@ -92,19 +92,102 @@ var renameClass = (oldClassName, newClassName) => {
 };
 
 // src/components/elements-overlays.tsx
-var React2 = __toESM(require("react"));
-var import_editor_elements = require("@elementor/editor-elements");
+var React3 = __toESM(require("react"));
+var import_editor_elements3 = require("@elementor/editor-elements");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 
-// src/components/element-overlay.tsx
+// src/utils/inline-editing-utils.ts
+var import_editor_elements = require("@elementor/editor-elements");
+var WIDGET_PROPERTY_MAP = {
+  "e-heading": "title",
+  "e-paragraph": "paragraph"
+};
+var getHtmlPropertyName = (container) => {
+  const widgetType = container?.model?.get("widgetType") ?? container?.model?.get("elType");
+  if (!widgetType) {
+    return "";
+  }
+  if (WIDGET_PROPERTY_MAP[widgetType]) {
+    return WIDGET_PROPERTY_MAP[widgetType];
+  }
+  const propsSchema = (0, import_editor_elements.getElementType)(widgetType)?.propsSchema;
+  if (!propsSchema) {
+    return "";
+  }
+  const entry = Object.entries(propsSchema).find(([, propType]) => propType.key === "html");
+  return entry?.[0] ?? "";
+};
+var hasInlineEditableProperty = (containerId) => {
+  const container = (0, import_editor_elements.getContainer)(containerId);
+  const widgetType = container?.model?.get("widgetType") ?? container?.model?.get("elType");
+  if (!widgetType) {
+    return false;
+  }
+  return widgetType in WIDGET_PROPERTY_MAP;
+};
+var getInlineEditablePropertyName = (container) => {
+  return getHtmlPropertyName(container);
+};
+
+// src/components/inline-editor-overlay.tsx
+var React2 = __toESM(require("react"));
+var import_editor_controls = require("@elementor/editor-controls");
+var import_editor_elements2 = require("@elementor/editor-elements");
+var import_editor_props = require("@elementor/editor-props");
+var import_ui2 = require("@elementor/ui");
+var import_utils2 = require("@elementor/utils");
+var import_react6 = require("@floating-ui/react");
+
+// src/hooks/use-floating-on-element.ts
+var import_react2 = require("react");
+var import_react3 = require("@floating-ui/react");
+function useFloatingOnElement({ element, isSelected }) {
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  const sizeModifier = 2;
+  const { refs, floatingStyles, context } = (0, import_react3.useFloating)({
+    // Must be controlled for interactions (like hover) to work.
+    open: isOpen || isSelected,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: import_react3.autoUpdate,
+    middleware: [
+      // Match the floating element's size to the reference element.
+      (0, import_react3.size)(() => {
+        return {
+          apply({ elements, rects }) {
+            Object.assign(elements.floating.style, {
+              width: `${rects.reference.width + sizeModifier}px`,
+              height: `${rects.reference.height + sizeModifier}px`
+            });
+          }
+        };
+      }),
+      // Center the floating element on the reference element.
+      (0, import_react3.offset)(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
+    ]
+  });
+  (0, import_react2.useEffect)(() => {
+    refs.setReference(element);
+  }, [element, refs]);
+  return {
+    isVisible: isOpen || isSelected,
+    context,
+    floating: {
+      setRef: refs.setFloating,
+      ref: refs.floating,
+      styles: floatingStyles
+    }
+  };
+}
+
+// src/components/outline-overlay.tsx
 var React = __toESM(require("react"));
 var import_ui = require("@elementor/ui");
 var import_react5 = require("@floating-ui/react");
 
 // src/hooks/use-bind-react-props-to-element.ts
-var import_react2 = require("react");
+var import_react4 = require("react");
 function useBindReactPropsToElement(element, getProps) {
-  (0, import_react2.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const el = element;
     const { events, attrs } = groupProps(getProps());
     events.forEach(([eventName, listener]) => el.addEventListener(eventName, listener));
@@ -135,47 +218,6 @@ function groupProps(props) {
   );
 }
 
-// src/hooks/use-floating-on-element.ts
-var import_react3 = require("react");
-var import_react4 = require("@floating-ui/react");
-function useFloatingOnElement({ element, isSelected }) {
-  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
-  const sizeModifier = 2;
-  const { refs, floatingStyles, context } = (0, import_react4.useFloating)({
-    // Must be controlled for interactions (like hover) to work.
-    open: isOpen || isSelected,
-    onOpenChange: setIsOpen,
-    whileElementsMounted: import_react4.autoUpdate,
-    middleware: [
-      // Match the floating element's size to the reference element.
-      (0, import_react4.size)(() => {
-        return {
-          apply({ elements, rects }) {
-            Object.assign(elements.floating.style, {
-              width: `${rects.reference.width + sizeModifier}px`,
-              height: `${rects.reference.height + sizeModifier}px`
-            });
-          }
-        };
-      }),
-      // Center the floating element on the reference element.
-      (0, import_react4.offset)(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
-    ]
-  });
-  (0, import_react3.useEffect)(() => {
-    refs.setReference(element);
-  }, [element, refs]);
-  return {
-    isVisible: isOpen || isSelected,
-    context,
-    floating: {
-      setRef: refs.setFloating,
-      ref: refs.floating,
-      styles: floatingStyles
-    }
-  };
-}
-
 // src/hooks/use-has-overlapping.ts
 var possibleOverlappingSelectors = [".e-off-canvas"];
 var useHasOverlapping = () => {
@@ -193,7 +235,7 @@ var useHasOverlapping = () => {
   return hasOverlapping;
 };
 
-// src/components/element-overlay.tsx
+// src/components/outline-overlay.tsx
 var CANVAS_WRAPPER_ID = "elementor-preview-responsive-wrapper";
 var OverlayBox = (0, import_ui.styled)(import_ui.Box, {
   shouldForwardProp: (prop) => prop !== "isSelected" && prop !== "isSmallerOffset"
@@ -202,7 +244,7 @@ var OverlayBox = (0, import_ui.styled)(import_ui.Box, {
   outlineOffset: isSelected && !isSmallerOffset ? "-2px" : "-1px",
   pointerEvents: "none"
 }));
-function ElementOverlay({ element, isSelected, id }) {
+var OutlineOverlay = ({ element, isSelected, id }) => {
   const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
   const { getFloatingProps, getReferenceProps } = (0, import_react5.useInteractions)([(0, import_react5.useHover)(context)]);
   const hasOverlapping = useHasOverlapping();
@@ -220,43 +262,116 @@ function ElementOverlay({ element, isSelected, id }) {
       ...getFloatingProps()
     }
   ));
-}
+};
+
+// src/components/inline-editor-overlay.tsx
+var OVERLAY_Z_INDEX = 1e3;
+var DEBOUNCE_DELAY = 100;
+var InlineEditorOverlay = ({ element, isSelected, id }) => {
+  const { floating, isVisible } = useFloatingOnElement({ element, isSelected });
+  const propertyName = React2.useMemo(() => {
+    const container = (0, import_editor_elements2.getContainer)(id);
+    return getInlineEditablePropertyName(container);
+  }, [id]);
+  const contentProp = (0, import_editor_elements2.useElementSetting)(id, propertyName);
+  const value = React2.useMemo(() => import_editor_props.htmlPropTypeUtil.extract(contentProp) || "", [contentProp]);
+  const debouncedUpdateRef = React2.useRef(null);
+  const lastValueRef = React2.useRef("");
+  React2.useEffect(() => {
+    debouncedUpdateRef.current = (0, import_utils2.debounce)((newValue) => {
+      const textContent = newValue.replace(/<[^>]*>/g, "").trim();
+      const valueToSave = textContent === "" ? "&nbsp;" : newValue;
+      (0, import_editor_elements2.updateElementSettings)({
+        id,
+        props: {
+          [propertyName]: import_editor_props.htmlPropTypeUtil.create(valueToSave)
+        },
+        withHistory: true
+      });
+    }, DEBOUNCE_DELAY);
+    return () => {
+      debouncedUpdateRef.current?.cancel?.();
+    };
+  }, [id, propertyName]);
+  const handleValueChange = React2.useCallback((newValue) => {
+    lastValueRef.current = newValue;
+    debouncedUpdateRef.current?.(newValue);
+  }, []);
+  React2.useEffect(() => {
+    if (!isVisible && debouncedUpdateRef.current?.pending?.()) {
+      debouncedUpdateRef.current.flush(lastValueRef.current);
+    }
+  }, [isVisible]);
+  if (!isVisible) {
+    return null;
+  }
+  return /* @__PURE__ */ React2.createElement(import_react6.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React2.createElement(
+    import_ui2.Box,
+    {
+      ref: floating.setRef,
+      style: {
+        ...floating.styles,
+        zIndex: OVERLAY_Z_INDEX,
+        pointerEvents: "auto"
+      }
+    },
+    /* @__PURE__ */ React2.createElement(import_editor_controls.InlineEditor, { value, setValue: handleValueChange })
+  ));
+};
 
 // src/components/elements-overlays.tsx
+var ELEMENTS_DATA_ATTR = "atomic";
+var overlayRegistry = [
+  {
+    component: OutlineOverlay,
+    shouldRender: () => true
+  },
+  {
+    component: InlineEditorOverlay,
+    shouldRender: ({ id, isSelected }) => isSelected && hasInlineEditableProperty(id) && (0, import_editor_v1_adapters.isExperimentActive)("v4-inline-text-editing")
+  }
+];
 function ElementsOverlays() {
-  const selected = (0, import_editor_elements.useSelectedElement)();
+  const selected = (0, import_editor_elements3.useSelectedElement)();
   const elements = useElementsDom();
   const currentEditMode = (0, import_editor_v1_adapters.useEditMode)();
   const isEditMode = currentEditMode === "edit";
   const isKitRouteActive = (0, import_editor_v1_adapters.__privateUseIsRouteActive)("panel/global");
   const isActive = isEditMode && !isKitRouteActive;
-  return isActive && elements.map(([id, element]) => /* @__PURE__ */ React2.createElement(ElementOverlay, { key: id, id, element, isSelected: selected.element?.id === id }));
+  if (!isActive) {
+    return null;
+  }
+  return elements.map(([id, element]) => {
+    const isSelected = selected.element?.id === id;
+    return overlayRegistry.map(
+      ({ shouldRender, component: Overlay }, index) => shouldRender({ id, element, isSelected }) && /* @__PURE__ */ React3.createElement(Overlay, { key: `${id}-${index}`, id, element, isSelected })
+    );
+  });
 }
-var ELEMENTS_DATA_ATTR = "atomic";
 function useElementsDom() {
   return (0, import_editor_v1_adapters.__privateUseListenTo)(
     [(0, import_editor_v1_adapters.windowEvent)("elementor/editor/element-rendered"), (0, import_editor_v1_adapters.windowEvent)("elementor/editor/element-destroyed")],
     () => {
-      return (0, import_editor_elements.getElements)().filter((el) => ELEMENTS_DATA_ATTR in (el.view?.el?.dataset ?? {})).map((element) => [element.id, element.view?.getDomElement?.()?.get?.(0)]).filter((item) => !!item[1]);
+      return (0, import_editor_elements3.getElements)().filter((el) => ELEMENTS_DATA_ATTR in (el.view?.el?.dataset ?? {})).map((element) => [element.id, element.view?.getDomElement?.()?.get?.(0)]).filter((item) => !!item[1]);
     }
   );
 }
 
 // src/components/interactions-renderer.tsx
-var React3 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-var import_ui2 = require("@elementor/ui");
+var import_ui3 = require("@elementor/ui");
 
 // src/hooks/use-interactions-items.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_editor_interactions = require("@elementor/editor-interactions");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 
 // src/hooks/use-on-mount.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 function useOnMount(cb) {
-  const mounted = (0, import_react6.useRef)(false);
-  (0, import_react6.useEffect)(() => {
+  const mounted = (0, import_react7.useRef)(false);
+  (0, import_react7.useEffect)(() => {
     if (!mounted.current) {
       mounted.current = true;
       cb();
@@ -266,8 +381,8 @@ function useOnMount(cb) {
 
 // src/hooks/use-interactions-items.ts
 function useInteractionsItems() {
-  const [interactionItems, setInteractionItems] = (0, import_react7.useState)({});
-  const providerAndSubscribers = (0, import_react7.useMemo)(() => {
+  const [interactionItems, setInteractionItems] = (0, import_react8.useState)({});
+  const providerAndSubscribers = (0, import_react8.useMemo)(() => {
     try {
       const providers = import_editor_interactions.interactionsRepository.getProviders();
       const mapped = providers.map((provider) => {
@@ -284,7 +399,7 @@ function useInteractionsItems() {
       return [];
     }
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (providerAndSubscribers.length === 0) {
       return;
     }
@@ -315,7 +430,7 @@ function useInteractionsItems() {
       });
     });
   });
-  return (0, import_react7.useMemo)(() => {
+  return (0, import_react8.useMemo)(() => {
     const result = Object.values(interactionItems).sort(sortByProviderPriority).flatMap(({ items }) => items);
     return result;
   }, [interactionItems]);
@@ -351,7 +466,7 @@ function InteractionsRenderer() {
     return null;
   }
   const interactionsData = JSON.stringify(Array.isArray(interactionItems) ? interactionItems : []);
-  return /* @__PURE__ */ React3.createElement(import_ui2.Portal, { container }, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(import_ui3.Portal, { container }, /* @__PURE__ */ React4.createElement(
     "script",
     {
       type: "application/json",
@@ -367,9 +482,9 @@ function usePortalContainer() {
 }
 
 // src/components/style-renderer.tsx
-var React4 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
-var import_ui3 = require("@elementor/ui");
+var import_ui4 = require("@elementor/ui");
 
 // src/hooks/use-documents-css-links.ts
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
@@ -419,7 +534,7 @@ function getLinkAttrs(el) {
 }
 
 // src/hooks/use-style-items.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_editor_responsive2 = require("@elementor/editor-responsive");
 var import_editor_styles3 = require("@elementor/editor-styles");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
@@ -457,11 +572,11 @@ function signalizedProcess(signal, steps = []) {
 }
 
 // src/hooks/use-style-prop-resolver.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_editor_styles = require("@elementor/editor-styles");
 
 // src/renderers/create-props-resolver.ts
-var import_editor_props = require("@elementor/editor-props");
+var import_editor_props2 = require("@elementor/editor-props");
 
 // src/renderers/multi-props.ts
 var isMultiProps = (propValue) => {
@@ -499,7 +614,7 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
     if (value === null || value === void 0) {
       return null;
     }
-    if (!(0, import_editor_props.isTransformable)(value)) {
+    if (!(0, import_editor_props2.isTransformable)(value)) {
       return value;
     }
     if (depth > TRANSFORM_DEPTH_LIMIT) {
@@ -579,7 +694,7 @@ var enqueueFont = (fontFamily, context = "preview") => {
 
 // src/hooks/use-style-prop-resolver.ts
 function useStylePropResolver() {
-  return (0, import_react8.useMemo)(() => {
+  return (0, import_react9.useMemo)(() => {
     return createPropsResolver({
       transformers: styleTransformersRegistry,
       schema: (0, import_editor_styles.getStylesSchema)(),
@@ -594,20 +709,20 @@ function useStylePropResolver() {
 }
 
 // src/hooks/use-style-renderer.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_editor_responsive = require("@elementor/editor-responsive");
 
 // src/renderers/create-styles-renderer.ts
 var import_editor_styles2 = require("@elementor/editor-styles");
-var import_utils3 = require("@elementor/utils");
+var import_utils4 = require("@elementor/utils");
 
 // src/renderers/errors.ts
-var import_utils2 = require("@elementor/utils");
-var UnknownStyleTypeError = (0, import_utils2.createError)({
+var import_utils3 = require("@elementor/utils");
+var UnknownStyleTypeError = (0, import_utils3.createError)({
   code: "unknown_style_type",
   message: "Unknown style type"
 });
-var UnknownStyleStateError = (0, import_utils2.createError)({
+var UnknownStyleStateError = (0, import_utils3.createError)({
   code: "unknown_style_state",
   message: "Unknown style state"
 });
@@ -684,7 +799,7 @@ async function propsToCss({ props, resolve, signal }) {
   }, []).join("");
 }
 function customCssToString(customCss) {
-  const decoded = (0, import_utils3.decodeString)(customCss?.raw || "");
+  const decoded = (0, import_utils4.decodeString)(customCss?.raw || "");
   if (!decoded.trim()) {
     return "";
   }
@@ -695,7 +810,7 @@ function customCssToString(customCss) {
 var SELECTOR_PREFIX = ".elementor";
 function useStyleRenderer(resolve) {
   const breakpoints = (0, import_editor_responsive.useBreakpointsMap)();
-  return (0, import_react9.useMemo)(() => {
+  return (0, import_react10.useMemo)(() => {
     return createStylesRenderer({
       selectorPrefix: SELECTOR_PREFIX,
       breakpoints,
@@ -708,8 +823,8 @@ function useStyleRenderer(resolve) {
 function useStyleItems() {
   const resolve = useStylePropResolver();
   const renderStyles = useStyleRenderer(resolve);
-  const [styleItems, setStyleItems] = (0, import_react10.useState)({});
-  const providerAndSubscribers = (0, import_react10.useMemo)(() => {
+  const [styleItems, setStyleItems] = (0, import_react11.useState)({});
+  const providerAndSubscribers = (0, import_react11.useMemo)(() => {
     return import_editor_styles_repository2.stylesRepository.getProviders().map((provider) => {
       return {
         provider,
@@ -721,7 +836,7 @@ function useStyleItems() {
       };
     });
   }, [renderStyles]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const unsubscribes = providerAndSubscribers.map(
       ({ provider, subscriber }) => provider.subscribe(subscriber)
     );
@@ -736,9 +851,8 @@ function useStyleItems() {
     });
   });
   const breakpointsOrder = (0, import_editor_responsive2.getBreakpoints)().map((breakpoint) => breakpoint.id);
-  return (0, import_react10.useMemo)(
+  return (0, import_react11.useMemo)(
     () => Object.values(styleItems).sort(sortByProviderPriority2).flatMap(({ items }) => items).sort(sortByStateType).sort(sortByBreakpoint(breakpointsOrder)),
-    // eslint-disable-next-line
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [styleItems, breakpointsOrder.join("-")]
   );
@@ -810,7 +924,7 @@ function StyleRenderer() {
   if (!container) {
     return null;
   }
-  return /* @__PURE__ */ React4.createElement(import_ui3.Portal, { container }, styleItems.map((item, i) => /* @__PURE__ */ React4.createElement("style", { key: `${item.id}-${i}-${item.breakpoint}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React4.createElement("link", { ...attrs, key: attrs.id })));
+  return /* @__PURE__ */ React5.createElement(import_ui4.Portal, { container }, styleItems.map((item, i) => /* @__PURE__ */ React5.createElement("style", { key: `${item.id}-${i}-${item.breakpoint}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React5.createElement("link", { ...attrs, key: attrs.id })));
 }
 function usePortalContainer2() {
   return (0, import_editor_v1_adapters6.__privateUseListenTo)((0, import_editor_v1_adapters6.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
@@ -1180,10 +1294,10 @@ var transformSkewTransformer = createTransformer((value) => {
 });
 
 // src/transformers/styles/transition-transformer.ts
-var import_editor_controls = require("@elementor/editor-controls");
+var import_editor_controls2 = require("@elementor/editor-controls");
 var getAllowedProperties = () => {
   const allowedProperties = /* @__PURE__ */ new Set();
-  import_editor_controls.transitionProperties.forEach((category) => {
+  import_editor_controls2.transitionProperties.forEach((category) => {
     category.properties.forEach((property) => {
       allowedProperties.add(property.value);
     });
@@ -1245,7 +1359,7 @@ function initStyleTransformers() {
 }
 
 // src/legacy/init-legacy-views.ts
-var import_editor_elements2 = require("@elementor/editor-elements");
+var import_editor_elements4 = require("@elementor/editor-elements");
 var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 
 // src/renderers/create-dom-renderer.ts
@@ -1474,7 +1588,7 @@ function registerElementType(type, elementTypeGenerator) {
 }
 function initLegacyViews() {
   (0, import_editor_v1_adapters7.__privateListenTo)((0, import_editor_v1_adapters7.v1ReadyEvent)(), () => {
-    const config = (0, import_editor_elements2.getWidgetsCache)() ?? {};
+    const config = (0, import_editor_elements4.getWidgetsCache)() ?? {};
     const legacyWindow = window;
     const renderer = createDomRenderer();
     Object.entries(config).forEach(([type, element]) => {
@@ -1495,9 +1609,9 @@ function initLegacyViews() {
 }
 
 // src/mcp/resources/widgets-schema-resource.ts
-var import_editor_elements3 = require("@elementor/editor-elements");
+var import_editor_elements5 = require("@elementor/editor-elements");
 var import_editor_mcp = require("@elementor/editor-mcp");
-var import_editor_props2 = require("@elementor/editor-props");
+var import_editor_props3 = require("@elementor/editor-props");
 var import_editor_styles4 = require("@elementor/editor-styles");
 var WIDGET_SCHEMA_URI = "elementor://widgets/schema/{widgetType}";
 var STYLE_SCHEMA_URI = "elementor://styles/schema/{category}";
@@ -1552,7 +1666,7 @@ The css string must follow standard CSS syntax, with properties and values separ
         throw new Error(`No styles schema found for category: ${category}`);
       }
       const cleanedupPropSchema = cleanupPropType(stylesSchema);
-      const asJson = import_editor_props2.Schema.propTypeToJsonSchema(cleanedupPropSchema);
+      const asJson = import_editor_props3.Schema.propTypeToJsonSchema(cleanedupPropSchema);
       return {
         contents: [
           {
@@ -1567,7 +1681,7 @@ The css string must follow standard CSS syntax, with properties and values separ
     "widget-schema-by-type",
     new import_editor_mcp.ResourceTemplate(WIDGET_SCHEMA_URI, {
       list: () => {
-        const cache = (0, import_editor_elements3.getWidgetsCache)() || {};
+        const cache = (0, import_editor_elements5.getWidgetsCache)() || {};
         const availableWidgets = Object.keys(cache || {}).filter(
           (widgetType) => cache[widgetType]?.atomic_props_schema
         );
@@ -1584,7 +1698,7 @@ The css string must follow standard CSS syntax, with properties and values separ
     },
     async (uri, variables) => {
       const widgetType = typeof variables.widgetType === "string" ? variables.widgetType : variables.widgetType?.[0];
-      const propSchema = (0, import_editor_elements3.getWidgetsCache)()?.[widgetType]?.atomic_props_schema;
+      const propSchema = (0, import_editor_elements5.getWidgetsCache)()?.[widgetType]?.atomic_props_schema;
       if (!propSchema) {
         throw new Error(`No prop schema found for element type: ${widgetType}`);
       }
@@ -1592,10 +1706,10 @@ The css string must follow standard CSS syntax, with properties and values separ
       const asJson = Object.fromEntries(
         Object.entries(cleanedupPropSchema).map(([key, propType]) => [
           key,
-          import_editor_props2.Schema.propTypeToJsonSchema(propType)
+          import_editor_props3.Schema.propTypeToJsonSchema(propType)
         ])
       );
-      import_editor_props2.Schema.nonConfigurablePropKeys.forEach((key) => {
+      import_editor_props3.Schema.nonConfigurablePropKeys.forEach((key) => {
         delete asJson[key];
       });
       return {
@@ -1654,19 +1768,19 @@ function cleanupPropType(propType) {
 }
 
 // src/mcp/tools/build-composition/tool.ts
-var import_editor_elements5 = require("@elementor/editor-elements");
+var import_editor_elements7 = require("@elementor/editor-elements");
 
 // src/mcp/utils/do-update-element-property.ts
-var import_editor_elements4 = require("@elementor/editor-elements");
-var import_editor_props3 = require("@elementor/editor-props");
+var import_editor_elements6 = require("@elementor/editor-elements");
+var import_editor_props4 = require("@elementor/editor-props");
 var import_editor_styles5 = require("@elementor/editor-styles");
 function resolvePropValue(value, forceKey) {
-  return import_editor_props3.Schema.adjustLlmPropValueSchema(value, forceKey);
+  return import_editor_props4.Schema.adjustLlmPropValueSchema(value, forceKey);
 }
 var doUpdateElementProperty = (params) => {
   const { elementId, propertyName, propertyValue, elementType } = params;
   if (propertyName === "_styles") {
-    const elementStyles = (0, import_editor_elements4.getElementStyles)(elementId) || {};
+    const elementStyles = (0, import_editor_elements6.getElementStyles)(elementId) || {};
     const propertyMapValue = propertyValue;
     const styleSchema = (0, import_editor_styles5.getStylesSchema)();
     const transformedStyleValues = Object.fromEntries(
@@ -1687,7 +1801,7 @@ var doUpdateElementProperty = (params) => {
       if (stylePropName === "custom_css") {
         let customCssValue = propertyMapValue[stylePropName];
         if (typeof customCssValue === "object") {
-          customCssValue = import_editor_props3.stringPropTypeUtil.extract(customCssValue) || customCssValue?.value || "";
+          customCssValue = import_editor_props4.stringPropTypeUtil.extract(customCssValue) || customCssValue?.value || "";
         }
         customCss = {
           raw: btoa(customCssValue)
@@ -1700,7 +1814,7 @@ var doUpdateElementProperty = (params) => {
       }
       if (propertyRawSchema.kind === "plain") {
         if (typeof propertyMapValue[stylePropName] !== "object") {
-          const propUtil = (0, import_editor_props3.getPropSchemaFromCache)(propertyRawSchema.key);
+          const propUtil = (0, import_editor_props4.getPropSchemaFromCache)(propertyRawSchema.key);
           if (propUtil) {
             const plainValue = propUtil.create(propertyMapValue[stylePropName]);
             propertyMapValue[stylePropName] = plainValue;
@@ -1710,7 +1824,7 @@ var doUpdateElementProperty = (params) => {
     });
     const localStyle = Object.values(elementStyles).find((style) => style.label === "local");
     if (!localStyle) {
-      (0, import_editor_elements4.createElementStyle)({
+      (0, import_editor_elements6.createElementStyle)({
         elementId,
         ...typeof customCss !== "undefined" ? { custom_css: customCss } : {},
         classesProp: "classes",
@@ -1724,7 +1838,7 @@ var doUpdateElementProperty = (params) => {
         }
       });
     } else {
-      (0, import_editor_elements4.updateElementStyle)({
+      (0, import_editor_elements6.updateElementStyle)({
         elementId,
         styleId: localStyle.id,
         meta: {
@@ -1739,7 +1853,7 @@ var doUpdateElementProperty = (params) => {
     }
     return;
   }
-  const elementPropSchema = (0, import_editor_elements4.getWidgetsCache)()?.[elementType]?.atomic_props_schema;
+  const elementPropSchema = (0, import_editor_elements6.getWidgetsCache)()?.[elementType]?.atomic_props_schema;
   if (!elementPropSchema) {
     throw new Error(`No prop schema found for element type: ${elementType}`);
   }
@@ -1752,7 +1866,7 @@ var doUpdateElementProperty = (params) => {
     );
   }
   const value = resolvePropValue(propertyValue);
-  (0, import_editor_elements4.updateElementSettings)({
+  (0, import_editor_elements6.updateElementSettings)({
     id: elementId,
     props: {
       [propertyName]: value
@@ -1909,8 +2023,8 @@ var initBuildCompositionsTool = (reg) => {
       const errors = [];
       const softErrors = [];
       const rootContainers = [];
-      const widgetsCache = (0, import_editor_elements5.getWidgetsCache)() || {};
-      const documentContainer = (0, import_editor_elements5.getContainer)("document");
+      const widgetsCache = (0, import_editor_elements7.getWidgetsCache)() || {};
+      const documentContainer = (0, import_editor_elements7.getContainer)("document");
       try {
         const parser = new DOMParser();
         xml = parser.parseFromString(xmlStructure, "application/xml");
@@ -1925,19 +2039,19 @@ var initBuildCompositionsTool = (reg) => {
             errors.push(new Error(`Unknown widget type: ${elementTag}`));
           }
           const isContainer = elementTag === "e-flexbox" || elementTag === "e-div-block";
-          const newElement = isContainer ? (0, import_editor_elements5.createElement)({
+          const newElement = isContainer ? (0, import_editor_elements7.createElement)({
             containerId: containerElement.id,
             model: {
               elType: elementTag,
-              id: (0, import_editor_elements5.generateElementId)()
+              id: (0, import_editor_elements7.generateElementId)()
             },
             options: { useHistory: false }
-          }) : (0, import_editor_elements5.createElement)({
+          }) : (0, import_editor_elements7.createElement)({
             containerId: containerElement.id,
             model: {
               elType: "widget",
               widgetType: elementTag,
-              id: (0, import_editor_elements5.generateElementId)()
+              id: (0, import_editor_elements7.generateElementId)()
             },
             options: { useHistory: false }
           });
@@ -1994,7 +2108,7 @@ var initBuildCompositionsTool = (reg) => {
       }
       if (errors.length) {
         rootContainers.forEach((rootContainer) => {
-          (0, import_editor_elements5.deleteElement)({
+          (0, import_editor_elements7.deleteElement)({
             elementId: rootContainer.id,
             options: { useHistory: false }
           });
@@ -2196,10 +2310,10 @@ Now that you have this information, ensure you have the schema and try again.`;
 }
 
 // src/mcp/tools/get-element-config/tool.ts
-var import_editor_elements6 = require("@elementor/editor-elements");
-var import_editor_props4 = require("@elementor/editor-props");
+var import_editor_elements8 = require("@elementor/editor-elements");
+var import_editor_props5 = require("@elementor/editor-props");
 var import_schema5 = require("@elementor/schema");
-var import_utils4 = require("@elementor/utils");
+var import_utils5 = require("@elementor/utils");
 var schema = {
   elementId: import_schema5.z.string()
 };
@@ -2217,21 +2331,21 @@ var initGetElementConfigTool = (reg) => {
     schema,
     outputSchema: outputSchema3,
     handler: async ({ elementId }) => {
-      const element = (0, import_editor_elements6.getContainer)(elementId);
+      const element = (0, import_editor_elements8.getContainer)(elementId);
       if (!element) {
         throw new Error(`Element with ID ${elementId} not found.`);
       }
       const elementRawSettings = element.settings;
-      const propSchema = (0, import_editor_elements6.getWidgetsCache)()?.[element.model.get("widgetType") || ""]?.atomic_props_schema;
+      const propSchema = (0, import_editor_elements8.getWidgetsCache)()?.[element.model.get("widgetType") || ""]?.atomic_props_schema;
       if (!elementRawSettings || !propSchema) {
         throw new Error(`No settings or prop schema found for element ID: ${elementId}`);
       }
       const propValues = {};
       const stylePropValues = {};
-      import_editor_props4.Schema.configurableKeys(propSchema).forEach((key) => {
+      import_editor_props5.Schema.configurableKeys(propSchema).forEach((key) => {
         propValues[key] = structuredClone(elementRawSettings.get(key));
       });
-      const elementStyles = (0, import_editor_elements6.getElementStyles)(elementId) || {};
+      const elementStyles = (0, import_editor_elements8.getElementStyles)(elementId) || {};
       const localStyle = Object.values(elementStyles).find((style) => style.label === "local");
       if (localStyle) {
         const defaultVariant = localStyle.variants.find(
@@ -2245,7 +2359,7 @@ var initGetElementConfigTool = (reg) => {
             }
           });
           if (defaultVariant.custom_css?.raw) {
-            stylePropValues.custom_css = (0, import_utils4.decodeString)(defaultVariant.custom_css.raw, void 0);
+            stylePropValues.custom_css = (0, import_utils5.decodeString)(defaultVariant.custom_css.raw, void 0);
           }
         }
       }
@@ -2315,7 +2429,7 @@ Example of "image" PropValue structure:
 `;
 
 // src/prevent-link-in-link-commands.ts
-var import_editor_elements7 = require("@elementor/editor-elements");
+var import_editor_elements9 = require("@elementor/editor-elements");
 var import_editor_notifications = require("@elementor/editor-notifications");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
 var import_i18n = require("@wordpress/i18n");
@@ -2386,13 +2500,13 @@ function shouldBlock(sourceElements, targetElements) {
     return false;
   }
   const isSourceContainsAnAnchor = sourceElements.some((src) => {
-    return src?.id ? (0, import_editor_elements7.isElementAnchored)(src.id) || !!(0, import_editor_elements7.getAnchoredDescendantId)(src.id) : false;
+    return src?.id ? (0, import_editor_elements9.isElementAnchored)(src.id) || !!(0, import_editor_elements9.getAnchoredDescendantId)(src.id) : false;
   });
   if (!isSourceContainsAnAnchor) {
     return false;
   }
   const isTargetContainsAnAnchor = targetElements.some((target) => {
-    return target?.id ? (0, import_editor_elements7.isElementAnchored)(target.id) || !!(0, import_editor_elements7.getAnchoredAncestorId)(target.id) : false;
+    return target?.id ? (0, import_editor_elements9.isElementAnchored)(target.id) || !!(0, import_editor_elements9.getAnchoredAncestorId)(target.id) : false;
   });
   return isTargetContainsAnAnchor;
 }
@@ -2401,14 +2515,14 @@ function shouldBlock(sourceElements, targetElements) {
 var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/paste-element-style.ts
-var import_editor_elements9 = require("@elementor/editor-elements");
+var import_editor_elements11 = require("@elementor/editor-elements");
 var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
 var import_i18n3 = require("@wordpress/i18n");
 
 // src/style-commands/utils.ts
-var import_editor_elements8 = require("@elementor/editor-elements");
-var import_editor_props5 = require("@elementor/editor-props");
+var import_editor_elements10 = require("@elementor/editor-elements");
+var import_editor_props6 = require("@elementor/editor-props");
 var import_i18n2 = require("@wordpress/i18n");
 function hasAtomicWidgets(args) {
   const { containers = [args.container] } = args;
@@ -2426,13 +2540,13 @@ function getClassesProp(container) {
     return null;
   }
   const [propKey] = Object.entries(propsSchema).find(
-    ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props5.CLASSES_PROP_KEY
+    ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props6.CLASSES_PROP_KEY
   ) ?? [];
   return propKey ?? null;
 }
 function getContainerSchema(container) {
   const type = container?.model.get("widgetType") || container?.model.get("elType");
-  const widgetsCache = (0, import_editor_elements8.getWidgetsCache)();
+  const widgetsCache = (0, import_editor_elements10.getWidgetsCache)();
   const elementType = widgetsCache?.[type];
   return elementType?.atomic_props_schema ?? null;
 }
@@ -2445,7 +2559,7 @@ function getClipboardElements(storageKey = "clipboard") {
   }
 }
 function getTitleForContainers(containers) {
-  return containers.length > 1 ? (0, import_i18n2.__)("Elements", "elementor") : (0, import_editor_elements8.getElementLabel)(containers[0].id);
+  return containers.length > 1 ? (0, import_i18n2.__)("Elements", "elementor") : (0, import_editor_elements10.getElementLabel)(containers[0].id);
 }
 
 // src/style-commands/undoable-actions/paste-element-style.ts
@@ -2458,7 +2572,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters9.undoable)(
         if (!classesProp) {
           return null;
         }
-        const originalStyles = (0, import_editor_elements9.getElementStyles)(container.id);
+        const originalStyles = (0, import_editor_elements11.getElementStyles)(container.id);
         const [styleId, styleDef] = Object.entries(originalStyles ?? {})[0] ?? [];
         const originalStyle = Object.keys(styleDef ?? {}).length ? styleDef : null;
         const revertData = {
@@ -2467,7 +2581,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters9.undoable)(
         };
         if (styleId) {
           newStyle.variants.forEach(({ meta, props, custom_css: customCss }) => {
-            (0, import_editor_elements9.updateElementStyle)({
+            (0, import_editor_elements11.updateElementStyle)({
               elementId,
               styleId,
               meta,
@@ -2478,7 +2592,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters9.undoable)(
         } else {
           const [firstVariant] = newStyle.variants;
           const additionalVariants = newStyle.variants.slice(1);
-          revertData.styleId = (0, import_editor_elements9.createElementStyle)({
+          revertData.styleId = (0, import_editor_elements11.createElementStyle)({
             elementId,
             classesProp,
             label: import_editor_styles_repository4.ELEMENTS_STYLES_RESERVED_LABEL,
@@ -2496,7 +2610,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters9.undoable)(
           return;
         }
         if (!revertData.originalStyle) {
-          (0, import_editor_elements9.deleteElementStyle)(container.id, revertData.styleId);
+          (0, import_editor_elements11.deleteElementStyle)(container.id, revertData.styleId);
           return;
         }
         const classesProp = getClassesProp(container);
@@ -2505,7 +2619,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters9.undoable)(
         }
         const [firstVariant] = revertData.originalStyle.variants;
         const additionalVariants = revertData.originalStyle.variants.slice(1);
-        (0, import_editor_elements9.createElementStyle)({
+        (0, import_editor_elements11.createElementStyle)({
           elementId: container.id,
           classesProp,
           label: import_editor_styles_repository4.ELEMENTS_STYLES_RESERVED_LABEL,
@@ -2557,7 +2671,7 @@ function pasteStyles(args, pasteCallback) {
 var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/reset-element-style.ts
-var import_editor_elements10 = require("@elementor/editor-elements");
+var import_editor_elements12 = require("@elementor/editor-elements");
 var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
 var import_i18n4 = require("@wordpress/i18n");
@@ -2566,9 +2680,9 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters11.undoable)(
     do: ({ containers }) => {
       return containers.map((container) => {
         const elementId = container.model.get("id");
-        const containerStyles = (0, import_editor_elements10.getElementStyles)(elementId);
+        const containerStyles = (0, import_editor_elements12.getElementStyles)(elementId);
         Object.keys(containerStyles ?? {}).forEach(
-          (styleId) => (0, import_editor_elements10.deleteElementStyle)(elementId, styleId)
+          (styleId) => (0, import_editor_elements12.deleteElementStyle)(elementId, styleId)
         );
         return containerStyles;
       });
@@ -2584,7 +2698,7 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters11.undoable)(
         Object.entries(containerStyles ?? {}).forEach(([styleId, style]) => {
           const [firstVariant] = style.variants;
           const additionalVariants = style.variants.slice(1);
-          (0, import_editor_elements10.createElementStyle)({
+          (0, import_editor_elements12.createElementStyle)({
             elementId,
             classesProp,
             styleId,