@elementor/editor-components 3.33.0-252 → 3.33.0-254

package/dist/index.mjs

@@ -72,7 +72,8 @@ var initialState = {
   data: [],
   unpublishedData: [],
   loadStatus: "idle",
-  styles: {}
+  styles: {},
+  createdThisSession: []
 };
 var SLICE_NAME = "components";
 var slice = createSlice({
@@ -101,6 +102,9 @@ var slice = createSlice({
     },
     addStyles: (state, { payload }) => {
       state.styles = { ...state.styles, ...payload };
+    },
+    addCreatedThisSession: (state, { payload }) => {
+      state.createdThisSession.push(payload);
     }
   },
   extraReducers: (builder) => {
@@ -120,11 +124,12 @@ var selectData = (state) => state[SLICE_NAME].data;
 var selectLoadStatus = (state) => state[SLICE_NAME].loadStatus;
 var selectStylesDefinitions = (state) => state[SLICE_NAME].styles ?? {};
 var selectUnpublishedData = (state) => state[SLICE_NAME].unpublishedData;
+var getCreatedThisSession = (state) => state[SLICE_NAME].createdThisSession;
 var selectComponents = createSelector(
   selectData,
   selectUnpublishedData,
   (data, unpublishedData) => [
-    ...unpublishedData.map((item) => ({ id: item.id, name: item.name })),
+    ...unpublishedData.map((item) => ({ uid: item.uid, name: item.name })),
     ...data
   ]
 );
@@ -132,18 +137,14 @@ var selectUnpublishedComponents = createSelector(
   selectUnpublishedData,
   (unpublishedData) => unpublishedData
 );
-var selectComponentsObject = createSelector(
-  selectData,
-  selectUnpublishedData,
-  (data, unpublishedData) => data.concat(unpublishedData).reduce((acc, component) => {
-    acc[component.id] = component;
-    return acc;
-  }, {})
-);
 var selectLoadIsPending = createSelector(selectLoadStatus, (status) => status === "pending");
 var selectLoadIsError = createSelector(selectLoadStatus, (status) => status === "error");
 var selectStyles = (state) => state[SLICE_NAME].styles ?? {};
 var selectFlatStyles = createSelector(selectStylesDefinitions, (data) => Object.values(data).flat());
+var selectCreatedThisSession = createSelector(
+  getCreatedThisSession,
+  (createdThisSession) => createdThisSession
+);
 
 // src/utils/component-document-data.ts
 var getComponentDocumentData = async (id) => {
@@ -168,15 +169,20 @@ function getDocumentsManager() {
 }
 
 // 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.elements);
+var componentIdTransformer = createTransformer(
+  async (id) => {
+    const unpublishedComponents = selectUnpublishedComponents(getState());
+    const unpublishedComponent = unpublishedComponents.find(({ uid }) => uid === id);
+    if (unpublishedComponent) {
+      return structuredClone(unpublishedComponent.elements);
+    }
+    if (typeof id !== "number") {
+      throw new Error(`Component ID "${id}" not found.`);
+    }
+    const data = await getComponentDocumentData(id);
+    return data?.elements ?? [];
   }
-  const data = await getComponentDocumentData(id);
-  return data?.elements ?? [];
-});
+);
 
 // src/components/components-tab/components.tsx
 import * as React6 from "react";
@@ -360,18 +366,19 @@ var createComponentModel = (component) => {
     settings: {
       component: {
         $$type: "component-id",
-        value: component.id
+        value: component.id ?? component.uid
       }
     },
     editor_settings: {
-      title: component.name
+      title: component.name,
+      component_uid: component.uid
     }
   };
 };
 
 // src/components/components-tab/components-item.tsx
 var ComponentItem = ({ component }) => {
-  const componentModel = createComponentModel({ id: component.id, name: component.name });
+  const componentModel = createComponentModel(component);
   const handleClick = () => {
     addComponentToPage(componentModel);
   };
@@ -462,7 +469,7 @@ function ComponentsList() {
     }
     return /* @__PURE__ */ React5.createElement(EmptyState, null);
   }
-  return /* @__PURE__ */ React5.createElement(List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React5.createElement(ComponentItem, { key: component.id, component })));
+  return /* @__PURE__ */ React5.createElement(List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React5.createElement(ComponentItem, { key: component.uid, component })));
 }
 var EmptyState = () => {
   return /* @__PURE__ */ React5.createElement(
@@ -573,6 +580,7 @@ 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 { generateUniqueId } from "@elementor/utils";
 import { __ as __4 } from "@wordpress/i18n";
 
 // src/components/create-component-form/hooks/use-form.ts
@@ -667,27 +675,25 @@ function CreateComponentForm() {
       window.removeEventListener(OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup);
     };
   }, []);
