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

package/dist/index.js

@@ -187,7 +187,9 @@ var SINGLE_BLOCK_KEY = "default";
 var convertBlocks = async (blocks) => {
   const { data } = await (0, import_http_client2.httpService)().post(
     CSS_TO_ATOMIC_URL,
-    { blocks }
+    {
+      blocks
+    }
   );
   return data.data;
 };
@@ -2206,6 +2208,8 @@ 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 }) => {
   const iconValue = typeof value.value === "string" ? value.value : null;
@@ -2217,14 +2221,14 @@ var iconTransformer = createTransformer(async (value, { signal }) => {
   if (fontAwesomeHtml) {
     return { html: fontAwesomeHtml, url: null };
   }
-  if ((0, import_editor_controls.isDeletedCustomIconLibrary)(library, iconValue)) {
-    return resolveDefaultSvg(signal);
+  if (library.startsWith(FONT_AWESOME_LIBRARY_PREFIX) || EICONS_LIBRARY === library) {
+    return EMPTY_ICON_RESULT;
   }
-  const customHtml = await resolveCustomSvg(library, iconValue, signal);
-  if (customHtml) {
-    return { html: customHtml, url: null };
+  const providerHtml = await resolveProviderSvg(library, iconValue, signal);
+  if (providerHtml) {
+    return { html: providerHtml, url: null };
   }
-  return EMPTY_ICON_RESULT;
+  return resolveDefaultSvg(signal);
 });
 async function resolveDefaultSvg(signal) {
   const assetsUrl = window.elementorCommon?.config?.urls?.assets;
@@ -2239,8 +2243,8 @@ async function resolveDefaultSvg(signal) {
     { key: "svg", signal }
   );
 }
-async function resolveCustomSvg(library, iconValue, signal) {
-  const markup = await (0, import_editor_controls.resolveCustomIconSvg)(library, iconValue, signal);
+async function resolveProviderSvg(library, iconValue, signal) {
+  const markup = await (0, import_editor_controls.resolveProviderIconSvg)(library, iconValue, signal);
   return markup ? processIconSvgContent(markup) : null;
 }
 async function resolveFontAwesomeSvg(library, iconValue, signal) {

package/dist/index.mjs

@@ -118,7 +118,9 @@ var SINGLE_BLOCK_KEY = "default";
 var convertBlocks = async (blocks) => {
   const { data } = await httpService2().post(
     CSS_TO_ATOMIC_URL,
-    { blocks }
+    {
+      blocks
+    }
   );
   return data.data;
 };
@@ -2092,9 +2094,8 @@ var timeRangeTransformer = createTransformer((value) => {
 // src/transformers/shared/icon-transformer.ts
 import {
   getFontAwesome7IconName,
-  isDeletedCustomIconLibrary,
-  resolveCustomIconSvg,
-  resolveFontAwesome7Icon
+  resolveFontAwesome7Icon,
+  resolveProviderIconSvg
 } from "@elementor/editor-controls";
 
 // src/transformers/shared/process-svg-content.ts
@@ -2163,6 +2164,8 @@ 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 }) => {
   const iconValue = typeof value.value === "string" ? value.value : null;
@@ -2174,14 +2177,14 @@ var iconTransformer = createTransformer(async (value, { signal }) => {
   if (fontAwesomeHtml) {
     return { html: fontAwesomeHtml, url: null };
   }
-  if (isDeletedCustomIconLibrary(library, iconValue)) {
-    return resolveDefaultSvg(signal);
+  if (library.startsWith(FONT_AWESOME_LIBRARY_PREFIX) || EICONS_LIBRARY === library) {
+    return EMPTY_ICON_RESULT;
   }
-  const customHtml = await resolveCustomSvg(library, iconValue, signal);
-  if (customHtml) {
-    return { html: customHtml, url: null };
+  const providerHtml = await resolveProviderSvg(library, iconValue, signal);
+  if (providerHtml) {
+    return { html: providerHtml, url: null };
   }
-  return EMPTY_ICON_RESULT;
+  return resolveDefaultSvg(signal);
 });
 async function resolveDefaultSvg(signal) {
   const assetsUrl = window.elementorCommon?.config?.urls?.assets;
@@ -2196,8 +2199,8 @@ async function resolveDefaultSvg(signal) {
     { key: "svg", signal }
   );
 }
-async function resolveCustomSvg(library, iconValue, signal) {
-  const markup = await resolveCustomIconSvg(library, iconValue, signal);
+async function resolveProviderSvg(library, iconValue, signal) {
+  const markup = await resolveProviderIconSvg(library, iconValue, signal);
   return markup ? processIconSvgContent(markup) : null;
 }
 async function resolveFontAwesomeSvg(library, iconValue, signal) {

package/package.json

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

package/src/mcp/utils/convert-css-to-atomic.ts

@@ -22,7 +22,9 @@ const convertBlocks = async (
 ): Promise< Record< string, CssConversionResult > > => {
 	const { data } = await httpService().post< HttpResponse< Record< string, CssConversionResult > > >(
 		CSS_TO_ATOMIC_URL,
-		{ blocks }
+		{
+			blocks,
+		}
 	);
 
 	return data.data;

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

@@ -1,10 +1,8 @@
-jest.mock( '@elementor/http-client', () => ( {
-	httpService: () => ( {
-		get: jest.fn().mockRejectedValue( new Error( 'no custom svg' ) ),
-	} ),
-} ) );
-
-import { resetFontAwesome7IconsCache } from '@elementor/editor-controls';
+import {
+	registerIconLibraryProvider,
+	resetFontAwesome7IconsCache,
+	unregisterIconLibraryProvider,
+} from '@elementor/editor-controls';
 import { iconPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
 
 import { iconPropType } from '../../../__tests__/prop-types';
@@ -186,15 +184,12 @@ describe( 'iconTransformer', () => {
 		expect( result ).toEqual( { html: null, url: null } );
 	} );
 
-	it( 'falls back to the default svg when a custom library has been deleted', async () => {
+	it( 'falls back to the default svg when no provider resolves a non-native library', async () => {
 		// Arrange.
-		window.elementor = {
-			config: {
-				icons: {
-					libraries: [ { name: 'fa-solid', prefix: 'fa-', native: true } ],
-				},
-			},
-		} as typeof window.elementor;
+		registerIconLibraryProvider( {
+			id: 'test-provider',
+			useIcons: () => ( { data: [], isLoading: false } ),
+		} );
 		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().mockResolvedValue( {
@@ -206,6 +201,8 @@ describe( 'iconTransformer', () => {
 		// Act.
 		const result = await resolveSavedIcon( 'missing-set missing-set-ghost', 'missing-set' );
 
+		unregisterIconLibraryProvider( 'test-provider' );
+
 		// Assert.
 		expect( global.fetch ).toHaveBeenCalledWith(
 			'https://example.com/assets/images/default-svg.svg',
@@ -217,6 +214,59 @@ describe( 'iconTransformer', () => {
 		} );
 	} );
 
+	it( 'falls back to the default svg for a non-native library when no provider is registered', async () => {
+		// Arrange.
+		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().mockResolvedValue( {
+			ok: true,
+			headers: new Headers( { 'content-type': 'image/svg+xml' } ),
+			text: () => Promise.resolve( defaultSvg ),
+		} );
+
+		// Act.
+		const result = await resolveSavedIcon( 'my-set my-set-star', 'my-set' );
+
+		// Assert.
+		expect( result ).toEqual( {
+			html: expect.stringContaining( 'M24.9999 4.31543' ),
+			url: 'https://example.com/assets/images/default-svg.svg',
+		} );
+	} );
+
+	it( 'does not replace PHP-managed eicons with the default svg', async () => {
+		// Arrange.
+		global.fetch = jest.fn();
+
+		// Act.
+		const result = await resolveSavedIcon( 'eicon-edit', 'eicons' );
+
+		// Assert.
+		expect( result ).toEqual( { html: null, url: null } );
+		expect( global.fetch ).not.toHaveBeenCalled();
+	} );
+
+	it( 'renders and sanitizes svg returned by a provider', async () => {
+		// Arrange.
+		registerIconLibraryProvider( {
+			id: 'test-provider',
+			useIcons: () => ( { data: [], isLoading: false } ),
+			resolveSvg: () =>
+				Promise.resolve(
+					'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><script>alert(1)</script><path d="M1 1h8v8H1z"></path></svg>'
+				),
+		} );
+
+		// Act.
+		const result = ( await resolveSavedIcon( 'my-set my-set-star', 'my-set' ) ) as { html: string };
+
+		unregisterIconLibraryProvider( 'test-provider' );
+
+		// Assert.
+		expect( result.html ).toContain( 'M1 1h8v8H1z' );
+		expect( result.html ).not.toContain( 'script' );
+	} );
+
 	it( 'returns null html when value or library is missing', async () => {
 		// Act.
 		const resolve = createPropsResolver( {

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

@@ -47,7 +47,10 @@ describe( 'svgSrcTransformer', () => {
 		const result = ( await svgSrcTransformer(
 			{ id: null, url: 'https://example.com/icon.svg' },
 			{ key: 'svg' }
-		) ) as { html: string; url: string };
+		) ) as {
+			html: string;
+			url: string;
+		};
 
 		// Assert.
 		expect( result.html ).toContain( 'width: 100%' );
@@ -91,7 +94,10 @@ describe( 'svgSrcTransformer', () => {
 		const result = ( await svgSrcTransformer(
 			{ id: 99, url: 'https://example.com/fallback.svg' },
 			{ key: 'svg' }
-		) ) as { html: string; url: string };
+		) ) as {
+			html: string;
+			url: string;
+		};
 
 		// Assert.
 		expect( result.url ).toBe( 'https://example.com/fallback.svg' );
@@ -146,7 +152,10 @@ describe( 'svgSrcTransformer', () => {
 		const result = ( await svgSrcTransformer(
 			{ id: null, url: 'https://example.com/styled.svg' },
 			{ key: 'svg' }
-		) ) as { html: string; url: string };
+		) ) as {
+			html: string;
+			url: string;
+		};
 
 		// Assert.
 		expect( result.html ).toContain( 'display: block' );

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

@@ -1,9 +1,8 @@
 import {
 	type FontAwesome7IconDefinition,
 	getFontAwesome7IconName,
-	isDeletedCustomIconLibrary,
-	resolveCustomIconSvg,
 	resolveFontAwesome7Icon,
+	resolveProviderIconSvg,
 } from '@elementor/editor-controls';
 
 import { createTransformer } from '../create-transformer';
@@ -14,6 +13,8 @@ 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';
 
 type IconValue = {
@@ -35,17 +36,17 @@ export const iconTransformer = createTransformer( async ( value: IconValue, { si
 		return { html: fontAwesomeHtml, url: null };
 	}
 
-	if ( isDeletedCustomIconLibrary( library, iconValue ) ) {
-		return resolveDefaultSvg( signal );
+	if ( library.startsWith( FONT_AWESOME_LIBRARY_PREFIX ) || EICONS_LIBRARY === library ) {
+		return EMPTY_ICON_RESULT;
 	}
 
-	const customHtml = await resolveCustomSvg( library, iconValue, signal );
+	const providerHtml = await resolveProviderSvg( library, iconValue, signal );
 
-	if ( customHtml ) {
-		return { html: customHtml, url: null };
+	if ( providerHtml ) {
+		return { html: providerHtml, url: null };
 	}
 
-	return EMPTY_ICON_RESULT;
+	return resolveDefaultSvg( signal );
 } );
 
 async function resolveDefaultSvg( signal?: AbortSignal ) {
@@ -64,8 +65,12 @@ async function resolveDefaultSvg( signal?: AbortSignal ) {
 	);
 }
 
-async function resolveCustomSvg( library: string, iconValue: string, signal?: AbortSignal ): Promise< string | null > {
-	const markup = await resolveCustomIconSvg( library, iconValue, signal );
+async function resolveProviderSvg(
+	library: string,
+	iconValue: string,
+	signal?: AbortSignal
+): Promise< string | null > {
+	const markup = await resolveProviderIconSvg( library, iconValue, signal );
 
 	return markup ? processIconSvgContent( markup ) : null;
 }