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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "4.3.0-1034",
+  "version": "4.3.0-1035",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,31 +40,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.3.0-1034",
-    "@elementor/editor-canvas": "4.3.0-1034",
-    "@elementor/editor-controls": "4.3.0-1034",
-    "@elementor/editor-documents": "4.3.0-1034",
-    "@elementor/editor-editing-panel": "4.3.0-1034",
-    "@elementor/editor-elements": "4.3.0-1034",
-    "@elementor/editor-elements-panel": "4.3.0-1034",
-    "@elementor/editor-mcp": "4.3.0-1034",
-    "@elementor/editor-templates": "4.3.0-1034",
-    "@elementor/editor-panels": "4.3.0-1034",
-    "@elementor/editor-props": "4.3.0-1034",
-    "@elementor/editor-ui": "4.3.0-1034",
-    "@elementor/editor-v1-adapters": "4.3.0-1034",
-    "@elementor/http-client": "4.3.0-1034",
+    "@elementor/editor": "4.3.0-1035",
+    "@elementor/editor-canvas": "4.3.0-1035",
+    "@elementor/editor-controls": "4.3.0-1035",
+    "@elementor/editor-documents": "4.3.0-1035",
+    "@elementor/editor-editing-panel": "4.3.0-1035",
+    "@elementor/editor-elements": "4.3.0-1035",
+    "@elementor/editor-elements-panel": "4.3.0-1035",
+    "@elementor/editor-mcp": "4.3.0-1035",
+    "@elementor/editor-templates": "4.3.0-1035",
+    "@elementor/editor-panels": "4.3.0-1035",
+    "@elementor/editor-props": "4.3.0-1035",
+    "@elementor/editor-ui": "4.3.0-1035",
+    "@elementor/editor-v1-adapters": "4.3.0-1035",
+    "@elementor/http-client": "4.3.0-1035",
     "@elementor/icons": "~1.75.1",
-    "@elementor/events": "4.3.0-1034",
-    "@elementor/query": "4.3.0-1034",
-    "@elementor/schema": "4.3.0-1034",
-    "@elementor/store": "4.3.0-1034",
+    "@elementor/events": "4.3.0-1035",
+    "@elementor/query": "4.3.0-1035",
+    "@elementor/schema": "4.3.0-1035",
+    "@elementor/store": "4.3.0-1035",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.0-1034",
+    "@elementor/utils": "4.3.0-1035",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "4.3.0-1034",
-    "@elementor/editor-current-user": "4.3.0-1034",
-    "@elementor/editor-embedded-documents-manager": "4.3.0-1034"
+    "@elementor/editor-notifications": "4.3.0-1035",
+    "@elementor/editor-current-user": "4.3.0-1035",
+    "@elementor/editor-embedded-documents-manager": "4.3.0-1035"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/create-component-type.ts

@@ -26,6 +26,7 @@ import { type ComponentRenderContext, type ExtendedWindow } from './types';
 import { detachComponentInstance } from './utils/detach-component-instance';
 import { formatComponentElementsId } from './utils/format-component-elements-id';
 import { isProComponentsSupported, isProOutdatedForComponents } from './utils/is-pro-components-supported';
+import { reconcileComponentInstanceElements } from './utils/reconcile-component-instance-elements';
 import { switchToComponent } from './utils/switch-to-component';
 import { trackComponentEvent } from './utils/tracking';
 
@@ -219,7 +220,11 @@ function createComponentView( options: ComponentTypeOptions ): typeof TemplatedE
 
 				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 );
 

package/src/utils/reconcile-component-instance-elements.ts

@@ -0,0 +1,108 @@
+import {
+	getWidgetsCache,
+	reconcileInitialChildren,
+	type V1ElementConfig,
+	type V1ElementData,
+	type V1ElementSettingsProps,
+} from '@elementor/editor-elements';
+import { type AnyTransformable } from '@elementor/editor-props';
+import { hashString } from '@elementor/utils';
+
+import {
+	applyOverridesToSettings,
+	type ElementSettings,
+	type OverridesMapping,
+	unwrapOverridableSettings,
+} from '../components/instance-editing-panel/utils/resolve-element-settings';
+
+const ELEMENT_ID_LENGTH = 7;
+
+function overridesRecordToMapping( overrides: Record< string, unknown > ): OverridesMapping {
+	const mapping: OverridesMapping = {};
+
+	for ( const [ key, value ] of Object.entries( overrides ) ) {
+		mapping[ key ] = { value: value as AnyTransformable };
+	}
+
+	return mapping;
+}
+
+function getElementConfig( element: V1ElementData ): V1ElementConfig | undefined {
+	const type = element.elType === 'widget' ? element.widgetType : element.elType;
+
+	if ( ! type ) {
+		return undefined;
+	}
+
+	return getWidgetsCache()?.[ type ];
+}
+
+/**
+ * Children inserted by dependency rules come from static `default_model` config, so
+ * `reconcileInitialChildren` gives them random ids. Replace them with ids derived from the
+ * parent id and the position in the subtree, so the instance-scoped hashing applied later by
+ * `formatComponentElementsId` is stable across renders. Keep in sync with `derive_ids()` in
+ * `modules/components/utils/reconcile-component-instance-elements.php`.
+ *
+ * Instance children are not directly editable, so overwriting the ids of a model that
+ * `reconcileInitialChildren` restored from the stash is safe and keeps the canvas aligned
+ * with the render, which has no stash to restore from.
+ *
+ * @param element The inserted element to assign ids to, recursively.
+ * @param seed    Stable string the element's id is hashed from.
+ */
+function deriveIds( element: V1ElementData, seed: string ): V1ElementData {
+	const id = hashString( seed, ELEMENT_ID_LENGTH );
+
+	return {
+		...element,
+		id,
+		elements: ( element.elements ?? [] ).map( ( child, index ) => deriveIds( child, `${ id }_${ index }` ) ),
+	};
+}
+
+function reconcileElementTree( element: V1ElementData, overridesMapping: OverridesMapping ): V1ElementData {
+	const elementConfig = getElementConfig( element );
+	const withOverrides = applyOverridesToSettings( ( element.settings ?? {} ) as ElementSettings, overridesMapping );
+	const effectiveSettings = unwrapOverridableSettings( withOverrides ) as V1ElementSettingsProps;
+
+	const originalChildren = element.elements ?? [];
+	const originalChildIds = new Set( originalChildren.map( ( child ) => child.id ) );
+
+	const attributes: {
+		elements?: V1ElementData[];
+		settings?: V1ElementSettingsProps;
+	} = {
+		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,
+	};
+}
+
+export function reconcileComponentInstanceElements(
+	elements: V1ElementData[],
+	overrides: Record< string, unknown > = {}
+): V1ElementData[] {
+	const overridesMapping = overridesRecordToMapping( overrides );
+
+	return elements.map( ( element ) => reconcileElementTree( element, overridesMapping ) );
+}