@elementor/editor-components 3.35.0-395 → 3.35.0-396

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "3.35.0-395",
+  "version": "3.35.0-396",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,30 +40,30 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.35.0-395",
-    "@elementor/editor-canvas": "3.35.0-395",
-    "@elementor/editor-controls": "3.35.0-395",
-    "@elementor/editor-documents": "3.35.0-395",
-    "@elementor/editor-editing-panel": "3.35.0-395",
-    "@elementor/editor-elements": "3.35.0-395",
-    "@elementor/editor-elements-panel": "3.35.0-395",
-    "@elementor/editor-mcp": "3.35.0-395",
-    "@elementor/editor-panels": "3.35.0-395",
-    "@elementor/editor-props": "3.35.0-395",
-    "@elementor/editor-styles-repository": "3.35.0-395",
-    "@elementor/editor-ui": "3.35.0-395",
-    "@elementor/editor-v1-adapters": "3.35.0-395",
-    "@elementor/http-client": "3.35.0-395",
+    "@elementor/editor": "3.35.0-396",
+    "@elementor/editor-canvas": "3.35.0-396",
+    "@elementor/editor-controls": "3.35.0-396",
+    "@elementor/editor-documents": "3.35.0-396",
+    "@elementor/editor-editing-panel": "3.35.0-396",
+    "@elementor/editor-elements": "3.35.0-396",
+    "@elementor/editor-elements-panel": "3.35.0-396",
+    "@elementor/editor-mcp": "3.35.0-396",
+    "@elementor/editor-panels": "3.35.0-396",
+    "@elementor/editor-props": "3.35.0-396",
+    "@elementor/editor-styles-repository": "3.35.0-396",
+    "@elementor/editor-ui": "3.35.0-396",
+    "@elementor/editor-v1-adapters": "3.35.0-396",
+    "@elementor/http-client": "3.35.0-396",
     "@elementor/icons": "^1.63.0",
-    "@elementor/mixpanel": "3.35.0-395",
-    "@elementor/query": "3.35.0-395",
-    "@elementor/schema": "3.35.0-395",
-    "@elementor/store": "3.35.0-395",
+    "@elementor/mixpanel": "3.35.0-396",
+    "@elementor/query": "3.35.0-396",
+    "@elementor/schema": "3.35.0-396",
+    "@elementor/store": "3.35.0-396",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-395",
+    "@elementor/utils": "3.35.0-396",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "3.35.0-395",
-    "@elementor/editor-current-user": "3.35.0-395"
+    "@elementor/editor-notifications": "3.35.0-396",
+    "@elementor/editor-current-user": "3.35.0-396"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/hooks/regenerate-override-keys.ts

@@ -1,4 +1,4 @@
-import { getContainer, updateElementSettings, type V1Element } from '@elementor/editor-elements';
+import { getAllDescendants, getContainer, updateElementSettings, type V1Element } from '@elementor/editor-elements';
 import { registerDataHook } from '@elementor/editor-v1-adapters';
 import { generateUniqueId } from '@elementor/utils';
 
@@ -42,13 +42,7 @@ function regenerateOverrideKeysRecursive( elementId: string ) {
 		return;
 	}
 
