@elementor/editor-controls 4.4.0-1142 → 4.4.0-1143

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

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

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useQuery } from '@elementor/query';
 
 import { type FontAwesome7Icon } from './font-awesome-7-catalog';
 
@@ -13,6 +14,8 @@ export type IconLibraryProvider = {
 	resolveSvg?: ( library: string, iconValue: string, signal?: AbortSignal ) => Promise< string | null >;
 };
 
+const PROVIDER_ICON_SVG_QUERY_KEY = 'icon-library-provider-svg';
+
 const providers = new Map< string, IconLibraryProvider >();
 
 /**
@@ -59,3 +62,12 @@ export async function resolveProviderIconSvg(
 
 	return null;
 }
+
+export function useProviderIconSvg( library: string | null, iconValue: string | null, enabled: boolean ) {
+	return useQuery< string | null >( {
+		queryKey: [ PROVIDER_ICON_SVG_QUERY_KEY, library, iconValue ],
+		queryFn: ( { signal } ) => resolveProviderIconSvg( library as string, iconValue as string, signal ),
+		enabled: enabled && Boolean( library && iconValue ),
+		staleTime: Infinity,
+	} );
+}

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

@@ -4,7 +4,7 @@ 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 } from './icon-library/icon-library-providers';
+import { useIconLibraryProviderIcons, useProviderIconSvg } from './icon-library/icon-library-providers';
 import { useFontAwesome7Catalog } from './icon-library/use-font-awesome-7-catalog';
 
 const ICON_PREVIEW_SIZE = 50;
@@ -26,8 +26,13 @@ export const SvgMediaPreview = ( { isFetching, src, iconClassName, iconLibrary }
 	const icons = [ ...fontAwesomeIcons, ...providerIcons ];
 	const selectedIcon = findFontAwesome7Icon( icons, iconClassName, iconLibrary );
 	const isLoadingCatalog = shouldLoadIconCatalog && ( isFontAwesomeLoading || isProviderLoading );
+	const { data: savedIconSvg, isLoading: isSavedIconLoading } = useProviderIconSvg(
+		iconLibrary,
+		iconClassName,
+		shouldLoadIconCatalog && ! isLoadingCatalog && ! selectedIcon
+	);
 
-	if ( isFetching || isLoadingCatalog ) {
+	if ( isFetching || isLoadingCatalog || isSavedIconLoading ) {
 		return <CircularProgress role="progressbar" />;
 	}
 
@@ -35,6 +40,10 @@ export const SvgMediaPreview = ( { isFetching, src, iconClassName, iconLibrary }
 		return <IconPreview icon={ selectedIcon } />;
 	}
 
+	if ( savedIconSvg ) {
+		return <IconPreview icon={ toSvgMarkupIcon( savedIconSvg, iconLibrary, iconClassName ) } />;
+	}
+
 	if ( shouldLoadIconCatalog ) {
 		return <IconPreviewPlaceholder />;
 	}
@@ -42,6 +51,19 @@ export const SvgMediaPreview = ( { isFetching, src, iconClassName, iconLibrary }
 	return <SvgPreview src={ src } />;
 };
 
+const toSvgMarkupIcon = ( svgMarkup: string, library: string | null, value: string | null ): FontAwesome7Icon => ( {
+	id: `${ library }:${ value }`,
+	label: value ?? '',
+	library: library ?? '',
+	value: value ?? '',
+	name: value ?? '',
+	aliases: [],
+	width: 0,
+	height: 0,
+	paths: [],
+	svgMarkup,
+} );
+
 const IconPreview = ( { icon }: { icon: FontAwesome7Icon } ) => (
 	<Box sx={ { color: ICON_PREVIEW_COLOR } }>
 		<FontAwesomeGlyph