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

package/dist/index.d.mts

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

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
@@ -1757,9 +1762,9 @@ function createElementViewClassDeclaration() {
 var import_editor_elements4 = require("@elementor/editor-elements");
 
 // src/legacy/twig-rendering-utils.ts
-function setupTwigRenderer({ renderer, element }) {
+function createTwigRenderState({ renderer, element }) {
   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);
   });
@@ -1767,7 +1772,7 @@ function setupTwigRenderer({ renderer, element }) {
     transformers: settingsTransformersRegistry,
     schema: element.atomic_props_schema
   });
-  return { templateKey, baseStylesDictionary, resolveProps };
+  return { templateKey, resolveProps, renderer, cacheState };
 }
 function createBeforeRender(view) {
   view._ensureViewIsIntact();
@@ -1780,47 +1785,91 @@ 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,
-  resolveProps,
-  templateKey,
-  baseStylesDictionary,
-  type,
-  renderer,
+  renderState,
   buildContext,
-  attachContent
+  attachContent,
+  afterSettingsResolve
 }) {
   view.triggerMethod("before:render:template");
-  if (signal.aborted) {
+  const { resolveProps, cacheState, renderer, templateKey } = renderState;
+  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 = {
-    id: view.model.get("id"),
-    type,
-    settings: resolvedSettings,
-    base_styles: baseStylesDictionary
-  };
-  if (buildContext) {
-    context = buildContext(context);
+  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) {
+  if (signal?.aborted) {
     return;
   }
   attachContent(html);
   view.bindUIElements();
   view.triggerMethod("render:template");
 }
+function collectChildrenRenderPromises(children) {
+  const promises = [];
+  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);
+  }
+}
 
 // src/legacy/create-templated-element-type.ts
 function canBeTemplated(element) {
@@ -1832,16 +1881,9 @@ function createTemplatedElementView({
   element
 }) {
   const BaseView = createElementViewClassDeclaration();
-  const { templateKey, baseStylesDictionary, resolveProps } = setupTwigRenderer({
-    type,
-    renderer,
-    element
-  });
+  const renderState = createTwigRenderState({ renderer, element });
   return class extends BaseView {
-    #abortController = null;
-    #childrenRenderPromises = [];
-    #lastResolvedSettingsHash = null;
-    #domUpdateWasSkipped = false;
+    _abortController = null;
     getTemplateType() {
       return "twig";
     }
@@ -1858,81 +1900,36 @@ function createTemplatedElementView({
       return this._parent?.getResolverRenderContext?.();
     }
     invalidateRenderCache() {
-      this.#lastResolvedSettingsHash = null;
+      renderState.cacheState.invalidate();
     }
     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();
-      } else {
-        super._renderChildren();
-      }
-      this.#collectChildrenRenderPromises();
-      await this._waitForChildrenToComplete();
-    }
-    #shouldReuseChildren() {
-      return this.#domUpdateWasSkipped && this.children?.length > 0;
-    }
-    #rerenderExistingChildren() {
-      this.children?.each((childView) => {
-        childView.render();
+      await renderChildrenWithOptimization({
+        children: this.children,
+        domUpdateWasSkipped: renderState.cacheState.domUpdateWasSkipped,
+        renderChildren: () => super._renderChildren()
       });
     }
-    #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);
-      }
-    }
     async _renderTemplate() {
-      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 = {
+      await renderTwigTemplate({
+        view: this,
+        signal: this._abortController?.signal,
+        renderState,
+        buildContext: (resolvedSettings) => ({
           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);
+          settings: resolvedSettings,
+          base_styles: element.base_styles_dictionary
+        }),
+        attachContent: (html) => this.$el.html(html),
+        afterSettingsResolve: (settings) => this.afterSettingsResolve(settings)
       });
-      await process.execute();
-      this.bindUIElements();
-      this.triggerMethod("render:template");
     }
     afterSettingsResolve(settings) {
       return settings;
@@ -2003,11 +2000,7 @@ function createNestedTemplatedElementView({
   element
 }) {
   const legacyWindow = window;
-  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;
   const parentOpenEditingPanel = AtomicElementBaseView.prototype._openEditingPanel;
@@ -2017,6 +2010,9 @@ function createNestedTemplatedElementView({
     getTemplateType() {
       return "twig";
     },
+    invalidateRenderCache() {
+      renderState.cacheState.invalidate();
+    },
     render() {
       this._abortController?.abort();
       this._abortController = new AbortController();
@@ -2044,13 +2040,12 @@ function createNestedTemplatedElementView({
       await renderTwigTemplate({
         view: this,
         signal: this._abortController?.signal,
-        resolveProps,
-        templateKey,
-        baseStylesDictionary,
-        type,
-        renderer,
-        buildContext: (context) => ({
-          ...context,
+        renderState,
+        buildContext: (resolvedSettings) => ({
+          id: model.get("id"),
+          type,
+          settings: resolvedSettings,
+          base_styles: element.base_styles_dictionary,
           editor_attributes: buildEditorAttributes(model),
           editor_classes: buildEditorClasses(model)
         }),
@@ -2080,14 +2075,11 @@ 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 renderChildrenWithOptimization({
+        children: this.children,
+        domUpdateWasSkipped: renderState.cacheState.domUpdateWasSkipped,
+        renderChildren: () => parentRenderChildren.call(this)
       });
-      await Promise.all(renderPromises);
       this._removeChildrenPlaceholder();
     },
     _removeChildrenPlaceholder() {
@@ -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)];
@@ -3461,7 +3454,7 @@ var outputSchema = {
   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!")
+  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