@elementor/editor-components 3.35.0-399 → 3.35.0-400

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "3.35.0-399",
+  "version": "3.35.0-400",
   "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-399",
-    "@elementor/editor-canvas": "3.35.0-399",
-    "@elementor/editor-controls": "3.35.0-399",
-    "@elementor/editor-documents": "3.35.0-399",
-    "@elementor/editor-editing-panel": "3.35.0-399",
-    "@elementor/editor-elements": "3.35.0-399",
-    "@elementor/editor-elements-panel": "3.35.0-399",
-    "@elementor/editor-mcp": "3.35.0-399",
-    "@elementor/editor-panels": "3.35.0-399",
-    "@elementor/editor-props": "3.35.0-399",
-    "@elementor/editor-styles-repository": "3.35.0-399",
-    "@elementor/editor-ui": "3.35.0-399",
-    "@elementor/editor-v1-adapters": "3.35.0-399",
-    "@elementor/http-client": "3.35.0-399",
+    "@elementor/editor": "3.35.0-400",
+    "@elementor/editor-canvas": "3.35.0-400",
+    "@elementor/editor-controls": "3.35.0-400",
+    "@elementor/editor-documents": "3.35.0-400",
+    "@elementor/editor-editing-panel": "3.35.0-400",
+    "@elementor/editor-elements": "3.35.0-400",
+    "@elementor/editor-elements-panel": "3.35.0-400",
+    "@elementor/editor-mcp": "3.35.0-400",
+    "@elementor/editor-panels": "3.35.0-400",
+    "@elementor/editor-props": "3.35.0-400",
+    "@elementor/editor-styles-repository": "3.35.0-400",
+    "@elementor/editor-ui": "3.35.0-400",
+    "@elementor/editor-v1-adapters": "3.35.0-400",
+    "@elementor/http-client": "3.35.0-400",
     "@elementor/icons": "^1.63.0",
-    "@elementor/mixpanel": "3.35.0-399",
-    "@elementor/query": "3.35.0-399",
-    "@elementor/schema": "3.35.0-399",
-    "@elementor/store": "3.35.0-399",
+    "@elementor/mixpanel": "3.35.0-400",
+    "@elementor/query": "3.35.0-400",
+    "@elementor/schema": "3.35.0-400",
+    "@elementor/store": "3.35.0-400",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-399",
+    "@elementor/utils": "3.35.0-400",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "3.35.0-399",
-    "@elementor/editor-current-user": "3.35.0-399"
+    "@elementor/editor-notifications": "3.35.0-400",
+    "@elementor/editor-current-user": "3.35.0-400"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/create-component-form/create-component-form.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { getElementLabel, type V1ElementData } from '@elementor/editor-elements';
+import { notify } from '@elementor/editor-notifications';
 import { Form as FormElement, ThemeProvider } from '@elementor/editor-ui';
 import { StarIcon } from '@elementor/icons';
 import { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack, TextField, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useComponents } from '../../hooks/use-components';
+import { findNonAtomicElementsInElement } from '../../prevent-non-atomic-nesting';
 import { createUnpublishedComponent } from '../../store/actions/create-unpublished-component';
 import { type ComponentFormValues } from '../../types';
 import { trackComponentEvent } from '../../utils/tracking';
