@elementor/editor-components 3.33.0-263 → 3.33.0-266

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

@@ -3,13 +3,11 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { getElementLabel, type V1ElementData } from '@elementor/editor-elements';
 import { ThemeProvider } from '@elementor/editor-ui';
 import { StarIcon } from '@elementor/icons';
-import { __useDispatch as useDispatch } from '@elementor/store';
 import { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack, TextField, Typography } from '@elementor/ui';
-import { generateUniqueId } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
 import { useComponents } from '../../hooks/use-components';
-import { slice } from '../../store/store';
+import { createUnpublishedComponent } from '../../store/create-unpublished-component';
 import { type ComponentFormValues } from '../../types';
 import { trackComponentEvent } from '../../utils/tracking';
 import { useForm } from './hooks/use-form';
@@ -19,7 +17,6 @@ import {
 	type ContextMenuEventOptions,
 	getComponentEventData,
 } from './utils/get-component-event-data';
-import { replaceElementWithComponent } from './utils/replace-element-with-component';
 
 type SaveAsComponentEventData = {
 	element: V1ElementData;
@@ -43,8 +40,6 @@ export function CreateComponentForm() {
 
 	const [ resultNotification, setResultNotification ] = useState< ResultNotification | null >( null );
 
-	const dispatch = useDispatch();
-
 	const eventData = useRef< ComponentEventData | null >( null );
 
 	useEffect( () => {
@@ -74,26 +69,7 @@ export function CreateComponentForm() {
 				throw new Error( `Can't save element as component: element not found` );
 			}
 
-			const uid = generateUniqueId( 'component' );
-
-			dispatch(
-				slice.actions.addUnpublished( {
-					uid,
-					name: values.componentName,
-					elements: [ element.element ],
-				} )
-			);
-
-			dispatch( slice.actions.addCreatedThisSession( uid ) );
-
-			replaceElementWithComponent( element.element, { uid, name: values.componentName } );
-
-			trackComponentEvent( {
-				action: 'created',
-				component_uid: uid,
-				component_name: values.componentName,
-				...eventData.current,
-			} );
+			const uid = createUnpublishedComponent( values.componentName, element.element, eventData.current );
 
 			setResultNotification( {
 				show: true,

package/src/create-component-type.ts

@@ -7,6 +7,7 @@ import {
 	type ElementView,
 	type LegacyWindow,
 } from '@elementor/editor-canvas';
+import { getCurrentDocument } from '@elementor/editor-documents';
 import { type NumberPropValue } from '@elementor/editor-props';
 import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
@@ -42,6 +43,12 @@ function createComponentView(
 		legacyWindow = window as unknown as LegacyWindow & ExtendedWindow;
 		eventsManagerConfig = this.legacyWindow.elementorCommon.eventsManager.config;
 
+		isComponentCurrentlyEdited() {
+			const currentDocument = getCurrentDocument();
+
+			return currentDocument?.id === this.getComponentId()?.value;
+		}
+
 		afterSettingsResolve( settings: { [ key: string ]: unknown } ) {
 			if ( settings.component ) {
 				this.collection = this.legacyWindow.elementor.createBackboneElementsCollection( settings.component );
@@ -118,6 +125,10 @@ function createComponentView(
 		}
 
 		editComponent( { trigger, location, secondaryLocation }: ContextMenuEventData ) {
+			if ( this.isComponentCurrentlyEdited() ) {
+				return;
+			}
+
 			this.switchDocument();
 
 			const editorSettings = this.model.get( 'editor_settings' );

package/src/store/create-unpublished-component.ts

@@ -0,0 +1,40 @@
+import { type V1ElementData } from '@elementor/editor-elements';
+import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
+import { __dispatch as dispatch } from '@elementor/store';
+import { generateUniqueId } from '@elementor/utils';
+
+import { type ComponentEventData } from '../components/create-component-form/utils/get-component-event-data';
+import { replaceElementWithComponent } from '../components/create-component-form/utils/replace-element-with-component';
+import { trackComponentEvent } from '../utils/tracking';
+import { slice } from './store';
+
+export function createUnpublishedComponent(
+	name: string,
+	element: V1ElementData,
+	eventData: ComponentEventData | null
+) {
+	const uid = generateUniqueId( 'component' );
+	const componentBase = { uid, name };
+
+	dispatch(
+		slice.actions.addUnpublished( {
+			...componentBase,
+			elements: [ element ],
+		} )
+	);
+
+	dispatch( slice.actions.addCreatedThisSession( uid ) );
+
+	replaceElementWithComponent( element, componentBase );
+
+	trackComponentEvent( {
+		action: 'created',
+		component_uid: uid,
+		component_name: name,
+		...eventData,
+	} );
+
+	runCommand( 'document/save/auto' );
+
+	return uid;
+}