@elementor/editor-canvas 4.0.0 → 4.0.1

package/src/init-settings-transformers.ts

@@ -9,6 +9,7 @@ import { queryTransformer } from './transformers/settings/query-transformer';
 import { imageSrcTransformer } from './transformers/shared/image-src-transformer';
 import { imageTransformer } from './transformers/shared/image-transformer';
 import { plainTransformer } from './transformers/shared/plain-transformer';
+import { svgSrcTransformer } from './transformers/shared/svg-src-transformer';
 import { videoSrcTransformer } from './transformers/shared/video-src-transformer';
 
 export function initSettingsTransformers() {
@@ -18,6 +19,7 @@ export function initSettingsTransformers() {
 		.register( 'query', queryTransformer )
 		.register( 'image', imageTransformer )
 		.register( 'image-src', imageSrcTransformer )
+		.register( 'svg-src', svgSrcTransformer )
 		.register( 'video-src', videoSrcTransformer )
 		.register( 'attributes', attributesTransformer )
 		.register( 'date-time', dateTimeTransformer )

package/src/legacy/replacements/base.ts

@@ -26,6 +26,8 @@ export class ReplacementBase implements ReplacementBaseInterface {
 	protected type: ReplacementSettings[ 'type' ];
 	protected id: ReplacementSettings[ 'id' ];
 	protected refreshView: ReplacementSettings[ 'refreshView' ];
+	protected reactRoot: ReplacementSettings[ 'reactRoot' ];
+	protected reactContainer: ReplacementSettings[ 'reactContainer' ];
 
 	constructor( settings: ReplacementSettings ) {
 		this.getSetting = settings.getSetting;
@@ -34,6 +36,8 @@ export class ReplacementBase implements ReplacementBaseInterface {
 		this.type = settings.type;
 		this.id = settings.id;
 		this.refreshView = settings.refreshView;
+		this.reactRoot = settings.reactRoot;
+		this.reactContainer = settings.reactContainer;
 	}
 
 	static getTypes(): string[] | null {

package/src/legacy/replacements/inline-editing/canvas-inline-editor.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEffect, useLayoutEffect, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import { InlineEditor, InlineEditorToolbar } from '@elementor/editor-controls';
 import { Box, ThemeProvider } from '@elementor/ui';
 import { autoUpdate, flip, FloatingPortal, useFloating } from '@floating-ui/react';
@@ -9,68 +9,83 @@ import {
 	type Editor,
 	getInlineEditorElement,
 	horizontalShifterMiddleware as horizontalShifter,
-	removeToolbarAnchor,
 	useOnClickOutsideIframe,
 	useRenderToolbar,
 } from './inline-editing-utils';
 
-const EDITOR_WRAPPER_SELECTOR = 'inline-editor-wrapper';
-
 export const CanvasInlineEditor = ( {
 	elementClasses,
 	initialValue,
 	expectedTag,
 	rootElement,
+	contentElement,
 	id,
 	setValue,
-	...props
+	requestDestroy,
 }: {
 	elementClasses: string;
 	initialValue: string | null;
 	expectedTag: string | null;
 	rootElement: HTMLElement;
+	contentElement: HTMLElement;
 	id: string;
 	setValue: ( value: string | null ) => void;
-	onBlur: () => void;
+	requestDestroy: () => void;
 } ) => {
+	const [ active, setActive ] = useState( true );
 	const [ editor, setEditor ] = useState< Editor | null >( null );
-	const { onSelectionEnd, anchor: toolbarAnchor } = useRenderToolbar( rootElement.ownerDocument, id );
+	const { onSelectionEnd, anchor: toolbarAnchor, clearAnchor } = useRenderToolbar( rootElement.ownerDocument, id );
+
+	useEffect( () => {
+		if ( ! active ) {
+			clearAnchor();
+			requestDestroy();
+		}
+	}, [ active, clearAnchor, requestDestroy ] );
+
+	const dismiss = useCallback( () => {
+		setEditor( null );
+		setActive( false );
+	}, [] );
 
-	const onBlur = () => {
-		removeToolbarAnchor( rootElement.ownerDocument, id );
+	useOnClickOutsideIframe( dismiss );
 
-		props.onBlur();
-	};
+	useEffect( () => {
+		const ownerDocument = contentElement.ownerDocument;
+
+		const handleClickAway = ( event: MouseEvent ) => {
+			if ( contentElement.contains( event.target as Node ) ) {
+				return;
+			}
 
-	useOnClickOutsideIframe( onBlur );
+			dismiss();
+		};
+
+		ownerDocument.addEventListener( 'mousedown', handleClickAway );
+
+		return () => ownerDocument.removeEventListener( 'mousedown', handleClickAway );
+	}, [ contentElement, dismiss ] );
+
+	if ( ! active ) {
+		return null;
+	}
 
 	return (
 		<ThemeProvider>
 			<InlineEditingOverlay expectedTag={ expectedTag } rootElement={ rootElement } id={ id } />
-			<style>
-				{ `
-			.ProseMirror > * {
-				height: 100%;
-			}
-			.${ EDITOR_WRAPPER_SELECTOR } .ProseMirror > button[contenteditable="true"] {
-				height: auto;
-				cursor: text;
-			}
-			` }
-			</style>
 			<InlineEditor
 				onEditorCreate={ setEditor }
+				mountElement={ contentElement }
 				editorProps={ {
 					attributes: {
-						style: 'outline: none;overflow-wrap: normal;height:100%',
+						style: 'outline: none; display: inherit; justify-content: inherit; align-items: inherit; flex-direction: inherit; text-align: inherit;',
 					},
 				} }
 				elementClasses={ elementClasses }
 				value={ initialValue }
 				setValue={ setValue }
-				onBlur={ onBlur }
+				onBlur={ dismiss }
 				autofocus
-				expectedTag={ expectedTag }
 				onSelectionEnd={ onSelectionEnd }
 			/>
 			{ toolbarAnchor && editor && <InlineEditingToolbar anchor={ toolbarAnchor } editor={ editor } id={ id } /> }
@@ -114,7 +129,14 @@ const InlineEditingToolbar = ( { anchor, editor, id }: { anchor: HTMLElement; ed
 
 	return (
 		<FloatingPortal id={ CANVAS_WRAPPER_ID }>
-			<Box ref={ refs.setFloating } role="presentation" style={ { ...floatingStyles, pointerEvents: 'none' } }>
+			<Box
+				ref={ refs.setFloating }
+				role="presentation"
+				style={ {
+					...floatingStyles,
+					pointerEvents: 'none',
+				} }
+			>
 				<InlineEditorToolbar editor={ editor } elementId={ id } />
 			</Box>
 		</FloatingPortal>

package/src/legacy/replacements/inline-editing/inline-editing-elements.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { createRoot, type Root } from 'react-dom/client';
 import { getContainer, getElementLabel, getElementType } from '@elementor/editor-elements';
 import {
 	htmlV3PropTypeUtil,
@@ -25,8 +24,8 @@ type TagPropType = PropType< 'tag' > & {
 const HISTORY_DEBOUNCE_WAIT = 800;
 
 export default class InlineEditingReplacement extends ReplacementBase {
-	private inlineEditorRoot: Root | null = null;
 	private handlerAttached = false;
+	private editing = false;
 
 	getReplacementKey() {
 		return 'inline-editing';
@@ -37,7 +36,7 @@ export default class InlineEditingReplacement extends ReplacementBase {
 	}
 
 	isEditingModeActive() {
-		return !! this.inlineEditorRoot;
+		return this.editing;
 	}
 
 	shouldRenderReplacement() {
@@ -91,8 +90,8 @@ export default class InlineEditingReplacement extends ReplacementBase {
 	resetInlineEditorRoot() {
 		this.element.removeEventListener( 'click', this.handleRenderInlineEditor );
 		this.handlerAttached = false;
-		this.inlineEditorRoot?.unmount?.();
-		this.inlineEditorRoot = null;
+		this.reactRoot.render( null );
+		this.editing = false;
 	}
 
 	unmountInlineEditor() {
@@ -239,22 +238,29 @@ export default class InlineEditingReplacement extends ReplacementBase {
 			this.resetInlineEditorRoot();
 		}
 
-		const elementClasses = this.element.children?.[ 0 ]?.classList.toString() ?? '';
+		const contentElement = this.element.children?.[ 0 ] as HTMLElement | undefined;
+
+		if ( ! contentElement ) {
+			return;
+		}
+
+		const elementClasses = contentElement.classList.toString();
 		const propValue = this.getExtractedContentValue();
 		const expectedTag = this.getExpectedTag();
 
-		this.element.innerHTML = '';
+		contentElement.innerHTML = '';
+		this.editing = true;
 
-		this.inlineEditorRoot = createRoot( this.element );
-		this.inlineEditorRoot.render(
+		this.reactRoot.render(
 			<CanvasInlineEditor
 				elementClasses={ elementClasses }
 				initialValue={ propValue }
 				expectedTag={ expectedTag }
 				rootElement={ this.element }
+				contentElement={ contentElement }
 				id={ this.id }
 				setValue={ this.setContentValue.bind( this ) }
-				onBlur={ this.unmountInlineEditor.bind( this ) }
+				requestDestroy={ this.unmountInlineEditor.bind( this ) }
 			/>
 		);
 	}

package/src/legacy/replacements/inline-editing/inline-editing-utils.ts

@@ -43,6 +43,7 @@ export const INLINE_EDITING_PROPERTY_PER_TYPE: Record< string, string > = {
 	'e-form-label': 'text',
 	'e-heading': 'title',
 	'e-paragraph': 'paragraph',
+	'e-form-submit-button': 'text',
 };
 
 export const legacyWindow = window as unknown as LegacyWindow;
@@ -79,6 +80,12 @@ export const useOnClickOutsideIframe = ( handleUnmount: () => void ) => {
 export const useRenderToolbar = ( ownerDocument: Document, id: string ) => {
 	const [ anchor, setAnchor ] = useState< HTMLElement | null >( null );
 
+	useEffect( () => {
+		if ( ! anchor ) {
+			removeToolbarAnchor( ownerDocument, id );
+		}
+	}, [ anchor, ownerDocument, id ] );
+
 	const onSelectionEnd = ( view: EditorView ) => {
 		const hasSelection = ! view.state.selection.empty;
 
@@ -91,7 +98,11 @@ export const useRenderToolbar = ( ownerDocument: Document, id: string ) => {
 		}
 	};
 
-	return { onSelectionEnd, anchor };
+	const clearAnchor = useCallback( () => {
+		setAnchor( null );
+	}, [] );
+
+	return { onSelectionEnd, anchor, clearAnchor };
 };
 
 const createAnchorBasedOnSelection = ( ownerDocument: Document, id: string ): HTMLElement | null => {

package/src/legacy/replacements/manager.ts

@@ -1,3 +1,5 @@
+import { createRoot, type Root } from 'react-dom/client';
+
 import type { CreateTemplatedElementTypeOptions } from '../create-templated-element-type';
 import { createTemplatedElementView } from '../create-templated-element-type';
 import type { ElementType, ElementView, LegacyWindow, ReplacementSettings } from '../types';
@@ -34,11 +36,18 @@ export const createViewWithReplacements = ( options: CreateTemplatedElementTypeO
 	return class extends TemplatedView {
 		#replacement: ReplacementBaseInterface | null = null;
 		#config: ReplacementSettings;
+		#reactContainer: HTMLElement;
+		#reactRoot: Root;
 
 		constructor( ...args: unknown[] ) {
 			super( ...args );
 			const settings = this.model.get( 'settings' );
 
+			this.#reactContainer = this.el.ownerDocument.createElement( 'div' );
+			this.#reactContainer.style.display = 'none';
+			this.el.ownerDocument.body.appendChild( this.#reactContainer );
+			this.#reactRoot = createRoot( this.#reactContainer );
+
 			this.#config = {
 				getSetting: settings.get.bind( settings ),
 				setSetting: settings.set.bind( settings ),
@@ -46,6 +55,8 @@ export const createViewWithReplacements = ( options: CreateTemplatedElementTypeO
 				type: this?.model?.get( 'widgetType' ) ?? this.container?.model?.get( 'elType' ) ?? null,
 				id: this?.model?.get( 'id' ) ?? null,
 				refreshView: this.refreshView.bind( this ),
+				reactRoot: this.#reactRoot,
+				reactContainer: this.#reactContainer,
 			};
 		}
 
@@ -72,6 +83,8 @@ export const createViewWithReplacements = ( options: CreateTemplatedElementTypeO
 
 		onDestroy() {
 			this.#triggerAltMethod( 'onDestroy' );
+			this.#reactRoot.unmount();
+			this.#reactContainer.remove();
 		}
 
 		_afterRender() {

package/src/legacy/types.ts

@@ -1,3 +1,4 @@
+import { type Root } from 'react-dom/client';
 import { type V1Element } from '@elementor/editor-elements';
 import { type Props, type PropValue } from '@elementor/editor-props';
 
@@ -241,4 +242,6 @@ export type ReplacementSettings = {
 	id: string;
 	element: HTMLElement;
 	refreshView: () => void;
+	reactRoot: Root;
+	reactContainer: HTMLElement;
 };

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

@@ -0,0 +1,184 @@
+import { getMediaAttachment } from '@elementor/wp-media';
+
+import { svgSrcTransformer } from '../svg-src-transformer';
+
+jest.mock( '@elementor/wp-media' );
+
+const mockedGetMediaAttachment = jest.mocked( getMediaAttachment );
+
+const SAMPLE_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="M0 0h100v100H0z"/></svg>';
+
+const mockFetch = ( body: string, contentType = 'image/svg+xml', ok = true ) => {
+	global.fetch = jest.fn().mockResolvedValue( {
+		ok,
+		headers: new Headers( { 'content-type': contentType } ),
+		text: () => Promise.resolve( body ),
+	} );
+};
+
+describe( 'svgSrcTransformer', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	afterEach( () => {
+		jest.restoreAllMocks();
+	} );
+
+	it( 'fetches SVG and returns processed html with currentColor fill', async () => {
+		// Arrange.
+		mockFetch( SAMPLE_SVG );
+
+		// Act.
+		const result = await svgSrcTransformer( { id: null, url: 'https://example.com/icon.svg' }, { key: 'svg' } );
+
+		// Assert.
+		expect( result ).toEqual( {
+			html: expect.stringContaining( 'fill="currentColor"' ),
+			url: 'https://example.com/icon.svg',
+		} );
+	} );
+
+	it( 'adds inline styles to the svg element', async () => {
+		// Arrange.
+		mockFetch( SAMPLE_SVG );
+
+		// Act.
+		const result = ( await svgSrcTransformer(
+			{ id: null, url: 'https://example.com/icon.svg' },
+			{ key: 'svg' }
+		) ) as { html: string; url: string };
+
+		// Assert.
+		expect( result.html ).toContain( 'width: 100%' );
+		expect( result.html ).toContain( 'height: 100%' );
+		expect( result.html ).toContain( 'overflow: unset' );
+	} );
+
+	it( 'returns null html when url is null', async () => {
+		// Arrange & Act.
+		const result = await svgSrcTransformer( { id: null, url: null }, { key: 'svg' } );
+
+		// Assert.
+		expect( result ).toEqual( { html: null, url: null } );
+		expect( mockedGetMediaAttachment ).not.toHaveBeenCalled();
+	} );
+
+	it( 'resolves url from attachment id then fetches SVG', async () => {
+		// Arrange.
+		mockedGetMediaAttachment.mockResolvedValue( {
+			url: 'https://example.com/resolved.svg',
+		} as never );
+		mockFetch( SAMPLE_SVG );
+
+		// Act.
+		const result = await svgSrcTransformer( { id: 42, url: null }, { key: 'svg' } );
+
+		// Assert.
+		expect( mockedGetMediaAttachment ).toHaveBeenCalledWith( { id: 42 } );
+		expect( result ).toEqual( {
+			html: expect.stringContaining( 'fill="currentColor"' ),
+			url: 'https://example.com/resolved.svg',
+		} );
+	} );
+
+	it( 'falls back to provided url when attachment lookup fails', async () => {
+		// Arrange.
+		mockedGetMediaAttachment.mockResolvedValue( null as never );
+		mockFetch( SAMPLE_SVG );
+
+		// Act.
+		const result = ( await svgSrcTransformer(
+			{ id: 99, url: 'https://example.com/fallback.svg' },
+			{ key: 'svg' }
+		) ) as { html: string; url: string };
+
+		// Assert.
+		expect( result.url ).toBe( 'https://example.com/fallback.svg' );
+		expect( result.html ).toContain( 'fill="currentColor"' );
+	} );
+
+	it( 'returns null html when id is set but attachment and url are missing', async () => {
+		// Arrange.
+		mockedGetMediaAttachment.mockResolvedValue( null as never );
+
+		// Act.
+		const result = await svgSrcTransformer( { id: 7, url: null }, { key: 'svg' } );
+
+		// Assert.
+		expect( result ).toEqual( { html: null, url: null } );
+	} );
+
+	it( 'returns null html when fetch fails', async () => {
+		// Arrange.
+		mockFetch( '', 'image/svg+xml', false );
+
+		// Act.
+		const result = await svgSrcTransformer( { id: null, url: 'https://example.com/missing.svg' }, { key: 'svg' } );
+
+		// Assert.
+		expect( result ).toEqual( {
+			html: null,
+			url: 'https://example.com/missing.svg',
+		} );
+	} );
+
+	it( 'returns null html when content is not SVG', async () => {
+		// Arrange.
+		mockFetch( '<html><body>Not SVG</body></html>', 'text/html' );
+
+		// Act.
+		const result = await svgSrcTransformer( { id: null, url: 'https://example.com/page.html' }, { key: 'svg' } );
+
+		// Assert.
+		expect( result ).toEqual( {
+			html: null,
+			url: 'https://example.com/page.html',
+		} );
+	} );
+
+	it( 'merges with existing style attribute', async () => {
+		// Arrange.
+		const svgWithStyle = '<svg xmlns="http://www.w3.org/2000/svg" style="display: block"><path d="M0 0"/></svg>';
+		mockFetch( svgWithStyle );
+
+		// Act.
+		const result = ( await svgSrcTransformer(
+			{ id: null, url: 'https://example.com/styled.svg' },
+			{ key: 'svg' }
+		) ) as { html: string; url: string };
+
+		// Assert.
+		expect( result.html ).toContain( 'display: block' );
+		expect( result.html ).toContain( 'width: 100%' );
+	} );
+
+	it( 'returns null html when response has no svg element', async () => {
+		// Arrange.
+		mockFetch( '<div>Not an SVG</div>' );
+
+		// Act.
+		const result = await svgSrcTransformer( { id: null, url: 'https://example.com/not-svg.svg' }, { key: 'svg' } );
+
+		// Assert.
+		expect( result ).toEqual( {
+			html: null,
+			url: 'https://example.com/not-svg.svg',
+		} );
+	} );
+
+	it( 'passes abort signal to fetch', async () => {
+		// Arrange.
+		mockFetch( SAMPLE_SVG );
+		const controller = new AbortController();
+
+		// Act.
+		await svgSrcTransformer(
+			{ id: null, url: 'https://example.com/icon.svg' },
+			{ key: 'svg', signal: controller.signal }
+		);
+
+		// Assert.
+		expect( global.fetch ).toHaveBeenCalledWith( 'https://example.com/icon.svg', { signal: controller.signal } );
+	} );
+} );

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

@@ -0,0 +1,87 @@
+import DOMPurify from 'dompurify';
+import { getMediaAttachment } from '@elementor/wp-media';
+
+import { createTransformer } from '../create-transformer';
+import type { TransformerOptions } from '../types';
+
+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 } );
+
+		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: unknown ): number | null {
+	if ( typeof id !== 'number' || id <= 0 ) {
+		return null;
+	}
+
+	return id;
+}
+
+export const svgSrcTransformer = createTransformer( async ( value: SvgSrc, { signal }: TransformerOptions ) => {
+	const id = resolveSvgSrcId( value.id );
+	const urlFromValue = typeof value.url === 'string' ? value.url : null;
+
+	let url: string | null | undefined = 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 };
+} );