@elementor/editor-canvas 3.35.0-351 → 3.35.0-352

package/package.json

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

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

@@ -186,30 +186,4 @@ describe( '<ElementsOverlays />', () => {
 		expect( overlay ).toBeInTheDocument();
 		expect( overlay ).toHaveAttribute( 'data-element-overlay', 'atomic1' );
 	} );
-
-	it( 'should render InlineEditorOverlay only for selected elements that support inline editing', async () => {
-		// Arrange
-		const headingEl = createDOMElement( { tag: 'div', attrs: { 'data-atomic': '', id: '50' } } );
-
-		jest.mocked( getElements ).mockReturnValue( [
-			createMockElement( {
-				model: { id: 'heading-element' },
-				view: { el: headingEl, getDomElement: () => ( { get: () => headingEl } ) },
-			} ),
-		] );
-
-		jest.mocked( useSelectedElement ).mockReturnValue( {
-			element: { id: 'heading-element', type: 'widget' },
-			elementType: createMockElementType(),
-		} );
-
-		// Act
-		renderWithTheme( <ElementsOverlays /> );
-
-		// Assert
-		await waitFor( () => {
-			const overlay = screen.getByRole( 'presentation' );
-			expect( overlay ).toHaveAttribute( 'data-element-overlay', 'heading-element' );
-		} );
-	} );
 } );

package/src/components/elements-overlays.tsx

@@ -3,14 +3,11 @@ import { getElements, useSelectedElement } from '@elementor/editor-elements';
 import {
 	__privateUseIsRouteActive as useIsRouteActive,
 	__privateUseListenTo as useListenTo,
-	isExperimentActive,
 	useEditMode,
 	windowEvent,
 } from '@elementor/editor-v1-adapters';
 
 import type { ElementOverlayConfig } from '../types/element-overlay';
-import { hasInlineEditableProperty } from '../utils/inline-editing-utils';
-import { InlineEditorOverlay } from './inline-editor-overlay';
 import { OutlineOverlay } from './outline-overlay';
 
 const ELEMENTS_DATA_ATTR = 'atomic';
@@ -20,11 +17,6 @@ const overlayRegistry: ElementOverlayConfig[] = [
 		component: OutlineOverlay,
 		shouldRender: () => true,
 	},
