@elementor/editor-controls 3.32.0-95 → 3.33.0-101

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "3.32.0-95",
+  "version": "3.33.0-101",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,21 +40,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "3.32.0-95",
-    "@elementor/editor-elements": "3.32.0-95",
-    "@elementor/editor-props": "3.32.0-95",
-    "@elementor/editor-responsive": "3.32.0-95",
-    "@elementor/editor-ui": "3.32.0-95",
-    "@elementor/editor-v1-adapters": "3.32.0-95",
-    "@elementor/env": "3.32.0-95",
-    "@elementor/http-client": "3.32.0-95",
+    "@elementor/editor-current-user": "3.33.0-101",
+    "@elementor/editor-elements": "3.33.0-101",
+    "@elementor/editor-props": "3.33.0-101",
+    "@elementor/editor-responsive": "3.33.0-101",
+    "@elementor/editor-ui": "3.33.0-101",
+    "@elementor/editor-v1-adapters": "3.33.0-101",
+    "@elementor/env": "3.33.0-101",
+    "@elementor/http-client": "3.33.0-101",
     "@elementor/icons": "^1.51.1",
-    "@elementor/locations": "3.32.0-95",
-    "@elementor/query": "3.32.0-95",
-    "@elementor/session": "3.32.0-95",
+    "@elementor/locations": "3.33.0-101",
+    "@elementor/query": "3.33.0-101",
+    "@elementor/session": "3.33.0-101",
     "@elementor/ui": "1.36.12",
-    "@elementor/utils": "3.32.0-95",
-    "@elementor/wp-media": "3.32.0-95",
+    "@elementor/utils": "3.33.0-101",
+    "@elementor/wp-media": "3.33.0-101",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0"
   },

package/src/components/css-code-editor/css-editor.styles.ts

@@ -7,8 +7,15 @@ export const EditorWrapper = styled( Box )`
 	position: relative;
 	height: 200px;
 
-	.monaco-editor .colorpicker-widget {
-		z-index: 99999999 !important;
+	.monaco-editor .suggest-widget {
+		width: 220px !important;
+		max-width: 220px !important;
+	}
+
+	.visual-content-dimmed {
+		opacity: 0.6;
+		color: #aaa !important;
+		pointer-events: none;
 	}
 `;
 

package/src/components/css-code-editor/css-editor.tsx

@@ -5,12 +5,13 @@ import { useTheme } from '@elementor/ui';
 import { Editor } from '@monaco-editor/react';
 
 import { EditorWrapper } from './css-editor.styles';
-import { setCustomSyntaxRules, validate } from './css-validation';
+import { clearMarkersFromVisualContent, setCustomSyntaxRules, validate } from './css-validation';
 import { ResizeHandleComponent } from './resize-handle';
