@elementor/editor-controls 4.4.0-1110 → 4.4.0-1112

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { Box } from '@elementor/ui';
 
 import { type FontAwesome7Icon } from './font-awesome-7-catalog';
+import { sanitizeIconSvgMarkup } from './sanitize-icon-svg-markup';
 
 type FontAwesomeGlyphProps = {
 	icon: FontAwesome7Icon;
@@ -10,21 +12,64 @@ type FontAwesomeGlyphProps = {
 };
 
 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>
-	);
+	const svgMarkup = sanitizeIconSvgMarkup( icon.svgMarkup );
+
+	if ( svgMarkup ) {
+		return (
+			<Box
+				component="span"
+				aria-hidden={ label ? undefined : true }
+				aria-label={ label }
+				role={ label ? 'img' : undefined }
+				sx={ {
+					width: size,
+					height: size,
+					color,
+					display: 'inline-flex',
+					'& svg': {
+						width: '100%',
+						height: '100%',
+						fill: 'currentColor',
+					},
+					'& path': {
+						fill: 'currentColor',
+					},
+				} }
+				dangerouslySetInnerHTML={ { __html: svgMarkup } }
+			/>
+		);
+	}
+
+	if ( icon.paths.length > 0 ) {
+		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>
+		);
+	}
+
+	if ( icon.glyphClass ) {
+		return (
+			<i
+				className={ icon.glyphClass }
+				aria-hidden={ label ? undefined : true }
+				aria-label={ label }
+				style={ { fontSize: size, color, lineHeight: 1 } }
+			/>
+		);
+	}
+
+	return null;
 };

package/src/controls/icon-library/fontello-svg-font.ts

