@elementor/editor-canvas 4.0.0-551 → 4.0.0-564

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

@@ -6,9 +6,9 @@ import { canBeTemplated, type TemplatedElementConfig } from './create-templated-
 import {
 	createAfterRender,
 	createBeforeRender,
+	createTwigRenderState,
+	renderChildrenWithOptimization,
 	renderTwigTemplate,
-	setupTwigRenderer,
-	type TwigRenderContext,
 } from './twig-rendering-utils';
 import { type ElementType, type ElementView, type LegacyWindow } from './types';
 
@@ -91,11 +91,7 @@ export function createNestedTemplatedElementView( {
 }: CreateNestedTemplatedElementViewOptions ): typeof ElementView {
 	const legacyWindow = window as unknown as LegacyWindow;
 
-	const { templateKey, baseStylesDictionary, resolveProps } = setupTwigRenderer( {
-		type,
-		renderer,
-		element,
-	} );
+	const renderState = createTwigRenderState( { renderer, element } );
 
 	const AtomicElementBaseView = legacyWindow.elementor.modules.elements.views.createAtomicElementBase( type );
 	const parentRenderChildren = AtomicElementBaseView.prototype._renderChildren;
@@ -110,6 +106,10 @@ export function createNestedTemplatedElementView( {
 			return 'twig';
 		},
 
+		invalidateRenderCache() {
+			renderState.cacheState.invalidate();
+		},
+
 		render() {
 			this._abortController?.abort();
 			this._abortController = new AbortController();
@@ -117,7 +117,6 @@ export function createNestedTemplatedElementView( {
 			const process = signalizedProcess( this._abortController.signal )
 				.then( () => this._beforeRender() )
 				.then( () => this._renderTemplate() )
-				// Dispatch the render event after the template is ready
 				.then( () => this._onTemplateReady() )
 				.then( () => this._renderChildren() )
 				.then( () => this._afterRender() );
@@ -152,14 +151,13 @@ export function createNestedTemplatedElementView( {
 
 			await renderTwigTemplate( {
 				view: this,
-				signal: this._abortController?.signal as AbortSignal,
-				resolveProps,
-				templateKey,
-				baseStylesDictionary,
-				type,
-				renderer,
-				buildContext: ( context: TwigRenderContext ) => ( {
-					...context,
+				signal: this._abortController?.signal,
+				renderState,
+				buildContext: ( resolvedSettings ) => ( {
+					id: model.get( 'id' ),
+					type,
+					settings: resolvedSettings,
+					base_styles: element.base_styles_dictionary,
 					editor_attributes: buildEditorAttributes( model ),
 					editor_classes: buildEditorClasses( model ),
 				} ),
@@ -199,18 +197,12 @@ export function createNestedTemplatedElementView( {
 		},
 
 		async _renderChildren() {
-			parentRenderChildren.call( this );
-
-			const renderPromises: Promise< void >[] = [];
-
-			this.children.each( ( childView: ElementView ) => {
-				if ( childView._currentRenderPromise ) {
-					renderPromises.push( childView._currentRenderPromise );
-				}
+			await renderChildrenWithOptimization( {
+				children: this.children,
+				domUpdateWasSkipped: renderState.cacheState.domUpdateWasSkipped,
+				renderChildren: () => parentRenderChildren.call( this ),
 			} );
 
-			await Promise.all( renderPromises );
-
 			this._removeChildrenPlaceholder();
 		},
 

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

@@ -6,7 +6,9 @@ import { createElementViewClassDeclaration } from './create-element-type';
 import {
 	createAfterRender,
 	createBeforeRender,
-	setupTwigRenderer,
+	createTwigRenderState,
+	renderChildrenWithOptimization,
+	renderTwigTemplate,
 	type TwigViewInterface,
 } from './twig-rendering-utils';
 import {
@@ -67,17 +69,10 @@ export function createTemplatedElementView( {
 }: CreateTemplatedElementTypeOptions ): typeof ElementView {
 	const BaseView = createElementViewClassDeclaration();
 
-	const { templateKey, baseStylesDictionary, resolveProps } = setupTwigRenderer( {
-		type,
-		renderer,
-		element,
-	} );
+	const renderState = createTwigRenderState( { renderer, element } );
 
 	return class extends BaseView {
-		#abortController: AbortController | null = null;
-		#childrenRenderPromises: Promise< void >[] = [];
-		#lastResolvedSettingsHash: string | null = null;
-		#domUpdateWasSkipped = false;
+		_abortController: AbortController | null = null;
 
 		getTemplateType() {
 			return 'twig';
@@ -100,14 +95,14 @@ export function createTemplatedElementView( {
 		}
 
 		invalidateRenderCache() {
-			this.#lastResolvedSettingsHash = null;
+			renderState.cacheState.invalidate();
 		}
 
 		render() {
-			this.#abortController?.abort();
-			this.#abortController = new AbortController();
+			this._abortController?.abort();
+			this._abortController = new AbortController();
 
-			const process = signalizedProcess( this.#abortController.signal )
+			const process = signalizedProcess( this._abortController.signal )
 				.then( () => this._beforeRender() )
 				.then( () => this._renderTemplate() )
 				.then( () => this._renderChildren() )
@@ -119,92 +114,27 @@ export function createTemplatedElementView( {
 		}
 
 		async _renderChildren() {
-			this.#childrenRenderPromises = [];
-
-			// Optimize rendering by reusing existing child views instead of recreating them.
-			if ( this.#shouldReuseChildren() ) {
-				this.#rerenderExistingChildren();
-			} else {
-				super._renderChildren();
-			}
-
-			this.#collectChildrenRenderPromises();
-			await this._waitForChildrenToComplete();
-		}
-
-		#shouldReuseChildren() {
-			return this.#domUpdateWasSkipped && this.children?.length > 0;
-		}
-
-		#rerenderExistingChildren() {
-			this.children?.each( ( childView: ElementView ) => {
-				childView.render();
-			} );
-		}
-
-		#collectChildrenRenderPromises() {
-			this.children?.each( ( childView: ElementView ) => {
-				if ( childView._currentRenderPromise ) {
-					this.#childrenRenderPromises.push( childView._currentRenderPromise );
-				}
+			await renderChildrenWithOptimization( {
+				children: this.children,
+				domUpdateWasSkipped: renderState.cacheState.domUpdateWasSkipped,
+				renderChildren: () => super._renderChildren(),
 			} );
 		}
 
-		async _waitForChildrenToComplete() {
-			if ( this.#childrenRenderPromises.length > 0 ) {
-				await Promise.all( this.#childrenRenderPromises );
-			}
-		}
-
 		async _renderTemplate() {
-			this.triggerMethod( 'before:render:template' );
-
-			const process = signalizedProcess( this.#abortController?.signal as AbortSignal )
-				.then( ( _, signal ) => {
-					const settings = this.model.get( 'settings' ).toJSON();
-					return resolveProps( {
-						props: settings,
-						signal,
-						renderContext: this.getResolverRenderContext(),
-					} );
-				} )
-				.then( ( settings ) => {
-					return this.afterSettingsResolve( settings );
-				} )
-				.then( async ( settings ) => {
-					const settingsHash = JSON.stringify( settings );
-					const settingsChanged = settingsHash !== this.#lastResolvedSettingsHash;
-
-					if ( ! settingsChanged && this.isRendered ) {
-						this.#domUpdateWasSkipped = true;
-						return null;
-					}
-					this.#domUpdateWasSkipped = false;
-
-					this.#lastResolvedSettingsHash = settingsHash;
-
-					const context = {
-						id: this.model.get( 'id' ),
-						type,
-						settings,
-						base_styles: baseStylesDictionary,
-					};
-
-					return renderer.render( templateKey, context );
-				} )
-				.then( ( html ) => {
-					if ( html === null ) {
-						return;
-					}
-
-					this.$el.html( html );
-				} );
-
-			await process.execute();
-
-			this.bindUIElements();
-
-			this.triggerMethod( 'render:template' );
+			await renderTwigTemplate( {
+				view: this,
+				signal: this._abortController?.signal,
+				renderState,
+				buildContext: ( resolvedSettings ) => ( {
+					id: this.model.get( 'id' ),
+					type,
+					settings: resolvedSettings,
+					base_styles: element.base_styles_dictionary,
+				} ),
+				attachContent: ( html: string ) => this.$el.html( html ),
+				afterSettingsResolve: ( settings ) => this.afterSettingsResolve( settings ),
+			} );
 		}
 
 		afterSettingsResolve( settings: { [ key: string ]: unknown } ) {

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

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

@@ -56,9 +56,6 @@ export const CanvasInlineEditor = ( {
 			<InlineEditingOverlay expectedTag={ expectedTag } rootElement={ rootElement } id={ id } />
 			<style>
 				{ `
-			.${ EDITOR_WRAPPER_SELECTOR }, .${ EDITOR_WRAPPER_SELECTOR } > * {
-				height: 100%;
-			}
 			.ProseMirror > * {
 				height: 100%;
 			}

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

@@ -1,7 +1,13 @@
 import * as React from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { getContainer, getElementLabel, getElementType } from '@elementor/editor-elements';
-import { htmlPropTypeUtil, type PropType, type PropValue, stringPropTypeUtil } from '@elementor/editor-props';
+import {
+	htmlV2PropTypeUtil,
+	parseHtmlChildren,
+	type PropType,
+	type PropValue,
+	stringPropTypeUtil,
+} from '@elementor/editor-props';
 import { __privateRunCommandSync as runCommandSync, getCurrentEditMode, undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
@@ -122,12 +128,18 @@ export default class InlineEditingReplacement extends ReplacementBase {
 	getExtractedContentValue() {
 		const propValue = this.getInlineEditablePropValue();
 
-		return htmlPropTypeUtil.extract( propValue ) ?? '';
+		return htmlV2PropTypeUtil.extract( propValue )?.content ?? '';
 	}
 
 	setContentValue( value: string | null ) {
 		const settingKey = this.getInlineEditablePropertyName();
-		const valueToSave = htmlPropTypeUtil.create( value || '' );
+		const html = value || '';
+		const parsed = parseHtmlChildren( html );
+
+		const valueToSave = htmlV2PropTypeUtil.create( {
+			content: parsed.content || null,
+			children: parsed.children,
+		} );
 
 		undoable(
 			{
@@ -162,12 +174,12 @@ export default class InlineEditingReplacement extends ReplacementBase {
 		}
 
 		if ( propType.kind === 'union' ) {
-			if ( propType.prop_types[ htmlPropTypeUtil.key ] ) {
-				return htmlPropTypeUtil.key;
-			}
+			const textKeys = [ htmlV2PropTypeUtil.key, stringPropTypeUtil.key ];
 
-			if ( propType.prop_types[ stringPropTypeUtil.key ] ) {
-				return stringPropTypeUtil.key;
+			for ( const key of textKeys ) {
+				if ( propType.prop_types[ key ] ) {
+					return key;
+				}
 			}
 
 			return null;

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

@@ -1,4 +1,4 @@
-import { htmlPropTypeUtil, type PropType, stringPropTypeUtil } from '@elementor/editor-props';
+import { htmlV2PropTypeUtil, type PropType, stringPropTypeUtil } from '@elementor/editor-props';
 
 type InlineEditingEligibilityArgs = {
 	rawValue: unknown;
@@ -9,8 +9,10 @@ const hasKey = ( propType: PropType ): propType is PropType & { key: unknown } =
 	return 'key' in propType;
 };
 
+const TEXT_PROP_TYPE_KEYS = new Set( [ htmlV2PropTypeUtil.key, stringPropTypeUtil.key ] );
+
 const isCoreTextPropTypeKey = ( key: unknown ): boolean => {
-	return key === htmlPropTypeUtil.key || key === stringPropTypeUtil.key;
+	return ( TEXT_PROP_TYPE_KEYS as Set< unknown > ).has( key );
 };
 
 const isAllowedBySchema = ( propTypeFromSchema: PropType | null ): boolean => {
@@ -26,9 +28,7 @@ const isAllowedBySchema = ( propTypeFromSchema: PropType | null ): boolean => {
 		return false;
 	}
 
-	return Boolean(
-		propTypeFromSchema.prop_types[ htmlPropTypeUtil.key ] || propTypeFromSchema.prop_types[ stringPropTypeUtil.key ]
-	);
+	return [ ...TEXT_PROP_TYPE_KEYS ].some( ( key ) => propTypeFromSchema.prop_types[ key ] );
 };
 
 export const isInlineEditingAllowed = ( { rawValue, propTypeFromSchema }: InlineEditingEligibilityArgs ): boolean => {
@@ -36,5 +36,5 @@ export const isInlineEditingAllowed = ( { rawValue, propTypeFromSchema }: Inline
 		return isAllowedBySchema( propTypeFromSchema );
 	}
 
-	return htmlPropTypeUtil.isValid( rawValue ) || stringPropTypeUtil.isValid( rawValue );
+	return htmlV2PropTypeUtil.isValid( rawValue ) || stringPropTypeUtil.isValid( rawValue );
 };

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

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

package/src/legacy/twig-rendering-utils.ts

@@ -5,42 +5,26 @@ import { createPropsResolver, type PropsResolver } from '../renderers/create-pro
 import { settingsTransformersRegistry } from '../settings-transformers-registry';
 import { type ElementView, type RenderContext } from './types';
 
-export type TwigElementConfig = Required<
+type TwigElementConfig = Required<
 	Pick< V1ElementConfig, 'twig_templates' | 'twig_main_template' | 'atomic_props_schema' | 'base_styles_dictionary' >
 >;
 
-export type TwigRenderContext = {
-	id: string;
-	type: string;
-	settings: Record< string, unknown >;
-	base_styles: Record< string, unknown >;
-	[ key: string ]: unknown;
+type TwigRenderState = {
+	templateKey: string;
+	resolveProps: PropsResolver;
+	renderer: DomRenderer;
+	cacheState: RenderCacheState;
 };
 
-export type SetupTwigRendererOptions = {
-	type: string;
+type CreateTwigRenderStateOptions = {
 	renderer: DomRenderer;
 	element: TwigElementConfig;
 };
 
-export type SetupTwigRendererResult = {
-	templateKey: string;
-	baseStylesDictionary: Record< string, unknown >;
-	resolveProps: PropsResolver;
-};
-
-export function canBeTwigTemplated( element: Partial< TwigElementConfig > ): element is TwigElementConfig {
-	return !! (
-		element.atomic_props_schema &&
-		element.twig_templates &&
-		element.twig_main_template &&
-		element.base_styles_dictionary
-	);
-}
-
-export function setupTwigRenderer( { renderer, element }: SetupTwigRendererOptions ): SetupTwigRendererResult {
+export function createTwigRenderState( { renderer, element }: CreateTwigRenderStateOptions ): TwigRenderState {
 	const templateKey = element.twig_main_template;
-	const baseStylesDictionary = element.base_styles_dictionary;
+
+	const cacheState = createRenderCacheState();
 
 	Object.entries( element.twig_templates ).forEach( ( [ key, template ] ) => {
 		renderer.register( key, template );
@@ -51,7 +35,7 @@ export function setupTwigRenderer( { renderer, element }: SetupTwigRendererOptio
 		schema: element.atomic_props_schema,
 	} );
 
-	return { templateKey, baseStylesDictionary, resolveProps };
+	return { templateKey, resolveProps, renderer, cacheState };
 }
 
 export interface TwigViewInterface extends Omit< ElementView, 'getResolverRenderContext' > {
@@ -72,60 +56,87 @@ export function createAfterRender< TView extends TwigViewInterface >( view: TVie
 	view.triggerMethod( 'render', view );
 }
 
+type RenderCacheState = {
+	lastResolvedSettingsHash: string | null;
+	domUpdateWasSkipped: boolean;
+	invalidate: () => void;
+};
+
+export function createRenderCacheState(): RenderCacheState {
+	return {
+		lastResolvedSettingsHash: null,
+		domUpdateWasSkipped: false,
+		invalidate() {
+			this.lastResolvedSettingsHash = null;
+			this.domUpdateWasSkipped = false;
+		},
+	};
+}
+
+type TwigRenderContext = {
+	id: string;
+	type: string;
+	settings: Record< string, unknown >;
+	base_styles: Record< string, unknown >;
+	[ key: string ]: unknown;
+};
+
 export type RenderTwigTemplateOptions< TView extends TwigViewInterface > = {
 	view: TView;
-	signal: AbortSignal;
-	resolveProps: PropsResolver;
-	templateKey: string;
-	baseStylesDictionary: Record< string, unknown >;
-	type: string;
-	renderer: DomRenderer;
-	buildContext?: ( context: TwigRenderContext ) => TwigRenderContext;
+	signal?: AbortSignal;
+	renderState: TwigRenderState;
+	buildContext: ( resolvedSettings: Record< string, unknown > ) => TwigRenderContext;
 	attachContent: ( html: string ) => void;
+	afterSettingsResolve?: ( settings: Record< string, unknown > ) => Record< string, unknown >;
 };
 
 export async function renderTwigTemplate< TView extends TwigViewInterface >( {
 	view,
 	signal,
-	resolveProps,
-	templateKey,
-	baseStylesDictionary,
-	type,
-	renderer,
+	renderState,
 	buildContext,
 	attachContent,
+	afterSettingsResolve,
 }: RenderTwigTemplateOptions< TView > ): Promise< void > {
 	view.triggerMethod( 'before:render:template' );
+	const { resolveProps, cacheState, renderer, templateKey } = renderState;
 
-	if ( signal.aborted ) {
+	if ( signal?.aborted ) {
 		return;
 	}
 
 	const settings = view.model.get( 'settings' ).toJSON();
-	const resolvedSettings = await resolveProps( {
+	let resolvedSettings = await resolveProps( {
 		props: settings,
 		signal,
 		renderContext: view.getResolverRenderContext?.(),
 	} );
 
-	if ( signal.aborted ) {
+	if ( signal?.aborted ) {
 		return;
 	}
 
-	let context: TwigRenderContext = {
-		id: view.model.get( 'id' ),
-		type,
-		settings: resolvedSettings,
-		base_styles: baseStylesDictionary,
-	};
+	if ( afterSettingsResolve ) {
+		resolvedSettings = afterSettingsResolve( resolvedSettings );
+	}
 
-	if ( buildContext ) {
-		context = buildContext( context );
+	const settingsHash = JSON.stringify( resolvedSettings );
+	const settingsChanged = settingsHash !== cacheState.lastResolvedSettingsHash;
+
+	if ( ! settingsChanged && view.isRendered ) {
+		cacheState.domUpdateWasSkipped = true;
+		view.bindUIElements();
+		view.triggerMethod( 'render:template' );
+		return;
 	}
 
+	cacheState.domUpdateWasSkipped = false;
+	cacheState.lastResolvedSettingsHash = settingsHash;
+
+	const context = buildContext( resolvedSettings );
 	const html = await renderer.render( templateKey, context );
 
-	if ( signal.aborted ) {
+	if ( signal?.aborted ) {
 		return;
 	}
 
@@ -134,3 +145,51 @@ export async function renderTwigTemplate< TView extends TwigViewInterface >( {
 	view.bindUIElements();
 	view.triggerMethod( 'render:template' );
 }
+
+export type ChildrenCollection = ElementView[ 'children' ];
+
+export function collectChildrenRenderPromises( children: ChildrenCollection | undefined ): Promise< void >[] {
+	const promises: Promise< void >[] = [];
+
+	children?.each( ( childView: ElementView ) => {
+		if ( childView._currentRenderPromise ) {
+			promises.push( childView._currentRenderPromise );
+		}
+	} );
+
+	return promises;
+}
+
+type RenderChildrenOptions = {
+	children: ChildrenCollection | undefined;
+	domUpdateWasSkipped: boolean;
+	renderChildren: () => void;
+};
+
+export async function renderChildrenWithOptimization( {
+	children,
+	domUpdateWasSkipped,
+	renderChildren,
+}: RenderChildrenOptions ): Promise< void > {
+	// Safe side: when children is empty, fall back to original renderChildren function to handle emptyView.
+	const shouldReuseChildren = domUpdateWasSkipped && !! children?.length;
+
+	if ( shouldReuseChildren ) {
+		rerenderExistingChildViews( children );
+	} else {
+		renderChildren();
+	}
+
+	const promises = collectChildrenRenderPromises( children );
+	await waitForChildrenToComplete( promises );
+}
+
+function rerenderExistingChildViews( children: ChildrenCollection | undefined ) {
+	children?.each( ( childView ) => childView.render() );
+}
+
+async function waitForChildrenToComplete( promises: Promise< void >[] ): Promise< void > {
+	if ( promises.length > 0 ) {
+		await Promise.all( promises );
+	}
+}

package/src/legacy/types.ts

@@ -74,6 +74,8 @@ export declare class ElementView {
 
 	model: BackboneModel< ElementModel >;
 
+	_abortController: AbortController | null;
+
 	collection: BackboneCollection< ElementModel >;
 
 	children: {

package/src/mcp/tools/build-composition/schema.ts

@@ -35,5 +35,8 @@ export const outputSchema = {
 			'The built XML structure as a string. Must use this XML after completion of building the composition, it contains real IDs.'
 		)
 		.optional(),
-	llm_instructions: z.string().describe( 'Instructions what to do next, Important to follow these instructions!' ),
+	llm_instructions: z
+		.string()
+		.describe( 'Instructions what to do next, Important to follow these instructions!' )
+		.optional(),
 };

package/src/renderers/__tests__/create-dom-renderer.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable testing-library/render-result-naming-convention */
 import { createDomRenderer } from '../create-dom-renderer';
 
 describe( 'createDomRenderer', () => {

package/src/renderers/__tests__/create-styles-renderer.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable testing-library/render-result-naming-convention */
 import type { BreakpointsMap } from '@elementor/editor-responsive';
 import { encodeString } from '@elementor/utils';
 

package/src/transformers/settings/html-v2-transformer.ts

@@ -0,0 +1,10 @@
+import { createTransformer } from '../create-transformer';
+
+type HtmlV2Value = {
+	content: string | null;
+	children: Record< string, unknown >;
+};
+
+export const htmlV2Transformer = createTransformer( ( value: HtmlV2Value ) => {
+	return value?.content ?? '';
+} );