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

package/dist/index.js

@@ -36,13 +36,13 @@ module.exports = __toCommonJS(index_exports);
 
 // src/init.ts
 var import_editor = require("@elementor/editor");
-var import_editor_canvas4 = require("@elementor/editor-canvas");
-var import_editor_documents = require("@elementor/editor-documents");
+var import_editor_canvas5 = require("@elementor/editor-canvas");
+var import_editor_documents2 = require("@elementor/editor-documents");
 var import_editor_elements_panel = require("@elementor/editor-elements-panel");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-var import_store18 = require("@elementor/store");
-var import_i18n7 = require("@wordpress/i18n");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+var import_store20 = require("@elementor/store");
+var import_i18n8 = require("@wordpress/i18n");
 
 // src/component-id-transformer.ts
 var import_editor_canvas = require("@elementor/editor-canvas");
@@ -158,6 +158,14 @@ var selectUnpublishedComponents = (0, import_store2.__createSelector)(
   selectUnpublishedData,
   (unpublishedData) => unpublishedData
 );
+var selectComponentsObject = (0, import_store2.__createSelector)(
+  selectData,
+  selectUnpublishedData,
+  (data, unpublishedData) => data.concat(unpublishedData).reduce((acc, component) => {
+    acc[component.id] = component;
+    return acc;
+  }, {})
+);
 var selectLoadIsPending = (0, import_store2.__createSelector)(selectLoadStatus, (status) => status === "pending");
 var selectLoadIsError = (0, import_store2.__createSelector)(selectLoadStatus, (status) => status === "error");
 var selectStyles = (state) => state[SLICE_NAME].styles ?? {};
@@ -252,6 +260,58 @@ var import_editor_elements3 = require("@elementor/editor-elements");
 var import_icons2 = require("@elementor/icons");
 var import_ui2 = require("@elementor/ui");
 
