@elementor/editor-canvas 3.35.0-359 → 3.35.0-360

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "3.35.0-359",
+  "version": "3.35.0-360",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,24 +37,24 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "3.35.0-359",
-    "@elementor/editor-controls": "3.35.0-359",
-    "@elementor/editor-documents": "3.35.0-359",
-    "@elementor/editor-elements": "3.35.0-359",
-    "@elementor/editor-interactions": "3.35.0-359",
-    "@elementor/editor-mcp": "3.35.0-359",
-    "@elementor/editor-notifications": "3.35.0-359",
-    "@elementor/editor-props": "3.35.0-359",
-    "@elementor/editor-responsive": "3.35.0-359",
-    "@elementor/editor-styles": "3.35.0-359",
-    "@elementor/editor-styles-repository": "3.35.0-359",
-    "@elementor/editor-ui": "3.35.0-359",
-    "@elementor/editor-v1-adapters": "3.35.0-359",
-    "@elementor/schema": "3.35.0-359",
-    "@elementor/twing": "3.35.0-359",
+    "@elementor/editor": "3.35.0-360",
+    "@elementor/editor-controls": "3.35.0-360",
+    "@elementor/editor-documents": "3.35.0-360",
+    "@elementor/editor-elements": "3.35.0-360",
+    "@elementor/editor-interactions": "3.35.0-360",
+    "@elementor/editor-mcp": "3.35.0-360",
+    "@elementor/editor-notifications": "3.35.0-360",
+    "@elementor/editor-props": "3.35.0-360",
+    "@elementor/editor-responsive": "3.35.0-360",
+    "@elementor/editor-styles": "3.35.0-360",
+    "@elementor/editor-styles-repository": "3.35.0-360",
+    "@elementor/editor-ui": "3.35.0-360",
+    "@elementor/editor-v1-adapters": "3.35.0-360",
+    "@elementor/schema": "3.35.0-360",
+    "@elementor/twing": "3.35.0-360",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-359",
-    "@elementor/wp-media": "3.35.0-359",
+    "@elementor/utils": "3.35.0-360",
+    "@elementor/wp-media": "3.35.0-360",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/__tests__/elements-overlays.test.tsx

@@ -8,7 +8,6 @@ import {
 } from '@elementor/editor-v1-adapters';
 import { screen, waitFor } from '@testing-library/react';
 
-import { hasInlineEditableProperty } from '../../utils/inline-editing-utils';
 import { ElementsOverlays } from '../elements-overlays';
 import { CANVAS_WRAPPER_ID } from '../outline-overlay';
 
@@ -19,7 +18,6 @@ jest.mock( '@elementor/editor-v1-adapters', () => ( {
 	__privateUseIsRouteActive: jest.fn(),
 	isExperimentActive: jest.fn(),
 } ) );
