@elementor/editor-components 3.35.0-489 → 3.35.0-490

package/dist/index.mjs

@@ -17,7 +17,7 @@ import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 import { stylesRepository } from "@elementor/editor-styles-repository";
 import { registerDataHook as registerDataHook6 } from "@elementor/editor-v1-adapters";
 import { __registerSlice as registerSlice } from "@elementor/store";
-import { __ as __30 } from "@wordpress/i18n";
+import { __ as __31 } from "@wordpress/i18n";
 
 // src/component-instance-transformer.ts
 import { createTransformer } from "@elementor/editor-canvas";
@@ -123,6 +123,12 @@ var slice = createSlice({
     addUnpublished: (state, { payload }) => {
       state.unpublishedData.unshift(payload);
     },
+    removeUnpublished: (state, { payload }) => {
+      const uidsToRemove = Array.isArray(payload) ? payload : [payload];
+      state.unpublishedData = state.unpublishedData.filter(
+        (component) => !uidsToRemove.includes(component.uid)
+      );
+    },
     resetUnpublished: (state) => {
       state.unpublishedData = [];
     },
@@ -136,6 +142,9 @@ var slice = createSlice({
     addCreatedThisSession: (state, { payload }) => {
       state.createdThisSession.push(payload);
     },
+    removeCreatedThisSession: (state, { payload }) => {
+      state.createdThisSession = state.createdThisSession.filter((uid) => uid !== payload);
+    },
     archive: (state, { payload }) => {
       const component = state.data.find((comp) => comp.id === payload);
       if (component) {
@@ -3000,7 +3009,7 @@ import { Form as FormElement, ThemeProvider as ThemeProvider3 } from "@elementor
 import { ComponentsIcon as ComponentsIcon3 } from "@elementor/icons";
 import { __getState as getState15 } from "@elementor/store";
 import { Button as Button3, FormLabel as FormLabel2, Grid as Grid2, Popover as Popover3, Stack as Stack10, TextField as TextField3, Typography as Typography10 } from "@elementor/ui";
-import { __ as __22 } from "@wordpress/i18n";
+import { __ as __23 } from "@wordpress/i18n";
 
 // src/prevent-non-atomic-nesting.ts
 import { isAtomicWidget } from "@elementor/editor-canvas";
@@ -3121,9 +3130,11 @@ function findNonAtomicElementsInElement(element) {
 }
 
 // src/store/actions/create-unpublished-component.ts
+import { createElements, deleteElement, getContainer as getContainer3 } from "@elementor/editor-elements";
 import { __privateRunCommand as runCommand3 } from "@elementor/editor-v1-adapters";
 import { __dispatch as dispatch12 } from "@elementor/store";
 import { generateUniqueId as generateUniqueId3 } from "@elementor/utils";
+import { __ as __22 } from "@wordpress/i18n";
 async function createUnpublishedComponent({
   name,
   element,
@@ -3135,6 +3146,13 @@ async function createUnpublishedComponent({
   const generatedUid = uid ?? generateUniqueId3("component");
   const componentBase = { uid: generatedUid, name };
   const elementDataWithOverridablesReverted = revertAllOverridablesInElementData(element);
+  const container = getContainer3(element.id);
+  const modelFromContainer = container?.model?.toJSON?.();
+  const originalElement = {
+    model: modelFromContainer ?? element,
+    parentId: container?.parent?.id ?? "",
+    index: container?.view?._index ?? 0
+  };
   dispatch12(
     slice.actions.addUnpublished({
       ...componentBase,
@@ -3151,9 +3169,30 @@ async function createUnpublishedComponent({
     component_name: name,
     ...eventData
   });
-  await runCommand3("document/save/auto");
+  try {
+    await runCommand3("document/save/auto");
+  } catch (error) {
+    restoreOriginalElement(originalElement, componentInstance.id);
+    dispatch12(slice.actions.removeUnpublished(generatedUid));
+    dispatch12(slice.actions.removeCreatedThisSession(generatedUid));
+    throw error;
+  }
   return { uid: generatedUid, instanceId: componentInstance.id };
 }
+function restoreOriginalElement(originalElement, componentInstanceId) {
+  deleteElement({ elementId: componentInstanceId, options: { useHistory: false } });
+  const clonedModel = structuredClone(originalElement.model);
+  createElements({
+    title: __22("Restore Element", "elementor"),
+    elements: [
+      {
+        containerId: originalElement.parentId,
+        model: clonedModel,
+        options: { at: originalElement.index }
+      }
+    ]
+  });
+}
 
 // src/components/create-component-form/hooks/use-form.ts
 import { useMemo as useMemo2, useState as useState7 } from "react";
@@ -3281,17 +3320,18 @@ function CreateComponentForm() {
       }
       notify3({
         type: "success",
-        message: __22("Component created successfully.", "elementor"),
+        message: __23("Component created successfully.", "elementor"),
         id: `component-saved-successfully-${uid}`
       });
       resetAndClosePopup();
     } catch {
-      const errorMessage = __22("Failed to create component. Please try again.", "elementor");
+      const errorMessage = __23("Failed to create component. Please try again.", "elementor");
       notify3({
         type: "error",
         message: errorMessage,
         id: "component-save-failed"
       });
+      resetAndClosePopup();
     }
   };
   const resetAndClosePopup = () => {
@@ -3331,7 +3371,7 @@ function shouldOpenForm(element, componentsCount) {
       shouldOpen: false,
       notification: {
         type: "default",
-        message: __22(
+        message: __23(
           "Components require atomic elements only. Remove widgets to create this component.",
           "elementor"
         ),
@@ -3345,7 +3385,7 @@ function shouldOpenForm(element, componentsCount) {
       notification: {
         type: "default",
         /* translators: %s is the maximum number of components */
-        message: __22(
+        message: __23(
           `You've reached the limit of %s components. Please remove an existing one to create a new component.`,
           "elementor"
         ).replace("%s", MAX_COMPONENTS.toString()),
@@ -3381,10 +3421,10 @@ var Form2 = ({
     }
   };
   const texts = {
-    heading: __22("Create component", "elementor"),
-    name: __22("Name", "elementor"),
-    cancel: __22("Cancel", "elementor"),
-    create: __22("Create", "elementor")
+    heading: __23("Create component", "elementor"),
+    name: __23("Name", "elementor"),
+    cancel: __23("Cancel", "elementor"),
+    create: __23("Create", "elementor")
   };
   const nameInputId = "component-name";
   return /* @__PURE__ */ React19.createElement(FormElement, { onSubmit: handleSubmit }, /* @__PURE__ */ React19.createElement(Stack10, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React19.createElement(
@@ -3440,7 +3480,7 @@ function updateCurrentComponent({
 import * as React20 from "react";
 import { useEffect as useEffect4 } from "react";
 import { createPortal } from "react-dom";
-import { __ as __23 } from "@wordpress/i18n";
+import { __ as __24 } from "@wordpress/i18n";
 
 // src/hooks/use-canvas-document.ts
 import {
@@ -3570,7 +3610,7 @@ function Backdrop({
       onKeyDown: handleKeyDown,
       role: "button",
       tabIndex: 0,
-      "aria-label": __23("Exit component editing mode", "elementor")
+      "aria-label": __24("Exit component editing mode", "elementor")
     }
   );
 }
@@ -3718,18 +3758,18 @@ import * as React22 from "react";
 import { closeDialog, openDialog } from "@elementor/editor-ui";
 import { InfoCircleFilledIcon } from "@elementor/icons";
 import { Box as Box13, Button as Button4, DialogActions, DialogContent, DialogHeader, Icon, Stack as Stack11, Typography as Typography11 } from "@elementor/ui";
-import { __ as __24 } from "@wordpress/i18n";
+import { __ as __25 } from "@wordpress/i18n";
 var openEditModeDialog = (lockedBy) => {
   openDialog({
     component: /* @__PURE__ */ React22.createElement(EditModeDialog, { lockedBy })
   });
 };
 var EditModeDialog = ({ lockedBy }) => {
-  const content = __24("%s is currently editing this document", "elementor").replace("%s", lockedBy);
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React22.createElement(Box13, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React22.createElement(Icon, { color: "secondary" }, /* @__PURE__ */ React22.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React22.createElement(Typography11, { variant: "subtitle1" }, content))), /* @__PURE__ */ React22.createElement(DialogContent, null, /* @__PURE__ */ React22.createElement(Stack11, { spacing: 2, direction: "column" }, /* @__PURE__ */ React22.createElement(Typography11, { variant: "body2" }, __24(
+  const content = __25("%s is currently editing this document", "elementor").replace("%s", lockedBy);
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React22.createElement(Box13, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React22.createElement(Icon, { color: "secondary" }, /* @__PURE__ */ React22.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React22.createElement(Typography11, { variant: "subtitle1" }, content))), /* @__PURE__ */ React22.createElement(DialogContent, null, /* @__PURE__ */ React22.createElement(Stack11, { spacing: 2, direction: "column" }, /* @__PURE__ */ React22.createElement(Typography11, { variant: "body2" }, __25(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
-  )), /* @__PURE__ */ React22.createElement(DialogActions, null, /* @__PURE__ */ React22.createElement(Button4, { color: "secondary", variant: "contained", onClick: closeDialog }, __24("Close", "elementor"))))));
+  )), /* @__PURE__ */ React22.createElement(DialogActions, null, /* @__PURE__ */ React22.createElement(Button4, { color: "secondary", variant: "contained", onClick: closeDialog }, __25("Close", "elementor"))))));
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
@@ -3741,7 +3781,7 @@ import { PanelBody as PanelBody2, PanelHeader as PanelHeader3, PanelHeaderTitle
 import { EllipsisWithTooltip as EllipsisWithTooltip4 } from "@elementor/editor-ui";
 import { ComponentsIcon as ComponentsIcon4, PencilIcon as PencilIcon2 } from "@elementor/icons";
 import { Divider as Divider4, IconButton as IconButton6, Stack as Stack16, Tooltip as Tooltip5 } from "@elementor/ui";
-import { __ as __26 } from "@wordpress/i18n";
+import { __ as __27 } from "@wordpress/i18n";
 
 // src/hooks/use-component-instance-settings.ts
 import { useElement } from "@elementor/editor-editing-panel";
@@ -3756,13 +3796,13 @@ function useComponentInstanceSettings() {
 import * as React23 from "react";
 import { ComponentPropListIcon as ComponentPropListIcon4, PencilIcon } from "@elementor/icons";
 import { Button as Button5, Stack as Stack12, Typography as Typography12 } from "@elementor/ui";
-import { __ as __25 } from "@wordpress/i18n";
+import { __ as __26 } from "@wordpress/i18n";
 var EmptyState2 = ({ onEditComponent }) => {
   const { canEdit } = useComponentsPermissions();
-  const message = canEdit ? __25(
+  const message = canEdit ? __26(
     "Edit the component to add properties, manage them or update the design across all instances.",
     "elementor"
-  ) : __25(
+  ) : __26(
     "With your current role, you cannot edit this component. Contact an administrator to add properties.",
     "elementor"
   );
@@ -3777,9 +3817,9 @@ var EmptyState2 = ({ onEditComponent }) => {
       gap: 1.5
     },
     /* @__PURE__ */ React23.createElement(ComponentPropListIcon4, { fontSize: "large" }),
-    /* @__PURE__ */ React23.createElement(Typography12, { align: "center", variant: "subtitle2" }, __25("No properties yet", "elementor")),
+    /* @__PURE__ */ React23.createElement(Typography12, { align: "center", variant: "subtitle2" }, __26("No properties yet", "elementor")),
     /* @__PURE__ */ React23.createElement(Typography12, { align: "center", variant: "caption", maxWidth: "170px" }, message),
-    canEdit && /* @__PURE__ */ React23.createElement(Button5, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React23.createElement(PencilIcon, { fontSize: "small" }), __25("Edit component", "elementor"))
+    canEdit && /* @__PURE__ */ React23.createElement(Button5, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React23.createElement(PencilIcon, { fontSize: "small" }), __26("Edit component", "elementor"))
   );
 };
 
@@ -3802,7 +3842,7 @@ import {
   SettingsField,
   useElement as useElement2
 } from "@elementor/editor-editing-panel";
-import { getContainer as getContainer3, getElementType as getElementType3 } from "@elementor/editor-elements";
+import { getContainer as getContainer4, getElementType as getElementType3 } from "@elementor/editor-elements";
 import { Stack as Stack14 } from "@elementor/ui";
 
 // src/hooks/use-controls-by-widget-type.ts
@@ -4011,7 +4051,7 @@ function OverrideControl({ overridableProp, overrides }) {
     overridableProp.label
   );
   const { elementId, widgetType, elType, propKey } = overridableProp.originPropFields ?? overridableProp;
-  const elementContainer = getContainer3(elementId);
+  const elementContainer = getContainer4(elementId);
   if (!elementContainer) {
     throw new OverrideControlInnerElementNotFoundError({
       context: { componentId: componentInstanceId, elementId }
@@ -4174,7 +4214,7 @@ function InstanceEditingPanel() {
   if (!componentId || !overridableProps || !component) {
     return null;
   }
-  const panelTitle = __26("Edit %s", "elementor").replace("%s", component.name);
+  const panelTitle = __27("Edit %s", "elementor").replace("%s", component.name);
   const handleEditComponent = () => switchToComponent(componentId, componentInstanceId);
   const isNonEmptyGroup = (group) => group !== null && group.props.length > 0;
   const groups = overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(isNonEmptyGroup);
@@ -4273,7 +4313,7 @@ import { useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
 import { useElement as useElement4 } from "@elementor/editor-editing-panel";
 import { getWidgetsCache as getWidgetsCache3 } from "@elementor/editor-elements";
 import { bindPopover as bindPopover2, bindTrigger as bindTrigger4, Popover as Popover4, Tooltip as Tooltip6, usePopupState as usePopupState4 } from "@elementor/ui";
-import { __ as __28 } from "@wordpress/i18n";
+import { __ as __29 } from "@wordpress/i18n";
 
 // src/store/actions/set-overridable-prop.ts
 import { __dispatch as dispatch14, __getState as getState17 } from "@elementor/store";
@@ -4358,7 +4398,7 @@ import * as React30 from "react";
 import { forwardRef as forwardRef2 } from "react";
 import { CheckIcon, PlusIcon } from "@elementor/icons";
 import { Box as Box15, styled as styled4 } from "@elementor/ui";
-import { __ as __27 } from "@wordpress/i18n";
+import { __ as __28 } from "@wordpress/i18n";
 var SIZE2 = "tiny";
 var IconContainer = styled4(Box15)`
 	pointer-events: none;
@@ -4418,7 +4458,7 @@ var Indicator2 = forwardRef2(({ isOpen, isOverridable, ...props }, ref) => /* @_
   IconContainer,
   {
     className: "icon",
-    "aria-label": isOverridable ? __27("Overridable property", "elementor") : __27("Make prop overridable", "elementor")
+    "aria-label": isOverridable ? __28("Overridable property", "elementor") : __28("Make prop overridable", "elementor")
   },
   isOverridable ? /* @__PURE__ */ React30.createElement(CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React30.createElement(PlusIcon, { fontSize: SIZE2 })
 )));
@@ -4490,7 +4530,7 @@ function Content2({ componentId, overridableProps }) {
     popupState.close();
   };
   const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(Tooltip6, { placement: "top", title: __28("Override Property", "elementor") }, /* @__PURE__ */ React31.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(Tooltip6, { placement: "top", title: __29("Override Property", "elementor") }, /* @__PURE__ */ React31.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React31.createElement(
     Popover4,
     {
       disableScrollLock: true,
@@ -4530,7 +4570,7 @@ import { getMCPByDomain as getMCPByDomain2 } from "@elementor/editor-mcp";
 
 // src/mcp/save-as-component-tool.ts
 import { DOCUMENT_STRUCTURE_URI, WIDGET_SCHEMA_URI } from "@elementor/editor-canvas";
-import { getContainer as getContainer4, getElementType as getElementType4, getWidgetsCache as getWidgetsCache4 } from "@elementor/editor-elements";
+import { getContainer as getContainer5, getElementType as getElementType4, getWidgetsCache as getWidgetsCache4 } from "@elementor/editor-elements";
 import { getMCPByDomain, toolPrompts } from "@elementor/editor-mcp";
 import { AxiosError } from "@elementor/http-client";
 import { z as z6 } from "@elementor/schema";
@@ -4568,7 +4608,7 @@ var ERROR_MESSAGES3 = {
 var handleSaveAsComponent = async (params) => {
   const { element_id: elementId, component_name: componentName, overridable_props: overridablePropsInput } = params;
   const validElementTypes = getValidElementTypes();
-  const container = getContainer4(elementId);
+  const container = getContainer5(elementId);
   if (!container) {
     throw new Error(ERROR_MESSAGES3.ELEMENT_NOT_FOUND);
   }
@@ -4882,11 +4922,11 @@ import { getAllDescendants as getAllDescendants4 } from "@elementor/editor-eleme
 import { notify as notify4 } from "@elementor/editor-notifications";
 import { blockCommand as blockCommand2 } from "@elementor/editor-v1-adapters";
 import { __getState as getState19 } from "@elementor/store";
-import { __ as __29 } from "@wordpress/i18n";
+import { __ as __30 } from "@wordpress/i18n";
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
   type: "default",
-  message: __29("Can't add this component - components that contain each other can't be nested.", "elementor"),
+  message: __30("Can't add this component - components that contain each other can't be nested.", "elementor"),
   id: "circular-component-nesting-blocked"
 };
 function initCircularNestingPrevention() {
@@ -5059,7 +5099,9 @@ async function createComponentsBeforeSave({
     );
     dispatch17(slice.actions.resetUnpublished());
   } catch (error) {
-    throw new Error(`Failed to publish components and update component instances: ${error}`);
+    const failedUids = unpublishedComponents.map((component) => component.uid);
+    dispatch17(slice.actions.removeUnpublished(failedUids));
+    throw new Error(`Failed to publish components: ${error}`);
   }
 }
 async function createComponents(components, status) {
@@ -5347,7 +5389,7 @@ function load(result) {
 }
 
 // src/sync/regenerate-override-keys.ts
-import { getAllDescendants as getAllDescendants6, getContainer as getContainer5, updateElementSettings as updateElementSettings3 } from "@elementor/editor-elements";
+import { getAllDescendants as getAllDescendants6, getContainer as getContainer6, updateElementSettings as updateElementSettings3 } from "@elementor/editor-elements";
 import { registerDataHook as registerDataHook4 } from "@elementor/editor-v1-adapters";
 import { generateUniqueId as generateUniqueId6 } from "@elementor/utils";
 function initRegenerateOverrideKeys() {
@@ -5368,7 +5410,7 @@ function regenerateOverrideKeysForContainers(result) {
   });
 }
 function regenerateOverrideKeysRecursive(elementId) {
-  const container = getContainer5(elementId);
+  const container = getContainer6(elementId);
   if (!container) {
     return;
   }
@@ -5483,7 +5525,7 @@ function init() {
   window.elementorCommon.__beforeSave = beforeSave;
   injectTab({
     id: "components",
-    label: __30("Components", "elementor"),
+    label: __31("Components", "elementor"),
     component: Components,
     position: 1
   });