@elementor/editor-controls 4.4.0-1077 → 4.4.0-1079

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-1077",
+  "version": "4.4.0-1079",
   "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-1077",
-    "@elementor/editor-elements": "4.4.0-1077",
-    "@elementor/editor-props": "4.4.0-1077",
-    "@elementor/editor-responsive": "4.4.0-1077",
-    "@elementor/editor-ui": "4.4.0-1077",
-    "@elementor/editor-v1-adapters": "4.4.0-1077",
-    "@elementor/env": "4.4.0-1077",
-    "@elementor/events": "4.4.0-1077",
-    "@elementor/http-client": "4.4.0-1077",
+    "@elementor/editor-current-user": "4.4.0-1079",
+    "@elementor/editor-elements": "4.4.0-1079",
+    "@elementor/editor-props": "4.4.0-1079",
+    "@elementor/editor-responsive": "4.4.0-1079",
+    "@elementor/editor-ui": "4.4.0-1079",
+    "@elementor/editor-v1-adapters": "4.4.0-1079",
+    "@elementor/env": "4.4.0-1079",
+    "@elementor/events": "4.4.0-1079",
+    "@elementor/http-client": "4.4.0-1079",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.4.0-1077",
-    "@elementor/query": "4.4.0-1077",
-    "@elementor/schema": "4.4.0-1077",
-    "@elementor/session": "4.4.0-1077",
+    "@elementor/locations": "4.4.0-1079",
+    "@elementor/query": "4.4.0-1079",
+    "@elementor/schema": "4.4.0-1079",
+    "@elementor/session": "4.4.0-1079",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.4.0-1077",
-    "@elementor/wp-media": "4.4.0-1077",
+    "@elementor/utils": "4.4.0-1079",
+    "@elementor/wp-media": "4.4.0-1079",
     "@monaco-editor/react": "^4.7.0",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",

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

@@ -0,0 +1,104 @@
+import {
+	FONT_AWESOME_7_LIBRARIES,
+	type FontAwesome7IconDefinition,
+	getFontAwesome7EditorConfig,
+	getFontAwesome7IconName,
+	loadFontAwesome7Library,
+} from './font-awesome-7-data';
+
+export { FONT_AWESOME_7_LIBRARIES, getFontAwesome7EditorConfig } from './font-awesome-7-data';
+
+export type FontAwesome7Icon = FontAwesome7IconDefinition & {
+	id: string;
+	label: string;
+	library: string;
+	value: string;
+};
+
+export async function loadFontAwesome7Catalog( signal?: AbortSignal ): Promise< FontAwesome7Icon[] > {
+	const config = getFontAwesome7EditorConfig();
+
+	if ( ! config ) {
+		return [];
+	}
+
+	const catalogs = await Promise.all(
+		FONT_AWESOME_7_LIBRARIES.map( async ( { file, library } ) => {
+			if ( ! config.jsonFiles.includes( file ) ) {
+				return [];
+			}
+
+			const icons = await loadFontAwesome7Library( file, signal );
+
+			return icons.map( ( icon ) => toCatalogIcon( icon, library ) );
+		} )
+	);
+
+	return catalogs.flat();
+}
+
+export function filterFontAwesome7Icons( icons: FontAwesome7Icon[], searchValue?: string | null ): FontAwesome7Icon[] {
+	const query = searchValue?.trim().toLowerCase() ?? '';
+
+	if ( query === '' ) {
+		return icons;
+	}
+
+	return icons.filter( ( icon ) => {
+		if ( icon.name.includes( query ) || icon.label.toLowerCase().includes( query ) ) {
+			return true;
+		}
+
+		return icon.aliases.some( ( alias ) => alias.toLowerCase().includes( query ) );
+	} );
+}
+
+export function createIconSelectionValue( library: string, name: string ): string {
+	return `${ library } fa-${ name }`;
+}
+
+export function getSelectedIconId( iconClass: string | null, library: string | null ): string | undefined {
+	if ( ! iconClass || ! library ) {
+		return undefined;
+	}
+
+	const name = getFontAwesome7IconName( iconClass );
+
+	if ( ! name ) {
+		return undefined;
+	}
+
+	return `${ library }:${ name }`;
+}
+
+export function findFontAwesome7Icon(
+	icons: FontAwesome7Icon[],
+	iconClass: string | null,
+	library: string | null
+): FontAwesome7Icon | undefined {
+	const selectedId = getSelectedIconId( iconClass, library );
+
+	if ( ! selectedId || ! library ) {
+		return undefined;
+	}
+
+	const selectedName = selectedId.slice( `${ library }:`.length );
+
+	return icons.find( ( icon ) => {
+		if ( icon.library !== library ) {
+			return false;
+		}
+
+		return icon.id === selectedId || icon.name === selectedName || icon.aliases.includes( selectedName );
+	} );
+}
+
+function toCatalogIcon( icon: FontAwesome7IconDefinition, library: string ): FontAwesome7Icon {
+	return {
+		...icon,
+		id: `${ library }:${ icon.name }`,
+		label: icon.name.replace( /-/g, ' ' ),
+		library,
+		value: createIconSelectionValue( library, icon.name ),
+	};
+}

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

