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

package/dist/index.mjs

@@ -20,7 +20,7 @@ import { __registerSlice as registerSlice } from "@elementor/store";
 import { __ as __26 } from "@wordpress/i18n";
 
 // src/component-instance-transformer.ts
-import { createTransformer, RenderContext } from "@elementor/editor-canvas";
+import { createTransformer } from "@elementor/editor-canvas";
 import { __getState as getState } from "@elementor/store";
 
 // src/store/store.ts
@@ -283,9 +283,6 @@ var invalidateComponentDocumentData = (id2) => {
 };
 
 // src/component-instance-transformer.ts
-var componentInstanceContext = new RenderContext("component-instance", {
-  overrides: {}
-});
 var componentInstanceTransformer = createTransformer(
   async ({
     component_id: id2,
@@ -315,7 +312,7 @@ var componentInstanceTransformer = createTransformer(
 import { createTransformer as createTransformer2, settingsTransformersRegistry } from "@elementor/editor-canvas";
 var componentOverridableTransformer = createTransformer2(
   (value, options) => {
-    const { overrides } = componentInstanceContext.get();
+    const { overrides } = options.renderContext ?? {};
     const overrideValue = overrides?.[value.override_key];
     if (overrideValue) {
       const isOverride = isOriginValueOverride(value.origin_value);
@@ -1818,13 +1815,41 @@ function createComponentView(options) {
   return class extends createTemplatedElementView(options) {
     legacyWindow = window;
     eventsManagerConfig = this.legacyWindow.elementorCommon.eventsManager.config;
+    #componentRenderContext;
     isComponentCurrentlyEdited() {
       const currentDocument = 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
         );
@@ -2178,8 +2203,8 @@ function getSelectedElementContainer() {
 
 // src/components/create-component-form/utils/replace-element-with-component.ts
 import { replaceElement } from "@elementor/editor-elements";
-var replaceElementWithComponent = (element, component) => {
-  replaceElement({
+var replaceElementWithComponent = async (element, component) => {
+  return await replaceElement({
     currentElement: element,
     newElement: createComponentModel2(component),
     withHistory: false
@@ -2542,6 +2567,7 @@ import { getElementLabel } from "@elementor/editor-elements";
 import { notify as notify2 } from "@elementor/editor-notifications";
 import { Form as FormElement, ThemeProvider as ThemeProvider3 } from "@elementor/editor-ui";
 import { StarIcon } from "@elementor/icons";
+import { __getState as getState15 } from "@elementor/store";
 import { Alert as Alert2, Button as Button3, FormLabel as FormLabel2, Grid as Grid2, Popover as Popover3, Snackbar, Stack as Stack11, TextField as TextField3, Typography as Typography9 } from "@elementor/ui";
 import { __ as __18 } from "@wordpress/i18n";
 
@@ -2663,7 +2689,7 @@ function findNonAtomicElementsInElement(element) {
 import { __privateRunCommand as runCommand3 } from "@elementor/editor-v1-adapters";
 import { __dispatch as dispatch11 } from "@elementor/store";
 import { generateUniqueId as generateUniqueId3 } from "@elementor/utils";
-function createUnpublishedComponent(name, element, eventData, overridableProps, uid) {
+async function createUnpublishedComponent(name, element, eventData, overridableProps, uid) {
   const generatedUid = uid ?? generateUniqueId3("component");
   const componentBase = { uid: generatedUid, name, overridableProps };
   dispatch11(
@@ -2673,15 +2699,15 @@ function createUnpublishedComponent(name, element, eventData, overridableProps,
     })
   );
   dispatch11(slice.actions.addCreatedThisSession(generatedUid));
-  replaceElementWithComponent(element, componentBase);
+  const componentInstance = await replaceElementWithComponent(element, componentBase);
   trackComponentEvent({
     action: "created",
     component_uid: generatedUid,
     component_name: name,
     ...eventData
   });
-  runCommand3("document/save/auto");
-  return generatedUid;
+  await runCommand3("document/save/auto");
+  return { uid: generatedUid, instanceId: componentInstance.id };
 }
 
 // src/components/create-component-form/hooks/use-form.ts
@@ -2796,12 +2822,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(getState15(), 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
@@ -3361,9 +3397,9 @@ function getControlsByBind(controls) {
 }
 
 // src/store/actions/update-overridable-prop.ts
-import { __dispatch as dispatch12, __getState as getState15 } from "@elementor/store";
+import { __dispatch as dispatch12, __getState as getState16 } from "@elementor/store";
 function updateOverridableProp(componentId, propValue, originPropFields) {
-  const overridableProps = selectOverridableProps(getState15(), componentId);
+  const overridableProps = selectOverridableProps(getState16(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -3675,7 +3711,7 @@ import { bindPopover as bindPopover2, bindTrigger as bindTrigger4, Popover as Po
 import { __ as __24 } from "@wordpress/i18n";
 
 // src/store/actions/set-overridable-prop.ts
-import { __dispatch as dispatch13, __getState as getState16 } from "@elementor/store";
+import { __dispatch as dispatch13, __getState as getState17 } from "@elementor/store";
 import { generateUniqueId as generateUniqueId4 } from "@elementor/utils";
 function setOverridableProp({
   componentId,
@@ -3689,7 +3725,7 @@ function setOverridableProp({
   originValue,
   originPropFields
 }) {
-  const overridableProps = selectOverridableProps(getState16(), componentId);
+  const overridableProps = selectOverridableProps(getState17(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -3809,12 +3845,12 @@ var Indicator2 = forwardRef2(({ isOpen, isOverridable, ...props }, ref) => /* @_
 )));
 
 // src/components/overridable-props/utils/get-overridable-prop.ts
-import { __getState as getState17 } from "@elementor/store";
+import { __getState as getState18 } from "@elementor/store";
 function getOverridableProp({
   componentId,
   overrideKey
 }) {
-  const overridableProps = selectOverridableProps(getState17(), componentId);
+  const overridableProps = selectOverridableProps(getState18(), componentId);
   if (!overridableProps) {
     return void 0;
   }
@@ -4336,7 +4372,7 @@ function PopulateStore() {
 import { getAllDescendants as getAllDescendants3 } from "@elementor/editor-elements";
 import { notify as notify3 } from "@elementor/editor-notifications";
 import { blockCommand as blockCommand2 } from "@elementor/editor-v1-adapters";
-import { __getState as getState18 } from "@elementor/store";
+import { __getState as getState19 } from "@elementor/store";
 import { __ as __25 } from "@wordpress/i18n";
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
@@ -4362,7 +4398,7 @@ function wouldCreateCircularNesting(componentIdToAdd) {
   if (componentIdToAdd === void 0) {
     return false;
   }
-  const state = getState18();
+  const state = getState19();
   const currentComponentId = selectCurrentComponentId(state);
   const path = selectPath(state);
   if (currentComponentId === null) {
@@ -4468,7 +4504,7 @@ function removeComponentStyles(id2) {
 
 // src/store/components-styles-provider.ts
 import { createStylesProvider } from "@elementor/editor-styles-repository";
-import { __getState as getState19, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
+import { __getState as getState20, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
 var componentsStylesProvider = createStylesProvider({
   key: "components-styles",
   priority: 100,
@@ -4480,22 +4516,22 @@ var componentsStylesProvider = createStylesProvider({
   ),
   actions: {
     all: () => {
-      return selectFlatStyles(getState19());
+      return selectFlatStyles(getState20());
     },
     get: (id2) => {
-      return selectFlatStyles(getState19()).find((style) => style.id === id2) ?? null;
+      return selectFlatStyles(getState20()).find((style) => style.id === id2) ?? null;
     }
   }
 });
 
 // src/sync/create-components-before-save.ts
 import { updateElementSettings as updateElementSettings3 } from "@elementor/editor-elements";
-import { __dispatch as dispatch16, __getState as getState20 } from "@elementor/store";
+import { __dispatch as dispatch16, __getState as getState21 } from "@elementor/store";
 async function createComponentsBeforeSave({
   elements,
   status
 }) {
-  const unpublishedComponents = selectUnpublishedComponents(getState20());
+  const unpublishedComponents = selectUnpublishedComponents(getState21());
   if (!unpublishedComponents.length) {
     return;
   }
@@ -4572,7 +4608,7 @@ function updateElementComponentId(elementId, componentId) {
 }
 
 // src/sync/set-component-overridable-props-settings-before-save.ts
-import { __getState as getState21 } from "@elementor/store";
+import { __getState as getState22 } from "@elementor/store";
 var setComponentOverridablePropsSettingsBeforeSave = ({
   container
 }) => {
@@ -4580,7 +4616,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
   if (!currentDocument || currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE) {
     return;
   }
-  const overridableProps = selectOverridableProps(getState21(), currentDocument.id);
+  const overridableProps = selectOverridableProps(getState22(), currentDocument.id);
   if (overridableProps) {
     container.settings.set("overridable_props", overridableProps);
   }
@@ -4588,7 +4624,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
 
 // src/sync/update-archived-component-before-save.ts
 import { notify as notify4 } from "@elementor/editor-notifications";
-import { __getState as getState22 } from "@elementor/store";
+import { __getState as getState23 } from "@elementor/store";
 var failedNotification = (message) => ({
   type: "error",
   message: `Failed to archive components: ${message}`,
@@ -4601,7 +4637,7 @@ var successNotification = (message) => ({
 });
 var updateArchivedComponentBeforeSave = async () => {
   try {
-    const archivedComponents = selectArchivedComponents(getState22());
+    const archivedComponents = selectArchivedComponents(getState23());
     if (!archivedComponents.length) {
       return;
     }
@@ -4622,9 +4658,9 @@ var updateArchivedComponentBeforeSave = async () => {
 };
 
 // src/sync/update-component-title-before-save.ts
-import { __dispatch as dispatch17, __getState as getState23 } from "@elementor/store";
+import { __dispatch as dispatch17, __getState as getState24 } from "@elementor/store";
 var updateComponentTitleBeforeSave = async () => {
-  const updatedComponentNames = selectUpdatedComponentNames(getState23());
+  const updatedComponentNames = selectUpdatedComponentNames(getState24());
   if (!updatedComponentNames.length) {
     return;
   }