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

package/dist/index.mjs

@@ -1728,9 +1728,9 @@ function createElementViewClassDeclaration() {
 import { ELEMENT_STYLE_CHANGE_EVENT } from "@elementor/editor-elements";
 
 // src/legacy/twig-rendering-utils.ts
-function createTwigRenderState({ renderer, element }) {
+function setupTwigRenderer({ renderer, element }) {
   const templateKey = element.twig_main_template;
-  const cacheState = createRenderCacheState();
+  const baseStylesDictionary = element.base_styles_dictionary;
   Object.entries(element.twig_templates).forEach(([key, template]) => {
     renderer.register(key, template);
   });
@@ -1738,7 +1738,7 @@ function createTwigRenderState({ renderer, element }) {
     transformers: settingsTransformersRegistry,
     schema: element.atomic_props_schema
   });
-  return { templateKey, resolveProps, renderer, cacheState };
+  return { templateKey, baseStylesDictionary, resolveProps };
 }
 function createBeforeRender(view) {
   view._ensureViewIsIntact();
@@ -1751,87 +1751,18 @@ function createAfterRender(view) {
   view.isRendered = true;
   view.triggerMethod("render", view);
 }
-function createRenderCacheState() {
-  return {
-    lastResolvedSettingsHash: null,
-    domUpdateWasSkipped: false,
-    invalidate() {
-      this.lastResolvedSettingsHash = null;
-      this.domUpdateWasSkipped = false;
-    }
-  };
-}
-async function renderTwigTemplate({
-  view,
-  signal,
-  renderState,
-  buildContext,
-  attachContent,
-  afterSettingsResolve
-}) {
-  view.triggerMethod("before:render:template");
-  const { resolveProps, cacheState, renderer, templateKey } = renderState;
-  if (signal?.aborted) {
-    return;
-  }
-  const settings = view.model.get("settings").toJSON();
-  let resolvedSettings = await resolveProps({
-    props: settings,
-    signal,
-    renderContext: view.getResolverRenderContext?.()
+function rerenderExistingChildren(view) {
+  view.children?.each((childView) => {
+    childView.render();
   });
-  if (signal?.aborted) {
-    return;
-  }
-  if (afterSettingsResolve) {
-    resolvedSettings = afterSettingsResolve(resolvedSettings);
-  }
-  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) {
-    return;
-  }
-  attachContent(html);
-  view.bindUIElements();
-  view.triggerMethod("render:template");
 }
-function collectChildrenRenderPromises(children) {
+async function waitForChildrenToComplete(view) {
   const promises = [];
-  children?.each((childView) => {
+  view.children?.each((childView) => {
     if (childView._currentRenderPromise) {
       promises.push(childView._currentRenderPromise);
     }
   });
-  return promises;
-}
-async function renderChildrenWithOptimization({
-  children,
-  domUpdateWasSkipped,
-  renderChildren
-}) {
-  const shouldReuseChildren = domUpdateWasSkipped && !!children?.length;
-  if (shouldReuseChildren) {
-    rerenderExistingChildViews(children);
-  } else {
-    renderChildren();
-  }
-  const promises = collectChildrenRenderPromises(children);
-  await waitForChildrenToComplete(promises);
-}
-function rerenderExistingChildViews(children) {
-  children?.each((childView) => childView.render());
-}
-async function waitForChildrenToComplete(promises) {
   if (promises.length > 0) {
     await Promise.all(promises);
   }
@@ -1847,9 +1778,15 @@ function createTemplatedElementView({
   element
 }) {
   const BaseView = createElementViewClassDeclaration();
-  const renderState = createTwigRenderState({ renderer, element });
+  const { templateKey, baseStylesDictionary, resolveProps } = setupTwigRenderer({
+    type,
+    renderer,
+    element
+  });
   return class extends BaseView {
     _abortController = null;
+    _lastResolvedSettingsHash = null;
+    _domUpdateWasSkipped = false;
     getTemplateType() {
       return "twig";
     }
@@ -1866,7 +1803,7 @@ function createTemplatedElementView({
       return this._parent?.getResolverRenderContext?.();
     }
     invalidateRenderCache() {
-      renderState.cacheState.invalidate();
+      this._lastResolvedSettingsHash = null;
     }
     render() {
       this._abortController?.abort();
@@ -1876,26 +1813,52 @@ function createTemplatedElementView({
       return this._currentRenderPromise;
     }
     async _renderChildren() {
-      await renderChildrenWithOptimization({
-        children: this.children,
-        domUpdateWasSkipped: renderState.cacheState.domUpdateWasSkipped,
-        renderChildren: () => super._renderChildren()
-      });
+      if (this._shouldReuseChildren()) {
+        rerenderExistingChildren(this);
+      } else {
+        super._renderChildren();
+      }
+      await waitForChildrenToComplete(this);
+    }
+    _shouldReuseChildren() {
+      return this._domUpdateWasSkipped && this.children?.length > 0;
     }
     async _renderTemplate() {
-      await renderTwigTemplate({
-        view: this,
-        signal: this._abortController?.signal,
-        renderState,
-        buildContext: (resolvedSettings) => ({
+      this.triggerMethod("before:render:template");
+      const process = signalizedProcess(this._abortController?.signal).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: resolvedSettings,
-          base_styles: element.base_styles_dictionary
-        }),
-        attachContent: (html) => this.$el.html(html),
-        afterSettingsResolve: (settings) => this.afterSettingsResolve(settings)
+          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");
     }
     afterSettingsResolve(settings) {
       return settings;
@@ -1966,18 +1929,24 @@ function createNestedTemplatedElementView({
   element
 }) {
   const legacyWindow = window;
-  const renderState = createTwigRenderState({ renderer, element });
+  const { templateKey, baseStylesDictionary, resolveProps } = setupTwigRenderer({
+    type,
+    renderer,
+    element
+  });
   const AtomicElementBaseView = legacyWindow.elementor.modules.elements.views.createAtomicElementBase(type);
   const parentRenderChildren = AtomicElementBaseView.prototype._renderChildren;
   const parentOpenEditingPanel = AtomicElementBaseView.prototype._openEditingPanel;
   return AtomicElementBaseView.extend({
     _abortController: null,
+    _lastResolvedSettingsHash: null,
+    _domUpdateWasSkipped: false,
     template: false,
     getTemplateType() {
       return "twig";
     },
     invalidateRenderCache() {
-      renderState.cacheState.invalidate();
+      this._lastResolvedSettingsHash = null;
     },
     render() {
       this._abortController?.abort();
@@ -2003,20 +1972,47 @@ function createNestedTemplatedElementView({
     },
     async _renderTemplate() {
       const model = this.model;
-      await renderTwigTemplate({
-        view: this,
-        signal: this._abortController?.signal,
-        renderState,
-        buildContext: (resolvedSettings) => ({
+      this.triggerMethod("before:render:template");
+      const process = signalizedProcess(this._abortController?.signal).then((_, signal) => {
+        const settings = model.get("settings").toJSON();
+        return resolveProps({
+          props: settings,
+          signal,
+          renderContext: this.getResolverRenderContext?.()
+        });
+      }).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: model.get("id"),
           type,
-          settings: resolvedSettings,
-          base_styles: element.base_styles_dictionary,
+          settings,
+          base_styles: baseStylesDictionary,
           editor_attributes: buildEditorAttributes(model),
           editor_classes: buildEditorClasses(model)
-        }),
-        attachContent: (html) => this._attachTwigContent(html)
+        };
+        return renderer.render(templateKey, context);
+      }).then((html) => {
+        if (html === null) {
+          return;
+        }
+        this._attachTwigContent(html);
       });
+      await process.execute();
+      this.bindUIElements();
+      this.triggerMethod("render:template");
+    },
+    getRenderContext() {
+      return this._parent?.getRenderContext?.();
+    },
+    getResolverRenderContext() {
+      return this._parent?.getResolverRenderContext?.();
     },
     getChildType() {
       const allowedTypes = element.allowed_child_types ?? [];
@@ -2041,13 +2037,17 @@ function createNestedTemplatedElementView({
       oldEl.innerHTML = overlayHTML + newEl.innerHTML;
     },
     async _renderChildren() {
-      await renderChildrenWithOptimization({
-        children: this.children,
-        domUpdateWasSkipped: renderState.cacheState.domUpdateWasSkipped,
-        renderChildren: () => parentRenderChildren.call(this)
-      });
+      if (this._shouldReuseChildren()) {
+        rerenderExistingChildren(this);
+      } else {
+        parentRenderChildren.call(this);
+      }
+      await waitForChildrenToComplete(this);
       this._removeChildrenPlaceholder();
     },
+    _shouldReuseChildren() {
+      return this._domUpdateWasSkipped && this.children?.length > 0;
+    },
     _removeChildrenPlaceholder() {
       const el = this.$el.get(0);
       if (!el) {
@@ -3435,13 +3435,6 @@ var inputSchema = {
     `A record mapping element IDs to their styles configuration objects. Use the actual styles schema from [${STYLE_SCHEMA_URI}].`
   ).default({})
 };
-var outputSchema = {
-  errors: z.string().describe("Error message if the composition building failed").optional(),
-  xmlStructure: z.string().describe(
-    "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!").optional()
-};
 
 // src/mcp/tools/build-composition/tool.ts
 var initBuildCompositionsTool = (reg) => {
@@ -3457,7 +3450,7 @@ var initBuildCompositionsTool = (reg) => {
       { description: "Global Variables", uri: "elementor://global-variables" },
       { description: "Styles best practices", uri: BEST_PRACTICES_URI }
     ],
-    outputSchema,
+    // outputSchema: '',
     modelPreferences: {
       hints: [{ name: "claude-sonnet-4-5" }]
     },
@@ -3539,10 +3532,10 @@ ${errorMessages.join(
 Now that you have these errors, fix them and try again. Errors regarding configuration objects, please check against the PropType schemas`;
         throw new Error(errorText);
       }
-      return {
-        xmlStructure: generatedXML,
-        errors: errors?.length ? errors.map((e) => typeof e === "string" ? e : e.message).join("\n\n") : void 0,
-        llm_instructions: `The composition was built successfully with element IDs embedded in the XML.
+      if (errors.length) {
+        throw new Error(errors.map((e) => typeof e === "string" ? e : e.message).join("\n"));
+      }
+      return `The composition was built successfully with element IDs embedded in the XML.
 
 **CRITICAL NEXT STEPS** (Follow in order):
 1. **Apply Global Classes**: Use "apply-global-class" tool to apply the global classes you created BEFORE building this composition
@@ -3552,8 +3545,10 @@ Now that you have these errors, fix them and try again. Errors regarding configu
 2. **Fine-tune if needed**: Use "configure-element" tool only for element-specific adjustments that don't warrant global classes
 
 Remember: Global classes ensure design consistency and reusability. Don't skip applying them!
-`
-      };
+
+Updated XML structure:
+${generatedXML}
+`;
     }
   });
 };
@@ -3672,7 +3667,7 @@ var inputSchema2 = {
   elementType: z2.string().describe("The type of the element to retreive the schema"),
   elementId: z2.string().describe("The unique id of the element to configure")
 };
-var outputSchema2 = {
+var outputSchema = {
   success: z2.boolean().describe(
     "Whether the configuration change was successful, only if propertyName and propertyValue are provided"
   )
@@ -3685,7 +3680,7 @@ var initConfigureElementTool = (reg) => {
     name: "configure-element",
     description: configureElementToolPrompt,
     schema: inputSchema2,
-    outputSchema: outputSchema2,
+    outputSchema,
     requiredResources: [
       { description: "Widgets schema", uri: WIDGET_SCHEMA_URI },
       { description: "Styles schema", uri: STYLE_SCHEMA_URI }
@@ -3783,7 +3778,7 @@ import { z as z3 } from "@elementor/schema";
 var schema = {
   elementId: z3.string()
 };
-var outputSchema3 = {
+var outputSchema2 = {
   properties: z3.record(z3.string(), z3.any()).describe("A record mapping PropTypes to their corresponding PropValues"),
   style: z3.record(z3.string(), z3.any()).describe("A record mapping StyleSchema properties to their corresponding PropValues"),
   childElements: z3.array(
@@ -3810,7 +3805,7 @@ var initGetElementConfigTool = (reg) => {
     name: "get-element-configuration-values",
     description: "Retrieve the element's configuration PropValues for a specific element by unique ID.",
     schema,
-    outputSchema: outputSchema3,
+    outputSchema: outputSchema2,
     modelPreferences: {
       intelligencePriority: 0.6,
       speedPriority: 0.9

package/package.json

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

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,
+	rerenderExistingChildren,
+	setupTwigRenderer,
+	waitForChildrenToComplete,
 } from './twig-rendering-utils';
 import { type ElementType, type ElementView, type LegacyWindow } from './types';
 
@@ -91,7 +91,11 @@ export function createNestedTemplatedElementView( {
 }: CreateNestedTemplatedElementViewOptions ): typeof ElementView {
 	const legacyWindow = window as unknown as LegacyWindow;
 
-	const renderState = createTwigRenderState( { renderer, element } );
+	const { templateKey, baseStylesDictionary, resolveProps } = setupTwigRenderer( {
+		type,
+		renderer,
+		element,
+	} );
 
 	const AtomicElementBaseView = legacyWindow.elementor.modules.elements.views.createAtomicElementBase( type );
 	const parentRenderChildren = AtomicElementBaseView.prototype._renderChildren;
@@ -99,6 +103,8 @@ export function createNestedTemplatedElementView( {
 
 	return AtomicElementBaseView.extend( {
 		_abortController: null as AbortController | null,
+		_lastResolvedSettingsHash: null as string | null,
+		_domUpdateWasSkipped: false,
 
 		template: false,
 
@@ -107,7 +113,7 @@ export function createNestedTemplatedElementView( {
 		},
 
 		invalidateRenderCache() {
-			renderState.cacheState.invalidate();
+			this._lastResolvedSettingsHash = null;
 		},
 
 		render() {
@@ -117,6 +123,7 @@ 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() );
@@ -149,20 +156,61 @@ export function createNestedTemplatedElementView( {
 		async _renderTemplate() {
 			const model = this.model;
 
-			await renderTwigTemplate( {
-				view: this,
-				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 ),
-				} ),
-				attachContent: ( html: string ) => this._attachTwigContent( html ),
-			} );
+			this.triggerMethod( 'before:render:template' );
+
+			const process = signalizedProcess( this._abortController?.signal as AbortSignal )
+				.then( ( _, signal ) => {
+					const settings = model.get( 'settings' ).toJSON();
+					return resolveProps( {
+						props: settings,
+						signal,
+						renderContext: this.getResolverRenderContext?.(),
+					} );
+				} )
+				.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: model.get( 'id' ),
+						type,
+						settings,
+						base_styles: baseStylesDictionary,
+						editor_attributes: buildEditorAttributes( model ),
+						editor_classes: buildEditorClasses( model ),
+					};
+
+					return renderer.render( templateKey, context );
+				} )
+				.then( ( html ) => {
+					if ( html === null ) {
+						return;
+					}
+
+					this._attachTwigContent( html );
+				} );
+
+			await process.execute();
+
+			this.bindUIElements();
+
+			this.triggerMethod( 'render:template' );
+		},
+
+		getRenderContext() {
+			return this._parent?.getRenderContext?.();
+		},
+
+		getResolverRenderContext() {
+			return this._parent?.getResolverRenderContext?.();
 		},
 
 		getChildType(): string[] {
@@ -197,15 +245,20 @@ export function createNestedTemplatedElementView( {
 		},
 
 		async _renderChildren() {
-			await renderChildrenWithOptimization( {
-				children: this.children,
-				domUpdateWasSkipped: renderState.cacheState.domUpdateWasSkipped,
-				renderChildren: () => parentRenderChildren.call( this ),
-			} );
+			if ( this._shouldReuseChildren() ) {
+				rerenderExistingChildren( this );
+			} else {
+				parentRenderChildren.call( this );
+			}
 
+			await waitForChildrenToComplete( this );
 			this._removeChildrenPlaceholder();
 		},
 
+		_shouldReuseChildren() {
+			return this._domUpdateWasSkipped && this.children?.length > 0;
+		},
+
 		_removeChildrenPlaceholder() {
 			const el = this.$el.get( 0 );
 			if ( ! el ) {