@elementor/editor-components 3.35.0-418 → 3.35.0-420

package/dist/index.js

@@ -43,7 +43,7 @@ var import_editor_elements_panel = require("@elementor/editor-elements-panel");
 var import_editor_panels4 = require("@elementor/editor-panels");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
-var import_store76 = require("@elementor/store");
+var import_store78 = require("@elementor/store");
 var import_i18n26 = require("@wordpress/i18n");
 
 // src/component-instance-transformer.ts
@@ -306,9 +306,6 @@ var invalidateComponentDocumentData = (id2) => {
 };
 
 // src/component-instance-transformer.ts
-var componentInstanceContext = new import_editor_canvas.RenderContext("component-instance", {
-  overrides: {}
-});
 var componentInstanceTransformer = (0, import_editor_canvas.createTransformer)(
   async ({
     component_id: id2,
@@ -338,7 +335,7 @@ var componentInstanceTransformer = (0, import_editor_canvas.createTransformer)(
 var import_editor_canvas2 = require("@elementor/editor-canvas");
 var componentOverridableTransformer = (0, import_editor_canvas2.createTransformer)(
   (value, options) => {
-    const { overrides } = componentInstanceContext.get();
+    const { overrides } = options.renderContext ?? {};
     const overrideValue = overrides?.[value.override_key];
     if (overrideValue) {
       const isOverride = isOriginValueOverride(value.origin_value);
@@ -1811,13 +1808,41 @@ function createComponentView(options) {
   return class extends (0, import_editor_canvas4.createTemplatedElementView)(options) {
     legacyWindow = window;
     eventsManagerConfig = this.legacyWindow.elementorCommon.eventsManager.config;
+    #componentRenderContext;
     isComponentCurrentlyEdited() {
       const currentDocument = (0, import_editor_documents7.getCurrentDocument)();
       return currentDocument?.id === this.getComponentId();
     }
+    getRenderContext() {
+      const namespaceKey = this.getNamespaceKey();
+      const parentContext = this._parent?.getRenderContext?.();
+      const parentComponentContext = parentContext?.[namespaceKey];
+      if (!this.#componentRenderContext) {
+        return parentContext;
+      }
+      const ownOverrides = this.#componentRenderContext.overrides ?? {};
+      const parentOverrides = parentComponentContext?.overrides ?? {};
+      return {
+        ...parentContext,
+        [namespaceKey]: {
+          overrides: {
+            ...parentOverrides,
+            ...ownOverrides
+          }
+        }
+      };
+    }
+    getResolverRenderContext() {
+      const namespaceKey = this.getNamespaceKey();
+      const context = this.getRenderContext();
+      return context?.[namespaceKey];
+    }
     afterSettingsResolve(settings) {
       const componentInstance = settings.component_instance;
       if (componentInstance) {
+        this.#componentRenderContext = {
+          overrides: componentInstance.overrides ?? {}
+        };
         this.collection = this.legacyWindow.elementor.createBackboneElementsCollection(
           componentInstance.elements
         );
@@ -2167,8 +2192,8 @@ function getSelectedElementContainer() {
 
 // src/components/create-component-form/utils/replace-element-with-component.ts
 var import_editor_elements6 = require("@elementor/editor-elements");
-var replaceElementWithComponent = (element, component) => {
-  (0, import_editor_elements6.replaceElement)({
+var replaceElementWithComponent = async (element, component) => {
+  return await (0, import_editor_elements6.replaceElement)({
     currentElement: element,
     newElement: createComponentModel2(component),
     withHistory: false
@@ -2531,6 +2556,7 @@ var import_editor_elements9 = require("@elementor/editor-elements");
 var import_editor_notifications2 = require("@elementor/editor-notifications");
 var import_editor_ui8 = require("@elementor/editor-ui");
 var import_icons11 = require("@elementor/icons");
+var import_store47 = require("@elementor/store");
 var import_ui15 = require("@elementor/ui");
 var import_i18n18 = require("@wordpress/i18n");
 
@@ -2652,7 +2678,7 @@ function findNonAtomicElementsInElement(element) {
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 var import_store45 = require("@elementor/store");
 var import_utils4 = require("@elementor/utils");
-function createUnpublishedComponent(name, element, eventData, overridableProps, uid) {
+async function createUnpublishedComponent(name, element, eventData, overridableProps, uid) {
   const generatedUid = uid ?? (0, import_utils4.generateUniqueId)("component");
   const componentBase = { uid: generatedUid, name, overridableProps };
   (0, import_store45.__dispatch)(
@@ -2662,15 +2688,15 @@ function createUnpublishedComponent(name, element, eventData, overridableProps,
     })
   );
   (0, import_store45.__dispatch)(slice.actions.addCreatedThisSession(generatedUid));
-  replaceElementWithComponent(element, componentBase);
+  const componentInstance = await replaceElementWithComponent(element, componentBase);
   trackComponentEvent({
     action: "created",
     component_uid: generatedUid,
     component_name: name,
     ...eventData
   });
-  (0, import_editor_v1_adapters5.__privateRunCommand)("document/save/auto");
-  return generatedUid;
+  await (0, import_editor_v1_adapters5.__privateRunCommand)("document/save/auto");
+  return { uid: generatedUid, instanceId: componentInstance.id };
 }
 
 // src/components/create-component-form/hooks/use-form.ts
@@ -2785,12 +2811,22 @@ function CreateComponentForm() {
       window.removeEventListener(OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup);
     };
   }, []);
-  const handleSave = (values) => {
+  const handleSave = async (values) => {
     try {
       if (!element) {
         throw new Error(`Can't save element as component: element not found`);
       }
-      const uid = createUnpublishedComponent(values.componentName, element.element, eventData.current);
+      const { uid, instanceId } = await createUnpublishedComponent(
+        values.componentName,
+        element.element,
+        eventData.current
+      );
+      const publishedComponentId = selectComponentByUid((0, import_store47.__getState)(), uid)?.id;
+      if (publishedComponentId) {
+        switchToComponent(publishedComponentId, instanceId);
+      } else {
+        throw new Error("Failed to find published component");
+      }
       setResultNotification({
         show: true,
         // Translators: %1$s: Component name, %2$s: Component UID
@@ -2907,17 +2943,17 @@ var React19 = __toESM(require("react"));
 var import_react13 = require("react");
 var import_editor_documents10 = require("@elementor/editor-documents");
 var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
-var import_store49 = require("@elementor/store");
+var import_store51 = require("@elementor/store");
 var import_utils6 = require("@elementor/utils");
 
 // src/store/actions/update-current-component.ts
 var import_editor_documents9 = require("@elementor/editor-documents");
-var import_store47 = require("@elementor/store");
+var import_store49 = require("@elementor/store");
 function updateCurrentComponent({
   path,
   currentComponentId
 }) {
-  const dispatch18 = (0, import_store47.__getStore)()?.dispatch;
+  const dispatch18 = (0, import_store49.__getStore)()?.dispatch;
   if (!dispatch18) {
     return;
   }
@@ -3119,7 +3155,7 @@ function EditComponent() {
 function useHandleDocumentSwitches() {
   const documentsManager = (0, import_editor_documents10.getV1DocumentsManager)();
   const currentComponentId = useCurrentComponentId();
-  const path = (0, import_store49.__useSelector)(selectPath);
+  const path = (0, import_store51.__useSelector)(selectPath);
   (0, import_react13.useEffect)(() => {
     return (0, import_editor_v1_adapters7.__privateListenTo)((0, import_editor_v1_adapters7.commandEndEvent)("editor/documents/open"), () => {
       const nextDocument = documentsManager.getCurrent();
@@ -3346,9 +3382,9 @@ function getControlsByBind(controls) {
 }
 
 // src/store/actions/update-overridable-prop.ts
-var import_store51 = require("@elementor/store");
+var import_store53 = require("@elementor/store");
 function updateOverridableProp(componentId, propValue, originPropFields) {
-  const overridableProps = selectOverridableProps((0, import_store51.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store53.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -3372,7 +3408,7 @@ function updateOverridableProp(componentId, propValue, originPropFields) {
       }
     }
   };
-  (0, import_store51.__dispatch)(
+  (0, import_store53.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: newOverridableProps
@@ -3660,7 +3696,7 @@ var import_ui23 = require("@elementor/ui");
 var import_i18n24 = require("@wordpress/i18n");
 
 // src/store/actions/set-overridable-prop.ts
-var import_store56 = require("@elementor/store");
+var import_store58 = require("@elementor/store");
 var import_utils7 = require("@elementor/utils");
 function setOverridableProp({
   componentId,
@@ -3674,7 +3710,7 @@ function setOverridableProp({
   originValue,
   originPropFields
 }) {
-  const overridableProps = selectOverridableProps((0, import_store56.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store58.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -3711,7 +3747,7 @@ function setOverridableProp({
   if (isChangingGroups) {
     groups = removePropFromGroup(groups, existingOverridableProp.groupId, overridableProp.overrideKey);
   }
-  (0, import_store56.__dispatch)(
+  (0, import_store58.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -3794,12 +3830,12 @@ var Indicator2 = (0, import_react16.forwardRef)(({ isOpen, isOverridable, ...pro
 )));
 
 // src/components/overridable-props/utils/get-overridable-prop.ts
-var import_store58 = require("@elementor/store");
+var import_store60 = require("@elementor/store");
 function getOverridableProp({
   componentId,
   overrideKey
 }) {
-  const overridableProps = selectOverridableProps((0, import_store58.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store60.__getState)(), componentId);
   if (!overridableProps) {
     return void 0;
   }
@@ -4309,10 +4345,10 @@ function initMcp() {
 
 // src/populate-store.ts
 var import_react17 = require("react");
-var import_store61 = require("@elementor/store");
+var import_store63 = require("@elementor/store");
 function PopulateStore() {
   (0, import_react17.useEffect)(() => {
-    (0, import_store61.__dispatch)(loadComponents());
+    (0, import_store63.__dispatch)(loadComponents());
   }, []);
   return null;
 }
@@ -4321,7 +4357,7 @@ function PopulateStore() {
 var import_editor_elements17 = require("@elementor/editor-elements");
 var import_editor_notifications3 = require("@elementor/editor-notifications");
 var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
-var import_store62 = require("@elementor/store");
+var import_store64 = require("@elementor/store");
 var import_i18n25 = require("@wordpress/i18n");
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
@@ -4347,7 +4383,7 @@ function wouldCreateCircularNesting(componentIdToAdd) {
   if (componentIdToAdd === void 0) {
     return false;
   }
-  const state = (0, import_store62.__getState)();
+  const state = (0, import_store64.__getState)();
   const currentComponentId = selectCurrentComponentId(state);
   const path = selectPath(state);
   if (currentComponentId === null) {
@@ -4445,19 +4481,19 @@ function blockCircularPaste(args) {
 }
 
 // src/store/actions/remove-component-styles.ts
-var import_store64 = require("@elementor/store");
+var import_store66 = require("@elementor/store");
 function removeComponentStyles(id2) {
   apiClient.invalidateComponentConfigCache(id2);
-  (0, import_store64.__dispatch)(slice.actions.removeStyles({ id: id2 }));
+  (0, import_store66.__dispatch)(slice.actions.removeStyles({ id: id2 }));
 }
 
 // src/store/components-styles-provider.ts
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_store66 = require("@elementor/store");
+var import_store68 = require("@elementor/store");
 var componentsStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
   key: "components-styles",
   priority: 100,
-  subscribe: (cb) => (0, import_store66.__subscribeWithSelector)(
+  subscribe: (cb) => (0, import_store68.__subscribeWithSelector)(
     (state) => state[SLICE_NAME],
     () => {
       cb();
@@ -4465,29 +4501,29 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
   ),
   actions: {
     all: () => {
-      return selectFlatStyles((0, import_store66.__getState)());
+      return selectFlatStyles((0, import_store68.__getState)());
     },
     get: (id2) => {
-      return selectFlatStyles((0, import_store66.__getState)()).find((style) => style.id === id2) ?? null;
+      return selectFlatStyles((0, import_store68.__getState)()).find((style) => style.id === id2) ?? null;
     }
   }
 });
 
 // src/sync/create-components-before-save.ts
 var import_editor_elements18 = require("@elementor/editor-elements");
-var import_store68 = require("@elementor/store");
+var import_store70 = require("@elementor/store");
 async function createComponentsBeforeSave({
   elements,
   status
 }) {
-  const unpublishedComponents = selectUnpublishedComponents((0, import_store68.__getState)());
+  const unpublishedComponents = selectUnpublishedComponents((0, import_store70.__getState)());
   if (!unpublishedComponents.length) {
     return;
   }
   try {
     const uidToComponentId = await createComponents(unpublishedComponents, status);
     updateComponentInstances(elements, uidToComponentId);
-    (0, import_store68.__dispatch)(
+    (0, import_store70.__dispatch)(
       slice.actions.add(
         unpublishedComponents.map((component) => ({
           id: uidToComponentId.get(component.uid),
@@ -4497,7 +4533,7 @@ async function createComponentsBeforeSave({
         }))
       )
     );
-    (0, import_store68.__dispatch)(slice.actions.resetUnpublished());
+    (0, import_store70.__dispatch)(slice.actions.resetUnpublished());
   } catch (error) {
     throw new Error(`Failed to publish components and update component instances: ${error}`);
   }
@@ -4557,7 +4593,7 @@ function updateElementComponentId(elementId, componentId) {
 }
 
 // src/sync/set-component-overridable-props-settings-before-save.ts
-var import_store70 = require("@elementor/store");
+var import_store72 = require("@elementor/store");
 var setComponentOverridablePropsSettingsBeforeSave = ({
   container
 }) => {
@@ -4565,7 +4601,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
   if (!currentDocument || currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE) {
     return;
   }
-  const overridableProps = selectOverridableProps((0, import_store70.__getState)(), currentDocument.id);
+  const overridableProps = selectOverridableProps((0, import_store72.__getState)(), currentDocument.id);
   if (overridableProps) {
     container.settings.set("overridable_props", overridableProps);
   }
@@ -4573,7 +4609,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
 
 // src/sync/update-archived-component-before-save.ts
 var import_editor_notifications4 = require("@elementor/editor-notifications");
-var import_store72 = require("@elementor/store");
+var import_store74 = require("@elementor/store");
 var failedNotification = (message) => ({
   type: "error",
   message: `Failed to archive components: ${message}`,
@@ -4586,7 +4622,7 @@ var successNotification = (message) => ({
 });
 var updateArchivedComponentBeforeSave = async () => {
   try {
-    const archivedComponents = selectArchivedComponents((0, import_store72.__getState)());
+    const archivedComponents = selectArchivedComponents((0, import_store74.__getState)());
     if (!archivedComponents.length) {
       return;
     }
@@ -4607,15 +4643,15 @@ var updateArchivedComponentBeforeSave = async () => {
 };
 
 // src/sync/update-component-title-before-save.ts
-var import_store74 = require("@elementor/store");
+var import_store76 = require("@elementor/store");
 var updateComponentTitleBeforeSave = async () => {
-  const updatedComponentNames = selectUpdatedComponentNames((0, import_store74.__getState)());
+  const updatedComponentNames = selectUpdatedComponentNames((0, import_store76.__getState)());
   if (!updatedComponentNames.length) {
     return;
   }
   const result = await apiClient.updateComponentTitle(updatedComponentNames);
   if (result.failedIds.length === 0) {
-    (0, import_store74.__dispatch)(slice.actions.cleanUpdatedComponentNames());
+    (0, import_store76.__dispatch)(slice.actions.cleanUpdatedComponentNames());
   }
 };
 
@@ -4650,7 +4686,7 @@ var beforeSave = ({ container, status }) => {
 // src/init.ts
 function init() {
   import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
-  (0, import_store76.__registerSlice)(slice);
+  (0, import_store78.__registerSlice)(slice);
   (0, import_editor_panels4.__registerPanel)(panel);
   (0, import_editor_canvas9.registerElementType)(
     COMPONENT_WIDGET_TYPE,