@elementor/editor-controls 4.4.0-1145 → 4.4.0-1146

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-1145",
+  "version": "4.4.0-1146",
   "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-1145",
-    "@elementor/editor-elements": "4.4.0-1145",
-    "@elementor/editor-props": "4.4.0-1145",
-    "@elementor/editor-responsive": "4.4.0-1145",
-    "@elementor/editor-ui": "4.4.0-1145",
-    "@elementor/editor-v1-adapters": "4.4.0-1145",
-    "@elementor/env": "4.4.0-1145",
-    "@elementor/events": "4.4.0-1145",
-    "@elementor/http-client": "4.4.0-1145",
+    "@elementor/editor-current-user": "4.4.0-1146",
+    "@elementor/editor-elements": "4.4.0-1146",
+    "@elementor/editor-props": "4.4.0-1146",
+    "@elementor/editor-responsive": "4.4.0-1146",
+    "@elementor/editor-ui": "4.4.0-1146",
+    "@elementor/editor-v1-adapters": "4.4.0-1146",
+    "@elementor/env": "4.4.0-1146",
+    "@elementor/events": "4.4.0-1146",
+    "@elementor/http-client": "4.4.0-1146",
     "@elementor/icons": "~1.78.1",
-    "@elementor/locations": "4.4.0-1145",
-    "@elementor/query": "4.4.0-1145",
-    "@elementor/schema": "4.4.0-1145",
-    "@elementor/session": "4.4.0-1145",
+    "@elementor/locations": "4.4.0-1146",
+    "@elementor/query": "4.4.0-1146",
+    "@elementor/schema": "4.4.0-1146",
+    "@elementor/session": "4.4.0-1146",
     "@elementor/ui": "1.41.4",
-    "@elementor/utils": "4.4.0-1145",
-    "@elementor/wp-media": "4.4.0-1145",
+    "@elementor/utils": "4.4.0-1146",
+    "@elementor/wp-media": "4.4.0-1146",
     "@monaco-editor/react": "^4.7.0",
     "@tanstack/react-virtual": "^3.13.3",
     "@tiptap/extension-bold": "^3.11.1",

package/src/controls/icon-library/font-awesome-7-catalog.ts

@@ -18,6 +18,8 @@ export type FontAwesome7Icon = FontAwesome7IconDefinition & {
 	value: string;
 	glyphClass?: string;
 	svgMarkup?: string;
+	/** Markup is resolved on demand by the icon library providers, once the icon is displayed. */
+	lazySvg?: boolean;
 };
 
 export async function loadFontAwesome7Catalog( signal?: AbortSignal ): Promise< FontAwesome7Icon[] > {

package/src/controls/icon-library/font-awesome-glyph.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Box } from '@elementor/ui';
 
 import { type FontAwesome7Icon } from './font-awesome-7-catalog';