-	{
-		component: InlineEditorOverlay,
-		shouldRender: ( { id, isSelected } ) =>
-			isSelected && hasInlineEditableProperty( id ) && isExperimentActive( 'v4-inline-text-editing' ),
-	},
 ];
 
 export function ElementsOverlays() {

package/src/legacy/create-inline-editing-element-type.tsx

@@ -0,0 +1,199 @@
+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 { ThemeProvider } from '@elementor/editor-ui';
+
+import {
+	getBlockedValue,
+	getHtmlPropType,
+	getInitialPopoverPosition,
+	getInlineEditablePropertyName,
+	getWidgetType,
+	legacyWindow,
+} from '../utils/inline-editing-utils';
+import { type CreateTemplatedElementTypeOptions, createTemplatedElementView } from './create-templated-element-type';
+import { type ElementType, type ElementView } from './types';
+
+export function createInlineEditingElementType( {
+	type,
+	renderer,
+	element,
+}: CreateTemplatedElementTypeOptions ): typeof ElementType {
+	return class extends legacyWindow.elementor.modules.elements.types.Widget {
+		getType() {
+			return type;
+		}
+
+		getView() {
+			return createInlineEditingElementView( {
+				type,
+				renderer,
+				element,
+			} );
+		}
+	};
+}
+
+export function createInlineEditingElementView( {
+	type,
+	renderer,
+	element,
+}: CreateTemplatedElementTypeOptions ): typeof ElementView {
+	const TemplatedView = createTemplatedElementView( { type, renderer, element } );
+
+	Object.entries( element.twig_templates ).forEach( ( [ key, template ] ) => {
+		renderer.register( key, template );
+	} );
+
+	return class extends TemplatedView {
+		inlineEditorRoot: Root | null = null;
+		handlerAttached = false;
+
+		render() {
+			if ( this.inlineEditorRoot ) {
+				this.resetInlineEditorRoot();
+			}
+
+			if ( ! this.isValueDynamic() && ! this.handlerAttached ) {
+				this.$el.on( 'dblclick', '*', this.handleRenderInlineEditor.bind( this ) );
+				this.handlerAttached = true;
+			}
+
+			TemplatedView.prototype.render.apply( this );
+		}
+
+		handleRenderInlineEditor( event: Event ) {
+			event.stopPropagation();
+			this.$el.off( 'dblclick', '*' );
+			this.handlerAttached = false;
+
+			if ( ! this.isValueDynamic() ) {
+				this.renderInlineEditor();
+			}
+		}
+
+		handleUnmountInlineEditor( event: Event ) {
+			event.stopPropagation();
+			this.unmountInlineEditor();
+		}
+
+		onDestroy( ...args: unknown[] ) {
+			this.resetInlineEditorRoot();
+			TemplatedView.prototype.onDestroy.apply( this, args );
+		}
+
+		resetInlineEditorRoot() {
+			this.$el.off( 'dblclick', '*' );
+			this.handlerAttached = false;
+			this.inlineEditorRoot?.unmount?.();
+			this.inlineEditorRoot = null;
+		}
+
+		unmountInlineEditor() {
+			this.resetInlineEditorRoot();
+			this.render();
+		}
+
+		isValueDynamic() {
+			const settingKey = getInlineEditablePropertyName( this.container );
+			const propValue = this.model.get( 'settings' )?.get( settingKey ) as TransformablePropValue< string >;
+
+			return propValue?.$$type === 'dynamic';
+		}
+
+		getContentValue() {
+			const prop = getHtmlPropType( this.container );
+			const defaultValue = ( prop?.default as StringPropValue | null )?.value ?? '';
+			const settingKey = getInlineEditablePropertyName( this.container );
+
+			return (
+				htmlPropTypeUtil.extract( this.model.get( 'settings' )?.get( settingKey ) ?? null ) ??
+				htmlPropTypeUtil.extract( prop?.default ?? null ) ??
+				defaultValue ??
+				''
+			);
+		}
+
+		setContentValue( value: string | null ) {
+			const settingKey = getInlineEditablePropertyName( this.container );
+			const valueToSave = value ? htmlPropTypeUtil.create( value ) : null;
+
+			this.model.get( 'settings' )?.set( settingKey, valueToSave );
+		}
+
+		getExpectedTag() {
+			const widgetType = getWidgetType( this.container );
+
+			if ( ! widgetType ) {
+				return null;
+			}
+
+			const propsSchema = getElementType( widgetType )?.propsSchema;
+
+			if ( ! propsSchema?.tag ) {
+				return null;
+			}
+
+			return (
+				stringPropTypeUtil.extract( this.model.get( 'settings' ).get( 'tag' ) ?? null ) ??
+				stringPropTypeUtil.extract( propsSchema.tag.default ?? null ) ??
+				null
+			);
+		}
+
+		ensureProperValue() {
+			const actualValue = this.getContentValue();
+			const tagSettings = this.getExpectedTag();
+			const wrappedValue = getBlockedValue( actualValue, tagSettings );
+
+			if ( actualValue !== wrappedValue ) {
+				this.setContentValue( wrappedValue );
+			}
+		}
+
+		renderInlineEditor() {
+			this.ensureProperValue();
+
+			const propValue = this.getContentValue();
+			const settingKey = getInlineEditablePropertyName( this.container );
+			const classes = ( this.el?.children?.[ 0 ]?.classList.toString() ?? '' ) + ' strip-styles';
+			const expectedTag = this.getExpectedTag();
+
+			const setValue = ( value: string | null ) => {
+				const valueToSave = value ? htmlPropTypeUtil.create( value ) : null;
+
+				this.model.get( 'settings' )?.set( settingKey, valueToSave );
+			};
+
+			this.$el.html( '' );
+
+			if ( this.inlineEditorRoot ) {
+				this.resetInlineEditorRoot();
+			}
+
+			this.inlineEditorRoot = createRoot( this.el );
+
+			this.inlineEditorRoot.render(
+				<ThemeProvider>
+					<InlineEditor
+						attributes={ { class: classes } }
+						value={ propValue }
+						setValue={ setValue }
+						onBlur={ this.handleUnmountInlineEditor.bind( this ) }
+						autofocus
+						showToolbar
+						getInitialPopoverPosition={ getInitialPopoverPosition }
+						expectedTag={ expectedTag }
+					/>
+				</ThemeProvider>
+			);
+		}
+	};
+}

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

@@ -1,4 +1,4 @@
-import type { V1ElementConfig } from '@elementor/editor-elements';
+import { type V1ElementConfig } from '@elementor/editor-elements';
 
 import { type DomRenderer } from '../renderers/create-dom-renderer';
 import { createPropsResolver } from '../renderers/create-props-resolver';
@@ -13,7 +13,7 @@ export type CreateTemplatedElementTypeOptions = {
 	element: TemplatedElementConfig;
 };
 
-type TemplatedElementConfig = Required<
+export type TemplatedElementConfig = Required<
 	Pick< V1ElementConfig, 'twig_templates' | 'twig_main_template' | 'atomic_props_schema' | 'base_styles_dictionary' >
 >;
 

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

@@ -2,7 +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,
@@ -39,7 +41,9 @@ export function initLegacyViews() {
 			if ( !! elementsLegacyTypes[ type ] && canBeTemplated( element ) ) {
 				ElementType = elementsLegacyTypes[ type ]( { type, renderer, element } );
 			} else if ( canBeTemplated( element ) ) {
-				ElementType = createTemplatedElementType( { type, renderer, element } );
+				ElementType = shouldRenderInlineEditingView( type )
+					? createInlineEditingElementType( { type, renderer, element } )
+					: createTemplatedElementType( { type, renderer, element } );
 			} else {
 				ElementType = createElementType( type );
 			}

package/src/legacy/types.ts

@@ -1,3 +1,4 @@
+import { type V1Element } from '@elementor/editor-elements';
 import { type Props } from '@elementor/editor-props';
 
 export type LegacyWindow = Window & {
@@ -17,13 +18,15 @@ export type LegacyWindow = Window & {
 		elementsManager: {
 			registerElementType: ( type: ElementType ) => void;
 		};
-		$preview: [
-			{
-				contentWindow: {
-					dispatchEvent: ( event: Event ) => void;
-				};
-			},
-		];
+		$preview: JQueryElement &
+			[
+				{
+					contentWindow: {
+						dispatchEvent: ( event: Event ) => void;
+					};
+				},
+			];
+		$previewWrapper: JQueryElement;
 	};
 };
 
@@ -34,7 +37,10 @@ export declare class ElementType {
 }
 
 export declare class ElementView {
+	container: V1Element;
+
 	$el: JQueryElement;
+	el: HTMLElement;
 
 	model: BackboneModel< ElementModel >;
 
@@ -101,6 +107,9 @@ type JQueryElement = {
 	find: ( selector: string ) => JQueryElement;
 	html: ( html: string ) => void;
 	get: ( index: number ) => HTMLElement;
+	attr: ( name: string ) => string;
+	on: ( event: string, childrenSelectors: string, handler: ( event: Event ) => void ) => void;
+	off: ( event: string, childrenSelectors: string, handler?: ( event: Event ) => void ) => void;
 };
 
 export type BackboneModel< Model extends object > = {