@@ -46,6 +48,20 @@ export function CreateComponentForm() {
 		const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = 'elementor/editor/open-save-as-component-form';
 
 		const openPopup = ( event: CustomEvent< SaveAsComponentEventData > ) => {
+			const nonAtomicElements = findNonAtomicElementsInElement( event.detail.element );
+
+			if ( nonAtomicElements.length > 0 ) {
+				notify( {
+					type: 'default',
+					message: __(
+						'Cannot save as component - contains non-supported elements. Only atomic elements are allowed inside components.',
+						'elementor'
+					),
+					id: 'non-atomic-element-save-blocked',
+				} );
+				return;
+			}
+
 			setElement( { element: event.detail.element, elementLabel: getElementLabel( event.detail.element.id ) } );
 			setAnchorPosition( event.detail.anchorPosition );
 

package/src/init.ts

@@ -38,6 +38,7 @@ import { initRegenerateOverrideKeys } from './hooks/regenerate-override-keys';
 import { initMcp } from './mcp';
 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';
@@ -132,4 +133,6 @@ export function init() {
 	initMcp();
 
 	initCircularNestingPrevention();
+
+	initNonAtomicNestingPrevention();
 }

package/src/prevent-non-atomic-nesting.ts

@@ -0,0 +1,209 @@
+import { isAtomicWidget } from '@elementor/editor-canvas';
+import { getAllDescendants, getElementType, type V1Element } from '@elementor/editor-elements';
+import { type NotificationData, notify } from '@elementor/editor-notifications';
+import { blockCommand } from '@elementor/editor-v1-adapters';
+import { __getStore as getStore } from '@elementor/store';
+import { __ } from '@wordpress/i18n';
+
+import { type ComponentsSlice, selectCurrentComponentId } from './store/store';
+import { type ExtendedWindow } from './types';
+
+type CreateArgs = {
+	container?: V1Element;
+	model?: {
+		elType?: string;
+		widgetType?: string;
+	};
+};
+
+type MoveArgs = {
+	containers?: V1Element[];
+	container?: V1Element;
+	target?: V1Element;
+};
+
+type PasteArgs = {
+	containers?: V1Element[];
+	container?: V1Element;
+	storageType?: string;
+};
+
+export type ClipboardElement = {
+	elType?: string;
+	widgetType?: string;
+	elements?: ClipboardElement[];
+};
+
+type StorageContent = {
+	clipboard?: {
+		elements?: ClipboardElement[];
+	};
+};
+
+const NON_ATOMIC_ELEMENT_ALERT: NotificationData = {
+	type: 'default',
+	message: __( 'Cannot add this element here - only atomic elements are allowed inside components.', 'elementor' ),
+	id: 'non-atomic-element-blocked',
+};
+
+export function initNonAtomicNestingPrevention() {
+	blockCommand( {
+		command: 'document/elements/create',
+		condition: blockNonAtomicCreate,
+	} );
+
+	blockCommand( {
+		command: 'document/elements/move',
+		condition: blockNonAtomicMove,
+	} );
+
+	blockCommand( {
+		command: 'document/elements/paste',
+		condition: blockNonAtomicPaste,
+	} );
+}
+
+function isEditingComponent(): boolean {
+	const state = getStore()?.getState() as ComponentsSlice | undefined;
+
+	if ( ! state ) {
+		return false;
+	}
+
+	return selectCurrentComponentId( state ) !== null;
+}
+
+export function isElementAtomic( elementType: string ): boolean {
+	return getElementType( elementType ) !== null;
+}
+
+function blockNonAtomicCreate( args: CreateArgs ): boolean {
+	if ( ! isEditingComponent() ) {
+		return false;
+	}
+
+	const { model } = args;
+	const elementType = model?.widgetType || model?.elType;
+
+	if ( ! elementType ) {
+		return false;
+	}
+
+	if ( isElementAtomic( elementType ) ) {
+		return false;
+	}
+
+	notify( NON_ATOMIC_ELEMENT_ALERT );
+	return true;
+}
+
+function blockNonAtomicMove( args: MoveArgs ): boolean {
+	if ( ! isEditingComponent() ) {
+		return false;
+	}
+
+	const { containers = [ args.container ] } = args;
+
+	const hasNonAtomicElement = containers.some( ( container ) => {
+		if ( ! container ) {
+			return false;
+		}
+
+		const allElements = getAllDescendants( container );
+
+		return allElements.some( ( element ) => ! isAtomicWidget( element ) );
+	} );
+
+	if ( hasNonAtomicElement ) {
+		notify( NON_ATOMIC_ELEMENT_ALERT );
+	}
+
+	return hasNonAtomicElement;
+}
+
+function blockNonAtomicPaste( args: PasteArgs ): boolean {
+	if ( ! isEditingComponent() ) {
+		return false;
+	}
+
+	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 hasNonAtomicElement = hasNonAtomicElementsInTree( data.clipboard.elements );
+
+	if ( hasNonAtomicElement ) {
+		notify( NON_ATOMIC_ELEMENT_ALERT );
+	}
+
+	return hasNonAtomicElement;
+}
+
+export function hasNonAtomicElementsInTree( elements: ClipboardElement[] ): boolean {
+	for ( const element of elements ) {
+		const elementType = element.widgetType || element.elType;
+
+		if ( elementType && ! isElementAtomic( elementType ) ) {
+			return true;
+		}
+
+		if ( element.elements?.length ) {
+			if ( hasNonAtomicElementsInTree( element.elements ) ) {
+				return true;
+			}
+		}
+	}
+
+	return false;
+}
+
+export function findNonAtomicElements( elements: ClipboardElement[] ): string[] {
+	const nonAtomicElements: string[] = [];
+
+	for ( const element of elements ) {
+		const elementType = element.widgetType || element.elType;
+
+		if ( elementType && ! isElementAtomic( elementType ) ) {
+			nonAtomicElements.push( elementType );
+		}
+
+		if ( element.elements?.length ) {
+			nonAtomicElements.push( ...findNonAtomicElements( element.elements ) );
+		}
+	}
+
+	return [ ...new Set( nonAtomicElements ) ];
+}
+
+type V1ElementLike = {
+	elType?: string;
+	widgetType?: string;
+	elements?: V1ElementLike[];
+};
+
+export function findNonAtomicElementsInElement( element: V1ElementLike ): string[] {
+	const nonAtomicElements: string[] = [];
+	const elementType = element.widgetType || element.elType;
+
+	if ( elementType && ! isElementAtomic( elementType ) ) {
+		nonAtomicElements.push( elementType );
+	}
+
+	if ( element.elements?.length ) {
+		for ( const child of element.elements ) {
+			nonAtomicElements.push( ...findNonAtomicElementsInElement( child ) );
+		}
+	}
+
+	return [ ...new Set( nonAtomicElements ) ];
+}