-	getAllElements( container ).forEach( regenerateOverrideKeys );
-}
-
-function getAllElements( container: V1Element ): V1Element[] {
-	const children = ( container.children ?? [] ).flatMap( getAllElements ) ?? [];
-
-	return [ container, ...children ];
+	getAllDescendants( container ).forEach( regenerateOverrideKeys );
 }
 
 function regenerateOverrideKeys( element: V1Element ) {

package/src/init.ts

@@ -37,6 +37,7 @@ import { COMPONENT_WIDGET_TYPE, createComponentType } from './create-component-t
 import { initRegenerateOverrideKeys } from './hooks/regenerate-override-keys';
 import { initMcp } from './mcp';
 import { PopulateStore } from './populate-store';
+import { initCircularNestingPrevention } from './prevent-circular-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';
@@ -129,4 +130,6 @@ export function init() {
 	initRegenerateOverrideKeys();
 
 	initMcp();
+
+	initCircularNestingPrevention();
 }

package/src/prevent-circular-nesting.ts

@@ -0,0 +1,214 @@
+import { getAllDescendants, type V1Element } from '@elementor/editor-elements';
+import { type NotificationData, notify } from '@elementor/editor-notifications';
+import { blockCommand } from '@elementor/editor-v1-adapters';
+import { __getState as getState } from '@elementor/store';
+import { __ } from '@wordpress/i18n';
+
+import { type ComponentInstanceProp } from './prop-types/component-instance-prop-type';
+import { type ComponentsSlice, selectCurrentComponentId, selectPath } from './store/store';
+import { type ExtendedWindow } from './types';
+
+const COMPONENT_TYPE = 'e-component';
+
+type CreateArgs = {
+	container?: V1Element;
+	model?: {
+		elType?: string;
+		widgetType?: string;
+		settings?: {
+			component_instance?: ComponentInstanceProp;
+		};
+	};
+};
+
+type MoveArgs = {
+	containers?: V1Element[];
+	container?: V1Element;
+	target?: V1Element;
+};
+
+type PasteArgs = {
+	containers?: V1Element[];
+	container?: V1Element;
+	storageType?: string;
+};
+
+export type ClipboardElement = {
+	widgetType?: string;
+	settings?: {
+		component_instance?: ComponentInstanceProp;
+	};
+	elements?: ClipboardElement[];
+};
+
+type StorageContent = {
+	clipboard?: {
+		elements?: ClipboardElement[];
+	};
+};
+
+const COMPONENT_CIRCULAR_NESTING_ALERT: NotificationData = {
+	type: 'default',
+	message: __( 'Cannot add this component here - it would create a circular reference.', 'elementor' ),
+	id: 'circular-component-nesting-blocked',
+};
+
+export function initCircularNestingPrevention() {
+	blockCommand( {
+		command: 'document/elements/create',
+		condition: blockCircularCreate,
+	} );
+
+	blockCommand( {
+		command: 'document/elements/move',
+		condition: blockCircularMove,
+	} );
+
+	blockCommand( {
+		command: 'document/elements/paste',
+		condition: blockCircularPaste,
+	} );
+}
+
+// Note that this function only checks for direct circular nesting, not indirect nesting
+export function wouldCreateCircularNesting( componentIdToAdd: number | string | undefined ): boolean {
+	if ( componentIdToAdd === undefined ) {
+		return false;
+	}
+
+	const state = getState() as ComponentsSlice;
+	const currentComponentId = selectCurrentComponentId( state );
+	const path = selectPath( state );
+
+	if ( currentComponentId === null ) {
+		return false;
+	}
+
+	if ( componentIdToAdd === currentComponentId ) {
+		return true;
+	}
+
+	return path.some( ( item ) => item.componentId === componentIdToAdd );
+}
+
+function extractComponentIdFromModel( model: CreateArgs[ 'model' ] ): number | string | null {
+	if ( ! model ) {
+		return null;
+	}
+
+	const isComponent = model.widgetType === COMPONENT_TYPE;
+
+	if ( ! isComponent ) {
+		return null;
+	}
+
+	return model.settings?.component_instance?.value?.component_id?.value ?? null;
+}
+
+function extractComponentIdFromElement( element: ClipboardElement ): number | string | null {
+	if ( element.widgetType !== COMPONENT_TYPE ) {
+		return null;
+	}
+
+	return element.settings?.component_instance?.value?.component_id?.value ?? null;
+}
+
+export function extractComponentIdsFromElements( elements: ClipboardElement[] ): Array< number | string > {
+	const ids: Array< number | string > = [];
+
+	for ( const element of elements ) {
+		const componentId = extractComponentIdFromElement( element );
+
+		if ( componentId !== null ) {
+			ids.push( componentId );
+		}
+
+		if ( element.elements?.length ) {
+			ids.push( ...extractComponentIdsFromElements( element.elements ) );
+		}
+	}
+
+	return ids;
+}
+
+function extractComponentIdFromContainer( container: V1Element ): number | string | null {
+	const widgetType = container.model?.get?.( 'widgetType' );
+
+	if ( widgetType !== COMPONENT_TYPE ) {
+		return null;
+	}
+
+	const settings = container.model?.get?.( 'settings' ) as { get?: ( key: string ) => unknown } | undefined;
+	const componentInstance = settings?.get?.( 'component_instance' ) as ComponentInstanceProp | undefined;
+
+	return componentInstance?.value?.component_id?.value ?? null;
+}
+
+function blockCircularCreate( args: CreateArgs ): boolean {
+	const componentId = extractComponentIdFromModel( args.model );
+
+	if ( componentId === null ) {
+		return false;
+	}
+
+	const isBlocked = wouldCreateCircularNesting( componentId );
+
+	if ( isBlocked ) {
+		notify( COMPONENT_CIRCULAR_NESTING_ALERT );
+	}
+
+	return isBlocked;
+}
+
+function blockCircularMove( args: MoveArgs ): boolean {
+	const { containers = [ args.container ] } = args;
+
+	const hasCircularComponent = containers.some( ( container ) => {
+		if ( ! container ) {
+			return false;
+		}
+
+		const allElements = getAllDescendants( container );
+
+		return allElements.some( ( element ) => {
+			const componentId = extractComponentIdFromContainer( element );
+
+			if ( componentId === null ) {
+				return false;
+			}
+
+			return wouldCreateCircularNesting( componentId );
+		} );
+	} );
+
+	if ( hasCircularComponent ) {
+		notify( COMPONENT_CIRCULAR_NESTING_ALERT );
+	}
+
+	return hasCircularComponent;
+}
+
+function blockCircularPaste( args: PasteArgs ): boolean {
+	const { storageType } = args;
+
+	if ( storageType !== 'localstorage' ) {
+		return false;
+	}
+
+	const data = (
+		window as unknown as ExtendedWindow & { elementorCommon?: { storage?: { get: () => StorageContent } } }
+	 )?.elementorCommon?.storage?.get();
+
+	if ( ! data?.clipboard?.elements ) {
+		return false;
+	}
+
+	const allComponentIds = extractComponentIdsFromElements( data.clipboard.elements );
+	const hasCircularComponent = allComponentIds.some( wouldCreateCircularNesting );
+
+	if ( hasCircularComponent ) {
+		notify( COMPONENT_CIRCULAR_NESTING_ALERT );
+	}
+
+	return hasCircularComponent;
+}

package/src/utils/tracking.ts

@@ -20,7 +20,7 @@ export const trackComponentEvent = ( { action, ...data }: ComponentEventData ) =
 };
 
 export const onElementDrop = ( _args: unknown, element: V1Element ) => {
-	if ( ! ( element.model.get( 'widgetType' ) === 'e-component' ) ) {
+	if ( ! ( element?.model?.get( 'widgetType' ) === 'e-component' ) ) {
 		return;
 	}