@elementor/editor-components 4.3.0-1033 → 4.3.0-1035

package/dist/index.mjs

@@ -2612,6 +2612,66 @@ function formatComponentElementsId(elements, path) {
   });
 }
 
+// src/utils/reconcile-component-instance-elements.ts
+import {
+  getWidgetsCache as getWidgetsCache2,
+  reconcileInitialChildren
+} from "@elementor/editor-elements";
+import { hashString as hashString2 } from "@elementor/utils";
+var ELEMENT_ID_LENGTH2 = 7;
+function overridesRecordToMapping(overrides) {
+  const mapping = {};
+  for (const [key, value] of Object.entries(overrides)) {
+    mapping[key] = { value };
+  }
+  return mapping;
+}
+function getElementConfig(element) {
+  const type = element.elType === "widget" ? element.widgetType : element.elType;
+  if (!type) {
+    return void 0;
+  }
+  return getWidgetsCache2()?.[type];
+}
+function deriveIds(element, seed) {
+  const id = hashString2(seed, ELEMENT_ID_LENGTH2);
+  return {
+    ...element,
+    id,
+    elements: (element.elements ?? []).map((child, index) => deriveIds(child, `${id}_${index}`))
+  };
+}
+function reconcileElementTree(element, overridesMapping) {
+  const elementConfig = getElementConfig(element);
+  const withOverrides = applyOverridesToSettings(element.settings ?? {}, overridesMapping);
+  const effectiveSettings = unwrapOverridableSettings(withOverrides);
+  const originalChildren = element.elements ?? [];
+  const originalChildIds = new Set(originalChildren.map((child) => child.id));
+  const attributes = {
+    elements: [...originalChildren],
+    settings: effectiveSettings
+  };
+  if (elementConfig?.children_dependencies?.length) {
+    reconcileInitialChildren({
+      elementId: element.id,
+      elementConfig,
+      attributes
+    });
+  }
+  const reconciledChildren = (attributes.elements ?? []).map(
+    (child) => originalChildIds.has(child.id) ? child : deriveIds(child, `${element.id}_${child.elType}`)
+  ).map((child) => reconcileElementTree(child, overridesMapping));
+  return {
+    ...element,
+    settings: effectiveSettings,
+    elements: reconciledChildren
+  };
+}
+function reconcileComponentInstanceElements(elements, overrides = {}) {
+  const overridesMapping = overridesRecordToMapping(overrides);
+  return elements.map((element) => reconcileElementTree(element, overridesMapping));
+}
+
 // src/utils/switch-to-component.ts
 import { invalidateDocumentData, switchToDocument } from "@elementor/editor-documents";
 import { getCurrentDocumentContainer, selectElement as selectElement2 } from "@elementor/editor-elements";
@@ -2788,7 +2848,11 @@ function createComponentView(options) {
         };
         const instanceId = this.model.get("id");
         const elements = componentInstance.elements ?? [];
-        const formattedElements = formatComponentElementsId(elements, [instanceId]);
+        const reconciledElements = reconcileComponentInstanceElements(
+          elements,
+          componentInstance.overrides ?? {}
+        );
+        const formattedElements = formatComponentElementsId(reconciledElements, [instanceId]);
         this.collection = legacyWindow.elementor.createBackboneElementsCollection(formattedElements);
         this.collection.models.forEach(setInactiveRecursively);
         settings.component_instance = "<template data-children-placeholder></template>";