@elementor/editor-controls 3.33.0-99 → 3.35.0-325

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/hooks/use-repeatable-control-context.ts

@@ -1,12 +1,15 @@
 import { createContext, useContext } from 'react';
 import { type PropTypeUtil } from '@elementor/editor-props';
 
+import type { Item, RepeatablePropValue } from '../components/control-repeater/types';
+
 export type ChildControlConfig = {
 	component: React.ComponentType;
 	props?: Record< string, unknown >;
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	propTypeUtil: PropTypeUtil< string, any >;
 	label?: string;
+	isItemDisabled?: ( item: Item< RepeatablePropValue > ) => boolean;
 };
 
 type RepeatableControlContextType = ChildControlConfig & {

package/src/hooks/use-sync-external-state.tsx

@@ -37,7 +37,6 @@ export const useSyncExternalState = < TValue, >( {
 	useEffect( () => {
 		setInternal( ( prevInternal ) => toInternal( external, prevInternal ) );
 
-		// eslint-disable-next-line react-compiler/react-compiler
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ external ] );
 

package/src/index.ts

@@ -7,6 +7,7 @@ export { StrokeControl } from './controls/stroke-control';
 export { BoxShadowRepeaterControl } from './controls/box-shadow-repeater-control';
 export { FilterRepeaterControl } from './controls/filter-control/filter-repeater-control';
 export { SelectControl } from './controls/select-control';
+export { SelectControlWrapper } from './controls/select-control-wrapper';
 export { ColorControl } from './controls/color-control';
 export { ToggleControl } from './controls/toggle-control';
 export { NumberControl } from './controls/number-control';
@@ -16,6 +17,8 @@ export { FontFamilyControl } from './controls/font-family-control/font-family-co
 export { ItemSelector } from './components/item-selector';
 export { UrlControl } from './controls/url-control';
 export { LinkControl } from './controls/link-control';
+export { HtmlTagControl } from './controls/html-tag-control';
+export { QueryControl } from './controls/query-control';
 export { GapControl } from './controls/gap-control';
 export { AspectRatioControl } from './controls/aspect-ratio-control';
 export { SvgMediaControl } from './controls/svg-media-control';
@@ -25,24 +28,38 @@ export { RepeatableControl } from './controls/repeatable-control';
 export { KeyValueControl } from './controls/key-value-control';
 export { PositionControl } from './controls/position-control';
 export { TransformRepeaterControl } from './controls/transform-control/transform-repeater-control';
-export { TransformBaseControl } from './controls/transform-control/transform-base-control';
+export { TransformSettingsControl } from './controls/transform-control/transform-settings-control';
 export { TransitionRepeaterControl } from './controls/transition-control/transition-repeater-control';
 export { PopoverContent } from './components/popover-content';
 export { enqueueFont } from './controls/font-family-control/enqueue-font';
 export { transitionProperties, transitionsItemsList } from './controls/transition-control/data';
+export { DateTimeControl } from './controls/date-time-control';
+export { InlineEditingControl } from './controls/inline-editing-control';
+export { InlineEditor } from './components/inline-editor';
+export { InlineEditorToolbar } from './components/inline-editor-toolbar';
 
 // components
 export { ControlFormLabel } from './components/control-form-label';
 export { ControlToggleButtonGroup } from './components/control-toggle-button-group';
-export { CssEditor } from './components/css-code-editor/css-editor';
+export { ToggleButtonGroupUi } from './components/control-toggle-button-group';
+export { ClearIconButton } from './components/icon-buttons/clear-icon-button';
+export {
+	Repeater,
+	type SetRepeaterValuesMeta,
+	type ItemsActionPayload,
+	type RepeaterItem,
+} from './components/repeater/repeater';
+export { FloatingActionsBar } from './components/floating-bar';
+export { PopoverGridContainer } from './components/popover-grid-container';
 
 // types
 export type { ControlComponent } from './create-control';
 export type { ToggleButtonGroupItem } from './components/control-toggle-button-group';
 export type { EqualUnequalItems } from './controls/equal-unequal-sizes-control';
 export type { ControlActionsItems } from './control-actions/control-actions-context';
+export type { AdornmentComponent } from './control-adornments/control-adornments-context';
 export type { PropProviderProps } from './bound-prop-context';
-export type { SetValue } from './bound-prop-context/prop-context';
+export type { SetValue, SetValueMeta } from './bound-prop-context/prop-context';
 export type { ExtendedOption, Unit, LengthUnit, AngleUnit, TimeUnit } from './utils/size-control';
 export type { ToggleControlProps } from './controls/toggle-control';
 export type { FontCategory } from './controls/font-family-control/font-family-control';
@@ -59,9 +76,8 @@ export { createControl } from './create-control';
 export {
 	injectIntoRepeaterItemIcon,
 	injectIntoRepeaterItemLabel,
-	injectIntoRepeaterHeaderActions,
 	injectIntoRepeaterItemActions,
-} from './components/unstable-repeater/locations';
+} from './components/control-repeater/locations';
 
 // hooks
 export { useSyncExternalState } from './hooks/use-sync-external-state';

package/src/utils/convert-toggle-options-to-atomic.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { ToggleButtonGroupItem } from '@elementor/editor-controls';
+import * as Icons from '@elementor/icons';
+
+export type DynamicToggleOption = {
+	value: string;
+	label: string;
+	icon?: string;
+	showTooltip?: boolean;
+	exclusive?: boolean;
+};
+
+export const convertToggleOptionsToAtomic = (
+	options: DynamicToggleOption[]
+): Array< ToggleButtonGroupItem< string > & { exclusive?: boolean } > => {
+	return options.map( ( option ) => {
+		const iconName = option.icon;
+		const IconComponent = Icons[ iconName as keyof typeof Icons ];
+
+		return {
+			value: option.value,
+			label: option.label,
+			renderContent: ( { size } ) => {
+				if ( IconComponent ) {
+					return <IconComponent fontSize={ size } />;
+				}
+				return option.label;
+			},
+			showTooltip: option.showTooltip,
+			exclusive: option.exclusive,
+		};
+	} );
+};

package/src/utils/escape-html-attr.ts

@@ -0,0 +1,11 @@
+export const escapeHtmlAttr = ( value: string ): string => {
+	const specialChars: Record< string, string > = {
+		'&': '&amp;',
+		'<': '&lt;',
+		'>': '&gt;',
+		"'": '&#39;',
+		'"': '&quot;',
+	};
+
+	return value.replace( /[&<>'"]/g, ( char ) => specialChars[ char ] || char );
+};

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

@@ -1,52 +0,0 @@
-import { Box, Button, styled } from '@elementor/ui';
-
-export const EditorWrapper = styled( Box )`
-	border: 1px solid var( --e-a-border-color );
-	border-radius: 8px;
-	padding: 10px 12px;
-	position: relative;
-	height: 200px;
-
-	.monaco-editor .suggest-widget {
-		width: 220px !important;
-		max-width: 220px !important;
-	}
-
-	.visual-content-dimmed {
-		opacity: 0.6;
-		color: #aaa !important;
-		pointer-events: none;
-	}
-`;
-
-export const ResizeHandle = styled( Button )`
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	height: 6px;
-	cursor: ns-resize;
-	background: transparent;
-	border: none;
-	padding: 0;
-
-	&:hover {
-		background: rgba( 0, 0, 0, 0.05 );
-	}
-
-	&:active {
-		background: rgba( 0, 0, 0, 0.1 );
-	}
-
-	&::after {
-		content: '';
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate( -50%, -50% );
-		width: 30px;
-		height: 2px;
-		background: var( --e-a-border-color );
-		border-radius: 1px;
-	}
-`;

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

@@ -1,142 +0,0 @@
-import * as React from 'react';
-import type { editor, MonacoEditor } from 'monaco-types';
-import { useActiveBreakpoint } from '@elementor/editor-responsive';
-import { useTheme } from '@elementor/ui';
-import { Editor } from '@monaco-editor/react';
-
-import { EditorWrapper } from './css-editor.styles';
-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, isValid: boolean ) => void;
-};
-
-const setVisualContent = ( value: string ): string => {
-	const trimmed = value.trim();
-	return `element.style {\n${ trimmed ? '  ' + trimmed.replace( /\n/g, '\n  ' ) + '\n' : '  \n' }}`;
-};
-
-const getActual = ( value: string ): string => {
-	const lines = value.split( '\n' );
-	if ( lines.length < 2 ) {
-		return '';
-	}
-	return lines
-		.slice( 1, -1 )
-		.map( ( line ) => line.replace( /^ {2}/, '' ) )
-		.join( '\n' );
-};
-
-const createEditorDidMountHandler = (
-	editorRef: React.MutableRefObject< editor.IStandaloneCodeEditor | null >,
-	monacoRef: React.MutableRefObject< MonacoEditor | null >,
-	debounceTimer: React.MutableRefObject< NodeJS.Timeout | null >,
-	onChange: ( value: string, isValid: boolean ) => void
-) => {
-	return ( editor: editor.IStandaloneCodeEditor, monaco: MonacoEditor ) => {
-		editorRef.current = editor;
-		monacoRef.current = monaco;
-
-		preventChangeOnVisualContent( editor );
-
-		setCustomSyntaxRules( editor, monaco );
-
-		monaco.editor.onDidChangeMarkers( () => {
-			setTimeout( () => clearMarkersFromVisualContent( editor, monaco ), 0 );
-		} );
-
-		editor.setPosition( { lineNumber: 2, column: ( editor.getModel()?.getLineContent( 2 ).length ?? 0 ) + 1 } );
-
-		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 );
-
-				onChange( userContent, hasNoErrors );
-			}, 500 );
-
-			debounceTimer.current = newTimer;
-		} );
-	};
-};
-
-export const CssEditor = ( { value, onChange }: CssEditorProps ) => {
-	const theme = useTheme();
-	const containerRef = React.useRef< HTMLDivElement >( null );
-	const editorRef = React.useRef< editor.IStandaloneCodeEditor | null >( null );
-	const monacoRef = React.useRef< MonacoEditor | null >( null );
-	const debounceTimer = React.useRef< NodeJS.Timeout | null >( null );
-	const activeBreakpoint = useActiveBreakpoint();
-
-	const handleResize = React.useCallback( () => {
-		editorRef.current?.layout();
-	}, [] );
-
-	const handleHeightChange = React.useCallback( ( height: number ) => {
-		if ( containerRef.current ) {
-			containerRef.current.style.height = `${ height }px`;
-		}
-	}, [] );
-
-	const handleEditorDidMount = createEditorDidMountHandler( editorRef, monacoRef, debounceTimer, onChange );
-
-	React.useEffect( () => {
-		const timerRef = debounceTimer;
-		return () => {
-			const timer = timerRef.current;
-			if ( timer ) {
-				clearTimeout( timer );
-			}
-		};
-	}, [] );
-
-	return (
-		<EditorWrapper ref={ containerRef }>
-			<Editor
-				key={ activeBreakpoint }
-				height="100%"
-				language="css"
-				theme={ theme.palette.mode === 'dark' ? 'vs-dark' : 'vs' }
-				value={ setVisualContent( value ) }
-				onMount={ handleEditorDidMount }
-				options={ {
-					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
-				onResize={ handleResize }
-				containerRef={ containerRef }
-				onHeightChange={ handleHeightChange }
-			/>
-		</EditorWrapper>
-	);
-};

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

@@ -1,75 +0,0 @@
-import type { editor, MonacoEditor } from 'monaco-types';
-import { __ } from '@wordpress/i18n';
-
-const forbiddenPatterns = [
-	{
-		pattern: ':hover',
-		message: __(
-			'The use of pseudo-states is not permitted. Instead, switch to the desired pseudo state and add your custom code there.',
-			'elementor'
-		),
-	},
-	{
-		pattern: ':active',
-		message: __(
-			'The use of pseudo-states is not permitted. Instead, switch to the desired pseudo state and add your custom code there.',
-			'elementor'
-		),
-	},
-	{
-		pattern: '@media',
-		message: __(
-			'The use of @media is not permitted. Instead, switch to the desired breakpoint and add your custom code there.',
-			'elementor'
-		),
-	},
-];
-
-export function setCustomSyntaxRules( editor: editor.IStandaloneCodeEditor, monaco: MonacoEditor ): boolean {
-	const model = editor.getModel();
-	if ( ! model ) {
-		return true;
-	}
-
-	const customMarkers: editor.IMarkerData[] = [];
-
-	forbiddenPatterns.forEach( ( rule ) => {
-		const matches = model.findMatches( rule.pattern, true, false, true, null, true );
-		matches.forEach( ( match ) => {
-			customMarkers.push( {
-				severity: monaco.MarkerSeverity.Error,
-				message: rule.message,
-				startLineNumber: match.range.startLineNumber,
-				startColumn: match.range.startColumn,
-				endLineNumber: match.range.endLineNumber,
-				endColumn: match.range.endColumn,
-				source: 'custom-css-rules',
-			} );
-		} );
-	} );
-
-	monaco.editor.setModelMarkers( model, 'custom-css-rules', customMarkers );
-	return customMarkers.length === 0;
-}
-
-export function validate( editor: editor.IStandaloneCodeEditor, monaco: MonacoEditor ): boolean {
-	const model = editor.getModel();
-	if ( ! model ) {
-		return true;
-	}
-	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/resize-handle.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-
-import { ResizeHandle } from './css-editor.styles';
-
-type ResizeHandleProps = {
-	onResize: ( height: number ) => void;
-	containerRef: React.RefObject< HTMLDivElement >;
-	onHeightChange?: ( height: number ) => void;
-};
-
-export const ResizeHandleComponent = ( { onResize, containerRef, onHeightChange }: ResizeHandleProps ) => {
-	const handleResizeMove = React.useCallback(
-		( e: MouseEvent ) => {
-			const container = containerRef.current;
-			if ( ! container ) {
-				return;
-			}
-			const containerRect = container.getBoundingClientRect();
-			const newHeight = Math.max( 100, e.clientY - containerRect.top );
-			onHeightChange?.( newHeight );
-			onResize( newHeight );
-		},
-		[ containerRef, onResize, onHeightChange ]
-	);
-
-	const handleResizeEnd = React.useCallback( () => {
-		document.removeEventListener( 'mousemove', handleResizeMove );
-		document.removeEventListener( 'mouseup', handleResizeEnd );
-	}, [ handleResizeMove ] );
-
-	const handleResizeStart = React.useCallback(
-		( e: React.MouseEvent ) => {
-			e.preventDefault();
-			e.stopPropagation();
-			document.addEventListener( 'mousemove', handleResizeMove );
-			document.addEventListener( 'mouseup', handleResizeEnd );
-		},
-		[ handleResizeMove, handleResizeEnd ]
-	);
-
-	React.useEffect( () => {
-		return () => {
-			document.removeEventListener( 'mousemove', handleResizeMove );
-			document.removeEventListener( 'mouseup', handleResizeEnd );
-		};
-	}, [ handleResizeMove, handleResizeEnd ] );
-
-	return (
-		<ResizeHandle
-			onMouseDown={ handleResizeStart }
-			aria-label="Resize editor height"
-			title="Drag to resize editor height"
-		/>
-	);
-};

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

@@ -1,69 +0,0 @@
-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 );
-	};
-};