@elementor/editor-components 3.35.0-394 → 3.35.0-396

package/dist/index.js

@@ -42,9 +42,9 @@ var import_editor_editing_panel8 = require("@elementor/editor-editing-panel");
 var import_editor_elements_panel = require("@elementor/editor-elements-panel");
 var import_editor_panels4 = require("@elementor/editor-panels");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
-var import_store63 = require("@elementor/store");
-var import_i18n24 = require("@wordpress/i18n");
+var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
+var import_store65 = require("@elementor/store");
+var import_i18n25 = require("@wordpress/i18n");
 
 // src/component-instance-transformer.ts
 var import_editor_canvas = require("@elementor/editor-canvas");
@@ -1656,7 +1656,7 @@ var trackComponentEvent = ({ action, ...data }) => {
   dispatchEvent?.(name, data);
 };
 var onElementDrop = (_args, element) => {
-  if (!(element.model.get("widgetType") === "e-component")) {
+  if (!(element?.model?.get("widgetType") === "e-component")) {
     return;
   }
   const editorSettings = element.model.get("editor_settings");
@@ -3533,11 +3533,7 @@ function regenerateOverrideKeysRecursive(elementId) {
   if (!container) {
     return;
   }
-  getAllElements(container).forEach(regenerateOverrideKeys);
-}
-function getAllElements(container) {
-  const children = (container.children ?? []).flatMap(getAllElements) ?? [];
-  return [container, ...children];
+  (0, import_editor_elements13.getAllDescendants)(container).forEach(regenerateOverrideKeys);
 }
 function regenerateOverrideKeys(element) {
   if (!isComponentInstance(element.model.toJSON())) {
@@ -3932,20 +3928,147 @@ function PopulateStore() {
   return null;
 }
 
-// src/store/actions/remove-component-styles.ts
+// src/prevent-circular-nesting.ts
+var import_editor_elements15 = require("@elementor/editor-elements");
+var import_editor_notifications = require("@elementor/editor-notifications");
+var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 var import_store53 = require("@elementor/store");
+var import_i18n24 = require("@wordpress/i18n");
+var COMPONENT_TYPE = "e-component";
+var COMPONENT_CIRCULAR_NESTING_ALERT = {
+  type: "default",
+  message: (0, import_i18n24.__)("Cannot add this component here - it would create a circular reference.", "elementor"),
+  id: "circular-component-nesting-blocked"
+};
+function initCircularNestingPrevention() {
+  (0, import_editor_v1_adapters7.blockCommand)({
+    command: "document/elements/create",
+    condition: blockCircularCreate
+  });
+  (0, import_editor_v1_adapters7.blockCommand)({
+    command: "document/elements/move",
+    condition: blockCircularMove
+  });
+  (0, import_editor_v1_adapters7.blockCommand)({
+    command: "document/elements/paste",
+    condition: blockCircularPaste
+  });
+}
+function wouldCreateCircularNesting(componentIdToAdd) {
+  if (componentIdToAdd === void 0) {
+    return false;
+  }
+  const state = (0, import_store53.__getState)();
+  const currentComponentId = selectCurrentComponentId(state);
+  const path = selectPath(state);
+  if (currentComponentId === null) {
+    return false;
+  }
+  if (componentIdToAdd === currentComponentId) {
+    return true;
+  }
+  return path.some((item) => item.componentId === componentIdToAdd);
+}
+function extractComponentIdFromModel(model) {
+  if (!model) {
+    return null;
+  }
+  const isComponent = model.widgetType === COMPONENT_TYPE;
+  if (!isComponent) {
+    return null;
+  }
+  return model.settings?.component_instance?.value?.component_id?.value ?? null;
+}
+function extractComponentIdFromElement(element) {
+  if (element.widgetType !== COMPONENT_TYPE) {
+    return null;
+  }
+  return element.settings?.component_instance?.value?.component_id?.value ?? null;
+}
+function extractComponentIdsFromElements(elements) {
+  const ids = [];
+  for (const element of elements) {
+    const componentId = extractComponentIdFromElement(element);
+    if (componentId !== null) {
+      ids.push(componentId);
+    }
+    if (element.elements?.length) {
+      ids.push(...extractComponentIdsFromElements(element.elements));
+    }
+  }
+  return ids;
+}
+function extractComponentIdFromContainer(container) {
+  const widgetType = container.model?.get?.("widgetType");
+  if (widgetType !== COMPONENT_TYPE) {
+    return null;
+  }
+  const settings = container.model?.get?.("settings");
+  const componentInstance = settings?.get?.("component_instance");
+  return componentInstance?.value?.component_id?.value ?? null;
+}
+function blockCircularCreate(args) {
+  const componentId = extractComponentIdFromModel(args.model);
+  if (componentId === null) {
+    return false;
+  }
+  const isBlocked = wouldCreateCircularNesting(componentId);
+  if (isBlocked) {
+    (0, import_editor_notifications.notify)(COMPONENT_CIRCULAR_NESTING_ALERT);
+  }
+  return isBlocked;
+}
+function blockCircularMove(args) {
+  const { containers = [args.container] } = args;
+  const hasCircularComponent = containers.some((container) => {
+    if (!container) {
+      return false;
+    }
+    const allElements = (0, import_editor_elements15.getAllDescendants)(container);
+    return allElements.some((element) => {
+      const componentId = extractComponentIdFromContainer(element);
+      if (componentId === null) {
+        return false;
+      }
+      return wouldCreateCircularNesting(componentId);
+    });
+  });
+  if (hasCircularComponent) {
+    (0, import_editor_notifications.notify)(COMPONENT_CIRCULAR_NESTING_ALERT);
+  }
+  return hasCircularComponent;
+}
+function blockCircularPaste(args) {
+  const { storageType } = args;
+  if (storageType !== "localstorage") {
+    return false;
+  }
+  const data = window?.elementorCommon?.storage?.get();
+  if (!data?.clipboard?.elements) {
+    return false;
+  }
+  const allComponentIds = extractComponentIdsFromElements(data.clipboard.elements);
+  const hasCircularComponent = allComponentIds.some(wouldCreateCircularNesting);
+  if (hasCircularComponent) {
+    (0, import_editor_notifications.notify)(COMPONENT_CIRCULAR_NESTING_ALERT);
+  }
+  return hasCircularComponent;
+}
+
+// src/store/actions/remove-component-styles.ts
+var import_store55 = require("@elementor/store");
 function removeComponentStyles(id2) {
   apiClient.invalidateComponentConfigCache(id2);
-  (0, import_store53.__dispatch)(slice.actions.removeStyles({ id: id2 }));
+  (0, import_store55.__dispatch)(slice.actions.removeStyles({ id: id2 }));
 }
 
 // src/store/components-styles-provider.ts
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_store55 = require("@elementor/store");
+var import_store57 = require("@elementor/store");
 var componentsStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
   key: "components-styles",
   priority: 100,
-  subscribe: (cb) => (0, import_store55.__subscribeWithSelector)(
+  subscribe: (cb) => (0, import_store57.__subscribeWithSelector)(
     (state) => state[SLICE_NAME],
     () => {
       cb();
@@ -3953,29 +4076,29 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
   ),
   actions: {
     all: () => {
-      return selectFlatStyles((0, import_store55.__getState)());
+      return selectFlatStyles((0, import_store57.__getState)());
     },
     get: (id2) => {
-      return selectFlatStyles((0, import_store55.__getState)()).find((style) => style.id === id2) ?? null;
+      return selectFlatStyles((0, import_store57.__getState)()).find((style) => style.id === id2) ?? null;
     }
   }
 });
 
 // src/sync/create-components-before-save.ts
-var import_editor_elements15 = require("@elementor/editor-elements");
-var import_store57 = require("@elementor/store");
+var import_editor_elements16 = require("@elementor/editor-elements");
+var import_store59 = require("@elementor/store");
 async function createComponentsBeforeSave({
   elements,
   status
 }) {
-  const unpublishedComponents = selectUnpublishedComponents((0, import_store57.__getState)());
+  const unpublishedComponents = selectUnpublishedComponents((0, import_store59.__getState)());
   if (!unpublishedComponents.length) {
     return;
   }
   try {
     const uidToComponentId = await createComponents(unpublishedComponents, status);
     updateComponentInstances(elements, uidToComponentId);
-    (0, import_store57.__dispatch)(
+    (0, import_store59.__dispatch)(
       slice.actions.add(
         unpublishedComponents.map((component) => ({
           id: uidToComponentId.get(component.uid),
@@ -3985,7 +4108,7 @@ async function createComponentsBeforeSave({
         }))
       )
     );
-    (0, import_store57.__dispatch)(slice.actions.resetUnpublished());
+    (0, import_store59.__dispatch)(slice.actions.resetUnpublished());
   } catch (error) {
     throw new Error(`Failed to publish components and update component instances: ${error}`);
   }
@@ -4030,7 +4153,7 @@ function shouldUpdateElement(element, uidToComponentId) {
   return { shouldUpdate: false, newComponentId: null };
 }
 function updateElementComponentId(elementId, componentId) {
-  (0, import_editor_elements15.updateElementSettings)({
+  (0, import_editor_elements16.updateElementSettings)({
     id: elementId,
     props: {
       component_instance: {
@@ -4045,7 +4168,7 @@ function updateElementComponentId(elementId, componentId) {
 }
 
 // src/sync/set-component-overridable-props-settings-before-save.ts
-var import_store59 = require("@elementor/store");
+var import_store61 = require("@elementor/store");
 var setComponentOverridablePropsSettingsBeforeSave = ({
   container
 }) => {
@@ -4053,15 +4176,15 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
   if (!currentDocument || currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE) {
     return;
   }
-  const overridableProps = selectOverridableProps((0, import_store59.__getState)(), currentDocument.id);
+  const overridableProps = selectOverridableProps((0, import_store61.__getState)(), currentDocument.id);
   if (overridableProps) {
     container.settings.set("overridable_props", overridableProps);
   }
 };
 
 // src/sync/update-archived-component-before-save.ts
-var import_editor_notifications = require("@elementor/editor-notifications");
-var import_store61 = require("@elementor/store");
+var import_editor_notifications2 = require("@elementor/editor-notifications");
+var import_store63 = require("@elementor/store");
 var failedNotification = (message) => ({
   type: "error",
   message: `Failed to archive components: ${message}`,
@@ -4074,7 +4197,7 @@ var successNotification = (message) => ({
 });
 var updateArchivedComponentBeforeSave = async () => {
   try {
-    const archivedComponents = selectArchivedComponents((0, import_store61.__getState)());
+    const archivedComponents = selectArchivedComponents((0, import_store63.__getState)());
     if (!archivedComponents.length) {
       return;
     }
@@ -4084,10 +4207,10 @@ var updateArchivedComponentBeforeSave = async () => {
     const failedIds = result.failedIds.join(", ");
     const successIds = result.successIds.join(", ");
     if (failedIds) {
-      (0, import_editor_notifications.notify)(failedNotification(failedIds));
+      (0, import_editor_notifications2.notify)(failedNotification(failedIds));
     }
     if (successIds) {
-      (0, import_editor_notifications.notify)(successNotification(successIds));
+      (0, import_editor_notifications2.notify)(successNotification(successIds));
     }
   } catch (error) {
     throw new Error(`Failed to update archived components: ${error}`);
@@ -4124,24 +4247,24 @@ var beforeSave = ({ container, status }) => {
 // src/init.ts
 function init() {
   import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
-  (0, import_store63.__registerSlice)(slice);
+  (0, import_store65.__registerSlice)(slice);
   (0, import_editor_panels4.__registerPanel)(panel);
   (0, import_editor_canvas8.registerElementType)(
     COMPONENT_WIDGET_TYPE,
     (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
   );
-  (0, import_editor_v1_adapters7.registerDataHook)("dependency", "editor/documents/close", (args) => {
+  (0, import_editor_v1_adapters8.registerDataHook)("dependency", "editor/documents/close", (args) => {
     const document = (0, import_editor_documents12.getV1CurrentDocument)();
     if (document.config.type === COMPONENT_DOCUMENT_TYPE) {
       args.mode = "autosave";
     }
     return true;
   });
-  (0, import_editor_v1_adapters7.registerDataHook)("after", "preview/drop", onElementDrop);
+  (0, import_editor_v1_adapters8.registerDataHook)("after", "preview/drop", onElementDrop);
   window.elementorCommon.__beforeSave = beforeSave;
   (0, import_editor_elements_panel.injectTab)({
     id: "components",
-    label: (0, import_i18n24.__)("Components", "elementor"),
+    label: (0, import_i18n25.__)("Components", "elementor"),
     component: Components
   });
   (0, import_editor.injectIntoTop)({
@@ -4160,7 +4283,7 @@ function init() {
     id: "component-panel-header",
     component: ComponentPanelHeader
   });
-  (0, import_editor_v1_adapters7.registerDataHook)("after", "editor/documents/attach-preview", async () => {
+  (0, import_editor_v1_adapters8.registerDataHook)("after", "editor/documents/attach-preview", async () => {
     const { id: id2, config } = (0, import_editor_documents12.getV1CurrentDocument)();
     if (id2) {
       removeComponentStyles(id2);
@@ -4187,6 +4310,7 @@ function init() {
   import_editor_canvas8.settingsTransformersRegistry.register("override", componentOverrideTransformer);
   initRegenerateOverrideKeys();
   initMcp();
+  initCircularNestingPrevention();
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {