@elementor/editor-components 3.35.0-401 → 3.35.0-403

package/dist/index.js

@@ -362,15 +362,44 @@ var import_store5 = require("@elementor/store");
 
 // src/utils/switch-to-component.ts
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-function switchToComponent(componentId, componentInstanceId) {
+function switchToComponent(componentId, componentInstanceId, element) {
+  const selector = getSelector(element, componentInstanceId);
   (0, import_editor_v1_adapters2.__privateRunCommand)("editor/documents/switch", {
     id: componentId,
-    selector: componentInstanceId ? `[data-id="${componentInstanceId}"]` : void 0,
+    selector,
     mode: "autosave",
     setAsInitial: false,
     shouldScroll: false
   });
 }
+function getSelector(element, componentInstanceId) {
+  if (element) {
+    return buildUniqueSelector(element);
+  }
+  if (componentInstanceId) {
+    return `[data-id="${componentInstanceId}"]`;
+  }
+  return void 0;
+}
+function buildUniqueSelector(element) {
+  const selectors = [];
+  let current = element.closest("[data-id]");
+  while (current) {
+    const dataId = current.dataset.id;
+    const isComponentInstance2 = current.hasAttribute("data-elementor-id");
+    if (isComponentInstance2) {
+      selectors.unshift(`[data-id="${dataId}"]`);
+    }
+    current = current.parentElement?.closest("[data-id]") ?? null;
+  }
+  if (selectors.length === 0) {
+    const closestElement = element.closest("[data-id]");
+    if (closestElement?.dataset?.id) {
+      return `[data-id="${closestElement.dataset.id}"]`;
+    }
+  }
+  return selectors.join(" ");
+}
 
 // src/hooks/use-navigate-back.ts
 function useNavigateBack() {
@@ -794,13 +823,23 @@ var ComponentIntroduction = ({
         src: "https://assets.elementor.com/packages/v1/images/components-properties-intro.png",
         alt: ""
       }
-    ), /* @__PURE__ */ React.createElement(import_editor_controls.PopoverContent, null, /* @__PURE__ */ React.createElement(import_ui.Stack, { gap: 1, sx: { p: 2 } }, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n2.__)("Properties make instances flexible.", "elementor")), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n2.__)(
+    ), /* @__PURE__ */ React.createElement(import_editor_controls.PopoverContent, null, /* @__PURE__ */ React.createElement(import_ui.Stack, { sx: { p: 2 } }, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n2.__)("Properties make instances flexible.", "elementor")), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n2.__)(
       "Click next to any setting you want users to customize - like text, images, or links.",
       "elementor"
-    )), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n2.__)(
+    )), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2", sx: { mt: 2 } }, (0, import_i18n2.__)(
       "Your properties will appear in the Properties panel, where you can organize and manage them anytime.",
       "elementor"
-    )), /* @__PURE__ */ React.createElement(import_ui.Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end" }, /* @__PURE__ */ React.createElement(import_ui.Button, { size: "medium", variant: "contained", onClick: onClose }, (0, import_i18n2.__)("Got it", "elementor"))))))
+    )), /* @__PURE__ */ React.createElement(
+      import_ui.Link,
+      {
+        href: "http://go.elementor.com/components-guide",
+        target: "_blank",
+        sx: { mt: 2 },
+        color: "info.main",
+        variant: "body2"
+      },
+      (0, import_i18n2.__)("Learn more", "elementor")
+    ), /* @__PURE__ */ React.createElement(import_ui.Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", sx: { pt: 1 } }, /* @__PURE__ */ React.createElement(import_ui.Button, { size: "medium", variant: "contained", onClick: onClose }, (0, import_i18n2.__)("Got it", "elementor"))))))
   );
 };
 
@@ -1780,7 +1819,7 @@ function createComponentView(options) {
       if (!isAllowedToSwitchDocument) {
         options.showLockedByModal?.(lockedBy || "");
       } else {
-        switchToComponent(this.getComponentId(), this.model.get("id"));
+        switchToComponent(this.getComponentId(), this.model.get("id"), this.el);
       }
     }
     editComponent({ trigger, location, secondaryLocation }) {