@elementor/editor-components 3.33.0-200 → 3.33.0-202

package/dist/index.mjs

@@ -10,76 +10,7 @@ import { __ as __6 } from "@wordpress/i18n";
 
 // src/component-id-transformer.ts
 import { createTransformer } from "@elementor/editor-canvas";
-var componentIdTransformer = createTransformer(async (id) => {
-  const extendedWindow = window;
-  const documentManager = extendedWindow.elementor?.documents;
-  if (!documentManager) {
-    throw new Error("Elementor documents manager not found");
-  }
-  const data = await documentManager.request(id);
-  return data.elements ?? [];
-});
-
-// src/components/components-tab/components.tsx
-import * as React6 from "react";
-import { ThemeProvider } from "@elementor/editor-ui";
-
-// src/components/components-tab/component-search.tsx
-import * as React2 from "react";
-import { SearchIcon } from "@elementor/icons";
-import { Box, InputAdornment, Stack, TextField } from "@elementor/ui";
-import { __ } from "@wordpress/i18n";
-
-// src/components/components-tab/search-provider.tsx
-import * as React from "react";
-import { createContext, useContext } from "react";
-import { useSearchState } from "@elementor/utils";
-var SearchContext = createContext(void 0);
-var SearchProvider = ({
-  children,
-  localStorageKey
-}) => {
-  const { debouncedValue, handleChange, inputValue } = useSearchState({ localStorageKey });
-  const clearSearch = () => {
-    handleChange("");
-  };
-  return /* @__PURE__ */ React.createElement(SearchContext.Provider, { value: { handleChange, clearSearch, searchValue: debouncedValue, inputValue } }, children);
-};
-var useSearch = () => {
-  const context = useContext(SearchContext);
-  if (!context) {
-    throw new Error("useSearch must be used within a SearchProvider");
-  }
-  return context;
-};
-
-// src/components/components-tab/component-search.tsx
-var ComponentSearch = () => {
-  const { inputValue, handleChange } = useSearch();
-  return /* @__PURE__ */ React2.createElement(Stack, { direction: "row", gap: 0.5, sx: { width: "100%", px: 2, py: 1.5 } }, /* @__PURE__ */ React2.createElement(Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React2.createElement(
-    TextField,
-    {
-      role: "search",
-      fullWidth: true,
-      size: "tiny",
-      value: inputValue,
-      placeholder: __("Search", "elementor"),
-      onChange: (e) => handleChange(e.target.value),
-      InputProps: {
-        startAdornment: /* @__PURE__ */ React2.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React2.createElement(SearchIcon, { fontSize: "tiny" }))
-      }
-    }
-  )));
-};
-
-// src/components/components-tab/components-list.tsx
-import * as React5 from "react";
-import { ComponentsIcon as ComponentsIcon2, EyeIcon } from "@elementor/icons";
-import { Box as Box4, Divider, Icon, Link, List, Stack as Stack3, Typography as Typography2 } from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
-
-// src/hooks/use-components.ts
-import { __useSelector as useSelector } from "@elementor/store";
+import { __getState as getState } from "@elementor/store";
 
 // src/store/store.ts
 import {
@@ -122,6 +53,7 @@ var loadComponents = createAsyncThunk("components/load", async () => {
 // src/store/store.ts
 var initialState = {
   data: [],
+  unpublishedData: [],
   loadStatus: "idle",
   createStatus: "idle",
   styles: {}
@@ -132,11 +64,21 @@ var slice = createSlice({
   initialState,
   reducers: {
     add: (state, { payload }) => {
-      state.data = { ...payload };
+      if (Array.isArray(payload)) {
+        state.data = [...state.data, ...payload];
+      } else {
+        state.data.unshift(payload);
+      }
     },
     load: (state, { payload }) => {
       state.data = payload;
     },
+    addUnpublished: (state, { payload }) => {
+      state.unpublishedData.unshift(payload);
+    },
+    resetUnpublished: (state) => {
+      state.unpublishedData = [];
+    },
     removeStyles(state, { payload }) {
       const { [payload.id]: _, ...rest } = state.styles;
       state.styles = rest;
@@ -175,7 +117,19 @@ var selectData = (state) => state[SLICE_NAME].data;
 var selectLoadStatus = (state) => state[SLICE_NAME].loadStatus;
 var selectCreateStatus = (state) => state[SLICE_NAME].createStatus;
 var selectStylesDefinitions = (state) => state[SLICE_NAME].styles ?? {};
-var selectComponents = createSelector(selectData, (data) => data);
+var selectUnpublishedData = (state) => state[SLICE_NAME].unpublishedData;
+var selectComponents = createSelector(
+  selectData,
+  selectUnpublishedData,
+  (data, unpublishedData) => [
+    ...unpublishedData.map((item) => ({ id: item.id, name: item.name })),
+    ...data
+  ]
+);
+var selectUnpublishedComponents = createSelector(
+  selectUnpublishedData,
+  (unpublishedData) => unpublishedData
+);
 var selectLoadIsPending = createSelector(selectLoadStatus, (status) => status === "pending");
 var selectLoadIsError = createSelector(selectLoadStatus, (status) => status === "error");
 var selectCreateIsPending = createSelector(selectCreateStatus, (status) => status === "pending");
@@ -183,7 +137,82 @@ var selectCreateIsError = createSelector(selectCreateStatus, (status) => status
 var selectStyles = (state) => state[SLICE_NAME].styles ?? {};
 var selectFlatStyles = createSelector(selectStylesDefinitions, (data) => Object.values(data).flat());
 
+// src/component-id-transformer.ts
+var componentIdTransformer = createTransformer(async (id) => {
+  const unpublishedComponents = selectUnpublishedComponents(getState());
+  const unpublishedComponent = unpublishedComponents.find((component) => component.id === id);
+  if (unpublishedComponent) {
+    return structuredClone(unpublishedComponent.content);
+  }
+  const extendedWindow = window;
+  const documentManager = extendedWindow.elementor?.documents;
+  if (!documentManager) {
+    throw new Error("Elementor documents manager not found");
+  }
+  const data = await documentManager.request(id);
+  return data.elements ?? [];
+});
+
+// src/components/components-tab/components.tsx
+import * as React6 from "react";
+import { ThemeProvider } from "@elementor/editor-ui";
+
+// src/components/components-tab/component-search.tsx
+import * as React2 from "react";
+import { SearchIcon } from "@elementor/icons";
+import { Box, InputAdornment, Stack, TextField } from "@elementor/ui";
+import { __ } from "@wordpress/i18n";
+
+// src/components/components-tab/search-provider.tsx
+import * as React from "react";
+import { createContext, useContext } from "react";
+import { useSearchState } from "@elementor/utils";
+var SearchContext = createContext(void 0);
+var SearchProvider = ({
+  children,
+  localStorageKey
+}) => {
+  const { debouncedValue, handleChange, inputValue } = useSearchState({ localStorageKey });
+  const clearSearch = () => {
+    handleChange("");
+  };
+  return /* @__PURE__ */ React.createElement(SearchContext.Provider, { value: { handleChange, clearSearch, searchValue: debouncedValue, inputValue } }, children);
+};
+var useSearch = () => {
+  const context = useContext(SearchContext);
+  if (!context) {
+    throw new Error("useSearch must be used within a SearchProvider");
+  }
+  return context;
+};
+
+// src/components/components-tab/component-search.tsx
+var ComponentSearch = () => {
+  const { inputValue, handleChange } = useSearch();
+  return /* @__PURE__ */ React2.createElement(Stack, { direction: "row", gap: 0.5, sx: { width: "100%", px: 2, py: 1.5 } }, /* @__PURE__ */ React2.createElement(Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React2.createElement(
+    TextField,
+    {
+      role: "search",
+      fullWidth: true,
+      size: "tiny",
+      value: inputValue,
+      placeholder: __("Search", "elementor"),
+      onChange: (e) => handleChange(e.target.value),
+      InputProps: {
+        startAdornment: /* @__PURE__ */ React2.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React2.createElement(SearchIcon, { fontSize: "tiny" }))
+      }
+    }
+  )));
+};
+
+// src/components/components-tab/components-list.tsx
+import * as React5 from "react";
+import { ComponentsIcon as ComponentsIcon2, EyeIcon } from "@elementor/icons";
+import { Box as Box4, Divider, Icon, Link, List, Stack as Stack3, Typography as Typography2 } from "@elementor/ui";
+import { __ as __2 } from "@wordpress/i18n";
+
 // src/hooks/use-components.ts
+import { __useSelector as useSelector } from "@elementor/store";
 var useComponents = () => {
   const components = useSelector(selectComponents);
   const isLoading = useSelector(selectLoadIsPending);
@@ -239,7 +268,7 @@ function getSelectedElementContainer() {
 
 // src/components/create-component-form/utils/replace-element-with-component.ts
 import { replaceElement } from "@elementor/editor-elements";
-var replaceElementWithComponent = async (element, component) => {
+var replaceElementWithComponent = (element, component) => {
   replaceElement({
     currentElement: element,
     newElement: createComponentModel(component),
@@ -459,26 +488,10 @@ import { useEffect, useMemo as useMemo2, useState as useState2 } from "react";
 import { getElementLabel } from "@elementor/editor-elements";
 import { ThemeProvider as ThemeProvider2 } from "@elementor/editor-ui";
 import { StarIcon } from "@elementor/icons";
+import { __useDispatch as useDispatch } from "@elementor/store";
 import { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack as Stack4, TextField as TextField2, Typography as Typography3 } from "@elementor/ui";
 import { __ as __4 } from "@wordpress/i18n";
 
-// src/hooks/use-create-component.ts
-import { __useDispatch as useDispatch, __useSelector as useSelector2 } from "@elementor/store";
-var useCreateComponent = () => {
-  const dispatch4 = useDispatch();
-  const isPending = useSelector2(selectCreateIsPending);
-  const isError = useSelector2(selectCreateIsError);
-  const createComponentAction = async (payload) => {
-    const result = await dispatch4(createComponent(payload));
-    return result.payload;
-  };
-  return {
-    createComponent: createComponentAction,
-    isPending,
-    isError
-  };
-};
-
 // src/components/create-component-form/hooks/use-form.ts
 import { useMemo, useState } from "react";
 var useForm = (initialValues) => {
@@ -559,7 +572,7 @@ function CreateComponentForm() {
   const [element, setElement] = useState2(null);
   const [anchorPosition, setAnchorPosition] = useState2();
   const [resultNotification, setResultNotification] = useState2(null);
-  const { createComponent: createComponent2, isPending } = useCreateComponent();
+  const dispatch5 = useDispatch();
   useEffect(() => {
     const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
     const openPopup = (event) => {
@@ -572,25 +585,26 @@ function CreateComponentForm() {
     };
   }, []);
   const handleSave = async (values) => {
-    if (!element) {
-      throw new Error(`Can't save element as component: element not found`);
-    }
     try {
-      const result = await createComponent2({
-        name: values.componentName,
-        content: [element.element.model.toJSON({ remove: ["default"] })]
-      });
       if (!element) {
-        throw new Error(`Can't replace element with component: element not found`);
+        throw new Error(`Can't save element as component: element not found`);
       }
+      const tempId = generateTempId();
+      dispatch5(
+        slice.actions.addUnpublished({
+          id: tempId,
+          name: values.componentName,
+          content: [element.element.model.toJSON({ remove: ["default"] })]
+        })
+      );
       replaceElementWithComponent(element.element, {
-        id: result.component_id,
+        id: tempId,
         name: values.componentName
       });
       setResultNotification({
         show: true,
-        // Translators: %1$s: Component name, %2$s: Component ID
-        message: __4("Component saved successfully as: %1$s (ID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", result.component_id.toString()),
+        // Translators: %1$s: Component name, %2$s: Component temp ID
+        message: __4("Component saved successfully as: %1$s (temp ID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", tempId.toString()),
         type: "success"
       });
       resetAndClosePopup();
@@ -620,7 +634,6 @@ function CreateComponentForm() {
       {
         initialValues: { componentName: element.elementLabel },
         handleSave,
-        isSubmitting: isPending,
         closePopup: resetAndClosePopup
       }
     )
@@ -638,7 +651,6 @@ var FONT_SIZE = "tiny";
 var Form = ({
   initialValues,
   handleSave,
-  isSubmitting,
   closePopup
 }) => {
   const { values, errors, isValid, handleChange, validateForm: validateForm2 } = useForm(initialValues);
@@ -683,18 +695,21 @@ var Form = ({
       error: Boolean(errors.componentName),
       helperText: errors.componentName
     }
-  ))), /* @__PURE__ */ React7.createElement(Stack4, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React7.createElement(Button, { onClick: closePopup, disabled: isSubmitting, color: "secondary", variant: "text", size: "small" }, __4("Cancel", "elementor")), /* @__PURE__ */ React7.createElement(
+  ))), /* @__PURE__ */ React7.createElement(Stack4, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React7.createElement(Button, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, __4("Cancel", "elementor")), /* @__PURE__ */ React7.createElement(
     Button,
     {
       onClick: handleSubmit,
-      disabled: isSubmitting || !isValid,
+      disabled: !isValid,
       variant: "contained",
       color: "primary",
       size: "small"
     },
-    isSubmitting ? __4("Creating\u2026", "elementor") : __4("Create", "elementor")
+    __4("Create", "elementor")
   )));
 };
+var generateTempId = () => {
+  return Date.now() + Math.floor(Math.random() * 1e6);
+};
 
 // src/create-component-type.ts
 import {
@@ -789,7 +804,7 @@ function PopulateStore() {
 
 // src/store/components-styles-provider.ts
 import { createStylesProvider } from "@elementor/editor-styles-repository";
-import { __getState as getState, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
+import { __getState as getState2, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
 var componentsStylesProvider = createStylesProvider({
   key: "components-styles",
   priority: 100,
@@ -801,16 +816,16 @@ var componentsStylesProvider = createStylesProvider({
   ),
   actions: {
     all: () => {
-      return selectFlatStyles(getState());
+      return selectFlatStyles(getState2());
     },
     get: (id) => {
-      return selectFlatStyles(getState()).find((style) => style.id === id) ?? null;
+      return selectFlatStyles(getState2()).find((style) => style.id === id) ?? null;
     }
   }
 });
 
 // src/store/load-components-styles.ts
-import { __dispatch as dispatch2, __getState as getState2 } from "@elementor/store";
+import { __dispatch as dispatch2, __getState as getState3 } from "@elementor/store";
 
 // src/utils/get-component-ids.ts
 import { isTransformable } from "@elementor/editor-props";
@@ -834,7 +849,7 @@ async function loadComponentsStyles(elements) {
   if (!componentIds.length) {
     return;
   }
-  const knownComponents = selectStyles(getState2());
+  const knownComponents = selectStyles(getState3());
   const unknownComponentIds = componentIds.filter((id) => !knownComponents[id]);
   if (!unknownComponentIds.length) {
     return;
@@ -868,6 +883,74 @@ function removeComponentStyles(id) {
   dispatch3(slice.actions.removeStyles({ id }));
 }
 
+// src/utils/before-save.ts
+import { updateElementSettings } from "@elementor/editor-elements";
+import { __dispatch as dispatch4, __getState as getState4 } from "@elementor/store";
+var beforeSave = async ({ container, status }) => {
+  const unpublishedComponents = selectUnpublishedComponents(getState4());
+  if (!unpublishedComponents.length) {
+    return;
+  }
+  try {
+    const tempIdToComponentId = await createComponents(unpublishedComponents, status);
+    const elements = container.model.get("elements").toJSON();
+    updateComponentInstances(elements, tempIdToComponentId);
+    dispatch4(
+      slice.actions.add(
+        unpublishedComponents.map((component) => ({
+          id: tempIdToComponentId.get(component.id),
+          name: component.name
+        }))
+      )
+    );
+    dispatch4(slice.actions.resetUnpublished());
+  } catch (error) {
+    throw new Error(`Failed to publish components and update component instances: ${error}`);
+  }
+};
+async function createComponents(components, status) {
+  const tempIdToComponentId = /* @__PURE__ */ new Map();
+  const promises = components.map((component) => {
+    return apiClient.create({ name: component.name, content: component.content, status }).then((response) => {
+      tempIdToComponentId.set(component.id, response.component_id);
+    });
+  });
+  await Promise.all(promises);
+  return tempIdToComponentId;
+}
+function updateComponentInstances(elements, tempIdToComponentId) {
+  elements.forEach((element) => {
+    const { shouldUpdate, newComponentId } = shouldUpdateElement(element, tempIdToComponentId);
+    if (shouldUpdate) {
+      updateElementComponentId(element.id, newComponentId);
+    }
+    if (element.elements) {
+      updateComponentInstances(element.elements, tempIdToComponentId);
+    }
+  });
+}
+function shouldUpdateElement(element, tempIdToComponentId) {
+  if (element.widgetType === "e-component") {
+    const currentComponentId = element.settings?.component?.value;
+    if (currentComponentId && tempIdToComponentId.has(currentComponentId)) {
+      return { shouldUpdate: true, newComponentId: tempIdToComponentId.get(currentComponentId) };
+    }
+  }
+  return { shouldUpdate: false, newComponentId: null };
+}
+function updateElementComponentId(elementId, componentId) {
+  updateElementSettings({
+    id: elementId,
+    props: {
+      component: {
+        $$type: "component-id",
+        value: componentId
+      }
+    },
+    withHistory: false
+  });
+}
+
 // src/init.ts
 var COMPONENT_DOCUMENT_TYPE = "elementor_component";
 function init() {
@@ -881,6 +964,7 @@ function init() {
     }
     return true;
   });
+  window.elementorCommon.__beforeSave = beforeSave;
   injectTab({
     id: "components",
     label: __6("Components", "elementor"),