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

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

@@ -14,6 +14,7 @@ import { Box, CircularProgress, Divider, Link, Stack, styled, Typography } from
 import { useDebounceState } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
+import { useCustomIconLibraries } from './custom-icon-libraries';
 import {
 	createIconSelectionValue,
 	filterFontAwesome7Icons,
@@ -78,7 +79,10 @@ export const IconLibraryPopover = ( {
 		ICON_LIBRARY_VIEW_STORAGE_PREFIX
 	);
 	const view = isIconLibraryView( storedView ) ? storedView : DEFAULT_ICON_LIBRARY_VIEW;
-	const { data: icons = [], isLoading } = useFontAwesome7Catalog( open );
+	const { data: fontAwesomeIcons = [], isLoading: isFontAwesomeLoading } = useFontAwesome7Catalog( open );
+	const { data: customIcons = [], isLoading: isCustomLoading } = useCustomIconLibraries( open );
+	const isLoading = isFontAwesomeLoading || isCustomLoading;
+	const icons = useMemo( () => [ ...fontAwesomeIcons, ...customIcons ], [ customIcons, fontAwesomeIcons ] );
 
 	const items = useMemo(
 		() => createIconLibraryItems( icons, searchValue, activeLibraries ),
@@ -103,7 +107,7 @@ export const IconLibraryPopover = ( {
 		}
 
 		onSelect( {
-			value: createIconSelectionValue( icon.library, icon.name ),
+			value: icon.glyphClass ?? createIconSelectionValue( icon.library, icon.name ),
 			library: icon.library,
 		} );
 	};
@@ -254,9 +258,7 @@ const IconLibraryRow = ( item: VirtualizedItem< string, string > ) => {
 					flexShrink: 0,
 				} }
 			>
-				{ icon.paths.length > 0 ? (
-					<FontAwesomeGlyph icon={ icon } size={ ICON_GLYPH_SIZE } color="currentColor" />
-				) : null }
+				<FontAwesomeGlyph icon={ icon } size={ ICON_GLYPH_SIZE } color="currentColor" />
 			</Box>
 			<Typography variant="caption" color="text.primary" noWrap>
 				{ icon.label }

package/src/controls/icon-library/sanitize-icon-svg-markup.ts

@@ -0,0 +1,53 @@
+const ALLOWED_SVG_TAGS = new Set( [ 'svg', 'g', 'path', 'title', 'desc' ] );
+const ALLOWED_SVG_ATTRS = new Set( [
+	'd',
+	'fill',
+	'viewbox',
+	'xmlns',
+	'width',
+	'height',
+	'transform',
+	'overflow',
+	'aria-hidden',
+	'aria-label',
+	'role',
+] );
+
+export function sanitizeIconSvgMarkup( markup: unknown ): string {
+	if ( typeof markup !== 'string' || markup === '' ) {
+		return '';
+	}
+
+	const doc = new DOMParser().parseFromString( markup, 'image/svg+xml' );
+
+	if ( doc.querySelector( 'parsererror' ) ) {
+		return '';
+	}
+
+	const svg = doc.querySelector( 'svg' );
+
+	if ( ! svg ) {
+		return '';
+	}
+
+	pruneNode( svg );
+
+	return svg.tagName.toLowerCase() === 'svg' ? svg.outerHTML : '';
+}
+
+function pruneNode( node: Element ): void {
+	[ ...node.children ].forEach( ( child ) => {
+		if ( ! ALLOWED_SVG_TAGS.has( child.tagName.toLowerCase() ) ) {
+			child.remove();
+			return;
+		}
+
+		pruneNode( child );
+	} );
+
+	[ ...node.attributes ].forEach( ( attribute ) => {
+		if ( ! ALLOWED_SVG_ATTRS.has( attribute.name.toLowerCase() ) ) {
+			node.removeAttribute( attribute.name );
+		}
+	} );
+}

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Box, CardMedia, CircularProgress } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { useCustomIconLibraries } from './icon-library/custom-icon-libraries';
 import { findFontAwesome7Icon, type FontAwesome7Icon } from './icon-library/font-awesome-7-catalog';
 import { FontAwesomeGlyph } from './icon-library/font-awesome-glyph';
 import { useFontAwesome7Catalog } from './icon-library/use-font-awesome-7-catalog';
@@ -18,10 +19,14 @@ type SvgMediaPreviewProps = {
 
 export const SvgMediaPreview = ( { isFetching, src, iconClassName, iconLibrary }: SvgMediaPreviewProps ) => {
 	const shouldLoadIconCatalog = Boolean( iconClassName && iconLibrary );
-	const { data: icons = [], isLoading } = useFontAwesome7Catalog( shouldLoadIconCatalog );
+	const { data: fontAwesomeIcons = [], isLoading: isFontAwesomeLoading } =
+		useFontAwesome7Catalog( shouldLoadIconCatalog );
+	const { data: customIcons = [], isLoading: isCustomLoading } = useCustomIconLibraries( shouldLoadIconCatalog );
+	const icons = [ ...fontAwesomeIcons, ...customIcons ];
 	const selectedIcon = findFontAwesome7Icon( icons, iconClassName, iconLibrary );
+	const isLoadingCatalog = shouldLoadIconCatalog && ( isFontAwesomeLoading || isCustomLoading );
 
-	if ( isFetching || ( shouldLoadIconCatalog && isLoading ) ) {
+	if ( isFetching || isLoadingCatalog ) {
 		return <CircularProgress role="progressbar" />;
 	}
 

package/src/index.ts

@@ -37,6 +37,7 @@ export { TransformSettingsControl } from './controls/transform-control/transform
 export { TransitionRepeaterControl } from './controls/transition-control/transition-repeater-control';
 export { PopoverContent } from './components/popover-content';
 export { enqueueFont } from './controls/font-family-control/enqueue-font';
+export { isDeletedCustomIconLibrary, resolveCustomIconSvg } from './controls/icon-library/custom-icon-libraries';
 export {
 	getFontAwesome7IconName,
 	resetFontAwesome7IconsCache,