@elementor/editor-components 3.33.0-235 → 3.33.0-236

package/dist/index.mjs

@@ -7,9 +7,9 @@ import {
 import { getV1CurrentDocument } from "@elementor/editor-documents";
 import { injectTab } from "@elementor/editor-elements-panel";
 import { stylesRepository } from "@elementor/editor-styles-repository";
-import { __privateListenTo as listenTo, commandStartEvent, registerDataHook } from "@elementor/editor-v1-adapters";
+import { __privateListenTo as listenTo2, commandStartEvent, registerDataHook } from "@elementor/editor-v1-adapters";
 import { __registerSlice as registerSlice } from "@elementor/store";
-import { __ as __7 } from "@wordpress/i18n";
+import { __ as __8 } from "@wordpress/i18n";
 
 // src/component-id-transformer.ts
 import { createTransformer } from "@elementor/editor-canvas";
@@ -128,6 +128,14 @@ var selectUnpublishedComponents = createSelector(
   selectUnpublishedData,
   (unpublishedData) => unpublishedData
 );
+var selectComponentsObject = createSelector(
+  selectData,
+  selectUnpublishedData,
+  (data, unpublishedData) => data.concat(unpublishedData).reduce((acc, component) => {
+    acc[component.id] = component;
+    return acc;
+  }, {})
+);
 var selectLoadIsPending = createSelector(selectLoadStatus, (status) => status === "pending");
 var selectLoadIsError = createSelector(selectLoadStatus, (status) => status === "error");
 var selectStyles = (state) => state[SLICE_NAME].styles ?? {};
@@ -222,6 +230,58 @@ import { dropElement } from "@elementor/editor-elements";
 import { ComponentsIcon } from "@elementor/icons";
 import { Box as Box2, ListItemButton, ListItemIcon, ListItemText, Typography } from "@elementor/ui";
 
+// src/store/load-components-styles.ts
+import { __dispatch as dispatch, __getState as getState2 } from "@elementor/store";
+
+// src/utils/get-component-ids.ts
+import { isTransformable } from "@elementor/editor-props";
+var getComponentIds = (elements) => {
+  return elements.flatMap((element) => {
+    const ids = [];
+    const type = element.widgetType || element.elType;
+    if (type === "e-component" && element.settings?.component && isTransformable(element.settings?.component)) {
+      ids.push(element.settings.component.value);
+    }
+    if (element.elements) {
+      ids.push(...getComponentIds(element.elements));
+    }
+    return ids;
+  });
+};
+
+// src/store/load-components-styles.ts
+async function loadComponentsStyles(elements) {
+  const componentIds = Array.from(new Set(getComponentIds(elements)));
+  if (!componentIds.length) {
+    return;
+  }
+  const knownComponents = selectStyles(getState2());
+  const unknownComponentIds = componentIds.filter((id) => !knownComponents[id]);
+  if (!unknownComponentIds.length) {
+    return;
+  }
+  addComponentStyles(unknownComponentIds);
+}
+async function addComponentStyles(ids) {
+  const newComponents = await loadStyles(ids);
+  addStyles(newComponents);
+  Object.values(newComponents).forEach(([, data]) => {
+    loadComponentsStyles(data.elements ?? []);
+  });
+}
+async function loadStyles(ids) {
+  return Promise.all(ids.map(async (id) => [id, await apiClient.getComponentConfig(id)]));
+}
+function addStyles(data) {
+  const styles = Object.fromEntries(
+    data.map(([componentId, componentData]) => [componentId, extractStyles(componentData)])
+  );
+  dispatch(slice.actions.addStyles(styles));
+}
+function extractStyles(element) {
+  return [...Object.values(element.styles ?? {}), ...(element.elements ?? []).flatMap(extractStyles)];
+}
+
 // src/utils/get-container-for-new-element.ts
 import {
   getContainer,
@@ -293,12 +353,16 @@ var ComponentItem = ({ component }) => {
   const handleClick = () => {
     addComponentToPage(componentModel);
   };
+  const handleDragEnd = () => {
+    loadComponentsStyles([componentModel]);
+    endDragElementFromPanel();
+  };
   return /* @__PURE__ */ React3.createElement(
     ListItemButton,
     {
       draggable: true,
       onDragStart: () => startDragElementFromPanel(componentModel),
-      onDragEnd: endDragElementFromPanel,
+      onDragEnd: handleDragEnd,
       shape: "rounded",
       sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 }
     },
@@ -315,6 +379,7 @@ var addComponentToPage = (model) => {
   if (!container) {
     throw new Error(`Can't find container to drop new component instance at`);
   }
+  loadComponentsStyles([model]);
   dropElement({
     containerId: container.id,
     model,
@@ -707,31 +772,295 @@ var generateTempId = () => {
   return Date.now() + Math.floor(Math.random() * 1e6);
 };
 
-// src/components/in-edit-mode.tsx
+// src/components/edit-component/edit-component.tsx
+import * as React9 from "react";
+import { useCallback, useEffect as useEffect4, useState as useState4 } from "react";
+import { getV1DocumentsManager } from "@elementor/editor-documents";
+import {
+  __privateListenTo as listenTo,
+  __privateRunCommand as runCommand,
+  commandEndEvent as commandEndEvent2
+} from "@elementor/editor-v1-adapters";
+import { __useSelector as useSelector2 } from "@elementor/store";
+
+// src/components/edit-component/component-modal.tsx
 import * as React8 from "react";
+import { useEffect as useEffect3 } from "react";
+import { createPortal } from "react-dom";
+import { __ as __5 } from "@wordpress/i18n";
+
+// src/hooks/use-canvas-document.ts
+import { getCanvasIframeDocument } from "@elementor/editor-canvas";
+import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
+function useCanvasDocument() {
+  return useListenTo(commandEndEvent("editor/documents/attach-preview"), () => getCanvasIframeDocument());
+}
+
+// src/hooks/use-element-rect.ts
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { throttle } from "@elementor/utils";
+function useElementRect(element) {
+  const [rect, setRect] = useState3(new DOMRect(0, 0, 0, 0));
+  const onChange = throttle(
+    () => {
+      setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
+    },
+    20,
+    true
+  );
+  useScrollListener({ element, onChange });
+  useResizeListener({ element, onChange });
+  useMutationsListener({ element, onChange });
+  useEffect2(
+    () => () => {
+      onChange.cancel();
+    },
+    [onChange]
+  );
+  return rect;
+}
+function useScrollListener({ element, onChange }) {
+  useEffect2(() => {
+    if (!element) {
+      return;
+    }
+    const win = element.ownerDocument?.defaultView;
+    win?.addEventListener("scroll", onChange, { passive: true });
+    return () => {
+      win?.removeEventListener("scroll", onChange);
+    };
+  }, [element, onChange]);
+}
+function useResizeListener({ element, onChange }) {
+  useEffect2(() => {
+    if (!element) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver(onChange);
+    resizeObserver.observe(element);
+    const win = element.ownerDocument?.defaultView;
+    win?.addEventListener("resize", onChange, { passive: true });
+    return () => {
+      resizeObserver.disconnect();
+      win?.removeEventListener("resize", onChange);
+    };
+  }, [element, onChange]);
+}
+function useMutationsListener({ element, onChange }) {
+  useEffect2(() => {
+    if (!element) {
+      return;
+    }
+    const mutationObserver = new MutationObserver(onChange);
+    mutationObserver.observe(element, { childList: true, subtree: true });
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, [element, onChange]);
+}
+
+// src/components/edit-component/component-modal.tsx
+function ComponentModal({ element, onClose }) {
+  const canvasDocument = useCanvasDocument();
+  useEffect3(() => {
+    const handleEsc = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    canvasDocument?.body.addEventListener("keydown", handleEsc);
+    return () => {
+      canvasDocument?.body.removeEventListener("keydown", handleEsc);
+    };
+  }, [canvasDocument, onClose]);
+  if (!canvasDocument?.body) {
+    return null;
+  }
+  return createPortal(
+    /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(BlockEditPage, null), /* @__PURE__ */ React8.createElement(Backdrop, { canvas: canvasDocument, element, onClose })),
+    canvasDocument.body
+  );
+}
+function Backdrop({ canvas, element, onClose }) {
+  const rect = useElementRect(element);
+  const backdropStyle = {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100vw",
+    height: "100vh",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    zIndex: 999,
+    pointerEvents: "painted",
+    cursor: "pointer",
+    clipPath: getRoundedRectPath(rect, canvas.defaultView, 5)
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ React8.createElement(
+    "div",
+    {
+      style: backdropStyle,
+      onClick: onClose,
+      onKeyDown: handleKeyDown,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": __5("Exit component editing mode", "elementor")
+    }
+  );
+}
+function getRoundedRectPath(rect, viewport, borderRadius) {
+  const padding = borderRadius / 2;
+  const { x: originalX, y: originalY, width: originalWidth, height: originalHeight } = rect;
+  const x = originalX - padding;
+  const y = originalY - padding;
+  const width = originalWidth + 2 * padding;
+  const height = originalHeight + 2 * padding;
+  const radius = Math.min(borderRadius, width / 2, height / 2);
+  const { innerWidth: vw, innerHeight: vh } = viewport;
+  const path = `path(evenodd, 'M 0 0 
+		L ${vw} 0
+		L ${vw} ${vh}
+		L 0 ${vh}
+		Z
+		M ${x + radius} ${y}
+		L ${x + width - radius} ${y}
+		A ${radius} ${radius} 0 0 1 ${x + width} ${y + radius}
+		L ${x + width} ${y + height - radius}
+		A ${radius} ${radius} 0 0 1 ${x + width - radius} ${y + height}
+		L ${x + radius} ${y + height}
+		A ${radius} ${radius} 0 0 1 ${x} ${y + height - radius}
+		L ${x} ${y + radius}
+		A ${radius} ${radius} 0 0 1 ${x + radius} ${y}
+    	Z'
+	)`;
+  return path.replace(/\s{2,}/g, " ");
+}
+function BlockEditPage() {
+  const blockV3DocumentHandlesStyles = `
+	.elementor-editor-active {
+		& .elementor-section-wrap.ui-sortable {
+			display: contents;
+		}
+
+		& *[data-editable-elementor-document]:not(.elementor-edit-mode):hover {
+			& .elementor-document-handle:not(.elementor-document-save-back-handle) {
+				display: none;
+
+				&::before,
+				& .elementor-document-handle__inner {
+					display: none;
+				}
+			}
+		}
+	}
+	`;
+  return /* @__PURE__ */ React8.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
+}
+
+// src/components/edit-component/edit-component.tsx
+function EditComponent() {
+  const [componentsPath, setComponentsPath] = useState4([]);
+  useHandleDocumentSwitches(componentsPath, setComponentsPath);
+  const onBack = useNavigateBack(componentsPath);
+  const currentItem = componentsPath.at(-1);
+  const { component: currentComponent } = currentItem ?? {};
+  const widget = currentComponent?.container;
+  const container = widget?.view?.el?.children?.[0] ?? null;
+  const elementDom = container?.children[0];
+  if (!elementDom) {
+    return null;
+  }
+  return /* @__PURE__ */ React9.createElement(ComponentModal, { element: elementDom, onClose: onBack });
+}
+function useHandleDocumentSwitches(path, setPath) {
+  const components = useSelector2(selectComponentsObject);
+  const documentsManager = getV1DocumentsManager();
+  useEffect4(
+    () => listenTo(commandEndEvent2("editor/documents/attach-preview"), () => {
+      const { component: currentComponent } = path.at(-1) ?? {};
+      const { id: currentComponentId } = currentComponent ?? {};
+      const nextDocument = documentsManager.getCurrent();
+      if (nextDocument.id === currentComponentId) {
+        return;
+      }
+      if (currentComponentId) {
+        apiClient.unlockComponent(currentComponentId);
+      }
+      const isComponent = !!components?.[nextDocument.id];
+      if (!isComponent) {
+        setPath([]);
+        return;
+      }
+      setPath(getUpdatedComponentPath(path, nextDocument));
+    }),
+    [path, setPath, components, documentsManager]
+  );
+}
+function getUpdatedComponentPath(path, nextDocument) {
+  const componentIndex = path.findIndex(({ component }) => component.id === nextDocument.id);
+  if (componentIndex >= 0) {
+    return path.slice(0, componentIndex + 1);
+  }
+  return [
+    ...path,
+    {
+      instanceId: nextDocument?.container.view?.el?.dataset.id,
+      component: nextDocument
+    }
+  ];
+}
+function useNavigateBack(path) {
+  const documentsManager = getV1DocumentsManager();
+  return useCallback(() => {
+    const { component: prevComponent, instanceId: prevComponentInstanceId } = path.at(-2) ?? {};
+    const { id: prevComponentId } = prevComponent ?? {};
+    const switchToDocument = (id, selector) => {
+      runCommand("editor/documents/switch", {
+        id,
+        selector,
+        mode: "autosave",
+        setAsInitial: false,
+        shouldScroll: false
+      });
+    };
+    if (prevComponentId && prevComponentInstanceId) {
+      switchToDocument(prevComponentId, `[data-id="${prevComponentInstanceId}"]`);
+      return;
+    }
+    switchToDocument(documentsManager.getInitialId());
+  }, [path, documentsManager]);
+}
+
+// src/components/in-edit-mode.tsx
+import * as React10 from "react";
 import { closeDialog, openDialog } from "@elementor/editor-ui";
 import { InfoCircleFilledIcon } from "@elementor/icons";
 import { Box as Box5, Button as Button2, DialogActions, DialogContent, DialogHeader, Icon as Icon2, Stack as Stack5, Typography as Typography4 } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
+import { __ as __6 } from "@wordpress/i18n";
 var openEditModeDialog = (lockedBy) => {
   openDialog({
-    component: /* @__PURE__ */ React8.createElement(EditModeDialog, { lockedBy })
+    component: /* @__PURE__ */ React10.createElement(EditModeDialog, { lockedBy })
   });
 };
 var EditModeDialog = ({ lockedBy }) => {
-  const content = __5("%s is currently editing this document", "elementor").replace("%s", lockedBy);
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React8.createElement(Box5, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React8.createElement(Icon2, { color: "secondary" }, /* @__PURE__ */ React8.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React8.createElement(Typography4, { variant: "subtitle1" }, content))), /* @__PURE__ */ React8.createElement(DialogContent, null, /* @__PURE__ */ React8.createElement(Stack5, { spacing: 2, direction: "column" }, /* @__PURE__ */ React8.createElement(Typography4, { variant: "body2" }, __5(
+  const content = __6("%s is currently editing this document", "elementor").replace("%s", lockedBy);
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React10.createElement(Box5, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React10.createElement(Icon2, { color: "secondary" }, /* @__PURE__ */ React10.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React10.createElement(Typography4, { variant: "subtitle1" }, content))), /* @__PURE__ */ React10.createElement(DialogContent, null, /* @__PURE__ */ React10.createElement(Stack5, { spacing: 2, direction: "column" }, /* @__PURE__ */ React10.createElement(Typography4, { variant: "body2" }, __6(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
-  )), /* @__PURE__ */ React8.createElement(DialogActions, null, /* @__PURE__ */ React8.createElement(Button2, { color: "secondary", variant: "contained", onClick: closeDialog }, __5("Close", "elementor"))))));
+  )), /* @__PURE__ */ React10.createElement(DialogActions, null, /* @__PURE__ */ React10.createElement(Button2, { color: "secondary", variant: "contained", onClick: closeDialog }, __6("Close", "elementor"))))));
 };
 
 // src/create-component-type.ts
 import {
   createTemplatedElementView
 } from "@elementor/editor-canvas";
-import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
-import { __ as __6 } from "@wordpress/i18n";
+import { __privateRunCommand as runCommand2 } from "@elementor/editor-v1-adapters";
+import { __ as __7 } from "@wordpress/i18n";
 var TYPE = "e-component";
 function createComponentType(options) {
   const legacyWindow = window;
@@ -782,7 +1111,7 @@ function createComponentView(options) {
             {
               name: "edit component",
               icon: "eicon-edit",
-              title: () => __6("Edit Component", "elementor"),
+              title: () => __7("Edit Component", "elementor"),
               isEnabled: () => true,
               callback: () => this.switchDocument()
             }
@@ -798,18 +1127,22 @@ function createComponentView(options) {
       if (!isAllowedToSwitchDocument) {
         options.showLockedByModal?.(lockedBy || "");
       } else {
-        runCommand("editor/documents/switch", {
+        runCommand2("editor/documents/switch", {
           id: this.getComponentId()?.value,
           mode: "autosave",
-          selector: `[data-id="${this.model.get("id")}"]`
+          selector: `[data-id="${this.model.get("id")}"]`,
+          shouldScroll: false
         });
-        apiClient.lockComponent(this.getComponentId()?.value);
       }
     }
+    handleDblClick(e) {
+      e.stopPropagation();
+      this.switchDocument();
+    }
     events() {
       return {
         ...super.events(),
-        dblclick: this.switchDocument
+        dblclick: this.handleDblClick
       };
     }
     attributes() {
@@ -834,18 +1167,18 @@ function setInactiveRecursively(model) {
 }
 
 // src/populate-store.ts
-import { useEffect as useEffect2 } from "react";
-import { __dispatch as dispatch } from "@elementor/store";
+import { useEffect as useEffect5 } from "react";
+import { __dispatch as dispatch2 } from "@elementor/store";
 function PopulateStore() {
-  useEffect2(() => {
-    dispatch(loadComponents());
+  useEffect5(() => {
+    dispatch2(loadComponents());
   }, []);
   return null;
 }
 
 // src/store/components-styles-provider.ts
 import { createStylesProvider } from "@elementor/editor-styles-repository";
-import { __getState as getState2, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
+import { __getState as getState3, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
 var componentsStylesProvider = createStylesProvider({
   key: "components-styles",
   priority: 100,
@@ -857,66 +1190,14 @@ var componentsStylesProvider = createStylesProvider({
   ),
   actions: {
     all: () => {
-      return selectFlatStyles(getState2());
+      return selectFlatStyles(getState3());
     },
     get: (id) => {
-      return selectFlatStyles(getState2()).find((style) => style.id === id) ?? null;
+      return selectFlatStyles(getState3()).find((style) => style.id === id) ?? null;
     }
   }
 });
 
-// src/store/load-components-styles.ts
-import { __dispatch as dispatch2, __getState as getState3 } from "@elementor/store";
-
-// src/utils/get-component-ids.ts
-import { isTransformable } from "@elementor/editor-props";
-var getComponentIds = (elements) => {
-  return elements.flatMap((element) => {
-    const ids = [];
-    const type = element.widgetType || element.elType;
-    if (type === "e-component" && element.settings?.component && isTransformable(element.settings?.component)) {
-      ids.push(element.settings.component.value);
-    }
-    if (element.elements) {
-      ids.push(...getComponentIds(element.elements));
-    }
-    return ids;
-  });
-};
-
-// src/store/load-components-styles.ts
-async function loadComponentsStyles(elements) {
-  const componentIds = Array.from(new Set(getComponentIds(elements)));
-  if (!componentIds.length) {
-    return;
-  }
-  const knownComponents = selectStyles(getState3());
-  const unknownComponentIds = componentIds.filter((id) => !knownComponents[id]);
-  if (!unknownComponentIds.length) {
-    return;
-  }
-  addComponentStyles(unknownComponentIds);
-}
-async function addComponentStyles(ids) {
-  const newComponents = await loadStyles(ids);
-  addStyles(newComponents);
-  Object.values(newComponents).forEach(([, data]) => {
-    loadComponentsStyles(data.elements);
-  });
-}
-async function loadStyles(ids) {
-  return Promise.all(ids.map(async (id) => [id, await apiClient.getComponentConfig(id)]));
-}
-function addStyles(data) {
-  const styles = Object.fromEntries(
-    data.map(([componentId, componentData]) => [componentId, extractStyles(componentData)])
-  );
-  dispatch2(slice.actions.addStyles(styles));
-}
-function extractStyles(element) {
-  return [...Object.values(element.styles ?? {}), ...(element.elements ?? []).flatMap(extractStyles)];
-}
-
 // src/store/remove-component-styles.ts
 import { __dispatch as dispatch3 } from "@elementor/store";
 function removeComponentStyles(id) {
@@ -1016,7 +1297,7 @@ function init() {
   window.elementorCommon.__beforeSave = beforeSave;
   injectTab({
     id: "components",
-    label: __7("Components", "elementor"),
+    label: __8("Components", "elementor"),
     component: Components
   });
   injectIntoTop({
@@ -1027,7 +1308,11 @@ function init() {
     id: "components-populate-store",
     component: PopulateStore
   });
-  listenTo(commandStartEvent("editor/documents/attach-preview"), () => {
+  injectIntoTop({
+    id: "edit-component",
+    component: EditComponent
+  });
+  listenTo2(commandStartEvent("editor/documents/attach-preview"), () => {
     const { id, config } = getV1CurrentDocument();
     if (id) {
       removeComponentStyles(id);