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

package/dist/index.js

@@ -1238,6 +1238,11 @@ var dateTimeTransformer = createTransformer((values) => {
   }).join(" ");
 });
 
+// src/transformers/settings/html-v2-transformer.ts
+var htmlV2Transformer = createTransformer((value) => {
+  return value?.content ?? "";
+});
+
 // src/transformers/settings/link-transformer.ts
 var linkTransformer = createTransformer(({ destination, isTargetBlank, tag }) => {
   return {
@@ -1292,7 +1297,7 @@ var plainTransformer = createTransformer((value) => {
 
 // src/init-settings-transformers.ts
 function initSettingsTransformers() {
-  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).registerFallback(plainTransformer);
+  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).registerFallback(plainTransformer);
 }
 
 // src/transformers/styles/background-color-overlay-transformer.ts
@@ -1780,46 +1785,21 @@ function createAfterRender(view) {
   view.isRendered = true;
   view.triggerMethod("render", view);
 }
-async function renderTwigTemplate({
-  view,
-  signal,
-  resolveProps,
-  templateKey,
-  baseStylesDictionary,
-  type,
-  renderer,
-  buildContext,
-  attachContent
-}) {
-  view.triggerMethod("before:render:template");
-  if (signal.aborted) {
-    return;
-  }
-  const settings = view.model.get("settings").toJSON();
-  const resolvedSettings = await resolveProps({
-    props: settings,
-    signal,
-    renderContext: view.getResolverRenderContext?.()
+function rerenderExistingChildren(view) {
+  view.children?.each((childView) => {
+    childView.render();
   });
-  if (signal.aborted) {
-    return;
-  }
-  let context = {
-    id: view.model.get("id"),
-    type,
-    settings: resolvedSettings,
-    base_styles: baseStylesDictionary
-  };
-  if (buildContext) {
-    context = buildContext(context);
-  }
-  const html = await renderer.render(templateKey, context);
-  if (signal.aborted) {
-    return;
+}
+async function waitForChildrenToComplete(view) {
+  const promises = [];
+  view.children?.each((childView) => {
+    if (childView._currentRenderPromise) {
+      promises.push(childView._currentRenderPromise);
+    }
+  });
+  if (promises.length > 0) {
+    await Promise.all(promises);
   }
-  attachContent(html);
-  view.bindUIElements();
-  view.triggerMethod("render:template");
 }
 
 // src/legacy/create-templated-element-type.ts
@@ -1838,10 +1818,9 @@ function createTemplatedElementView({
     element
   });
   return class extends BaseView {
-    #abortController = null;
-    #childrenRenderPromises = [];
-    #lastResolvedSettingsHash = null;
-    #domUpdateWasSkipped = false;
+    _abortController = null;
+    _lastResolvedSettingsHash = null;
+    _domUpdateWasSkipped = false;
     getTemplateType() {
       return "twig";
     }
@@ -1858,48 +1837,29 @@ function createTemplatedElementView({
       return this._parent?.getResolverRenderContext?.();
     }
     invalidateRenderCache() {
-      this.#lastResolvedSettingsHash = null;
+      this._lastResolvedSettingsHash = null;
     }
     render() {
-      this.#abortController?.abort();
-      this.#abortController = new AbortController();
-      const process = signalizedProcess(this.#abortController.signal).then(() => this._beforeRender()).then(() => this._renderTemplate()).then(() => this._renderChildren()).then(() => this._afterRender());
+      this._abortController?.abort();
+      this._abortController = new AbortController();
+      const process = signalizedProcess(this._abortController.signal).then(() => this._beforeRender()).then(() => this._renderTemplate()).then(() => this._renderChildren()).then(() => this._afterRender());
       this._currentRenderPromise = process.execute();
       return this._currentRenderPromise;
     }
     async _renderChildren() {
-      this.#childrenRenderPromises = [];
-      if (this.#shouldReuseChildren()) {
-        this.#rerenderExistingChildren();
+      if (this._shouldReuseChildren()) {
+        rerenderExistingChildren(this);
       } else {
         super._renderChildren();
       }
-      this.#collectChildrenRenderPromises();
-      await this._waitForChildrenToComplete();
+      await waitForChildrenToComplete(this);
     }
-    #shouldReuseChildren() {
-      return this.#domUpdateWasSkipped && this.children?.length > 0;
-    }
-    #rerenderExistingChildren() {
-      this.children?.each((childView) => {
-        childView.render();
-      });
-    }
-    #collectChildrenRenderPromises() {
-      this.children?.each((childView) => {
-        if (childView._currentRenderPromise) {
-          this.#childrenRenderPromises.push(childView._currentRenderPromise);
-        }
-      });
-    }
-    async _waitForChildrenToComplete() {
-      if (this.#childrenRenderPromises.length > 0) {
-        await Promise.all(this.#childrenRenderPromises);
-      }
+    _shouldReuseChildren() {
+      return this._domUpdateWasSkipped && this.children?.length > 0;
     }
     async _renderTemplate() {
       this.triggerMethod("before:render:template");
-      const process = signalizedProcess(this.#abortController?.signal).then((_, signal) => {
+      const process = signalizedProcess(this._abortController?.signal).then((_, signal) => {
         const settings = this.model.get("settings").toJSON();
         return resolveProps({
           props: settings,
@@ -1910,13 +1870,13 @@ function createTemplatedElementView({
         return this.afterSettingsResolve(settings);
       }).then(async (settings) => {
         const settingsHash = JSON.stringify(settings);
-        const settingsChanged = settingsHash !== this.#lastResolvedSettingsHash;
+        const settingsChanged = settingsHash !== this._lastResolvedSettingsHash;
         if (!settingsChanged && this.isRendered) {
-          this.#domUpdateWasSkipped = true;
+          this._domUpdateWasSkipped = true;
           return null;
         }
-        this.#domUpdateWasSkipped = false;
-        this.#lastResolvedSettingsHash = settingsHash;
+        this._domUpdateWasSkipped = false;
+        this._lastResolvedSettingsHash = settingsHash;
         const context = {
           id: this.model.get("id"),
           type,
@@ -2013,10 +1973,15 @@ function createNestedTemplatedElementView({
   const parentOpenEditingPanel = AtomicElementBaseView.prototype._openEditingPanel;
   return AtomicElementBaseView.extend({
     _abortController: null,
+    _lastResolvedSettingsHash: null,
+    _domUpdateWasSkipped: false,
     template: false,
     getTemplateType() {
       return "twig";
     },
+    invalidateRenderCache() {
+      this._lastResolvedSettingsHash = null;
+    },
     render() {
       this._abortController?.abort();
       this._abortController = new AbortController();
@@ -2041,21 +2006,47 @@ function createNestedTemplatedElementView({
     },
     async _renderTemplate() {
       const model = this.model;
-      await renderTwigTemplate({
-        view: this,
-        signal: this._abortController?.signal,
-        resolveProps,
-        templateKey,
-        baseStylesDictionary,
-        type,
-        renderer,
-        buildContext: (context) => ({
-          ...context,
+      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,
+          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 ?? [];
@@ -2080,16 +2071,17 @@ function createNestedTemplatedElementView({
       oldEl.innerHTML = overlayHTML + newEl.innerHTML;
     },
     async _renderChildren() {
-      parentRenderChildren.call(this);
-      const renderPromises = [];
-      this.children.each((childView) => {
-        if (childView._currentRenderPromise) {
-          renderPromises.push(childView._currentRenderPromise);
-        }
-      });
-      await Promise.all(renderPromises);
+      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) {
@@ -2293,9 +2285,6 @@ var CanvasInlineEditor = ({
   };
   useOnClickOutsideIframe(onBlur);
   return /* @__PURE__ */ React5.createElement(import_ui4.ThemeProvider, null, /* @__PURE__ */ React5.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React5.createElement("style", null, `
-			.${EDITOR_WRAPPER_SELECTOR}, .${EDITOR_WRAPPER_SELECTOR} > * {
-				height: 100%;
-			}
 			.ProseMirror > * {
 				height: 100%;
 			}
@@ -2423,8 +2412,9 @@ var import_editor_props3 = require("@elementor/editor-props");
 var hasKey = (propType) => {
   return "key" in propType;
 };
+var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([import_editor_props3.htmlV2PropTypeUtil.key, import_editor_props3.stringPropTypeUtil.key]);
 var isCoreTextPropTypeKey = (key) => {
-  return key === import_editor_props3.htmlPropTypeUtil.key || key === import_editor_props3.stringPropTypeUtil.key;
+  return TEXT_PROP_TYPE_KEYS.has(key);
 };
 var isAllowedBySchema = (propTypeFromSchema) => {
   if (!propTypeFromSchema) {
@@ -2436,15 +2426,13 @@ var isAllowedBySchema = (propTypeFromSchema) => {
   if (propTypeFromSchema.kind !== "union") {
     return false;
   }
-  return Boolean(
-    propTypeFromSchema.prop_types[import_editor_props3.htmlPropTypeUtil.key] || propTypeFromSchema.prop_types[import_editor_props3.stringPropTypeUtil.key]
-  );
+  return [...TEXT_PROP_TYPE_KEYS].some((key) => propTypeFromSchema.prop_types[key]);
 };
 var isInlineEditingAllowed = ({ rawValue, propTypeFromSchema }) => {
   if (rawValue === null || rawValue === void 0) {
     return isAllowedBySchema(propTypeFromSchema);
   }
-  return import_editor_props3.htmlPropTypeUtil.isValid(rawValue) || import_editor_props3.stringPropTypeUtil.isValid(rawValue);
+  return import_editor_props3.htmlV2PropTypeUtil.isValid(rawValue) || import_editor_props3.stringPropTypeUtil.isValid(rawValue);
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
@@ -2529,11 +2517,16 @@ var InlineEditingReplacement = class extends ReplacementBase {
   }
   getExtractedContentValue() {
     const propValue = this.getInlineEditablePropValue();
-    return import_editor_props4.htmlPropTypeUtil.extract(propValue) ?? "";
+    return import_editor_props4.htmlV2PropTypeUtil.extract(propValue)?.content ?? "";
   }
   setContentValue(value) {
     const settingKey = this.getInlineEditablePropertyName();
-    const valueToSave = import_editor_props4.htmlPropTypeUtil.create(value || "");
+    const html = value || "";
+    const parsed = (0, import_editor_props4.parseHtmlChildren)(html);
+    const valueToSave = import_editor_props4.htmlV2PropTypeUtil.create({
+      content: parsed.content || null,
+      children: parsed.children
+    });
     (0, import_editor_v1_adapters11.undoable)(
       {
         do: () => {
@@ -2562,11 +2555,11 @@ var InlineEditingReplacement = class extends ReplacementBase {
       return null;
     }
     if (propType.kind === "union") {
-      if (propType.prop_types[import_editor_props4.htmlPropTypeUtil.key]) {
-        return import_editor_props4.htmlPropTypeUtil.key;
-      }
-      if (propType.prop_types[import_editor_props4.stringPropTypeUtil.key]) {
-        return import_editor_props4.stringPropTypeUtil.key;
+      const textKeys = [import_editor_props4.htmlV2PropTypeUtil.key, import_editor_props4.stringPropTypeUtil.key];
+      for (const key of textKeys) {
+        if (propType.prop_types[key]) {
+          return key;
+        }
       }
       return null;
     }
@@ -2803,7 +2796,7 @@ var tabModelExtensions = {
       ...paragraphElement,
       settings: {
         ...paragraphElement.settings,
-        paragraph: import_editor_props5.htmlPropTypeUtil.create(`Tab ${position}`)
+        paragraph: import_editor_props5.htmlV2PropTypeUtil.create({ content: `Tab ${position}`, children: [] })
       }
     };
     return [updatedParagraph, ...elements.slice(1)];
@@ -3456,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!")
-};
 
 // src/mcp/tools/build-composition/tool.ts
 var initBuildCompositionsTool = (reg) => {
@@ -3478,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" }]
     },
@@ -3560,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
@@ -3573,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}
+`;
     }
   });
 };
@@ -3693,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"
   )
@@ -3706,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 }
@@ -3804,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(
@@ -3831,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