@@ -0,0 +1,260 @@
+export const FONT_AWESOME_7_LIBRARIES = [
+	{ file: 'solid', library: 'fa-solid' },
+	{ file: 'regular', library: 'fa-regular' },
+	{ file: 'brands', library: 'fa-brands' },
+] as const;
+
+const FONT_AWESOME_JSON = {
+	width: 0,
+	height: 1,
+	aliases: 2,
+	unicode: 3,
+	path: 4,
+} as const;
+
+type FontAwesomeIconJson = [ number, number, unknown[], unknown, string | string[] ];
+
+export type FontAwesome7EditorConfig = {
+	jsonFiles: string[];
+	jsonBaseUrl: string;
+};
+
+export type FontAwesome7IconDefinition = {
+	name: string;
+	aliases: string[];
+	width: number;
+	height: number;
+	paths: string[];
+};
+
+type CachedLibrary = {
+	icons: FontAwesome7IconDefinition[];
+	lookup: Record< string, FontAwesome7IconDefinition >;
+};
+
+const libraryCache = new Map< string, CachedLibrary >();
+
+export function getFontAwesome7EditorConfig(): FontAwesome7EditorConfig | null {
+	const config = window.elementorCommon?.config?.fontAwesome?.v7;
+
+	if ( ! config || ! Array.isArray( config.jsonFiles ) ) {
+		return null;
+	}
+
+	const jsonBaseUrl = getAllowedJsonBaseUrl( config.jsonBaseUrl );
+
+	if ( ! jsonBaseUrl ) {
+		return null;
+	}
+
+	return {
+		jsonFiles: config.jsonFiles,
+		jsonBaseUrl,
+	};
+}
+
+const FONT_AWESOME_ICON_NAME_PATTERN = /^fa\S*\s+fa-([^\s]+)/;
+
+export function getFontAwesome7IconName( iconValue: string ): string | null {
+	return iconValue.match( FONT_AWESOME_ICON_NAME_PATTERN )?.[ 1 ] ?? null;
+}
+
+export function resetFontAwesome7IconsCache() {
+	libraryCache.clear();
+}
+
+export async function loadFontAwesome7Library(
+	file: string,
+	signal?: AbortSignal
+): Promise< FontAwesome7IconDefinition[] > {
+	const cached = await getCachedLibrary( file, signal );
+
+	return cached?.icons ?? [];
+}
+
+export async function resolveFontAwesome7Icon(
+	library: string,
+	iconName: string,
+	signal?: AbortSignal
+): Promise< FontAwesome7IconDefinition | null > {
+	const file = getLibraryFileName( library );
+
+	if ( ! file ) {
+		return null;
+	}
+
+	const cached = await getCachedLibrary( file, signal );
+
+	return cached?.lookup[ iconName ] ?? null;
+}
+
+async function getCachedLibrary( file: string, signal?: AbortSignal ): Promise< CachedLibrary | null > {
+	const cached = libraryCache.get( file );
+
+	if ( cached ) {
+		return cached;
+	}
+
+	const loaded = await fetchLibrary( file, signal );
+
+	if ( loaded ) {
+		libraryCache.set( file, loaded );
+	}
+
+	return loaded;
+}
+
+function getLibraryFileName( library: string ): string | null {
+	const config = getFontAwesome7EditorConfig();
+	const match = FONT_AWESOME_7_LIBRARIES.find( ( item ) => item.library === library );
+
+	if ( ! config || ! match || ! config.jsonFiles.includes( match.file ) ) {
+		return null;
+	}
+
+	return match.file;
+}
+
+async function fetchLibrary( file: string, signal?: AbortSignal ): Promise< CachedLibrary | null > {
+	const config = getFontAwesome7EditorConfig();
+
+	if ( ! config?.jsonFiles.includes( file ) ) {
+		return null;
+	}
+
+	const catalogUrl = getCatalogFileUrl( config.jsonBaseUrl, file );
+
+	if ( ! catalogUrl ) {
+		return null;
+	}
+
+	try {
+		const response = await fetch( catalogUrl, { signal } );
+
+		if ( ! response.ok ) {
+			return null;
+		}
+
+		const data = ( await response.json() ) as { icons?: Record< string, FontAwesomeIconJson > };
+		const icons = data.icons;
+
+		if ( ! icons || typeof icons !== 'object' ) {
+			return null;
+		}
+
+		return indexLibrary( icons );
+	} catch {
+		return null;
+	}
+}
+
+function indexLibrary( icons: Record< string, FontAwesomeIconJson > ): CachedLibrary {
+	const definitions: FontAwesome7IconDefinition[] = [];
+	const lookup: Record< string, FontAwesome7IconDefinition > = Object.create( null );
+
+	for ( const [ name, iconData ] of Object.entries( icons ) ) {
+		const definition = toIconDefinition( name, iconData );
+
+		if ( ! definition ) {
+			continue;
+		}
+
+		definitions.push( definition );
+		lookup[ name ] = definition;
+
+		for ( const alias of definition.aliases ) {
+			if ( ! lookup[ alias ] ) {
+				lookup[ alias ] = definition;
+			}
+		}
+	}
+
+	return { icons: definitions, lookup };
+}
+
+function toIconDefinition( name: string, iconData: unknown ): FontAwesome7IconDefinition | null {
+	if ( ! isValidIconTuple( iconData ) ) {
+		return null;
+	}
+
+	const paths = normalizePaths( iconData[ FONT_AWESOME_JSON.path ] );
+
+	if ( paths.length === 0 ) {
+		return null;
+	}
+
+	const aliases = iconData[ FONT_AWESOME_JSON.aliases ].filter(
+		( alias ): alias is string => typeof alias === 'string' && alias !== ''
+	);
+
+	return {
+		name,
+		aliases,
+		width: iconData[ FONT_AWESOME_JSON.width ],
+		height: iconData[ FONT_AWESOME_JSON.height ],
+		paths,
+	};
+}
+
+function isValidIconTuple( iconData: unknown ): iconData is FontAwesomeIconJson {
+	return (
+		Array.isArray( iconData ) &&
+		iconData.length > FONT_AWESOME_JSON.path &&
+		typeof iconData[ FONT_AWESOME_JSON.width ] === 'number' &&
+		typeof iconData[ FONT_AWESOME_JSON.height ] === 'number' &&
+		Array.isArray( iconData[ FONT_AWESOME_JSON.aliases ] )
+	);
+}
+
+function normalizePaths( pathData: string | string[] ): string[] {
+	if ( typeof pathData === 'string' && isSafeSvgPath( pathData ) ) {
+		return [ pathData ];
+	}
+
+	if ( ! Array.isArray( pathData ) ) {
+		return [];
+	}
+
+	return pathData.filter( ( path ): path is string => typeof path === 'string' && isSafeSvgPath( path ) );
+}
+
+function isSafeSvgPath( path: string ): boolean {
+	return path !== '' && ! /[<>"'`]/.test( path );
+}
+
+function getAllowedJsonBaseUrl( jsonBaseUrl: unknown ): string | null {
+	if ( typeof jsonBaseUrl !== 'string' || jsonBaseUrl === '' ) {
+		return null;
+	}
+
+	try {
+		const url = new URL( jsonBaseUrl );
+
+		if ( url.protocol !== 'http:' && url.protocol !== 'https:' ) {
+			return null;
+		}
+
+		return url.href;
+	} catch {
+		return null;
+	}
+}
+
+function getCatalogFileUrl( jsonBaseUrl: string, file: string ): string | null {
+	try {
+		const baseUrl = new URL( jsonBaseUrl );
+		const fileUrl = new URL( `${ file }.json`, jsonBaseUrl );
+
+		if ( fileUrl.origin !== baseUrl.origin || ! fileUrl.pathname.startsWith( baseUrl.pathname ) ) {
+			return null;
+		}
+
+		if ( fileUrl.protocol !== 'http:' && fileUrl.protocol !== 'https:' ) {
+			return null;
+		}
+
+		return fileUrl.href;
+	} catch {
+		return null;
+	}
+}

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+import { type FontAwesome7Icon } from './font-awesome-7-catalog';
+
+type FontAwesomeGlyphProps = {
+	icon: FontAwesome7Icon;
+	size: number;
+	color: string;
+	label?: string;
+};
+
+export const FontAwesomeGlyph = ( { icon, size, color, label }: FontAwesomeGlyphProps ) => {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox={ `0 0 ${ icon.width } ${ icon.height }` }
+			width={ size }
+			height={ size }
+			fill={ color }
+			overflow="visible"
+			aria-hidden={ label ? undefined : true }
+			aria-label={ label }
+			role={ label ? 'img' : undefined }
+		>
+			{ icon.paths.map( ( path, index ) => (
+				<path key={ `${ index }-${ path }` } d={ path } />
+			) ) }
+		</svg>
+	);
+};

