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

package/dist/index.js

@@ -41,7 +41,7 @@ var import_editor_documents2 = 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_store18 = require("@elementor/store");
+var import_store20 = require("@elementor/store");
 var import_i18n8 = require("@wordpress/i18n");
 
 // src/component-id-transformer.ts
@@ -604,11 +604,45 @@ 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_store9 = require("@elementor/store");
+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/utils/tracking.ts
+var import_mixpanel = require("@elementor/mixpanel");
+var import_store9 = require("@elementor/store");
+var trackComponentEvent = ({ action, ...data }) => {
+  const { dispatchEvent, config } = (0, import_mixpanel.getMixpanel)();
+  if (!config?.names?.components?.[action]) {
+    return;
+  }
+  const name = config.names.components[action];
+  dispatchEvent?.(name, data);
+};
+var onElementDrop = (_args, element) => {
+  if (!(element.model.get("widgetType") === "e-component")) {
+    return;
+  }
+  const editorSettings = element.model.get("editor_settings");
+  const componentName = editorSettings?.title;
+  const componentUID = editorSettings?.component_uid;
+  const instanceId = element.id;
+  const createdThisSession = selectCreatedThisSession((0, import_store9.__getState)());
+  const isSameSessionReuse = componentUID && createdThisSession.includes(componentUID);
+  const eventsManagerConfig = window.elementorCommon.eventsManager.config;
+  const { locations, secondaryLocations } = eventsManagerConfig;
+  trackComponentEvent({
+    action: "instanceAdded",
+    instance_id: instanceId,
+    component_uid: componentUID,
+    component_name: componentName,
+    is_same_session_reuse: isSameSessionReuse,
+    location: locations.widgetPanel,
+    secondary_location: secondaryLocations.componentsTab
+  });
+};
+
 // src/components/create-component-form/hooks/use-form.ts
 var import_react2 = require("react");
 var useForm = (initialValues) => {
@@ -684,17 +718,52 @@ var createSubmitComponentSchema = (existingNames) => {
   });
 };
 
+// src/components/create-component-form/utils/get-component-event-data.ts
+var getComponentEventData = (containerElement, options) => {
+  const { elementsCount, componentsCount } = countNestedElements(containerElement);
+  return {
+    nested_elements_count: elementsCount,
+    nested_components_count: componentsCount,
+    top_element_type: containerElement.elType,
+    location: options?.location,
+    secondary_location: options?.secondaryLocation,
+    trigger: options?.trigger
+  };
+};
+function countNestedElements(container) {
+  if (!container.elements || container.elements.length === 0) {
+    return { elementsCount: 0, componentsCount: 0 };
+  }
+  let elementsCount = container.elements.length;
+  let componentsCount = 0;
+  for (const element of container.elements) {
+    if (element.widgetType === "e-component") {
+      componentsCount++;
+    }
+    const { elementsCount: nestedElementsCount, componentsCount: nestedComponentsCount } = countNestedElements(element);
+    elementsCount += nestedElementsCount;
+    componentsCount += nestedComponentsCount;
+  }
+  return { elementsCount, componentsCount };
+}
+
 // src/components/create-component-form/create-component-form.tsx
 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_store9.__useDispatch)();
