@elementor/editor-components 3.35.0-332 → 3.35.0-334

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "3.35.0-332",
+  "version": "3.35.0-334",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,28 +40,28 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.35.0-332",
-    "@elementor/editor-canvas": "3.35.0-332",
-    "@elementor/editor-controls": "3.35.0-332",
-    "@elementor/editor-documents": "3.35.0-332",
-    "@elementor/editor-editing-panel": "3.35.0-332",
-    "@elementor/editor-elements": "3.35.0-332",
-    "@elementor/editor-elements-panel": "3.35.0-332",
-    "@elementor/editor-mcp": "3.35.0-332",
-    "@elementor/editor-props": "3.35.0-332",
-    "@elementor/editor-styles-repository": "3.35.0-332",
-    "@elementor/editor-ui": "3.35.0-332",
-    "@elementor/editor-v1-adapters": "3.35.0-332",
-    "@elementor/http-client": "3.35.0-332",
+    "@elementor/editor": "3.35.0-334",
+    "@elementor/editor-canvas": "3.35.0-334",
+    "@elementor/editor-controls": "3.35.0-334",
+    "@elementor/editor-documents": "3.35.0-334",
+    "@elementor/editor-editing-panel": "3.35.0-334",
+    "@elementor/editor-elements": "3.35.0-334",
+    "@elementor/editor-elements-panel": "3.35.0-334",
+    "@elementor/editor-mcp": "3.35.0-334",
+    "@elementor/editor-props": "3.35.0-334",
+    "@elementor/editor-styles-repository": "3.35.0-334",
+    "@elementor/editor-ui": "3.35.0-334",
+    "@elementor/editor-v1-adapters": "3.35.0-334",
+    "@elementor/http-client": "3.35.0-334",
     "@elementor/icons": "^1.62.0",
-    "@elementor/mixpanel": "3.35.0-332",
-    "@elementor/query": "3.35.0-332",
-    "@elementor/schema": "3.35.0-332",
-    "@elementor/store": "3.35.0-332",
+    "@elementor/mixpanel": "3.35.0-334",
+    "@elementor/query": "3.35.0-334",
+    "@elementor/schema": "3.35.0-334",
+    "@elementor/store": "3.35.0-334",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-332",
+    "@elementor/utils": "3.35.0-334",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "3.35.0-332"
+    "@elementor/editor-notifications": "3.35.0-334"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/overridable-props/overridable-prop-control.tsx

@@ -9,6 +9,7 @@ import {
 	componentOverridablePropTypeUtil,
 	type ComponentOverridablePropValue,
 } from '../../prop-types/component-overridable-prop-type';
+import { OverridablePropProvider } from '../../provider/overridable-prop-context';
 import { updateOverridablePropOriginValue } from '../../store/actions/update-overridable-prop-origin-value';
 import { selectCurrentComponentId } from '../../store/store';
 