@@ -0,0 +1,227 @@
+type FontelloConfig = {
+	glyphs?: Array< { css?: unknown; code?: unknown; svg?: unknown } >;
+};
+
+type GlyphRecord = {
+	d: string;
+	units: number;
+	advance: number;
+};
+
+type GlyphIndex = {
+	byName: Map< string, GlyphRecord >;
+	byCode: Map< number, GlyphRecord >;
+};
+
+export function parseFontelloSvgFont(
+	configJson: string,
+	svgFont: string,
+	prefix: string,
+	displayPrefix: string,
+	iconNames: string[]
+): Record< string, string > {
+	const codepoints = parseConfigCodepoints( configJson, prefix );
+	const configPaths = parseConfigSvgPaths( configJson, prefix );
+	const glyphs = parseSvgFontGlyphs( svgFont );
+	const resolvedDisplayPrefix = displayPrefix || prefix.replace( /-$/, '' );
+	const result: Record< string, string > = {};
+
+	for ( const name of iconNames ) {
+		const fromConfig =
+			configPaths.get( name ) ??
+			( prefix && name.startsWith( prefix ) ? configPaths.get( name.slice( prefix.length ) ) : undefined );
+		const glyph = fromConfig ?? findGlyph( glyphs, codepoints, name, prefix );
+
+		if ( ! glyph ) {
+			continue;
+		}
+
+		const value = `${ resolvedDisplayPrefix } ${ prefix }${ name }`.trim();
+		result[ value ] = buildIconSvg( glyph );
+	}
+
+	return result;
+}
+
+export function fontelloSvgUrlFromConfig( fetchJson: string ): string | null {
+	try {
+		const url = new URL( fetchJson, window.location.origin );
+		url.pathname = url.pathname.replace( /\/[^/]+$/, '/font/fontello.svg' );
+
+		return url.href;
+	} catch {
+		return null;
+	}
+}
+
+function parseConfigCodepoints( configJson: string, prefix: string ): Map< string, number > {
+	const map = new Map< string, number >();
+
+	try {
+		const data = JSON.parse( configJson ) as FontelloConfig;
+
+		if ( ! Array.isArray( data.glyphs ) ) {
+			return map;
+		}
+
+		for ( const glyph of data.glyphs ) {
+			if ( typeof glyph.css !== 'string' || glyph.css === '' || typeof glyph.code !== 'number' ) {
+				continue;
+			}
+
+			map.set( glyph.css, glyph.code );
+
+			if ( prefix !== '' && ! glyph.css.startsWith( prefix ) ) {
+				map.set( `${ prefix }${ glyph.css }`, glyph.code );
+			}
+		}
+	} catch {
+		return map;
+	}
+
+	return map;
+}
+
+function parseConfigSvgPaths( configJson: string, prefix: string ): Map< string, GlyphRecord > {
+	const map = new Map< string, GlyphRecord >();
+
+	try {
+		const data = JSON.parse( configJson ) as FontelloConfig;
+
+		if ( ! Array.isArray( data.glyphs ) ) {
+			return map;
+		}
+
+		for ( const glyph of data.glyphs ) {
+			if ( typeof glyph.css !== 'string' || glyph.css === '' ) {
+				continue;
+			}
+
+			let path = '';
+			let advance = 1000;
+
+			if ( typeof glyph.svg === 'string' ) {
+				path = glyph.svg;
+			} else if (
+				glyph.svg &&
+				typeof glyph.svg === 'object' &&
+				'path' in glyph.svg &&
+				typeof glyph.svg.path === 'string'
+			) {
+				path = glyph.svg.path;
+				if ( 'width' in glyph.svg && typeof glyph.svg.width === 'number' && glyph.svg.width > 0 ) {
+					advance = glyph.svg.width;
+				}
+			}
+
+			if ( path === '' ) {
+				continue;
+			}
+
+			const record = { d: path, units: 1000, advance };
+			map.set( glyph.css, record );
+
+			if ( prefix !== '' && ! glyph.css.startsWith( prefix ) ) {
+				map.set( `${ prefix }${ glyph.css }`, record );
+			}
+		}
+	} catch {
+		return map;
+	}
+
+	return map;
+}
+
+function parseSvgFontGlyphs( svgFont: string ): GlyphIndex {
+	const byName = new Map< string, GlyphRecord >();
+	const byCode = new Map< number, GlyphRecord >();
+	const doc = new DOMParser().parseFromString( stripDoctype( svgFont ), 'image/svg+xml' );
+	const font = doc.querySelector( 'font' );
+	const face = doc.querySelector( 'font-face' );
+	const fontAdvance = positiveInt( font?.getAttribute( 'horiz-adv-x' ), 1000 );
+	const units = positiveInt( face?.getAttribute( 'units-per-em' ), fontAdvance );
+
+	doc.querySelectorAll( 'glyph' ).forEach( ( node ) => {
+		const d = node.getAttribute( 'd' ) ?? '';
+
+		if ( d === '' ) {
+			return;
+		}
+
+		const record: GlyphRecord = {
+			d,
+			units,
+			advance: positiveInt( node.getAttribute( 'horiz-adv-x' ), fontAdvance ),
+		};
+		const name = node.getAttribute( 'glyph-name' ) ?? '';
+		const unicode = node.getAttribute( 'unicode' ) ?? '';
+		const code = unicode.codePointAt( 0 );
+
+		if ( name ) {
+			byName.set( name, record );
+		}
+
+		if ( code !== undefined ) {
+			byCode.set( code, record );
+		}
+	} );
+
+	return { byName, byCode };
+}
+
+function findGlyph(
+	glyphs: GlyphIndex,
+	codepoints: Map< string, number >,
+	iconName: string,
+	prefix: string
+): GlyphRecord | null {
+	const names = [ iconName ];
+
+	if ( prefix !== '' && iconName.startsWith( prefix ) ) {
+		names.push( iconName.slice( prefix.length ) );
+	}
+
+	for ( const name of names ) {
+		const byName = glyphs.byName.get( name );
+
+		if ( byName ) {
+			return byName;
+		}
+
+		const code = codepoints.get( name );
+		const byCode = code !== undefined ? glyphs.byCode.get( code ) : undefined;
+
+		if ( byCode ) {
+			return byCode;
+		}
+	}
+
+	return null;
+}
+
+function buildIconSvg( glyph: GlyphRecord ): string {
+	return (
+		`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${ glyph.advance } ${ glyph.units }" fill="currentColor" width="100%" height="100%">` +
+		`<g transform="translate(0,${ glyph.units }) scale(1,-1)">` +
+		`<path d="${ escapeAttribute( glyph.d ) }" fill="currentColor"></path>` +
+		`</g></svg>`
+	);
+}
+
+function stripDoctype( svgFont: string ): string {
+	return svgFont.replace( /<!DOCTYPE[^>]*>/is, '' );
+}
+
+function positiveInt( value: string | null | undefined, fallback: number ): number {
+	if ( ! value ) {
+		return fallback;
+	}
+
+	const parsed = Number.parseInt( value, 10 );
+
+	return parsed > 0 ? parsed : fallback;
+}
+
+function escapeAttribute( value: string ): string {
+	return value.replace( /&/g, '&amp;' ).replace( /"/g, '&quot;' ).replace( /</g, '&lt;' ).replace( />/g, '&gt;' );
+}

package/src/controls/icon-library/icomoon-selection.ts

@@ -0,0 +1,104 @@
+const DEFAULT_ICOMOON_VIEWBOX = 1024;
+
+type IcomoonSelection = {
+	icons?: Array< {
+		icon?: { paths?: unknown; width?: unknown; tags?: unknown };
+		properties?: { name?: unknown };
+	} >;
+	preferences?: { fontPref?: { prefix?: unknown } };
+};
+
+export function parseIcomoonSelection(
+	selectionJson: string,
+	prefix: string,
+	displayPrefix: string,
+	iconNames: string[]
+): Record< string, string > {
+	let data: IcomoonSelection;
+
+	try {
+		data = JSON.parse( selectionJson ) as IcomoonSelection;
+	} catch {
+		return {};
+	}
+
+	const resolvedDisplayPrefix = displayPrefix || prefix.replace( /-$/, '' );
+	const names = iconNames.length > 0 ? iconNames : namesFromSelection( data );
+	const result: Record< string, string > = {};
+
+	for ( const name of names ) {
+		const markup = svgForName( data, name, prefix );
+
+		if ( ! markup ) {
+			continue;
+		}
+
+		result[ `${ resolvedDisplayPrefix } ${ prefix }${ name }`.trim() ] = markup;
+	}
+
+	return result;
+}
+
+export function namesFromSelection( data: IcomoonSelection ): string[] {
+	if ( ! Array.isArray( data.icons ) ) {
+		return [];
+	}
+
+	return data.icons.flatMap( ( icon ) => {
+		const name = iconEntryName( icon );
+
+		return name ? [ name ] : [];
+	} );
+}
+
+function svgForName( data: IcomoonSelection, iconName: string, prefix: string ): string | null {
+	const candidates = [ iconName ];
+
+	if ( prefix && iconName.startsWith( prefix ) ) {
+		candidates.push( iconName.slice( prefix.length ) );
+	}
+
+	for ( const icon of data.icons ?? [] ) {
+		const name = iconEntryName( icon );
+
+		if ( ! name || ! candidates.includes( name ) ) {
+			continue;
+		}
+
+		const paths = Array.isArray( icon.icon?.paths )
+			? icon.icon.paths.filter( ( path ): path is string => typeof path === 'string' && path !== '' )
+			: [];
+
+		if ( paths.length === 0 ) {
+			return null;
+		}
+
+		const size =
+			typeof icon.icon?.width === 'number' && icon.icon.width > 0 ? icon.icon.width : DEFAULT_ICOMOON_VIEWBOX;
+		const pathMarkup = paths
+			.map( ( d ) => `<path d="${ escapeAttribute( d ) }" fill="currentColor"></path>` )
+			.join( '' );
+
+		return (
+			`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${ size } ${ size }" fill="currentColor" width="100%" height="100%">` +
+			pathMarkup +
+			'</svg>'
+		);
+	}
+
+	return null;
+}
+
+function iconEntryName( icon: NonNullable< IcomoonSelection[ 'icons' ] >[ number ] ): string {
+	if ( typeof icon.properties?.name === 'string' ) {
+		return icon.properties.name;
+	}
+
+	const tag = icon.icon?.tags;
+
+	return Array.isArray( tag ) && typeof tag[ 0 ] === 'string' ? tag[ 0 ] : '';
+}
+
+function escapeAttribute( value: string ): string {
+	return value.replace( /&/g, '&amp;' ).replace( /"/g, '&quot;' ).replace( /</g, '&lt;' ).replace( />/g, '&gt;' );
+}

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

@@ -5,6 +5,8 @@ import {
 	bindMenu,
 	bindToggle,
 	Box,
+	Divider,
+	ListSubheader,
 	Menu,
 	MenuItem,
 	Stack,
@@ -15,43 +17,35 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import {
-	FONT_AWESOME_7_LIBRARIES,
-	type FontAwesome7Library,
-	type FontAwesome7LibraryFilter,
-} from './font-awesome-7-catalog';
+import { type FontAwesome7LibraryFilter } from './font-awesome-7-catalog';
 import { ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY } from './icon-library-tooltip';
 
 const FILTER_MENU_WIDTH = 280;
 const FILTER_INDICATOR_SIZE = 6;
 const FILTER_INDICATOR_OFFSET = 4;
-const LIBRARY_FILTER_ORDER = {
-	regular: 0,
-	solid: 1,
-	brands: 2,
-} as const;
-
-const LIBRARY_FILTER_CONFIG: Record<
-	FontAwesome7Library,
-	{ getLabel: () => string; Icon: typeof StarIcon; order: number }
-> = {
-	'fa-regular': {
-		getLabel: () => __( 'Font Awesome - Regular', 'elementor' ),
-		Icon: StarIcon,
-		order: LIBRARY_FILTER_ORDER.regular,
-	},
-	'fa-solid': {
-		getLabel: () => __( 'Font Awesome - Solid', 'elementor' ),
-		Icon: StarFilledIcon,
-		order: LIBRARY_FILTER_ORDER.solid,
-	},
-	'fa-brands': {
-		getLabel: () => __( 'Font Awesome - Brands', 'elementor' ),
-		Icon: LibraryIcon,
-		order: LIBRARY_FILTER_ORDER.brands,
-	},
+const FILTER_TYPE_ALL = 'all';
+const FILTER_TYPE_GROUP = 'group';
+const FILTER_TYPE_ITEM = 'item';
+
+const FILTER_ICONS: Record< string, typeof ListIcon > = {
+	list: ListIcon,
+	star: StarIcon,
+	'star-filled': StarFilledIcon,
+	library: LibraryIcon,
 };
 
+const DEFAULT_FILTER = [
+	{ type: FILTER_TYPE_ALL, label: 'All icons', icon: 'list' },
+	{ type: FILTER_TYPE_ITEM, value: 'fa-regular', label: 'Font Awesome - Regular', icon: 'star' },
+	{ type: FILTER_TYPE_ITEM, value: 'fa-solid', label: 'Font Awesome - Solid', icon: 'star-filled' },
+	{ type: FILTER_TYPE_ITEM, value: 'fa-brands', label: 'Font Awesome - Brands', icon: 'library' },
+] as const;
+
+type FilterEntry =
+	| { type: typeof FILTER_TYPE_ALL; label: string; icon?: string }
+	| { type: typeof FILTER_TYPE_GROUP; label: string }
+	| { type: typeof FILTER_TYPE_ITEM; value: string; label: string; icon?: string };
+
 type IconLibraryFilterProps = {
 	value: FontAwesome7LibraryFilter;
 	onChange: ( value: FontAwesome7LibraryFilter ) => void;
@@ -63,27 +57,19 @@ export const IconLibraryFilter = ( { value, onChange }: IconLibraryFilterProps )
 		variant: 'popover',
 		popupId,
 	} );
-	const options = FONT_AWESOME_7_LIBRARIES.map( ( { library } ) => ( {
-		value: library,
-		label: LIBRARY_FILTER_CONFIG[ library ].getLabel(),
-		Icon: LIBRARY_FILTER_CONFIG[ library ].Icon,
-		order: LIBRARY_FILTER_CONFIG[ library ].order,
-	} ) ).sort( ( firstOption, secondOption ) => firstOption.order - secondOption.order );
+	const entries = getFilterEntries();
+	const selectableValues = entries.flatMap( ( entry ) => ( entry.type === FILTER_TYPE_ITEM ? [ entry.value ] : [] ) );
 	const isFiltered = value.length > 0;
 	const filterButtonLabel = isFiltered
 		? __( 'Filter by library, active', 'elementor' )
 		: __( 'Filter by library', 'elementor' );
 
-	const handleAllIconsClick = () => {
-		onChange( [] );
-	};
-
-	const handleLibraryClick = ( library: FontAwesome7Library ) => {
+	const handleLibraryClick = ( library: string ) => {
 		const nextValue = value.includes( library )
 			? value.filter( ( selectedLibrary ) => selectedLibrary !== library )
 			: [ ...value, library ];
 
-		onChange( nextValue.length === FONT_AWESOME_7_LIBRARIES.length ? [] : nextValue );
+		onChange( nextValue.length === selectableValues.length ? [] : nextValue );
 	};
 
 	return (
@@ -131,30 +117,62 @@ export const IconLibraryFilter = ( { value, onChange }: IconLibraryFilterProps )
 				} }
 				sx={ { '& .MuiPaper-root': { minWidth: FILTER_MENU_WIDTH } } }
 			>
-				<MenuItem
-					role="menuitemcheckbox"
-					aria-checked={ ! isFiltered }
-					selected={ ! isFiltered }
-					onClick={ handleAllIconsClick }
-				>
-					{ renderFilterMenuItemContent( __( 'All icons', 'elementor' ), ListIcon, ! isFiltered ) }
-				</MenuItem>
-				{ options.map( ( { value: library, label, Icon } ) => (
-					<MenuItem
-						key={ library }
-						role="menuitemcheckbox"
-						aria-checked={ value.includes( library ) }
-						selected={ value.includes( library ) }
-						onClick={ () => handleLibraryClick( library ) }
-					>
-						{ renderFilterMenuItemContent( label, Icon, value.includes( library ) ) }
-					</MenuItem>
-				) ) }
+				{ entries.flatMap( ( entry, index ) =>
+					renderFilterEntry( entry, index, value, isFiltered, () => onChange( [] ), handleLibraryClick )
+				) }
 			</Menu>
 		</>
 	);
 };
 
+const renderFilterEntry = (
+	entry: FilterEntry,
+	index: number,
+	selectedLibraries: FontAwesome7LibraryFilter,
+	isFiltered: boolean,
+	onAllIconsClick: () => void,
+	onLibraryClick: ( library: string ) => void
+): React.ReactNode[] => {
+	if ( entry.type === FILTER_TYPE_GROUP ) {
+		return [
+			<Divider key={ `divider-${ index }` } />,
+			<ListSubheader key={ `group-${ index }` } disableSticky>
+				{ entry.label }
+			</ListSubheader>,
+		];
+	}
+
+	if ( entry.type === FILTER_TYPE_ALL ) {
+		return [
+			<MenuItem
+				key={ `all-${ index }` }
+				role="menuitemcheckbox"
+				aria-checked={ ! isFiltered }
+				selected={ ! isFiltered }
+				onClick={ onAllIconsClick }
+			>
+				{ renderFilterMenuItemContent( entry.label, getFilterIcon( entry.icon ), ! isFiltered ) }
+			</MenuItem>,
+		];
+	}
+
+	const isSelected = selectedLibraries.includes( entry.value );
+
+	return [
+		<MenuItem
+			key={ entry.value }
+			role="menuitemcheckbox"
+			aria-checked={ isSelected }
+			selected={ isSelected }
+			onClick={ () => onLibraryClick( entry.value ) }
+		>
+			{ renderFilterMenuItemContent( entry.label, getFilterIcon( entry.icon ), isSelected ) }
+		</MenuItem>,
+	];
+};
+
+const getFilterIcon = ( icon?: string ) => FILTER_ICONS[ icon ?? '' ] ?? LibraryIcon;
+
 const renderFilterMenuItemContent = ( label: string, Icon: typeof ListIcon, selected: boolean ) => (
 	<Stack direction="row" alignItems="center" gap={ 1 } width="100%">
 		<Icon fontSize="tiny" />
@@ -164,3 +182,50 @@ const renderFilterMenuItemContent = ( label: string, Icon: typeof ListIcon, sele
 		{ selected ? <CheckIcon fontSize="tiny" aria-hidden="true" /> : null }
 	</Stack>
 );
+
+function getFilterEntries(): FilterEntry[] {
+	const filter = window.elementorCommon?.config?.fontAwesome?.v7?.filter;
+
+	if ( ! Array.isArray( filter ) ) {
+		return [ ...DEFAULT_FILTER ];
+	}
+
+	const entries = filter.map( parseFilterEntry ).filter( ( entry ): entry is FilterEntry => entry !== null );
+
+	return entries.length > 0 ? entries : [ ...DEFAULT_FILTER ];
+}
+
+function parseFilterEntry( value: unknown ): FilterEntry | null {
+	if ( ! value || typeof value !== 'object' ) {
+		return null;
+	}
+
+	const entry = value as { type?: unknown; label?: unknown; value?: unknown; icon?: unknown };
+
+	if ( typeof entry.label !== 'string' || entry.label === '' ) {
+		return null;
+	}
+
+	if ( entry.type === FILTER_TYPE_GROUP ) {
+		return { type: FILTER_TYPE_GROUP, label: entry.label };
+	}
+
+	if ( entry.type === FILTER_TYPE_ALL ) {
+		return {
+			type: FILTER_TYPE_ALL,
+			label: entry.label,
+			icon: typeof entry.icon === 'string' ? entry.icon : undefined,
+		};
+	}
+
+	if ( entry.type === FILTER_TYPE_ITEM && typeof entry.value === 'string' && entry.value !== '' ) {
+		return {
+			type: FILTER_TYPE_ITEM,
+			value: entry.value,
+			label: entry.label,
+			icon: typeof entry.icon === 'string' ? entry.icon : undefined,
+		};
+	}
+
+	return null;
+}

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

@@ -322,13 +322,11 @@ export const IconLibraryGrid = ( {
 															},
 													} }
 												>
-													{ item.paths.length > 0 ? (
-														<FontAwesomeGlyph
-															icon={ item }
-															size={ ICON_GLYPH_SIZE }
-															color="currentColor"
-														/>
-													) : null }
+													<FontAwesomeGlyph
+														icon={ item }
+														size={ ICON_GLYPH_SIZE }
+														color="currentColor"
+													/>
 												</Box>
 											</Tooltip>
 										</Box>