@elementor/editor-controls 4.4.0-1131 → 4.4.0-1132

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": "4.4.0-1131",
+  "version": "4.4.0-1132",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,23 +40,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.4.0-1131",
-    "@elementor/editor-elements": "4.4.0-1131",
-    "@elementor/editor-props": "4.4.0-1131",
-    "@elementor/editor-responsive": "4.4.0-1131",
-    "@elementor/editor-ui": "4.4.0-1131",
-    "@elementor/editor-v1-adapters": "4.4.0-1131",
-    "@elementor/env": "4.4.0-1131",
-    "@elementor/events": "4.4.0-1131",
-    "@elementor/http-client": "4.4.0-1131",
+    "@elementor/editor-current-user": "4.4.0-1132",
+    "@elementor/editor-elements": "4.4.0-1132",
+    "@elementor/editor-props": "4.4.0-1132",
+    "@elementor/editor-responsive": "4.4.0-1132",
+    "@elementor/editor-ui": "4.4.0-1132",
+    "@elementor/editor-v1-adapters": "4.4.0-1132",
+    "@elementor/env": "4.4.0-1132",
+    "@elementor/events": "4.4.0-1132",
+    "@elementor/http-client": "4.4.0-1132",
     "@elementor/icons": "~1.78.1",
-    "@elementor/locations": "4.4.0-1131",
-    "@elementor/query": "4.4.0-1131",
-    "@elementor/schema": "4.4.0-1131",
-    "@elementor/session": "4.4.0-1131",
+    "@elementor/locations": "4.4.0-1132",
+    "@elementor/query": "4.4.0-1132",
+    "@elementor/schema": "4.4.0-1132",
+    "@elementor/session": "4.4.0-1132",
     "@elementor/ui": "1.41.1",
-    "@elementor/utils": "4.4.0-1131",
-    "@elementor/wp-media": "4.4.0-1131",
+    "@elementor/utils": "4.4.0-1132",
+    "@elementor/wp-media": "4.4.0-1132",
     "@monaco-editor/react": "^4.7.0",
     "@tanstack/react-virtual": "^3.13.3",
     "@tiptap/extension-bold": "^3.11.1",

package/src/controls/image-control.tsx

@@ -10,33 +10,40 @@ import { ControlLabel } from '../components/control-label';
 import { createControl } from '../create-control';
 import { useUnfilteredFilesUpload } from '../hooks/use-unfiltered-files-upload';
 import { ImageMediaControl } from './image-media-control';
+import { ImageOptimizeTrigger, type ImagePromotion } from './image-optimize-trigger';
 import { SelectControl } from './select-control';
 
 type ImageControlProps = {
 	sizes: { label: string; value: string }[];
 	label?: string;
+	promotion?: ImagePromotion;
 };
 