+  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";
     const openPopup = (event) => {
       setElement({ element: event.detail.element, elementLabel: (0, import_editor_elements4.getElementLabel)(event.detail.element.id) });
       setAnchorPosition(event.detail.anchorPosition);
+      eventData.current = getComponentEventData(event.detail.element, event.detail.options);
+      trackComponentEvent({
+        action: "createClicked",
+        ...eventData.current
+      });
     };
     window.addEventListener(OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup);
     return () => {
@@ -711,11 +780,17 @@ function CreateComponentForm() {
         slice.actions.addUnpublished({
           uid,
           name: values.componentName,
-          elements: [element.element.model.toJSON({ remove: ["default"] })]
+          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
+      });
       setResultNotification({
         show: true,
         // Translators: %1$s: Component name, %2$s: Component UID
@@ -738,6 +813,10 @@ function CreateComponentForm() {
   };
   const cancelSave = () => {
     resetAndClosePopup();
+    trackComponentEvent({
+      action: "createCancelled",
+      ...eventData.current
+    });
   };
   return /* @__PURE__ */ React7.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React7.createElement(
     import_ui5.Popover,
@@ -1125,6 +1204,7 @@ function createComponentType(options) {
 function createComponentView(options) {
   return class extends (0, import_editor_canvas4.createTemplatedElementView)(options) {
     legacyWindow = window;
+    eventsManagerConfig = this.legacyWindow.elementorCommon.eventsManager.config;
     afterSettingsResolve(settings) {
       if (settings.component) {
         this.collection = this.legacyWindow.elementor.createBackboneElementsCollection(settings.component);
@@ -1162,7 +1242,7 @@ function createComponentView(options) {
               icon: "eicon-edit",
               title: () => (0, import_i18n7.__)("Edit Component", "elementor"),
               isEnabled: () => true,
-              callback: () => this.switchDocument()
+              callback: (_, eventData) => this.editComponent(eventData)
             }
           ]
         }
@@ -1184,9 +1264,26 @@ function createComponentView(options) {
         });
       }
     }
+    editComponent({ trigger, location, secondaryLocation }) {
+      this.switchDocument();
+      const editorSettings = this.model.get("editor_settings");
+      trackComponentEvent({
+        action: "edited",
+        component_uid: editorSettings?.component_uid,
+        component_name: editorSettings?.title,
+        location,
+        secondary_location: secondaryLocation,
+        trigger
+      });
+    }
     handleDblClick(e) {
       e.stopPropagation();
-      this.switchDocument();
+      const { triggers, locations, secondaryLocations } = this.eventsManagerConfig;
+      this.editComponent({
+        trigger: triggers.doubleClick,
+        location: locations.canvas,
+        secondaryLocation: secondaryLocations.canvasElement
+      });
     }
     events() {
       return {
@@ -1217,21 +1314,21 @@ function setInactiveRecursively(model) {
 
 // src/populate-store.ts
 var import_react7 = require("react");
-var import_store11 = require("@elementor/store");
+var import_store13 = require("@elementor/store");
 function PopulateStore() {
   (0, import_react7.useEffect)(() => {
-    (0, import_store11.__dispatch)(loadComponents());
+    (0, import_store13.__dispatch)(loadComponents());
   }, []);
   return null;
 }
 
 // src/store/components-styles-provider.ts
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_store12 = require("@elementor/store");
+var import_store14 = require("@elementor/store");
 var componentsStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
   key: "components-styles",
   priority: 100,
-  subscribe: (cb) => (0, import_store12.__subscribeWithSelector)(
+  subscribe: (cb) => (0, import_store14.__subscribeWithSelector)(
     (state) => state[SLICE_NAME],
     () => {
       cb();
@@ -1239,29 +1336,29 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
   ),
   actions: {
     all: () => {
-      return selectFlatStyles((0, import_store12.__getState)());
+      return selectFlatStyles((0, import_store14.__getState)());
     },
     get: (id) => {
-      return selectFlatStyles((0, import_store12.__getState)()).find((style) => style.id === id) ?? null;
+      return selectFlatStyles((0, import_store14.__getState)()).find((style) => style.id === id) ?? null;
     }
   }
 });
 
 // src/store/remove-component-styles.ts
-var import_store14 = require("@elementor/store");
+var import_store16 = require("@elementor/store");
 function removeComponentStyles(id) {
   apiClient.invalidateComponentConfigCache(id);
-  (0, import_store14.__dispatch)(slice.actions.removeStyles({ id }));
+  (0, import_store16.__dispatch)(slice.actions.removeStyles({ id }));
 }
 
 // src/sync/create-components-before-save.ts
 var import_editor_elements5 = require("@elementor/editor-elements");
-var import_store16 = require("@elementor/store");
+var import_store18 = require("@elementor/store");
 async function createComponentsBeforeSave({
   container,
   status
 }) {
-  const unpublishedComponents = selectUnpublishedComponents((0, import_store16.__getState)());
+  const unpublishedComponents = selectUnpublishedComponents((0, import_store18.__getState)());
   if (!unpublishedComponents.length) {
     return;
   }
@@ -1269,7 +1366,7 @@ async function createComponentsBeforeSave({
     const uidToComponentId = await createComponents(unpublishedComponents, status);
     const elements = container.model.get("elements").toJSON();
     updateComponentInstances(elements, uidToComponentId);
-    (0, import_store16.__dispatch)(
+    (0, import_store18.__dispatch)(
       slice.actions.add(
         unpublishedComponents.map((component) => ({
           id: uidToComponentId.get(component.uid),
@@ -1278,7 +1375,7 @@ async function createComponentsBeforeSave({
         }))
       )
     );
-    (0, import_store16.__dispatch)(slice.actions.resetUnpublished());
+    (0, import_store18.__dispatch)(slice.actions.resetUnpublished());
   } catch (error) {
     throw new Error(`Failed to publish components and update component instances: ${error}`);
   }
@@ -1364,7 +1461,7 @@ var beforeSave = ({ container, status }) => {
 var COMPONENT_DOCUMENT_TYPE2 = "elementor_component";
 function init() {
   import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
-  (0, import_store18.__registerSlice)(slice);
+  (0, import_store20.__registerSlice)(slice);
   (0, import_editor_canvas5.registerElementType)(
     TYPE,
     (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
@@ -1376,6 +1473,7 @@ function init() {
     }
     return true;
   });
+  (0, import_editor_v1_adapters5.registerDataHook)("after", "preview/drop", onElementDrop);
   window.elementorCommon.__beforeSave = beforeSave;
   (0, import_editor_elements_panel.injectTab)({
     id: "components",