@elementor/editor-controls 3.33.0-99 → 3.34.3

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

package/src/components/repeater.tsx

@@ -1,343 +0,0 @@
-import * as React from 'react';
-import { useEffect, useState } from 'react';
-import { type PropKey, type PropTypeUtil } from '@elementor/editor-props';
-import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon, XIcon } from '@elementor/icons';
-import {
-	bindPopover,
-	bindTrigger,
-	Box,
-	IconButton,
-	Popover,
-	Stack,
-	Tooltip,
-	Typography,
-	UnstableTag,
-	type UnstableTagProps,
-	usePopupState,
-} from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { ControlAdornments } from '../control-adornments/control-adornments';
-import { useSyncExternalState } from '../hooks/use-sync-external-state';
-import { SectionContent } from './section-content';
-import { SortableItem, SortableProvider } from './sortable';
-import { RepeaterItemIconSlot, RepeaterItemLabelSlot } from './unstable-repeater/locations';
-
-const SIZE = 'tiny';
-
-type AnchorEl = HTMLElement | null;
-
-type Item< T > = {
-	disabled?: boolean;
-} & T;
-export type CollectionPropUtil< T > = PropTypeUtil< PropKey, T[] >;
-
-type RepeaterItemContentProps< T > = {
-	anchorEl: AnchorEl;
-	bind: PropKey;
-	value: T;
-	collectionPropUtil?: CollectionPropUtil< T >;
-};
-
-type RepeaterItemContent< T > = React.ComponentType< RepeaterItemContentProps< T > >;
-
-type RepeaterProps< T > = {
-	label: string;
-	values?: T[];
-	addToBottom?: boolean;
-	openOnAdd?: boolean;
-	setValues: ( newValue: T[] ) => void;
-	disabled?: boolean;
-	itemSettings: {
-		initialValues: T;
-		Label: React.ComponentType< { value: T } >;
-		Icon: React.ComponentType< { value: T } >;
-		Content: RepeaterItemContent< T >;
-	};
-	showDuplicate?: boolean;
-	showToggle?: boolean;
-	isSortable?: boolean;
-	collectionPropUtil?: CollectionPropUtil< T >;
-};
-
-const EMPTY_OPEN_ITEM = -1;
-
-export const Repeater = < T, >( {
-	label,
-	itemSettings,
-	disabled = false,
-	openOnAdd = false,
-	addToBottom = false,
-	values: repeaterValues = [],
-	setValues: setRepeaterValues,
-	showDuplicate = true,
-	showToggle = true,
-	isSortable = true,
-	collectionPropUtil,
-}: RepeaterProps< Item< T > > ) => {
-	const [ openItem, setOpenItem ] = useState( EMPTY_OPEN_ITEM );
-
-	const [ items, setItems ] = useSyncExternalState( {
-		external: repeaterValues,
-		// @ts-expect-error - as long as persistWhen => true, value will never be null
-		setExternal: setRepeaterValues,
-		persistWhen: () => true,
-	} );
-
-	const [ uniqueKeys, setUniqueKeys ] = useState( items.map( ( _, index ) => index ) );
-
-	const generateNextKey = ( source: number[] ) => {
-		return 1 + Math.max( 0, ...source );
-	};
-
-	const addRepeaterItem = () => {
-		const newItem = structuredClone( itemSettings.initialValues );
-		const newKey = generateNextKey( uniqueKeys );
-
-		if ( addToBottom ) {
-			setItems( [ ...items, newItem ] );
-			setUniqueKeys( [ ...uniqueKeys, newKey ] );
-		} else {
-			setItems( [ newItem, ...items ] );
-			setUniqueKeys( [ newKey, ...uniqueKeys ] );
-		}
-
-		if ( openOnAdd ) {
-			setOpenItem( newKey );
-		}
-	};
-
-	const duplicateRepeaterItem = ( index: number ) => {
-		const newItem = structuredClone( items[ index ] );
-		const newKey = generateNextKey( uniqueKeys );
-
-		// Insert the new (cloned item) at the next spot (after the current index)
-		const atPosition = 1 + index;
-
-		setItems( [ ...items.slice( 0, atPosition ), newItem, ...items.slice( atPosition ) ] );
-		setUniqueKeys( [ ...uniqueKeys.slice( 0, atPosition ), newKey, ...uniqueKeys.slice( atPosition ) ] );
-	};
-
-	const removeRepeaterItem = ( index: number ) => {
-		setUniqueKeys(
-			uniqueKeys.filter( ( _, pos ) => {
-				return pos !== index;
-			} )
-		);
-
-		setItems(
-			items.filter( ( _, pos ) => {
-				return pos !== index;
-			} )
-		);
-	};
-
-	const toggleDisableRepeaterItem = ( index: number ) => {
-		setItems(
-			items.map( ( value, pos ) => {
-				if ( pos === index ) {
-					const { disabled: propDisabled, ...rest } = value;
-
-					// If the items should not be disabled, remove the disabled property.
-					return { ...rest, ...( propDisabled ? {} : { disabled: true } ) } as Item< T >;
-				}
-
-				return value;
-			} )
-		);
-	};
-
-	const onChangeOrder = ( reorderedKeys: number[] ) => {
-		setUniqueKeys( reorderedKeys );
-		setItems( ( prevItems ) => {
-			return reorderedKeys.map( ( keyValue ) => {
-				const index = uniqueKeys.indexOf( keyValue );
-				return prevItems[ index ];
-			} );
-		} );
-	};
-
-	return (
-		<SectionContent>
-			<Stack
-				direction="row"
-				justifyContent="start"
-				alignItems="center"
-				gap={ 1 }
-				sx={ { marginInlineEnd: -0.75 } }
-			>
-				<Typography component="label" variant="caption" color="text.secondary">
-					{ label }
-				</Typography>
-				<ControlAdornments />
-				<IconButton
-					size={ SIZE }
-					sx={ { ml: 'auto' } }
-					disabled={ disabled }
-					onClick={ addRepeaterItem }
-					aria-label={ __( 'Add item', 'elementor' ) }
-				>
-					<PlusIcon fontSize={ SIZE } />
-				</IconButton>
-			</Stack>
-			{ 0 < uniqueKeys.length && (
-				<SortableProvider value={ uniqueKeys } onChange={ onChangeOrder }>
-					{ uniqueKeys.map( ( key, index ) => {
-						const value = items[ index ];
-
-						if ( ! value ) {
-							return null;
-						}
-
-						return (
-							<SortableItem id={ key } key={ `sortable-${ key }` } disabled={ ! isSortable }>
-								<RepeaterItem
-									disabled={ disabled }
-									propDisabled={ value?.disabled }
-									label={
-										<RepeaterItemLabelSlot value={ value }>
-											<itemSettings.Label value={ value } />
-										</RepeaterItemLabelSlot>
-									}
-									startIcon={
-										<RepeaterItemIconSlot value={ value }>
-											<itemSettings.Icon value={ value } />
-										</RepeaterItemIconSlot>
-									}
-									removeItem={ () => removeRepeaterItem( index ) }
-									duplicateItem={ () => duplicateRepeaterItem( index ) }
-									toggleDisableItem={ () => toggleDisableRepeaterItem( index ) }
-									openOnMount={ openOnAdd && openItem === key }
-									onOpen={ () => setOpenItem( EMPTY_OPEN_ITEM ) }
-									showDuplicate={ showDuplicate }
-									showToggle={ showToggle }
-									collectionPropUtil={ collectionPropUtil }
-								>
-									{ ( props ) => (
-										<itemSettings.Content { ...props } value={ value } bind={ String( index ) } />
-									) }
-								</RepeaterItem>
-							</SortableItem>
-						);
-					} ) }
-				</SortableProvider>
-			) }
-		</SectionContent>
-	);
-};
-
-type RepeaterItemProps< T > = {
-	label: React.ReactNode;
-	propDisabled?: boolean;
-	startIcon: UnstableTagProps[ 'startIcon' ];
-	removeItem: () => void;
-	duplicateItem: () => void;
-	toggleDisableItem: () => void;
-	children: ( props: Pick< RepeaterItemContentProps< T >, 'anchorEl' | 'collectionPropUtil' > ) => React.ReactNode;
-	openOnMount: boolean;
-	onOpen: () => void;
-	showDuplicate: boolean;
-	showToggle: boolean;
-	disabled?: boolean;
-	collectionPropUtil?: CollectionPropUtil< T >;
-};
-
-const RepeaterItem = < T, >( {
-	label,
-	propDisabled,
-	startIcon,
-	children,
-	removeItem,
-	duplicateItem,
-	toggleDisableItem,
-	openOnMount,
-	onOpen,
-	showDuplicate,
-	showToggle,
-	disabled,
-	collectionPropUtil,
-}: RepeaterItemProps< T > ) => {
-	const [ anchorEl, setAnchorEl ] = useState< AnchorEl >( null );
-	const { popoverState, popoverProps, ref, setRef } = usePopover( openOnMount, onOpen );
-
-	const duplicateLabel = __( 'Duplicate', 'elementor' );
-	const toggleLabel = propDisabled ? __( 'Show', 'elementor' ) : __( 'Hide', 'elementor' );
-	const removeLabel = __( 'Remove', 'elementor' );
-
-	return (
-		<>
-			<UnstableTag
-				disabled={ disabled }
-				label={ label }
-				showActionsOnHover
-				fullWidth
-				ref={ setRef }
-				variant="outlined"
-				aria-label={ __( 'Open item', 'elementor' ) }
-				{ ...bindTrigger( popoverState ) }
-				startIcon={ startIcon }
-				actions={
-					<>
-						{ showDuplicate && (
-							<Tooltip title={ duplicateLabel } placement="top">
-								<IconButton size={ SIZE } onClick={ duplicateItem } aria-label={ duplicateLabel }>
-									<CopyIcon fontSize={ SIZE } />
-								</IconButton>
-							</Tooltip>
-						) }
-						{ showToggle && (
-							<Tooltip title={ toggleLabel } placement="top">
-								<IconButton size={ SIZE } onClick={ toggleDisableItem } aria-label={ toggleLabel }>
-									{ propDisabled ? <EyeOffIcon fontSize={ SIZE } /> : <EyeIcon fontSize={ SIZE } /> }
-								</IconButton>
-							</Tooltip>
-						) }
-						<Tooltip title={ removeLabel } placement="top">
-							<IconButton size={ SIZE } onClick={ removeItem } aria-label={ removeLabel }>
-								<XIcon fontSize={ SIZE } />
-							</IconButton>
-						</Tooltip>
-					</>
-				}
-			/>
-			<Popover
-				disablePortal
-				slotProps={ {
-					paper: {
-						ref: setAnchorEl,
-						sx: { mt: 0.5, width: ref?.getBoundingClientRect().width },
-					},
-				} }
-				anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
-				{ ...popoverProps }
-				anchorEl={ ref }
-			>
-				<Box>{ children( { anchorEl, collectionPropUtil } ) }</Box>
-			</Popover>
-		</>
-	);
-};
-
-const usePopover = ( openOnMount: boolean, onOpen: () => void ) => {
-	const [ ref, setRef ] = useState< HTMLElement | null >( null );
-
-	const popoverState = usePopupState( { variant: 'popover' } );
-
-	const popoverProps = bindPopover( popoverState );
-
-	useEffect( () => {
-		if ( openOnMount && ref ) {
-			popoverState.open( ref );
-			onOpen?.();
-		}
-		// eslint-disable-next-line react-compiler/react-compiler
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ ref ] );
-
-	return {
-		popoverState,
-		ref,
-		setRef,
-		popoverProps,
-	};
-};