package/src/controls/icon-library/get-icon-library-anchor.ts

@@ -0,0 +1,29 @@
+export type IconLibraryAnchor = {
+	top: number;
+	left: number;
+	width: number;
+};
+
+type AnchorRect = Pick< DOMRect, 'top' | 'left' | 'width' >;
+
+export function getIconLibraryAnchor(
+	containerRect: AnchorRect | null | undefined,
+	buttonGroupRect: Pick< DOMRect, 'top' > | null | undefined
+): IconLibraryAnchor | null {
+	if ( ! containerRect || containerRect.width <= 0 ) {
+		return null;
+	}
+
+	return {
+		top: buttonGroupRect?.top ?? containerRect.top,
+		left: containerRect.left,
+		width: containerRect.width,
+	};
+}
+
+export function measureIconLibraryAnchor(
+	container: HTMLElement | null,
+	buttonGroup: HTMLElement | null
+): IconLibraryAnchor | null {
+	return getIconLibraryAnchor( container?.getBoundingClientRect(), buttonGroup?.getBoundingClientRect() );
+}

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

@@ -0,0 +1,235 @@
+import * as React from 'react';
+import { useMemo } from 'react';
+import {
+	PopoverBody,
+	PopoverHeader,
+	PopoverMenuList,
+	SearchField,
+	StyledMenuList,
+	type VirtualizedItem,
+} from '@elementor/editor-ui';
+import { ComponentsIcon } from '@elementor/icons';
+import { Box, CircularProgress, Divider, Link, Stack, styled, Typography } from '@elementor/ui';
+import { useDebounceState } from '@elementor/utils';
+import { __ } from '@wordpress/i18n';
+
+import {
+	createIconSelectionValue,
+	filterFontAwesome7Icons,
+	findFontAwesome7Icon,
+	type FontAwesome7Icon,
+} from './font-awesome-7-catalog';
+import { FontAwesomeGlyph } from './font-awesome-glyph';
+import { useFontAwesome7Catalog } from './use-font-awesome-7-catalog';
+
+export const ICON_LIBRARY_POPOVER_WIDTH = 300;
+export const ICON_LIBRARY_ROW_HEIGHT = 48;
+export const ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY = 300;
+const ICON_TILE_SIZE = 40;
+const ICON_GLYPH_SIZE = 20;
+const ICON_LIBRARY_INLINE_SPACING = 1;
+
+const CompactIconLibraryMenuList = styled( StyledMenuList )( ( { theme } ) => ( {
+	'& > [role="option"]': {
+		padding: theme.spacing( 0.75, ICON_LIBRARY_INLINE_SPACING ),
+	},
+} ) );
+
+type IconLibraryItem = VirtualizedItem< 'item', string > & Omit< FontAwesome7Icon, 'value' >;
+
+type IconLibraryPopoverProps = {
+	open: boolean;
+	selectedIconClass: string | null;
+	selectedIconLibrary: string | null;
+	onSelect: ( icon: { value: string; library: string } ) => void;
+	onClose: () => void;
+	width?: number;
+};
+
+export const IconLibraryPopover = ( {
+	open,
+	selectedIconClass,
+	selectedIconLibrary,
+	onSelect,
+	onClose,
+	width = ICON_LIBRARY_POPOVER_WIDTH,
+}: IconLibraryPopoverProps ) => {
+	const {
+		debouncedValue: searchValue,
+		inputValue: searchInputValue,
+		handleChange: handleSearchChange,
+		setImmediateValue: setSearchValue,
+	} = useDebounceState( { delay: ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY } );
+	const { data: icons = [], isLoading } = useFontAwesome7Catalog( open );
+
+	const items = useMemo( () => createIconLibraryItems( icons, searchValue ), [ icons, searchValue ] );
+	const selectedValue = useMemo(
+		() => findFontAwesome7Icon( icons, selectedIconClass, selectedIconLibrary )?.id,
+		[ icons, selectedIconClass, selectedIconLibrary ]
+	);
+
+	const handleClose = () => {
+		setSearchValue( '' );
+		onClose();
+	};
+
+	const handleSelect = ( id: string ) => {
+		const icon = items.find( ( item ) => item.id === id );
+
+		if ( ! icon ) {
+			return;
+		}
+
+		onSelect( {
+			value: createIconSelectionValue( icon.library, icon.name ),
+			library: icon.library,
+		} );
+	};
+
+	const handleClearSearch = () => {
+		setSearchValue( '' );
+	};
+
+	return (
+		<PopoverBody width={ width } fillWidth id="icon-library">
+			<PopoverHeader
+				title={ __( 'Icon library', 'elementor' ) }
+				onClose={ handleClose }
+				icon={ <ComponentsIcon fontSize="tiny" /> }
+				sx={ { pl: ICON_LIBRARY_INLINE_SPACING, pr: 0.5 } }
+			/>
+			<SearchField
+				value={ searchInputValue }
+				onSearch={ handleSearchChange }
+				placeholder={ __( 'Search', 'elementor' ) }
+				id="icon-library-search"
+				sx={ { px: ICON_LIBRARY_INLINE_SPACING, pb: 1 } }
+			/>
+			<Divider />
+			<Box sx={ { flex: 1, overflow: 'auto', minHeight: 0 } }>
+				<IconLibraryContent
+					isLoading={ isLoading }
+					items={ items }
+					selectedValue={ selectedValue }
+					searchValue={ searchValue }
+					onSelect={ handleSelect }
+					onClose={ handleClose }
+					onClearSearch={ handleClearSearch }
+				/>
+			</Box>
+		</PopoverBody>
+	);
+};
+
+type IconLibraryContentProps = {
+	isLoading: boolean;
+	items: IconLibraryItem[];
+	selectedValue: string | undefined;
+	searchValue: string;
+	onSelect: ( id: string ) => void;
+	onClose: () => void;
+	onClearSearch: () => void;
+};
+
+const IconLibraryContent = ( {
+	isLoading,
+	items,
+	selectedValue,
+	searchValue,
+	onSelect,
+	onClose,
+	onClearSearch,
+}: IconLibraryContentProps ) => {
+	if ( isLoading ) {
+		return <IconLibraryLoadingState />;
+	}
+
+	return (
+		<PopoverMenuList
+			items={ items }
+			selectedValue={ selectedValue }
+			menuListTemplate={ CompactIconLibraryMenuList }
+			onSelect={ onSelect }
+			onClose={ onClose }
+			itemHeight={ ICON_LIBRARY_ROW_HEIGHT }
+			menuItemContentTemplate={ IconLibraryRow }
+			noResultsComponent={ <IconLibraryEmptyState searchValue={ searchValue } onClear={ onClearSearch } /> }
+			data-testid="icon-library-list"
+		/>
+	);
+};
+
+const IconLibraryLoadingState = () => (
+	<Stack alignItems="center" justifyContent="center" height="100%">
+		<CircularProgress role="progressbar" size={ 24 } />
+	</Stack>
+);
+
+const IconLibraryEmptyState = ( { searchValue, onClear }: { searchValue: string; onClear: () => void } ) => {
+	if ( searchValue.trim() === '' ) {
+		return <CatalogUnavailable />;
+	}
+
+	return <NoResults searchValue={ searchValue } onClear={ onClear } />;
+};
+
+const IconLibraryRow = ( item: VirtualizedItem< string, string > ) => {
+	const icon = item as IconLibraryItem;
+
+	return (
+		<Stack direction="row" alignItems="center" gap={ 1 } sx={ { width: '100%' } }>
+			<Box
+				sx={ {
+					width: ICON_TILE_SIZE,
+					height: ICON_TILE_SIZE,
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'center',
+					border: 1,
+					borderColor: 'divider',
+					borderRadius: 1,
+					color: 'text.tertiary',
+					flexShrink: 0,
+				} }
+			>
+				{ icon.paths.length > 0 ? (
+					<FontAwesomeGlyph icon={ icon } size={ ICON_GLYPH_SIZE } color="currentColor" />
+				) : null }
+			</Box>
+			<Typography variant="caption" color="text.primary" noWrap>
+				{ icon.label }
+			</Typography>
+		</Stack>
+	);
+};
+
+const CatalogUnavailable = () => (
+	<Stack alignItems="center" justifyContent="center" height="100%" p={ 2.5 } gap={ 1.5 }>
+		<ComponentsIcon fontSize="large" />
+		<Typography align="center" variant="subtitle2" color="text.secondary">
+			{ __( "Icons couldn't be loaded.", 'elementor' ) }
+		</Typography>
+	</Stack>
+);
+
+const NoResults = ( { searchValue, onClear }: { searchValue: string; onClear: () => void } ) => (
+	<Stack alignItems="center" justifyContent="center" height="100%" p={ 2.5 } gap={ 1.5 }>
+		<ComponentsIcon fontSize="large" />
+		<Typography align="center" variant="subtitle2" color="text.secondary">
+			{ __( 'Sorry, nothing matched', 'elementor' ) }
+		</Typography>
+		<Typography align="center" variant="subtitle2" color="text.secondary" noWrap sx={ { maxWidth: '80%' } }>
+			&ldquo;{ searchValue }&rdquo;.
+		</Typography>
+		<Link color="secondary" variant="caption" component="button" type="button" onClick={ onClear }>
+			{ __( 'Clear & try again', 'elementor' ) }
+		</Link>
+	</Stack>
+);
+
+const createIconLibraryItems = ( icons: FontAwesome7Icon[], searchValue: string ): IconLibraryItem[] =>
+	filterFontAwesome7Icons( icons, searchValue ).map( ( icon ) => ( {
+		...icon,
+		type: 'item',
+		value: icon.id,
+	} ) );