@elementor/editor-components 4.0.0-609 → 4.0.0-621

package/dist/index.mjs

@@ -807,7 +807,7 @@ import {
   SettingsField,
   useElement
 } from "@elementor/editor-editing-panel";
-import { getElementType as getElementType2 } from "@elementor/editor-elements";
+import { getElementSettings, getElementType as getElementType2 } from "@elementor/editor-elements";
 import { Stack as Stack7 } from "@elementor/ui";
 
 // src/hooks/use-controls-by-widget-type.ts
@@ -1239,6 +1239,7 @@ function OverrideControl({ overridableProp }) {
   if (!elementType) {
     return null;
   }
+  const settings = getElementSettings(elementId, Object.keys(elementType.propsSchema));
   const propTypeSchema = createTopLevelObjectType({
     schema: {
       [overridableProp.overrideKey]: propType
@@ -1250,7 +1251,7 @@ function OverrideControl({ overridableProp }) {
       value: componentOverridablePropTypeUtil.extract(matchingOverride) ?? void 0,
       componentInstanceElement
     },
-    /* @__PURE__ */ React13.createElement(ElementProvider, { element: { id: elementId, type }, elementType }, /* @__PURE__ */ React13.createElement(SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React13.createElement(ElementProvider, { element: { id: elementId, type }, elementType, settings }, /* @__PURE__ */ React13.createElement(SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React13.createElement(
       PropProvider,
       {
         propType: propTypeSchema,
@@ -1396,7 +1397,6 @@ function EditComponentAction({ label, onClick, disabled = false, icon: Icon2 })
 
 // src/components/instance-editing-panel/use-instance-panel-data.ts
 import { useElement as useElement2 } from "@elementor/editor-editing-panel";
-import { useElementSetting, useSelectedElement } from "@elementor/editor-elements";
 
 // src/utils/filter-valid-overridable-props.ts
 function filterValidOverridableProps(overridableProps, instanceElementId) {
@@ -1472,11 +1472,11 @@ function useSanitizeOverridableProps(componentId, instanceElementId) {
 
 // src/components/instance-editing-panel/use-instance-panel-data.ts
 function useInstancePanelData() {
-  const settings = useComponentInstanceSettings();
+  const { element, settings } = useComponentInstanceSettings();
   const componentId = settings?.component_id?.value;
   const overrides = settings?.overrides?.value;
   const component = useComponent(componentId ?? null);
-  const componentInstanceId = useSelectedElement()?.element?.id;
+  const componentInstanceId = element?.id;
   const overridableProps = useSanitizeOverridableProps(componentId ?? null, componentInstanceId);
   if (!componentId || !overridableProps || !component) {
     return null;
@@ -1487,9 +1487,8 @@ function useInstancePanelData() {
   return { componentId, component, overrides, overridableProps, groups, isEmpty, componentInstanceId };
 }
 function useComponentInstanceSettings() {
-  const { element } = useElement2();
-  const settings = useElementSetting(element.id, "component_instance");
-  return componentInstancePropTypeUtil.extract(settings);
+  const { element, settings } = useElement2();
+  return { element, settings: componentInstancePropTypeUtil.extract(settings.component_instance) };
 }
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
@@ -1539,6 +1538,7 @@ import {
 } from "@elementor/editor-canvas";
 import { getCurrentDocument } from "@elementor/editor-documents";
 import { __getState as getState5 } from "@elementor/store";
+import { hasProInstalled } from "@elementor/utils";
 import { __ as __7 } from "@wordpress/i18n";
 
 // src/utils/format-component-elements-id.ts
@@ -1650,6 +1650,7 @@ var onElementDrop = (_args, element) => {
 
 // src/create-component-type.ts
 var COMPONENT_WIDGET_TYPE = "e-component";
+var EDIT_COMPONENT_UPGRADE_URL = "https://go.elementor.com/go-pro-components-edit/";
 var updateGroups = (groups, config) => {
   const disableMap = new Map(Object.entries(config.disable ?? {}));
   const addMap = new Map(Object.entries(config.add ?? {}));
@@ -1758,6 +1759,10 @@ function createComponentView(options) {
     }
     _getContextMenuConfig() {
       const isAdministrator = isUserAdministrator();
+      const hasPro = hasProInstalled();
+      const proLabel = __7("PRO", "elementor");
+      const badgeClass = "elementor-context-menu-list__item__shortcut__new-badge";
+      const proBadge = `<a href="${EDIT_COMPONENT_UPGRADE_URL}" target="_blank" onclick="event.stopPropagation()" class="${badgeClass}">${proLabel}</a>`;
       const addedGroup = {
         general: {
           index: 1,
@@ -1765,7 +1770,8 @@ function createComponentView(options) {
             name: "edit component",
             icon: "eicon-edit",
             title: () => __7("Edit Component", "elementor"),
-            isEnabled: () => true,
+            ...!hasPro && { shortcut: proBadge, hasShortcutAction: true },
+            isEnabled: () => hasPro,
             callback: (_, eventData) => this.editComponent(eventData)
           }
         }
@@ -1786,7 +1792,8 @@ function createComponentView(options) {
       }
     }
     editComponent({ trigger, location, secondaryLocation }) {
-      if (this.isComponentCurrentlyEdited()) {
+      const hasPro = hasProInstalled();
+      if (!hasPro || this.isComponentCurrentlyEdited()) {
         return;
       }
       this.switchDocument();
@@ -1803,8 +1810,7 @@ function createComponentView(options) {
     }
     handleDblClick(e) {
       e.stopPropagation();
-      const isAdministrator = isUserAdministrator();
-      if (!isAdministrator) {
+      if (!isUserAdministrator() || !hasProInstalled()) {
         return;
       }
       const { triggers, locations, secondaryLocations } = this.eventsManagerConfig;
@@ -2118,8 +2124,7 @@ var ComponentIntroduction = ({
 
 // src/extended/components/component-properties-panel/component-properties-panel.tsx
 import * as React25 from "react";
-import { ElementProvider as ElementProvider2, usePanelActions as useEditingPanelActions } from "@elementor/editor-editing-panel";
-import { useSelectedElement as useSelectedElement2 } from "@elementor/editor-elements";
+import { usePanelActions as useEditingPanelActions } from "@elementor/editor-editing-panel";
 import { __createPanel as createPanel, Panel } from "@elementor/editor-panels";
 import { ThemeProvider as ThemeProvider2 } from "@elementor/editor-ui";
 import { Alert, Box as Box13, ErrorBoundary } from "@elementor/ui";
@@ -3340,13 +3345,9 @@ var { panel, usePanelActions } = createPanel({
   component: ComponentPropertiesPanel
 });
 function ComponentPropertiesPanel() {
-  const { element, elementType } = useSelectedElement2();
   const { close: closePanel } = usePanelActions();
   const { open: openEditingPanel } = useEditingPanelActions();
-  if (!element || !elementType) {
-    return null;
-  }
-  return /* @__PURE__ */ React25.createElement(ThemeProvider2, null, /* @__PURE__ */ React25.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React25.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React25.createElement(ElementProvider2, { element, elementType }, /* @__PURE__ */ React25.createElement(Panel, null, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React25.createElement(ThemeProvider2, null, /* @__PURE__ */ React25.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React25.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React25.createElement(Panel, null, /* @__PURE__ */ React25.createElement(
     ComponentPropertiesPanelContent,
     {
       onClose: () => {
@@ -3354,7 +3355,7 @@ function ComponentPropertiesPanel() {
         openEditingPanel();
       }
     }
-  )))));
+  ))));
 }
 var ErrorBoundaryFallback = () => /* @__PURE__ */ React25.createElement(Box13, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React25.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React25.createElement("strong", null, __17("Something went wrong", "elementor"))));