@elementor/editor-components 3.35.0-406 → 3.35.0-408

package/dist/index.js

@@ -2316,7 +2316,7 @@ var import_store36 = require("@elementor/store");
 var import_i18n16 = require("@wordpress/i18n");
 var NON_ATOMIC_ELEMENT_ALERT = {
   type: "default",
-  message: (0, import_i18n16.__)("Cannot add this element here - only atomic elements are allowed inside components.", "elementor"),
+  message: (0, import_i18n16.__)("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
   id: "non-atomic-element-blocked"
 };
 function initNonAtomicNestingPrevention() {
@@ -2564,7 +2564,7 @@ function CreateComponentForm() {
         (0, import_editor_notifications2.notify)({
           type: "default",
           message: (0, import_i18n18.__)(
-            "Cannot save as component - contains non-supported elements. Only atomic elements are allowed inside components.",
+            "Components require atomic elements only. Remove widgets to create this component.",
             "elementor"
           ),
           id: "non-atomic-element-save-blocked"
@@ -3772,6 +3772,9 @@ var InputSchema = {
         elementId: import_schema6.z.string().describe("The id of the child element that you want to override its settings"),
         propKey: import_schema6.z.string().describe(
           'The property key of the child element that you want to override its settings (e.g., "text", "url", "tag"). To get the available propKeys for an element, use the "get-element-type-config" tool.'
+        ),
+        label: import_schema6.z.string().describe(
+          'A unique, user-friendly display name for this property (e.g., "Hero Headline", "CTA Button Text"). Must be unique within the same component.'
         )
       })
     )
@@ -3831,7 +3834,7 @@ function enrichOverridableProps(input, rootElement) {
   const enrichedProps = {};
   const defaultGroupId = (0, import_utils9.generateUniqueId)("group");
   Object.entries(input.props).forEach(([, prop]) => {
-    const { elementId, propKey } = prop;
+    const { elementId, propKey, label } = prop;
     const element = findElementById(rootElement, elementId);
     if (!element) {
       throw new Error(`Element with ID "${elementId}" not found in component`);
@@ -3852,7 +3855,6 @@ function enrichOverridableProps(input, rootElement) {
     }
     const overrideKey = (0, import_utils9.generateUniqueId)("prop");
     const originValue = element.settings?.[propKey] ? element.settings[propKey] : elementType.propsSchema[propKey].default ?? null;
-    const label = generateLabel(propKey);
     enrichedProps[overrideKey] = {
       overrideKey,
       label,
@@ -3907,10 +3909,6 @@ function findElementById(root, targetId) {
   }
   return null;
 }
-function generateLabel(propKey) {
-  const uniqueId = (0, import_utils9.generateUniqueId)("prop");
-  return `${uniqueId} - ${propKey}`;
-}
 function getValidElementTypes() {
   const types = (0, import_editor_elements15.getWidgetsCache)();
   if (!types) {
@@ -3973,7 +3971,8 @@ Skip that step ONLY if the user explicitly requests to not make any properties c
 
 3. **Build the overridable_props Object**
    - For each property you want to make overridable, add an entry:
-     \`{ "elementId": "<child-element-id>", "propKey": "<property-key>" }\`
+     \`{ "elementId": "<child-element-id>", "propKey": "<property-key>", "label": "<user-friendly-name>" }\`
+   - The label must be unique within the component and should be meaningful to the user (e.g., "Hero Headline", "CTA Button Text")
    - Group all entries under the "props" object
 
 ## Step 3: Execute the Tool
@@ -4010,7 +4009,8 @@ Structure:
   "props": {
     "<unique-key>": {
       "elementId": "<child-element-id>",
-      "propKey": "<property-key>"
+      "propKey": "<property-key>",
+      "label": "<user-friendly-name>"
     }
   }
 }
@@ -4020,7 +4020,7 @@ To populate this correctly:
 1. Use [${import_editor_canvas8.DOCUMENT_STRUCTURE_URI}] to find child element IDs and their widgetType
 2. Use [${import_editor_canvas8.WIDGET_SCHEMA_URI}] to find the atomic_props_schema for each child element's widgetType
 3. Only include properties you want to be customizable in component instances
-4. Common propKeys: "text", "url", "tag", "size", "align", etc.`
+4. Provide a unique, user-friendly label for each property (e.g., "Hero Headline", "CTA Button Text")`
   );
   saveAsComponentPrompt.example(`
 Basic component without overridable properties:
@@ -4040,15 +4040,18 @@ Component with overridable properties:
     "props": {
       "heading-text": {
         "elementId": "heading-123",
-        "propKey": "text"
+        "propKey": "text",
+        "label": "Card Title"
       },
       "button-text": {
         "elementId": "button-456",
-        "propKey": "text"
+        "propKey": "text",
+        "label": "Button Text"
       },
       "button-link": {
         "elementId": "button-456",
-        "propKey": "url"
+        "propKey": "url",
+        "label": "Button Link"
       }
     }
   }
@@ -4102,7 +4105,7 @@ var import_i18n25 = require("@wordpress/i18n");
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
   type: "default",
-  message: (0, import_i18n25.__)("Cannot add this component here - it would create a circular reference.", "elementor"),
+  message: (0, import_i18n25.__)("Can't add this component - components that contain each other can't be nested.", "elementor"),
   id: "circular-component-nesting-blocked"
 };
 function initCircularNestingPrevention() {