@elementor/editor-components 3.35.0-385 → 3.35.0-387

package/dist/index.js

@@ -42,7 +42,7 @@ var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
 var import_editor_elements_panel = require("@elementor/editor-elements-panel");
 var import_editor_panels4 = require("@elementor/editor-panels");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 var import_store64 = require("@elementor/store");
 var import_i18n24 = require("@wordpress/i18n");
 
@@ -1671,7 +1671,7 @@ var onElementDrop = (_args, element) => {
 };
 
 // src/create-component-type.ts
-var TYPE = "e-component";
+var COMPONENT_WIDGET_TYPE = "e-component";
 var updateGroups = (groups, config) => {
   const disableMap = new Map(Object.entries(config.disable ?? {}));
   const addMap = new Map(Object.entries(config.add ?? {}));
@@ -1826,11 +1826,16 @@ function setInactiveRecursively(model) {
   }
 }
 
+// src/utils/is-component-instance.ts
+function isComponentInstance(elementModel) {
+  return [elementModel.widgetType, elementModel.elType].includes(COMPONENT_WIDGET_TYPE);
+}
+
 // src/utils/get-component-ids.ts
 var getComponentIds = async (elements) => {
   const components = elements.map(async ({ widgetType, elType, elements: childElements, settings }) => {
     const ids = [];
-    const isComponent = [widgetType, elType].includes(TYPE);
+    const isComponent = isComponentInstance({ widgetType, elType });
     if (isComponent) {
       const componentId = settings?.component_instance?.value?.component_id.value;
       const document = await getComponentDocumentData(componentId);
@@ -3271,16 +3276,99 @@ function isPropAllowed(bind) {
   return !FORBIDDEN_KEYS.includes(bind);
 }
 
+// src/hooks/regenerate-override-keys.ts
+var import_editor_elements10 = require("@elementor/editor-elements");
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var import_utils8 = require("@elementor/utils");
+function initRegenerateOverrideKeys() {
+  (0, import_editor_v1_adapters6.registerDataHook)("after", "document/elements/duplicate", (_args, result) => {
+    regenerateOverrideKeysForContainers(result);
+  });
+  (0, import_editor_v1_adapters6.registerDataHook)("after", "document/elements/paste", (_args, result) => {
+    regenerateOverrideKeysForContainers(result);
+  });
+  (0, import_editor_v1_adapters6.registerDataHook)("after", "document/elements/import", (_args, result) => {
+    regenerateOverrideKeysForContainers(result);
+  });
+}
+function regenerateOverrideKeysForContainers(result) {
+  const containers = Array.isArray(result) ? result : [result];
+  containers.forEach((container) => {
+    regenerateOverrideKeysRecursive(container.id);
+  });
+}
+function regenerateOverrideKeysRecursive(elementId) {
+  const container = (0, import_editor_elements10.getContainer)(elementId);
+  if (!container) {
+    return;
+  }
+  getAllElements(container).forEach(regenerateOverrideKeys);
+}
+function getAllElements(container) {
+  const children = (container.children ?? []).flatMap(getAllElements) ?? [];
+  return [container, ...children];
+}
+function regenerateOverrideKeys(element) {
+  if (!isComponentInstance(element.model.toJSON())) {
+    return;
+  }
+  const settings = element.settings?.toJSON() ?? {};
+  if (!hasOverrides(settings)) {
+    return;
+  }
+  const componentInstance = settings.component_instance;
+  const overrides = componentInstance.value.overrides;
+  const newOverrides = overrides.value.map((override) => {
+    if (!componentInstanceOverridePropTypeUtil.isValid(override)) {
+      return override;
+    }
+    return {
+      ...override,
+      value: {
+        ...override.value,
+        override_key: (0, import_utils8.generateUniqueId)("prop")
+      }
+    };
+  });
+  const newComponentInstance = {
+    ...componentInstance,
+    value: {
+      ...componentInstance.value,
+      overrides: {
+        ...overrides,
+        value: newOverrides
+      }
+    }
+  };
+  (0, import_editor_elements10.updateElementSettings)({
+    id: element.id,
+    props: { component_instance: newComponentInstance },
+    withHistory: false
+  });
+}
+function hasOverrides(settings) {
+  if (!componentInstancePropTypeUtil.isValid(settings?.component_instance)) {
+    return false;
+  }
+  const componentInstance = componentInstancePropTypeUtil.extract(settings?.component_instance);
+  const overrides = componentInstance?.overrides;
+  if (!componentInstanceOverridesPropTypeUtil.isValid(overrides)) {
+    return false;
+  }
+  const overridesValue = overrides?.value;
+  return !!overridesValue?.length;
+}
+
 // src/mcp/index.ts
 var import_editor_mcp2 = require("@elementor/editor-mcp");
 
 // src/mcp/save-as-component-tool.ts
 var import_editor_canvas7 = require("@elementor/editor-canvas");
-var import_editor_elements10 = require("@elementor/editor-elements");
+var import_editor_elements11 = require("@elementor/editor-elements");
 var import_editor_mcp = require("@elementor/editor-mcp");
 var import_http_client2 = require("@elementor/http-client");
 var import_schema6 = require("@elementor/schema");
-var import_utils8 = require("@elementor/utils");
+var import_utils9 = require("@elementor/utils");
 var InputSchema = {
   element_id: import_schema6.z.string().describe(
     'The unique identifier of the element to save as a component. Use the "list-elements" tool to find available element IDs in the current document.'
@@ -3311,7 +3399,7 @@ var ERROR_MESSAGES2 = {
 var handleSaveAsComponent = async (params) => {
   const { element_id: elementId, component_name: componentName, overridable_props: overridablePropsInput } = params;
   const validElementTypes = getValidElementTypes();
-  const container = (0, import_editor_elements10.getContainer)(elementId);
+  const container = (0, import_editor_elements11.getContainer)(elementId);
   if (!container) {
     throw new Error(ERROR_MESSAGES2.ELEMENT_NOT_FOUND);
   }
@@ -3327,7 +3415,7 @@ var handleSaveAsComponent = async (params) => {
   if (overridableProps) {
     updateElementDataWithOverridableProps(element, overridableProps);
   }
-  const uid = (0, import_utils8.generateUniqueId)("component");
+  const uid = (0, import_utils9.generateUniqueId)("component");
   try {
     await apiClient.validate({
       items: [
@@ -3349,7 +3437,7 @@ var handleSaveAsComponent = async (params) => {
 };
 function enrichOverridableProps(input, rootElement) {
   const enrichedProps = {};
-  const defaultGroupId = (0, import_utils8.generateUniqueId)("group");
+  const defaultGroupId = (0, import_utils9.generateUniqueId)("group");
   Object.entries(input.props).forEach(([, prop]) => {
     const { elementId, propKey } = prop;
     const element = findElementById(rootElement, elementId);
@@ -3358,7 +3446,7 @@ function enrichOverridableProps(input, rootElement) {
     }
     const elType = element.elType;
     const widgetType = element.widgetType || element.elType;
-    const elementType = (0, import_editor_elements10.getElementType)(widgetType);
+    const elementType = (0, import_editor_elements11.getElementType)(widgetType);
     if (!elementType) {
       throw new Error(
         `Element type "${widgetType}" is not atomic or does not have a settings schema. Cannot expose property "${propKey}" for element "${elementId}".`
@@ -3370,7 +3458,7 @@ function enrichOverridableProps(input, rootElement) {
         `Property "${propKey}" does not exist in element "${elementId}" (type: ${widgetType}). Available properties: ${availableProps}`
       );
     }
-    const overrideKey = (0, import_utils8.generateUniqueId)("prop");
+    const overrideKey = (0, import_utils9.generateUniqueId)("prop");
     const originValue = element.settings?.[propKey] ? element.settings[propKey] : elementType.propsSchema[propKey].default ?? null;
     const label = generateLabel(propKey);
     enrichedProps[overrideKey] = {
@@ -3428,11 +3516,11 @@ function findElementById(root, targetId) {
   return null;
 }
 function generateLabel(propKey) {
-  const uniqueId = (0, import_utils8.generateUniqueId)("prop");
+  const uniqueId = (0, import_utils9.generateUniqueId)("prop");
   return `${uniqueId} - ${propKey}`;
 }
 function getValidElementTypes() {
-  const types = (0, import_editor_elements10.getWidgetsCache)();
+  const types = (0, import_editor_elements11.getWidgetsCache)();
   if (!types) {
     return [];
   }
@@ -3643,7 +3731,7 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
 });
 
 // src/sync/create-components-before-save.ts
-var import_editor_elements11 = require("@elementor/editor-elements");
+var import_editor_elements12 = require("@elementor/editor-elements");
 var import_store58 = require("@elementor/store");
 async function createComponentsBeforeSave({
   elements,
@@ -3708,7 +3796,7 @@ function shouldUpdateElement(element, uidToComponentId) {
   return { shouldUpdate: false, newComponentId: null };
 }
 function updateElementComponentId(elementId, componentId) {
-  (0, import_editor_elements11.updateElementSettings)({
+  (0, import_editor_elements12.updateElementSettings)({
     id: elementId,
     props: {
       component_instance: {
@@ -3805,17 +3893,17 @@ function init() {
   (0, import_store64.__registerSlice)(slice);
   (0, import_editor_panels4.__registerPanel)(panel);
   (0, import_editor_canvas8.registerElementType)(
-    TYPE,
+    COMPONENT_WIDGET_TYPE,
     (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
   );
-  (0, import_editor_v1_adapters6.registerDataHook)("dependency", "editor/documents/close", (args) => {
+  (0, import_editor_v1_adapters7.registerDataHook)("dependency", "editor/documents/close", (args) => {
     const document = (0, import_editor_documents12.getV1CurrentDocument)();
     if (document.config.type === COMPONENT_DOCUMENT_TYPE) {
       args.mode = "autosave";
     }
     return true;
   });
-  (0, import_editor_v1_adapters6.registerDataHook)("after", "preview/drop", onElementDrop);
+  (0, import_editor_v1_adapters7.registerDataHook)("after", "preview/drop", onElementDrop);
   window.elementorCommon.__beforeSave = beforeSave;
   (0, import_editor_elements_panel.injectTab)({
     id: "components",
@@ -3838,7 +3926,7 @@ function init() {
     id: "component-panel-header",
     component: ComponentPanelHeader
   });
-  (0, import_editor_v1_adapters6.registerDataHook)("after", "editor/documents/attach-preview", async () => {
+  (0, import_editor_v1_adapters7.registerDataHook)("after", "editor/documents/attach-preview", async () => {
     const { id: id2, config } = (0, import_editor_documents12.getV1CurrentDocument)();
     if (id2) {
       removeComponentStyles(id2);
@@ -3863,6 +3951,7 @@ function init() {
   import_editor_canvas8.settingsTransformersRegistry.register("component-instance", componentInstanceTransformer);
   import_editor_canvas8.settingsTransformersRegistry.register("overridable", componentOverridableTransformer);
   import_editor_canvas8.settingsTransformersRegistry.register("override", componentOverrideTransformer);
+  initRegenerateOverrideKeys();
   initMcp();
 }
 // Annotate the CommonJS export names for ESM import in node: