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

package/dist/index.js

@@ -37,10 +37,10 @@ module.exports = __toCommonJS(index_exports);
 // src/init.ts
 var import_editor = require("@elementor/editor");
 var import_editor_canvas5 = require("@elementor/editor-canvas");
-var import_editor_documents2 = require("@elementor/editor-documents");
+var import_editor_documents3 = require("@elementor/editor-documents");
 var import_editor_elements_panel = require("@elementor/editor-elements-panel");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
 var import_store20 = require("@elementor/store");
 var import_i18n8 = require("@wordpress/i18n");
 
@@ -604,11 +604,14 @@ var import_react3 = require("react");
 var import_editor_elements4 = require("@elementor/editor-elements");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_icons4 = require("@elementor/icons");
-var import_store11 = require("@elementor/store");
 var import_ui5 = require("@elementor/ui");
-var import_utils2 = require("@elementor/utils");
 var import_i18n4 = require("@wordpress/i18n");
 
+// src/store/create-unpublished-component.ts
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_store11 = require("@elementor/store");
+var import_utils2 = require("@elementor/utils");
+
 // src/utils/tracking.ts
 var import_mixpanel = require("@elementor/mixpanel");
 var import_store9 = require("@elementor/store");
@@ -643,6 +646,28 @@ var onElementDrop = (_args, element) => {
   });
 };
 
