@elementor/editor-components 4.0.0-649 → 4.0.0-659

package/dist/index.js

@@ -92,7 +92,7 @@ var import_editor_elements_panel2 = require("@elementor/editor-elements-panel");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
 var import_store44 = require("@elementor/store");
-var import_utils12 = require("@elementor/utils");
+var import_utils13 = require("@elementor/utils");
 var import_i18n33 = require("@wordpress/i18n");
 
 // src/component-instance-transformer.ts
@@ -3914,9 +3914,9 @@ var import_i18n24 = require("@wordpress/i18n");
 
 // src/extended/utils/replace-element-with-component.ts
 var import_editor_elements11 = require("@elementor/editor-elements");
-var replaceElementWithComponent = async (element, component) => {
-  return await (0, import_editor_elements11.replaceElement)({
-    currentElement: element,
+var replaceElementWithComponent = (element, component) => {
+  return (0, import_editor_elements11.replaceElement)({
+    currentElementId: element.id,
     newElement: createComponentModel2(component),
     withHistory: false
   });
@@ -3947,7 +3947,7 @@ async function createUnpublishedComponent({
     overridableProps
   });
   componentsActions.addCreatedThisSession(generatedUid);
-  const componentInstance = await replaceElementWithComponent(element, componentBase);
+  const componentInstance = replaceElementWithComponent(element, componentBase);
   trackComponentEvent({
     action: "created",
     source,
@@ -4186,7 +4186,7 @@ function CreateComponentForm() {
   const { components } = useComponents();
   const eventData = (0, import_react15.useRef)(null);
   (0, import_react15.useEffect)(() => {
-    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) {
@@ -4202,9 +4202,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) => {
@@ -5789,6 +5789,76 @@ function initExtended() {
   });
 }
 
+// src/extended/shortcuts/create-component-shortcut.ts
+var import_editor_elements20 = require("@elementor/editor-elements");
+var import_utils12 = require("@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 = (0, import_editor_elements20.getSelectedElements)();
+  if (selectedElements.length !== 1) {
+    return { allowed: false };
+  }
+  const element = selectedElements[0];
+  const elementType = (0, import_editor_elements20.getElementType)(element.type);
+  if (!elementType) {
+    return { allowed: false };
+  }
+  if (!(0, import_utils12.isProActive)()) {
+    return { allowed: false };
+  }
+  const widgetsCache = (0, import_editor_elements20.getWidgetsCache)();
+  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
 var import_react21 = require("react");
 var import_store37 = require("@elementor/store");
@@ -5800,7 +5870,7 @@ function PopulateStore() {
 }
 
 // src/prevent-circular-nesting.ts
-var import_editor_elements20 = require("@elementor/editor-elements");
+var import_editor_elements21 = require("@elementor/editor-elements");
 var import_editor_notifications5 = require("@elementor/editor-notifications");
 var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
 var import_store38 = require("@elementor/store");
@@ -5895,7 +5965,7 @@ function blockCircularMove(args) {
     if (!container) {
       return false;
     }
-    const allElements = (0, import_editor_elements20.getAllDescendants)(container);
+    const allElements = (0, import_editor_elements21.getAllDescendants)(container);
     return allElements.some((element) => {
       const componentId = extractComponentIdFromContainer(element);
       if (componentId === null) {
@@ -6017,9 +6087,12 @@ function init() {
   import_editor_canvas8.settingsTransformersRegistry.register("override", componentOverrideTransformer);
   initCircularNestingPrevention();
   initLoadComponentDataAfterInstanceAdded();
-  if (!!window.elementorPro && !(0, import_utils12.isProAtLeast)(PRO_EXTENDED_MIGRATION_VERSION)) {
+  if (!!window.elementorPro && !(0, import_utils13.isProAtLeast)(PRO_EXTENDED_MIGRATION_VERSION)) {
     initExtended();
   }
+  if (!!window.elementorPro) {
+    initCreateComponentShortcut();
+  }
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {