@elementor/editor-components 3.35.0-474 → 3.35.0-476

package/dist/index.js

@@ -42,7 +42,7 @@ 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_adapters12 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
 var import_store80 = require("@elementor/store");
 var import_i18n31 = require("@wordpress/i18n");
 
@@ -2967,8 +2967,19 @@ var import_editor_canvas6 = require("@elementor/editor-canvas");
 var import_editor_elements9 = require("@elementor/editor-elements");
 var import_editor_notifications2 = require("@elementor/editor-notifications");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
-var import_store43 = require("@elementor/store");
 var import_i18n22 = require("@wordpress/i18n");
+
+// src/utils/is-editing-component.ts
+var import_store43 = require("@elementor/store");
+function isEditingComponent() {
+  const state = (0, import_store43.__getStore)()?.getState();
+  if (!state) {
+    return false;
+  }
+  return selectCurrentComponentId(state) !== null;
+}
+
+// src/prevent-non-atomic-nesting.ts
 var NON_ATOMIC_ELEMENT_ALERT = {
   type: "default",
   message: (0, import_i18n22.__)("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
@@ -2988,13 +2999,6 @@ function initNonAtomicNestingPrevention() {
     condition: blockNonAtomicPaste
   });
 }
-function isEditingComponent() {
-  const state = (0, import_store43.__getStore)()?.getState();
-  if (!state) {
-    return false;
-  }
-  return selectCurrentComponentId(state) !== null;
-}
 function isElementAtomic(elementType) {
   return (0, import_editor_elements9.getElementType)(elementType) !== null;
 }
@@ -3441,7 +3445,7 @@ function useMutationsListener({ element, onChange }) {
 }
 
 // src/components/edit-component/component-modal.tsx