+// src/store/create-unpublished-component.ts
+function createUnpublishedComponent(name, element, eventData) {
+  const uid = (0, import_utils2.generateUniqueId)("component");
+  const componentBase = { uid, name };
+  (0, import_store11.__dispatch)(
+    slice.actions.addUnpublished({
+      ...componentBase,
+      elements: [element]
+    })
+  );
+  (0, import_store11.__dispatch)(slice.actions.addCreatedThisSession(uid));
+  replaceElementWithComponent(element, componentBase);
+  trackComponentEvent({
+    action: "created",
+    component_uid: uid,
+    component_name: name,
+    ...eventData
+  });
+  (0, import_editor_v1_adapters2.__privateRunCommand)("document/save/auto");
+  return uid;
+}
+
 // src/components/create-component-form/hooks/use-form.ts
 var import_react2 = require("react");
 var useForm = (initialValues) => {
@@ -752,7 +777,6 @@ function CreateComponentForm() {
   const [element, setElement] = (0, import_react3.useState)(null);
   const [anchorPosition, setAnchorPosition] = (0, import_react3.useState)();
   const [resultNotification, setResultNotification] = (0, import_react3.useState)(null);
-  const dispatch5 = (0, import_store11.__useDispatch)();
   const eventData = (0, import_react3.useRef)(null);
   (0, import_react3.useEffect)(() => {
     const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
@@ -775,22 +799,7 @@ function CreateComponentForm() {
       if (!element) {
         throw new Error(`Can't save element as component: element not found`);
       }
-      const uid = (0, import_utils2.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
@@ -909,7 +918,7 @@ var Form = ({
 var React9 = __toESM(require("react"));
 var import_react6 = require("react");
 var import_editor_documents = require("@elementor/editor-documents");
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 
 // src/components/consts.ts
 var COMPONENT_DOCUMENT_TYPE = "elementor_component";
@@ -922,9 +931,9 @@ var import_i18n5 = require("@wordpress/i18n");
 
 // src/hooks/use-canvas-document.ts
 var import_editor_canvas3 = require("@elementor/editor-canvas");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 function useCanvasDocument() {
-  return (0, import_editor_v1_adapters2.__privateUseListenTo)((0, import_editor_v1_adapters2.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_canvas3.getCanvasIframeDocument)());
+  return (0, import_editor_v1_adapters3.__privateUseListenTo)((0, import_editor_v1_adapters3.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_canvas3.getCanvasIframeDocument)());
 }
 
 // src/hooks/use-element-rect.ts
@@ -1111,7 +1120,7 @@ function EditComponent() {
 function useHandleDocumentSwitches(path, setPath) {
   const documentsManager = (0, import_editor_documents.getV1DocumentsManager)();
   (0, import_react6.useEffect)(
-    () => (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.commandEndEvent)("editor/documents/attach-preview"), () => {
+    () => (0, import_editor_v1_adapters4.__privateListenTo)((0, import_editor_v1_adapters4.commandEndEvent)("editor/documents/attach-preview"), () => {
       const { component: currentComponent } = path.at(-1) ?? {};
       const { id: currentComponentId } = currentComponent ?? {};
       const nextDocument = documentsManager.getCurrent();
@@ -1150,7 +1159,7 @@ function useNavigateBack(path) {
     const { component: prevComponent, instanceId: prevComponentInstanceId } = path.at(-2) ?? {};
     const { id: prevComponentId } = prevComponent ?? {};
     const switchToDocument = (id, selector) => {
-      (0, import_editor_v1_adapters3.__privateRunCommand)("editor/documents/switch", {
+      (0, import_editor_v1_adapters4.__privateRunCommand)("editor/documents/switch", {
         id,
         selector,
         mode: "autosave",
@@ -1187,7 +1196,8 @@ var EditModeDialog = ({ lockedBy }) => {
 
 // src/create-component-type.ts
 var import_editor_canvas4 = require("@elementor/editor-canvas");
-var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var import_editor_documents2 = require("@elementor/editor-documents");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 var import_i18n7 = require("@wordpress/i18n");
 var TYPE = "e-component";
 function createComponentType(options) {
@@ -1205,6 +1215,10 @@ function createComponentView(options) {
   return class extends (0, import_editor_canvas4.createTemplatedElementView)(options) {
     legacyWindow = window;
     eventsManagerConfig = this.legacyWindow.elementorCommon.eventsManager.config;
+    isComponentCurrentlyEdited() {
+      const currentDocument = (0, import_editor_documents2.getCurrentDocument)();
+      return currentDocument?.id === this.getComponentId()?.value;
+    }
     afterSettingsResolve(settings) {
       if (settings.component) {
         this.collection = this.legacyWindow.elementor.createBackboneElementsCollection(settings.component);
@@ -1256,7 +1270,7 @@ function createComponentView(options) {
       if (!isAllowedToSwitchDocument) {
         options.showLockedByModal?.(lockedBy || "");
       } else {
-        (0, import_editor_v1_adapters4.__privateRunCommand)("editor/documents/switch", {
+        (0, import_editor_v1_adapters5.__privateRunCommand)("editor/documents/switch", {
           id: this.getComponentId()?.value,
           mode: "autosave",
           selector: `[data-id="${this.model.get("id")}"]`,
@@ -1265,6 +1279,9 @@ function createComponentView(options) {
       }
     }
     editComponent({ trigger, location, secondaryLocation }) {
+      if (this.isComponentCurrentlyEdited()) {
+        return;
+      }
       this.switchDocument();
       const editorSettings = this.model.get("editor_settings");
       trackComponentEvent({
@@ -1466,14 +1483,14 @@ function init() {
     TYPE,
     (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
   );
-  (0, import_editor_v1_adapters5.registerDataHook)("dependency", "editor/documents/close", (args) => {
-    const document = (0, import_editor_documents2.getV1CurrentDocument)();
+  (0, import_editor_v1_adapters6.registerDataHook)("dependency", "editor/documents/close", (args) => {
+    const document = (0, import_editor_documents3.getV1CurrentDocument)();
     if (document.config.type === COMPONENT_DOCUMENT_TYPE2) {
       args.mode = "autosave";
     }
     return true;
   });
-  (0, import_editor_v1_adapters5.registerDataHook)("after", "preview/drop", onElementDrop);
+  (0, import_editor_v1_adapters6.registerDataHook)("after", "preview/drop", onElementDrop);
   window.elementorCommon.__beforeSave = beforeSave;
   (0, import_editor_elements_panel.injectTab)({
     id: "components",
@@ -1492,8 +1509,8 @@ function init() {
     id: "edit-component",
     component: EditComponent
   });
-  (0, import_editor_v1_adapters5.__privateListenTo)((0, import_editor_v1_adapters5.commandStartEvent)("editor/documents/attach-preview"), () => {
-    const { id, config } = (0, import_editor_documents2.getV1CurrentDocument)();
+  (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.commandStartEvent)("editor/documents/attach-preview"), () => {
+    const { id, config } = (0, import_editor_documents3.getV1CurrentDocument)();
     if (id) {
       removeComponentStyles(id);
     }