-export const ImageControl = createControl( ( { sizes, label = __( 'Image', 'elementor' ) }: ImageControlProps ) => {
-	const propContext = useBoundProp( imagePropTypeUtil );
+export const ImageControl = createControl(
+	( { sizes, promotion, label = __( 'Image', 'elementor' ) }: ImageControlProps ) => {
+		const propContext = useBoundProp( imagePropTypeUtil );
 
-	return (
-		<PropProvider { ...propContext }>
-			<Stack gap={ 1.5 }>
-				<ControlLabel>{ label }</ControlLabel>
-				<ImageSrcControl label={ label } />
-				<Grid container gap={ 1.5 } alignItems="center" flexWrap="nowrap">
-					<Grid item xs={ 6 }>
-						<ControlFormLabel>{ __( 'Resolution', 'elementor' ) }</ControlFormLabel>
-					</Grid>
-					<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
-						<ImageSizeControl sizes={ sizes } />
+		return (
+			<PropProvider { ...propContext }>
+				<Stack gap={ 1.5 }>
+					<Stack direction="row" alignItems="center" justifyContent="space-between">
+						<ControlLabel>{ label }</ControlLabel>
+						<ImageOptimizeTrigger promotion={ promotion } />
+					</Stack>
+					<ImageSrcControl label={ label } />
+					<Grid container gap={ 1.5 } alignItems="center" flexWrap="nowrap">
+						<Grid item xs={ 6 }>
+							<ControlFormLabel>{ __( 'Resolution', 'elementor' ) }</ControlFormLabel>
+						</Grid>
+						<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
+							<ImageSizeControl sizes={ sizes } />
+						</Grid>
 					</Grid>
-				</Grid>
-			</Stack>
-		</PropProvider>
-	);
-} );
+				</Stack>
+			</PropProvider>
+		);
+	}
+);
 
 const ImageSrcControl = ( { label }: { label: string } ) => {
 	const { data: allowSvgUpload } = useUnfilteredFilesUpload();

package/src/controls/image-optimize-trigger.tsx

@@ -0,0 +1,215 @@
+import * as React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { ajax } from '@elementor/editor-v1-adapters';
+import { BulbIcon } from '@elementor/icons';
+import { Box, Button, CloseButton, Infotip, Stack, Typography, useTheme } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { isNoticeDismissed, markNoticeAsDismissedInSession } from './notice-control';
+
+const POPOVER_WIDTH = 296;
+const POPOVER_OFFSET: [ number, number ] = [ -24, 12 ];
+
+type InfotipWithPopperProps = React.ComponentProps< typeof Infotip > & {
+	PopperProps?: {
+		modifiers?: Array< { name: string; options?: { offset: [ number, number ] } } >;
+	};
+};
+
+const OptimizeInfotip = Infotip as React.FC< InfotipWithPopperProps >;
+
+export type ImagePromotion = {
+	label?: string;
+	title?: string;
+	content: string;
+	buttonText?: string;
+	buttonUrl?: string;
+	dismissible?: string;
+};
+
+type PreviewWindow = Window & {
+	elementor?: {
+		$preview?: ArrayLike< { contentDocument?: Document | null } >;
+	};
+};
+
+const isEventInside = ( target: EventTarget | null, anchor: HTMLElement | null ) => {
+	if ( ! ( target instanceof Element ) ) {
+		return false;
+	}
+
+	return !! anchor?.contains( target ) || !! target.closest( '[data-image-optimize-popover], .MuiTooltip-popper' );
+};
+
+export const ImageOptimizeTrigger = ( { promotion }: { promotion?: ImagePromotion } ) => {
+	const [ open, setOpen ] = useState( false );
+	const [ dismissed, setDismissed ] = useState( () => isNoticeDismissed( promotion?.dismissible ) );
+	const anchorRef = useRef< HTMLButtonElement >( null );
+	const theme = useTheme();
+	const placement = 'rtl' === theme.direction ? 'left-start' : 'right-start';
+
+	useEffect( () => {
+		if ( ! open ) {
+			return undefined;
+		}
+
+		const closeOnPointerDown = ( event: Event ) => {
+			if ( isEventInside( event.target, anchorRef.current ) ) {
+				return;
+			}
+
+			setOpen( false );
+		};
+
+		const closeOnEscape = ( event: KeyboardEvent ) => {
+			if ( 'Escape' !== event.key ) {
+				return;
+			}
+
+			event.preventDefault();
+			event.stopPropagation();
+			event.stopImmediatePropagation();
+
+			if ( 'keydown' === event.type ) {
+				setOpen( false );
+			}
+		};
+
+		const iframeDocument = ( window as PreviewWindow ).elementor?.$preview?.[ 0 ]?.contentDocument;
+
+		document.addEventListener( 'mousedown', closeOnPointerDown, true );
+		document.addEventListener( 'keydown', closeOnEscape, true );
+		document.addEventListener( 'keyup', closeOnEscape, true );
+		iframeDocument?.addEventListener( 'mousedown', closeOnPointerDown, true );
+		iframeDocument?.addEventListener( 'keydown', closeOnEscape, true );
+		iframeDocument?.addEventListener( 'keyup', closeOnEscape, true );
+
+		return () => {
+			document.removeEventListener( 'mousedown', closeOnPointerDown, true );
+			document.removeEventListener( 'keydown', closeOnEscape, true );
+			document.removeEventListener( 'keyup', closeOnEscape, true );
+			iframeDocument?.removeEventListener( 'mousedown', closeOnPointerDown, true );
+			iframeDocument?.removeEventListener( 'keydown', closeOnEscape, true );
+			iframeDocument?.removeEventListener( 'keyup', closeOnEscape, true );
+		};
+	}, [ open ] );
+
+	if ( dismissed || ! promotion?.content ) {
+		return null;
+	}
+
+	const dismiss = () => {
+		setDismissed( true );
+		setOpen( false );
+
+		if ( ! promotion.dismissible ) {
+			return;
+		}
+
+		markNoticeAsDismissedInSession( promotion.dismissible );
+
+		ajax.load( {
+			action: 'dismissed_editor_notices',
+			unique_id: `dismiss-editor-notice-${ promotion.dismissible }`,
+			data: { dismissId: promotion.dismissible },
+		} ).catch( () => {} );
+	};
+
+	const hideForSession = () => {
+		setDismissed( true );
+		setOpen( false );
+
+		if ( promotion.dismissible ) {
+			markNoticeAsDismissedInSession( promotion.dismissible );
+		}
+	};
+
+	return (
+		<OptimizeInfotip
+			arrow
+			disableFocusListener
+			disableHoverListener
+			disableTouchListener
+			content={
+				<Box className="dialog-widget" data-image-optimize-popover="" sx={ { width: POPOVER_WIDTH } }>
+					<Stack direction="row" alignItems="center" gap={ 1 } py={ 1 } px={ 2 }>
+						<BulbIcon fontSize="small" color="info" />
+						<Typography variant="subtitle2">
+							{ promotion.title || __( 'Optimize your images', 'elementor' ) }
+						</Typography>
+						<CloseButton
+							edge="end"
+							sx={ { ml: 'auto' } }
+							slotProps={ { icon: { fontSize: 'small' } } }
+							onClick={ () => setOpen( false ) }
+						/>
+					</Stack>
+					<Stack px={ 2 }>
+						<Typography variant="body2" color="secondary" sx={ { pt: 0.5, pb: 1 } }>
+							{ promotion.content }
+						</Typography>
+					</Stack>
+					<Stack direction="row" alignItems="center" pt={ 1 } pb={ 1.5 } px={ 2 }>
+						<Button variant="text" size="small" color="secondary" onClick={ dismiss } sx={ { ml: -1 } }>
+							{ __( 'Dismiss', 'elementor' ) }
+						</Button>
+						{ promotion.buttonText && promotion.buttonUrl && (
+							<Button
+								variant="contained"
+								size="small"
+								color="info"
+								href={ promotion.buttonUrl }
+								target="_blank"
+								rel="noopener noreferrer"
+								onClick={ hideForSession }
+								sx={ { ml: 'auto' } }
+							>
+								{ promotion.buttonText }
+							</Button>
+						) }
+					</Stack>
+				</Box>
+			}
+			open={ open }
+			placement={ placement }
+			PopperProps={ {
+				modifiers: [
+					{
+						name: 'offset',
+						options: { offset: POPOVER_OFFSET },
+					},
+				],
+			} }
+		>
+			<Button
+				ref={ anchorRef }
+				variant="text"
+				size="small"
+				color="info"
+				aria-expanded={ open }
+				onClick={ () => setOpen( ( current ) => ! current ) }
+				startIcon={
+					<BulbIcon fontSize="tiny" sx={ { display: 'block', position: 'relative', top: '-3px' } } />
+				}
+				sx={ {
+					display: 'inline-flex',
+					alignItems: 'center',
+					minWidth: 0,
+					minHeight: 0,
+					px: 0.75,
+					py: 0.25,
+					lineHeight: 1,
+					fontWeight: 400,
+					'& .MuiButton-startIcon': {
+						display: 'inline-flex',
+						alignItems: 'center',
+						margin: 0,
+						mr: 0.5,
+					},
+				} }
+			>
+				{ promotion.label || __( 'Optimize', 'elementor' ) }
+			</Button>
+		</OptimizeInfotip>
+	);
+};

package/src/controls/inline-editing-control.tsx

@@ -1,109 +1,129 @@
 import * as React from 'react';
 import { type ComponentProps, useCallback, useState } from 'react';
 import { escapedHtmlPropTypeUtil } from '@elementor/editor-props';
-import { Box, type SxProps, type Theme } from '@elementor/ui';
+import { Box, Stack, type SxProps, type Theme } from '@elementor/ui';
 import { type Editor } from '@tiptap/react';
 
 import { useBoundProp, usePropKeyContext } from '../bound-prop-context';
+import { ControlLabel } from '../components/control-label';
 import { InlineEditor } from '../components/inline-editor';
 import { InlineEditorToolbar } from '../components/inline-editor-toolbar';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 import { extractInlineHtmlContent } from '../utils/inline-editing';
 import { type ControlProps } from '../utils/types';
+import { ImageOptimizeTrigger, type ImagePromotion } from './image-optimize-trigger';
 
 type Props = ControlProps< {
 	sx?: SxProps< Theme >;
 	attributes?: Record< string, string >;
 	props?: ComponentProps< 'div' >;
+	label?: string;
+	promotion?: ImagePromotion;
 } >;
 
-export const InlineEditingControl = createControl( ( { sx, attributes, props, context: { elementId } }: Props ) => {
-	const { setValue, placeholder, value } = useBoundProp( escapedHtmlPropTypeUtil );
-	const { value: rawValue } = usePropKeyContext();
-	const content = value ?? extractInlineHtmlContent( rawValue );
-	const [ editor, setEditor ] = useState< Editor | null >( null );
+export const InlineEditingControl = createControl(
+	( { sx, attributes, props, label, promotion, context: { elementId } }: Props ) => {
+		const { setValue, placeholder, value } = useBoundProp( escapedHtmlPropTypeUtil );
+		const { value: rawValue } = usePropKeyContext();
+		const content = value ?? extractInlineHtmlContent( rawValue );
+		const [ editor, setEditor ] = useState< Editor | null >( null );
 
-	const handleChange = useCallback(
-		( newValue: unknown ) => {
-			const html = ( newValue ?? '' ) as string;
+		const handleChange = useCallback(
+			( newValue: unknown ) => {
+				const html = ( newValue ?? '' ) as string;
 
-			setValue( html );
-		},
-		[ setValue ]
-	);
+				setValue( html );
+			},
+			[ setValue ]
+		);
 
-	return (
-		<ControlActions>
-			<Box sx={ { position: 'relative' } }>
-				{ editor && editor.isEditable && (
-					<InlineEditorToolbar
-						editor={ editor }
-						elementId={ elementId }
+		const editorField = (
+			<ControlActions>
+				<Box sx={ { position: 'relative' } }>
+					{ editor && editor.isEditable && (
+						<InlineEditorToolbar
+							editor={ editor }
+							elementId={ elementId }
+							sx={ ( theme: Theme ) => ( {
+								boxShadow: 'none',
+								border: '1px solid',
+								borderColor: theme.palette.text.secondary,
+								mb: 0.5,
+							} ) }
+							inControlPanel={ true }
+						/>
+					) }
+					<Box
 						sx={ ( theme: Theme ) => ( {
-							boxShadow: 'none',
+							p: 0.8,
 							border: '1px solid',
 							borderColor: theme.palette.text.secondary,
-							mb: 0.5,
-						} ) }
-						inControlPanel={ true }
-					/>
-				) }
-				<Box
-					sx={ ( theme: Theme ) => ( {
-						p: 0.8,
-						border: '1px solid',
-						borderColor: theme.palette.text.secondary,
-						borderRadius: '8px',
-						transition: 'border-color .2s ease, box-shadow .2s ease',
-						'&:hover': {
-							borderColor: theme.palette.text.primary,
-						},
-						'&:focus-within': {
-							borderColor: theme.palette.text.primary,
-							boxShadow: `0 0 0 1px ${ theme.palette.text.primary }`,
-						},
-						'& .ProseMirror:focus': {
-							outline: 'none',
-						},
-						'& .ProseMirror': {
-							minHeight: '100px',
-							fontSize: '12px',
-							'& a': {
-								color: 'inherit',
+							borderRadius: '8px',
+							transition: 'border-color .2s ease, box-shadow .2s ease',
+							'&:hover': {
+								borderColor: theme.palette.text.primary,
+							},
+							'&:focus-within': {
+								borderColor: theme.palette.text.primary,
+								boxShadow: `0 0 0 1px ${ theme.palette.text.primary }`,
+							},
+							'& .ProseMirror:focus': {
+								outline: 'none',
 							},
-							'& .elementor-inline-editor-reset': {
-								margin: 0,
-								padding: 0,
+							'& .ProseMirror': {
+								minHeight: '100px',
+								fontSize: '12px',
+								'& a': {
+									color: 'inherit',
+								},
+								'& .elementor-inline-editor-reset': {
+									margin: 0,
+									padding: 0,
+								},
+								'&.is-empty::before': {
+									content: 'attr(data-placeholder)',
+									color: 'text.tertiary',
+									pointerEvents: 'none',
+									position: 'absolute',
+									opacity: 0.6,
+								},
 							},
-							'&.is-empty::before': {
-								content: 'attr(data-placeholder)',
-								color: 'text.tertiary',
-								pointerEvents: 'none',
-								position: 'absolute',
-								opacity: 0.6,
+							'.strip-styles *': {
+								all: 'unset',
 							},
-						},
-						'.strip-styles *': {
-							all: 'unset',
-						},
-						...sx,
-					} ) }
-					{ ...attributes }
-					{ ...props }
-				>
-					<InlineEditor
-						value={ content }
-						setValue={ handleChange }
-						placeholder={ placeholder ?? null }
-						onEditorCreate={ setEditor }
-						onEditorDestroy={ () => setEditor( null ) }
-						sx={ {
-							paddingBlockStart: 5,
-						} }
-					/>
+							...sx,
+						} ) }
+						{ ...attributes }
+						{ ...props }
+					>
+						<InlineEditor
+							value={ content }
+							setValue={ handleChange }
+							placeholder={ placeholder ?? null }
+							onEditorCreate={ setEditor }
+							onEditorDestroy={ () => setEditor( null ) }
+							sx={ {
+								paddingBlockStart: 5,
+							} }
+						/>
+					</Box>
 				</Box>
-			</Box>
-		</ControlActions>
-	);
-} );
+			</ControlActions>
+		);
+
+		if ( ! promotion ) {
+			return editorField;
+		}
+
+		return (
+			<Stack gap={ 1 }>
+				<Stack direction="row" alignItems="center" justifyContent="space-between">
+					<ControlLabel>{ label }</ControlLabel>
+					<ImageOptimizeTrigger promotion={ promotion } />
+				</Stack>
+				{ editorField }
+			</Stack>
+		);
+	}
+);

package/src/controls/notice-control.tsx

@@ -37,7 +37,7 @@ type ExtendedWindow = Window & {
 	};
 };
 
-const markNoticeAsDismissedInSession = ( dismissId: string ) => {
+export const markNoticeAsDismissedInSession = ( dismissId: string ) => {
 	const dismissedNotices = ( window as ExtendedWindow ).elementor?.config?.user?.dismissed_editor_notices;
 
 	if ( dismissedNotices && ! dismissedNotices.includes( dismissId ) ) {
@@ -45,7 +45,7 @@ const markNoticeAsDismissedInSession = ( dismissId: string ) => {
 	}
 };
 
-const isNoticeDismissed = ( dismissId?: string ) => {
+export const isNoticeDismissed = ( dismissId?: string ) => {
 	if ( ! dismissId ) {
 		return false;
 	}