+import { preventChangeOnVisualContent } from './visual-content-change-protection';
 
 type CssEditorProps = {
 	value: string;
-	onChange: ( value: string ) => void;
+	onChange: ( value: string, isValid: boolean ) => void;
 };
 
 const setVisualContent = ( value: string ): string => {
@@ -29,82 +30,23 @@ const getActual = ( value: string ): string => {
 		.join( '\n' );
 };
 
-const preventChangeOnVisualContent = ( editor: editor.IStandaloneCodeEditor, monaco: MonacoEditor ) => {
-	const model = editor.getModel();
-	if ( ! model ) {
-		return;
-	}
-
-	editor.onKeyDown( ( e ) => {
-		const position = editor.getPosition();
-		if ( ! position ) {
-			return;
-		}
-
-		const totalLines = model.getLineCount();
-		const isInProtectedRange = position.lineNumber === 1 || position.lineNumber === totalLines;
-
-		if ( isInProtectedRange ) {
-			const allowedKeys = [
-				monaco.KeyCode.UpArrow,
-				monaco.KeyCode.DownArrow,
-				monaco.KeyCode.LeftArrow,
-				monaco.KeyCode.RightArrow,
-				monaco.KeyCode.Home,
-				monaco.KeyCode.End,
-				monaco.KeyCode.PageUp,
-				monaco.KeyCode.PageDown,
-				monaco.KeyCode.Tab,
-				monaco.KeyCode.Escape,
-			];
-
-			if ( ! allowedKeys.includes( e.keyCode ) ) {
-				e.preventDefault();
-				e.stopPropagation();
-			}
-		}
-	} );
-};
-
 const createEditorDidMountHandler = (
 	editorRef: React.MutableRefObject< editor.IStandaloneCodeEditor | null >,
-	monacoRef: React.MutableRefObject< MonacoEditor | null >,
-	debounceTimer: React.MutableRefObject< NodeJS.Timeout | null >,
-	onChange: ( value: string ) => void
+	monacoRef: React.MutableRefObject< MonacoEditor | null >
 ) => {
 	return ( editor: editor.IStandaloneCodeEditor, monaco: MonacoEditor ) => {
 		editorRef.current = editor;
 		monacoRef.current = monaco;
 
-		preventChangeOnVisualContent( editor, monaco );
+		preventChangeOnVisualContent( editor );
 
 		setCustomSyntaxRules( editor, monaco );
 
-		editor.onDidChangeModelContent( () => {
-			const code = editor.getModel()?.getValue() ?? '';
-			const userContent = getActual( code );
-
-			setCustomSyntaxRules( editor, monaco );
-
-			const currentTimer = debounceTimer.current;
-			if ( currentTimer ) {
-				clearTimeout( currentTimer );
-			}
-
-			const newTimer = setTimeout( () => {
-				if ( ! editorRef.current || ! monacoRef.current ) {
-					return;
-				}
-
-				const hasNoErrors = validate( editorRef.current, monacoRef.current );
-
-				if ( hasNoErrors ) {
-					onChange( userContent );
-				}
-			}, 500 );
-
-			debounceTimer.current = newTimer;
+		monaco.editor.onDidChangeMarkers( () => {
+			setTimeout( () => clearMarkersFromVisualContent( editor, monaco ), 0 );
 		} );
+
+		editor.setPosition( { lineNumber: 2, column: ( editor.getModel()?.getLineContent( 2 ).length ?? 0 ) + 1 } );
 	};
 };
 
@@ -126,7 +68,35 @@ export const CssEditor = ( { value, onChange }: CssEditorProps ) => {
 		}
 	}, [] );
 
-	const handleEditorDidMount = createEditorDidMountHandler( editorRef, monacoRef, debounceTimer, onChange );
+	const handleEditorChange = () => {
+		if ( ! editorRef.current || ! monacoRef.current ) {
+			return;
+		}
+
+		const code = editorRef.current?.getModel()?.getValue() ?? '';
+		const userContent = getActual( code );
+
+		setCustomSyntaxRules( editorRef?.current, monacoRef.current );
+
+		const currentTimer = debounceTimer.current;
+		if ( currentTimer ) {
+			clearTimeout( currentTimer );
+		}
+
+		const newTimer = setTimeout( () => {
+			if ( ! editorRef.current || ! monacoRef.current ) {
+				return;
+			}
+
+			const hasNoErrors = validate( editorRef.current, monacoRef.current );
+
+			onChange( userContent, hasNoErrors );
+		}, 500 );
+
+		debounceTimer.current = newTimer;
+	};
+
+	const handleEditorDidMount = createEditorDidMountHandler( editorRef, monacoRef );
 
 	React.useEffect( () => {
 		const timerRef = debounceTimer;
@@ -145,18 +115,24 @@ export const CssEditor = ( { value, onChange }: CssEditorProps ) => {
 				height="100%"
 				language="css"
 				theme={ theme.palette.mode === 'dark' ? 'vs-dark' : 'vs' }
-				defaultValue={ setVisualContent( value ) }
+				value={ setVisualContent( value ) }
 				onMount={ handleEditorDidMount }
+				onChange={ handleEditorChange }
 				options={ {
-					lineNumbers: 'off',
-					folding: false,
-					showFoldingControls: 'never',
+					lineNumbers: 'on',
+					folding: true,
 					minimap: { enabled: false },
 					fontFamily: 'Roboto, Arial, Helvetica, Verdana, sans-serif',
 					fontSize: 12,
 					renderLineHighlight: 'none',
 					hideCursorInOverviewRuler: true,
 					fixedOverflowWidgets: true,
+					suggestFontSize: 10,
+					suggestLineHeight: 14,
+					stickyScroll: {
+						enabled: false,
+					},
+					lineDecorationsWidth: 2,
 				} }
 			/>
 			<ResizeHandleComponent

package/src/components/css-code-editor/css-validation.ts

@@ -60,3 +60,16 @@ export function validate( editor: editor.IStandaloneCodeEditor, monaco: MonacoEd
 	const allMarkers = monaco.editor.getModelMarkers( { resource: model.uri } );
 	return allMarkers.filter( ( marker ) => marker.severity === monaco.MarkerSeverity.Error ).length === 0;
 }
+
+export function clearMarkersFromVisualContent( editor: editor.IStandaloneCodeEditor, monaco: MonacoEditor ): void {
+	const model = editor.getModel();
+
+	if ( ! model ) {
+		return;
+	}
+
+	const allMarkers = monaco.editor.getModelMarkers( { resource: model.uri } );
+	const filteredMarkers = allMarkers.filter( ( marker ) => marker.startLineNumber !== 1 );
+	const nonCustomMarkers = filteredMarkers.filter( ( m ) => m.source !== 'custom-css-rules' );
+	monaco.editor.setModelMarkers( model, 'css', nonCustomMarkers );
+}

package/src/components/css-code-editor/visual-content-change-protection.ts

@@ -0,0 +1,69 @@
+import type { editor } from 'monaco-types';
+
+export const preventChangeOnVisualContent = ( editor: editor.IStandaloneCodeEditor ) => {
+	const model = editor.getModel();
+	if ( ! model ) {
+		return;
+	}
+
+	const decorationsCollection = editor.createDecorationsCollection();
+
+	const applyVisualContentStyling = () => {
+		const totalLines = model.getLineCount();
+		const decorations = [];
+
+		decorations.push( {
+			range: {
+				startLineNumber: 1,
+				startColumn: 1,
+				endLineNumber: 1,
+				endColumn: model.getLineContent( 1 ).length + 1,
+			},
+			options: {
+				inlineClassName: 'visual-content-dimmed',
+				isWholeLine: false,
+			},
+		} );
+
+		if ( totalLines > 1 ) {
+			decorations.push( {
+				range: {
+					startLineNumber: totalLines,
+					startColumn: 1,
+					endLineNumber: totalLines,
+					endColumn: model.getLineContent( totalLines ).length + 1,
+				},
+				options: {
+					inlineClassName: 'visual-content-dimmed',
+					isWholeLine: false,
+				},
+			} );
+		}
+
+		decorationsCollection.set( decorations );
+	};
+
+	applyVisualContentStyling();
+
+	model.onDidChangeContent( () => {
+		applyVisualContentStyling();
+	} );
+
+	const originalPushEditOperations = model.pushEditOperations;
+	model.pushEditOperations = function ( beforeCursorState, editOperations, cursorStateComputer ) {
+		const totalLines = model.getLineCount();
+
+		const filteredOperations = editOperations.filter( ( operation ) => {
+			const range = operation.range;
+			const affectsProtectedLine =
+				range.startLineNumber === 1 ||
+				range.endLineNumber === 1 ||
+				range.startLineNumber === totalLines ||
+				range.endLineNumber === totalLines;
+
+			return ! affectsProtectedLine;
+		} );
+
+		return originalPushEditOperations.call( this, beforeCursorState, filteredOperations, cursorStateComputer );
+	};
+};

package/src/components/item-selector.tsx

@@ -22,6 +22,7 @@ type ItemSelectorProps = {
 	itemStyle?: ( item: SelectableItem ) => React.CSSProperties;
 	onDebounce?: ( name: string ) => void;
 	icon: React.ElementType< { fontSize: string } >;
+	disabledItems?: string[];
 };
 
 export const ItemSelector = ( {
@@ -34,10 +35,11 @@ export const ItemSelector = ( {
 	itemStyle = () => ( {} ),
 	onDebounce = () => {},
 	icon,
+	disabledItems,
 }: ItemSelectorProps ) => {
 	const [ searchValue, setSearchValue ] = useState( '' );
 
-	const filteredItemsList = useFilteredItemsList( itemsList, searchValue );
+	const filteredItemsList = useFilteredItemsList( itemsList, searchValue, disabledItems );
 
 	const IconComponent = icon;
 
@@ -128,6 +130,7 @@ type ItemListProps = {
 	selectedItem: string | null;
 	itemStyle?: ( item: SelectableItem ) => React.CSSProperties;
 	onDebounce?: ( name: string ) => void;
+	disabledItems?: string[];
 };
 
 const ItemList = ( {

package/src/components/unstable-repeater/context/repeater-context.tsx

@@ -5,6 +5,7 @@ import { type PopupState, usePopupState } from '@elementor/ui';
 
 import { useBoundProp } from '../../../bound-prop-context/use-bound-prop';
 import { useSyncExternalState } from '../../../hooks/use-sync-external-state';
+import { eventBus } from '../../../services/event-bus';
 import { type Item, type RepeatablePropValue } from '../types';
 
 type SetterFn< T > = ( prevItems: T ) => T;
@@ -46,7 +47,11 @@ export const RepeaterContextProvider = < T extends RepeatablePropValue = Repeata
 	children,
 	initial,
 	propTypeUtil,
-}: React.PropsWithChildren< { initial: T; propTypeUtil: PropTypeUtil< string, T[] >; isSortable?: boolean } > ) => {
+}: React.PropsWithChildren< {
+	initial: T;
+	propTypeUtil: PropTypeUtil< string, T[] >;
+	isSortable?: boolean;
+} > ) => {
 	const { value: repeaterValues, setValue: setRepeaterValues } = useBoundProp( propTypeUtil );
 
 	const [ items, setItems ] = useSyncExternalState( {
@@ -92,10 +97,20 @@ export const RepeaterContextProvider = < T extends RepeatablePropValue = Repeata
 
 		setOpenItemIndex( newIndex );
 		popoverState.open( rowRef ?? ev );
+
+		eventBus.emit( `${ propTypeUtil.key }-item-added`, {
+			itemValue: initial.value,
+		} );
 	};
 
 	const removeItem = ( index: number ) => {
+		const itemToRemove = items[ index ];
+
 		setItems( items.filter( ( _, pos ) => pos !== index ) );
+
+		eventBus.emit( `${ propTypeUtil.key }-item-removed`, {
+			itemValue: itemToRemove?.value,
+		} );
 	};
 
 	const updateItem = ( updatedItem: T, index: number ) => {

package/src/controls/transition-control/trainsition-events.ts

@@ -0,0 +1,28 @@
+import { getSelectedElements } from '@elementor/editor-elements';
+import { sendMixpanelEvent } from '@elementor/utils';
+
+import { eventBus } from '../../services/event-bus';
+import { type initialTransitionValue } from './data';
+
+type TransitionItemValue = typeof initialTransitionValue;
+
+const transitionRepeaterMixpanelEvent = {
+	eventName: 'click_added_transition',
+	location: 'V4 Style Tab',
+	secondaryLocation: 'Transition control',
+	trigger: 'click',
+};
+
+export function subscribeToTransitionEvent() {
+	eventBus.subscribe( 'transition-item-added', ( data ) => {
+		const payload = data as { itemValue?: TransitionItemValue };
+		const value = payload?.itemValue?.selection?.value?.value?.value;
+		const selectedElements = getSelectedElements();
+		const widgetType = selectedElements[ 0 ]?.type ?? null;
+		sendMixpanelEvent( {
+			transition_type: value ?? 'unknown',
+			...transitionRepeaterMixpanelEvent,
+			widget_type: widgetType,
+		} );
+	} );
+}

package/src/controls/transition-control/transition-repeater-control.tsx

@@ -1,15 +1,17 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
-import { selectionSizePropTypeUtil } from '@elementor/editor-props';
+import { useEffect, useMemo, useState } from 'react';
+import { createArrayPropUtils, selectionSizePropTypeUtil, type SelectionSizePropValue } from '@elementor/editor-props';
 import { type StyleDefinitionState } from '@elementor/editor-styles';
 import { InfoCircleFilledIcon } from '@elementor/icons';
 import { Alert, AlertTitle, Box, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { useBoundProp } from '../../bound-prop-context';
 import { createControl } from '../../create-control';
 import { RepeatableControl } from '../repeatable-control';
 import { SelectionSizeControl } from '../selection-size-control';
 import { initialTransitionValue, transitionProperties } from './data';
+import { subscribeToTransitionEvent } from './trainsition-events';
 import { TransitionSelector } from './transition-selector';
 
 const DURATION_CONFIG = {
@@ -20,7 +22,7 @@ const DURATION_CONFIG = {
 
 // this config needs to be loaded at runtime/render since it's the transitionProperties object will be mutated by the pro plugin.
 // See: https://elementor.atlassian.net/browse/ED-20285
-const getSelectionSizeProps = ( recentlyUsedList: string[] ) => {
+const getSelectionSizeProps = ( recentlyUsedList: string[], disabledItems?: string[] ) => {
 	return {
 		selectionLabel: __( 'Type', 'elementor' ),
 		sizeLabel: __( 'Duration', 'elementor' ),
@@ -28,6 +30,7 @@ const getSelectionSizeProps = ( recentlyUsedList: string[] ) => {
 			component: TransitionSelector,
 			props: {
 				recentlyUsedList,
+				disabledItems,
 			},
 		},
 		sizeConfigMap: {
@@ -44,11 +47,11 @@ const getSelectionSizeProps = ( recentlyUsedList: string[] ) => {
 	};
 };
 
-function getChildControlConfig( recentlyUsedList: string[] ) {
+function getChildControlConfig( recentlyUsedList: string[], disabledItems?: string[] ) {
 	return {
 		propTypeUtil: selectionSizePropTypeUtil,
 		component: SelectionSizeControl as unknown as React.ComponentType< Record< string, unknown > >,
-		props: getSelectionSizeProps( recentlyUsedList ),
+		props: getSelectionSizeProps( recentlyUsedList, disabledItems ),
 	};
 }
 
@@ -70,6 +73,16 @@ const disableAddItemTooltipContent = (
 	</Alert>
 );
 
+subscribeToTransitionEvent();
+
+const getTransitionLabel = ( item: SelectionSizePropValue ) => {
+	return ( item.value.selection.value as { key: { value: string } } )?.key?.value ?? '';
+};
+
+const getDisabledItems = ( value: SelectionSizePropValue[] | null | undefined ) => {
+	return value?.map( getTransitionLabel ) ?? [];
+};
+
 export const TransitionRepeaterControl = createControl(
 	( {
 		recentlyUsedListGetter,
@@ -81,6 +94,14 @@ export const TransitionRepeaterControl = createControl(
 		const currentStyleIsNormal = currentStyleState === null;
 		const [ recentlyUsedList, setRecentlyUsedList ] = useState< string[] >( [] );
 
+		const childArrayPropTypeUtil = useMemo(
+			() => createArrayPropUtils( selectionSizePropTypeUtil.key, selectionSizePropTypeUtil.schema, 'transition' ),
+			[]
+		);
+
+		const { value } = useBoundProp( childArrayPropTypeUtil );
+		const disabledItems = useMemo( () => getDisabledItems( value ), [ value ] );
+
 		useEffect( () => {
 			recentlyUsedListGetter().then( setRecentlyUsedList );
 		}, [ recentlyUsedListGetter ] );
@@ -94,7 +115,7 @@ export const TransitionRepeaterControl = createControl(
 				showDuplicate={ false }
 				showToggle={ true }
 				initialValues={ initialTransitionValue }
-				childControlConfig={ getChildControlConfig( recentlyUsedList ) }
+				childControlConfig={ getChildControlConfig( recentlyUsedList, disabledItems ) }
 				propKey="transition"
 				addItemTooltipProps={ {
 					disabled: ! currentStyleIsNormal,

package/src/controls/transition-control/transition-selector.tsx

@@ -32,7 +32,13 @@ const findByValue = ( value: string ) => {
 	}
 };
 
-export const TransitionSelector = ( { recentlyUsedList = [] }: { recentlyUsedList: string[] } ) => {
+export const TransitionSelector = ( {
+	recentlyUsedList = [],
+	disabledItems = [],
+}: {
+	recentlyUsedList: string[];
+	disabledItems?: string[];
+} ) => {
 	const { value, setValue } = useBoundProp( keyValuePropTypeUtil );
 	const {
 		key: { value: transitionLabel },
@@ -113,6 +119,7 @@ export const TransitionSelector = ( { recentlyUsedList = [] }: { recentlyUsedLis
 					sectionWidth={ 268 }
 					title={ __( 'Transition Property', 'elementor' ) }
 					icon={ VariationsIcon as React.ElementType< { fontSize: string } > }
+					disabledItems={ disabledItems }
 				/>
 			</Popover>
 		</Box>

package/src/hooks/use-filtered-items-list.ts

@@ -3,9 +3,10 @@ import { type Category } from '../components/item-selector';
 export type SelectableItem = {
 	type: 'item' | 'category';
 	value: string;
+	disabled?: boolean;
 };
 
-export const useFilteredItemsList = ( itemsList: Category[], searchValue: string ) => {
+export const useFilteredItemsList = ( itemsList: Category[], searchValue: string, disabledItems?: string[] ) => {
 	return itemsList.reduce< SelectableItem[] >( ( acc, category ) => {
 		const filteredItems = category.items.filter( ( item ) =>
 			item.toLowerCase().includes( searchValue.toLowerCase() )
@@ -15,7 +16,7 @@ export const useFilteredItemsList = ( itemsList: Category[], searchValue: string
 			acc.push( { type: 'category', value: category.label } );
 
 			filteredItems.forEach( ( item ) => {
-				acc.push( { type: 'item', value: item } );
+				acc.push( { type: 'item', value: item, disabled: disabledItems?.includes( item ) ?? false } );
 			} );
 		}
 

package/src/services/event-bus.ts

@@ -0,0 +1,38 @@
+class EventBus {
+	private listeners = new Map< string, Set< ( data?: unknown ) => void > >();
+
+	subscribe( eventName: string, callback: ( data?: unknown ) => void ) {
+		if ( ! this.listeners.has( eventName ) ) {
+			this.listeners.set( eventName, new Set() );
+		}
+		const eventListeners = this.listeners.get( eventName );
+		if ( eventListeners ) {
+			eventListeners.add( callback );
+		}
+	}
+
+	unsubscribe( eventName: string, callback: ( data?: unknown ) => void ) {
+		const eventListeners = this.listeners.get( eventName );
+		if ( ! eventListeners ) {
+			return;
+		}
+
+		eventListeners.delete( callback );
+		if ( eventListeners.size === 0 ) {
+			this.listeners.delete( eventName );
+		}
+	}
+
+	emit( eventName: string, data?: unknown ) {
+		const eventListeners = this.listeners.get( eventName );
+		if ( eventListeners ) {
+			eventListeners.forEach( ( callback ) => callback( data ) );
+		}
+	}
+
+	clearAll(): void {
+		this.listeners.clear();
+	}
+}
+
+export const eventBus = new EventBus();