@elementor/editor-components 4.0.0-609 → 4.0.0-621

package/package.json

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

package/src/components/instance-editing-panel/override-prop-control.tsx

@@ -16,8 +16,8 @@ import {
 	SettingsField,
 	useElement,
 } from '@elementor/editor-editing-panel';
-import { type Control, getElementType } from '@elementor/editor-elements';
-import { type PropType, type PropValue } from '@elementor/editor-props';
+import { type Control, getElementSettings, getElementType } from '@elementor/editor-elements';
+import { type AnyTransformable, type PropType, type PropValue } from '@elementor/editor-props';
 import { Stack } from '@elementor/ui';
 
 import { useControlsByWidgetType } from '../../hooks/use-controls-by-widget-type';
@@ -189,6 +189,8 @@ function OverrideControl( { overridableProp }: InternalProps ) {
 		return null;
 	}
 
+	const settings = getElementSettings< AnyTransformable >( elementId, Object.keys( elementType.propsSchema ) );
+
 	const propTypeSchema = createTopLevelObjectType( {
 		schema: {
 			[ overridableProp.overrideKey ]: propType,
@@ -200,7 +202,7 @@ function OverrideControl( { overridableProp }: InternalProps ) {
 			value={ componentOverridablePropTypeUtil.extract( matchingOverride ) ?? undefined }
 			componentInstanceElement={ componentInstanceElement }
 		>
-			<ElementProvider element={ { id: elementId, type } } elementType={ elementType }>
+			<ElementProvider element={ { id: elementId, type } } elementType={ elementType } settings={ settings }>
 				<SettingsField bind={ propKey } propDisplayName={ overridableProp.label }>
 					<PropProvider
 						propType={ propTypeSchema }

package/src/components/instance-editing-panel/use-instance-panel-data.ts

@@ -1,12 +1,8 @@
 import { useElement } from '@elementor/editor-editing-panel';
-import { useElementSetting, useSelectedElement } from '@elementor/editor-elements';
 
 import { useSanitizeOverridableProps } from '../../hooks/use-sanitize-overridable-props';
 import { type ComponentInstanceOverridesPropValue } from '../../prop-types/component-instance-overrides-prop-type';
-import {
-	componentInstancePropTypeUtil,
-	type ComponentInstancePropValue,
-} from '../../prop-types/component-instance-prop-type';
+import { componentInstancePropTypeUtil } from '../../prop-types/component-instance-prop-type';
 import { useComponent } from '../../store/store';
 import { type Component, type OverridablePropsGroup } from '../../types';
 
@@ -21,7 +17,7 @@ type InstancePanelData = {
 };
 
 export function useInstancePanelData(): InstancePanelData | null {
-	const settings = useComponentInstanceSettings();
+	const { element, settings } = useComponentInstanceSettings();
 
 	const componentId = settings?.component_id?.value;
 
@@ -29,7 +25,7 @@ export function useInstancePanelData(): InstancePanelData | null {
 
 	const component = useComponent( componentId ?? null );
 
-	const componentInstanceId = useSelectedElement()?.element?.id;
+	const componentInstanceId = element?.id;
 
 	const overridableProps = useSanitizeOverridableProps( componentId ?? null, componentInstanceId );
 
@@ -49,9 +45,7 @@ export function useInstancePanelData(): InstancePanelData | null {
 }
 
 function useComponentInstanceSettings() {
-	const { element } = useElement();
+	const { element, settings } = useElement();
 
-	const settings = useElementSetting< ComponentInstancePropValue >( element.id, 'component_instance' );
-
-	return componentInstancePropTypeUtil.extract( settings );
+	return { element, settings: componentInstancePropTypeUtil.extract( settings.component_instance ) };
 }

package/src/create-component-type.ts

@@ -1,6 +1,7 @@
 import {
 	type BackboneModel,
 	type BackboneModelConstructor,
+	type ContextMenuAction,
 	type CreateTemplatedElementTypeOptions,
 	createTemplatedElementView,
 	type ElementModel,
@@ -13,6 +14,7 @@ import {
 import { getCurrentDocument } from '@elementor/editor-documents';
 import { type V1ElementData } from '@elementor/editor-elements';
 import { __getState as getState } from '@elementor/store';
+import { hasProInstalled } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
 import { apiClient } from './api';
@@ -25,14 +27,6 @@ import { trackComponentEvent } from './utils/tracking';
 
 type ContextMenuEventData = { location: string; secondaryLocation: string; trigger: string };
 
-export type ContextMenuAction = {
-	name: string;
-	icon: string;
-	title: string | ( () => string );
-	isEnabled: () => boolean;
-	callback: ( _: unknown, eventData: ContextMenuEventData ) => void;
-};
-
 type ContextMenuGroupConfig = {
 	disable: Record< string, string[] >;
 	add: Record< string, { index: number; action: ContextMenuAction } >;
@@ -58,6 +52,8 @@ type ComponentModelInstance = BackboneModel< ComponentModel > & {
 
 export const COMPONENT_WIDGET_TYPE = 'e-component';
 
+const EDIT_COMPONENT_UPGRADE_URL = 'https://go.elementor.com/go-pro-components-edit/';
+
 const updateGroups = ( groups: ContextMenuGroup[], config: ContextMenuGroupConfig ): ContextMenuGroup[] => {
 	const disableMap = new Map( Object.entries( config.disable ?? {} ) );
 	const addMap = new Map( Object.entries( config.add ?? {} ) );
@@ -218,6 +214,11 @@ function createComponentView(
 
 		_getContextMenuConfig() {
 			const isAdministrator = isUserAdministrator();
+			const hasPro = hasProInstalled();
+
+			const proLabel = __( 'PRO', 'elementor' );
+			const badgeClass = 'elementor-context-menu-list__item__shortcut__new-badge';
+			const proBadge = `<a href="${ EDIT_COMPONENT_UPGRADE_URL }" target="_blank" onclick="event.stopPropagation()" class="${ badgeClass }">${ proLabel }</a>`;
 
 			const addedGroup = {
 				general: {
@@ -226,7 +227,8 @@ function createComponentView(
 						name: 'edit component',
 						icon: 'eicon-edit',
 						title: () => __( 'Edit Component', 'elementor' ),
-						isEnabled: () => true,
+						...( ! hasPro && { shortcut: proBadge, hasShortcutAction: true } ),
+						isEnabled: () => hasPro,
 						callback: ( _: unknown, eventData: ContextMenuEventData ) => this.editComponent( eventData ),
 					},
 				},
@@ -253,7 +255,9 @@ function createComponentView(
 		}
 
 		editComponent( { trigger, location, secondaryLocation }: ContextMenuEventData ) {
-			if ( this.isComponentCurrentlyEdited() ) {
+			const hasPro = hasProInstalled();
+
+			if ( ! hasPro || this.isComponentCurrentlyEdited() ) {
 				return;
 			}
 
@@ -275,9 +279,7 @@ function createComponentView(
 		handleDblClick( e: MouseEvent ) {
 			e.stopPropagation();
 
-			const isAdministrator = isUserAdministrator();
-
-			if ( ! isAdministrator ) {
+			if ( ! isUserAdministrator() || ! hasProInstalled() ) {
 				return;
 			}
 

package/src/extended/components/component-properties-panel/component-properties-panel.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { ElementProvider, usePanelActions as useEditingPanelActions } from '@elementor/editor-editing-panel';
-import { useSelectedElement } from '@elementor/editor-elements';
+import { usePanelActions as useEditingPanelActions } from '@elementor/editor-editing-panel';
 import { __createPanel as createPanel, Panel } from '@elementor/editor-panels';
 import { ThemeProvider } from '@elementor/editor-ui';
 import { Alert, Box, ErrorBoundary } from '@elementor/ui';
@@ -16,27 +15,20 @@ export const { panel, usePanelActions } = createPanel( {
 } );
 
 function ComponentPropertiesPanel() {
-	const { element, elementType } = useSelectedElement();
 	const { close: closePanel } = usePanelActions();
 	const { open: openEditingPanel } = useEditingPanelActions();
 
-	if ( ! element || ! elementType ) {
-		return null;
-	}
-
 	return (
 		<ThemeProvider>
 			<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>
-				<ElementProvider element={ element } elementType={ elementType }>
-					<Panel>
-						<ComponentPropertiesPanelContent
-							onClose={ () => {
-								closePanel();
-								openEditingPanel();
-							} }
-						/>
-					</Panel>
-				</ElementProvider>
+				<Panel>
+					<ComponentPropertiesPanelContent
+						onClose={ () => {
+							closePanel();
+							openEditingPanel();
+						} }
+					/>
+				</Panel>
 			</ErrorBoundary>
 		</ThemeProvider>
 	);

package/src/utils/is-pro-user.ts

@@ -1,26 +0,0 @@
-type ExtendedWindow = Window & {
-	elementor?: {
-		helpers?: {
-			hasPro?: () => boolean;
-		};
-	};
-	elementorPro?: {
-		config?: {
-			isActive?: boolean;
-		};
-	};
-};
-
-export function isProUser(): boolean {
-	const extendedWindow = window as unknown as ExtendedWindow;
-
-	const hasPro = extendedWindow.elementor?.helpers?.hasPro?.() ?? false;
-
-	if ( ! hasPro ) {
-		return false;
-	}
-
-	const isProActive = extendedWindow.elementorPro?.config?.isActive ?? false;
-
-	return isProActive;
-}