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

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-100",
   "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-100",
+    "@elementor/editor-elements": "3.33.0-100",
+    "@elementor/editor-props": "3.33.0-100",
+    "@elementor/editor-responsive": "3.33.0-100",
+    "@elementor/editor-ui": "3.33.0-100",
+    "@elementor/editor-v1-adapters": "3.33.0-100",
+    "@elementor/env": "3.33.0-100",
+    "@elementor/http-client": "3.33.0-100",
     "@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-100",
+    "@elementor/query": "3.33.0-100",
+    "@elementor/session": "3.33.0-100",
     "@elementor/ui": "1.36.12",
-    "@elementor/utils": "3.32.0-95",
-    "@elementor/wp-media": "3.32.0-95",
+    "@elementor/utils": "3.33.0-100",
+    "@elementor/wp-media": "3.33.0-100",
     "@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/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

@@ -10,6 +10,7 @@ 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 = {
@@ -70,6 +71,8 @@ const disableAddItemTooltipContent = (
 	</Alert>
 );
 
+subscribeToTransitionEvent();
+
 export const TransitionRepeaterControl = createControl(
 	( {
 		recentlyUsedListGetter,

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();