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

package/dist/index.mjs

@@ -574,7 +574,7 @@ var Components = () => {
 
 // src/components/create-component-form/create-component-form.tsx
 import * as React7 from "react";
-import { useEffect, useMemo as useMemo2, useState as useState2 } from "react";
+import { useEffect, useMemo as useMemo2, useRef, useState as useState2 } from "react";
 import { getElementLabel } from "@elementor/editor-elements";
 import { ThemeProvider as ThemeProvider2 } from "@elementor/editor-ui";
 import { StarIcon } from "@elementor/icons";
@@ -583,6 +583,40 @@ import { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack as Stack4, Tex
 import { generateUniqueId } from "@elementor/utils";
 import { __ as __4 } from "@wordpress/i18n";
 
+// src/utils/tracking.ts
+import { getMixpanel } from "@elementor/mixpanel";
+import { __getState as getState3 } from "@elementor/store";
+var trackComponentEvent = ({ action, ...data }) => {
+  const { dispatchEvent, config } = 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(getState3());
+  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
 import { useMemo, useState } from "react";
 var useForm = (initialValues) => {
@@ -658,17 +692,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] = 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";
     const openPopup = (event) => {
       setElement({ element: event.detail.element, elementLabel: 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 () => {
@@ -685,11 +754,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
@@ -712,6 +787,10 @@ function CreateComponentForm() {
   };
   const cancelSave = () => {
     resetAndClosePopup();
+    trackComponentEvent({
+      action: "createCancelled",
+      ...eventData.current
+    });
   };
   return /* @__PURE__ */ React7.createElement(ThemeProvider2, null, /* @__PURE__ */ React7.createElement(
     Popover,
@@ -1105,6 +1184,7 @@ function createComponentType(options) {
 function createComponentView(options) {
   return class extends createTemplatedElementView(options) {
     legacyWindow = window;
+    eventsManagerConfig = this.legacyWindow.elementorCommon.eventsManager.config;
     afterSettingsResolve(settings) {
       if (settings.component) {
         this.collection = this.legacyWindow.elementor.createBackboneElementsCollection(settings.component);
@@ -1142,7 +1222,7 @@ function createComponentView(options) {
               icon: "eicon-edit",
               title: () => __7("Edit Component", "elementor"),
               isEnabled: () => true,
-              callback: () => this.switchDocument()
+              callback: (_, eventData) => this.editComponent(eventData)
             }
           ]
         }
@@ -1164,9 +1244,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 {
@@ -1207,7 +1304,7 @@ function PopulateStore() {
 
 // src/store/components-styles-provider.ts
 import { createStylesProvider } from "@elementor/editor-styles-repository";
-import { __getState as getState3, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
+import { __getState as getState4, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
 var componentsStylesProvider = createStylesProvider({
   key: "components-styles",
   priority: 100,
@@ -1219,10 +1316,10 @@ var componentsStylesProvider = createStylesProvider({
   ),
   actions: {
     all: () => {
-      return selectFlatStyles(getState3());
+      return selectFlatStyles(getState4());
     },
     get: (id) => {
-      return selectFlatStyles(getState3()).find((style) => style.id === id) ?? null;
+      return selectFlatStyles(getState4()).find((style) => style.id === id) ?? null;
     }
   }
 });
@@ -1236,12 +1333,12 @@ function removeComponentStyles(id) {
 
 // src/sync/create-components-before-save.ts
 import { updateElementSettings } from "@elementor/editor-elements";
-import { __dispatch as dispatch4, __getState as getState4 } from "@elementor/store";
+import { __dispatch as dispatch4, __getState as getState5 } from "@elementor/store";
 async function createComponentsBeforeSave({
   container,
   status
 }) {
-  const unpublishedComponents = selectUnpublishedComponents(getState4());
+  const unpublishedComponents = selectUnpublishedComponents(getState5());
   if (!unpublishedComponents.length) {
     return;
   }
@@ -1356,6 +1453,7 @@ function init() {
     }
     return true;
   });
+  registerDataHook("after", "preview/drop", onElementDrop);
   window.elementorCommon.__beforeSave = beforeSave;
   injectTab({
     id: "components",