@elementor/editor-canvas 4.4.0-1110 → 4.4.0-1111

package/dist/index.js

@@ -2131,32 +2131,101 @@ function processSvgContent(svgText) {
   return svgElement.outerHTML;
 }
 
+// src/transformers/shared/svg-src-transformer.ts
+var import_wp_media = require("@elementor/wp-media");
+async function fetchSvgContent(url, signal) {
+  try {
+    const response = await fetch(url, { signal });
+    if (!response.ok) {
+      return null;
+    }
+    const contentType = response.headers.get("content-type") ?? "";
+    const isSvg = contentType.includes("svg") || contentType.includes("xml") || url.endsWith(".svg");
+    if (!isSvg) {
+      return null;
+    }
+    return await response.text();
+  } catch {
+    return null;
+  }
+}
+function resolveSvgSrcId(id) {
+  if (typeof id !== "number" || id <= 0) {
+    return null;
+  }
+  return id;
+}
+var svgSrcTransformer = createTransformer(async (value, { signal }) => {
+  const id = resolveSvgSrcId(value.id);
+  const urlFromValue = typeof value.url === "string" ? value.url : null;
+  let url = urlFromValue;
+  if (id && !urlFromValue) {
+    const attachment = await (0, import_wp_media.getMediaAttachment)({ id });
+    url = attachment?.url ?? null;
+  }
+  const resolvedUrl = typeof url === "string" ? url : null;
+  if (!resolvedUrl) {
+    return { html: null, url: null };
+  }
+  const svgText = await fetchSvgContent(resolvedUrl, signal);
+  const html = svgText ? processSvgContent(svgText) : null;
+  return { html, url: resolvedUrl };
+});
+
 // src/transformers/shared/icon-transformer.ts
 var EMPTY_ICON_RESULT = { html: null, url: null };
 var ICON_SVG_SIZE = "100%";
 var ICON_SVG_OVERFLOW = "visible";
