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

package/dist/index.d.mts

@@ -77,7 +77,6 @@ declare class ElementView {
     $el: JQueryElement;
     el: HTMLElement;
     model: BackboneModel<ElementModel>;
-    _abortController: AbortController | null;
     collection: BackboneCollection<ElementModel>;
     children: {
         length: number;

package/dist/index.d.ts

@@ -77,7 +77,6 @@ declare class ElementView {
     $el: JQueryElement;
     el: HTMLElement;
     model: BackboneModel<ElementModel>;
-    _abortController: AbortController | null;
     collection: BackboneCollection<ElementModel>;
     children: {
         length: number;

package/dist/index.js

@@ -1762,9 +1762,9 @@ function createElementViewClassDeclaration() {
 var import_editor_elements4 = require("@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);
   });
@@ -1772,7 +1772,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();
@@ -1785,87 +1785,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);
   }
@@ -1881,9 +1812,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";
     }
@@ -1900,7 +1837,7 @@ function createTemplatedElementView({
       return this._parent?.getResolverRenderContext?.();
     }
     invalidateRenderCache() {
-      renderState.cacheState.invalidate();
+      this._lastResolvedSettingsHash = null;
     }
     render() {
       this._abortController?.abort();
@@ -1910,26 +1847,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;
@@ -2000,18 +1963,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();
@@ -2037,20 +2006,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 ?? [];
@@ -2075,13 +2071,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) {
@@ -3449,13 +3449,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: import_schema.z.string().describe("Error message if the composition building failed").optional(),
-  xmlStructure: import_schema.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: import_schema.z.string().describe("Instructions what to do next, Important to follow these instructions!").optional()
-};
 
 // src/mcp/tools/build-composition/tool.ts
 var initBuildCompositionsTool = (reg) => {
@@ -3471,7 +3464,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" }]
     },
@@ -3553,10 +3546,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
@@ -3566,8 +3559,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}
+`;
     }
   });
 };
@@ -3686,7 +3681,7 @@ var inputSchema2 = {
   elementType: import_schema3.z.string().describe("The type of the element to retreive the schema"),
   elementId: import_schema3.z.string().describe("The unique id of the element to configure")
 };
-var outputSchema2 = {
+var outputSchema = {
   success: import_schema3.z.boolean().describe(
     "Whether the configuration change was successful, only if propertyName and propertyValue are provided"
   )
@@ -3699,7 +3694,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 }
@@ -3797,7 +3792,7 @@ var import_schema5 = require("@elementor/schema");
 var schema = {
   elementId: import_schema5.z.string()
 };
-var outputSchema3 = {
+var outputSchema2 = {
   properties: import_schema5.z.record(import_schema5.z.string(), import_schema5.z.any()).describe("A record mapping PropTypes to their corresponding PropValues"),
   style: import_schema5.z.record(import_schema5.z.string(), import_schema5.z.any()).describe("A record mapping StyleSchema properties to their corresponding PropValues"),
   childElements: import_schema5.z.array(
@@ -3824,7 +3819,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