@elementor/editor-components 3.33.0-263 → 3.33.0-266

package/dist/index.mjs

@@ -578,11 +578,14 @@ import { useEffect, useMemo as useMemo2, useRef, useState as useState2 } from "r
 import { getElementLabel } from "@elementor/editor-elements";
 import { ThemeProvider as ThemeProvider2 } from "@elementor/editor-ui";
 import { StarIcon } from "@elementor/icons";
-import { __useDispatch as useDispatch } from "@elementor/store";
 import { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack as Stack4, TextField as TextField2, Typography as Typography3 } from "@elementor/ui";
-import { generateUniqueId } from "@elementor/utils";
 import { __ as __4 } from "@wordpress/i18n";
 
+// src/store/create-unpublished-component.ts
+import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
+import { __dispatch as dispatch2 } from "@elementor/store";
+import { generateUniqueId } from "@elementor/utils";
+
 // src/utils/tracking.ts
 import { getMixpanel } from "@elementor/mixpanel";
 import { __getState as getState3 } from "@elementor/store";
@@ -617,6 +620,28 @@ var onElementDrop = (_args, element) => {
   });
 };
 
+// src/store/create-unpublished-component.ts
+function createUnpublishedComponent(name, element, eventData) {
+  const uid = generateUniqueId("component");
+  const componentBase = { uid, name };
+  dispatch2(
+    slice.actions.addUnpublished({
+      ...componentBase,
+      elements: [element]
+    })
+  );
+  dispatch2(slice.actions.addCreatedThisSession(uid));
+  replaceElementWithComponent(element, componentBase);
+  trackComponentEvent({
+    action: "created",
+    component_uid: uid,
+    component_name: name,
+    ...eventData
+  });
+  runCommand("document/save/auto");
+  return uid;
+}
+
 // src/components/create-component-form/hooks/use-form.ts
 import { useMemo, useState } from "react";
 var useForm = (initialValues) => {
@@ -726,7 +751,6 @@ function CreateComponentForm() {
   const [element, setElement] = useState2(null);
   const [anchorPosition, setAnchorPosition] = useState2();
   const [resultNotification, setResultNotification] = useState2(null);
-  const dispatch5 = useDispatch();
   const eventData = useRef(null);
   useEffect(() => {
     const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
@@ -749,22 +773,7 @@ function CreateComponentForm() {
       if (!element) {
         throw new Error(`Can't save element as component: element not found`);
       }
-      const uid = generateUniqueId("component");
-      dispatch5(
-        slice.actions.addUnpublished({
-          uid,
-          name: values.componentName,
-          elements: [element.element]
-        })
-      );
-      dispatch5(slice.actions.addCreatedThisSession(uid));
-      replaceElementWithComponent(element.element, { uid, name: values.componentName });
-      trackComponentEvent({
-        action: "created",
-        component_uid: uid,
-        component_name: values.componentName,
-        ...eventData.current
-      });
+      const uid = createUnpublishedComponent(values.componentName, element.element, eventData.current);
       setResultNotification({
         show: true,
         // Translators: %1$s: Component name, %2$s: Component UID
@@ -885,7 +894,7 @@ import { useCallback, useEffect as useEffect4, useState as useState4 } from "rea
 import { getV1DocumentsManager } from "@elementor/editor-documents";
 import {
   __privateListenTo as listenTo,
-  __privateRunCommand as runCommand,
+  __privateRunCommand as runCommand2,
   commandEndEvent as commandEndEvent2
 } from "@elementor/editor-v1-adapters";
 
@@ -1128,7 +1137,7 @@ function useNavigateBack(path) {
     const { component: prevComponent, instanceId: prevComponentInstanceId } = path.at(-2) ?? {};
     const { id: prevComponentId } = prevComponent ?? {};
     const switchToDocument = (id, selector) => {
-      runCommand("editor/documents/switch", {
+      runCommand2("editor/documents/switch", {
         id,
         selector,
         mode: "autosave",
@@ -1167,7 +1176,8 @@ var EditModeDialog = ({ lockedBy }) => {
 import {
   createTemplatedElementView
 } from "@elementor/editor-canvas";
-import { __privateRunCommand as runCommand2 } from "@elementor/editor-v1-adapters";
+import { getCurrentDocument } from "@elementor/editor-documents";
+import { __privateRunCommand as runCommand3 } from "@elementor/editor-v1-adapters";
 import { __ as __7 } from "@wordpress/i18n";
 var TYPE = "e-component";
 function createComponentType(options) {
@@ -1185,6 +1195,10 @@ function createComponentView(options) {
   return class extends createTemplatedElementView(options) {
     legacyWindow = window;
     eventsManagerConfig = this.legacyWindow.elementorCommon.eventsManager.config;
+    isComponentCurrentlyEdited() {
+      const currentDocument = getCurrentDocument();
+      return currentDocument?.id === this.getComponentId()?.value;
+    }
     afterSettingsResolve(settings) {
       if (settings.component) {
         this.collection = this.legacyWindow.elementor.createBackboneElementsCollection(settings.component);
@@ -1236,7 +1250,7 @@ function createComponentView(options) {
       if (!isAllowedToSwitchDocument) {
         options.showLockedByModal?.(lockedBy || "");
       } else {
-        runCommand2("editor/documents/switch", {
+        runCommand3("editor/documents/switch", {
           id: this.getComponentId()?.value,
           mode: "autosave",
           selector: `[data-id="${this.model.get("id")}"]`,
@@ -1245,6 +1259,9 @@ function createComponentView(options) {
       }
     }
     editComponent({ trigger, location, secondaryLocation }) {
+      if (this.isComponentCurrentlyEdited()) {
+        return;
+      }
       this.switchDocument();
       const editorSettings = this.model.get("editor_settings");
       trackComponentEvent({
@@ -1294,10 +1311,10 @@ function setInactiveRecursively(model) {
 
 // src/populate-store.ts
 import { useEffect as useEffect5 } from "react";
-import { __dispatch as dispatch2 } from "@elementor/store";
+import { __dispatch as dispatch3 } from "@elementor/store";
 function PopulateStore() {
   useEffect5(() => {
-    dispatch2(loadComponents());
+    dispatch3(loadComponents());
   }, []);
   return null;
 }
@@ -1325,15 +1342,15 @@ var componentsStylesProvider = createStylesProvider({
 });
 
 // src/store/remove-component-styles.ts
-import { __dispatch as dispatch3 } from "@elementor/store";
+import { __dispatch as dispatch4 } from "@elementor/store";
 function removeComponentStyles(id) {
   apiClient.invalidateComponentConfigCache(id);
-  dispatch3(slice.actions.removeStyles({ id }));
+  dispatch4(slice.actions.removeStyles({ id }));
 }
 
 // src/sync/create-components-before-save.ts
 import { updateElementSettings } from "@elementor/editor-elements";
-import { __dispatch as dispatch4, __getState as getState5 } from "@elementor/store";
+import { __dispatch as dispatch5, __getState as getState5 } from "@elementor/store";
 async function createComponentsBeforeSave({
   container,
   status
@@ -1346,7 +1363,7 @@ async function createComponentsBeforeSave({
     const uidToComponentId = await createComponents(unpublishedComponents, status);
     const elements = container.model.get("elements").toJSON();
     updateComponentInstances(elements, uidToComponentId);
-    dispatch4(
+    dispatch5(
       slice.actions.add(
         unpublishedComponents.map((component) => ({
           id: uidToComponentId.get(component.uid),
@@ -1355,7 +1372,7 @@ async function createComponentsBeforeSave({
         }))
       )
     );
-    dispatch4(slice.actions.resetUnpublished());
+    dispatch5(slice.actions.resetUnpublished());
   } catch (error) {
     throw new Error(`Failed to publish components and update component instances: ${error}`);
   }