-function ComponentModal({ element, onClose }) {
+function ComponentModal({ topLevelElementDom, onClose }) {
   const canvasDocument = useCanvasDocument();
   (0, import_react13.useEffect)(() => {
     const handleEsc = (event) => {
@@ -3458,12 +3462,17 @@ function ComponentModal({ element, onClose }) {
     return null;
   }
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(BlockEditPage, null), /* @__PURE__ */ React21.createElement(Backdrop, { canvas: canvasDocument, element, onClose })),
+    /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(BlockEditPage, null), /* @__PURE__ */ React21.createElement(Backdrop, { canvas: canvasDocument, element: topLevelElementDom, onClose })),
     canvasDocument.body
   );
 }
-function Backdrop({ canvas, element, onClose }) {
+function Backdrop({
+  canvas,
+  element,
+  onClose
+}) {
   const rect = useElementRect(element);
+  const clipPath = element ? getRectPath(rect, canvas.defaultView) : void 0;
   const backdropStyle = {
     position: "fixed",
     top: 0,
@@ -3474,7 +3483,7 @@ function Backdrop({ canvas, element, onClose }) {
     zIndex: 999,
     pointerEvents: "painted",
     cursor: "pointer",
-    clipPath: getRectPath(rect, canvas.defaultView)
+    clipPath
   };
   const handleKeyDown = (event) => {
     if (event.key === "Enter" || event.key === " ") {
@@ -3495,11 +3504,7 @@ function Backdrop({ canvas, element, onClose }) {
   );
 }
 function getRectPath(rect, viewport) {
-  const { x: originalX, y: originalY, width: originalWidth, height: originalHeight } = rect;
-  const x = originalX;
-  const y = originalY;
-  const width = originalWidth;
-  const height = originalHeight;
+  const { x, y, width, height } = rect;
   const { innerWidth: vw, innerHeight: vh } = viewport;
   const path = `path(evenodd, 'M 0 0 
 		L ${vw} 0
@@ -3543,11 +3548,11 @@ function EditComponent() {
   useHandleDocumentSwitches();
   const navigateBack = useNavigateBack();
   const onClose = (0, import_utils6.throttle)(navigateBack, 100);
-  const elementDom = getComponentDOMElement(currentComponentId ?? void 0);
-  if (!elementDom) {
+  const topLevelElementDom = useComponentDOMElement(currentComponentId ?? void 0);
+  if (!currentComponentId) {
     return null;
   }
-  return /* @__PURE__ */ React22.createElement(ComponentModal, { element: elementDom, onClose });
+  return /* @__PURE__ */ React22.createElement(ComponentModal, { topLevelElementDom, onClose });
 }
 function useHandleDocumentSwitches() {
   const documentsManager = (0, import_editor_documents11.getV1DocumentsManager)();
@@ -3562,8 +3567,8 @@ function useHandleDocumentSwitches() {
       if (currentComponentId) {
         apiClient.unlockComponent(currentComponentId);
       }
-      const isComponent = nextDocument.config.type === COMPONENT_DOCUMENT_TYPE;
-      if (!isComponent) {
+      const isComponent2 = nextDocument.config.type === COMPONENT_DOCUMENT_TYPE;
+      if (!isComponent2) {
         updateCurrentComponent({ path: [], currentComponentId: null });
         return;
       }
@@ -3604,16 +3609,37 @@ function getInstanceTitle(instanceId, path) {
   const editorSettings = widget?.model?.get?.("editor_settings");
   return editorSettings?.title;
 }
-function getComponentDOMElement(id2) {
+function useComponentDOMElement(id2) {
+  const { componentContainerDomElement, topLevelElementDom } = getComponentDOMElements(id2);
+  const [currentElementDom, setCurrentElementDom] = (0, import_react14.useState)(topLevelElementDom);
+  (0, import_react14.useEffect)(() => {
+    setCurrentElementDom(topLevelElementDom);
+  }, [topLevelElementDom]);
+  (0, import_react14.useEffect)(() => {
+    if (!componentContainerDomElement) {
+      return;
+    }
+    const mutationObserver = new MutationObserver(() => {
+      const newElementDom = componentContainerDomElement.children[0];
+      setCurrentElementDom(newElementDom);
+    });
+    mutationObserver.observe(componentContainerDomElement, { childList: true });
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, [componentContainerDomElement]);
+  return currentElementDom;
+}
+function getComponentDOMElements(id2) {
   if (!id2) {
-    return null;
+    return { componentContainerDomElement: null, topLevelElementDom: null };
   }
   const documentsManager = (0, import_editor_documents11.getV1DocumentsManager)();
   const currentComponent = documentsManager.get(id2);
-  const widget = currentComponent?.container;
-  const container = widget?.view?.el?.children?.[0] ?? null;
-  const elementDom = container?.children[0];
-  return elementDom ?? null;
+  const componentContainer = currentComponent?.container;
+  const componentContainerDomElement = componentContainer?.view?.el?.children?.[0] ?? null;
+  const topLevelElementDom = componentContainerDomElement?.children[0] ?? null;
+  return { componentContainerDomElement, topLevelElementDom };
 }
 
 // src/components/in-edit-mode.tsx
@@ -4811,8 +4837,8 @@ function extractComponentIdFromModel(model) {
   if (!model) {
     return null;
   }
-  const isComponent = model.widgetType === COMPONENT_TYPE;
-  if (!isComponent) {
+  const isComponent2 = model.widgetType === COMPONENT_TYPE;
+  if (!isComponent2) {
     return null;
   }
   return model.settings?.component_instance?.value?.component_id?.value ?? null;
@@ -5139,13 +5165,85 @@ function collectDeletedElementIds(containers) {
   return elementIds;
 }
 
-// src/sync/load-component-data-after-instance-added.ts
+// src/sync/handle-component-edit-mode-container.ts
+var import_editor_elements21 = require("@elementor/editor-elements");
 var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
+var V4_DEFAULT_CONTAINER_TYPE = "e-flexbox";
+function initHandleComponentEditModeContainer() {
+  initRedirectDropIntoComponent();
+  initHandleTopLevelElementDelete();
+}
+function initHandleTopLevelElementDelete() {
+  (0, import_editor_v1_adapters10.registerDataHook)("after", "document/elements/delete", (args) => {
+    if (!isEditingComponent()) {
+      return;
+    }
+    const containers = args.containers ?? (args.container ? [args.container] : []);
+    for (const container of containers) {
+      if (!container.parent || !isComponent(container.parent)) {
+        continue;
+      }
+      const component = container.parent;
+      const isComponentEmpty = component.children?.length === 0;
+      if (isComponentEmpty) {
+        createEmptyTopLevelContainer(container.parent);
+      }
+    }
+  });
+}
+function initRedirectDropIntoComponent() {
+  (0, import_editor_v1_adapters10.registerDataHook)("dependency", "preview/drop", (args) => {
+    if (!isEditingComponent()) {
+      return true;
+    }
+    const containers = args.containers ?? (args.container ? [args.container] : []);
+    for (const container of containers) {
+      if (!isComponent(container)) {
+        continue;
+      }
+      const { shouldRedirect, container: redirectedContainer } = getComponentContainer(container);
+      if (!shouldRedirect) {
+        continue;
+      }
+      if (args.containers) {
+        const index = args.containers.indexOf(container);
+        args.containers[index] = redirectedContainer;
+      } else {
+        args.container = redirectedContainer;
+      }
+    }
+    return true;
+  });
+}
+function createEmptyTopLevelContainer(container) {
+  const newContainer = (0, import_editor_elements21.createElement)({
+    containerId: container.id,
+    model: { elType: V4_DEFAULT_CONTAINER_TYPE }
+  });
+  (0, import_editor_elements21.selectElement)(newContainer.id);
+}
+function getComponentContainer(container) {
+  const topLevelElement = container.children?.[0];
+  if (topLevelElement) {
+    return { shouldRedirect: true, container: topLevelElement };
+  }
+  return { shouldRedirect: false, container };
+}
+function isComponent(container) {
+  const isDocument = container.id === "document";
+  if (!isDocument) {
+    return false;
+  }
+  return container.document?.config.type === COMPONENT_DOCUMENT_TYPE;
+}
+
+// src/sync/load-component-data-after-instance-added.ts
+var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
 function initLoadComponentDataAfterInstanceAdded() {
-  (0, import_editor_v1_adapters10.registerDataHook)("after", "document/elements/paste", (_args, result) => {
+  (0, import_editor_v1_adapters11.registerDataHook)("after", "document/elements/paste", (_args, result) => {
     load(result);
   });
-  (0, import_editor_v1_adapters10.registerDataHook)("after", "document/elements/import", (_args, result) => {
+  (0, import_editor_v1_adapters11.registerDataHook)("after", "document/elements/import", (_args, result) => {
     load(result);
   });
 }
@@ -5155,17 +5253,17 @@ function load(result) {
 }
 
 // src/sync/regenerate-override-keys.ts
-var import_editor_elements21 = require("@elementor/editor-elements");
-var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
+var import_editor_elements22 = require("@elementor/editor-elements");
+var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
 var import_utils10 = require("@elementor/utils");
 function initRegenerateOverrideKeys() {
-  (0, import_editor_v1_adapters11.registerDataHook)("after", "document/elements/duplicate", (_args, result) => {
+  (0, import_editor_v1_adapters12.registerDataHook)("after", "document/elements/duplicate", (_args, result) => {
     regenerateOverrideKeysForContainers(result);
   });
-  (0, import_editor_v1_adapters11.registerDataHook)("after", "document/elements/paste", (_args, result) => {
+  (0, import_editor_v1_adapters12.registerDataHook)("after", "document/elements/paste", (_args, result) => {
     regenerateOverrideKeysForContainers(result);
   });
-  (0, import_editor_v1_adapters11.registerDataHook)("after", "document/elements/import", (_args, result) => {
+  (0, import_editor_v1_adapters12.registerDataHook)("after", "document/elements/import", (_args, result) => {
     regenerateOverrideKeysForContainers(result);
   });
 }
@@ -5176,11 +5274,11 @@ function regenerateOverrideKeysForContainers(result) {
   });
 }
 function regenerateOverrideKeysRecursive(elementId) {
-  const container = (0, import_editor_elements21.getContainer)(elementId);
+  const container = (0, import_editor_elements22.getContainer)(elementId);
   if (!container) {
     return;
   }
-  (0, import_editor_elements21.getAllDescendants)(container).forEach(regenerateOverrideKeys);
+  (0, import_editor_elements22.getAllDescendants)(container).forEach(regenerateOverrideKeys);
 }
 function regenerateOverrideKeys(element) {
   if (!isComponentInstance(element.model.toJSON())) {
@@ -5214,7 +5312,7 @@ function regenerateOverrideKeys(element) {
       }
     }
   };
-  (0, import_editor_elements21.updateElementSettings)({
+  (0, import_editor_elements22.updateElementSettings)({
     id: element.id,
     props: { component_instance: newComponentInstance },
     withHistory: false
@@ -5242,14 +5340,14 @@ function init() {
     COMPONENT_WIDGET_TYPE,
     (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
   );
-  (0, import_editor_v1_adapters12.registerDataHook)("dependency", "editor/documents/close", (args) => {
+  (0, import_editor_v1_adapters13.registerDataHook)("dependency", "editor/documents/close", (args) => {
     const document = (0, import_editor_documents13.getV1CurrentDocument)();
     if (document.config.type === COMPONENT_DOCUMENT_TYPE) {
       args.mode = "autosave";
     }
     return true;
   });
-  (0, import_editor_v1_adapters12.registerDataHook)("after", "preview/drop", onElementDrop);
+  (0, import_editor_v1_adapters13.registerDataHook)("after", "preview/drop", onElementDrop);
   window.elementorCommon.__beforeSave = beforeSave;
   (0, import_editor_elements_panel.injectTab)({
     id: "components",
@@ -5273,7 +5371,7 @@ function init() {
     id: "component-panel-header",
     component: ComponentPanelHeader
   });
-  (0, import_editor_v1_adapters12.registerDataHook)("after", "editor/documents/attach-preview", async () => {
+  (0, import_editor_v1_adapters13.registerDataHook)("after", "editor/documents/attach-preview", async () => {
     const { id: id2, config } = (0, import_editor_documents13.getV1CurrentDocument)();
     if (id2) {
       removeComponentStyles(id2);
@@ -5305,6 +5403,7 @@ function init() {
   initCircularNestingPrevention();
   initNonAtomicNestingPrevention();
   initLoadComponentDataAfterInstanceAdded();
+  initHandleComponentEditModeContainer();
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {