@elementor/editor-canvas 4.1.0-809 → 4.1.0-811

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { V1Element, V1ElementConfig, V1ElementModelProps } from '@elementor/editor-elements';
+import { V1Element, V1ElementModelProps, V1ElementConfig } from '@elementor/editor-elements';
 import { TwingArrayLoader, TwingEnvironment } from '@elementor/twing';
 import { Root } from 'react-dom/client';
 import * as _elementor_editor_props from '@elementor/editor-props';
@@ -89,6 +89,7 @@ declare class ElementView {
         map: <T>(callback: (view: ElementView) => T) => T[];
     };
     constructor(...args: unknown[]);
+    addElement(data: Partial<V1ElementModelProps>, options?: object): unknown;
     onRender(...args: unknown[]): void;
     onDestroy(...args: unknown[]): void;
     attributes(): Record<string, unknown>;
@@ -131,6 +132,7 @@ declare class ElementView {
         scrollIntoView: boolean;
     }): void;
     once: (event: string, callback: () => void) => void;
+    getContainer(): V1Element;
 }
 declare class TemplatedElementView extends ElementView {
     _doAfterRender(callback: () => void): void;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { V1Element, V1ElementConfig, V1ElementModelProps } from '@elementor/editor-elements';
+import { V1Element, V1ElementModelProps, V1ElementConfig } from '@elementor/editor-elements';
 import { TwingArrayLoader, TwingEnvironment } from '@elementor/twing';
 import { Root } from 'react-dom/client';
 import * as _elementor_editor_props from '@elementor/editor-props';
@@ -89,6 +89,7 @@ declare class ElementView {
         map: <T>(callback: (view: ElementView) => T) => T[];
     };
     constructor(...args: unknown[]);
+    addElement(data: Partial<V1ElementModelProps>, options?: object): unknown;
     onRender(...args: unknown[]): void;
     onDestroy(...args: unknown[]): void;
     attributes(): Record<string, unknown>;
@@ -131,6 +132,7 @@ declare class ElementView {
         scrollIntoView: boolean;
     }): void;
     once: (event: string, callback: () => void) => void;
+    getContainer(): V1Element;
 }
 declare class TemplatedElementView extends ElementView {
     _doAfterRender(callback: () => void): void;

package/dist/index.js

@@ -1173,8 +1173,9 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, getC
         ...style,
         cssName: provider.actions.resolveCssName(style.id)
       }));
