@elementor/editor-components 4.0.0-650 → 4.0.0-660

package/package.json

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

package/src/extended/shortcuts/create-component-shortcut.ts

@@ -0,0 +1,121 @@
+import { getElementType, getSelectedElements, getWidgetsCache } from '@elementor/editor-elements';
+import { isProActive } from '@elementor/utils';
+
+type LegacyWindow = {
+	$e: {
+		shortcuts: {
+			register: ( keys: string, config: ShortcutConfig ) => void;
+		};
+	};
+	elementor: {
+		getContainer: ( id: string ) => Container;
+		$preview: Array< { getBoundingClientRect: () => DOMRect } >;
+	};
+};
+
+type Container = {
+	isLocked: () => boolean;
+	model: {
+		id: string;
+		toJSON: ( options?: { remove?: string[] } ) => Record< string, unknown >;
+	};
+	view: {
+		el: HTMLElement;
+	};
+};
+
+type ShortcutConfig = {
+	callback: () => void;
+	dependency?: () => boolean;
+	exclude?: string[];
+};
+
+export const CREATE_COMPONENT_SHORTCUT_KEYS = 'ctrl+shift+k';
+const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = 'elementor/editor/open-save-as-component-form';
+
+type CreateComponentAllowedResult = { allowed: true; container: Container } | { allowed: false; container?: undefined };
+
+export function isCreateComponentAllowed(): CreateComponentAllowedResult {
+	const selectedElements = getSelectedElements();
+
+	if ( selectedElements.length !== 1 ) {
+		return { allowed: false };
+	}
+
+	const element = selectedElements[ 0 ];
+	const elementType = getElementType( element.type );
+
+	if ( ! elementType ) {
+		return { allowed: false };
+	}
+
+	if ( ! isProActive() ) {
+		return { allowed: false };
+	}
+
+	const widgetsCache = getWidgetsCache();
+	const elementConfig = widgetsCache?.[ element.type ];
+
+	if (
+		! elementConfig?.atomic_props_schema ||
+		! elementConfig?.show_in_panel ||
+		elementConfig?.elType === 'widget'
+	) {
+		return { allowed: false };
+	}
+
+	const legacyWindow = window as unknown as LegacyWindow;
+	const container = legacyWindow.elementor.getContainer( element.id );
+
+	if ( ! container || container.isLocked() ) {
+		return { allowed: false };
+	}
+
+	return { allowed: true, container };
+}
+
+export function triggerCreateComponentForm( container: Container ): void {
+	const legacyWindow = window as unknown as LegacyWindow;
+	const elementRect = container.view.el.getBoundingClientRect();
+	const iframeRect = legacyWindow.elementor.$preview[ 0 ].getBoundingClientRect();
+
+	const anchorPosition = {
+		left: iframeRect.left + elementRect.left + elementRect.width / 2,
+		top: iframeRect.top + elementRect.top,
+	};
+
+	window.dispatchEvent(
+		new CustomEvent( OPEN_SAVE_AS_COMPONENT_FORM_EVENT, {
+			detail: {
+				element: container.model.toJSON( { remove: [ 'default' ] } ),
+				anchorPosition,
+				options: {
+					trigger: 'keyboard',
+					location: 'canvas',
+					secondaryLocation: 'canvasElement',
+				},
+			},
+		} )
+	);
+}
+
+export function initCreateComponentShortcut(): void {
+	const legacyWindow = window as unknown as LegacyWindow;
+
+	legacyWindow.$e.shortcuts.register( CREATE_COMPONENT_SHORTCUT_KEYS, {
+		callback: () => {
+			const result = isCreateComponentAllowed();
+
+			if ( ! result.allowed ) {
+				return;
+			}
+
+			triggerCreateComponentForm( result.container );
+		},
+		dependency: () => {
+			const result = isCreateComponentAllowed();
+			return result.allowed;
+		},
+		exclude: [ 'input' ],
+	} );
+}

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

@@ -47,7 +47,7 @@ export async function createUnpublishedComponent( {
 
 	componentsActions.addCreatedThisSession( generatedUid );
 
-	const componentInstance = await replaceElementWithComponent( element, componentBase );
+	const componentInstance = replaceElementWithComponent( element, componentBase );
 
 	trackComponentEvent( {
 		action: 'created',

package/src/extended/utils/replace-element-with-component.ts

@@ -2,9 +2,9 @@ import { replaceElement, type V1ElementData } from '@elementor/editor-elements';
 
 import { type ComponentInstanceParams, createComponentModel } from './create-component-model';
 
-export const replaceElementWithComponent = async ( element: V1ElementData, component: ComponentInstanceParams ) => {
-	return await replaceElement( {
-		currentElement: element,
+export const replaceElementWithComponent = ( element: V1ElementData, component: ComponentInstanceParams ) => {
+	return replaceElement( {
+		currentElementId: element.id,
 		newElement: createComponentModel( component ),
 		withHistory: false,
 	} );

package/src/init.ts

@@ -23,6 +23,7 @@ import { InstanceEditingPanel } from './components/instance-editing-panel/instan
 import { LoadTemplateComponents } from './components/load-template-components';
 import { COMPONENT_WIDGET_TYPE, createComponentType } from './create-component-type';
 import { initExtended } from './extended/init';
+import { initCreateComponentShortcut } from './extended/shortcuts/create-component-shortcut';
 import { PopulateStore } from './populate-store';
 import { initCircularNestingPrevention } from './prevent-circular-nesting';
 import { loadComponentsAssets } from './store/actions/load-components-assets';
@@ -90,4 +91,8 @@ export function init() {
 	if ( !! window.elementorPro && ! isProAtLeast( PRO_EXTENDED_MIGRATION_VERSION ) ) {
 		initExtended();
 	}
+
+	if ( !! window.elementorPro ) {
+		initCreateComponentShortcut();
+	}
 }