@elementor/editor-canvas 4.4.0-1145 → 4.4.0-1146

package/dist/index.js

@@ -2330,7 +2330,6 @@ var svgSrcTransformer = createTransformer(async (value, { signal }) => {
 var EMPTY_ICON_RESULT = { html: null, url: null };
 var ICON_SVG_SIZE = "100%";
 var ICON_SVG_OVERFLOW = "visible";
-var FONT_AWESOME_LIBRARY_PREFIX = "fa-";
 var EICONS_LIBRARY = "eicons";
 var DEFAULT_SVG_RELATIVE_PATH = "images/default-svg.svg";
 var iconTransformer = createTransformer(async (value, { signal }) => {
@@ -2343,7 +2342,7 @@ var iconTransformer = createTransformer(async (value, { signal }) => {
   if (fontAwesomeHtml) {
     return { html: fontAwesomeHtml, url: null };
   }
-  if (library.startsWith(FONT_AWESOME_LIBRARY_PREFIX) || EICONS_LIBRARY === library) {
+  if (EICONS_LIBRARY === library) {
     return EMPTY_ICON_RESULT;
   }
   const providerHtml = await resolveProviderSvg(library, iconValue, signal);

package/dist/index.mjs

@@ -2286,7 +2286,6 @@ var svgSrcTransformer = createTransformer(async (value, { signal }) => {
 var EMPTY_ICON_RESULT = { html: null, url: null };
 var ICON_SVG_SIZE = "100%";
 var ICON_SVG_OVERFLOW = "visible";
-var FONT_AWESOME_LIBRARY_PREFIX = "fa-";
 var EICONS_LIBRARY = "eicons";
 var DEFAULT_SVG_RELATIVE_PATH = "images/default-svg.svg";
 var iconTransformer = createTransformer(async (value, { signal }) => {
@@ -2299,7 +2298,7 @@ var iconTransformer = createTransformer(async (value, { signal }) => {
   if (fontAwesomeHtml) {
     return { html: fontAwesomeHtml, url: null };
   }
-  if (library.startsWith(FONT_AWESOME_LIBRARY_PREFIX) || EICONS_LIBRARY === library) {
+  if (EICONS_LIBRARY === library) {
     return EMPTY_ICON_RESULT;
   }
   const providerHtml = await resolveProviderSvg(library, iconValue, signal);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.4.0-1145",
+  "version": "4.4.0-1146",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,26 +37,26 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.4.0-1145",
-    "@elementor/editor-controls": "4.4.0-1145",
-    "@elementor/editor-documents": "4.4.0-1145",
-    "@elementor/editor-elements": "4.4.0-1145",
-    "@elementor/editor-interactions": "4.4.0-1145",
-    "@elementor/editor-mcp": "4.4.0-1145",
-    "@elementor/editor-notifications": "4.4.0-1145",
-    "@elementor/editor-props": "4.4.0-1145",
-    "@elementor/editor-responsive": "4.4.0-1145",
-    "@elementor/editor-styles": "4.4.0-1145",
-    "@elementor/editor-styles-repository": "4.4.0-1145",
-    "@elementor/editor-ui": "4.4.0-1145",
-    "@elementor/editor-v1-adapters": "4.4.0-1145",
-    "@elementor/events": "4.4.0-1145",
-    "@elementor/http-client": "4.4.0-1145",
-    "@elementor/schema": "4.4.0-1145",
-    "@elementor/twing": "4.4.0-1145",
+    "@elementor/editor": "4.4.0-1146",
+    "@elementor/editor-controls": "4.4.0-1146",
+    "@elementor/editor-documents": "4.4.0-1146",
+    "@elementor/editor-elements": "4.4.0-1146",
+    "@elementor/editor-interactions": "4.4.0-1146",
+    "@elementor/editor-mcp": "4.4.0-1146",
+    "@elementor/editor-notifications": "4.4.0-1146",
+    "@elementor/editor-props": "4.4.0-1146",
+    "@elementor/editor-responsive": "4.4.0-1146",
+    "@elementor/editor-styles": "4.4.0-1146",
+    "@elementor/editor-styles-repository": "4.4.0-1146",
+    "@elementor/editor-ui": "4.4.0-1146",
+    "@elementor/editor-v1-adapters": "4.4.0-1146",
+    "@elementor/events": "4.4.0-1146",
+    "@elementor/http-client": "4.4.0-1146",
+    "@elementor/schema": "4.4.0-1146",
+    "@elementor/twing": "4.4.0-1146",
     "@elementor/ui": "1.41.4",
-    "@elementor/utils": "4.4.0-1145",
-    "@elementor/wp-media": "4.4.0-1145",
+    "@elementor/utils": "4.4.0-1146",
+    "@elementor/wp-media": "4.4.0-1146",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0",
     "dompurify": "^3.2.6"

package/src/transformers/shared/__tests__/icon-transformer.test.ts

@@ -133,7 +133,7 @@ describe( 'iconTransformer', () => {
 		expect( html ).toContain( 'M10 10' );
 	} );
 
-	it( 'returns null html when the icon cannot be resolved', async () => {
+	it( 'falls back to the default svg when the icon cannot be resolved', async () => {
 		// Arrange.
 		mockFetch( { icons: {} } );
 
@@ -141,7 +141,7 @@ describe( 'iconTransformer', () => {
 		const result = await resolveSavedIcon( 'fas fa-missing', 'fa-solid' );
 
 		// Assert.
-		expect( result ).toEqual( { html: null, url: null } );
+		expect( result ).toEqual( { html: null, url: 'https://example.com/assets/images/default-svg.svg' } );
 	} );
 
 	it( 'fetches json from the localized font awesome 7 base url', async () => {
@@ -180,8 +180,70 @@ describe( 'iconTransformer', () => {
 		const result = await resolveSavedIcon( 'fas fa-star', 'fa-../../wp-config' );
 
 		// Assert.
-		expect( global.fetch ).not.toHaveBeenCalled();
-		expect( result ).toEqual( { html: null, url: null } );
+		expect( ( global.fetch as jest.Mock ).mock.calls.map( ( [ url ] ) => String( url ) ) ).toEqual( [
+			'https://example.com/assets/images/default-svg.svg',
+		] );
+		expect( result ).toEqual(
+			expect.objectContaining( { url: 'https://example.com/assets/images/default-svg.svg' } )
+		);
+	} );
+
+	it( 'asks providers for a font awesome icon missing from the free data', async () => {
+		// Arrange.
+		mockFetch( { icons: {} } );
+		const resolveSvg = jest
+			.fn()
+			.mockResolvedValue(
+				'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M2 2h6v6H2z"></path></svg>'
+			);
+		registerIconLibraryProvider( {
+			id: 'test-provider',
+			useIcons: () => ( { data: [], isLoading: false } ),
+			resolveSvg,
+		} );
+
+		// Act.
+		const result = ( await resolveSavedIcon( 'fal fa-star', 'fa-light' ) ) as { html: string; url: string | null };
+
+		unregisterIconLibraryProvider( 'test-provider' );
+
+		// Assert.
+		expect( resolveSvg ).toHaveBeenCalledWith( 'fa-light', 'fal fa-star', undefined );
+		expect( result.html ).toContain( 'M2 2h6v6H2z' );
+		expect( result.url ).toBeNull();
+	} );
+
+	it( 'falls back to the default svg for a font awesome icon when no provider resolves it', async () => {
+		// Arrange.
+		registerIconLibraryProvider( {
+			id: 'test-provider',
+			useIcons: () => ( { data: [], isLoading: false } ),
+			resolveSvg: async () => null,
+		} );
+		const defaultSvg =
+			'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M24.9999 4.31543"></path></svg>';
+		global.fetch = jest.fn( ( url: string ) =>
+			Promise.resolve(
+				String( url ).endsWith( '.svg' )
+					? {
+							ok: true,
+							headers: new Headers( { 'content-type': 'image/svg+xml' } ),
+							text: () => Promise.resolve( defaultSvg ),
+					  }
+					: { ok: true, json: () => Promise.resolve( { icons: {} } ) }
+			)
+		) as never;
+
+		// Act.
+		const result = await resolveSavedIcon( 'fa-light fa-star', 'fa-light' );
+
+		unregisterIconLibraryProvider( 'test-provider' );
+
+		// Assert.
+		expect( result ).toEqual( {
+			html: expect.stringContaining( 'M24.9999 4.31543' ),
+			url: 'https://example.com/assets/images/default-svg.svg',
+		} );
 	} );
 
 	it( 'falls back to the default svg when no provider resolves a non-native library', async () => {

package/src/transformers/shared/icon-transformer.ts

@@ -13,7 +13,6 @@ import { svgSrcTransformer } from './svg-src-transformer';
 const EMPTY_ICON_RESULT = { html: null, url: null };
 const ICON_SVG_SIZE = '100%';
 const ICON_SVG_OVERFLOW = 'visible';
-const FONT_AWESOME_LIBRARY_PREFIX = 'fa-';
 const EICONS_LIBRARY = 'eicons';
 const DEFAULT_SVG_RELATIVE_PATH = 'images/default-svg.svg';
 
@@ -36,7 +35,7 @@ export const iconTransformer = createTransformer( async ( value: IconValue, { si
 		return { html: fontAwesomeHtml, url: null };
 	}
 
-	if ( library.startsWith( FONT_AWESOME_LIBRARY_PREFIX ) || EICONS_LIBRARY === library ) {
+	if ( EICONS_LIBRARY === library ) {
 		return EMPTY_ICON_RESULT;
 	}