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

package/package.json

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

package/src/__tests__/flex-transformer.test.ts

@@ -68,7 +68,7 @@ describe( 'flexTransformer', () => {
 	} );
 
 	describe( 'when only two values are provided', () => {
-		it( 'should return "grow shrink" when grow and shrink are set', () => {
+		it( 'should return "grow shrink auto" when grow and shrink are set', () => {
 			// Arrange.
 			const value: Flex = {
 				flexGrow: 1,
@@ -80,7 +80,7 @@ describe( 'flexTransformer', () => {
 			const result = flexTransformer( value, { key: 'flex' } );
 
 			// Assert.
-			expect( result ).toBe( '1 2' );
+			expect( result ).toBe( '1 2 auto' );
 		} );
 
 		it( 'should return "grow 1 basis" when grow and basis are set', () => {
@@ -115,7 +115,7 @@ describe( 'flexTransformer', () => {
 	} );
 
 	describe( 'when only one value is provided', () => {
-		it( 'should return "grow" when only grow is set', () => {
+		it( 'should return "grow 1 auto" when only grow is set', () => {
 			// Arrange.
 			const value: Flex = {
 				flexGrow: 1,
@@ -127,10 +127,10 @@ describe( 'flexTransformer', () => {
 			const result = flexTransformer( value, { key: 'flex' } );
 
 			// Assert.
-			expect( result ).toBe( '1' );
+			expect( result ).toBe( '1 1 auto' );
 		} );
 
-		it( 'should return "0 shrink" when only shrink is set', () => {
+		it( 'should return "0 shrink auto" when only shrink is set', () => {
 			// Arrange.
 			const value: Flex = {
 				flexGrow: null,
@@ -142,7 +142,7 @@ describe( 'flexTransformer', () => {
 			const result = flexTransformer( value, { key: 'flex' } );
 
 			// Assert.
-			expect( result ).toBe( '0 2' );
+			expect( result ).toBe( '0 2 auto' );
 		} );
 
 		it( 'should return "0 1 basis" when only basis is set', () => {
@@ -238,8 +238,8 @@ describe( 'flexTransformer', () => {
 		} );
 	} );
 
-	describe( 'CSS shorthand behavior', () => {
-		it( 'should follow CSS flex shorthand rules for single value', () => {
+	describe( 'CSS initial values for omitted longhands', () => {
+		it( 'should default shrink and basis when only grow is set', () => {
 			// Arrange.
 			const value: Flex = {
 				flexGrow: 2,
@@ -251,10 +251,10 @@ describe( 'flexTransformer', () => {
 			const result = flexTransformer( value, { key: 'flex' } );
 
 			// Assert.
-			expect( result ).toBe( '2' );
+			expect( result ).toBe( '2 1 auto' );
 		} );
 
-		it( 'should follow CSS flex shorthand rules for two values', () => {
+		it( 'should default basis when grow and shrink are set', () => {
 			// Arrange.
 			const value: Flex = {
 				flexGrow: 1,
@@ -266,7 +266,7 @@ describe( 'flexTransformer', () => {
 			const result = flexTransformer( value, { key: 'flex' } );
 
 			// Assert.
-			expect( result ).toBe( '1 2' );
+			expect( result ).toBe( '1 2 auto' );
 		} );
 	} );
 } );

package/src/__tests__/prop-types.ts

@@ -36,6 +36,17 @@ export function linkPropType() {
 	} );
 }
 
+export function iconPropType() {
+	return createMockPropType( {
+		kind: 'object',
+		key: 'icon',
+		shape: {
+			value: stringPropType(),
+			library: stringPropType(),
+		},
+	} );
+}
+
 export function imagePropType() {
 	return createMockPropType( {
 		kind: 'object',

package/src/init-settings-transformers.ts

@@ -3,11 +3,13 @@ import { attributesTransformer } from './transformers/settings/attributes-transf
 import { createClassesTransformer } from './transformers/settings/classes-transformer';
 import { dateRangeTransformer } from './transformers/settings/date-range-transformer';
 import { dateTimeTransformer } from './transformers/settings/date-time-transformer';
+import { escapedHtmlTransformer } from './transformers/settings/escaped-html-transformer';
 import { htmlV2Transformer } from './transformers/settings/html-v2-transformer';
 import { htmlV3Transformer } from './transformers/settings/html-v3-transformer';
 import { linkTransformer } from './transformers/settings/link-transformer';
 import { queryTransformer } from './transformers/settings/query-transformer';
 import { timeRangeTransformer } from './transformers/settings/time-range-transformer';
+import { iconTransformer } from './transformers/shared/icon-transformer';
 import { imageSrcTransformer } from './transformers/shared/image-src-transformer';
 import { imageTransformer } from './transformers/shared/image-transformer';
 import { plainTransformer } from './transformers/shared/plain-transformer';
@@ -22,11 +24,13 @@ export function initSettingsTransformers() {
 		.register( 'image', imageTransformer )
 		.register( 'image-src', imageSrcTransformer )
 		.register( 'svg-src', svgSrcTransformer )
+		.register( 'icon', iconTransformer )
 		.register( 'video-src', videoSrcTransformer )
 		.register( 'attributes', attributesTransformer )
 		.register( 'date-time', dateTimeTransformer )
 		.register( 'html-v2', htmlV2Transformer )
 		.register( 'html-v3', htmlV3Transformer )
+		.register( 'escaped-html', escapedHtmlTransformer )
 		.register( 'date-range', dateRangeTransformer )
 		.register( 'time-range', timeRangeTransformer )
 		.registerFallback( plainTransformer );

package/src/init-style-transformers.ts

@@ -80,14 +80,14 @@ export function initStyleTransformers() {
 		)
 		.register( 'flex', flexTransformer )
 		.register(
-			'border-width',
+			'border-width-v2',
 			createMultiPropsTransformer(
 				[ 'block-start', 'block-end', 'inline-start', 'inline-end' ],
 				( { key } ) => `border-${ key }-width`
 			)
 		)
 		.register(
-			'border-radius',
+			'border-radius-v2',
 			createMultiPropsTransformer(
 				[ 'start-start', 'start-end', 'end-start', 'end-end' ],
 				( { key } ) => `border-${ key }-radius`

package/src/init.tsx

@@ -10,6 +10,7 @@ import { initFormNestingPrevention } from './form-structure/prevent-form-nesting
 import { initSettingsTransformers } from './init-settings-transformers';
 import { initStyleTransformers } from './init-style-transformers';
 import { initLegacyViews } from './legacy/init-legacy-views';
+import { initListType } from './legacy/list-type';
 import { initViewReplacements } from './legacy/replacements/manager';
 import { initTabsModelExtensions } from './legacy/tabs-model-extensions';
 import { initCanvasMcp } from './mcp/canvas-mcp';
@@ -54,14 +55,14 @@ export function init() {
 	initCanvasMcp(
 		getMCPByDomain( 'canvas', {
 			instructions: `Everything related to V4 ( Atomic ) canvas.
-# Canvas workflow for new compositions
-- Configure elements settings and styles
-- Build compositions/sections out of V4 atomic elements using context aware designs using the website resources
-- Get and retrieve element configuration values
+# Canvas workflow
+- Configure element settings and styles with configure-element
+- Get page structure and element configuration values
 `,
 			docs: mcpDescription,
 		} )
 	);
 
 	initTabsModelExtensions();
+	initListType();
 }

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

@@ -5,6 +5,7 @@ import {
 	createTemplatedElementType,
 	createTemplatedElementView,
 } from '../create-templated-element-type';
+import { type ElementView } from '../types';
 
 const MOCK_ELEMENT_TYPE = 'test-element';
 const MOCK_HTML = '<div>Element</div>';
@@ -19,6 +20,8 @@ const createMockElementConfig = () => ( {
 	twig_main_template: 'main',
 	atomic_props_schema: {},
 	base_styles_dictionary: {},
+	default_html_tag: 'div',
+	html_tag_follows_link: true,
 } );
 
 describe( 'createTemplatedElementType', () => {
@@ -116,6 +119,53 @@ describe( 'createTemplatedElementView', () => {
 			expect( utils.register ).toHaveBeenCalledWith( 'template2', '<div>Template 2</div>' );
 		} );
 	} );
+
+	describe( 'render context', () => {
+		it( 'should inject computed tag into the twig render context', async () => {
+			// Arrange
+			const utils = createMockRenderer();
+			const ViewClass = createTemplatedElementView( {
+				type: MOCK_ELEMENT_TYPE,
+				renderer: utils,
+				element: {
+					...createMockElementConfig(),
+					twig_templates: {
+						main: '<{{ tag | e("html_tag") }}></{{ tag | e("html_tag") }}>',
+					},
+				},
+			} );
+
+			const view = new ViewClass() as unknown as ElementView & {
+				_abortController: AbortController;
+			};
+			view.model = {
+				get: ( key: string ) => {
+					if ( key === 'id' ) {
+						return 'test-id';
+					}
+
+					if ( key === 'settings' ) {
+						return { toJSON: () => ( {} ) };
+					}
+
+					return undefined;
+				},
+			} as unknown as ElementView[ 'model' ];
+			view.isRendered = false;
+			view._abortController = new AbortController();
+			view.triggerMethod = jest.fn();
+			view.bindUIElements = jest.fn();
+			view.$el = { html: jest.fn() } as unknown as ElementView[ '$el' ];
+			view._ensureViewIsIntact = jest.fn();
+			view.resetChildViewContainer = jest.fn();
+
+			// Act
+			await view._renderTemplate();
+
+			// Assert
+			expect( utils.render ).toHaveBeenCalledWith( 'main', expect.objectContaining( { tag: 'div' } ) );
+		} );
+	} );
 } );
 
 describe( 'canBeTemplated', () => {

package/src/legacy/__tests__/list-type.test.ts

@@ -0,0 +1,89 @@
+import {
+	createNestedTemplatedElementType,
+	createNestedTemplatedElementView,
+} from '../create-nested-templated-element-type';
+import { elementsLegacyTypes } from '../init-legacy-views';
+import { initListType } from '../list-type';
+import type { ElementType, NestedTemplatedElementViewClass } from '../types';
+
+jest.mock( '../create-nested-templated-element-type', () => ( {
+	createNestedTemplatedElementType: jest.fn(),
+	createNestedTemplatedElementView: jest.fn(),
+} ) );
+
+const LIST_TYPE = 'e-list';
+const resetListType = () => Reflect.deleteProperty( elementsLegacyTypes, LIST_TYPE );
+
+const createMockBaseType = (): typeof ElementType => {
+	const MockBaseType = function MockBaseType() {};
+
+	MockBaseType.prototype.getType = () => LIST_TYPE;
+	MockBaseType.prototype.getView = () => function MockBaseView() {};
+
+	return MockBaseType as unknown as typeof ElementType;
+};
+
+const createMockBaseView = ( generatedViewIdRef: { current: number } ): NestedTemplatedElementViewClass => {
+	const MockBaseView = Object.assign( function BaseViewMock() {}, {
+		extend() {
+			return Object.assign( function ExtendedViewMock() {}, {
+				viewId: ++generatedViewIdRef.current,
+			} );
+		},
+	} );
+
+	return MockBaseView as unknown as NestedTemplatedElementViewClass;
+};
+
+const createMockOptions = () => ( {
+	type: LIST_TYPE,
+	renderer: {
+		register: jest.fn(),
+		render: jest.fn(),
+	},
+	element: {
+		twig_templates: {},
+		twig_main_template: 'main',
+		atomic_props_schema: {},
+		base_styles_dictionary: {},
+		default_html_tag: 'ul',
+		html_tag_follows_link: false,
+		support_nesting: true,
+	},
+} );
+
+describe( 'initListType', () => {
+	beforeEach( () => {
+		const generatedViewIdRef = { current: 0 };
+
+		jest.clearAllMocks();
+		resetListType();
+
+		jest.mocked( createNestedTemplatedElementType ).mockImplementation( () => createMockBaseType() );
+
+		jest.mocked( createNestedTemplatedElementView ).mockImplementation( () =>
+			createMockBaseView( generatedViewIdRef )
+		);
+	} );
+
+	afterEach( () => {
+		resetListType();
+	} );
+
+	it( 'should reuse the same view class for multiple list type instances', () => {
+		// Arrange
+		initListType();
+		const createListType = elementsLegacyTypes[ LIST_TYPE ];
+		const ElementType = createListType( createMockOptions() );
+
+		// Act
+		const typeInstance1 = new ElementType();
+		const typeInstance2 = new ElementType();
+		const viewClass1 = typeInstance1.getView();
+		const viewClass2 = typeInstance2.getView();
+
+		// Assert
+		expect( viewClass1 ).toBe( viewClass2 );
+		expect( createNestedTemplatedElementView ).toHaveBeenCalledTimes( 1 );
+	} );
+} );

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

@@ -1,5 +1,6 @@
 import { ELEMENT_STYLE_CHANGE_EVENT, type V1ElementModelProps } from '@elementor/editor-elements';
 
+import { computeHtmlTag } from '../renderers/compute-html-tag';
 import { type DomRenderer } from '../renderers/create-dom-renderer';
 import { signalizedProcess } from '../utils/signalized-process';
 import { createPendingElement } from './create-pending-element';
@@ -93,7 +94,7 @@ export function createNestedTemplatedElementView( {
 }: CreateNestedTemplatedElementViewOptions ): NestedTemplatedElementViewClass {
 	const legacyWindow = window as unknown as LegacyWindow;
 
-	const { templateKey, baseStylesDictionary, resolveProps } = setupTwigRenderer( {
+	const { templateKey, baseStylesDictionary, resolveProps, defaultHtmlTag, htmlTagFollowsLink } = setupTwigRenderer( {
 		type,
 		renderer,
 		element,
@@ -198,6 +199,7 @@ export function createNestedTemplatedElementView( {
 						interaction_id: this.getInteractionId(),
 						type,
 						settings: resolvedSettings,
+						tag: computeHtmlTag( resolvedSettings, defaultHtmlTag, { followLink: htmlTagFollowsLink } ),
 						base_styles: baseStylesDictionary,
 						editor_attributes: buildEditorAttributes( model ),
 						editor_classes: buildEditorClasses( model ),

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

@@ -1,5 +1,6 @@
 import { type V1ElementConfig } from '@elementor/editor-elements';
 
+import { computeHtmlTag } from '../renderers/compute-html-tag';
 import { type DomRenderer } from '../renderers/create-dom-renderer';
 import { signalizedProcess } from '../utils/signalized-process';
 import { createElementViewClassDeclaration } from './create-element-type';
@@ -27,7 +28,8 @@ export type CreateTemplatedElementTypeOptions = {
 
 export type TemplatedElementConfig = Required<
 	Pick< V1ElementConfig, 'twig_templates' | 'twig_main_template' | 'atomic_props_schema' | 'base_styles_dictionary' >
->;
+> &
+	Pick< V1ElementConfig, 'default_html_tag' | 'html_tag_follows_link' >;
 
 export function createTemplatedElementType( {
 	type,
@@ -69,7 +71,7 @@ export function createTemplatedElementView( {
 }: CreateTemplatedElementTypeOptions ): typeof TemplatedElementView {
 	const BaseView = createElementViewClassDeclaration();
 
-	const { templateKey, baseStylesDictionary, resolveProps } = setupTwigRenderer( {
+	const { templateKey, baseStylesDictionary, resolveProps, defaultHtmlTag, htmlTagFollowsLink } = setupTwigRenderer( {
 		type,
 		renderer,
 		element,
@@ -165,6 +167,7 @@ export function createTemplatedElementView( {
 						interaction_id: this.getInteractionId(),
 						type,
 						settings,
+						tag: computeHtmlTag( settings, defaultHtmlTag, { followLink: htmlTagFollowsLink } ),
 						base_styles: baseStylesDictionary,
 						...( this.getResolverRenderContext?.() ?? {} ),
 					};

package/src/legacy/list-type.ts

@@ -0,0 +1,63 @@
+import {
+	createNestedTemplatedElementType,
+	type CreateNestedTemplatedElementTypeOptions,
+	createNestedTemplatedElementView,
+} from './create-nested-templated-element-type';
+import { registerElementType } from './init-legacy-views';
+import type { ElementType, RenderContext } from './types';
+
+const LIST_TYPE = 'e-list';
+
+/**
+ * Initialize the e-list element type with custom render context.
+ */
+export function initListType() {
+	registerElementType( LIST_TYPE, ( options ) =>
+		createListType( options as CreateNestedTemplatedElementTypeOptions )
+	);
+}
+
+function createListType( options: CreateNestedTemplatedElementTypeOptions ): typeof ElementType {
+	const BaseType = createNestedTemplatedElementType( options );
+	let ListView: ReturnType< typeof createListView > | null = null;
+
+	return class extends BaseType {
+		getView() {
+			if ( ! ListView ) {
+				ListView = createListView( options );
+			}
+
+			return ListView;
+		}
+	};
+}
+
+function createListView( options: CreateNestedTemplatedElementTypeOptions ) {
+	const BaseView = createNestedTemplatedElementView( options );
+
+	return BaseView.extend( {
+		getRenderContext(): RenderContext | undefined {
+			const parentContext = this._parent?.getRenderContext?.();
+			const settings = this.model.get( 'settings' );
+			const showMarkersProp = settings?.get?.( 'show_markers' ) as unknown;
+			const showMarkers = ( showMarkersProp as { value?: boolean } )?.value ?? showMarkersProp ?? true;
+
+			return {
+				...parentContext,
+				show_markers: showMarkers,
+			};
+		},
+
+		getResolverRenderContext(): RenderContext | undefined {
+			const parentContext = this._parent?.getResolverRenderContext?.();
+			const settings = this.model.get( 'settings' );
+			const showMarkersProp = settings?.get?.( 'show_markers' ) as unknown;
+			const showMarkers = ( showMarkersProp as { value?: boolean } )?.value ?? showMarkersProp ?? true;
+
+			return {
+				...parentContext,
+				show_markers: showMarkers,
+			};
+		},
+	} );
+}

package/src/legacy/replacements/inline-editing/__tests__/inline-editing-eligibility.test.ts

@@ -13,10 +13,10 @@ const createUnionPropType = ( keys: string[] ): PropType =>
 	} ) as PropType;
 
 describe( 'isInlineEditingAllowed', () => {
-	it( 'should allow inline editing for html-v3 prop values', () => {
+	it( 'should allow inline editing for escaped-html prop values', () => {
 		expect(
 			isInlineEditingAllowed( {
-				rawValue: { $$type: 'html-v3', value: { content: { $$type: 'string', value: 'Hello' }, children: [] } },
+				rawValue: { $$type: 'escaped-html', value: 'Hello' },
 				propTypeFromSchema: null,
 			} )
 		).toBe( true );
@@ -40,11 +40,11 @@ describe( 'isInlineEditingAllowed', () => {
 		).toBe( false );
 	} );
 
-	it( 'should allow when value is unset but schema key is html-v3', () => {
+	it( 'should allow when value is unset but schema key is escaped-html', () => {
 		expect(
 			isInlineEditingAllowed( {
 				rawValue: undefined,
-				propTypeFromSchema: createPlainPropType( 'html-v3' ),
+				propTypeFromSchema: createPlainPropType( 'escaped-html' ),
 			} )
 		).toBe( true );
 	} );
@@ -67,16 +67,16 @@ describe( 'isInlineEditingAllowed', () => {
 		).toBe( false );
 	} );
 
-	it( 'should allow when value is unset and union schema includes html-v3', () => {
+	it( 'should allow when value is unset and union schema includes escaped-html', () => {
 		expect(
 			isInlineEditingAllowed( {
 				rawValue: undefined,
-				propTypeFromSchema: createUnionPropType( [ 'dynamic', 'html-v3' ] ),
+				propTypeFromSchema: createUnionPropType( [ 'dynamic', 'escaped-html' ] ),
 			} )
 		).toBe( true );
 	} );
 
-	it( 'should disallow when value is unset and union schema does not include html-v3/string', () => {
+	it( 'should disallow when value is unset and union schema does not include escaped-html/html-v3/string', () => {
 		expect(
 			isInlineEditingAllowed( {
 				rawValue: undefined,

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { getContainer, getElementLabel, getElementType } from '@elementor/editor-elements';
 import {
+	escapedHtmlPropTypeUtil,
 	htmlV3PropTypeUtil,
-	parseHtmlChildren,
 	type PropType,
 	type PropValue,
 	stringPropTypeUtil,
@@ -126,20 +126,33 @@ export default class InlineEditingReplacement extends ReplacementBase {
 
 	getExtractedContentValue() {
 		const propValue = this.getInlineEditablePropValue();
+
+		if ( escapedHtmlPropTypeUtil.isValid( propValue ) ) {
+			return escapedHtmlPropTypeUtil.extract( propValue ) ?? '';
+		}
+
 		const extracted = htmlV3PropTypeUtil.extract( propValue );
 
 		return stringPropTypeUtil.extract( extracted?.content ?? null ) ?? '';
 	}
 
+	createContentPropValue( value: string | null ): PropValue {
+		const content = value || '';
+		const propTypeKey = this.getInlineEditablePropTypeKey();
+
+		if ( propTypeKey === htmlV3PropTypeUtil.key ) {
+			return htmlV3PropTypeUtil.create( {
+				content: stringPropTypeUtil.create( content ),
+				children: [],
+			} );
+		}
+
+		return escapedHtmlPropTypeUtil.create( content );
+	}
+
 	setContentValue( value: string | null ) {
 		const settingKey = this.getInlineEditablePropertyName();
-		const html = value || '';
-		const parsed = parseHtmlChildren( html );
-
-		const valueToSave = htmlV3PropTypeUtil.create( {
-			content: parsed.content ? stringPropTypeUtil.create( parsed.content ) : null,
-			children: parsed.children,
-		} );
+		const valueToSave = this.createContentPropValue( value );
 
 		undoable(
 			{
@@ -174,7 +187,7 @@ export default class InlineEditingReplacement extends ReplacementBase {
 		}
 
 		if ( propType.kind === 'union' ) {
-			const textKeys = [ htmlV3PropTypeUtil.key, stringPropTypeUtil.key ];
+			const textKeys = [ escapedHtmlPropTypeUtil.key, htmlV3PropTypeUtil.key, stringPropTypeUtil.key ];
 
 			for ( const key of textKeys ) {
 				if ( propType.prop_types[ key ] ) {

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

@@ -1,4 +1,9 @@
-import { htmlV3PropTypeUtil, type PropType, stringPropTypeUtil } from '@elementor/editor-props';
+import {
+	escapedHtmlPropTypeUtil,
+	htmlV3PropTypeUtil,
+	type PropType,
+	stringPropTypeUtil,
+} from '@elementor/editor-props';
 
 type InlineEditingEligibilityArgs = {
 	rawValue: unknown;
@@ -9,7 +14,7 @@ const hasKey = ( propType: PropType ): propType is PropType & { key: unknown } =
 	return 'key' in propType;
 };
 
-const TEXT_PROP_TYPE_KEYS = new Set( [ htmlV3PropTypeUtil.key, stringPropTypeUtil.key ] );
+const TEXT_PROP_TYPE_KEYS = new Set( [ escapedHtmlPropTypeUtil.key, htmlV3PropTypeUtil.key, stringPropTypeUtil.key ] );
 
 const isCoreTextPropTypeKey = ( key: unknown ): boolean => {
 	return ( TEXT_PROP_TYPE_KEYS as Set< unknown > ).has( key );
@@ -36,5 +41,9 @@ export const isInlineEditingAllowed = ( { rawValue, propTypeFromSchema }: Inline
 		return isAllowedBySchema( propTypeFromSchema );
 	}
 
-	return htmlV3PropTypeUtil.isValid( rawValue ) || stringPropTypeUtil.isValid( rawValue );
+	return (
+		escapedHtmlPropTypeUtil.isValid( rawValue ) ||
+		htmlV3PropTypeUtil.isValid( rawValue ) ||
+		stringPropTypeUtil.isValid( rawValue )
+	);
 };

package/src/legacy/tabs-model-extensions.ts

@@ -1,4 +1,4 @@
-import { htmlV3PropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
+import { escapedHtmlPropTypeUtil } from '@elementor/editor-props';
 
 import { type ModelExtensions } from './create-nested-templated-element-type';
 import { registerModelExtensions } from './init-legacy-views';
@@ -23,10 +23,7 @@ const tabModelExtensions: ModelExtensions = {
 			...paragraphElement,
 			settings: {
 				...paragraphElement.settings,
-				paragraph: htmlV3PropTypeUtil.create( {
-					content: stringPropTypeUtil.create( `Tab ${ position }` ),
-					children: [],
-				} ),
+				paragraph: escapedHtmlPropTypeUtil.create( `Tab ${ position }` ),
 			},
 		};