@elementor/editor-controls 4.3.0-beta1 → 4.3.0-beta3

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.3.0-beta1",
+  "version": "4.3.0-beta3",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,24 +40,25 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.3.0-beta1",
-    "@elementor/editor-elements": "4.3.0-beta1",
-    "@elementor/editor-props": "4.3.0-beta1",
-    "@elementor/editor-responsive": "4.3.0-beta1",
-    "@elementor/editor-ui": "4.3.0-beta1",
-    "@elementor/editor-v1-adapters": "4.3.0-beta1",
-    "@elementor/env": "4.3.0-beta1",
-    "@elementor/events": "4.3.0-beta1",
-    "@elementor/http-client": "4.3.0-beta1",
+    "@elementor/editor-current-user": "4.3.0-beta3",
+    "@elementor/editor-elements": "4.3.0-beta3",
+    "@elementor/editor-props": "4.3.0-beta3",
+    "@elementor/editor-responsive": "4.3.0-beta3",
+    "@elementor/editor-ui": "4.3.0-beta3",
+    "@elementor/editor-v1-adapters": "4.3.0-beta3",
+    "@elementor/env": "4.3.0-beta3",
+    "@elementor/events": "4.3.0-beta3",
+    "@elementor/http-client": "4.3.0-beta3",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.3.0-beta1",
-    "@elementor/query": "4.3.0-beta1",
-    "@elementor/schema": "4.3.0-beta1",
-    "@elementor/session": "4.3.0-beta1",
+    "@elementor/locations": "4.3.0-beta3",
+    "@elementor/query": "4.3.0-beta3",
+    "@elementor/schema": "4.3.0-beta3",
+    "@elementor/session": "4.3.0-beta3",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.0-beta1",
-    "@elementor/wp-media": "4.3.0-beta1",
+    "@elementor/utils": "4.3.0-beta3",
+    "@elementor/wp-media": "4.3.0-beta3",
     "@monaco-editor/react": "^4.7.0",
+    "@tanstack/react-virtual": "^3.13.3",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",
     "@tiptap/extension-hard-break": "^3.11.1",

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

@@ -0,0 +1,113 @@
+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 FontAwesome7Library = ( typeof FONT_AWESOME_7_LIBRARIES )[ number ][ 'library' ];
+export type FontAwesome7LibraryFilter = FontAwesome7Library[];
+
+export type FontAwesome7Icon = FontAwesome7IconDefinition & {
+	id: string;
+	label: string;
+	library: FontAwesome7Library;
+	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,
+	libraries: FontAwesome7LibraryFilter = []
+): FontAwesome7Icon[] {
+	const query = searchValue?.trim().toLowerCase() ?? '';
+	const libraryIcons =
+		libraries.length === 0 ? icons : icons.filter( ( icon ) => libraries.includes( icon.library ) );
+
+	if ( query === '' ) {
+		return libraryIcons;
+	}
+
+	return libraryIcons.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: FontAwesome7Library ): 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-filter.tsx

@@ -0,0 +1,166 @@
+import * as React from 'react';
+import { useId } from 'react';
+import { CheckIcon, FilterIcon, LibraryIcon, ListIcon, StarFilledIcon, StarIcon } from '@elementor/icons';
+import {
+	bindMenu,
+	bindToggle,
+	Box,
+	Menu,
+	MenuItem,
+	Stack,
+	ToggleButton,
+	Tooltip,
+	Typography,
+	usePopupState,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import {
+	FONT_AWESOME_7_LIBRARIES,
+	type FontAwesome7Library,
+	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,
+	},
+};
+
+type IconLibraryFilterProps = {
+	value: FontAwesome7LibraryFilter;
+	onChange: ( value: FontAwesome7LibraryFilter ) => void;
+};
+
+export const IconLibraryFilter = ( { value, onChange }: IconLibraryFilterProps ) => {
+	const popupId = useId();
+	const popupState = usePopupState( {
+		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 isFiltered = value.length > 0;
+	const filterButtonLabel = isFiltered
+		? __( 'Filter by library, active', 'elementor' )
+		: __( 'Filter by library', 'elementor' );
+
+	const handleAllIconsClick = () => {
+		onChange( [] );
+	};
+
+	const handleLibraryClick = ( library: FontAwesome7Library ) => {
+		const nextValue = value.includes( library )
+			? value.filter( ( selectedLibrary ) => selectedLibrary !== library )
+			: [ ...value, library ];
+
+		onChange( nextValue.length === FONT_AWESOME_7_LIBRARIES.length ? [] : nextValue );
+	};
+
+	return (
+		<>
+			<Tooltip
+				title={ __( 'Filter by library', 'elementor' ) }
+				placement="top"
+				enterDelay={ ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY }
+				enterNextDelay={ ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY }
+				disableInteractive
+			>
+				<ToggleButton
+					aria-label={ filterButtonLabel }
+					value="filter"
+					size="tiny"
+					selected={ popupState.isOpen }
+					sx={ { position: 'relative', flexShrink: 0 } }
+					{ ...bindToggle( popupState ) }
+					aria-expanded={ popupState.isOpen }
+				>
+					<FilterIcon fontSize="tiny" />
+					{ isFiltered ? (
+						<Box
+							component="span"
+							aria-hidden="true"
+							sx={ {
+								position: 'absolute',
+								insetBlockStart: FILTER_INDICATOR_OFFSET,
+								insetInlineEnd: FILTER_INDICATOR_OFFSET,
+								width: FILTER_INDICATOR_SIZE,
+								height: FILTER_INDICATOR_SIZE,
+								borderRadius: '50%',
+								bgcolor: 'secondary.main',
+							} }
+						/>
+					) : null }
+				</ToggleButton>
+			</Tooltip>
+			<Menu
+				{ ...bindMenu( popupState ) }
+				MenuListProps={ {
+					dense: true,
+					autoFocusItem: true,
+					'aria-label': __( 'Filter by library', 'elementor' ),
+				} }
+				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>
+				) ) }
+			</Menu>
+		</>
+	);
+};
+
+const renderFilterMenuItemContent = ( label: string, Icon: typeof ListIcon, selected: boolean ) => (
+	<Stack direction="row" alignItems="center" gap={ 1 } width="100%">
+		<Icon fontSize="tiny" />
+		<Typography variant="caption" sx={ { flex: 1 } }>
+			{ label }
+		</Typography>
+		{ selected ? <CheckIcon fontSize="tiny" aria-hidden="true" /> : null }
+	</Stack>
+);