@elementor/editor-components 4.0.0-564 → 4.0.0-591

package/src/init.ts

@@ -1,20 +1,13 @@
-import { injectIntoLogic, injectIntoTop } from '@elementor/editor';
+import { injectIntoLogic } from '@elementor/editor';
 import {
 	type CreateTemplatedElementTypeOptions,
 	registerElementType,
 	settingsTransformersRegistry,
 } from '@elementor/editor-canvas';
-import { registerControlReplacement } from '@elementor/editor-controls';
 import { getV1CurrentDocument } from '@elementor/editor-documents';
-import {
-	FIELD_TYPE,
-	injectIntoPanelHeaderTop,
-	registerEditingPanelReplacement,
-	registerFieldIndicator,
-} from '@elementor/editor-editing-panel';
+import { registerEditingPanelReplacement } from '@elementor/editor-editing-panel';
 import { type V1ElementData } from '@elementor/editor-elements';
 import { injectTab } from '@elementor/editor-elements-panel';
-import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { stylesRepository } from '@elementor/editor-styles-repository';
 import { registerDataHook } from '@elementor/editor-v1-adapters';
 import { __registerSlice as registerSlice } from '@elementor/store';
@@ -23,54 +16,31 @@ import { __ } from '@wordpress/i18n';
 import { componentInstanceTransformer } from './component-instance-transformer';
 import { componentOverridableTransformer } from './component-overridable-transformer';
 import { componentOverrideTransformer } from './component-override-transformer';
-import { ComponentPanelHeader } from './components/component-panel-header/component-panel-header';
-import { panel as componentPropertiesPanel } from './components/component-properties-panel/component-properties-panel';
 import { Components } from './components/components-tab/components';
-import { COMPONENT_DOCUMENT_TYPE, OVERRIDABLE_PROP_REPLACEMENT_ID } from './components/consts';
-import { CreateComponentForm } from './components/create-component-form/create-component-form';
-import { EditComponent } from './components/edit-component/edit-component';
 import { openEditModeDialog } from './components/in-edit-mode';
 import { InstanceEditingPanel } from './components/instance-editing-panel/instance-editing-panel';
-import { OverridablePropControl } from './components/overridable-props/overridable-prop-control';
-import { OverridablePropIndicator } from './components/overridable-props/overridable-prop-indicator';
+import { LoadTemplateComponents } from './components/load-template-components';
 import { COMPONENT_WIDGET_TYPE, createComponentType } from './create-component-type';
-import { initMcp } from './mcp';
+import { initExtended } from './extended/init';
 import { PopulateStore } from './populate-store';
 import { initCircularNestingPrevention } from './prevent-circular-nesting';
-import { initNonAtomicNestingPrevention } from './prevent-non-atomic-nesting';
-import { componentOverridablePropTypeUtil } from './prop-types/component-overridable-prop-type';
 import { loadComponentsAssets } from './store/actions/load-components-assets';
 import { removeComponentStyles } from './store/actions/remove-component-styles';
 import { componentsStylesProvider } from './store/components-styles-provider';
 import { slice } from './store/store';
 import { beforeSave } from './sync/before-save';
-import { initCleanupOverridablePropsOnDelete } from './sync/cleanup-overridable-props-on-delete';
-import { initHandleComponentEditModeContainer } from './sync/handle-component-edit-mode-container';
 import { initLoadComponentDataAfterInstanceAdded } from './sync/load-component-data-after-instance-added';
-import { initRevertOverridablesOnCopyOrDuplicate } from './sync/revert-overridables-on-copy-or-duplicate';
 import { type ExtendedWindow } from './types';
