@elementor/editor-canvas 4.3.0-999 → 4.3.0-beta2

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

@@ -0,0 +1,199 @@
+import { iconPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
+
+import { iconPropType } from '../../../__tests__/prop-types';
+import { initSettingsTransformers } from '../../../init-settings-transformers';
+import { createPropsResolver } from '../../../renderers/create-props-resolver';
+import { settingsTransformersRegistry } from '../../../settings-transformers-registry';
+import { resetFontAwesomeIconsCache } from '../icon-transformer';
+
+const STAR_PATH = 'M0 0h100v100H0z';
+const STAR_WIDTH = 576;
+const STAR_HEIGHT = 512;
+
+const mockFetch = ( body: unknown, ok = true ) => {
+	global.fetch = jest.fn().mockResolvedValue( {
+		ok,
+		json: () => Promise.resolve( body ),
+	} );
+};
+
+function createSavedIcon( iconClass: string, library: string ) {
+	return iconPropTypeUtil.create( {
+		value: stringPropTypeUtil.create( iconClass ),
+		library: stringPropTypeUtil.create( library ),
+	} );
+}
+
+async function resolveSavedIcon( iconClass: string, library: string ) {
+	const resolve = createPropsResolver( {
+		transformers: settingsTransformersRegistry,
+		schema: { svg: iconPropType() },
+	} );
+
+	const result = await resolve( {
+		props: {
+			svg: createSavedIcon( iconClass, library ),
+		},
+	} );
+
+	return result.svg;
+}
+
+describe( 'iconTransformer', () => {
+	const originalElementorCommon = window.elementorCommon;
+
+	beforeEach( () => {
+		jest.clearAllMocks();
+		resetFontAwesomeIconsCache();
+		initSettingsTransformers();
+		window.elementorCommon = {
+			config: {
+				urls: {
+					assets: 'https://example.com/assets/',
+				},
+				fontAwesome: {
+					v7: {
+						jsonFiles: [ 'solid', 'regular', 'brands' ],
+						jsonBaseUrl: 'https://example.com/assets/lib/font-awesome-7/json/',
+					},
+				},
+			},
+		};
+	} );
+
+	afterEach( () => {
+		window.elementorCommon = originalElementorCommon;
+		jest.restoreAllMocks();
+	} );
+
+	it( 'returns processed inline svg for a font awesome icon', async () => {
+		// Arrange.
+		mockFetch( {
+			icons: {
+				star: [ STAR_WIDTH, STAR_HEIGHT, [], 'f005', STAR_PATH ],
+			},
+		} );
+
+		// Act.
+		const result = await resolveSavedIcon( 'fas fa-star', 'fa-solid' );
+
+		// Assert.
+		expect( global.fetch ).toHaveBeenCalledWith( 'https://example.com/assets/lib/font-awesome-7/json/solid.json', {
+			signal: undefined,
+		} );
+		expect( result ).toEqual( {
+			html: expect.stringContaining( STAR_PATH ),
+			url: null,
+		} );
+		expect( ( result as { html: string } ).html ).toContain( 'fill="currentColor"' );
+		expect( ( result as { html: string } ).html ).toContain( `viewBox="0 0 ${ STAR_WIDTH } ${ STAR_HEIGHT }"` );
+		expect( ( result as { html: string } ).html ).toContain( 'aria-hidden="true"' );
+		expect( ( result as { html: string } ).html ).toContain( 'overflow: visible' );
+	} );
+
+	it( 'resolves icons by alias name', async () => {
+		// Arrange.
+		mockFetch( {
+			icons: {
+				headphones: [ 448, 512, [ 'headphones-simple' ], 'f025', 'M0 0' ],
+			},
+		} );
+
+		// Act.
+		const result = await resolveSavedIcon( 'fas fa-headphones-simple', 'fa-solid' );
+
+		// Assert.
+		expect( result ).toEqual( {
+			html: expect.stringContaining( 'M0 0' ),
+			url: null,
+		} );
+	} );
+
+	it( 'renders multiple paths when the icon definition contains an array', async () => {
+		// Arrange.
+		mockFetch( {
+			icons: {
+				slash: [ 640, 640, [], 'f715', [ 'M0 0', 'M10 10' ] ],
+			},
+		} );
+
+		// Act.
+		const result = await resolveSavedIcon( 'fas fa-slash', 'fa-solid' );
+
+		// Assert.
+		const html = ( result as { html: string } ).html;
+		expect( html.match( /<path/g ) ).toHaveLength( 2 );
+		expect( html ).toContain( 'M0 0' );
+		expect( html ).toContain( 'M10 10' );
+	} );
+
+	it( 'returns null html when the icon cannot be resolved', async () => {
+		// Arrange.
+		mockFetch( { icons: {} } );
+
+		// Act.
+		const result = await resolveSavedIcon( 'fas fa-missing', 'fa-solid' );
+
+		// Assert.
+		expect( result ).toEqual( { html: null, url: null } );
+	} );
+
+	it( 'fetches json from the localized font awesome 7 base url', async () => {
+		// Arrange.
+		const jsonBaseUrl = 'https://cdn.example.com/fa7/json/';
+		window.elementorCommon = {
+			config: {
+				fontAwesome: {
+					v7: {
+						jsonFiles: [ 'solid', 'regular', 'brands' ],
+						jsonBaseUrl,
+					},
+				},
+			},
+		};
+		mockFetch( {
+			icons: {
+				star: [ STAR_WIDTH, STAR_HEIGHT, [], 'f005', STAR_PATH ],
+			},
+		} );
+
+		// Act.
+		await resolveSavedIcon( 'fas fa-star', 'fa-solid' );
+
+		// Assert.
+		expect( global.fetch ).toHaveBeenCalledWith( `${ jsonBaseUrl }solid.json`, {
+			signal: undefined,
+		} );
+	} );
+
+	it( 'does not fetch json when library is not an allowed fa7 file', async () => {
+		// Arrange.
+		mockFetch( { icons: {} } );
+
+		// Act.
+		const result = await resolveSavedIcon( 'fas fa-star', 'fa-../../wp-config' );
+
+		// Assert.
+		expect( global.fetch ).not.toHaveBeenCalled();
+		expect( result ).toEqual( { html: null, url: null } );
+	} );
+
+	it( 'returns null html when value or library is missing', async () => {
+		// Act.
+		const resolve = createPropsResolver( {
+			transformers: settingsTransformersRegistry,
+			schema: { svg: iconPropType() },
+		} );
+		const result = await resolve( {
+			props: {
+				svg: iconPropTypeUtil.create( {
+					value: stringPropTypeUtil.create( 'fas fa-star' ),
+					library: stringPropTypeUtil.create( '' ),
+				} ),
+			},
+		} );
+
+		// Assert.
+		expect( result.svg ).toEqual( { html: null, url: null } );
+	} );
+} );

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

@@ -0,0 +1,231 @@
+import { createTransformer } from '../create-transformer';
+import type { TransformerOptions } from '../types';
+import { processSvgContent } from './process-svg-content';
+
+type IconValue = {
+	value?: unknown;
+	library?: unknown;
+};
+
+type FontAwesomeIconJson = [ number, number, unknown[], unknown, string | string[] ];
+
+type FontAwesome7EditorConfig = {
+	jsonFiles: string[];
+	jsonBaseUrl: string;
+};
+
+const FONT_AWESOME_JSON = {
+	width: 0,
+	height: 1,
+	aliases: 2,
+	unicode: 3,
+	path: 4,
+} as const;
+
+const fontAwesomeJsonCache = new Map< string, Record< string, FontAwesomeIconJson > >();
+
+export const iconTransformer = createTransformer( async ( value: IconValue, { signal }: TransformerOptions ) => {
+	const iconValue = typeof value.value === 'string' ? value.value : null;
+	const library = typeof value.library === 'string' ? value.library : null;
+
+	if ( ! iconValue || ! library ) {
+		return { html: null, url: null };
+	}
+
+	const iconName = getFontAwesomeIconName( iconValue );
+	const jsonFileName = getFontAwesomeJsonFileName( library );
+
+	if ( ! iconName || ! jsonFileName ) {
+		return { html: null, url: null };
+	}
+
+	const icons = await fetchFontAwesomeIcons( jsonFileName, signal );
+	const iconData = icons?.[ iconName ];
+
+	if ( ! iconData ) {
+		return { html: null, url: null };
+	}
+
+	const svgText = buildFontAwesomeSvg( iconData );
+
+	if ( ! svgText ) {
+		return { html: null, url: null };
+	}
+
+	const html = processIconSvgContent( svgText );
+
+	return { html, url: null };
+} );
+
+function getFontAwesomeIconName( iconValue: string ): string | null {
+	const match = iconValue.match( /^fa\S*\s+fa-(.+)$/ );
+
+	return match?.[ 1 ] ?? null;
+}
+
+function getFontAwesomeJsonFileName( library: string ): string | null {
+	const fileName = library.replace( /^fa-/, '' );
+	const config = getFontAwesome7EditorConfig();
+
+	if ( ! config?.jsonFiles.includes( fileName ) ) {
+		return null;
+	}
+
+	return fileName;
+}
+
+function getFontAwesome7EditorConfig(): FontAwesome7EditorConfig | null {
+	const config = window.elementorCommon?.config?.fontAwesome?.v7;
+
+	if (
+		! config ||
+		! Array.isArray( config.jsonFiles ) ||
+		typeof config.jsonBaseUrl !== 'string' ||
+		config.jsonBaseUrl === ''
+	) {
+		return null;
+	}
+
+	return {
+		jsonFiles: config.jsonFiles,
+		jsonBaseUrl: config.jsonBaseUrl,
+	};
+}
+
+async function fetchFontAwesomeIcons(
+	jsonFileName: string,
+	signal?: AbortSignal
+): Promise< Record< string, FontAwesomeIconJson > | null > {
+	const cached = fontAwesomeJsonCache.get( jsonFileName );
+
+	if ( cached ) {
+		return cached;
+	}
+
+	const icons = await loadFontAwesomeIcons( jsonFileName, signal );
+
+	if ( icons ) {
+		fontAwesomeJsonCache.set( jsonFileName, icons );
+	}
+
+	return icons;
+}
+
+async function loadFontAwesomeIcons(
+	jsonFileName: string,
+	signal?: AbortSignal
+): Promise< Record< string, FontAwesomeIconJson > | null > {
+	const config = getFontAwesome7EditorConfig();
+
+	if ( ! config?.jsonFiles.includes( jsonFileName ) ) {
+		return null;
+	}
+
+	try {
+		const response = await fetch( `${ config.jsonBaseUrl }${ jsonFileName }.json`, {
+			signal,
+		} );
+
+		if ( ! response.ok ) {
+			return null;
+		}
+
+		const data = ( await response.json() ) as { icons?: Record< string, FontAwesomeIconJson > };
+		const icons = data.icons;
+
+		if ( ! icons || typeof icons !== 'object' ) {
+			return null;
+		}
+
+		return indexFontAwesomeIcons( icons );
+	} catch {
+		return null;
+	}
+}
+
+function indexFontAwesomeIcons( icons: Record< string, FontAwesomeIconJson > ): Record< string, FontAwesomeIconJson > {
+	const index: Record< string, FontAwesomeIconJson > = {};
+
+	for ( const [ name, iconData ] of Object.entries( icons ) ) {
+		if ( ! isValidIconTuple( iconData ) ) {
+			continue;
+		}
+
+		index[ name ] = iconData;
+
+		for ( const alias of iconData[ FONT_AWESOME_JSON.aliases ] ) {
+			if ( typeof alias === 'string' && alias !== '' && ! index[ alias ] ) {
+				index[ alias ] = iconData;
+			}
+		}
+	}
+
+	return index;
+}
+
+function isValidIconTuple( iconData: unknown ): iconData is FontAwesomeIconJson {
+	return (
+		Array.isArray( iconData ) &&
+		iconData.length >= 5 &&
+		typeof iconData[ FONT_AWESOME_JSON.width ] === 'number' &&
+		typeof iconData[ FONT_AWESOME_JSON.height ] === 'number' &&
+		Array.isArray( iconData[ FONT_AWESOME_JSON.aliases ] )
+	);
+}
+
+function buildFontAwesomeSvg( iconData: FontAwesomeIconJson ): string | null {
+	const width = iconData[ FONT_AWESOME_JSON.width ];
+	const height = iconData[ FONT_AWESOME_JSON.height ];
+	const paths = normalizePaths( iconData[ FONT_AWESOME_JSON.path ] );
+
+	if ( paths.length === 0 ) {
+		return null;
+	}
+
+	const pathMarkup = paths.map( ( path ) => `<path d="${ escapeSvgPath( path ) }"></path>` ).join( '' );
+
+	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${ width } ${ height }">${ pathMarkup }</svg>`;
+}
+
+function normalizePaths( pathData: string | string[] ): string[] {
+	if ( typeof pathData === 'string' && pathData !== '' ) {
+		return [ pathData ];
+	}
+
+	if ( ! Array.isArray( pathData ) ) {
+		return [];
+	}
+
+	return pathData.filter( ( path ): path is string => typeof path === 'string' && path !== '' );
+}
+
+function escapeSvgPath( path: string ): string {
+	return path.replace( /&/g, '&amp;' ).replace( /"/g, '&quot;' ).replace( /</g, '&lt;' ).replace( />/g, '&gt;' );
+}
+
+function processIconSvgContent( svgText: string ): string | null {
+	const html = processSvgContent( svgText );
+
+	if ( ! html ) {
+		return null;
+	}
+
+	const parser = new DOMParser();
+	const doc = parser.parseFromString( html, 'image/svg+xml' );
+	const svgElement = doc.querySelector( 'svg' );
+
+	if ( ! svgElement ) {
+		return null;
+	}
+
+	svgElement.setAttribute( 'aria-hidden', 'true' );
+	svgElement.style.setProperty( 'width', '100%' );
+	svgElement.style.setProperty( 'height', '100%' );
+	svgElement.style.setProperty( 'overflow', 'visible' );
+
+	return svgElement.outerHTML;
+}
+
+export function resetFontAwesomeIconsCache() {
+	fontAwesomeJsonCache.clear();
+}

package/src/transformers/shared/process-svg-content.ts

@@ -0,0 +1,26 @@
+import DOMPurify from 'dompurify';
+
+const SVG_INLINE_STYLES = 'width: 100%; height: 100%; overflow: unset;';
+
+export function processSvgContent( svgText: string ): string | null {
+	const sanitized = DOMPurify.sanitize( svgText, {
+		USE_PROFILES: { svg: true, svgFilters: true },
+	} );
+
+	const parser = new DOMParser();
+	const doc = parser.parseFromString( sanitized, 'image/svg+xml' );
+	const svgElement = doc.querySelector( 'svg' );
+
+	if ( ! svgElement ) {
+		return null;
+	}
+
+	svgElement.setAttribute( 'fill', 'currentColor' );
+
+	const existingStyle = svgElement.getAttribute( 'style' ) ?? '';
+	const trimmed = existingStyle.trim();
+	const merged = trimmed ? `${ trimmed.replace( /;$/, '' ) }; ${ SVG_INLINE_STYLES }` : SVG_INLINE_STYLES;
+	svgElement.setAttribute( 'style', merged );
+
+	return svgElement.outerHTML;
+}

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

@@ -1,39 +1,14 @@
-import DOMPurify from 'dompurify';
 import { getMediaAttachment } from '@elementor/wp-media';
 
 import { createTransformer } from '../create-transformer';
 import type { TransformerOptions } from '../types';
+import { processSvgContent } from './process-svg-content';
 
 type SvgSrc = {
 	id?: unknown;
 	url?: unknown;
 };
 
-const SVG_INLINE_STYLES = 'width: 100%; height: 100%; overflow: unset;';
-
-function processSvgContent( svgText: string ): string | null {
-	const sanitized = DOMPurify.sanitize( svgText, {
-		USE_PROFILES: { svg: true, svgFilters: true },
-	} );
-
-	const parser = new DOMParser();
-	const doc = parser.parseFromString( sanitized, 'image/svg+xml' );
-	const svgElement = doc.querySelector( 'svg' );
-
-	if ( ! svgElement ) {
-		return null;
-	}
-
-	svgElement.setAttribute( 'fill', 'currentColor' );
-
-	const existingStyle = svgElement.getAttribute( 'style' ) ?? '';
-	const trimmed = existingStyle.trim();
-	const merged = trimmed ? `${ trimmed.replace( /;$/, '' ) }; ${ SVG_INLINE_STYLES }` : SVG_INLINE_STYLES;
-	svgElement.setAttribute( 'style', merged );
-
-	return svgElement.outerHTML;
-}
-
 async function fetchSvgContent( url: string, signal?: AbortSignal ): Promise< string | null > {
 	try {
 		const response = await fetch( url, { signal } );

package/src/transformers/styles/flex-transformer.ts

@@ -6,6 +6,13 @@ type Flex = {
 	flexBasis?: { size: number; unit: string } | string | null;
 };
 
+const DEFAULT_FLEX_GROW = 0;
+const DEFAULT_FLEX_SHRINK = 1;
+const DEFAULT_FLEX_BASIS = 'auto';
+
+const formatBasis = ( basis: NonNullable< Flex[ 'flexBasis' ] > ) =>
+	typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis;
+
 export const flexTransformer = createTransformer( ( value: Flex ) => {
 	const grow = value.flexGrow;
 	const shrink = value.flexShrink;
@@ -19,37 +26,9 @@ export const flexTransformer = createTransformer( ( value: Flex ) => {
 		return null;
 	}
 
-	if ( hasGrow && hasShrink && hasBasis ) {
-		return `${ grow } ${ shrink } ${
-			typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis
-		}`;
-	}
-
-	if ( hasGrow && hasShrink && ! hasBasis ) {
-		return `${ grow } ${ shrink }`;
-	}
-	if ( hasGrow && ! hasShrink && hasBasis ) {
-		return `${ grow } 1 ${
-			typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis
-		}`;
-	}
-	if ( ! hasGrow && hasShrink && hasBasis ) {
-		return `0 ${ shrink } ${
-			typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis
-		}`;
-	}
-
-	if ( hasGrow && ! hasShrink && ! hasBasis ) {
-		return `${ grow }`;
-	}
-	if ( ! hasGrow && hasShrink && ! hasBasis ) {
-		return `0 ${ shrink }`;
-	}
-	if ( ! hasGrow && ! hasShrink && hasBasis ) {
-		return `0 1 ${
-			typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis
-		}`;
-	}
+	const growOut = hasGrow ? grow : DEFAULT_FLEX_GROW;
+	const shrinkOut = hasShrink ? shrink : DEFAULT_FLEX_SHRINK;
+	const basisOut = hasBasis ? formatBasis( basis ) : DEFAULT_FLEX_BASIS;
 
-	return null;
+	return `${ growOut } ${ shrinkOut } ${ basisOut }`;
 } );

package/src/utils/__tests__/sanitize-escaped-html.test.ts

@@ -0,0 +1,105 @@
+import { sanitizeEscapedHtml } from '../sanitize-escaped-html';
+
+const TEST_ALLOWED_HTML_WRAPPER_TAGS = [ 'a', 'div', 'span', 'strong' ];
+
+describe( 'sanitizeEscapedHtml', () => {
+	beforeEach( () => {
+		window.elementorCommon = {
+			config: {
+				allowedHTMLWrapperTags: TEST_ALLOWED_HTML_WRAPPER_TAGS,
+			},
+		};
+	} );
+
+	afterEach( () => {
+		delete window.elementorCommon;
+	} );
+
+	it( 'returns an empty string for nullish values', () => {
+		// Arrange & Act & Assert.
+		expect( sanitizeEscapedHtml( null ) ).toBe( '' );
+		expect( sanitizeEscapedHtml( '' ) ).toBe( '' );
+	} );
+
+	it( 'keeps allowed tags and strips disallowed tags', () => {
+		// Arrange.
+		const value = 'Hello <script>alert(1)</script><strong>world</strong>';
+
+		// Act.
+		const result = sanitizeEscapedHtml( value );
+
+		// Assert.
+		expect( result ).toBe( 'Hello <strong>world</strong>' );
+	} );
+
+	it( 'fails closed when the localized allowlist is missing', () => {
+		// Arrange.
+		delete window.elementorCommon;
+		const value = '<strong>world</strong>';
+
+		// Act.
+		const result = sanitizeEscapedHtml( value );
+
+		// Assert.
+		expect( result ).toBe( 'world' );
+	} );
+
+	it( 'strips javascript href from links', () => {
+		// Arrange.
+		const value = '<a href="javascript:alert(1)">click</a>';
+
+		// Act.
+		const result = sanitizeEscapedHtml( value );
+
+		// Assert.
+		expect( result ).not.toContain( 'javascript:' );
+		expect( result ).toContain( 'click' );
+	} );
+
+	it( 'strips data href from links', () => {
+		// Arrange.
+		const value = '<a href="data:text/html,<script>alert(1)</script>">click</a>';
+
+		// Act.
+		const result = sanitizeEscapedHtml( value );
+
+		// Assert.
+		expect( result ).not.toMatch( /<a\s+href=/i );
+		expect( result ).toContain( 'click' );
+	} );
+
+	it( 'preserves non-operational attributes', () => {
+		// Arrange.
+		const value =
+			'<span id="e-1" class="foo bar" style="color: red;" title="t" lang="en" dir="ltr" role="text" data-x="1" aria-label="label">world</span>';
+
+		// Act.
+		const result = sanitizeEscapedHtml( value );
+
+		// Assert.
+		expect( result ).toContain( 'id="e-1"' );
+		expect( result ).toContain( 'class="foo bar"' );
+		expect( result ).toContain( 'style="color: red;"' );
+		expect( result ).toContain( 'title="t"' );
+		expect( result ).toContain( 'lang="en"' );
+		expect( result ).toContain( 'dir="ltr"' );
+		expect( result ).toContain( 'role="text"' );
+		expect( result ).toContain( 'data-x="1"' );
+		expect( result ).toContain( 'aria-label="label"' );
+		expect( result ).toContain( 'world' );
+	} );
+
+	it( 'strips functional event-handler attributes', () => {
+		// Arrange.
+		const value = '<span id="e-1" onclick="evil()" onmouseover="evil()">world</span>';
+
+		// Act.
+		const result = sanitizeEscapedHtml( value );
+
+		// Assert.
+		expect( result ).toContain( 'id="e-1"' );
+		expect( result ).not.toContain( 'onclick' );
+		expect( result ).not.toContain( 'onmouseover' );
+		expect( result ).toContain( 'world' );
+	} );
+} );

package/src/utils/sanitize-escaped-html.ts

@@ -0,0 +1,32 @@
+import DOMPurify from 'dompurify';
+
+const ALLOWED_NON_OPERATIONAL_ATTRS = [
+	'href',
+	'target',
+	'class',
+	'id',
+	'style',
+	'title',
+	'lang',
+	'dir',
+	'role',
+] as const;
+
+function getAllowedHtmlWrapperTags(): readonly string[] {
+	return window.elementorCommon?.config?.allowedHTMLWrapperTags ?? [];
+}
+
+export function sanitizeEscapedHtml( value: string | null ): string {
+	if ( ! value ) {
+		return '';
+	}
+
+	const allowedTags = [ ...getAllowedHtmlWrapperTags() ];
+
+	return DOMPurify.sanitize( value, {
+		ALLOWED_TAGS: allowedTags,
+		ALLOWED_ATTR: [ ...ALLOWED_NON_OPERATIONAL_ATTRS ],
+		ALLOW_DATA_ATTR: true,
+		ALLOW_ARIA_ATTR: true,
+	} );
+}