-  const handleSave = async (values) => {
+  const handleSave = (values) => {
     try {
       if (!element) {
         throw new Error(`Can't save element as component: element not found`);
       }
-      const tempId = generateTempId();
+      const uid = generateUniqueId("component");
       dispatch5(
         slice.actions.addUnpublished({
-          id: tempId,
+          uid,
           name: values.componentName,
           elements: [element.element.model.toJSON({ remove: ["default"] })]
         })
       );
-      replaceElementWithComponent(element.element, {
-        id: tempId,
-        name: values.componentName
-      });
+      dispatch5(slice.actions.addCreatedThisSession(uid));
+      replaceElementWithComponent(element.element, { uid, name: values.componentName });
       setResultNotification({
         show: true,
-        // 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()),
+        // Translators: %1$s: Component name, %2$s: Component UID
+        message: __4("Component saved successfully as: %1$s (UID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", uid),
         type: "success"
       });
       resetAndClosePopup();
@@ -704,11 +710,14 @@ function CreateComponentForm() {
     setElement(null);
     setAnchorPosition(void 0);
   };
+  const cancelSave = () => {
+    resetAndClosePopup();
+  };
   return /* @__PURE__ */ React7.createElement(ThemeProvider2, null, /* @__PURE__ */ React7.createElement(
     Popover,
     {
       open: element !== null,
-      onClose: resetAndClosePopup,
+      onClose: cancelSave,
       anchorReference: "anchorPosition",
       anchorPosition
     },
@@ -717,7 +726,7 @@ function CreateComponentForm() {
       {
         initialValues: { componentName: element.elementLabel },
         handleSave,
-        closePopup: resetAndClosePopup
+        closePopup: cancelSave
       }
     )
   ), /* @__PURE__ */ React7.createElement(Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React7.createElement(
@@ -790,9 +799,6 @@ var Form = ({
     __4("Create", "elementor")
   )));
 };
-var generateTempId = () => {
-  return Date.now() + Math.floor(Math.random() * 1e6);
-};
 
 // src/components/edit-component/edit-component.tsx
 import * as React9 from "react";
@@ -803,7 +809,9 @@ import {
   __privateRunCommand as runCommand,
   commandEndEvent as commandEndEvent2
 } from "@elementor/editor-v1-adapters";
-import { __useSelector as useSelector2 } from "@elementor/store";
+
+// src/components/consts.ts
+var COMPONENT_DOCUMENT_TYPE = "elementor_component";
 
 // src/components/edit-component/component-modal.tsx
 import * as React8 from "react";
@@ -1000,7 +1008,6 @@ function EditComponent() {
   return /* @__PURE__ */ React9.createElement(ComponentModal, { element: elementDom, onClose: onBack });
 }
 function useHandleDocumentSwitches(path, setPath) {
-  const components = useSelector2(selectComponentsObject);
   const documentsManager = getV1DocumentsManager();
   useEffect4(
     () => listenTo(commandEndEvent2("editor/documents/attach-preview"), () => {
@@ -1013,14 +1020,14 @@ function useHandleDocumentSwitches(path, setPath) {
       if (currentComponentId) {
         apiClient.unlockComponent(currentComponentId);
       }
-      const isComponent = !!components?.[nextDocument.id];
+      const isComponent = nextDocument.config.type === COMPONENT_DOCUMENT_TYPE;
       if (!isComponent) {
         setPath([]);
         return;
       }
       setPath(getUpdatedComponentPath(path, nextDocument));
     }),
-    [path, setPath, components, documentsManager]
+    [path, setPath, documentsManager]
   );
 }
 function getUpdatedComponentPath(path, nextDocument) {
@@ -1239,14 +1246,15 @@ async function createComponentsBeforeSave({
     return;
   }
   try {
-    const tempIdToComponentId = await createComponents(unpublishedComponents, status);
+    const uidToComponentId = await createComponents(unpublishedComponents, status);
     const elements = container.model.get("elements").toJSON();
-    updateComponentInstances(elements, tempIdToComponentId);
+    updateComponentInstances(elements, uidToComponentId);
     dispatch4(
       slice.actions.add(
         unpublishedComponents.map((component) => ({
-          id: tempIdToComponentId.get(component.id),
-          name: component.name
+          id: uidToComponentId.get(component.uid),
+          name: component.name,
+          uid: component.uid
         }))
       )
     );
@@ -1259,33 +1267,33 @@ async function createComponents(components, status) {
   const response = await apiClient.create({
     status,
     items: components.map((component) => ({
-      temp_id: component.id,
+      uid: component.uid,
       title: component.name,
       elements: component.elements
     }))
   });
   const map = /* @__PURE__ */ new Map();
   Object.entries(response).forEach(([key, value]) => {
-    map.set(Number(key), value);
+    map.set(key, value);
   });
   return map;
 }
-function updateComponentInstances(elements, tempIdToComponentId) {
+function updateComponentInstances(elements, uidToComponentId) {
   elements.forEach((element) => {
-    const { shouldUpdate, newComponentId } = shouldUpdateElement(element, tempIdToComponentId);
+    const { shouldUpdate, newComponentId } = shouldUpdateElement(element, uidToComponentId);
     if (shouldUpdate) {
       updateElementComponentId(element.id, newComponentId);
     }
     if (element.elements) {
-      updateComponentInstances(element.elements, tempIdToComponentId);
+      updateComponentInstances(element.elements, uidToComponentId);
     }
   });
 }
-function shouldUpdateElement(element, tempIdToComponentId) {
+function shouldUpdateElement(element, uidToComponentId) {
   if (element.widgetType === "e-component") {
     const currentComponentId = element.settings?.component?.value;
-    if (currentComponentId && tempIdToComponentId.has(currentComponentId)) {
-      return { shouldUpdate: true, newComponentId: tempIdToComponentId.get(currentComponentId) };
+    if (currentComponentId && uidToComponentId.has(currentComponentId)) {
+      return { shouldUpdate: true, newComponentId: uidToComponentId.get(currentComponentId) };
     }
   }
   return { shouldUpdate: false, newComponentId: null };
@@ -1333,7 +1341,7 @@ var beforeSave = ({ container, status }) => {
 };
 
 // src/init.ts
-var COMPONENT_DOCUMENT_TYPE = "elementor_component";
+var COMPONENT_DOCUMENT_TYPE2 = "elementor_component";
 function init() {
   stylesRepository.register(componentsStylesProvider);
   registerSlice(slice);
@@ -1343,7 +1351,7 @@ function init() {
   );
   registerDataHook("dependency", "editor/documents/close", (args) => {
     const document = getV1CurrentDocument();
-    if (document.config.type === COMPONENT_DOCUMENT_TYPE) {
+    if (document.config.type === COMPONENT_DOCUMENT_TYPE2) {
       args.mode = "autosave";
     }
     return true;