+// src/store/load-components-styles.ts
+var import_store7 = require("@elementor/store");
+
+// src/utils/get-component-ids.ts
+var import_editor_props = require("@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 && (0, import_editor_props.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((0, import_store7.__getState)());
+  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)])
+  );
+  (0, import_store7.__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
 var import_editor_elements = require("@elementor/editor-elements");
 var getContainerForNewElement = () => {
@@ -319,12 +379,16 @@ var ComponentItem = ({ component }) => {
   const handleClick = () => {
     addComponentToPage(componentModel);
   };
+  const handleDragEnd = () => {
+    loadComponentsStyles([componentModel]);
+    (0, import_editor_canvas2.endDragElementFromPanel)();
+  };
   return /* @__PURE__ */ React3.createElement(
     import_ui2.ListItemButton,
     {
       draggable: true,
       onDragStart: () => (0, import_editor_canvas2.startDragElementFromPanel)(componentModel),
-      onDragEnd: import_editor_canvas2.endDragElementFromPanel,
+      onDragEnd: handleDragEnd,
       shape: "rounded",
       sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 }
     },
@@ -341,6 +405,7 @@ var addComponentToPage = (model) => {
   if (!container) {
     throw new Error(`Can't find container to drop new component instance at`);
   }
+  loadComponentsStyles([model]);
   (0, import_editor_elements3.dropElement)({
     containerId: container.id,
     model,
@@ -510,7 +575,7 @@ var import_react3 = require("react");
 var import_editor_elements4 = require("@elementor/editor-elements");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_icons4 = require("@elementor/icons");
-var import_store7 = require("@elementor/store");
+var import_store9 = require("@elementor/store");
 var import_ui5 = require("@elementor/ui");
 var import_i18n4 = require("@wordpress/i18n");
 
@@ -594,7 +659,7 @@ function CreateComponentForm() {
   const [element, setElement] = (0, import_react3.useState)(null);
   const [anchorPosition, setAnchorPosition] = (0, import_react3.useState)();
   const [resultNotification, setResultNotification] = (0, import_react3.useState)(null);
-  const dispatch5 = (0, import_store7.__useDispatch)();
+  const dispatch5 = (0, import_store9.__useDispatch)();
   (0, import_react3.useEffect)(() => {
     const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
     const openPopup = (event) => {
@@ -733,29 +798,289 @@ var generateTempId = () => {
   return Date.now() + Math.floor(Math.random() * 1e6);
 };
 
-// src/components/in-edit-mode.tsx
+// src/components/edit-component/edit-component.tsx
+var React9 = __toESM(require("react"));
+var import_react6 = require("react");
+var import_editor_documents = require("@elementor/editor-documents");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_store11 = require("@elementor/store");
+
+// src/components/edit-component/component-modal.tsx
 var React8 = __toESM(require("react"));
+var import_react5 = require("react");
+var import_react_dom = require("react-dom");
+var import_i18n5 = require("@wordpress/i18n");
+
+// src/hooks/use-canvas-document.ts
+var import_editor_canvas3 = require("@elementor/editor-canvas");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+function useCanvasDocument() {
+  return (0, import_editor_v1_adapters2.__privateUseListenTo)((0, import_editor_v1_adapters2.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_canvas3.getCanvasIframeDocument)());
+}
+
+// src/hooks/use-element-rect.ts
+var import_react4 = require("react");
+var import_utils2 = require("@elementor/utils");
+function useElementRect(element) {
+  const [rect, setRect] = (0, import_react4.useState)(new DOMRect(0, 0, 0, 0));
+  const onChange = (0, import_utils2.throttle)(
+    () => {
+      setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
+    },
+    20,
+    true
+  );
+  useScrollListener({ element, onChange });
+  useResizeListener({ element, onChange });
+  useMutationsListener({ element, onChange });
+  (0, import_react4.useEffect)(
+    () => () => {
+      onChange.cancel();
+    },
+    [onChange]
+  );
+  return rect;
+}
+function useScrollListener({ element, onChange }) {
+  (0, import_react4.useEffect)(() => {
+    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 }) {
+  (0, import_react4.useEffect)(() => {
+    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 }) {
+  (0, import_react4.useEffect)(() => {
+    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();
+  (0, import_react5.useEffect)(() => {
+    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 (0, import_react_dom.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": (0, import_i18n5.__)("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] = (0, import_react6.useState)([]);
+  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 = (0, import_store11.__useSelector)(selectComponentsObject);
+  const documentsManager = (0, import_editor_documents.getV1DocumentsManager)();
+  (0, import_react6.useEffect)(
+    () => (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.commandEndEvent)("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 = (0, import_editor_documents.getV1DocumentsManager)();
+  return (0, import_react6.useCallback)(() => {
+    const { component: prevComponent, instanceId: prevComponentInstanceId } = path.at(-2) ?? {};
+    const { id: prevComponentId } = prevComponent ?? {};
+    const switchToDocument = (id, selector) => {
+      (0, import_editor_v1_adapters3.__privateRunCommand)("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
+var React10 = __toESM(require("react"));
 var import_editor_ui3 = require("@elementor/editor-ui");
 var import_icons5 = require("@elementor/icons");
 var import_ui6 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
+var import_i18n6 = require("@wordpress/i18n");
 var openEditModeDialog = (lockedBy) => {
   (0, import_editor_ui3.openDialog)({
-    component: /* @__PURE__ */ React8.createElement(EditModeDialog, { lockedBy })
+    component: /* @__PURE__ */ React10.createElement(EditModeDialog, { lockedBy })
   });
 };
 var EditModeDialog = ({ lockedBy }) => {
-  const content = (0, import_i18n5.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(import_ui6.DialogHeader, { logo: false }, /* @__PURE__ */ React8.createElement(import_ui6.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React8.createElement(import_ui6.Icon, { color: "secondary" }, /* @__PURE__ */ React8.createElement(import_icons5.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React8.createElement(import_ui6.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React8.createElement(import_ui6.DialogContent, null, /* @__PURE__ */ React8.createElement(import_ui6.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React8.createElement(import_ui6.Typography, { variant: "body2" }, (0, import_i18n5.__)(
+  const content = (0, import_i18n6.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(import_ui6.DialogHeader, { logo: false }, /* @__PURE__ */ React10.createElement(import_ui6.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React10.createElement(import_ui6.Icon, { color: "secondary" }, /* @__PURE__ */ React10.createElement(import_icons5.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React10.createElement(import_ui6.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React10.createElement(import_ui6.DialogContent, null, /* @__PURE__ */ React10.createElement(import_ui6.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React10.createElement(import_ui6.Typography, { variant: "body2" }, (0, import_i18n6.__)(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
-  )), /* @__PURE__ */ React8.createElement(import_ui6.DialogActions, null, /* @__PURE__ */ React8.createElement(import_ui6.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui3.closeDialog }, (0, import_i18n5.__)("Close", "elementor"))))));
+  )), /* @__PURE__ */ React10.createElement(import_ui6.DialogActions, null, /* @__PURE__ */ React10.createElement(import_ui6.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui3.closeDialog }, (0, import_i18n6.__)("Close", "elementor"))))));
 };
 
 // src/create-component-type.ts
-var import_editor_canvas3 = require("@elementor/editor-canvas");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-var import_i18n6 = require("@wordpress/i18n");
+var import_editor_canvas4 = require("@elementor/editor-canvas");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var import_i18n7 = require("@wordpress/i18n");
 var TYPE = "e-component";
 function createComponentType(options) {
   const legacyWindow = window;
@@ -769,7 +1094,7 @@ function createComponentType(options) {
   };
 }
 function createComponentView(options) {
-  return class extends (0, import_editor_canvas3.createTemplatedElementView)(options) {
+  return class extends (0, import_editor_canvas4.createTemplatedElementView)(options) {
     legacyWindow = window;
     afterSettingsResolve(settings) {
       if (settings.component) {
@@ -806,7 +1131,7 @@ function createComponentView(options) {
             {
               name: "edit component",
               icon: "eicon-edit",
-              title: () => (0, import_i18n6.__)("Edit Component", "elementor"),
+              title: () => (0, import_i18n7.__)("Edit Component", "elementor"),
               isEnabled: () => true,
               callback: () => this.switchDocument()
             }
@@ -822,18 +1147,22 @@ function createComponentView(options) {
       if (!isAllowedToSwitchDocument) {
         options.showLockedByModal?.(lockedBy || "");
       } else {
-        (0, import_editor_v1_adapters2.__privateRunCommand)("editor/documents/switch", {
+        (0, import_editor_v1_adapters4.__privateRunCommand)("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() {
@@ -858,22 +1187,22 @@ function setInactiveRecursively(model) {
 }
 
 // src/populate-store.ts
-var import_react4 = require("react");
-var import_store9 = require("@elementor/store");
+var import_react7 = require("react");
+var import_store13 = require("@elementor/store");
 function PopulateStore() {
-  (0, import_react4.useEffect)(() => {
-    (0, import_store9.__dispatch)(loadComponents());
+  (0, import_react7.useEffect)(() => {
+    (0, import_store13.__dispatch)(loadComponents());
   }, []);
   return null;
 }
 
 // src/store/components-styles-provider.ts
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_store10 = require("@elementor/store");
+var import_store14 = require("@elementor/store");
 var componentsStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
   key: "components-styles",
   priority: 100,
-  subscribe: (cb) => (0, import_store10.__subscribeWithSelector)(
+  subscribe: (cb) => (0, import_store14.__subscribeWithSelector)(
     (state) => state[SLICE_NAME],
     () => {
       cb();
@@ -881,78 +1210,26 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
   ),
   actions: {
     all: () => {
-      return selectFlatStyles((0, import_store10.__getState)());
+      return selectFlatStyles((0, import_store14.__getState)());
     },
     get: (id) => {
-      return selectFlatStyles((0, import_store10.__getState)()).find((style) => style.id === id) ?? null;
+      return selectFlatStyles((0, import_store14.__getState)()).find((style) => style.id === id) ?? null;
     }
   }
 });
 
-// src/store/load-components-styles.ts
-var import_store12 = require("@elementor/store");
-
-// src/utils/get-component-ids.ts
-var import_editor_props = require("@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 && (0, import_editor_props.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((0, import_store12.__getState)());
-  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)])
-  );
-  (0, import_store12.__dispatch)(slice.actions.addStyles(styles));
-}
-function extractStyles(element) {
-  return [...Object.values(element.styles ?? {}), ...(element.elements ?? []).flatMap(extractStyles)];
-}
-
 // src/store/remove-component-styles.ts
-var import_store14 = require("@elementor/store");
+var import_store16 = require("@elementor/store");
 function removeComponentStyles(id) {
   apiClient.invalidateComponentConfigCache(id);
-  (0, import_store14.__dispatch)(slice.actions.removeStyles({ id }));
+  (0, import_store16.__dispatch)(slice.actions.removeStyles({ id }));
 }
 
 // src/utils/before-save.ts
 var import_editor_elements5 = require("@elementor/editor-elements");
-var import_store16 = require("@elementor/store");
+var import_store18 = require("@elementor/store");
 var beforeSave = async ({ container, status }) => {
-  const unpublishedComponents = selectUnpublishedComponents((0, import_store16.__getState)());
+  const unpublishedComponents = selectUnpublishedComponents((0, import_store18.__getState)());
   if (!unpublishedComponents.length) {
     return;
   }
@@ -960,7 +1237,7 @@ var beforeSave = async ({ container, status }) => {
     const tempIdToComponentId = await createComponents(unpublishedComponents, status);
     const elements = container.model.get("elements").toJSON();
     updateComponentInstances(elements, tempIdToComponentId);
-    (0, import_store16.__dispatch)(
+    (0, import_store18.__dispatch)(
       slice.actions.add(
         unpublishedComponents.map((component) => ({
           id: tempIdToComponentId.get(component.id),
@@ -968,7 +1245,7 @@ var beforeSave = async ({ container, status }) => {
         }))
       )
     );
-    (0, import_store16.__dispatch)(slice.actions.resetUnpublished());
+    (0, import_store18.__dispatch)(slice.actions.resetUnpublished());
   } catch (error) {
     throw new Error(`Failed to publish components and update component instances: ${error}`);
   }
@@ -1025,13 +1302,13 @@ function updateElementComponentId(elementId, componentId) {
 var COMPONENT_DOCUMENT_TYPE = "elementor_component";
 function init() {
   import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
-  (0, import_store18.__registerSlice)(slice);
-  (0, import_editor_canvas4.registerElementType)(
+  (0, import_store20.__registerSlice)(slice);
+  (0, import_editor_canvas5.registerElementType)(
     TYPE,
     (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
   );
-  (0, import_editor_v1_adapters3.registerDataHook)("dependency", "editor/documents/close", (args) => {
-    const document = (0, import_editor_documents.getV1CurrentDocument)();
+  (0, import_editor_v1_adapters5.registerDataHook)("dependency", "editor/documents/close", (args) => {
+    const document = (0, import_editor_documents2.getV1CurrentDocument)();
     if (document.config.type === COMPONENT_DOCUMENT_TYPE) {
       args.mode = "autosave";
     }
@@ -1040,7 +1317,7 @@ function init() {
   window.elementorCommon.__beforeSave = beforeSave;
   (0, import_editor_elements_panel.injectTab)({
     id: "components",
-    label: (0, import_i18n7.__)("Components", "elementor"),
+    label: (0, import_i18n8.__)("Components", "elementor"),
     component: Components
   });
   (0, import_editor.injectIntoTop)({
@@ -1051,14 +1328,18 @@ function init() {
     id: "components-populate-store",
     component: PopulateStore
   });
-  (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.commandStartEvent)("editor/documents/attach-preview"), () => {
-    const { id, config } = (0, import_editor_documents.getV1CurrentDocument)();
+  (0, import_editor.injectIntoTop)({
+    id: "edit-component",
+    component: EditComponent
+  });
+  (0, import_editor_v1_adapters5.__privateListenTo)((0, import_editor_v1_adapters5.commandStartEvent)("editor/documents/attach-preview"), () => {
+    const { id, config } = (0, import_editor_documents2.getV1CurrentDocument)();
     if (id) {
       removeComponentStyles(id);
     }
     loadComponentsStyles(config?.elements ?? []);
   });
-  import_editor_canvas4.settingsTransformersRegistry.register("component-id", componentIdTransformer);
+  import_editor_canvas5.settingsTransformersRegistry.register("component-id", componentIdTransformer);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {