@elementor/editor-components 3.35.0-357 → 3.35.0-358

package/dist/index.js

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/init.ts
 var import_editor = require("@elementor/editor");
-var import_editor_canvas7 = require("@elementor/editor-canvas");
+var import_editor_canvas8 = require("@elementor/editor-canvas");
 var import_editor_documents10 = require("@elementor/editor-documents");
 var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
 var import_editor_elements_panel = require("@elementor/editor-elements-panel");
@@ -266,25 +266,73 @@ var invalidateComponentDocumentData = (id) => {
 };
 
 // src/component-instance-transformer.ts
+var componentInstanceContext = new import_editor_canvas.RenderContext("component-instance", {
+  overrides: {}
+});
 var componentInstanceTransformer = (0, import_editor_canvas.createTransformer)(
-  async ({ component_id: id }) => {
+  async ({
+    component_id: id,
+    overrides: overridesValue
+  }) => {
     const unpublishedComponents = selectUnpublishedComponents((0, import_store3.__getState)());
     const unpublishedComponent = unpublishedComponents.find(({ uid }) => uid === id);
+    const overrides = overridesValue?.reduce((acc, override) => ({ ...acc, ...override }), {});
     if (unpublishedComponent) {
-      return structuredClone(unpublishedComponent.elements);
+      return {
+        elements: structuredClone(unpublishedComponent.elements),
+        overrides
+      };
     }
     if (typeof id !== "number") {
-      throw new Error(`Component ID "${id}" not found.`);
+      throw new Error(`Component ID "${id}" not valid.`);
     }
     const data = await getComponentDocumentData(id);
-    return data?.elements ?? [];
+    return {
+      elements: data?.elements ?? [],
+      overrides
+    };
   }
 );
 
 // src/component-overridable-transformer.ts
 var import_editor_canvas2 = require("@elementor/editor-canvas");
-var componentOverridableTransformer = (0, import_editor_canvas2.createTransformer)((value) => {
-  return value.origin_value;
+var componentOverridableTransformer = (0, import_editor_canvas2.createTransformer)(
+  (value, options) => {
+    const { overrides } = componentInstanceContext.get();
+    const overrideValue = overrides?.[value.override_key];
+    if (overrideValue) {
+      const isOverride = isOriginValueOverride(value.origin_value);
+      if (isOverride) {
+        return transformOverride(value, options, overrideValue);
+      }
+      return overrideValue;
+    }
+    return value.origin_value;
+  }
+);
+function transformOverride(value, options, overrideValue) {
+  const transformer = import_editor_canvas2.settingsTransformersRegistry.get("override");
+  if (!transformer) {
+    return null;
+  }
+  const transformedValue = transformer(value.origin_value.value, options);
+  if (!transformedValue) {
+    return null;
+  }
+  const [key] = Object.keys(transformedValue);
+  return {
+    [key]: overrideValue
+  };
+}
+function isOriginValueOverride(originValue) {
+  return originValue.$$type === "override";
+}
+
+// src/component-override-transformer.ts
+var import_editor_canvas3 = require("@elementor/editor-canvas");
+var componentOverrideTransformer = (0, import_editor_canvas3.createTransformer)((override) => {
+  const { override_key: key, override_value: overrideValue } = override;
+  return { [key]: overrideValue };
 });
 
 // src/components/component-panel-header/component-panel-header.tsx
@@ -484,7 +532,7 @@ var useComponents = () => {
 
 // src/components/components-tab/components-item.tsx
 var React5 = __toESM(require("react"));
-var import_editor_canvas4 = require("@elementor/editor-canvas");
+var import_editor_canvas5 = require("@elementor/editor-canvas");
 var import_editor_elements3 = require("@elementor/editor-elements");
 var import_editor_ui = require("@elementor/editor-ui");
 var import_icons4 = require("@elementor/icons");
@@ -508,7 +556,7 @@ var archiveComponent = (componentId) => {
 var import_editor_documents6 = require("@elementor/editor-documents");
 
 // src/create-component-type.ts
-var import_editor_canvas3 = require("@elementor/editor-canvas");
+var import_editor_canvas4 = require("@elementor/editor-canvas");
 var import_editor_documents5 = require("@elementor/editor-documents");
 var import_i18n4 = require("@wordpress/i18n");
 
@@ -575,7 +623,7 @@ function createComponentType(options) {
   };
 }
 function createComponentView(options) {
-  return class extends (0, import_editor_canvas3.createTemplatedElementView)(options) {
+  return class extends (0, import_editor_canvas4.createTemplatedElementView)(options) {
     legacyWindow = window;
     eventsManagerConfig = this.legacyWindow.elementorCommon.eventsManager.config;
     isComponentCurrentlyEdited() {
@@ -583,9 +631,10 @@ function createComponentView(options) {
       return currentDocument?.id === this.getComponentId();
     }
     afterSettingsResolve(settings) {
-      if (settings.component_instance) {
+      const componentInstance = settings.component_instance;
+      if (componentInstance) {
         this.collection = this.legacyWindow.elementor.createBackboneElementsCollection(
-          settings.component_instance
+          componentInstance.elements
         );
         this.collection.models.forEach(setInactiveRecursively);
         settings.component_instance = "<template data-children-placeholder></template>";
@@ -877,7 +926,7 @@ var ComponentItem = ({ component }) => {
   };
   const handleDragEnd = () => {
     loadComponentsAssets([componentModel]);
-    (0, import_editor_canvas4.endDragElementFromPanel)();
+    (0, import_editor_canvas5.endDragElementFromPanel)();
   };
   const handleArchiveClick = () => {
     popupState.close();
@@ -890,7 +939,7 @@ var ComponentItem = ({ component }) => {
     import_ui4.ListItemButton,
     {
       draggable: true,
-      onDragStart: () => (0, import_editor_canvas4.startDragElementFromPanel)(componentModel),
+      onDragStart: () => (0, import_editor_canvas5.startDragElementFromPanel)(componentModel),
       onDragEnd: handleDragEnd,
       shape: "rounded",
       sx: {
@@ -1422,10 +1471,10 @@ var import_react_dom = require("react-dom");
 var import_i18n9 = require("@wordpress/i18n");
 
 // src/hooks/use-canvas-document.ts
-var import_editor_canvas5 = require("@elementor/editor-canvas");
+var import_editor_canvas6 = require("@elementor/editor-canvas");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 function useCanvasDocument() {
-  return (0, import_editor_v1_adapters4.__privateUseListenTo)((0, import_editor_v1_adapters4.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_canvas5.getCanvasIframeDocument)());
+  return (0, import_editor_v1_adapters4.__privateUseListenTo)((0, import_editor_v1_adapters4.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_canvas6.getCanvasIframeDocument)());
 }
 
 // src/hooks/use-element-rect.ts
@@ -2286,7 +2335,7 @@ function isPropAllowed(bind) {
 var import_editor_mcp2 = require("@elementor/editor-mcp");
 
 // src/mcp/save-as-component-tool.ts
-var import_editor_canvas6 = require("@elementor/editor-canvas");
+var import_editor_canvas7 = require("@elementor/editor-canvas");
 var import_editor_elements7 = require("@elementor/editor-elements");
 var import_editor_mcp = require("@elementor/editor-mcp");
 var import_http_client2 = require("@elementor/http-client");
@@ -2473,17 +2522,17 @@ Use this tool when the user wants to:
 - Element elType is a 'widget'
 
 # **CRITICAL - REQUIRED RESOURCES (Must read before using this tool)**
-1. [${import_editor_canvas6.DOCUMENT_STRUCTURE_URI}]
+1. [${import_editor_canvas7.DOCUMENT_STRUCTURE_URI}]
    **MANDATORY** - Required to understand the document structure and identify child elements for overridable properties.
    Use this resource to find element IDs and understand the element hierarchy.
 
-2. [${import_editor_canvas6.WIDGET_SCHEMA_URI}]
+2. [${import_editor_canvas7.WIDGET_SCHEMA_URI}]
    **MANDATORY** - Required to understand which properties are available for each widget type.
    Use this to identify available propKeys in the atomic_props_schema for child elements.
 
 # Instructions - MUST FOLLOW IN ORDER
 ## Step 1: Identify the Target Element
-1. Read the [${import_editor_canvas6.DOCUMENT_STRUCTURE_URI}] resource to understand the document structure
+1. Read the [${import_editor_canvas7.DOCUMENT_STRUCTURE_URI}] resource to understand the document structure
 2. Locate the element you want to save as a component by its element_id
 3. Verify the element type is a valid element type
 4. Ensure the element is not locked and is not already a component
@@ -2493,11 +2542,11 @@ Do this step to make child element properties customizable.
 Skip that step ONLY if the user explicitly requests to not make any properties customizable.
 
 1. **Identify Child Elements**
-   - Use the [${import_editor_canvas6.DOCUMENT_STRUCTURE_URI}] resource to find all child elements
+   - Use the [${import_editor_canvas7.DOCUMENT_STRUCTURE_URI}] resource to find all child elements
    - Note the elementId and widgetType/elType of each child element you want to customize
 
 2. **Find Available Properties**
-   - Use the [${import_editor_canvas6.WIDGET_SCHEMA_URI}] resource to find the child element's widget type schema
+   - Use the [${import_editor_canvas7.WIDGET_SCHEMA_URI}] resource to find the child element's widget type schema
    - Review the atomic_props_schema to find available propKeys (ONLY use top-level props)
    - Common propKeys include: "text", "url", "tag", "size", etc.
    - Use only the top level properties, do not use nested properties.
@@ -2515,7 +2564,7 @@ Call the tool with:
 
 # CONSTRAINTS
 - NEVER try to override properties of the parent element itself - ONLY child elements
-- NEVER use invalid propKeys - always verify against the widget's atomic_props_schema in [${import_editor_canvas6.WIDGET_SCHEMA_URI}]
+- NEVER use invalid propKeys - always verify against the widget's atomic_props_schema in [${import_editor_canvas7.WIDGET_SCHEMA_URI}]
 - Property keys must exist in the child element's atomic_props_schema
 - Element IDs must exist within the target element's children
 - When tool execution fails, read the error message and adjust accordingly
@@ -2524,7 +2573,7 @@ Call the tool with:
   saveAsComponentPrompt.parameter(
     "element_id",
     `**MANDATORY** The unique identifier of the element to save as a component.
-Use the [${import_editor_canvas6.DOCUMENT_STRUCTURE_URI}] resource to find available element IDs.`
+Use the [${import_editor_canvas7.DOCUMENT_STRUCTURE_URI}] resource to find available element IDs.`
   );
   saveAsComponentPrompt.parameter(
     "component_name",
@@ -2548,8 +2597,8 @@ Structure:
 \`\`\`
 
 To populate this correctly:
-1. Use [${import_editor_canvas6.DOCUMENT_STRUCTURE_URI}] to find child element IDs and their widgetType
-2. Use [${import_editor_canvas6.WIDGET_SCHEMA_URI}] to find the atomic_props_schema for each child element's widgetType
+1. Use [${import_editor_canvas7.DOCUMENT_STRUCTURE_URI}] to find child element IDs and their widgetType
+2. Use [${import_editor_canvas7.WIDGET_SCHEMA_URI}] to find the atomic_props_schema for each child element's widgetType
 3. Only include properties you want to be customizable in component instances
 4. Common propKeys: "text", "url", "tag", "size", "align", etc.`
   );
@@ -2814,7 +2863,7 @@ var beforeSave = ({ container, status }) => {
 function init() {
   import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
   (0, import_store50.__registerSlice)(slice);
-  (0, import_editor_canvas7.registerElementType)(
+  (0, import_editor_canvas8.registerElementType)(
     TYPE,
     (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
   );
@@ -2870,8 +2919,9 @@ function init() {
     condition: (_, elementType) => elementType.key === "e-component",
     component: InstanceEditingPanel
   });
-  import_editor_canvas7.settingsTransformersRegistry.register("component-instance", componentInstanceTransformer);
-  import_editor_canvas7.settingsTransformersRegistry.register("overridable", componentOverridableTransformer);
+  import_editor_canvas8.settingsTransformersRegistry.register("component-instance", componentInstanceTransformer);
+  import_editor_canvas8.settingsTransformersRegistry.register("overridable", componentOverridableTransformer);
+  import_editor_canvas8.settingsTransformersRegistry.register("override", componentOverrideTransformer);
   initMcp();
 }
 // Annotate the CommonJS export names for ESM import in node: