@elementor/editor-controls 4.4.0-1136 → 4.4.0-1138

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-1136",
+  "version": "4.4.0-1138",
   "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-1136",
-    "@elementor/editor-elements": "4.4.0-1136",
-    "@elementor/editor-props": "4.4.0-1136",
-    "@elementor/editor-responsive": "4.4.0-1136",
-    "@elementor/editor-ui": "4.4.0-1136",
-    "@elementor/editor-v1-adapters": "4.4.0-1136",
-    "@elementor/env": "4.4.0-1136",
-    "@elementor/events": "4.4.0-1136",
-    "@elementor/http-client": "4.4.0-1136",
+    "@elementor/editor-current-user": "4.4.0-1138",
+    "@elementor/editor-elements": "4.4.0-1138",
+    "@elementor/editor-props": "4.4.0-1138",
+    "@elementor/editor-responsive": "4.4.0-1138",
+    "@elementor/editor-ui": "4.4.0-1138",
+    "@elementor/editor-v1-adapters": "4.4.0-1138",
+    "@elementor/env": "4.4.0-1138",
+    "@elementor/events": "4.4.0-1138",
+    "@elementor/http-client": "4.4.0-1138",
     "@elementor/icons": "~1.78.1",
-    "@elementor/locations": "4.4.0-1136",
-    "@elementor/query": "4.4.0-1136",
-    "@elementor/schema": "4.4.0-1136",
-    "@elementor/session": "4.4.0-1136",
+    "@elementor/locations": "4.4.0-1138",
+    "@elementor/query": "4.4.0-1138",
+    "@elementor/schema": "4.4.0-1138",
+    "@elementor/session": "4.4.0-1138",
     "@elementor/ui": "1.41.3",
-    "@elementor/utils": "4.4.0-1136",
-    "@elementor/wp-media": "4.4.0-1136",
+    "@elementor/utils": "4.4.0-1138",
+    "@elementor/wp-media": "4.4.0-1138",
     "@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-popover.tsx