+var DEFAULT_SVG_RELATIVE_PATH = "images/default-svg.svg";
 var iconTransformer = createTransformer(async (value, { signal }) => {
   const iconValue = typeof value.value === "string" ? value.value : null;
   const library = typeof value.library === "string" ? value.library : null;
   if (!iconValue || !library) {
     return EMPTY_ICON_RESULT;
   }
+  const fontAwesomeHtml = await resolveFontAwesomeSvg(library, iconValue, signal);
+  if (fontAwesomeHtml) {
+    return { html: fontAwesomeHtml, url: null };
+  }
+  if ((0, import_editor_controls.isDeletedCustomIconLibrary)(library, iconValue)) {
+    return resolveDefaultSvg(signal);
+  }
+  const customHtml = await resolveCustomSvg(library, iconValue, signal);
+  if (customHtml) {
+    return { html: customHtml, url: null };
+  }
+  return EMPTY_ICON_RESULT;
+});
+async function resolveDefaultSvg(signal) {
+  const assetsUrl = window.elementorCommon?.config?.urls?.assets;
+  if (typeof assetsUrl !== "string" || assetsUrl === "") {
+    return EMPTY_ICON_RESULT;
+  }
+  return svgSrcTransformer(
+    {
+      id: null,
+      url: `${assetsUrl}${DEFAULT_SVG_RELATIVE_PATH}`
+    },
+    { key: "svg", signal }
+  );
+}
+async function resolveCustomSvg(library, iconValue, signal) {
+  const markup = await (0, import_editor_controls.resolveCustomIconSvg)(library, iconValue, signal);
+  return markup ? processIconSvgContent(markup) : null;
+}
+async function resolveFontAwesomeSvg(library, iconValue, signal) {
   const iconName = (0, import_editor_controls.getFontAwesome7IconName)(iconValue);
   if (!iconName) {
-    return EMPTY_ICON_RESULT;
+    return null;
   }
   const iconData = await (0, import_editor_controls.resolveFontAwesome7Icon)(library, iconName, signal);
   if (!iconData) {
-    return EMPTY_ICON_RESULT;
-  }
-  const svgText = buildFontAwesomeSvg(iconData);
-  if (!svgText) {
-    return EMPTY_ICON_RESULT;
+    return null;
   }
-  const html = processIconSvgContent(svgText);
-  return { html, url: null };
-});
-function buildFontAwesomeSvg(iconData) {
+  const svgText = buildPathSvg(iconData);
+  return svgText ? processIconSvgContent(svgText) : null;
+}
+function buildPathSvg(iconData) {
   if (iconData.paths.length === 0) {
     return null;
   }
@@ -2192,13 +2261,13 @@ var imageSrcTransformer = createTransformer((value) => ({
 }));
 
 // src/transformers/shared/image-transformer.ts
-var import_wp_media = require("@elementor/wp-media");
+var import_wp_media2 = require("@elementor/wp-media");
 var imageTransformer = createTransformer(async (value) => {
   const { src, size: size2 } = value;
   if (!src?.id) {
     return src?.url ? { src: src.url, alt: src.alt ?? "" } : null;
   }
-  const attachment = await (0, import_wp_media.getMediaAttachment)({ id: src.id });
+  const attachment = await (0, import_wp_media2.getMediaAttachment)({ id: src.id });
   const sizedAttachment = attachment?.sizes?.[size2 ?? ""];
   if (sizedAttachment) {
     return {
@@ -2224,47 +2293,6 @@ var plainTransformer = createTransformer((value) => {
   return value;
 });
 
-// src/transformers/shared/svg-src-transformer.ts
-var import_wp_media2 = require("@elementor/wp-media");
-async function fetchSvgContent(url, signal) {
-  try {
-    const response = await fetch(url, { signal });
-    if (!response.ok) {
-      return null;
-    }
-    const contentType = response.headers.get("content-type") ?? "";
-    const isSvg = contentType.includes("svg") || contentType.includes("xml") || url.endsWith(".svg");
-    if (!isSvg) {
-      return null;
-    }
-    return await response.text();
-  } catch {
-    return null;
-  }
-}
-function resolveSvgSrcId(id) {
-  if (typeof id !== "number" || id <= 0) {
-    return null;
-  }
-  return id;
-}
-var svgSrcTransformer = createTransformer(async (value, { signal }) => {
-  const id = resolveSvgSrcId(value.id);
-  const urlFromValue = typeof value.url === "string" ? value.url : null;
-  let url = urlFromValue;
-  if (id && !urlFromValue) {
-    const attachment = await (0, import_wp_media2.getMediaAttachment)({ id });
-    url = attachment?.url ?? null;
-  }
-  const resolvedUrl = typeof url === "string" ? url : null;
-  if (!resolvedUrl) {
-    return { html: null, url: null };
-  }
-  const svgText = await fetchSvgContent(resolvedUrl, signal);
-  const html = svgText ? processSvgContent(svgText) : null;
-  return { html, url: resolvedUrl };
-});
-
 // src/transformers/shared/video-src-transformer.ts
 var import_wp_media3 = require("@elementor/wp-media");
 var videoSrcTransformer = createTransformer(async (value) => {

package/dist/index.mjs

@@ -2062,6 +2062,8 @@ var timeRangeTransformer = createTransformer((value) => {
 // src/transformers/shared/icon-transformer.ts
 import {
   getFontAwesome7IconName,
+  isDeletedCustomIconLibrary,
+  resolveCustomIconSvg,
   resolveFontAwesome7Icon
 } from "@elementor/editor-controls";
 
@@ -2086,32 +2088,101 @@ function processSvgContent(svgText) {
   return svgElement.outerHTML;
 }
 
+// src/transformers/shared/svg-src-transformer.ts
+import { getMediaAttachment } from "@elementor/wp-media";
+async function fetchSvgContent(url, signal) {
+  try {
+    const response = await fetch(url, { signal });
+    if (!response.ok) {
+      return null;
+    }
+    const contentType = response.headers.get("content-type") ?? "";
+    const isSvg = contentType.includes("svg") || contentType.includes("xml") || url.endsWith(".svg");
+    if (!isSvg) {
+      return null;
+    }
+    return await response.text();
+  } catch {
+    return null;
+  }
+}
+function resolveSvgSrcId(id) {
+  if (typeof id !== "number" || id <= 0) {
+    return null;
+  }
+  return id;
+}
+var svgSrcTransformer = createTransformer(async (value, { signal }) => {
+  const id = resolveSvgSrcId(value.id);
+  const urlFromValue = typeof value.url === "string" ? value.url : null;
+  let url = urlFromValue;
+  if (id && !urlFromValue) {
+    const attachment = await getMediaAttachment({ id });
+    url = attachment?.url ?? null;
+  }
+  const resolvedUrl = typeof url === "string" ? url : null;
+  if (!resolvedUrl) {
+    return { html: null, url: null };
+  }
+  const svgText = await fetchSvgContent(resolvedUrl, signal);
+  const html = svgText ? processSvgContent(svgText) : null;
+  return { html, url: resolvedUrl };
+});
+
 // src/transformers/shared/icon-transformer.ts
 var EMPTY_ICON_RESULT = { html: null, url: null };
 var ICON_SVG_SIZE = "100%";
 var ICON_SVG_OVERFLOW = "visible";
+var DEFAULT_SVG_RELATIVE_PATH = "images/default-svg.svg";
 var iconTransformer = createTransformer(async (value, { signal }) => {
   const iconValue = typeof value.value === "string" ? value.value : null;
   const library = typeof value.library === "string" ? value.library : null;
   if (!iconValue || !library) {
     return EMPTY_ICON_RESULT;
   }
+  const fontAwesomeHtml = await resolveFontAwesomeSvg(library, iconValue, signal);
+  if (fontAwesomeHtml) {
+    return { html: fontAwesomeHtml, url: null };
+  }
+  if (isDeletedCustomIconLibrary(library, iconValue)) {
+    return resolveDefaultSvg(signal);
+  }
+  const customHtml = await resolveCustomSvg(library, iconValue, signal);
+  if (customHtml) {
+    return { html: customHtml, url: null };
+  }
+  return EMPTY_ICON_RESULT;
+});
+async function resolveDefaultSvg(signal) {
+  const assetsUrl = window.elementorCommon?.config?.urls?.assets;
+  if (typeof assetsUrl !== "string" || assetsUrl === "") {
+    return EMPTY_ICON_RESULT;
+  }
+  return svgSrcTransformer(
+    {
+      id: null,
+      url: `${assetsUrl}${DEFAULT_SVG_RELATIVE_PATH}`
+    },
+    { key: "svg", signal }
+  );
+}
+async function resolveCustomSvg(library, iconValue, signal) {
+  const markup = await resolveCustomIconSvg(library, iconValue, signal);
+  return markup ? processIconSvgContent(markup) : null;
+}
+async function resolveFontAwesomeSvg(library, iconValue, signal) {
   const iconName = getFontAwesome7IconName(iconValue);
   if (!iconName) {
-    return EMPTY_ICON_RESULT;
+    return null;
   }
   const iconData = await resolveFontAwesome7Icon(library, iconName, signal);
   if (!iconData) {
-    return EMPTY_ICON_RESULT;
-  }
-  const svgText = buildFontAwesomeSvg(iconData);
-  if (!svgText) {
-    return EMPTY_ICON_RESULT;
+    return null;
   }
-  const html = processIconSvgContent(svgText);
-  return { html, url: null };
-});
-function buildFontAwesomeSvg(iconData) {
+  const svgText = buildPathSvg(iconData);
+  return svgText ? processIconSvgContent(svgText) : null;
+}
+function buildPathSvg(iconData) {
   if (iconData.paths.length === 0) {
     return null;
   }
@@ -2147,13 +2218,13 @@ var imageSrcTransformer = createTransformer((value) => ({
 }));
 
 // src/transformers/shared/image-transformer.ts
-import { getMediaAttachment } from "@elementor/wp-media";
+import { getMediaAttachment as getMediaAttachment2 } from "@elementor/wp-media";
 var imageTransformer = createTransformer(async (value) => {
   const { src, size: size2 } = value;
   if (!src?.id) {
     return src?.url ? { src: src.url, alt: src.alt ?? "" } : null;
   }
-  const attachment = await getMediaAttachment({ id: src.id });
+  const attachment = await getMediaAttachment2({ id: src.id });
   const sizedAttachment = attachment?.sizes?.[size2 ?? ""];
   if (sizedAttachment) {
     return {
@@ -2179,47 +2250,6 @@ var plainTransformer = createTransformer((value) => {
   return value;
 });
 
-// src/transformers/shared/svg-src-transformer.ts
-import { getMediaAttachment as getMediaAttachment2 } from "@elementor/wp-media";
-async function fetchSvgContent(url, signal) {
-  try {
-    const response = await fetch(url, { signal });
-    if (!response.ok) {
-      return null;
-    }
-    const contentType = response.headers.get("content-type") ?? "";
-    const isSvg = contentType.includes("svg") || contentType.includes("xml") || url.endsWith(".svg");
-    if (!isSvg) {
-      return null;
-    }
-    return await response.text();
-  } catch {
-    return null;
-  }
-}
-function resolveSvgSrcId(id) {
-  if (typeof id !== "number" || id <= 0) {
-    return null;
-  }
-  return id;
-}
-var svgSrcTransformer = createTransformer(async (value, { signal }) => {
-  const id = resolveSvgSrcId(value.id);
-  const urlFromValue = typeof value.url === "string" ? value.url : null;
-  let url = urlFromValue;
-  if (id && !urlFromValue) {
-    const attachment = await getMediaAttachment2({ id });
-    url = attachment?.url ?? null;
-  }
-  const resolvedUrl = typeof url === "string" ? url : null;
-  if (!resolvedUrl) {
-    return { html: null, url: null };
-  }
-  const svgText = await fetchSvgContent(resolvedUrl, signal);
-  const html = svgText ? processSvgContent(svgText) : null;
-  return { html, url: resolvedUrl };
-});
-
 // src/transformers/shared/video-src-transformer.ts
 import { getMediaAttachment as getMediaAttachment3 } from "@elementor/wp-media";
 var videoSrcTransformer = createTransformer(async (value) => {

package/package.json

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

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

@@ -1,3 +1,9 @@
+jest.mock( '@elementor/http-client', () => ( {
+	httpService: () => ( {
+		get: jest.fn().mockRejectedValue( new Error( 'no custom svg' ) ),
+	} ),
+} ) );
+
 import { resetFontAwesome7IconsCache } from '@elementor/editor-controls';
 import { iconPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
 
@@ -41,6 +47,7 @@ async function resolveSavedIcon( iconClass: string, library: string ) {
 
 describe( 'iconTransformer', () => {
 	const originalElementorCommon = window.elementorCommon;
+	const originalElementor = window.elementor;
 
 	beforeEach( () => {
 		jest.clearAllMocks();
@@ -63,6 +70,7 @@ describe( 'iconTransformer', () => {
 
 	afterEach( () => {
 		window.elementorCommon = originalElementorCommon;
+		window.elementor = originalElementor;
 		jest.restoreAllMocks();
 	} );
 
@@ -178,6 +186,37 @@ describe( 'iconTransformer', () => {
 		expect( result ).toEqual( { html: null, url: null } );
 	} );
 
+	it( 'falls back to the default svg when a custom library has been deleted', async () => {
+		// Arrange.
+		window.elementor = {
+			config: {
+				icons: {
+					libraries: [ { name: 'fa-solid', prefix: 'fa-', native: true } ],
+				},
+			},
+		} as typeof window.elementor;
+		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( 'missing-set missing-set-ghost', 'missing-set' );
+
+		// Assert.
+		expect( global.fetch ).toHaveBeenCalledWith(
+			'https://example.com/assets/images/default-svg.svg',
+			expect.anything()
+		);
+		expect( result ).toEqual( {
+			html: expect.stringContaining( 'M24.9999 4.31543' ),
+			url: 'https://example.com/assets/images/default-svg.svg',
+		} );
+	} );
+
 	it( 'returns null html when value or library is missing', async () => {
 		// Act.
 		const resolve = createPropsResolver( {

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

@@ -1,16 +1,20 @@
 import {
 	type FontAwesome7IconDefinition,
 	getFontAwesome7IconName,
+	isDeletedCustomIconLibrary,
+	resolveCustomIconSvg,
 	resolveFontAwesome7Icon,
 } from '@elementor/editor-controls';
 
 import { createTransformer } from '../create-transformer';
 import type { TransformerOptions } from '../types';
 import { processSvgContent } from './process-svg-content';
+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 DEFAULT_SVG_RELATIVE_PATH = 'images/default-svg.svg';
 
 type IconValue = {
 	value?: unknown;
@@ -25,30 +29,70 @@ export const iconTransformer = createTransformer( async ( value: IconValue, { si
 		return EMPTY_ICON_RESULT;
 	}
 
-	const iconName = getFontAwesome7IconName( iconValue );
+	const fontAwesomeHtml = await resolveFontAwesomeSvg( library, iconValue, signal );
 
-	if ( ! iconName ) {
-		return EMPTY_ICON_RESULT;
+	if ( fontAwesomeHtml ) {
+		return { html: fontAwesomeHtml, url: null };
 	}
 
-	const iconData = await resolveFontAwesome7Icon( library, iconName, signal );
+	if ( isDeletedCustomIconLibrary( library, iconValue ) ) {
+		return resolveDefaultSvg( signal );
+	}
 
-	if ( ! iconData ) {
-		return EMPTY_ICON_RESULT;
+	const customHtml = await resolveCustomSvg( library, iconValue, signal );
+
+	if ( customHtml ) {
+		return { html: customHtml, url: null };
 	}
 
-	const svgText = buildFontAwesomeSvg( iconData );
+	return EMPTY_ICON_RESULT;
+} );
+
+async function resolveDefaultSvg( signal?: AbortSignal ) {
+	const assetsUrl = window.elementorCommon?.config?.urls?.assets;
 
-	if ( ! svgText ) {
+	if ( typeof assetsUrl !== 'string' || assetsUrl === '' ) {
 		return EMPTY_ICON_RESULT;
 	}
 
-	const html = processIconSvgContent( svgText );
+	return svgSrcTransformer(
+		{
+			id: null,
+			url: `${ assetsUrl }${ DEFAULT_SVG_RELATIVE_PATH }`,
+		},
+		{ key: 'svg', signal }
+	);
+}
 
-	return { html, url: null };
-} );
+async function resolveCustomSvg( library: string, iconValue: string, signal?: AbortSignal ): Promise< string | null > {
+	const markup = await resolveCustomIconSvg( library, iconValue, signal );
+
+	return markup ? processIconSvgContent( markup ) : null;
+}
+
+async function resolveFontAwesomeSvg(
+	library: string,
+	iconValue: string,
+	signal?: AbortSignal
+): Promise< string | null > {
+	const iconName = getFontAwesome7IconName( iconValue );
+
+	if ( ! iconName ) {
+		return null;
+	}
+
+	const iconData = await resolveFontAwesome7Icon( library, iconName, signal );
+
+	if ( ! iconData ) {
+		return null;
+	}
+
+	const svgText = buildPathSvg( iconData );
+
+	return svgText ? processIconSvgContent( svgText ) : null;
+}
 
-function buildFontAwesomeSvg( iconData: FontAwesome7IconDefinition ): string | null {
+function buildPathSvg( iconData: FontAwesome7IconDefinition ): string | null {
 	if ( iconData.paths.length === 0 ) {
 		return null;
 	}