@@ -50,18 +51,20 @@ export function OverridablePropControl< T extends object >( {
 		: undefined;
 
 	return (
-		<PropProvider
-			{ ...propContext }
-			propType={ propType }
-			setValue={ setOverridableValue }
-			value={ { [ bind ]: value.origin_value } }
-			placeholder={ objectPlaceholder }
-		>
-			<PropKeyProvider bind={ bind }>
-				<ControlReplacementsProvider replacements={ [] }>
-					<OriginalControl { ...( props as T ) } />
-				</ControlReplacementsProvider>
-			</PropKeyProvider>
-		</PropProvider>
+		<OverridablePropProvider value={ value }>
+			<PropProvider
+				{ ...propContext }
+				propType={ propType }
+				setValue={ setOverridableValue }
+				value={ { [ bind ]: value.origin_value } }
+				placeholder={ objectPlaceholder }
+			>
+				<PropKeyProvider bind={ bind }>
+					<ControlReplacementsProvider replacements={ [] }>
+						<OriginalControl { ...( props as T ) } />
+					</ControlReplacementsProvider>
+				</PropKeyProvider>
+			</PropProvider>
+		</OverridablePropProvider>
 	);
 }

package/src/components/overridable-props/overridable-prop-indicator.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { getV1CurrentDocument } from '@elementor/editor-documents';
 import { useElement } from '@elementor/editor-editing-panel';
 import { getWidgetsCache } from '@elementor/editor-elements';
 import { type TransformablePropValue } from '@elementor/editor-props';
@@ -9,10 +8,10 @@ import { bindPopover, bindTrigger, Popover, Tooltip, usePopupState } from '@elem
 import { __ } from '@wordpress/i18n';
 
 import { componentOverridablePropTypeUtil } from '../../prop-types/component-overridable-prop-type';
+import { useOverridablePropValue } from '../../provider/overridable-prop-context';
 import { setOverridableProp } from '../../store/actions/set-overridable-prop';
-import { selectOverridableProps } from '../../store/store';
+import { selectCurrentComponentId, selectOverridableProps } from '../../store/store';
 import { type OverridableProps } from '../../types';
-import { COMPONENT_DOCUMENT_TYPE } from '../consts';
 import { Indicator } from './indicator';
 import { OverridablePropForm } from './overridable-prop-form';
 import { getOverridableProp } from './utils/get-overridable-prop';
@@ -21,19 +20,15 @@ const FORBIDDEN_KEYS = [ '_cssid', 'attributes' ];
 
 export function OverridablePropIndicator() {
 	const { bind } = useBoundProp();
-	const currentDocument = getV1CurrentDocument();
+	const componentId = selectCurrentComponentId( getState() );
 
-	if ( currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE || ! currentDocument.id ) {
+	if ( ! isPropAllowed( bind ) || ! componentId ) {
 		return null;
 	}
 
-	if ( ! isPropAllowed( bind ) ) {
-		return null;
-	}
-
-	const overridableProps = selectOverridableProps( getState(), currentDocument.id );
+	const overridableProps = selectOverridableProps( getState(), componentId );
 
-	return <Content componentId={ currentDocument.id } overridableProps={ overridableProps } />;
+	return <Content componentId={ componentId } overridableProps={ overridableProps } />;
 }
 
 type Props = {
@@ -46,7 +41,17 @@ export function Content( { componentId, overridableProps }: Props ) {
 		elementType,
 	} = useElement();
 	const { value, bind, propType } = useBoundProp();
-	const { value: overridableValue, setValue: setOverridableValue } = useBoundProp( componentOverridablePropTypeUtil );
+
+	const contextOverridableValue = useOverridablePropValue();
+	const { value: boundPropOverridableValue, setValue: setOverridableValue } = useBoundProp(
+		componentOverridablePropTypeUtil
+	);
+
+	/**
+	 * This is intended to handle custom layout controls, such as <LinkControl />, which has <ControlLabel /> nested within it
+	 * i.e. its bound prop value would be the one manipulated by the new <PropProvider /> thus won't be considered overridable
+	 */
+	const overridableValue = boundPropOverridableValue ?? contextOverridableValue;
 
 	const popupState = usePopupState( {
 		variant: 'popover',

package/src/create-component-type.ts

@@ -17,8 +17,48 @@ 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 } >;
+};
+
+type ContextMenuGroup = {
+	name: string;
+	actions: ContextMenuAction[];
+};
+
 export const TYPE = 'e-component';
 
+const updateGroups = ( groups: ContextMenuGroup[], config: ContextMenuGroupConfig ): ContextMenuGroup[] => {
+	const disableMap = new Map( Object.entries( config.disable ?? {} ) );
+	const addMap = new Map( Object.entries( config.add ?? {} ) );
+
+	return groups.map( ( group ) => {
+		const disabledActions = disableMap.get( group.name ) ?? [];
+		const addConfig = addMap.get( group.name );
+
+		// Update disabled actions
+		const updatedActions = group.actions.map( ( action ) =>
+			disabledActions.includes( action.name ) ? { ...action, isEnabled: () => false } : action
+		);
+
+		// Insert additional action if needed
+		if ( addConfig ) {
+			updatedActions.splice( addConfig.index, 0, addConfig.action );
+		}
+
+		return { ...group, actions: updatedActions };
+	} );
+};
+
 export function createComponentType(
 	options: CreateTemplatedElementTypeOptions & { showLockedByModal?: ( lockedBy: string ) => void }
 ): typeof ElementType {
@@ -30,13 +70,15 @@ export function createComponentType(
 		}
 
 		getView() {
-			return createComponentView( options );
+			return createComponentView( { ...options } );
 		}
 	};
 }
 
 function createComponentView(
-	options: CreateTemplatedElementTypeOptions & { showLockedByModal?: ( lockedBy: string ) => void }
+	options: CreateTemplatedElementTypeOptions & {
+		showLockedByModal?: ( lockedBy: string ) => void;
+	}
 ): typeof ElementView {
 	return class extends createTemplatedElementView( options ) {
 		legacyWindow = window as unknown as LegacyWindow & ExtendedWindow;
@@ -94,22 +136,38 @@ function createComponentView(
 				return filteredGroups;
 			}
 
-			const newGroup = [
-				{
-					name: 'edit component',
-					actions: [
-						{
-							name: 'edit component',
-							icon: 'eicon-edit',
-							title: () => __( 'Edit Component', 'elementor' ),
-							isEnabled: () => true,
-							callback: ( _: unknown, eventData: ContextMenuEventData ) =>
-								this.editComponent( eventData ),
-						},
-					],
+			const newGroups = updateGroups(
+				filteredGroups as ContextMenuGroup[],
+				this._getContextMenuConfig() as unknown as ContextMenuGroupConfig
+			);
+			return newGroups;
+		}
+
+		_getContextMenuConfig() {
+			const legacyWindow = this.legacyWindow || ( window as unknown as LegacyWindow & ExtendedWindow );
+			const elementorWithConfig = legacyWindow.elementor as typeof legacyWindow.elementor & {
+				config?: { user?: { is_administrator?: boolean } };
+			};
+			const isAdministrator = elementorWithConfig.config?.user?.is_administrator ?? false;
+
+			const addedGroup = {
+				general: {
+					index: 1,
+					action: {
+						name: 'edit component',
+						icon: 'eicon-edit',
+						title: () => __( 'Edit Component', 'elementor' ),
+						isEnabled: () => true,
+						callback: ( _: unknown, eventData: ContextMenuEventData ) => this.editComponent( eventData ),
+					},
 				},
-			];
-			return [ ...filteredGroups, ...newGroup ];
+			};
+
+			const disabledGroup = {
+				clipboard: [ 'pasteStyle', 'resetStyle' ],
+			};
+
+			return { add: isAdministrator ? addedGroup : {}, disable: disabledGroup };
 		}
 
 		async switchDocument() {

package/src/provider/overridable-prop-context.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { createContext, type PropsWithChildren, useContext } from 'react';
+
+import { type ComponentOverridablePropValue } from '../prop-types/component-overridable-prop-type';
+
+type OverridablePropData = {
+	value: ComponentOverridablePropValue;
+};
+
+const OverridablePropContext = createContext< OverridablePropData | null >( null );
+
+export function OverridablePropProvider( { children, ...props }: PropsWithChildren< OverridablePropData > ) {
+	return <OverridablePropContext.Provider value={ props }>{ children }</OverridablePropContext.Provider>;
+}
+
+export const useOverridablePropValue = () => useContext( OverridablePropContext )?.value;