-import { onElementDrop } from './utils/tracking';
 
 export function init() {
 	stylesRepository.register( componentsStylesProvider );
 
 	registerSlice( slice );
-	registerPanel( componentPropertiesPanel );
 
 	registerElementType( COMPONENT_WIDGET_TYPE, ( options: CreateTemplatedElementTypeOptions ) =>
 		createComponentType( { ...options, showLockedByModal: openEditModeDialog } )
 	);
 
-	registerDataHook( 'dependency', 'editor/documents/close', ( args ) => {
-		const document = getV1CurrentDocument();
-		if ( document.config.type === COMPONENT_DOCUMENT_TYPE ) {
-			args.mode = 'autosave';
-		}
-		return true;
-	} );
-
-	registerDataHook( 'after', 'preview/drop', onElementDrop );
-
 	( window as unknown as ExtendedWindow ).elementorCommon.__beforeSave = beforeSave;
 
 	injectTab( {
@@ -80,26 +50,11 @@ export function init() {
 		position: 1,
 	} );
 
-	injectIntoTop( {
-		id: 'create-component-popup',
-		component: CreateComponentForm,
-	} );
-
 	injectIntoLogic( {
 		id: 'components-populate-store',
 		component: PopulateStore,
 	} );
 
-	injectIntoTop( {
-		id: 'edit-component',
-		component: EditComponent,
-	} );
-
-	injectIntoPanelHeaderTop( {
-		id: 'component-panel-header',
-		component: ComponentPanelHeader,
-	} );
-
 	registerDataHook( 'after', 'editor/documents/attach-preview', async () => {
 		const { id, config } = getV1CurrentDocument();
 
@@ -110,17 +65,9 @@ export function init() {
 		await loadComponentsAssets( ( config?.elements as V1ElementData[] ) ?? [] );
 	} );
 
-	registerFieldIndicator( {
-		fieldType: FIELD_TYPE.SETTINGS,
-		id: 'component-overridable-prop',
-		priority: 1,
-		indicator: OverridablePropIndicator,
-	} );
-
-	registerControlReplacement( {
-		id: OVERRIDABLE_PROP_REPLACEMENT_ID,
-		component: OverridablePropControl,
-		condition: ( { value } ) => componentOverridablePropTypeUtil.isValid( value ),
+	injectIntoLogic( {
+		id: 'templates',
+		component: LoadTemplateComponents,
 	} );
 
 	registerEditingPanelReplacement( {
@@ -133,17 +80,9 @@ export function init() {
 	settingsTransformersRegistry.register( 'overridable', componentOverridableTransformer );
 	settingsTransformersRegistry.register( 'override', componentOverrideTransformer );
 
-	initCleanupOverridablePropsOnDelete();
-
-	initMcp();
-
 	initCircularNestingPrevention();
 
-	initNonAtomicNestingPrevention();
-
 	initLoadComponentDataAfterInstanceAdded();
 
-	initHandleComponentEditModeContainer();
-
-	initRevertOverridablesOnCopyOrDuplicate();
+	initExtended();
 }

package/src/sync/before-save.ts

@@ -2,11 +2,7 @@ import { type V1Document } from '@elementor/editor-documents';
 import { type V1Element, type V1ElementData } from '@elementor/editor-elements';
 
 import { type DocumentSaveStatus } from '../types';
-import { createComponentsBeforeSave } from './create-components-before-save';
 import { publishDraftComponentsInPageBeforeSave } from './publish-draft-components-in-page-before-save';
-import { setComponentOverridablePropsSettingsBeforeSave } from './set-component-overridable-props-settings-before-save';
-import { updateArchivedComponentBeforeSave } from './update-archived-component-before-save';
-import { updateComponentTitleBeforeSave } from './update-component-title-before-save';
 
 type Options = {
 	container: V1Element & {
@@ -23,30 +19,5 @@ type Options = {
 export const beforeSave = ( { container, status }: Options ) => {
 	const elements = container?.model.get( 'elements' ).toJSON?.() ?? [];
 
-	return Promise.all( [
-		syncComponents( { elements, status } ),
-		setComponentOverridablePropsSettingsBeforeSave( { container } ),
-	] );
-};
-
-// These operations run sequentially to prevent race conditions when multiple
-// edits occur on the same component simultaneously.
-// TODO: Consolidate these into a single PUT /components endpoint.
-const syncComponents = async ( { elements, status }: { elements: V1ElementData[]; status: DocumentSaveStatus } ) => {
-	// This order is important - first update existing components, then create new components,
-	// Since new component validation depends on the existing components (preventing duplicate names).
-	await updateExistingComponentsBeforeSave( { elements, status } );
-	await createComponentsBeforeSave( { elements, status } );
-};
-
-const updateExistingComponentsBeforeSave = async ( {
-	elements,
-	status,
-}: {
-	elements: V1ElementData[];
-	status: DocumentSaveStatus;
-} ) => {
-	await updateComponentTitleBeforeSave( status );
-	await updateArchivedComponentBeforeSave( status );
-	await publishDraftComponentsInPageBeforeSave( { elements, status } );
+	return publishDraftComponentsInPageBeforeSave( { elements, status } );
 };

package/src/types.ts

@@ -1,5 +1,5 @@
 import { type RenderContext } from '@elementor/editor-canvas';
-import { type V1ElementData } from '@elementor/editor-elements';
+import { type V1Element, type V1ElementData } from '@elementor/editor-elements';
 import { type PropValue, type TransformablePropValue } from '@elementor/editor-props';
 import type { StyleDefinition } from '@elementor/editor-styles';
 
@@ -81,6 +81,13 @@ export type ExtendedWindow = Window & {
 		};
 		storage: ElementorStorage;
 	};
+	elementor?: {
+		getContainerByKeyValue?: ( args: {
+			key: string;
+			value: string;
+			parent?: V1Element[ 'view' ];
+		} ) => V1Element | null;
+	};
 };
 
 export type ComponentOverridable = {

package/src/utils/component-name-validation.ts

@@ -1,6 +1,6 @@
 import { __getState as getState } from '@elementor/store';
 
-import { createSubmitComponentSchema } from '../components/create-component-form/utils/component-form-schema';
+import { createSubmitComponentSchema } from '../extended/components/create-component-form/utils/component-form-schema';
 import { selectComponents } from '../store/store';
 
 type ValidationResult = { isValid: true; errorMessage: null } | { isValid: false; errorMessage: string };

package/src/{components/create-component-form/utils/replace-element-with-component.ts → utils/create-component-model.ts}

@@ -1,19 +1,11 @@
-import { replaceElement, type V1ElementData, type V1ElementModelProps } from '@elementor/editor-elements';
+import { type V1ElementModelProps } from '@elementor/editor-elements';
 
-type ComponentInstanceParams = {
+export type ComponentInstanceParams = {
 	id?: number;
 	name: string;
 	uid: string;
 };
 
-export const replaceElementWithComponent = async ( element: V1ElementData, component: ComponentInstanceParams ) => {
-	return await replaceElement( {
-		currentElement: element,
-		newElement: createComponentModel( component ),
-		withHistory: false,
-	} );
-};
-
 export const createComponentModel = ( component: ComponentInstanceParams ): Omit< V1ElementModelProps, 'id' > => {
 	return {
 		elType: 'widget',

package/src/utils/filter-valid-overridable-props.ts

@@ -1,18 +1,22 @@
-import { getElementSetting } from '@elementor/editor-elements';
-
-import { getOverridableProp } from '../components/overridable-props/utils/get-overridable-prop';
 import { type ComponentInstanceOverride } from '../prop-types/component-instance-overrides-prop-type';
 import { componentInstanceOverridesPropTypeUtil } from '../prop-types/component-instance-overrides-prop-type';
 import { componentInstancePropTypeUtil } from '../prop-types/component-instance-prop-type';
 import { componentOverridablePropTypeUtil } from '../prop-types/component-overridable-prop-type';
 import { type OverridableProp, type OverridableProps } from '../types';
+import { getContainerByOriginId } from './get-container-by-origin-id';
+import { getOverridableProp } from './get-overridable-prop';
 import { extractInnerOverrideInfo } from './overridable-props-utils';
 
-export function filterValidOverridableProps( overridableProps: OverridableProps ): OverridableProps {
+export function filterValidOverridableProps(
+	overridableProps: OverridableProps,
+	// instanceElementId is used to find the component inner elements,
+	// and should be passed when editing component instance (not in component edit mode)
+	instanceElementId?: string
+): OverridableProps {
 	const validProps: Record< string, OverridableProp > = {};
 
 	for ( const [ key, prop ] of Object.entries( overridableProps.props ) ) {
-		if ( isExposedPropValid( prop ) ) {
+		if ( isExposedPropValid( prop, instanceElementId ) ) {
 			validProps[ key ] = prop;
 		}
 	}
@@ -31,13 +35,19 @@ export function filterValidOverridableProps( overridableProps: OverridableProps
 	return { props: validProps, groups: filteredGroups };
 }
 
-export function isExposedPropValid( prop: OverridableProp ): boolean {
+export function isExposedPropValid( prop: OverridableProp, instanceElementId?: string ): boolean {
 	if ( ! prop.originPropFields ) {
 		// if no originPropFields - the prop is on the widget level itself, therefore no need to lookup for a corresponding component's overridables
 		return true;
 	}
 
-	const setting = getElementSetting( prop.elementId, 'component_instance' );
+	const innerComponentInstanceElement = getContainerByOriginId( prop.elementId, instanceElementId );
+
+	if ( ! innerComponentInstanceElement ) {
+		return false;
+	}
+
+	const setting = innerComponentInstanceElement.settings?.get( 'component_instance' ) ?? null;
 	const componentInstance = componentInstancePropTypeUtil.extract( setting );
 
 	if ( ! componentInstance?.component_id?.value ) {
@@ -59,7 +69,7 @@ export function isExposedPropValid( prop: OverridableProp ): boolean {
 		return false;
 	}
 
-	return isExposedPropValid( innerOverridableProp );
+	return isExposedPropValid( innerOverridableProp, innerComponentInstanceElement.id );
 }
 
 function findOverrideByOuterKey(

package/src/utils/format-component-elements-id.ts

@@ -0,0 +1,20 @@
+import { type V1ElementData } from '@elementor/editor-elements';
+import { hashString } from '@elementor/utils';
+
+const ELEMENT_ID_LENGTH = 7;
+// The purpose of this function is to solve the issue of component inner elements having the same ID
+// when there are multiple instances of the same component on a page.
+// We change the ID of the inner elements to a hash of the nesting path of the element and the element's originalID.
+export function formatComponentElementsId( elements: V1ElementData[], path: string[] ): V1ElementData[] {
+	return elements.map( ( element ) => {
+		const nestingPath = [ ...path, element.id ];
+		const id = hashString( nestingPath.join( '_' ), ELEMENT_ID_LENGTH );
+
+		return {
+			...element,
+			id,
+			originId: element.id,
+			elements: element.elements ? formatComponentElementsId( element.elements, nestingPath ) : undefined,
+		};
+	} );
+}

package/src/utils/get-container-by-origin-id.ts

@@ -0,0 +1,46 @@
+import { getContainer, type V1Element } from '@elementor/editor-elements';
+
+import { type ExtendedWindow } from '../types';
+
+/**
+ * Resolves a container by its origin ID, with optional scoping to a component instance.
+ *
+ * When component instances are rendered, their inner elements get prefixed IDs
+ * (e.g., `{instanceId}_{originalId}`), but store data uses original IDs.
+ * This function bridges between the two by searching for elements with a matching `originId`.
+ *
+ * @param originElementId   - The original (unprefixed) element ID from store data
+ * @param instanceElementId - Optional instance widget ID to scope the search
+ *
+ * @return The container with prefixed runtime ID, or null if not found
+ *
+ * @example
+ * // Component editing mode (no prefixing)
+ * getContainerByOriginId('element-1') // returns container with id='element-1'
+ *
+ * @example
+ * // Instance editing mode (with hash prefixing)
+ * getContainerByOriginId('element-1', 'instance-abc')
+ * // returns container with id='{hash}_element-1' and originId='element-1'
+ */
+export function getContainerByOriginId( originElementId: string, instanceElementId?: string ): V1Element | null {
+	if ( ! instanceElementId ) {
+		return getContainer( originElementId );
+	}
+
+	const instanceContainer = getContainer( instanceElementId );
+
+	if ( ! instanceContainer ) {
+		return null;
+	}
+
+	const legacyWindow = window as unknown as ExtendedWindow;
+
+	return (
+		legacyWindow.elementor?.getContainerByKeyValue?.( {
+			key: 'originId',
+			value: originElementId,
+			parent: instanceContainer.view,
+		} ) ?? null
+	);
+}

package/src/{components/overridable-props/utils → utils}/get-overridable-prop.ts

@@ -1,7 +1,7 @@
 import { __getState as getState } from '@elementor/store';
 
-import { selectOverridableProps } from '../../../store/store';
-import { type OverridableProp } from '../../../types';
+import { selectOverridableProps } from '../store/store';
+import { type OverridableProp } from '../types';
 
 export function getOverridableProp( {
 	componentId,

package/src/utils/switch-to-component.ts

@@ -1,7 +1,6 @@
 import { invalidateDocumentData, switchToDocument } from '@elementor/editor-documents';
 import { getCurrentDocumentContainer, selectElement } from '@elementor/editor-elements';
-
-import { expandNavigator } from './expand-navigator';
+import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
 
 export async function switchToComponent(
 	componentId: number,
@@ -28,6 +27,10 @@ export async function switchToComponent(
 	}
 }
 
+export async function expandNavigator() {
+	await runCommand( 'navigator/expand-all' );
+}
+
 function getSelector( element?: HTMLElement | null, componentInstanceId?: string | null ): string | undefined {
 	if ( element ) {
 		return buildUniqueSelector( element );

package/src/hooks/use-component-instance-settings.ts

@@ -1,15 +0,0 @@
-import { useElement } from '@elementor/editor-editing-panel';
-import { useElementSetting } from '@elementor/editor-elements';
-
-import {
-	componentInstancePropTypeUtil,
-	type ComponentInstancePropValue,
-} from '../prop-types/component-instance-prop-type';
-
-export function useComponentInstanceSettings() {
-	const { element } = useElement();
-
-	const settings = useElementSetting< ComponentInstancePropValue >( element.id, 'component_instance' );
-
-	return componentInstancePropTypeUtil.extract( settings );
-}

package/src/store/actions/delete-overridable-prop.ts

@@ -1,56 +0,0 @@
-import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
-
-import { type ComponentId } from '../../types';
-import { revertElementOverridableSetting } from '../../utils/revert-overridable-settings';
-import { type Source, trackComponentEvent } from '../../utils/tracking';
-import { selectCurrentComponent, selectOverridableProps, slice } from '../store';
-import { removePropFromAllGroups } from '../utils/groups-transformers';
-
-type DeletePropParams = {
-	componentId: ComponentId;
-	propKey: string;
-	source: Source;
-};
-
-export function deleteOverridableProp( { componentId, propKey, source }: DeletePropParams ): void {
-	const overridableProps = selectOverridableProps( getState(), componentId );
-
-	if ( ! overridableProps ) {
-		return;
-	}
-
-	const prop = overridableProps.props[ propKey ];
-
-	if ( ! prop ) {
-		return;
-	}
-
-	revertElementOverridableSetting( prop.elementId, prop.propKey, prop.originValue, propKey );
-
-	const { [ propKey ]: removedProp, ...remainingProps } = overridableProps.props;
-
-	const updatedGroups = removePropFromAllGroups( overridableProps.groups, propKey );
-
-	dispatch(
-		slice.actions.setOverridableProps( {
-			componentId,
-			overridableProps: {
-				...overridableProps,
-				props: remainingProps,
-				groups: updatedGroups,
-			},
-		} )
-	);
-
-	const currentComponent = selectCurrentComponent( getState() );
-
-	trackComponentEvent( {
-		action: 'propertyRemoved',
-		source,
-		component_uid: currentComponent?.uid,
-		property_id: removedProp.overrideKey,
-		property_path: removedProp.propKey,
-		property_name: removedProp.label,
-		element_type: removedProp.widgetType ?? removedProp.elType,
-	} );
-}

package/src/utils/expand-navigator.ts

@@ -1,5 +0,0 @@
-import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
-
-export async function expandNavigator() {
-	await runCommand( 'navigator/expand-all' );
-}