-jest.mock( '../../utils/inline-editing-utils' );
 
 describe( '<ElementsOverlays />', () => {
 	beforeEach( () => {
@@ -30,7 +28,6 @@ describe( '<ElementsOverlays />', () => {
 
 		jest.mocked( useEditMode ).mockReturnValue( 'edit' );
 		jest.mocked( useIsRouteActive ).mockReturnValue( false );
-		jest.mocked( hasInlineEditableProperty ).mockReturnValue( false );
 		jest.mocked( isExperimentActive ).mockReturnValue( true );
 
 		jest.mocked( getElements ).mockReturnValue( [

package/src/init.tsx

@@ -9,6 +9,7 @@ import { StyleRenderer } from './components/style-renderer';
 import { initSettingsTransformers } from './init-settings-transformers';
 import { initStyleTransformers } from './init-style-transformers';
 import { initLegacyViews } from './legacy/init-legacy-views';
+import { initViewReplacements } from './legacy/replacements/manager';
 import { initCanvasMcp } from './mcp/canvas-mcp';
 import { mcpDescription } from './mcp/mcp-description';
 import { initLinkInLinkPrevention } from './prevent-link-in-link-commands';
@@ -20,6 +21,8 @@ export function init() {
 
 	initLinkInLinkPrevention();
 
+	initViewReplacements();
+
 	initLegacyViews();
 
 	initSettingsTransformers();

package/src/legacy/create-templated-element-type.ts

@@ -86,11 +86,11 @@ export function createTemplatedElementView( {
 			this.#abortController = new AbortController();
 
 			const process = signalizedProcess( this.#abortController.signal )
-				.then( () => this.#beforeRender() )
+				.then( () => this._beforeRender() )
 				.then( () => this._renderTemplate() )
 				.then( () => {
 					this._renderChildren();
-					this.#afterRender();
+					this._afterRender();
 				} );
 
 			return process.execute();
@@ -136,7 +136,7 @@ export function createTemplatedElementView( {
 			return settings;
 		}
 
-		#beforeRender() {
+		_beforeRender() {
 			this._ensureViewIsIntact();
 
 			this._isRendering = true;
@@ -146,7 +146,7 @@ export function createTemplatedElementView( {
 			this.triggerMethod( 'before:render', this );
 		}
 
-		#afterRender() {
+		_afterRender() {
 			this._isRendering = false;
 			this.isRendered = true;
 

package/src/legacy/init-legacy-views.ts

@@ -2,14 +2,9 @@ import { getWidgetsCache } from '@elementor/editor-elements';
 import { __privateListenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';
 
 import { createDomRenderer } from '../renderers/create-dom-renderer';
-import { shouldRenderInlineEditingView } from '../utils/inline-editing-utils';
 import { createElementType } from './create-element-type';
-import { createInlineEditingElementType } from './create-inline-editing-element-type';
-import {
-	canBeTemplated,
-	createTemplatedElementType,
-	type CreateTemplatedElementTypeOptions,
-} from './create-templated-element-type';
+import { canBeTemplated, type CreateTemplatedElementTypeOptions } from './create-templated-element-type';
+import { createTemplatedElementTypeWithReplacements } from './replacements/manager';
 import type { ElementType, LegacyWindow } from './types';
 
 type ElementLegacyType = {
@@ -41,9 +36,7 @@ export function initLegacyViews() {
 			if ( !! elementsLegacyTypes[ type ] && canBeTemplated( element ) ) {
 				ElementType = elementsLegacyTypes[ type ]( { type, renderer, element } );
 			} else if ( canBeTemplated( element ) ) {
-				ElementType = shouldRenderInlineEditingView( type )
-					? createInlineEditingElementType( { type, renderer, element } )
-					: createTemplatedElementType( { type, renderer, element } );
+				ElementType = createTemplatedElementTypeWithReplacements( { type, renderer, element } );
 			} else {
 				ElementType = createElementType( type );
 			}

package/src/legacy/replacements/base.ts

@@ -0,0 +1,35 @@
+import { type ReplacementSettings } from '../types';
+
+export default class ReplacementBase {
+	protected getSetting: ReplacementSettings[ 'getSetting' ];
+	protected setSetting: ReplacementSettings[ 'setSetting' ];
+	protected element: ReplacementSettings[ 'element' ];
+	protected type: ReplacementSettings[ 'type' ];
+	protected id: ReplacementSettings[ 'id' ];
+	protected refreshView: ReplacementSettings[ 'refreshView' ];
+
+	constructor( settings: ReplacementSettings ) {
+		this.getSetting = settings.getSetting;
+		this.setSetting = settings.setSetting;
+		this.element = settings.element;
+		this.type = settings.type;
+		this.id = settings.id;
+		this.refreshView = settings.refreshView;
+	}
+
+	static getTypes(): string[] | null {
+		return null;
+	}
+
+	render(): void {}
+
+	onDestroy(): void {}
+
+	_beforeRender(): void {}
+
+	_afterRender(): void {}
+
+	shouldRenderReplacement(): boolean {
+		return true;
+	}
+}

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

@@ -0,0 +1,161 @@
+import * as React from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { InlineEditor } from '@elementor/editor-controls';
+import { getElementType } from '@elementor/editor-elements';
+import {
+	htmlPropTypeUtil,
+	stringPropTypeUtil,
+	type StringPropValue,
+	type TransformablePropValue,
+} from '@elementor/editor-props';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
+import { ThemeProvider } from '@elementor/ui';
+
+import ReplacementBase from '../base';
+import { getInitialPopoverPosition, INLINE_EDITING_PROPERTY_PER_TYPE } from './inline-editing-utils';
+
+const EXPERIMENT_KEY = 'v4-inline-text-editing';
+
+export default class InlineEditingReplacement extends ReplacementBase {
+	private inlineEditorRoot: Root | null = null;
+	private handlerAttached = false;
+
+	getReplacementKey() {
+		return 'inline-editing';
+	}
+
+	static getTypes() {
+		return Object.keys( INLINE_EDITING_PROPERTY_PER_TYPE );
+	}
+
+	isEditingModeActive() {
+		return !! this.inlineEditorRoot;
+	}
+
+	shouldRenderReplacement() {
+		return isExperimentActive( EXPERIMENT_KEY ) && this.isEditingModeActive() && ! this.isValueDynamic();
+	}
+
+	handleRenderInlineEditor = ( event: Event ) => {
+		event.stopPropagation();
+
+		if ( ! this.isValueDynamic() ) {
+			this.renderInlineEditor();
+		}
+	};
+
+	handleUnmountInlineEditor = ( event: Event ) => {
+		event.stopPropagation();
+		this.unmountInlineEditor();
+	};
+
+	onDestroy() {
+		this.resetInlineEditorRoot();
+	}
+
+	_beforeRender(): void {
+		this.resetInlineEditorRoot();
+	}
+
+	_afterRender() {
+		if ( ! this.isValueDynamic() && ! this.handlerAttached ) {
+			this.element.addEventListener( 'dblclick', this.handleRenderInlineEditor );
+			this.handlerAttached = true;
+		}
+	}
+
+	resetInlineEditorRoot() {
+		this.element.removeEventListener( 'dblclick', this.handleRenderInlineEditor );
+		this.handlerAttached = false;
+		this.inlineEditorRoot?.unmount?.();
+		this.inlineEditorRoot = null;
+	}
+
+	unmountInlineEditor() {
+		this.resetInlineEditorRoot();
+		this.refreshView();
+	}
+
+	isValueDynamic() {
+		const settingKey = this.getInlineEditablePropertyName();
+		const propValue = this.getSetting( settingKey ) as TransformablePropValue< string >;
+
+		return propValue?.$$type === 'dynamic';
+	}
+
+	getInlineEditablePropertyName(): string {
+		return INLINE_EDITING_PROPERTY_PER_TYPE[ this.type ] ?? '';
+	}
+
+	getHtmlPropType() {
+		const propSchema = getElementType( this.type )?.propsSchema;
+		const propertyName = this.getInlineEditablePropertyName();
+
+		return propSchema?.[ propertyName ] ?? null;
+	}
+
+	getContentValue() {
+		const prop = this.getHtmlPropType();
+		const defaultValue = ( prop?.default as StringPropValue | null )?.value ?? '';
+		const settingKey = this.getInlineEditablePropertyName();
+
+		return (
+			htmlPropTypeUtil.extract( this.getSetting( settingKey ) ?? null ) ??
+			htmlPropTypeUtil.extract( prop?.default ?? null ) ??
+			defaultValue ??
+			''
+		);
+	}
+
+	setContentValue( value: string | null ) {
+		const settingKey = this.getInlineEditablePropertyName();
+		const valueToSave = value ? htmlPropTypeUtil.create( value ) : null;
+
+		this.setSetting( settingKey, valueToSave );
+	}
+
+	getExpectedTag() {
+		const propsSchema = getElementType( this.type )?.propsSchema;
+
+		if ( ! propsSchema?.tag ) {
+			return null;
+		}
+
+		const tagSettingKey = 'tag';
+
+		return (
+			stringPropTypeUtil.extract( this.getSetting( tagSettingKey ) ?? null ) ??
+			stringPropTypeUtil.extract( propsSchema.tag.default ?? null ) ??
+			null
+		);
+	}
+
+	renderInlineEditor() {
+		const propValue = this.getContentValue();
+		const classes = ( this.element.children?.[ 0 ]?.classList.toString() ?? '' ) + ' strip-styles';
+		const expectedTag = this.getExpectedTag();
+
+		this.element.innerHTML = '';
+
+		if ( this.inlineEditorRoot ) {
+			this.resetInlineEditorRoot();
+		}
+
+		this.inlineEditorRoot = createRoot( this.element );
+
+		this.inlineEditorRoot.render(
+			<ThemeProvider>
+				<InlineEditor
+					attributes={ { class: classes } }
+					value={ propValue }
+					setValue={ this.setContentValue.bind( this ) }
+					onBlur={ this.handleUnmountInlineEditor.bind( this ) }
+					autofocus
+					showToolbar
+					getInitialPopoverPosition={ getInitialPopoverPosition }
+					expectedTag={ expectedTag }
+				/>
+			</ThemeProvider>
+		);
+	}
+}

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

@@ -0,0 +1,31 @@
+import { type V1Element } from '@elementor/editor-elements';
+
+import { type LegacyWindow } from '../../types';
+
+export const INLINE_EDITING_PROPERTY_PER_TYPE: Record< string, string > = {
+	'e-heading': 'title',
+	'e-paragraph': 'paragraph',
+};
+
+export const legacyWindow = window as unknown as LegacyWindow;
+
+export const getWidgetType = ( container: V1Element | null ) => {
+	return container?.model?.get( 'widgetType' ) ?? container?.model?.get( 'elType' ) ?? null;
+};
+
+export const getInitialPopoverPosition = () => {
+	const positionFallback = { left: 0, top: 0 };
+
+	const iFrameElement = legacyWindow?.elementor?.$preview?.get( 0 );
+	const iFramePosition = iFrameElement?.getBoundingClientRect() ?? positionFallback;
+
+	const previewElement = legacyWindow?.elementor?.$previewWrapper?.get( 0 );
+	const previewPosition = previewElement
+		? { left: previewElement.scrollLeft, top: previewElement.scrollTop }
+		: positionFallback;
+
+	return {
+		left: iFramePosition.left + previewPosition.left,
+		top: iFramePosition.top + previewPosition.top,
+	};
+};

package/src/legacy/replacements/manager.ts

@@ -0,0 +1,119 @@
+import type { CreateTemplatedElementTypeOptions } from '../create-templated-element-type';
+import { createTemplatedElementView } from '../create-templated-element-type';
+import type { ElementType, ElementView, LegacyWindow, ReplacementSettings } from '../types';
+import type ReplacementBase from './base';
+import InlineEditingReplacement from './inline-editing/inline-editing-elements';
+
+type ReplacementConstructor = new ( settings: ReplacementSettings ) => ReplacementBase;
+
+const replacements = new Map< string, ReplacementConstructor >();
+
+export const initViewReplacements = () => {
+	registerReplacement( InlineEditingReplacement );
+};
+
+export const registerReplacement = ( replacement: typeof ReplacementBase ) => {
+	const types = replacement.getTypes();
+
+	if ( ! types ) {
+		return;
+	}
+
+	types.forEach( ( type ) => {
+		replacements.set( type, replacement );
+	} );
+};
+
+export const getReplacement = ( type: string ) => {
+	return replacements.get( type ) ?? null;
+};
+
+export const createViewWithReplacements = ( options: CreateTemplatedElementTypeOptions ): typeof ElementView => {
+	const TemplatedView = createTemplatedElementView( options );
+
+	return class extends TemplatedView {
+		#replacement: ReplacementBase | null = null;
+		#config: ReplacementSettings;
+
+		constructor( ...args: unknown[] ) {
+			super( ...args );
+			const settings = this.model.get( 'settings' );
+
+			this.#config = {
+				getSetting: settings.get.bind( settings ),
+				setSetting: settings.set.bind( settings ),
+				element: this.el,
+				type: this?.model?.get( 'widgetType' ) ?? this.container?.model?.get( 'elType' ) ?? null,
+				id: this?.model?.get( 'id' ) ?? null,
+				refreshView: this.render.bind( this ),
+			};
+		}
+
+		refreshView() {
+			this.render();
+		}
+
+		render() {
+			const config = this.#config;
+			const widgetType = config.type;
+			const ReplacementClass = widgetType ? getReplacement( widgetType ) : null;
+
+			if ( ReplacementClass && ! this.#replacement ) {
+				this.#replacement = new ReplacementClass( config );
+			}
+
+			if ( ! this.#replacement?.shouldRenderReplacement() ) {
+				return TemplatedView.prototype.render.apply( this );
+			}
+
+			this.#replacement.render();
+		}
+
+		onDestroy() {
+			if ( this.#replacement ) {
+				this.#replacement.onDestroy();
+				this.#replacement = null;
+			}
+
+			TemplatedView.prototype.onDestroy.apply( this );
+		}
+
+		_afterRender() {
+			if ( this.#replacement ) {
+				this.#replacement._afterRender();
+			}
+
+			TemplatedView.prototype._afterRender.apply( this );
+		}
+
+		_beforeRender(): void {
+			if ( this.#replacement ) {
+				this.#replacement._beforeRender();
+			}
+
+			TemplatedView.prototype._beforeRender.apply( this );
+		}
+	};
+};
+
+export const createTemplatedElementTypeWithReplacements = ( {
+	type,
+	renderer,
+	element,
+}: CreateTemplatedElementTypeOptions ): typeof ElementType => {
+	const legacyWindow = window as unknown as LegacyWindow;
+
+	return class extends legacyWindow.elementor.modules.elements.types.Widget {
+		getType() {
+			return type;
+		}
+
+		getView() {
+			return createViewWithReplacements( {
+				type,
+				renderer,
+				element,
+			} );
+		}
+	};
+};

package/src/legacy/types.ts

@@ -1,5 +1,5 @@
 import { type V1Element } from '@elementor/editor-elements';
-import { type Props } from '@elementor/editor-props';
+import { type Props, type PropValue } from '@elementor/editor-props';
 
 export type LegacyWindow = Window & {
 	elementor: {
@@ -80,6 +80,10 @@ export declare class ElementView {
 
 	_renderChildren(): void;
 
+	_beforeRender(): void;
+
+	_afterRender(): void;
+
 	attachBuffer( collectionView: this, buffer: DocumentFragment ): void;
 
 	triggerMethod( method: string, ...args: unknown[] ): void;
@@ -140,3 +144,12 @@ type ContextMenuGroup = {
 	name: string;
 	actions: unknown[];
 };
+
+export type ReplacementSettings = {
+	getSetting: ( key: string ) => unknown;
+	setSetting: ( key: string, value: PropValue ) => void;
+	type: string;
+	id: string;
+	element: HTMLElement;
+	refreshView: () => void;
+};