-      return renderStyles({ styles: breakToBreakpoints(changedStyles), signal }).then((rendered) => {
-        updateCacheItems(cache, rendered);
+      const breakpointSplit = breakToBreakpoints(changedStyles);
+      return renderStyles({ styles: breakpointSplit, signal }).then((rendered) => {
+        updateCacheItems(cache, changedIds, rendered);
         return getOrderedItems(cache);
       });
     }
@@ -1231,19 +1232,14 @@ function getChangedStyleIds(previous, current) {
 function getOrderedItems(cache) {
   return cache.orderedIds.map((id) => cache.itemsById.get(id)).filter((items) => items !== void 0).flat();
 }
-function updateCacheItems(cache, changedItems) {
+function updateCacheItems(cache, changedIds, changedItems) {
+  for (const id of changedIds) {
+    cache.itemsById.delete(id);
+  }
   for (const item of changedItems) {
-    const existing = cache.itemsById.get(item.id);
-    if (existing) {
-      const idx = existing.findIndex((e) => e.breakpoint === item.breakpoint && e.state === item.state);
-      if (idx >= 0) {
-        existing[idx] = item;
-      } else {
-        existing.push(item);
-      }
-    } else {
-      cache.itemsById.set(item.id, [item]);
-    }
+    const existing = cache.itemsById.get(item.id) || [];
+    existing.push(item);
+    cache.itemsById.set(item.id, existing);
   }
 }
 function rebuildCache(cache, allStyles, items) {
@@ -2001,7 +1997,7 @@ function initStyleTransformers() {
 }
 
 // src/legacy/init-legacy-views.ts
-var import_editor_elements7 = require("@elementor/editor-elements");
+var import_editor_elements8 = require("@elementor/editor-elements");
 var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
 
 // src/renderers/create-dom-renderer.ts
@@ -2130,7 +2126,53 @@ function createElementViewClassDeclaration() {
 }
 
 // src/legacy/create-nested-templated-element-type.ts
+var import_editor_elements6 = require("@elementor/editor-elements");
+
+// src/legacy/create-pending-element.ts
 var import_editor_elements5 = require("@elementor/editor-elements");
+function createPendingElement(wrapperView, data, options = {}) {
+  const parentContainer = wrapperView.getContainer();
+  const model = { ...data };
+  if (!model.id) {
+    model.id = (0, import_editor_elements5.generateElementId)();
+  }
+  if (!model.elements) {
+    model.elements = [];
+  }
+  const added = (0, import_editor_elements5.addModelToParent)(parentContainer.id, model, options);
+  if (!added) {
+    return void 0;
+  }
+  const childId = model.id;
+  const childModel = (0, import_editor_elements5.findModelInDocument)(childId);
+  if (!childModel) {
+    return void 0;
+  }
+  const pendingContainer = {
+    id: childId,
+    settings: { get: () => ({}), set: () => ({}), toJSON: () => ({}) },
+    parent: parentContainer,
+    model: childModel,
+    view: void 0,
+    lookup() {
+      return (0, import_editor_elements5.getContainer)(childId) ?? pendingContainer;
+    }
+  };
+  if (options.edit !== false) {
+    selectChildWhenWrapperRenders(wrapperView, childId);
+  }
+  return { getContainer: () => pendingContainer };
+}
+function selectChildWhenWrapperRenders(wrapperView, childId) {
+  wrapperView.once("render", () => {
+    const childContainer = (0, import_editor_elements5.getContainer)(childId);
+    if (childContainer?.model?.trigger) {
+      childContainer.model.trigger("request:edit");
+      return;
+    }
+    wrapperView.model?.trigger?.("request:edit");
+  });
+}
 
 // src/legacy/twig-rendering-utils.ts
 function setupTwigRenderer({ renderer, element }) {
@@ -2349,6 +2391,7 @@ function createNestedTemplatedElementView({
   const AtomicElementBaseView = legacyWindow.elementor.modules.elements.views.createAtomicElementBase(type);
   const parentRenderChildren = AtomicElementBaseView.prototype._renderChildren;
   const parentOpenEditingPanel = AtomicElementBaseView.prototype._openEditingPanel;
+  const parentAddElement = AtomicElementBaseView.prototype.addElement;
   return AtomicElementBaseView.extend({
     _abortController: null,
     _lastResolvedSettingsHash: null,
@@ -2388,7 +2431,7 @@ function createNestedTemplatedElementView({
         this._initAlpine();
       });
       this.model.trigger("render:complete");
-      window.dispatchEvent(new CustomEvent(import_editor_elements5.ELEMENT_STYLE_CHANGE_EVENT));
+      window.dispatchEvent(new CustomEvent(import_editor_elements6.ELEMENT_STYLE_CHANGE_EVENT));
     },
     async _renderTemplate() {
       const model = this.model;
@@ -2548,6 +2591,12 @@ function createNestedTemplatedElementView({
     _openEditingPanel(options) {
       this._doAfterRender(() => parentOpenEditingPanel.call(this, options));
     },
+    addElement(data, options) {
+      if (this.isRendered) {
+        return parentAddElement.call(this, data, options);
+      }
+      return createPendingElement(this, data, options);
+    },
     getInteractionId() {
       const originId = this.model.get("originId");
       const id = this.model.get("id");
@@ -2624,7 +2673,7 @@ var import_client = require("react-dom/client");
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 var React6 = __toESM(require("react"));
-var import_editor_elements6 = require("@elementor/editor-elements");
+var import_editor_elements7 = require("@elementor/editor-elements");
 var import_editor_props4 = require("@elementor/editor-props");
 var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
 var import_i18n3 = require("@wordpress/i18n");
@@ -3000,7 +3049,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return INLINE_EDITING_PROPERTY_PER_TYPE[this.type] ?? "";
   }
   getInlineEditablePropType() {
-    const propSchema = (0, import_editor_elements6.getElementType)(this.type)?.propsSchema;
+    const propSchema = (0, import_editor_elements7.getElementType)(this.type)?.propsSchema;
     const propertyName = this.getInlineEditablePropertyName();
     return propSchema?.[propertyName] ?? null;
   }
@@ -3034,7 +3083,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
         }
       },
       {
-        title: (0, import_editor_elements6.getElementLabel)(this.id),
+        title: (0, import_editor_elements7.getElementLabel)(this.id),
         // translators: %s is the name of the property that was edited.
         subtitle: (0, import_i18n3.__)("%s edited", "elementor").replace(
           "%s",
@@ -3067,7 +3116,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     (0, import_editor_v1_adapters12.__privateRunCommandSync)(
       "document/elements/set-settings",
       {
-        container: (0, import_editor_elements6.getContainer)(this.id),
+        container: (0, import_editor_elements7.getContainer)(this.id),
         settings: {
           [key]: value
         }
@@ -3082,7 +3131,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return import_editor_props4.stringPropTypeUtil.extract(this.getSetting(tagSettingKey) ?? null) ?? import_editor_props4.stringPropTypeUtil.extract(tagPropType?.default ?? null) ?? null;
   }
   getTagPropType() {
-    const propsSchema = (0, import_editor_elements6.getElementType)(this.type)?.propsSchema;
+    const propsSchema = (0, import_editor_elements7.getElementType)(this.type)?.propsSchema;
     if (!propsSchema?.tag) {
       return null;
     }
@@ -3242,7 +3291,7 @@ function registerElementType(type, elementTypeGenerator) {
 }
 function initLegacyViews() {
   (0, import_editor_v1_adapters13.__privateListenTo)((0, import_editor_v1_adapters13.v1ReadyEvent)(), () => {
-    const widgetsCache = (0, import_editor_elements7.getWidgetsCache)() ?? {};
+    const widgetsCache = (0, import_editor_elements8.getWidgetsCache)() ?? {};
     const legacyWindow = window;
     const renderer = createDomRenderer();
     registerProPromotionTypes(widgetsCache);
@@ -3386,7 +3435,7 @@ var initAvailableWidgetsResource = (reg) => {
 };
 
 // src/mcp/resources/document-structure-resource.ts
-var import_editor_elements8 = require("@elementor/editor-elements");
+var import_editor_elements9 = require("@elementor/editor-elements");
 var import_editor_v1_adapters15 = require("@elementor/editor-v1-adapters");
 var DOCUMENT_STRUCTURE_URI = "elementor://document/structure";
 var initDocumentStructureResource = (reg) => {
@@ -3451,7 +3500,7 @@ function resolveElementVersion(element) {
     return "v4";
   }
   const widgetType = element.model?.attributes?.widgetType;
-  if (widgetType && (0, import_editor_elements8.getWidgetsCache)()?.[widgetType]?.atomic_props_schema) {
+  if (widgetType && (0, import_editor_elements9.getWidgetsCache)()?.[widgetType]?.atomic_props_schema) {
     return "v4";
   }
   return "v3";
@@ -3647,7 +3696,7 @@ var initGeneralContextResource = (reg) => {
 };
 
 // src/mcp/resources/selected-element-resource.ts
-var import_editor_elements9 = require("@elementor/editor-elements");
+var import_editor_elements10 = require("@elementor/editor-elements");
 var import_editor_v1_adapters18 = require("@elementor/editor-v1-adapters");
 var SELECTED_ELEMENT_URI = "elementor://context/selected-element";
 var initSelectedElementResource = (reg) => {
@@ -3718,11 +3767,11 @@ function createEmptySelectedElementPayload() {
   };
 }
 function readSelectionFromEditor() {
-  const elements = (0, import_editor_elements9.getSelectedElements)();
+  const elements = (0, import_editor_elements10.getSelectedElements)();
   if (elements.length !== 1) {
     return createEmptySelectedElementPayload();
   }
-  const container = (0, import_editor_elements9.getContainer)(elements[0].id);
+  const container = (0, import_editor_elements10.getContainer)(elements[0].id);
   return buildPayloadFromContainer(container);
 }
 function buildPayloadFromContainer(container) {
@@ -3745,7 +3794,7 @@ function resolveElementVersion2(container, widgetType) {
   if (container.model?.config?.atomic) {
     return "v4";
   }
-  if (widgetType && (0, import_editor_elements9.getWidgetsCache)()?.[widgetType]?.atomic_props_schema) {
+  if (widgetType && (0, import_editor_elements10.getWidgetsCache)()?.[widgetType]?.atomic_props_schema) {
     return "v4";
   }
   return "v3";
@@ -3755,7 +3804,7 @@ function getElementProperties(container, widgetType) {
   if (!settings || typeof settings !== "object") {
     return null;
   }
-  const widgetConfig = widgetType ? (0, import_editor_elements9.getWidgetsCache)()?.[widgetType] : null;
+  const widgetConfig = widgetType ? (0, import_editor_elements10.getWidgetsCache)()?.[widgetType] : null;
   const controls = widgetConfig?.controls;
   const filtered = {};
   for (const [key, value] of Object.entries(settings)) {
@@ -3794,13 +3843,13 @@ function getElementDisplayName(container) {
 
 // src/mcp/tools/build-composition/tool.ts
 var import_editor_documents3 = require("@elementor/editor-documents");
-var import_editor_elements13 = require("@elementor/editor-elements");
+var import_editor_elements14 = require("@elementor/editor-elements");
 
 // src/composition-builder/composition-builder.ts
-var import_editor_elements12 = require("@elementor/editor-elements");
+var import_editor_elements13 = require("@elementor/editor-elements");
 
 // src/mcp/utils/do-update-element-property.ts
-var import_editor_elements10 = require("@elementor/editor-elements");
+var import_editor_elements11 = require("@elementor/editor-elements");
 var import_editor_props6 = require("@elementor/editor-props");
 var import_editor_styles5 = require("@elementor/editor-styles");
 function resolvePropValue(value, forceKey) {
@@ -3813,7 +3862,7 @@ function resolvePropValue(value, forceKey) {
 var doUpdateElementProperty = (params) => {
   const { elementId, propertyName, propertyValue, elementType } = params;
   if (propertyName === "_styles") {
-    const elementStyles = (0, import_editor_elements10.getElementStyles)(elementId) || {};
+    const elementStyles = (0, import_editor_elements11.getElementStyles)(elementId) || {};
     const propertyMapValue = propertyValue;
     const styleSchema = (0, import_editor_styles5.getStylesSchema)();
     const transformedStyleValues = Object.fromEntries(
@@ -3861,7 +3910,7 @@ var doUpdateElementProperty = (params) => {
     delete transformedStyleValues.custom_css;
     const localStyle = Object.values(elementStyles).find((style) => style.label === "local");
     if (!localStyle) {
-      (0, import_editor_elements10.createElementStyle)({
+      (0, import_editor_elements11.createElementStyle)({
         elementId,
         ...typeof customCss !== "undefined" ? { custom_css: customCss } : {},
         classesProp: "classes",
@@ -3875,7 +3924,7 @@ var doUpdateElementProperty = (params) => {
         }
       });
     } else {
-      (0, import_editor_elements10.updateElementStyle)({
+      (0, import_editor_elements11.updateElementStyle)({
         elementId,
         styleId: localStyle.id,
         meta: {
@@ -3890,7 +3939,7 @@ var doUpdateElementProperty = (params) => {
     }
     return;
   }
-  const elementPropSchema = (0, import_editor_elements10.getWidgetsCache)()?.[elementType]?.atomic_props_schema;
+  const elementPropSchema = (0, import_editor_elements11.getWidgetsCache)()?.[elementType]?.atomic_props_schema;
   if (!elementPropSchema) {
     throw new Error(`No prop schema found for element type: ${elementType}`);
   }
@@ -3904,7 +3953,7 @@ var doUpdateElementProperty = (params) => {
   }
   const propKey = elementPropSchema[propertyName].key;
   const value = resolvePropValue(propertyValue, propKey);
-  (0, import_editor_elements10.updateElementSettings)({
+  (0, import_editor_elements11.updateElementSettings)({
     id: elementId,
     props: {
       [propertyName]: value
@@ -3914,7 +3963,7 @@ var doUpdateElementProperty = (params) => {
 };
 
 // src/mcp/utils/validate-input.ts
-var import_editor_elements11 = require("@elementor/editor-elements");
+var import_editor_elements12 = require("@elementor/editor-elements");
 var import_editor_props7 = require("@elementor/editor-props");
 var import_editor_styles6 = require("@elementor/editor-styles");
 var _widgetsSchema = null;
@@ -3922,7 +3971,7 @@ var validateInput = {
   get widgetsSchema() {
     if (!_widgetsSchema) {
       const schema2 = {};
-      const cache = (0, import_editor_elements11.getWidgetsCache)();
+      const cache = (0, import_editor_elements12.getWidgetsCache)();
       if (!cache) {
         return {};
       }
@@ -4005,10 +4054,10 @@ var CompositionBuilder = class _CompositionBuilder {
   elementCusomCSS = {};
   rootContainers = [];
   api = {
-    createElement: import_editor_elements12.createElement,
-    getWidgetsCache: import_editor_elements12.getWidgetsCache,
-    generateElementId: import_editor_elements12.generateElementId,
-    getContainer: import_editor_elements12.getContainer,
+    createElement: import_editor_elements13.createElement,
+    getWidgetsCache: import_editor_elements13.getWidgetsCache,
+    generateElementId: import_editor_elements13.generateElementId,
+    getContainer: import_editor_elements13.getContainer,
     doUpdateElementProperty
   };
   xml;
@@ -4449,13 +4498,13 @@ var initBuildCompositionsTool = (reg) => {
       let generatedXML = "";
       const errors = [];
       const rootContainers = [];
-      const documentContainer = (0, import_editor_elements13.getContainer)("document");
+      const documentContainer = (0, import_editor_elements14.getContainer)("document");
       const currentDocument = (0, import_editor_documents3.getCurrentDocument)();
       const targetContainer = getCompositionTargetContainer(documentContainer, currentDocument?.type.value);
       try {
         const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
-          createElement: import_editor_elements13.createElement,
-          getWidgetsCache: import_editor_elements13.getWidgetsCache
+          createElement: import_editor_elements14.createElement,
+          getWidgetsCache: import_editor_elements14.getWidgetsCache
         });
         compositionBuilder.setElementConfig(elementConfig);
         compositionBuilder.setStylesConfig(stylesConfig);
@@ -4483,7 +4532,7 @@ var initBuildCompositionsTool = (reg) => {
       }
       if (errors.length) {
         rootContainers.forEach((rootContainer) => {
-          (0, import_editor_elements13.deleteElement)({
+          (0, import_editor_elements14.deleteElement)({
             container: rootContainer,
             options: { useHistory: false }
           });
@@ -4537,7 +4586,7 @@ function assertCompositionXmlUsesV4WidgetsOnly(xmlStructure) {
   if (doc.querySelector("parsererror")) {
     throw new Error("Failed to parse XML string: " + doc);
   }
-  const widgetsCache = (0, import_editor_elements13.getWidgetsCache)() ?? {};
+  const widgetsCache = (0, import_editor_elements14.getWidgetsCache)() ?? {};
   for (const node of doc.querySelectorAll("*")) {
     const type = node.tagName;
     const widgetData = widgetsCache[type];
@@ -4556,7 +4605,7 @@ function assertCompositionXmlUsesV4WidgetsOnly(xmlStructure) {
 }
 
 // src/mcp/tools/configure-element/tool.ts
-var import_editor_elements14 = require("@elementor/editor-elements");
+var import_editor_elements15 = require("@elementor/editor-elements");
 
 // src/mcp/tools/configure-element/prompt.ts
 var configureElementToolPrompt = `Configure an existing element on the page.
@@ -4696,7 +4745,7 @@ var initConfigureElementTool = (reg) => {
       speedPriority: 0.7
     },
     handler: ({ elementId, propertiesToChange, elementType, stylePropertiesToChange }) => {
-      const widgetData = (0, import_editor_elements14.getWidgetsCache)()?.[elementType];
+      const widgetData = (0, import_editor_elements15.getWidgetsCache)()?.[elementType];
       if (!widgetData) {
         throw new Error(
           `Unknown element type: ${elementType}. Check the available-widgets resource for valid types.`
@@ -4788,7 +4837,7 @@ Check the styles schema at the resource [${STYLE_SCHEMA_URI.replace(
 }
 
 // src/mcp/tools/get-element-config/tool.ts
-var import_editor_elements15 = require("@elementor/editor-elements");
+var import_editor_elements16 = require("@elementor/editor-elements");
 var import_editor_props8 = require("@elementor/editor-props");
 var import_schema5 = require("@elementor/schema");
 var schema = {
@@ -4827,12 +4876,12 @@ var initGetElementConfigTool = (reg) => {
       speedPriority: 0.9
     },
     handler: async ({ elementId }) => {
-      const element = (0, import_editor_elements15.getContainer)(elementId);
+      const element = (0, import_editor_elements16.getContainer)(elementId);
       if (!element) {
         throw new Error(`Element with ID ${elementId} not found.`);
       }
       const elementType = element.model.get("widgetType") || element.model.get("elType") || "";
-      const widgetData = (0, import_editor_elements15.getWidgetsCache)()?.[elementType];
+      const widgetData = (0, import_editor_elements16.getWidgetsCache)()?.[elementType];
       if (!widgetData) {
         throw new Error(
           `Unknown element type: ${elementType}. Check the available-widgets resource for valid types.`
@@ -4844,7 +4893,7 @@ var initGetElementConfigTool = (reg) => {
         );
       }
       const elementRawSettings = element.settings;
-      const propSchema = (0, import_editor_elements15.getWidgetsCache)()?.[elementType]?.atomic_props_schema;
+      const propSchema = (0, import_editor_elements16.getWidgetsCache)()?.[elementType]?.atomic_props_schema;
       if (!elementRawSettings || !propSchema) {
         throw new Error(`No settings or prop schema found for element ID: ${elementId}`);
       }
@@ -4853,7 +4902,7 @@ var initGetElementConfigTool = (reg) => {
       import_editor_props8.Schema.configurableKeys(propSchema).forEach((key) => {
         propValues[key] = structuredClone(elementRawSettings.get(key));
       });
-      const elementStyles = (0, import_editor_elements15.getElementStyles)(elementId) || {};
+      const elementStyles = (0, import_editor_elements16.getElementStyles)(elementId) || {};
       const localStyle = Object.values(elementStyles).find((style) => style.label === "local");
       if (localStyle) {
         const defaultVariant = localStyle.variants.find(
@@ -5020,7 +5069,7 @@ Note: The "size" property controls image resolution/loading, not visual size. Se
 `;
 
 // src/prevent-link-in-link-commands.ts
-var import_editor_elements16 = require("@elementor/editor-elements");
+var import_editor_elements17 = require("@elementor/editor-elements");
 var import_editor_notifications3 = require("@elementor/editor-notifications");
 var import_editor_v1_adapters19 = require("@elementor/editor-v1-adapters");
 var import_i18n4 = require("@wordpress/i18n");
@@ -5091,24 +5140,24 @@ function shouldBlock(sourceElements, targetElements) {
     return false;
   }
   const isSourceContainsAnAnchor = sourceElements.some((src) => {
-    return src?.id ? (0, import_editor_elements16.isElementAnchored)(src.id) || !!(0, import_editor_elements16.getAnchoredDescendantId)(src.id) : false;
+    return src?.id ? (0, import_editor_elements17.isElementAnchored)(src.id) || !!(0, import_editor_elements17.getAnchoredDescendantId)(src.id) : false;
   });
   if (!isSourceContainsAnAnchor) {
     return false;
   }
   const isTargetContainsAnAnchor = targetElements.some((target) => {
-    return target?.id ? (0, import_editor_elements16.isElementAnchored)(target.id) || !!(0, import_editor_elements16.getAnchoredAncestorId)(target.id) : false;
+    return target?.id ? (0, import_editor_elements17.isElementAnchored)(target.id) || !!(0, import_editor_elements17.getAnchoredAncestorId)(target.id) : false;
   });
   return isTargetContainsAnAnchor;
 }
 
 // src/style-commands/paste-style.ts
-var import_editor_elements19 = require("@elementor/editor-elements");
+var import_editor_elements20 = require("@elementor/editor-elements");
 var import_editor_props10 = require("@elementor/editor-props");
 var import_editor_v1_adapters21 = require("@elementor/editor-v1-adapters");
 
 // src/utils/command-utils.ts
-var import_editor_elements17 = require("@elementor/editor-elements");
+var import_editor_elements18 = require("@elementor/editor-elements");
 var import_editor_props9 = require("@elementor/editor-props");
 var import_i18n5 = require("@wordpress/i18n");
 function hasAtomicWidgets(args) {
@@ -5133,7 +5182,7 @@ function getClassesProp(container) {
 }
 function getContainerSchema(container) {
   const type = container?.model.get("widgetType") || container?.model.get("elType");
-  const widgetsCache = (0, import_editor_elements17.getWidgetsCache)();
+  const widgetsCache = (0, import_editor_elements18.getWidgetsCache)();
   const elementType = widgetsCache?.[type];
   return elementType?.atomic_props_schema ?? null;
 }
@@ -5146,11 +5195,11 @@ function getClipboardElements(storageKey = "clipboard") {
   }
 }
 function getTitleForContainers(containers) {
-  return containers.length > 1 ? (0, import_i18n5.__)("Elements", "elementor") : (0, import_editor_elements17.getElementLabel)(containers[0].id);
+  return containers.length > 1 ? (0, import_i18n5.__)("Elements", "elementor") : (0, import_editor_elements18.getElementLabel)(containers[0].id);
 }
 
 // src/style-commands/undoable-actions/paste-element-style.ts
-var import_editor_elements18 = require("@elementor/editor-elements");
+var import_editor_elements19 = require("@elementor/editor-elements");
 var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters20 = require("@elementor/editor-v1-adapters");
 var import_i18n6 = require("@wordpress/i18n");
@@ -5163,7 +5212,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters20.undoable)(
         if (!classesProp) {
           return null;
         }
-        const originalStyles = (0, import_editor_elements18.getElementStyles)(container.id);
+        const originalStyles = (0, import_editor_elements19.getElementStyles)(container.id);
         const [styleId, styleDef] = Object.entries(originalStyles ?? {})[0] ?? [];
         const originalStyle = Object.keys(styleDef ?? {}).length ? styleDef : null;
         const revertData = {
@@ -5172,7 +5221,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters20.undoable)(
         };
         if (styleId) {
           newStyle.variants.forEach(({ meta, props, custom_css: customCss }) => {
-            (0, import_editor_elements18.updateElementStyle)({
+            (0, import_editor_elements19.updateElementStyle)({
               elementId,
               styleId,
               meta,
@@ -5183,7 +5232,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters20.undoable)(
         } else {
           const [firstVariant] = newStyle.variants;
           const additionalVariants = newStyle.variants.slice(1);
-          revertData.styleId = (0, import_editor_elements18.createElementStyle)({
+          revertData.styleId = (0, import_editor_elements19.createElementStyle)({
             elementId,
             classesProp,
             label: import_editor_styles_repository4.ELEMENTS_STYLES_RESERVED_LABEL,
@@ -5201,7 +5250,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters20.undoable)(
           return;
         }
         if (!revertData.originalStyle) {
-          (0, import_editor_elements18.deleteElementStyle)(container.id, revertData.styleId);
+          (0, import_editor_elements19.deleteElementStyle)(container.id, revertData.styleId);
           return;
         }
         const classesProp = getClassesProp(container);
@@ -5210,7 +5259,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters20.undoable)(
         }
         const [firstVariant] = revertData.originalStyle.variants;
         const additionalVariants = revertData.originalStyle.variants.slice(1);
-        (0, import_editor_elements18.createElementStyle)({
+        (0, import_editor_elements19.createElementStyle)({
           elementId: container.id,
           classesProp,
           label: import_editor_styles_repository4.ELEMENTS_STYLES_RESERVED_LABEL,
@@ -5247,7 +5296,7 @@ function pasteStyles(args, pasteLocalStyle) {
   }
   const clipboardElements = getClipboardElements(storageKey);
   const [clipboardElement] = clipboardElements ?? [];
-  const clipboardContainer = (0, import_editor_elements19.getContainer)(clipboardElement.id);
+  const clipboardContainer = (0, import_editor_elements20.getContainer)(clipboardElement.id);
   if (!clipboardElement || !clipboardContainer || !isAtomicWidget(clipboardContainer)) {
     return;
   }
@@ -5266,7 +5315,7 @@ function getClassesWithoutLocalStyle(clipboardContainer, style) {
   if (!classesProp) {
     return [];
   }
-  const classesSetting = (0, import_editor_elements19.getElementSetting)(clipboardContainer.id, classesProp);
+  const classesSetting = (0, import_editor_elements20.getElementSetting)(clipboardContainer.id, classesProp);
   return classesSetting?.value.filter((styleId) => styleId !== style?.id) ?? [];
 }
 function pasteClasses(containers, classes) {
@@ -5275,10 +5324,10 @@ function pasteClasses(containers, classes) {
     if (!classesProp) {
       return;
     }
-    const classesSetting = (0, import_editor_elements19.getElementSetting)(container.id, classesProp);
+    const classesSetting = (0, import_editor_elements20.getElementSetting)(container.id, classesProp);
     const currentClasses = import_editor_props10.classesPropTypeUtil.extract(classesSetting) ?? [];
     const newClasses = import_editor_props10.classesPropTypeUtil.create(Array.from(/* @__PURE__ */ new Set([...classes, ...currentClasses])));
-    (0, import_editor_elements19.updateElementSettings)({
+    (0, import_editor_elements20.updateElementSettings)({
       id: container.id,
       props: { [classesProp]: newClasses }
     });
@@ -5289,7 +5338,7 @@ function pasteClasses(containers, classes) {
 var import_editor_v1_adapters23 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/reset-element-style.ts
-var import_editor_elements20 = require("@elementor/editor-elements");
+var import_editor_elements21 = require("@elementor/editor-elements");
 var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters22 = require("@elementor/editor-v1-adapters");
 var import_i18n7 = require("@wordpress/i18n");
@@ -5298,9 +5347,9 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters22.undoable)(
     do: ({ containers }) => {
       return containers.map((container) => {
         const elementId = container.model.get("id");
-        const containerStyles = (0, import_editor_elements20.getElementStyles)(elementId);
+        const containerStyles = (0, import_editor_elements21.getElementStyles)(elementId);
         Object.keys(containerStyles ?? {}).forEach(
-          (styleId) => (0, import_editor_elements20.deleteElementStyle)(elementId, styleId)
+          (styleId) => (0, import_editor_elements21.deleteElementStyle)(elementId, styleId)
         );
         return containerStyles;
       });
@@ -5316,7 +5365,7 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters22.undoable)(
         Object.entries(containerStyles ?? {}).forEach(([styleId, style]) => {
           const [firstVariant] = style.variants;
           const additionalVariants = style.variants.slice(1);
-          (0, import_editor_elements20.createElementStyle)({
+          (0, import_editor_elements21.createElementStyle)({
             elementId,
             classesProp,
             styleId,
@@ -5441,10 +5490,10 @@ var getLegacyPanelElementView = ({ settings, ...rest }) => {
 };
 
 // src/utils/after-render.ts
-var import_editor_elements21 = require("@elementor/editor-elements");
+var import_editor_elements22 = require("@elementor/editor-elements");
 function doAfterRender(elementIds, callback) {
   const pending = elementIds.map((elementId) => {
-    const view = (0, import_editor_elements21.getContainer)(elementId)?.view;
+    const view = (0, import_editor_elements22.getContainer)(elementId)?.view;
     if (!view || !hasDoAfterRender(view)) {
       return void 0;
     }

package/dist/index.mjs

@@ -1138,8 +1138,9 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, getC
         ...style,
         cssName: provider.actions.resolveCssName(style.id)
       }));
-      return renderStyles({ styles: breakToBreakpoints(changedStyles), signal }).then((rendered) => {
-        updateCacheItems(cache, rendered);
+      const breakpointSplit = breakToBreakpoints(changedStyles);
+      return renderStyles({ styles: breakpointSplit, signal }).then((rendered) => {
+        updateCacheItems(cache, changedIds, rendered);
         return getOrderedItems(cache);
       });
     }
@@ -1196,19 +1197,14 @@ function getChangedStyleIds(previous, current) {
 function getOrderedItems(cache) {
   return cache.orderedIds.map((id) => cache.itemsById.get(id)).filter((items) => items !== void 0).flat();
 }
-function updateCacheItems(cache, changedItems) {
+function updateCacheItems(cache, changedIds, changedItems) {
+  for (const id of changedIds) {
+    cache.itemsById.delete(id);
+  }
   for (const item of changedItems) {
-    const existing = cache.itemsById.get(item.id);
-    if (existing) {
-      const idx = existing.findIndex((e) => e.breakpoint === item.breakpoint && e.state === item.state);
-      if (idx >= 0) {
-        existing[idx] = item;
-      } else {
-        existing.push(item);
-      }
-    } else {
-      cache.itemsById.set(item.id, [item]);
-    }
+    const existing = cache.itemsById.get(item.id) || [];
+    existing.push(item);
+    cache.itemsById.set(item.id, existing);
   }
 }
 function rebuildCache(cache, allStyles, items) {
@@ -2097,6 +2093,57 @@ function createElementViewClassDeclaration() {
 // src/legacy/create-nested-templated-element-type.ts
 import { ELEMENT_STYLE_CHANGE_EVENT } from "@elementor/editor-elements";
 
+// src/legacy/create-pending-element.ts
+import {
+  addModelToParent,
+  findModelInDocument,
+  generateElementId,
+  getContainer
+} from "@elementor/editor-elements";
+function createPendingElement(wrapperView, data, options = {}) {
+  const parentContainer = wrapperView.getContainer();
+  const model = { ...data };
+  if (!model.id) {
+    model.id = generateElementId();
+  }
+  if (!model.elements) {
+    model.elements = [];
+  }
+  const added = addModelToParent(parentContainer.id, model, options);
+  if (!added) {
+    return void 0;
+  }
+  const childId = model.id;
+  const childModel = findModelInDocument(childId);
+  if (!childModel) {
+    return void 0;
+  }
+  const pendingContainer = {
+    id: childId,
+    settings: { get: () => ({}), set: () => ({}), toJSON: () => ({}) },
+    parent: parentContainer,
+    model: childModel,
+    view: void 0,
+    lookup() {
+      return getContainer(childId) ?? pendingContainer;
+    }
+  };
+  if (options.edit !== false) {
+    selectChildWhenWrapperRenders(wrapperView, childId);
+  }
+  return { getContainer: () => pendingContainer };
+}
+function selectChildWhenWrapperRenders(wrapperView, childId) {
+  wrapperView.once("render", () => {
+    const childContainer = getContainer(childId);
+    if (childContainer?.model?.trigger) {
+      childContainer.model.trigger("request:edit");
+      return;
+    }
+    wrapperView.model?.trigger?.("request:edit");
+  });
+}
+
 // src/legacy/twig-rendering-utils.ts
 function setupTwigRenderer({ renderer, element }) {
   const templateKey = element.twig_main_template;
@@ -2314,6 +2361,7 @@ function createNestedTemplatedElementView({
   const AtomicElementBaseView = legacyWindow.elementor.modules.elements.views.createAtomicElementBase(type);
   const parentRenderChildren = AtomicElementBaseView.prototype._renderChildren;
   const parentOpenEditingPanel = AtomicElementBaseView.prototype._openEditingPanel;
+  const parentAddElement = AtomicElementBaseView.prototype.addElement;
   return AtomicElementBaseView.extend({
     _abortController: null,
     _lastResolvedSettingsHash: null,
@@ -2513,6 +2561,12 @@ function createNestedTemplatedElementView({
     _openEditingPanel(options) {
       this._doAfterRender(() => parentOpenEditingPanel.call(this, options));
     },
+    addElement(data, options) {
+      if (this.isRendered) {
+        return parentAddElement.call(this, data, options);
+      }
+      return createPendingElement(this, data, options);
+    },
     getInteractionId() {
       const originId = this.model.get("originId");
       const id = this.model.get("id");
@@ -2589,7 +2643,7 @@ import { createRoot } from "react-dom/client";
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 import * as React6 from "react";
-import { getContainer, getElementLabel, getElementType as getElementType2 } from "@elementor/editor-elements";
+import { getContainer as getContainer2, getElementLabel, getElementType as getElementType2 } from "@elementor/editor-elements";
 import {
   htmlV3PropTypeUtil as htmlV3PropTypeUtil2,
   parseHtmlChildren,
@@ -3036,7 +3090,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     runCommandSync(
       "document/elements/set-settings",
       {
-        container: getContainer(this.id),
+        container: getContainer2(this.id),
         settings: {
           [key]: value
         }
@@ -3618,7 +3672,7 @@ var initGeneralContextResource = (reg) => {
 };
 
 // src/mcp/resources/selected-element-resource.ts
-import { getContainer as getContainer2, getSelectedElements, getWidgetsCache as getWidgetsCache5 } from "@elementor/editor-elements";
+import { getContainer as getContainer3, getSelectedElements, getWidgetsCache as getWidgetsCache5 } from "@elementor/editor-elements";
 import {
   __privateListenTo as listenTo4,
   commandEndEvent as commandEndEvent7
@@ -3696,7 +3750,7 @@ function readSelectionFromEditor() {
   if (elements.length !== 1) {
     return createEmptySelectedElementPayload();
   }
-  const container = getContainer2(elements[0].id);
+  const container = getContainer3(elements[0].id);
   return buildPayloadFromContainer(container);
 }
 function buildPayloadFromContainer(container) {
@@ -3771,15 +3825,15 @@ import { getCurrentDocument } from "@elementor/editor-documents";
 import {
   createElement as createElement8,
   deleteElement,
-  getContainer as getContainer4,
+  getContainer as getContainer5,
   getWidgetsCache as getWidgetsCache9
 } from "@elementor/editor-elements";
 
 // src/composition-builder/composition-builder.ts
 import {
   createElement as createElement7,
-  generateElementId,
-  getContainer as getContainer3,
+  generateElementId as generateElementId2,
+  getContainer as getContainer4,
   getWidgetsCache as getWidgetsCache8
 } from "@elementor/editor-elements";
 
@@ -3997,8 +4051,8 @@ var CompositionBuilder = class _CompositionBuilder {
   api = {
     createElement: createElement7,
     getWidgetsCache: getWidgetsCache8,
-    generateElementId,
-    getContainer: getContainer3,
+    generateElementId: generateElementId2,
+    getContainer: getContainer4,
     doUpdateElementProperty
   };
   xml;
@@ -4439,7 +4493,7 @@ var initBuildCompositionsTool = (reg) => {
       let generatedXML = "";
       const errors = [];
       const rootContainers = [];
-      const documentContainer = getContainer4("document");
+      const documentContainer = getContainer5("document");
       const currentDocument = getCurrentDocument();
       const targetContainer = getCompositionTargetContainer(documentContainer, currentDocument?.type.value);
       try {
@@ -4778,7 +4832,7 @@ Check the styles schema at the resource [${STYLE_SCHEMA_URI.replace(
 }
 
 // src/mcp/tools/get-element-config/tool.ts
-import { getContainer as getContainer5, getElementStyles as getElementStyles2, getWidgetsCache as getWidgetsCache11 } from "@elementor/editor-elements";
+import { getContainer as getContainer6, getElementStyles as getElementStyles2, getWidgetsCache as getWidgetsCache11 } from "@elementor/editor-elements";
 import { Schema as Schema4 } from "@elementor/editor-props";
 import { z as z3 } from "@elementor/schema";
 var schema = {
@@ -4817,7 +4871,7 @@ var initGetElementConfigTool = (reg) => {
       speedPriority: 0.9
     },
     handler: async ({ elementId }) => {
-      const element = getContainer5(elementId);
+      const element = getContainer6(elementId);
       if (!element) {
         throw new Error(`Element with ID ${elementId} not found.`);
       }
@@ -5097,7 +5151,7 @@ function shouldBlock(sourceElements, targetElements) {
 }
 
 // src/style-commands/paste-style.ts
-import { getContainer as getContainer6, getElementSetting, updateElementSettings as updateElementSettings2 } from "@elementor/editor-elements";
+import { getContainer as getContainer7, getElementSetting, updateElementSettings as updateElementSettings2 } from "@elementor/editor-elements";
 import { classesPropTypeUtil } from "@elementor/editor-props";
 import {
   __privateListenTo as listenTo5,
@@ -5250,7 +5304,7 @@ function pasteStyles(args, pasteLocalStyle) {
   }
   const clipboardElements = getClipboardElements(storageKey);
   const [clipboardElement] = clipboardElements ?? [];
-  const clipboardContainer = getContainer6(clipboardElement.id);
+  const clipboardContainer = getContainer7(clipboardElement.id);
   if (!clipboardElement || !clipboardContainer || !isAtomicWidget(clipboardContainer)) {
     return;
   }
@@ -5448,10 +5502,10 @@ var getLegacyPanelElementView = ({ settings, ...rest }) => {
 };
 
 // src/utils/after-render.ts
-import { getContainer as getContainer7 } from "@elementor/editor-elements";
+import { getContainer as getContainer8 } from "@elementor/editor-elements";
 function doAfterRender(elementIds, callback) {
   const pending = elementIds.map((elementId) => {
-    const view = getContainer7(elementId)?.view;
+    const view = getContainer8(elementId)?.view;
     if (!view || !hasDoAfterRender(view)) {
       return void 0;
     }

package/package.json

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

package/src/hooks/__tests__/use-style-items.test.ts

@@ -408,6 +408,61 @@ describe( 'useStyleItems', () => {
 		] );
 	} );
 
+	it( 'should remove cached items for breakpoints whose variants no longer exist', async () => {
+		// Arrange.
+		const renderStylesMock = jest.fn().mockImplementation( ( { styles } ) =>
+			Promise.resolve(
+				styles.map( ( style: StyleDefinition ) => ( {
+					id: style.id,
+					breakpoint: style?.variants[ 0 ]?.meta.breakpoint || 'desktop',
+				} ) )
+			)
+		);
+
+		jest.mocked( useStyleRenderer ).mockReturnValue( renderStylesMock );
+
+		const styleWithTwoBreakpoints = createMockStyleDefinitionWithVariants( {
+			id: 'style1',
+			variants: [
+				{ meta: { breakpoint: null, state: null }, props: { 'font-family': 'Arial' }, custom_css: null },
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-family': 'Roboto' }, custom_css: null },
+			],
+		} );
+
+		const mockProvider = createMockStylesProvider( { key: 'provider1', priority: 1 }, [ styleWithTwoBreakpoints ] );
+
+		jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ mockProvider ] );
+
+		const { result } = renderHook( () => useStyleItems() );
+
+		await act( async () => {
+			mockProvider.actions.updateProps?.( {
+				id: 'style1',
+				meta: { breakpoint: null, state: null },
+				props: {},
+			} );
+		} );
+
+		expect( result.current ).toEqual( [
+			{ id: 'style1', breakpoint: 'desktop' },
+			{ id: 'style1', breakpoint: 'tablet' },
+		] );
+
+		// Act - simulate the tablet variant being removed (e.g. user cleared its only prop,
+		// global-classes store calls getNonEmptyVariants which drops empty variants).
+		await act( async () => {
+			mockProvider.actions.update?.( {
+				id: 'style1',
+				variants: [
+					{ meta: { breakpoint: null, state: null }, props: { 'font-family': 'Arial' }, custom_css: null },
+				],
+			} );
+		} );
+
+		// Assert - the tablet item must be evicted from the cache.
+		expect( result.current ).toEqual( [ { id: 'style1', breakpoint: 'desktop' } ] );
+	} );
+
 	it( 'should only re-render changed styles on differential update', async () => {
 		// Arrange.
 		const renderStylesMock = jest.fn().mockImplementation( ( { styles } ) =>

package/src/hooks/use-style-items.ts

@@ -200,8 +200,10 @@ function createProviderSubscriber( { provider, renderStyles, setStyleItems, getC
 					cssName: provider.actions.resolveCssName( style.id ),
 				} ) );
 
-			return renderStyles( { styles: breakToBreakpoints( changedStyles ), signal } ).then( ( rendered ) => {
-				updateCacheItems( cache, rendered );
+			const breakpointSplit = breakToBreakpoints( changedStyles );
+
+			return renderStyles( { styles: breakpointSplit, signal } ).then( ( rendered ) => {
+				updateCacheItems( cache, changedIds, rendered );
 
 				return getOrderedItems( cache );
 			} );
@@ -277,19 +279,15 @@ function getOrderedItems( cache: StyleItemsCache ): StyleItem[] {
 		.flat();
 }
 
-function updateCacheItems( cache: StyleItemsCache, changedItems: StyleItem[] ): void {
+function updateCacheItems( cache: StyleItemsCache, changedIds: string[], changedItems: StyleItem[] ): void {
+	for ( const id of changedIds ) {
+		cache.itemsById.delete( id );
+	}
+
 	for ( const item of changedItems ) {
-		const existing = cache.itemsById.get( item.id );
-		if ( existing ) {
-			const idx = existing.findIndex( ( e ) => e.breakpoint === item.breakpoint && e.state === item.state );
-			if ( idx >= 0 ) {
-				existing[ idx ] = item;
-			} else {
-				existing.push( item );
-			}
-		} else {
-			cache.itemsById.set( item.id, [ item ] );
-		}
+		const existing = cache.itemsById.get( item.id ) || [];
+		existing.push( item );
+		cache.itemsById.set( item.id, existing );
 	}
 }
 

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

@@ -1,7 +1,8 @@
-import { ELEMENT_STYLE_CHANGE_EVENT } from '@elementor/editor-elements';
+import { ELEMENT_STYLE_CHANGE_EVENT, type V1ElementModelProps } from '@elementor/editor-elements';
 
 import { type DomRenderer } from '../renderers/create-dom-renderer';
 import { signalizedProcess } from '../utils/signalized-process';
+import { createPendingElement } from './create-pending-element';
 import { canBeTemplated, type TemplatedElementConfig } from './create-templated-element-type';
 import {
 	createAfterRender,
@@ -101,6 +102,7 @@ export function createNestedTemplatedElementView( {
 	const AtomicElementBaseView = legacyWindow.elementor.modules.elements.views.createAtomicElementBase( type );
 	const parentRenderChildren = AtomicElementBaseView.prototype._renderChildren;
 	const parentOpenEditingPanel = AtomicElementBaseView.prototype._openEditingPanel;
+	const parentAddElement = AtomicElementBaseView.prototype.addElement;
 
 	return AtomicElementBaseView.extend( {
 		_abortController: null as AbortController | null,
@@ -381,6 +383,14 @@ export function createNestedTemplatedElementView( {
 			this._doAfterRender( () => parentOpenEditingPanel.call( this, options ) );
 		},
 
+		addElement( data: Partial< V1ElementModelProps >, options?: { edit?: boolean; at?: number } ) {
+			if ( this.isRendered ) {
+				return parentAddElement.call( this, data, options );
+			}
+
+			return createPendingElement( this, data, options );
+		},
+
 		getInteractionId() {
 			const originId = this.model.get( 'originId' );
 			const id = this.model.get( 'id' );

package/src/legacy/create-pending-element.ts

@@ -0,0 +1,70 @@
+import {
+	addModelToParent,
+	findModelInDocument,
+	generateElementId,
+	getContainer,
+	type V1Element,
+	type V1ElementModelProps,
+} from '@elementor/editor-elements';
+
+import { type ElementView } from './types';
+
+export function createPendingElement(
+	wrapperView: ElementView,
+	data: Partial< V1ElementModelProps >,
+	options: { edit?: boolean; at?: number } = {}
+): { getContainer: () => V1Element } | undefined {
+	const parentContainer = wrapperView.getContainer();
+	const model: Partial< V1ElementModelProps > = { ...data };
+
+	if ( ! model.id ) {
+		model.id = generateElementId();
+	}
+
+	if ( ! model.elements ) {
+		model.elements = [];
+	}
+
+	const added = addModelToParent( parentContainer.id, model as V1ElementModelProps, options );
+
+	if ( ! added ) {
+		return undefined;
+	}
+
+	const childId = model.id;
+	const childModel = findModelInDocument( childId );
+
+	if ( ! childModel ) {
+		return undefined;
+	}
+
+	const pendingContainer: V1Element = {
+		id: childId,
+		settings: { get: () => ( {} ), set: () => ( {} ), toJSON: () => ( {} ) } as V1Element[ 'settings' ],
+		parent: parentContainer,
+		model: childModel as V1Element[ 'model' ],
+		view: undefined,
+		lookup() {
+			return getContainer( childId ) ?? pendingContainer;
+		},
+	};
+
+	if ( options.edit !== false ) {
+		selectChildWhenWrapperRenders( wrapperView, childId );
+	}
+
+	return { getContainer: () => pendingContainer };
+}
+
+function selectChildWhenWrapperRenders( wrapperView: ElementView, childId: string ): void {
+	wrapperView.once( 'render', () => {
+		const childContainer = getContainer( childId );
+
+		if ( childContainer?.model?.trigger ) {
+			childContainer.model.trigger( 'request:edit' );
+			return;
+		}
+
+		wrapperView.model?.trigger?.( 'request:edit' );
+	} );
+}

package/src/legacy/types.ts

@@ -1,5 +1,5 @@
 import { type Root } from 'react-dom/client';
-import { type V1Element } from '@elementor/editor-elements';
+import { type V1Element, type V1ElementModelProps } from '@elementor/editor-elements';
 import { type Props, type PropValue } from '@elementor/editor-props';
 
 export type RenderContext< T = unknown > = Record< string, T >;
@@ -89,6 +89,8 @@ export declare class ElementView {
 
 	constructor( ...args: unknown[] );
 
+	addElement( data: Partial< V1ElementModelProps >, options?: object ): unknown;
+
 	onRender( ...args: unknown[] ): void;
 
 	onDestroy( ...args: unknown[] ): void;
@@ -163,6 +165,8 @@ export declare class ElementView {
 	_openEditingPanel( options?: { scrollIntoView: boolean } ): void;
 
 	once: ( event: string, callback: () => void ) => void;
+
+	getContainer(): V1Element;
 }
 
 export declare class TemplatedElementView extends ElementView {