@elementor/editor-components 4.0.0-650 → 4.0.0-660

package/dist/index.mjs

@@ -3882,9 +3882,9 @@ import { __ as __24 } from "@wordpress/i18n";
 
 // src/extended/utils/replace-element-with-component.ts
 import { replaceElement } from "@elementor/editor-elements";
-var replaceElementWithComponent = async (element, component) => {
-  return await replaceElement({
-    currentElement: element,
+var replaceElementWithComponent = (element, component) => {
+  return replaceElement({
+    currentElementId: element.id,
     newElement: createComponentModel2(component),
     withHistory: false
   });
@@ -3915,7 +3915,7 @@ async function createUnpublishedComponent({
     overridableProps
   });
   componentsActions.addCreatedThisSession(generatedUid);
-  const componentInstance = await replaceElementWithComponent(element, componentBase);
+  const componentInstance = replaceElementWithComponent(element, componentBase);
   trackComponentEvent({
     action: "created",
     source,
@@ -4154,7 +4154,7 @@ function CreateComponentForm() {
   const { components } = useComponents();
   const eventData = useRef5(null);
   useEffect3(() => {
-    const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
+    const OPEN_SAVE_AS_COMPONENT_FORM_EVENT2 = "elementor/editor/open-save-as-component-form";
     const openPopup = (event) => {
       const { shouldOpen, notification } = shouldOpenForm(event.detail.element, components?.length ?? 0);
       if (!shouldOpen) {
@@ -4170,9 +4170,9 @@ function CreateComponentForm() {
         ...eventData.current
       });
     };
-    window.addEventListener(OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup);
+    window.addEventListener(OPEN_SAVE_AS_COMPONENT_FORM_EVENT2, openPopup);
     return () => {
-      window.removeEventListener(OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup);
+      window.removeEventListener(OPEN_SAVE_AS_COMPONENT_FORM_EVENT2, openPopup);
     };
   }, [components?.length]);
   const handleSave = async (values) => {
@@ -5768,6 +5768,76 @@ function initExtended() {
   });
 }
 
+// src/extended/shortcuts/create-component-shortcut.ts
+import { getElementType as getElementType5, getSelectedElements as getSelectedElements2, getWidgetsCache as getWidgetsCache5 } from "@elementor/editor-elements";
+import { isProActive } from "@elementor/utils";
+var CREATE_COMPONENT_SHORTCUT_KEYS = "ctrl+shift+k";
+var OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
+function isCreateComponentAllowed() {
+  const selectedElements = getSelectedElements2();
+  if (selectedElements.length !== 1) {
+    return { allowed: false };
+  }
+  const element = selectedElements[0];
+  const elementType = getElementType5(element.type);
+  if (!elementType) {
+    return { allowed: false };
+  }
+  if (!isProActive()) {
+    return { allowed: false };
+  }
+  const widgetsCache = getWidgetsCache5();
+  const elementConfig = widgetsCache?.[element.type];
+  if (!elementConfig?.atomic_props_schema || !elementConfig?.show_in_panel || elementConfig?.elType === "widget") {
+    return { allowed: false };
+  }
+  const legacyWindow = window;
+  const container = legacyWindow.elementor.getContainer(element.id);
+  if (!container || container.isLocked()) {
+    return { allowed: false };
+  }
+  return { allowed: true, container };
+}
+function triggerCreateComponentForm(container) {
+  const legacyWindow = window;
+  const elementRect = container.view.el.getBoundingClientRect();
+  const iframeRect = legacyWindow.elementor.$preview[0].getBoundingClientRect();
+  const anchorPosition = {
+    left: iframeRect.left + elementRect.left + elementRect.width / 2,
+    top: iframeRect.top + elementRect.top
+  };
+  window.dispatchEvent(
+    new CustomEvent(OPEN_SAVE_AS_COMPONENT_FORM_EVENT, {
+      detail: {
+        element: container.model.toJSON({ remove: ["default"] }),
+        anchorPosition,
+        options: {
+          trigger: "keyboard",
+          location: "canvas",
+          secondaryLocation: "canvasElement"
+        }
+      }
+    })
+  );
+}
+function initCreateComponentShortcut() {
+  const legacyWindow = window;
+  legacyWindow.$e.shortcuts.register(CREATE_COMPONENT_SHORTCUT_KEYS, {
+    callback: () => {
+      const result = isCreateComponentAllowed();
+      if (!result.allowed) {
+        return;
+      }
+      triggerCreateComponentForm(result.container);
+    },
+    dependency: () => {
+      const result = isCreateComponentAllowed();
+      return result.allowed;
+    },
+    exclude: ["input"]
+  });
+}
+
 // src/populate-store.ts
 import { useEffect as useEffect8 } from "react";
 import { __dispatch as dispatch4 } from "@elementor/store";
@@ -5999,6 +6069,9 @@ function init() {
   if (!!window.elementorPro && !isProAtLeast(PRO_EXTENDED_MIGRATION_VERSION)) {
     initExtended();
   }
+  if (!!window.elementorPro) {
+    initCreateComponentShortcut();
+  }
 }
 export {
   COMPONENT_WIDGET_TYPE,