@@ -14,7 +14,6 @@ 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,
@@ -25,6 +24,7 @@ import {
 import { FontAwesomeGlyph } from './font-awesome-glyph';
 import { IconLibraryFilter } from './icon-library-filter';
 import { IconLibraryGrid } from './icon-library-grid';
+import { useIconLibraryProviderIcons } from './icon-library-providers';
 import { type IconLibraryView, IconLibraryViewToggle } from './icon-library-view-toggle';
 import { SvgElementIcon } from './svg-element-icon';
 import { useFontAwesome7Catalog } from './use-font-awesome-7-catalog';
@@ -85,9 +85,9 @@ export const IconLibraryPopover = ( {
 	);
 	const view = isIconLibraryView( storedView ) ? storedView : DEFAULT_ICON_LIBRARY_VIEW;
 	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 { data: providerIcons = [], isLoading: isProviderLoading } = useIconLibraryProviderIcons( open );
+	const isLoading = isFontAwesomeLoading || isProviderLoading;
+	const icons = useMemo( () => [ ...fontAwesomeIcons, ...providerIcons ], [ providerIcons, fontAwesomeIcons ] );
 
 	const items = useMemo(
 		() => createIconLibraryItems( icons, searchValue, activeLibraries ),

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

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+
+import { type FontAwesome7Icon } from './font-awesome-7-catalog';
+
+export type IconLibraryProviderState = {
+	data?: FontAwesome7Icon[];
+	isLoading: boolean;
+};
+
+export type IconLibraryProvider = {
+	id: string;
+	useIcons: ( enabled: boolean ) => IconLibraryProviderState;
+	resolveSvg?: ( library: string, iconValue: string, signal?: AbortSignal ) => Promise< string | null >;
+};
+
+const providers = new Map< string, IconLibraryProvider >();
+
+/**
+ * Register before the icon picker mounts. Each picker instance snapshots the providers on mount,
+ * so its hook count stays constant; a provider registered later appears on the next mount.
+ * @param provider
+ */
+export function registerIconLibraryProvider( provider: IconLibraryProvider ) {
+	providers.set( provider.id, provider );
+}
+
+export function unregisterIconLibraryProvider( id: string ) {
+	providers.delete( id );
+}
+
+export function useIconLibraryProviderIcons( enabled: boolean ): Required< IconLibraryProviderState > {
+	const [ snapshot ] = useState( () => [ ...providers.values() ] );
+	const states = snapshot.map( ( provider ) => provider.useIcons( enabled ) );
+
+	return {
+		data: states.flatMap( ( state ) => state.data ?? [] ),
+		isLoading: states.some( ( state ) => state.isLoading ),
+	};
+}
+
+export async function resolveProviderIconSvg(
+	library: string,
+	iconValue: string,
+	signal?: AbortSignal
+): Promise< string | null > {
+	for ( const provider of providers.values() ) {
+		try {
+			const markup = await provider.resolveSvg?.( library, iconValue, signal );
+
+			if ( markup ) {
+				return markup;
+			}
+		} catch ( error ) {
+			if ( signal?.aborted ) {
+				throw error;
+			}
+		}
+	}
+
+	return null;
+}

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

@@ -56,12 +56,22 @@ type SvgMediaControlProps = {
 
 export const SvgMediaControl = createControl( ( { showIconLibrary = false, label }: SvgMediaControlProps ) => {
 	const groupLabel = label ?? __( 'SVG', 'elementor' );
-	const { value: svgValue, setValue: setSvgValue } = useBoundProp( svgSrcPropTypeUtil );
-	const { value: iconValue, setValue: setIconValue } = useBoundProp( iconPropTypeUtil );
+	const { value: svgValue, setValue: setSvgValue, placeholder: svgPlaceholder } = useBoundProp( svgSrcPropTypeUtil );
+	const { value: iconValue, setValue: setIconValue, placeholder: iconPlaceholder } = useBoundProp( iconPropTypeUtil );
 	const id = svgValue?.id;
-	const url = svgValue?.url;
-	const { data: attachment, isFetching } = useWpMediaAttachment( id?.value || null );
-	const src = attachment?.url ?? url?.value ?? null;
+
+	// Preview only: when there's no own value of either type (e.g. a component instance with no
+	// override yet), fall back to the bound placeholder (the inherited/origin value) so the preview
+	// isn't broken. If there IS an own value, use it as-is — even if it's only one of the two types —
+	// so we never mix an own value with an unrelated inherited placeholder. This never affects what
+	// setValue writes.
+	const hasOwnValue =
+		( svgValue !== null && svgValue !== undefined ) || ( iconValue !== null && iconValue !== undefined );
+	const previewSvgValue = hasOwnValue ? svgValue : svgPlaceholder;
+	const previewIconValue = hasOwnValue ? iconValue : iconPlaceholder;
+
+	const { data: attachment, isFetching } = useWpMediaAttachment( previewSvgValue?.id?.value || null );
+	const src = attachment?.url ?? previewSvgValue?.url?.value ?? null;
 	const { data: allowSvgUpload } = useUnfilteredFilesUpload();
 	const [ unfilteredModalOpenState, setUnfilteredModalOpenState ] = useState( false );
 	const iconLibraryPopoverState = usePopupState( { variant: 'popover' } );
@@ -70,9 +80,9 @@ export const SvgMediaControl = createControl( ( { showIconLibrary = false, label
 	const [ iconLibraryAnchor, setIconLibraryAnchor ] = useState< IconLibraryAnchor | null >( null );
 	const { isAdmin } = useCurrentUserCapabilities();
 	const selectedIconClass =
-		showIconLibrary && typeof iconValue?.value?.value === 'string' ? iconValue.value.value : null;
+		showIconLibrary && typeof previewIconValue?.value?.value === 'string' ? previewIconValue.value.value : null;
 	const selectedIconLibrary =
-		showIconLibrary && typeof iconValue?.library?.value === 'string' ? iconValue.library.value : null;
+		showIconLibrary && typeof previewIconValue?.library?.value === 'string' ? previewIconValue.library.value : null;
 
 	const { open } = useWpMediaFrame( {
 		mediaTypes: [ 'svg' ],

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

@@ -2,9 +2,9 @@ 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 { useIconLibraryProviderIcons } from './icon-library/icon-library-providers';
 import { useFontAwesome7Catalog } from './icon-library/use-font-awesome-7-catalog';
 
 const ICON_PREVIEW_SIZE = 50;
@@ -21,10 +21,11 @@ export const SvgMediaPreview = ( { isFetching, src, iconClassName, iconLibrary }
 	const shouldLoadIconCatalog = Boolean( iconClassName && iconLibrary );
 	const { data: fontAwesomeIcons = [], isLoading: isFontAwesomeLoading } =
 		useFontAwesome7Catalog( shouldLoadIconCatalog );
-	const { data: customIcons = [], isLoading: isCustomLoading } = useCustomIconLibraries( shouldLoadIconCatalog );
-	const icons = [ ...fontAwesomeIcons, ...customIcons ];
+	const { data: providerIcons = [], isLoading: isProviderLoading } =
+		useIconLibraryProviderIcons( shouldLoadIconCatalog );
+	const icons = [ ...fontAwesomeIcons, ...providerIcons ];
 	const selectedIcon = findFontAwesome7Icon( icons, iconClassName, iconLibrary );
-	const isLoadingCatalog = shouldLoadIconCatalog && ( isFontAwesomeLoading || isCustomLoading );
+	const isLoadingCatalog = shouldLoadIconCatalog && ( isFontAwesomeLoading || isProviderLoading );
 
 	if ( isFetching || isLoadingCatalog ) {
 		return <CircularProgress role="progressbar" />;

package/src/index.ts

@@ -37,7 +37,14 @@ 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 {
+	registerIconLibraryProvider,
+	resolveProviderIconSvg,
+	unregisterIconLibraryProvider,
+	type IconLibraryProvider,
+} from './controls/icon-library/icon-library-providers';
+export { enqueueIconFonts } from './controls/open-icon-library';
+export { type FontAwesome7Icon } from './controls/icon-library/font-awesome-7-catalog';
 export {
 	getFontAwesome7IconName,
 	resetFontAwesome7IconsCache,