+import { resolveProviderIconPreviewSvg } from './icon-library-providers';
 import { sanitizeIconSvgMarkup } from './sanitize-icon-svg-markup';
 
 type FontAwesomeGlyphProps = {
@@ -11,7 +13,71 @@ type FontAwesomeGlyphProps = {
 	label?: string;
 };
 
-export const FontAwesomeGlyph = ( { icon, size, color, label }: FontAwesomeGlyphProps ) => {
+export const FontAwesomeGlyph = ( props: FontAwesomeGlyphProps ) => {
+	const { icon } = props;
+
+	if ( icon.lazySvg && ! icon.svgMarkup ) {
+		return <LazyProviderGlyph { ...props } />;
+	}
+
+	return <ResolvedGlyph { ...props } />;
+};
+
+const LazyProviderGlyph = ( props: FontAwesomeGlyphProps ) => {
+	const { icon, size } = props;
+	const [ resolved, setResolved ] = useState< { id: string; markup: string | null } | null >( null );
+	const [ isVisible, setIsVisible ] = useState( typeof IntersectionObserver === 'undefined' );
+	const placeholderRef = useRef< HTMLSpanElement >( null );
+	const svgMarkup = resolved?.id === icon.id ? resolved.markup : null;
+
+	useEffect( () => {
+		const element = placeholderRef.current;
+
+		if ( isVisible || ! element ) {
+			return;
+		}
+
+		const observer = new IntersectionObserver( ( entries ) => {
+			if ( entries.some( ( entry ) => entry.isIntersecting ) ) {
+				setIsVisible( true );
+				observer.disconnect();
+			}
+		} );
+
+		observer.observe( element );
+
+		return () => observer.disconnect();
+	}, [ isVisible ] );
+
+	useEffect( () => {
+		if ( ! isVisible ) {
+			return;
+		}
+
+		const controller = new AbortController();
+
+		resolveProviderIconPreviewSvg( icon.library, icon.value, controller.signal )
+			.then( ( markup ) => ! controller.signal.aborted && setResolved( { id: icon.id, markup } ) )
+			.catch( () => {} );
+
+		return () => controller.abort();
+	}, [ isVisible, icon.id, icon.library, icon.value ] );
+
+	if ( ! svgMarkup ) {
+		return (
+			<Box
+				component="span"
+				ref={ placeholderRef }
+				aria-hidden="true"
+				sx={ { display: 'inline-block', width: size, height: size } }
+			/>
+		);
+	}
+
+	return <ResolvedGlyph { ...props } icon={ { ...icon, svgMarkup } } />;
+};
+
+const ResolvedGlyph = ( { icon, size, color, label }: FontAwesomeGlyphProps ) => {
 	const svgMarkup = sanitizeIconSvgMarkup( icon.svgMarkup );
 
 	if ( svgMarkup ) {

package/src/controls/icon-library/icon-library-grid.tsx

@@ -43,6 +43,7 @@ const getGridMetrics = ( containerWidth: number, columnGap: number, inlinePaddin
 type IconLibraryGridItem = FontAwesome7Icon & {
 	id: string;
 	value: string;
+	iconValue?: string;
 };
 
 type IconLibraryGridProps = {
@@ -329,7 +330,7 @@ export const IconLibraryGrid = ( {
 													} }
 												>
 													<FontAwesomeGlyph
-														icon={ item }
+														icon={ { ...item, value: item.iconValue ?? item.value } }
 														size={ ICON_GLYPH_SIZE }
 														color="currentColor"
 													/>

package/src/controls/icon-library/icon-library-popover.tsx

@@ -27,6 +27,7 @@ import { IconLibraryGrid } from './icon-library-grid';
 import { useIconLibraryProviderIcons } from './icon-library-providers';
 import { IconLibraryUploadAction, IconLibraryUploadActionSlot } from './icon-library-upload-action';
 import { type IconLibraryView, IconLibraryViewToggle } from './icon-library-view-toggle';
+import { mergeIconsById } from './merge-icons-by-id';
 import { SvgElementIcon } from './svg-element-icon';
 import { useFontAwesome7Catalog } from './use-font-awesome-7-catalog';
 
@@ -54,7 +55,7 @@ const CompactIconLibraryMenuList = styled( StyledMenuList )( ( { theme } ) => (
 	},
 } ) );
 
-type IconLibraryItem = VirtualizedItem< 'item', string > & Omit< FontAwesome7Icon, 'value' >;
+type IconLibraryItem = VirtualizedItem< 'item', string > & Omit< FontAwesome7Icon, 'value' > & { iconValue: string };
 
 type IconLibraryPopoverProps = {
 	open: boolean;
@@ -87,13 +88,16 @@ export const IconLibraryPopover = ( {
 	const view = isIconLibraryView( storedView ) ? storedView : DEFAULT_ICON_LIBRARY_VIEW;
 	const { data: fontAwesomeIcons = [], isLoading: isFontAwesomeLoading } = useFontAwesome7Catalog( open );
 	const { data: providerIcons = [], isLoading: isProviderLoading } = useIconLibraryProviderIcons( open );
-	const isLoading = isFontAwesomeLoading || isProviderLoading;
-	const icons = useMemo( () => [ ...fontAwesomeIcons, ...providerIcons ], [ providerIcons, fontAwesomeIcons ] );
+	const icons = useMemo(
+		() => mergeIconsById( fontAwesomeIcons, providerIcons ),
+		[ providerIcons, fontAwesomeIcons ]
+	);
 
 	const items = useMemo(
 		() => createIconLibraryItems( icons, searchValue, activeLibraries ),
 		[ activeLibraries, icons, searchValue ]
 	);
+	const isLoading = isFontAwesomeLoading || ( isProviderLoading && items.length === 0 );
 	const selectedValue = useMemo(
 		() => findFontAwesome7Icon( icons, selectedIconClass, selectedIconLibrary )?.id,
 		[ icons, selectedIconClass, selectedIconLibrary ]
@@ -239,7 +243,7 @@ const IconLibraryContent = ( {
 
 const IconLibraryLoadingState = () => (
 	<Stack alignItems="center" justifyContent="center" height="100%">
-		<CircularProgress role="progressbar" size={ 24 } />
+		<CircularProgress role="progressbar" size={ 24 } aria-label={ __( 'Loading icons', 'elementor' ) } />
 	</Stack>
 );
 
@@ -278,7 +282,11 @@ const IconLibraryRow = ( item: VirtualizedItem< string, string > ) => {
 					flexShrink: 0,
 				} }
 			>
-				<FontAwesomeGlyph icon={ icon } size={ ICON_GLYPH_SIZE } color="currentColor" />
+				<FontAwesomeGlyph
+					icon={ { ...icon, value: icon.iconValue } }
+					size={ ICON_GLYPH_SIZE }
+					color="currentColor"
+				/>
 			</Box>
 			<Typography variant="caption" color="text.primary" noWrap>
 				{ icon.label }
@@ -324,4 +332,5 @@ const createIconLibraryItems = (
 		...icon,
 		type: 'item',
 		value: icon.id,
+		iconValue: icon.value,
 	} ) );

package/src/controls/icon-library/icon-library-providers.ts

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { useQuery } from '@elementor/query';
 
 import { type FontAwesome7Icon } from './font-awesome-7-catalog';
@@ -12,6 +12,11 @@ export type IconLibraryProvider = {
 	id: string;
 	useIcons: ( enabled: boolean ) => IconLibraryProviderState;
 	resolveSvg?: ( library: string, iconValue: string, signal?: AbortSignal ) => Promise< string | null >;
+	/**
+	 * Resolves markup for picker tiles and the control preview. Falls back to `resolveSvg` when omitted.
+	 * Use it when `resolveSvg` has side effects that should only happen for icons that are actually rendered.
+	 */
+	resolvePreviewSvg?: ( library: string, iconValue: string, signal?: AbortSignal ) => Promise< string | null >;
 };
 
 const PROVIDER_ICON_SVG_QUERY_KEY = 'icon-library-provider-svg';
@@ -35,20 +40,44 @@ export function useIconLibraryProviderIcons( enabled: boolean ): Required< IconL
 	const [ snapshot ] = useState( () => [ ...providers.values() ] );
 	const states = snapshot.map( ( provider ) => provider.useIcons( enabled ) );
 
+	const data = useStableConcat( states.map( ( state ) => state.data ) );
+
 	return {
-		data: states.flatMap( ( state ) => state.data ?? [] ),
+		data,
 		isLoading: states.some( ( state ) => state.isLoading ),
 	};
 }
 
-export async function resolveProviderIconSvg(
+export function resolveProviderIconSvg(
+	library: string,
+	iconValue: string,
+	signal?: AbortSignal
+): Promise< string | null > {
+	return resolveFromProviders( ( provider ) => provider.resolveSvg, library, iconValue, signal );
+}
+
+export function resolveProviderIconPreviewSvg(
+	library: string,
+	iconValue: string,
+	signal?: AbortSignal
+): Promise< string | null > {
+	return resolveFromProviders(
+		( provider ) => provider.resolvePreviewSvg ?? provider.resolveSvg,
+		library,
+		iconValue,
+		signal
+	);
+}
+
+async function resolveFromProviders(
+	pickResolver: ( provider: IconLibraryProvider ) => IconLibraryProvider[ 'resolveSvg' ],
 	library: string,
 	iconValue: string,
 	signal?: AbortSignal
 ): Promise< string | null > {
 	for ( const provider of providers.values() ) {
 		try {
-			const markup = await provider.resolveSvg?.( library, iconValue, signal );
+			const markup = await pickResolver( provider )?.( library, iconValue, signal );
 
 			if ( markup ) {
 				return markup;
@@ -63,6 +92,21 @@ export async function resolveProviderIconSvg(
 	return null;
 }
 
+// Keeps the merged array identity while every provider returns the same data reference, so downstream memos hold.
+function useStableConcat( lists: Array< FontAwesome7Icon[] | undefined > ): FontAwesome7Icon[] {
+	const previous = useRef< { lists: typeof lists; merged: FontAwesome7Icon[] } | null >( null );
+
+	if ( ! previous.current || ! areSameLists( previous.current.lists, lists ) ) {
+		previous.current = { lists, merged: lists.flatMap( ( list ) => list ?? [] ) };
+	}
+
+	return previous.current.merged;
+}
+
+function areSameLists( a: Array< unknown >, b: Array< unknown > ) {
+	return a.length === b.length && a.every( ( item, index ) => item === b[ index ] );
+}
+
 export function useProviderIconSvg( library: string | null, iconValue: string | null, enabled: boolean ) {
 	return useQuery< string | null >( {
 		queryKey: [ PROVIDER_ICON_SVG_QUERY_KEY, library, iconValue ],

package/src/controls/icon-library/merge-icons-by-id.ts

@@ -0,0 +1,25 @@
+type MergeableIcon = { id: string; library?: string; name?: string; aliases?: string[] };
+
+const getNames = ( icon: MergeableIcon ) => [ icon.name, ...( icon.aliases ?? [] ) ].filter( Boolean );
+
+/**
+ * Providers may name an icon by one of its aliases (Pro lists `home` where Free lists `house`),
+ * so an icon already present under any of its names in the same library is not added again.
+ * @param primary
+ * @param secondary
+ */
+export function mergeIconsById< T extends MergeableIcon >( primary: T[], secondary: T[] ): T[] {
+	const ids = new Set( primary.map( ( icon ) => icon.id ) );
+	const names = new Set(
+		primary.flatMap( ( icon ) => getNames( icon ).map( ( name ) => `${ icon.library }:${ name }` ) )
+	);
+
+	return [
+		...primary,
+		...secondary.filter(
+			( icon ) =>
+				! ids.has( icon.id ) &&
+				! getNames( icon ).some( ( name ) => names.has( `${ icon.library }:${ name }` ) )
+		),
+	];
+}

package/src/controls/svg-media-preview.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
+import { useMemo } from 'react';
 import { Box, CardMedia, CircularProgress } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { findFontAwesome7Icon, type FontAwesome7Icon } from './icon-library/font-awesome-7-catalog';
 import { FontAwesomeGlyph } from './icon-library/font-awesome-glyph';
 import { useIconLibraryProviderIcons, useProviderIconSvg } from './icon-library/icon-library-providers';
+import { mergeIconsById } from './icon-library/merge-icons-by-id';
 import { useFontAwesome7Catalog } from './icon-library/use-font-awesome-7-catalog';
 
 const ICON_PREVIEW_SIZE = 50;
@@ -21,25 +23,35 @@ export const SvgMediaPreview = ( { isFetching, src, iconClassName, iconLibrary }
 	const shouldLoadIconCatalog = Boolean( iconClassName && iconLibrary );
 	const { data: fontAwesomeIcons = [], isLoading: isFontAwesomeLoading } =
 		useFontAwesome7Catalog( shouldLoadIconCatalog );
-	const { data: providerIcons = [], isLoading: isProviderLoading } =
-		useIconLibraryProviderIcons( shouldLoadIconCatalog );
-	const icons = [ ...fontAwesomeIcons, ...providerIcons ];
+	const isFontAwesomeLibrary = Boolean( iconLibrary?.startsWith( 'fa-' ) );
+	const { data: providerIcons = [], isLoading: isProviderLoading } = useIconLibraryProviderIcons(
+		shouldLoadIconCatalog && ! isFontAwesomeLibrary
+	);
+	const icons = useMemo(
+		() => mergeIconsById( fontAwesomeIcons, providerIcons ),
+		[ fontAwesomeIcons, providerIcons ]
+	);
 	const selectedIcon = findFontAwesome7Icon( icons, iconClassName, iconLibrary );
-	const isLoadingCatalog = shouldLoadIconCatalog && ( isFontAwesomeLoading || isProviderLoading );
+	const isLoadingCatalog =
+		shouldLoadIconCatalog && ( isFontAwesomeLoading || ( ! isFontAwesomeLibrary && isProviderLoading ) );
 	const { data: savedIconSvg, isLoading: isSavedIconLoading } = useProviderIconSvg(
 		iconLibrary,
 		iconClassName,
-		shouldLoadIconCatalog && ! isLoadingCatalog && ! selectedIcon
+		shouldLoadIconCatalog && ! isLoadingCatalog && ! selectedIcon && ! isFontAwesomeLibrary
 	);
 
 	if ( isFetching || isLoadingCatalog || isSavedIconLoading ) {
-		return <CircularProgress role="progressbar" />;
+		return <CircularProgress role="progressbar" aria-label={ __( 'Loading icon', 'elementor' ) } />;
 	}
 
 	if ( selectedIcon ) {
 		return <IconPreview icon={ selectedIcon } />;
 	}
 
+	if ( shouldLoadIconCatalog && iconClassName && iconLibrary && isFontAwesomeLibrary ) {
+		return <IconPreview icon={ createLazyIcon( iconLibrary, iconClassName ) } />;
+	}
+
 	if ( savedIconSvg ) {
 		return <IconPreview icon={ toSvgMarkupIcon( savedIconSvg, iconLibrary, iconClassName ) } />;
 	}
@@ -51,6 +63,19 @@ export const SvgMediaPreview = ( { isFetching, src, iconClassName, iconLibrary }
 	return <SvgPreview src={ src } />;
 };
 
+const createLazyIcon = ( library: string, value: string ): FontAwesome7Icon => ( {
+	id: `${ library }:${ value }`,
+	name: value,
+	label: value,
+	library,
+	value,
+	aliases: [],
+	width: ICON_PREVIEW_SIZE,
+	height: ICON_PREVIEW_SIZE,
+	paths: [],
+	lazySvg: true,
+} );
+
 const toSvgMarkupIcon = ( svgMarkup: string, library: string | null, value: string | null ): FontAwesome7Icon => ( {
 	id: `${ library }:${ value }`,
 	label: value ?? '',
@@ -65,7 +90,7 @@ const toSvgMarkupIcon = ( svgMarkup: string, library: string | null, value: stri
 } );
 
 const IconPreview = ( { icon }: { icon: FontAwesome7Icon } ) => (
-	<Box sx={ { color: ICON_PREVIEW_COLOR } }>
+	<Box sx={ { color: ICON_PREVIEW_COLOR, minWidth: ICON_PREVIEW_SIZE, minHeight: ICON_PREVIEW_SIZE } }>
 		<FontAwesomeGlyph
 			icon={ icon }
 			size={ ICON_PREVIEW_SIZE }

package/src/index.ts

@@ -39,6 +39,7 @@ export { PopoverContent } from './components/popover-content';
 export { enqueueFont } from './controls/font-family-control/enqueue-font';
 export {
 	registerIconLibraryProvider,
+	resolveProviderIconPreviewSvg,
 	resolveProviderIconSvg,
 	unregisterIconLibraryProvider,
 	type IconLibraryProvider,