@elementor/editor-components 3.35.0-475 → 3.35.0-476

package/package.json

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

package/src/components/edit-component/component-modal.tsx

@@ -7,11 +7,11 @@ import { useCanvasDocument } from '../../hooks/use-canvas-document';
 import { useElementRect } from '../../hooks/use-element-rect';
 
 type ModalProps = {
-	element: HTMLElement;
+	topLevelElementDom: HTMLElement | null;
 	onClose: () => void;
 };
 
-export function ComponentModal( { element, onClose }: ModalProps ) {
+export function ComponentModal( { topLevelElementDom, onClose }: ModalProps ) {
 	const canvasDocument = useCanvasDocument();
 
 	useEffect( () => {
@@ -35,14 +35,23 @@ export function ComponentModal( { element, onClose }: ModalProps ) {
 	return createPortal(
 		<>
 			<BlockEditPage />
-			<Backdrop canvas={ canvasDocument } element={ element } onClose={ onClose } />
+			<Backdrop canvas={ canvasDocument } element={ topLevelElementDom } onClose={ onClose } />
 		</>,
 		canvasDocument.body
 	);
 }
 
-function Backdrop( { canvas, element, onClose }: { canvas: HTMLDocument; element: HTMLElement; onClose: () => void } ) {
+function Backdrop( {
+	canvas,
+	element,
+	onClose,
+}: {
+	canvas: HTMLDocument;
+	element: HTMLElement | null;
+	onClose: () => void;
+} ) {
 	const rect = useElementRect( element );
+	const clipPath = element ? getRectPath( rect, canvas.defaultView as Window ) : undefined;
 	const backdropStyle: CSSProperties = {
 		position: 'fixed',
 		top: 0,
@@ -53,7 +62,7 @@ function Backdrop( { canvas, element, onClose }: { canvas: HTMLDocument; element
 		zIndex: 999,
 		pointerEvents: 'painted',
 		cursor: 'pointer',
-		clipPath: getRectPath( rect, canvas.defaultView as Window ),
+		clipPath,
 	};
 
 	const handleKeyDown = ( event: React.KeyboardEvent ) => {
@@ -76,12 +85,7 @@ function Backdrop( { canvas, element, onClose }: { canvas: HTMLDocument; element
 }
 
 function getRectPath( rect: DOMRect, viewport: Window ) {
-	const { x: originalX, y: originalY, width: originalWidth, height: originalHeight } = rect;
-	const x = originalX;
-	const y = originalY;
-	const width = originalWidth;
-	const height = originalHeight;
-
+	const { x, y, width, height } = rect;
 	const { innerWidth: vw, innerHeight: vh } = viewport;
 
 	const path = `path(evenodd, 'M 0 0 

package/src/components/edit-component/edit-component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { getV1DocumentsManager, type V1Document } from '@elementor/editor-documents';
 import { type V1Element } from '@elementor/editor-elements';
 import { __privateListenTo as listenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
@@ -22,13 +22,13 @@ export function EditComponent() {
 
 	const onClose = throttle( navigateBack, 100 );
 
-	const elementDom = getComponentDOMElement( currentComponentId ?? undefined );
+	const topLevelElementDom = useComponentDOMElement( currentComponentId ?? undefined );
 
-	if ( ! elementDom ) {
+	if ( ! currentComponentId ) {
 		return null;
 	}
 
-	return <ComponentModal element={ elementDom } onClose={ onClose } />;
+	return <ComponentModal topLevelElementDom={ topLevelElementDom } onClose={ onClose } />;
 }
 
 function useHandleDocumentSwitches() {
@@ -112,18 +112,52 @@ function getInstanceTitle( instanceId: string | undefined, path: ComponentsPathI
 	return editorSettings?.title;
 }
 
-function getComponentDOMElement( id: V1Document[ 'id' ] | undefined ) {
+function useComponentDOMElement( id: V1Document[ 'id' ] | undefined ) {
+	const { componentContainerDomElement, topLevelElementDom } = getComponentDOMElements( id );
+
+	const [ currentElementDom, setCurrentElementDom ] = useState< HTMLElement | null >( topLevelElementDom );
+
+	useEffect( () => {
+		setCurrentElementDom( topLevelElementDom );
+	}, [ topLevelElementDom ] );
+
+	useEffect( () => {
+		if ( ! componentContainerDomElement ) {
+			return;
+		}
+
+		const mutationObserver = new MutationObserver( () => {
+			const newElementDom = componentContainerDomElement.children[ 0 ] as HTMLElement | null;
+			setCurrentElementDom( newElementDom );
+		} );
+
+		mutationObserver.observe( componentContainerDomElement, { childList: true } );
+
+		return () => {
+			mutationObserver.disconnect();
+		};
+	}, [ componentContainerDomElement ] );
+
+	return currentElementDom;
+}
+
+type ComponentDOMElements = {
+	componentContainerDomElement: HTMLElement | null;
+	topLevelElementDom: HTMLElement | null;
+};
+
+function getComponentDOMElements( id: V1Document[ 'id' ] | undefined ): ComponentDOMElements {
 	if ( ! id ) {
-		return null;
+		return { componentContainerDomElement: null, topLevelElementDom: null };
 	}
 
 	const documentsManager = getV1DocumentsManager();
 
 	const currentComponent = documentsManager.get( id );
 
-	const widget = currentComponent?.container as V1Element;
-	const container = ( widget?.view?.el?.children?.[ 0 ] ?? null ) as HTMLElement | null;
-	const elementDom = container?.children[ 0 ] as HTMLElement | null;
+	const componentContainer = currentComponent?.container as V1Element;
+	const componentContainerDomElement = ( componentContainer?.view?.el?.children?.[ 0 ] as HTMLElement ) ?? null;
+	const topLevelElementDom = ( componentContainerDomElement?.children[ 0 ] as HTMLElement ) ?? null;
 
-	return elementDom ?? null;
+	return { componentContainerDomElement, topLevelElementDom };
 }

package/src/init.ts

@@ -45,6 +45,7 @@ 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 { initRegenerateOverrideKeys } from './sync/regenerate-override-keys';
 import { type ExtendedWindow } from './types';
@@ -143,4 +144,6 @@ export function init() {
 	initNonAtomicNestingPrevention();
 
 	initLoadComponentDataAfterInstanceAdded();
+
+	initHandleComponentEditModeContainer();
 }

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

@@ -2,11 +2,10 @@ 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';
+import { isEditingComponent } from './utils/is-editing-component';
 
 type CreateArgs = {
 	container?: V1Element;
@@ -63,16 +62,6 @@ export function initNonAtomicNestingPrevention() {
 	} );
 }
 
-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;
 }

package/src/sync/handle-component-edit-mode-container.ts

@@ -0,0 +1,114 @@
+import { type V1Document } from '@elementor/editor-documents';
+import { createElement, selectElement, type V1Element } from '@elementor/editor-elements';
+import { registerDataHook } from '@elementor/editor-v1-adapters';
+
+import { COMPONENT_DOCUMENT_TYPE } from '../components/consts';
+import { isEditingComponent } from '../utils/is-editing-component';
+
+const V4_DEFAULT_CONTAINER_TYPE = 'e-flexbox';
+
+type Container = Omit< V1Element, 'children' | 'parent' > & {
+	document?: V1Document;
+	parent?: Container;
+	children?: Container[];
+};
+
+export function initHandleComponentEditModeContainer() {
+	initRedirectDropIntoComponent();
+	initHandleTopLevelElementDelete();
+}
+
+export type DeleteArgs = {
+	container?: Container;
+	containers?: Container[];
+};
+
+function initHandleTopLevelElementDelete() {
+	registerDataHook( 'after', 'document/elements/delete', ( args: DeleteArgs ) => {
+		if ( ! isEditingComponent() ) {
+			return;
+		}
+
+		const containers = args.containers ?? ( args.container ? [ args.container ] : [] );
+
+		for ( const container of containers ) {
+			if ( ! container.parent || ! isComponent( container.parent ) ) {
+				continue;
+			}
+
+			const component = container.parent;
+			const isComponentEmpty = component.children?.length === 0;
+
+			if ( isComponentEmpty ) {
+				createEmptyTopLevelContainer( container.parent );
+			}
+		}
+	} );
+}
+
+type DropArgs = {
+	container?: Container;
+	containers?: Container[];
+	model?: unknown;
+	options?: unknown;
+};
+
+function initRedirectDropIntoComponent() {
+	registerDataHook( 'dependency', 'preview/drop', ( args: DropArgs ) => {
+		if ( ! isEditingComponent() ) {
+			return true;
+		}
+
+		const containers = args.containers ?? ( args.container ? [ args.container ] : [] );
+
+		for ( const container of containers ) {
+			if ( ! isComponent( container ) ) {
+				continue;
+			}
+
+			const { shouldRedirect, container: redirectedContainer } = getComponentContainer( container );
+
+			if ( ! shouldRedirect ) {
+				continue;
+			}
+
+			if ( args.containers ) {
+				const index = args.containers.indexOf( container );
+				args.containers[ index ] = redirectedContainer;
+			} else {
+				args.container = redirectedContainer;
+			}
+		}
+
+		return true;
+	} );
+}
+
+function createEmptyTopLevelContainer( container: Container ) {
+	const newContainer = createElement( {
+		containerId: container.id,
+		model: { elType: V4_DEFAULT_CONTAINER_TYPE },
+	} );
+
+	selectElement( newContainer.id );
+}
+
+function getComponentContainer( container: Container ): { shouldRedirect: boolean; container: Container } {
+	const topLevelElement = container.children?.[ 0 ];
+
+	if ( topLevelElement ) {
+		return { shouldRedirect: true, container: topLevelElement };
+	}
+
+	return { shouldRedirect: false, container };
+}
+
+function isComponent( container: Container ): boolean {
+	const isDocument = container.id === 'document';
+
+	if ( ! isDocument ) {
+		return false;
+	}
+
+	return container.document?.config.type === COMPONENT_DOCUMENT_TYPE;
+}

package/src/utils/is-editing-component.ts

@@ -0,0 +1,13 @@
+import { __getStore as getStore } from '@elementor/store';
+
+import { type ComponentsSlice, selectCurrentComponentId } from '../store/store';
+
+export function isEditingComponent(): boolean {
+	const state = getStore()?.getState() as ComponentsSlice | undefined;
+
+	if ( ! state ) {
+		return false;
+	}
+
+	return selectCurrentComponentId( state ) !== null;
+}